/* ===== Reset ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
}

/* O canto chanfrado pode animar (usado no hover dos botões) */
@property --corte {
  syntax: "<length>";
  inherits: true;
  initial-value: 10px;
}

/* ===== Variáveis ===== */
:root {
  /* Paleta (derivada da marca Banka Network) */
  --noite: #030a1c;
  --noite-2: #06112b;
  --azul-banka: #014e9c;
  --azul-sinal: #067bed;
  --azul-luz: #5aa8ff;
  --gelo: #f4f9fd;
  --nevoa: #8fa6c4;
  --texto-suave: #b9c8dc;
  --linha: rgba(244, 249, 253, 0.14);
  --erro: #ff8f8f;

  /* Tipografia */
  --fonte-display: "Saira", "Segoe UI", system-ui, sans-serif;
  --fonte-base: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Layout */
  --largura-max: 80rem;
  --margem: clamp(1rem, 4vw, 3.5rem);
  --margem-lateral: max(var(--margem), calc((100% - var(--largura-max)) / 2));

  /* Assinatura: os cantos chanfrados a 45° do símbolo da marca.
     Cada elemento usa o seu --corte no clip-path (o polígono é escrito em cada regra
     para o valor ser lido no próprio elemento, e não herdado já calculado do :root). */
  --corte: 10px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ===== Base ===== */
body {
  font-family: var(--fonte-base);
  color: var(--gelo);
  background-color: var(--noite);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Sem seleção de texto nem menu de toque longo; os campos do formulário continuam editáveis */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

img,
svg,
video,
a {
  -webkit-user-drag: none;
}

/* ===== Cursores personalizados (SVG, com PNG de reserva) ===== */
html {
  cursor: url("../assets/icons/cursor-seta.svg") 4 3, url("../assets/icons/cursor-seta.png") 4 3, auto;
}

a,
button,
summary,
.consentimento label,
.consentimento__caixa {
  cursor: url("../assets/icons/cursor-mao.svg") 13 2, url("../assets/icons/cursor-mao.png") 13 2, pointer;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  cursor: text;
}

::selection {
  background: var(--azul-sinal);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--azul-luz);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rotulo-mono {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nevoa);
}

/* ===== Botões =====
 * Fundo chanfrado num pseudo-elemento (o foco continua visível).
 * Hover: uma varredura azul atravessa o botão com um filete de luz na frente,
 * os cantos chanfrados abrem, e a seta sai pela direita e volta pela esquerda.
 */
.botao {
  --botao-fundo: var(--gelo);
  --botao-cor: var(--noite);
  --botao-varrer: var(--azul-sinal);
  --botao-brilho: #a9d4ff;
  --corte-hover: 16px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.95rem 1.45rem;
  font-family: var(--fonte-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--botao-cor);
  /* A cor do texto troca quando a varredura passa pelo meio do botão */
  transition:
    color 0.18s ease 0.24s,
    --corte 0.45s var(--ease),
    transform 0.15s ease;
}

.botao::before,
.botao::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)));
}

.botao::before {
  background: var(--botao-fundo);
}

/* A varredura: um gradiente inclinado largo que desliza da direita para a esquerda */
.botao::after {
  background: linear-gradient(
    112deg,
    var(--botao-varrer) 0 44%,
    var(--botao-brilho) 44% 46.5%,
    transparent 46.5%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  transition: background-position 0.55s cubic-bezier(0.6, 0, 0.3, 1);
}

.botao:hover,
.botao:focus-visible {
  --corte: var(--corte-hover);
}

.botao:hover::after,
.botao:focus-visible::after {
  background-position: 0 0;
}

.botao:active {
  transform: scale(0.97);
}

.botao__icone {
  width: 1rem;
  height: 1rem;
}

.botao:hover .botao__icone,
.botao:focus-visible .botao__icone {
  animation: seta-volta 0.6s var(--ease);
}

@keyframes seta-volta {
  45% {
    transform: translateX(12px);
    opacity: 0;
  }
  46% {
    transform: translateX(-12px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.botao--principal:hover,
.botao--principal:focus-visible {
  --botao-cor: #fff;
}

.botao--vidro {
  --botao-fundo: rgba(244, 249, 253, 0.1);
  --botao-cor: var(--gelo);
  --botao-varrer: rgba(6, 123, 237, 0.85);
  --botao-brilho: rgba(169, 212, 255, 0.9);
  --corte: 8px;
  --corte-hover: 13px;
  padding: 0.75rem 1.1rem;
  font-size: 0.8rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.botao--largo {
  width: 100%;
}

.botao[disabled] {
  cursor: progress;
  opacity: 0.7;
}

/* ===== Topo ===== */
.topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.75rem) var(--margem-lateral);
}

.topo__logo img {
  width: auto;
  height: clamp(2.1rem, 3vw, 2.6rem);
}

/* ===== Hero (dobra única) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.hero__midia {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--noite);
}

.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 68% 50%;
}

.hero__video {
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}

.hero__video.is-tocando {
  opacity: 1;
}

/* Véu para dar leitura ao texto sobre o vídeo */
.hero__midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 10, 28, 0.9) 0%, rgba(3, 10, 28, 0.62) 32%, rgba(3, 10, 28, 0) 60%),
    linear-gradient(0deg, rgba(3, 10, 28, 0.75) 0%, rgba(3, 10, 28, 0) 22%),
    linear-gradient(180deg, rgba(3, 10, 28, 0.55) 0%, rgba(3, 10, 28, 0) 18%);
}

.hero__conteudo {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: clamp(6.5rem, 12vh, 8.5rem) var(--margem-lateral) 2rem;
}

.hero__conteudo > * {
  max-width: 38rem;
}

.selo {
  --corte: 7px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.selo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(6, 123, 237, 0.16);
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)));
}

/* Ponto quadrado: um "pixel" da grelha 4×4 do símbolo */
.selo__ponto {
  width: 6px;
  height: 6px;
  background: var(--azul-luz);
  box-shadow: 0 0 10px var(--azul-sinal);
  animation: pulsar 2.4s ease-in-out infinite;
}

.hero__titulo {
  max-width: 19ch;
  font-family: var(--fonte-display);
  font-size: clamp(2.05rem, 1.1rem + 3.3vw, 4.1rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__titulo em {
  font-style: normal;
  color: var(--azul-luz);
}

.hero__texto {
  max-width: 32rem;
  margin-top: 1.4rem;
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--texto-suave);
  text-wrap: pretty;
}

.hero__acao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  margin-top: clamp(2rem, 4.5vh, 2.75rem);
}

.hero__oferta {
  max-width: 28rem;
  padding-left: 1rem;
  border-left: 2px solid var(--azul-sinal);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

.hero__oferta strong {
  font-weight: 500;
  color: var(--gelo);
}

.hero .botao--principal {
  padding: 1.1rem 1.7rem;
}

/* ===== Rodapé ===== */
.rodape {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.25rem var(--margem-lateral) max(1.25rem, env(safe-area-inset-bottom));
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nevoa);
}

.rodape a {
  transition: color 0.2s;
}

.rodape a:hover {
  color: var(--gelo);
}

/* ===== Entrada orquestrada ===== */
.entrada {
  animation: subir 0.95s var(--ease) both;
  animation-delay: calc(var(--atraso, 0) * 110ms + 150ms);
}

.topo {
  animation: aparecer 1s var(--ease) both;
}

/* Palavra a palavra: opacidade 0 → 100%, com um leve desfoque que se dissipa */
.palavra {
  display: inline-block;
  animation: palavra-surgir 0.9s var(--ease) backwards;
}

.a-carregar .palavra {
  animation-play-state: paused;
}

@keyframes palavra-surgir {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(0.3em);
  }
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
  }
}

@keyframes pulsar {
  50% {
    opacity: 0.35;
  }
}

/* ===== Popup de cadastro ===== */
.modal {
  --corte: 22px;
  width: min(30rem, 100% - 2rem);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gelo);
  overflow: visible;
}

.modal::backdrop {
  background: rgba(2, 6, 18, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal[open] {
  animation: modal-entrar 0.45s var(--ease);
}

.modal[open]::backdrop {
  animation: aparecer 0.35s ease;
}

@keyframes modal-entrar {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

/* Moldura de 1px com brilho, recortada com o mesmo chanfro */
.modal__moldura {
  padding: 1px;
  background: linear-gradient(155deg, rgba(90, 168, 255, 0.75), rgba(244, 249, 253, 0.08) 38%, rgba(244, 249, 253, 0.06) 70%, rgba(6, 123, 237, 0.5));
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)));
}

.modal__painel {
  --corte: 21.5px;
  position: relative;
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(6, 123, 237, 0.18), transparent 60%),
    var(--noite-2);
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)));
}

.modal__fechar {
  position: absolute;
  top: 1rem;
  right: 1.6rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--nevoa);
  transition: color 0.2s;
}

.modal__fechar svg {
  width: 1rem;
  height: 1rem;
}

.modal__fechar:hover {
  color: var(--gelo);
}

.modal__titulo {
  margin-top: 0.5rem;
  font-family: var(--fonte-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.modal__titulo:focus {
  outline: none;
}

.modal__intro {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* ===== Formulário ===== */
.formulario {
  display: grid;
  gap: 1rem;
  margin-top: 1.6rem;
}

.campo {
  display: grid;
  gap: 0.4rem;
}

.campo__rotulo {
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nevoa);
  transition: color 0.2s;
}

.campo:focus-within .campo__rotulo {
  color: var(--azul-luz);
}

.campo__entrada,
.campo__telefone {
  --corte: 7px;
  width: 100%;
  background: rgba(244, 249, 253, 0.06);
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)));
  transition: background-color 0.2s, box-shadow 0.2s;
}

.campo__entrada {
  padding: 0.8rem 0.95rem;
  border: 0;
  font-size: 1rem;
  line-height: 1.4;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.campo__entrada::placeholder {
  color: rgba(143, 166, 196, 0.55);
}

.campo__entrada:hover {
  background-color: rgba(244, 249, 253, 0.09);
}

/* Foco: o contorno seria cortado pelo chanfro, então usamos fundo + barra inferior */
.campo__entrada:focus,
.campo__telefone:focus-within {
  outline: none;
  background-color: rgba(6, 123, 237, 0.14);
  box-shadow: inset 0 -2px 0 var(--azul-luz);
}

.campo__telefone {
  display: flex;
  align-items: stretch;
}

.campo__telefone .campo__entrada {
  background: transparent;
  clip-path: none;
  box-shadow: none;
  padding-left: 0.75rem;
}

.campo__prefixo {
  display: flex;
  align-items: center;
  padding: 0 0.1rem 0 0.95rem;
  font-family: var(--fonte-mono);
  font-size: 0.95rem;
  color: var(--texto-suave);
}

.campo__prefixo::after {
  content: "";
  width: 1px;
  height: 1.1rem;
  margin-left: 0.75rem;
  background: var(--linha);
}

.campo--erro .campo__entrada,
.campo--erro .campo__telefone {
  box-shadow: inset 0 -2px 0 var(--erro);
}

.campo--erro .campo__telefone .campo__entrada {
  box-shadow: none;
}

.campo__erro,
.formulario__erro-envio {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--erro);
}

.campo__erro:empty,
.formulario__erro-envio:empty {
  display: none;
}

.campo-isco {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consentimento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-top: 0.25rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

.consentimento a {
  color: var(--gelo);
  text-decoration: underline;
  text-decoration-color: var(--azul-sinal);
  text-underline-offset: 3px;
}

.consentimento__caixa {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  border: 1px solid rgba(244, 249, 253, 0.35);
  background: rgba(244, 249, 253, 0.04);
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.2s, border-color 0.2s;
}

.consentimento__caixa:checked {
  border-color: var(--azul-sinal);
  background: var(--azul-sinal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.consentimento--erro .consentimento__caixa {
  border-color: var(--erro);
}

.formulario .botao--principal {
  margin-top: 0.5rem;
}

/* Sucesso */
.modal__sucesso {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 1.5rem 0 0.5rem;
  text-align: center;
}

.modal__sucesso[hidden] {
  display: none;
}

.modal__simbolo {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 0 18px rgba(6, 123, 237, 0.7));
}

.modal__sucesso .botao {
  margin-top: 1.5rem;
}

.pagina-hero.modal-aberto {
  overflow: hidden;
}

/* ===== Retrato (telemóveis e tablets na vertical) =====
 * O símbolo deixa de ser fundo e passa a ocupar o espaço abaixo do texto,
 * para as arestas do vidro nunca cruzarem as linhas de leitura.
 */
@media (orientation: portrait) {
  .hero {
    display: flex;
    flex-direction: column;
  }

  .hero__conteudo {
    order: 1;
    align-self: stretch;
    padding-top: clamp(5.5rem, 12vh, 8rem);
    padding-bottom: 0;
  }

  .hero__midia {
    order: 2;
    position: relative;
    inset: auto;
    flex: 1 0 clamp(15rem, 40svh, 36rem);
    margin-top: -2.5rem;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
  }

  /* Tablets na vertical: vídeo horizontal, símbolo ligeiramente à direita */
  .hero__poster,
  .hero__video {
    object-position: 62% 50%;
  }

  .hero__midia::after {
    background: linear-gradient(0deg, rgba(3, 10, 28, 0.85) 0%, rgba(3, 10, 28, 0) 26%);
  }

  .hero .rodape {
    order: 3;
    position: absolute;
    inset: auto 0 0;
    padding-top: 2.5rem;
    background: linear-gradient(0deg, rgba(3, 10, 28, 0.96) 55%, rgba(3, 10, 28, 0));
  }
}

/* Telemóveis na vertical: o vídeo vertical volta a ser o fundo da tela inteira,
   centrado, sem deslocamento (pedido do cliente: o quadro aparece completo) */
@media (orientation: portrait) and (max-width: 37.49rem) {
  .hero__midia {
    order: 0;
    position: absolute;
    inset: 0;
    flex: none;
    margin-top: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__poster,
  .hero__video {
    object-position: 50% 50%;
  }

  /* Véu só no topo (leitura do texto) e na base (rodapé) */
  .hero__midia::after {
    background:
      linear-gradient(180deg, rgba(3, 10, 28, 0.6) 0%, rgba(3, 10, 28, 0.3) 45%, rgba(3, 10, 28, 0) 62%),
      linear-gradient(0deg, rgba(3, 10, 28, 0.7) 0%, rgba(3, 10, 28, 0) 14%);
  }
}

@media (max-width: 40rem) {
  /* Em ecrãs estreitos as quebras fixas criariam linhas soltas: o texto quebra sozinho */
  .quebra {
    display: none;
  }

  .topo__cta {
    display: none;
  }

  .hero__titulo {
    font-size: clamp(1.85rem, 1.2rem + 3.4vw, 2.4rem);
    line-height: 1.08;
  }

  .hero__acao {
    align-items: stretch;
  }

  .hero .botao--principal {
    width: 100%;
  }

  .rodape {
    justify-content: center;
    text-align: center;
  }
}

/* Ecrãs baixos em paisagem (portáteis pequenos) */
@media (orientation: landscape) and (max-height: 42rem) {
  .hero__titulo {
    font-size: clamp(1.9rem, 1rem + 2.6vw, 3rem);
  }

  .selo {
    margin-bottom: 1rem;
  }
}

/* ===== Página de texto (Política de privacidade) ===== */
.pagina-texto .topo {
  position: relative;
  border-bottom: 1px solid var(--linha);
}

.artigo {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--margem) clamp(3rem, 8vw, 6rem);
}

.artigo h1 {
  margin-top: 0.75rem;
  font-family: var(--fonte-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.artigo__data {
  margin-top: 1rem;
  color: var(--nevoa);
  font-size: 0.9rem;
}

.artigo h2 {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  font-family: var(--fonte-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
}

.artigo p,
.artigo ul {
  margin-top: 1rem;
  color: var(--texto-suave);
}

.artigo ul {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.1rem;
}

.artigo li {
  position: relative;
}

.artigo li::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.65em;
  width: 5px;
  height: 5px;
  background: var(--azul-sinal);
}

.artigo strong {
  font-weight: 500;
  color: var(--gelo);
}

.artigo a {
  color: var(--gelo);
  text-decoration: underline;
  text-decoration-color: var(--azul-sinal);
  text-underline-offset: 3px;
}

/* Dados que ainda faltam: bem visíveis para não passarem despercebidos */
.pendente {
  padding: 0.05em 0.35em;
  border: 1px dashed #f5c451;
  background: rgba(245, 196, 81, 0.12);
  color: #f5c451;
  font-family: var(--fonte-mono);
  font-size: 0.88em;
}

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.voltar svg {
  width: 1rem;
  height: 1rem;
  transform: rotate(180deg);
}

/* ===== Preloader =====
 * 1. Os 16 "pixels" surgem e acendem conforme a página carrega;
 * 2. a 100% montam-se no símbolo (vazios somem, cantos viram chanfros, espaços fecham);
 * 3. o painel sobe com o canto inferior esquerdo chanfrado a 45°, como na logo.
 */
@property --pl-chanfro {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.preloader {
  display: none;
}

.js .preloader {
  --p: 0;
  --pl-chanfro: 0px;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--noite);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pl-chanfro) 100%, 0 calc(100% - var(--pl-chanfro)));
  will-change: transform;
}

html.a-carregar {
  overflow: hidden;
}

/* O hero só começa a entrar quando o preloader sai */
.a-carregar .entrada,
.a-carregar .topo {
  animation-play-state: paused;
}

.preloader__centro {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  transition: transform 0.7s var(--ease), opacity 0.5s ease;
}

.preloader__simbolo {
  --s: 22px;
  --g: 7px;
  display: grid;
  grid-template-columns: repeat(4, var(--s));
  gap: var(--g);
  filter: drop-shadow(0 0 8px rgba(6, 123, 237, 0.45));
  transition: filter 0.8s ease;
}

.pl-celula {
  width: var(--s);
  height: var(--s);
  background: rgba(244, 249, 253, 0.16);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: scale(0.3);
  transition:
    transform 0.55s var(--ease),
    background-color 0.35s ease,
    opacity 0.4s ease,
    clip-path 0.55s var(--ease);
  animation: pl-surgir 0.5s var(--ease) backwards;
  animation-delay: calc((var(--c) + var(--r)) * 55ms);
}

.pl-celula.aceso {
  background: var(--azul-sinal);
  transform: scale(0.62);
}

/* Montagem: cada pixel desliza para fechar os espaços da grelha */
.pl--montar .preloader__simbolo {
  filter: drop-shadow(0 0 22px rgba(6, 123, 237, 0.85));
}

.pl--montar .pl-celula {
  background: var(--gelo);
  transform: translate(calc((1.5 - var(--c)) * var(--g)), calc((1.5 - var(--r)) * var(--g))) scale(1.03);
  transition-delay: calc((var(--c) + var(--r)) * 35ms);
}

.pl--montar .pl-celula[data-t="v"] {
  opacity: 0;
  transform: translate(calc((1.5 - var(--c)) * var(--g)), calc((1.5 - var(--r)) * var(--g))) scale(0);
}

.pl--montar .pl-celula[data-t="tr"] {
  clip-path: polygon(0 0, 0 0, 100% 100%, 0 100%);
}

.pl--montar .pl-celula[data-t="bl"] {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
}

.preloader__info {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  width: 13rem;
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nevoa);
}

.preloader__valor {
  color: var(--gelo);
  font-variant-numeric: tabular-nums;
}

.preloader__barra {
  width: 13rem;
  height: 2px;
  margin-top: -1rem;
  background: var(--linha);
  overflow: hidden;
}

.preloader__barra span {
  display: block;
  height: 100%;
  background: var(--azul-sinal);
  box-shadow: 0 0 8px var(--azul-sinal);
  transform: scaleX(var(--p));
  transform-origin: left;
}

.pl--montar .preloader__info,
.pl--montar .preloader__barra {
  opacity: 0;
  transition: opacity 0.4s ease 0.2s;
}

/* Saída: o painel sobe e o chanfro abre no canto inferior esquerdo */
.preloader.pl--sair {
  --pl-chanfro: 45vmin;
  transform: translateY(-100%);
  transition:
    transform 1s cubic-bezier(0.76, 0, 0.24, 1),
    --pl-chanfro 1s cubic-bezier(0.76, 0, 0.24, 1);
}

.pl--sair .preloader__centro {
  transform: translateY(-3rem) scale(0.9);
  opacity: 0;
}

@keyframes pl-surgir {
  from {
    opacity: 0;
    transform: scale(0);
  }
}

@media (max-width: 40rem) {
  .preloader__simbolo {
    --s: 18px;
    --g: 6px;
  }
}

/* ===== Movimento reduzido ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}