/* ==========================================================================
   Método Nevada · tema, superfícies e camada mobile-first.
   O styles.css de produção não é alterado. Tudo aqui é adição.

   Direção: o azul é a cor principal; os detalhes são brancos.
   A variedade vem de TONS de azul (4 profundidades), não de uma segunda cor.
   O branco fica reservado pro que precisa saltar: frase-chave, número,
   régua, sublinhado e CTA.

   Troca de superfície: as utilities do Tailwind compilado leem os tokens
   BASE (var(--bone)), mas os valores arbitrários no markup leem os ALIASES
   (bg-[color:var(--color-graphite)]). Alias herda valor computado, então
   [data-surface] precisa redefinir os dois conjuntos.
   ========================================================================== */

:root{
  --nv-fundo:#08213F;      /* profundo: hero, vídeo, CTA, rodapé */
  --nv-leitura:#0F3157;    /* leitura: um degrau mais claro */
  --nv-card:#123659;       /* card sobre o profundo */
  --nv-card-alt:#16406E;   /* card sobre a leitura */
  --nv-accent:#7CB3E8;     /* interativo */
  --nv-accent-2:#5A97D3;
  --nv-sec:#B8D2EA;        /* texto secundário */
  --nv-linha:rgba(255,255,255,.13);
  --nv-branco:#FFFFFF;
  --nv-measure:65ch;
}

body{
  background-color:var(--nv-fundo) !important;
  background-image:radial-gradient(120% 65% at 50% 0%, #11365E 0%, #08213F 58%, #061A33 100%) !important;
  color:var(--nv-branco);
}

/* ---------- Superfície de LEITURA --------------------------------------- */
[data-surface="light"]{
  --graphite:var(--nv-card-alt);
  --graphite-2:var(--nv-card-alt);
  --bone:var(--nv-branco);
  --accent-blue:var(--nv-accent);
  --accent-blue-2:var(--nv-accent-2);
  --border:var(--nv-linha);
  --background:var(--nv-leitura);
  --foreground:var(--nv-branco);

  --color-graphite:var(--nv-card-alt);
  --color-graphite-2:var(--nv-card-alt);
  --color-bone:var(--nv-branco);
  --color-accent-blue:var(--nv-accent);
  --color-accent-blue-2:var(--nv-accent-2);
  --color-border:var(--nv-linha);
  --color-background:var(--nv-leitura);
  --color-foreground:var(--nv-branco);

  background:var(--nv-leitura);
  color:var(--nv-branco);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* Classes autorais com hex literal, que não seguem os tokens. */
.card-nv{background:var(--nv-card);border:1px solid var(--nv-linha);backdrop-filter:none}
[data-surface="light"] .card-nv{background:var(--nv-card-alt);border:1px solid rgba(255,255,255,.14)}
.card-nv-hover:hover,[data-surface="light"] .card-nv-hover:hover{
  border-color:rgba(255,255,255,.30);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.55);
}
.kicker,[data-surface="light"] .kicker{
  color:var(--nv-branco);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:none;
}
.kicker-dot,[data-surface="light"] .kicker-dot{
  background:var(--nv-branco);box-shadow:0 0 10px rgba(255,255,255,.55);
}
.photo-slot,[data-surface="light"] .photo-slot{
  color:var(--nv-sec);
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px), rgba(255,255,255,.04);
  border:1.5px dashed rgba(255,255,255,.22);
}
.photo-slot:hover,[data-surface="light"] .photo-slot:hover{border-color:rgba(255,255,255,.38)}
.section-num,[data-surface="light"] .section-num{color:rgba(255,255,255,.05)}
.photo-real,[data-surface="light"] .photo-real{border-color:var(--nv-linha)}
.photo-real::after,[data-surface="light"] .photo-real::after{
  background:linear-gradient(180deg, rgba(8,33,63,0) 58%, rgba(8,33,63,.42) 100%);
}

/* Texto secundário: azul claro, nunca cinza. */
[data-surface="light"] .text-bone\/80,
[data-surface="light"] .text-bone\/85,
[data-surface="light"] .text-bone\/75,
[data-surface="light"] .text-bone\/65,
[data-surface="light"] .text-bone\/60,
[data-surface="light"] .text-bone\/55{color:var(--nv-sec)}

/* ---------- DETALHES BRANCOS -------------------------------------------- */
.hl,[data-surface="light"] .hl{color:var(--nv-branco)}
.nv-stat,[data-surface="light"] .nv-stat{color:var(--nv-branco);font-variant-numeric:tabular-nums}
.nv-proof,[data-surface="light"] .nv-proof{color:var(--nv-branco)}
.draw-under,[data-surface="light"] .draw-under{background:var(--nv-branco)}
.gold-rule,[data-surface="light"] .gold-rule{background:linear-gradient(90deg, var(--nv-branco), transparent)}
.nv-prose strong,[data-surface="light"] .nv-prose strong{
  color:var(--nv-branco);font-weight:700;
  box-shadow:inset 0 -0.5em 0 rgba(255,255,255,.10);
}

/* CTA: bloco branco cheio. O detalhe branco mais forte da página. */
.btn-nv,[data-surface="light"] .btn-nv{
  color:var(--nv-fundo);background:var(--nv-branco);border-color:var(--nv-branco);
}
.btn-nv-fill::before,[data-surface="light"] .btn-nv-fill::before{
  background:linear-gradient(180deg,#E4EFFA,#CBDFF3);
}
.btn-nv-fill:hover:not(:disabled),[data-surface="light"] .btn-nv-fill:hover:not(:disabled){
  color:var(--nv-fundo);box-shadow:0 12px 30px -10px rgba(255,255,255,.35);
}

/* Campos: vidro sobre o azul, foco branco. */
#gate-form input,#q-body input{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.20);
  color:var(--nv-branco);
}
#gate-form input::placeholder,#q-body input::placeholder{color:rgba(255,255,255,.42)}
#gate-form input:focus,#q-body input:focus{
  border-color:var(--nv-branco);box-shadow:0 0 0 3px rgba(255,255,255,.16);
}

/* ---------- MEDIDA DE LEITURA E CENTRALIZAÇÃO --------------------------- */
.nv-center{margin-inline:auto}
.nv-measure{max-width:var(--nv-measure);margin-inline:auto}
.nv-measure p{line-height:1.72}
.nv-measure p + p{margin-top:1.35rem}
h1,h2,h3{text-wrap:balance}

/* ---------- GATE --------------------------------------------------------- */
.nv-gate-pad{padding-top:2.25rem;padding-bottom:2.25rem}
.nv-gate{width:100%;max-width:34rem;margin-inline:auto}
.nv-gate-h1{margin-top:1.15rem;font-size:1.68rem;line-height:1.14;font-weight:700}
.nv-gate-lead{margin-top:1.05rem;font-size:15px;line-height:1.62;color:var(--nv-sec)}
.nv-gate-fine{margin-top:.7rem;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.6)}
.nv-gate-card{margin-top:1.6rem}
.nv-gate-box{padding:1.25rem}
.nv-gate-priv{margin-top:1.15rem;font-size:12px;line-height:1.6;color:rgba(255,255,255,.6)}
#gate-form{margin-top:1.5rem;display:grid;gap:1rem}

/* ---------- VÍDEO / CTA -------------------------------------------------- */
.nv-video{overflow:hidden;border-radius:14px;line-height:0}
.nv-video vturb-smartplayer{border-radius:14px;overflow:hidden;display:block}
.nv-cta{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;width:100%}
.nv-cta-note{font-size:12.5px;line-height:1.6;color:var(--nv-sec);max-width:46ch}

/* ---------- CONTEÚDO TRAVADO ATÉ O UNLOCK -------------------------------- */
.delayed{display:none !important}
.nv-locked{
  display:flex;flex-direction:column;gap:.5rem;
  border:1px dashed rgba(255,255,255,.24);border-radius:14px;
  padding:1.15rem 1.25rem;margin-top:1.5rem;
  background:rgba(255,255,255,.04);
}
.nv-locked-t{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--nv-branco)}
.nv-locked-d{font-size:14px;line-height:1.6;color:var(--nv-sec)}
body.nv-unlocked .nv-locked{display:none}

/* ---------- OVERLAY DO QUIZ ---------------------------------------------- */
#quiz-overlay{
  position:fixed;inset:0;z-index:9999;overflow-y:auto;display:flex;
  align-items:flex-start;justify-content:center;padding:24px 20px 48px;
  background:radial-gradient(120% 65% at 50% 0%, #11365E 0%, #08213F 58%, #061A33 100%);
}
.nv-overlay-inner{width:100%;max-width:620px;margin:auto}
.nv-overlay-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.nv-overlay-close{
  background:none;border:0;cursor:pointer;color:rgba(255,255,255,.62);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:color .2s;
  min-height:44px;padding:0 .25rem;
}
.nv-overlay-close:hover{color:var(--nv-branco)}

/* ---------- MOBILE-FIRST: base = telefone, melhora pra cima -------------- */
.btn-nv{width:100%;justify-content:center;padding:1.05rem 1.5rem;min-height:52px}
#gate-form input,#q-body input{min-height:52px;font-size:16px}
#q-body button[data-opt]{min-height:54px}
.section-num{font-size:clamp(4rem,22vw,7rem);top:.6rem;right:.6rem}
.container-lp{padding-inline:1.15rem}

a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--nv-branco);outline-offset:2px;
}

@media (min-width:768px){
  .nv-gate-pad{padding-top:3.5rem;padding-bottom:3.5rem}
  .nv-gate-h1{font-size:2.3rem}
  .nv-gate-lead{font-size:16px}
  .nv-gate-box{padding:1.75rem}
  .btn-nv{width:auto;padding:.95rem 1.7rem;min-height:0}
  .section-num{font-size:clamp(6rem,18vw,14rem);top:1.5rem;right:1.25rem}
  .container-lp{padding-inline:1.25rem}
  .nv-cta{flex-direction:row;align-items:center;gap:1.25rem}
}

@media (max-width:560px){#quiz-overlay{padding:18px 16px 40px}}
@media (prefers-reduced-motion:reduce){.step-anim{animation:none !important}}

/* Blindagem: imagem quebrada carrega o atributo width= como largura
   intrínseca e, sendo item de grid (min-width:auto), estica a trilha e
   estoura a viewport. Estes três cortam esse modo de falha. */
.grid > *{min-width:0}
.photo-real{max-width:100%}
.photo-real > img{max-width:100%}

/* ---------- Ajustes finos de mobile -------------------------------------- */
@media (max-width:560px){
  /* O número do stat quebrava em duas linhas num card de ~177px. */
  .nv-stat{font-size:1.3rem;line-height:1.2}
  /* Respiro um pouco menor entre seções: a página é longa. */
  section{padding-block:44px !important}
}
/* Link do rodapé tinha 15px de alvo de toque. */
footer a{display:inline-flex;align-items:center;min-height:44px}

/* O styles.css compilado não tem text-[1.4rem]; o título da tela de
   agradecimento ficava em tamanho de corpo. Definido aqui. */
.nv-success-h{font-size:1.4rem;line-height:1.25}
@media (min-width:768px){.nv-success-h{font-size:1.7rem}}

/* A foto da premiação é retrato: largura contida pra não dominar a coluna. */
.nv-foto-retrato{max-width:26rem;margin-inline:auto}