/* ==========================================================================
   Garimpo de Viajantes · Landing v2 · Comum
   Fonte: Figma "Garimpo Digital", página 07 · Layout desktop (frame 85:2).
   Depende de brand/tokens.css e brand/base.css. Cada seção tem o seu
   arquivo em assets/v2/css/NN-nome.css e só usa o que está aqui como base.
   ========================================================================== */

:root,
[data-tema="escuro"] {
  /* Superfície de cartão do Figma (#0C1629): Mint 5% sobre NightSkye */
  --v2-cartao: #0C1629;
  --v2-borda: rgba(239, 255, 230, 0.12);
  --v2-borda-sutil: rgba(239, 255, 230, 0.08);

  /* Papéis da v2 que trocam com o tema (ver .v2-secao--clara) */
  --v2-destaque: var(--gp-sky);       /* trecho em itálico do título, verbos, dados */
  --v2-ponto: var(--gp-lime);         /* bolinha do rótulo, indicador ativo */
}

:root {

  /* Títulos de seção do Figma: 60px no desktop 1440 */
  --v2-fs-titulo: clamp(2.25rem, 1.2rem + 3.2vw, 3.75rem);
  --v2-tr-titulo: -0.03em;

  /* Conteúdo do Figma: 1216px entre margens de 112px no 1440 */
  --v2-largura: 76rem;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { overflow-x: clip; }

/* Largura útil igual à do Figma, margem modular do manual fora dela */
.v2-container {
  width: 100%;
  max-width: calc(var(--v2-largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

.v2-secao { padding-block: clamp(4rem, 2rem + 5vw, 7rem); }

/* Título de seção */
.v2-titulo {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--v2-fs-titulo);
  font-weight: var(--w-semibold);
  line-height: 1.02;
  letter-spacing: var(--v2-tr-titulo);
  color: var(--ink);
  text-wrap: balance;
}

/* Trecho em destaque dentro do título: itálico Light em Sky, como no Figma
   (ex.: "toda agência", "provam"). Sky sobre NightSkye passa AAA. */
.v2-titulo em,
.v2-realce {
  font-style: italic;
  font-weight: var(--w-light);
  color: var(--v2-destaque);
}

/* Some da tela, fica para o leitor de tela */
.v2-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Rótulo de seção · "● Para quem é"
   Figma 85:37: cartão #0C1629, borda Mint 12%, raio 8, DM Sans Medium 13.
   -------------------------------------------------------------------------- */

.v2-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: var(--linha) solid var(--v2-borda);
  border-radius: 8px;
  background: var(--v2-cartao);
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--w-medium);
  line-height: 1.3;
}

.v2-rotulo::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--v2-ponto);
}

/* Variante caixa alta (ex.: "QUEM CONDUZ", "NÍVEIS EM CONSTRUÇÃO").
   Figma 85:170/85:272/85:294: só contorno Sky 40%, texto Sky Bold, raio 6. */
.v2-rotulo--caps {
  padding: 9px 16px;
  border-color: color-mix(in srgb, var(--v2-destaque) 40%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--v2-destaque);
  font-size: var(--fs-label);
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.v2-rotulo--caps::before { width: 6px; height: 6px; background: var(--v2-destaque); }

/* Rótulo em texto corrido, sem caixa (ex.: "+ Do clique à venda") */
.v2-sobretitulo {
  margin: 0;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--ink);
}

/* Etiqueta de conteúdo pendente (ex.: "TEXTO DO CASE A CAMINHO") */
.v2-pendente {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: var(--linha) dashed var(--regua-2);
  border-radius: 6px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   CTA · "Agendar sessão estratégica →"
   Figma 85:68: pílula Garimpo, texto NightSkye, Semibold 16, 18 × 28, gap 10.
   Um CTA só na página inteira, sempre para #agendar.
   -------------------------------------------------------------------------- */

.v2-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 18px 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--acento);
  color: var(--acento-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--w-semibold);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--d-2) var(--ease-out-quart),
    transform var(--d-2) var(--ease-out-quart);
}

.v2-cta:hover { background: #33B1FF; transform: translateY(-1px); }   /* primary 400 */
.v2-cta:active { background: #66C5FF; transform: translateY(0); }     /* primary 300 */

.v2-cta__seta {
  font-size: 15px;
  transition: transform var(--d-2) var(--ease-out-quart);
}
.v2-cta:hover .v2-cta__seta { transform: translateX(3px); }

/* Menor, usado dentro de cartão (Figma 85:257, 85:265) */
.v2-cta--p { padding: 14px 22px; font-size: 14px; }

@media (max-width: 30rem) {
  .v2-cta { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Entrada de bloco: sobe 14px. Estado inicial só existe com JS, então o
   conteúdo nunca depende da animação para aparecer.
   -------------------------------------------------------------------------- */

.js [data-entra] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--d-4) var(--ease-out-expo),
    transform var(--d-4) var(--ease-out-expo);
}
.js [data-entra].entrou { opacity: 1; transform: none; }

/* Verso com máscara, o padrão de título da casa: o GSAP de cada seção
   (js/NN-*-anim.js) sobe o <span> de dentro. Sem GSAP, é texto comum. */
.v2-verso { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.v2-verso > span { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .v2-cta:hover, .v2-cta:hover .v2-cta__seta { transform: none; }
  .js [data-entra] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Seção clara · ritmo entre seções
   Pedido de 30/09/2026: quebrar o "azulzão" com seções claras alternadas.
   A seção recebe data-tema="claro" (os tokens da marca em brand/tokens.css
   cascateiam: fundo Vanilla, tinta NightSkye, réguas escuras) e a classe
   .v2-secao--clara, que pinta o fundo. Aqui só se redefine o que é da v2.

   Regras do claro:
   - Azul Garimpo só como preenchimento (CTA, bolinha do rótulo, indicador).
     Como letra, sobre Vanilla, dá 2,83:1 e reprova.
   - Sky some no claro: o destaque (itálico Light do título, verbos, dados)
     passa para o Garimpo profundo, Garimpo 58% + NightSkye 42% (#0060A1).
   - Lime em letra sobre Vanilla não tem contraste: no claro não entra.
   - Peças que fazem sentido escuras (malha de pontos, case, placa de vidro,
     cartão em degradê) levam data-tema="escuro" e voltam ao tema da página
     dentro da seção clara, como peças inseridas.

   Contraste medido (WCAG 2.1, sobre Vanilla #FFFFED / branco):
     NightSkye (tinta) ................ 19,5:1 / 19,8:1  AAA
     Garimpo profundo (destaque) ...... 6,5:1  / 6,6:1   AA
     ink-2, NightSkye 72% ............. 8,2:1  / 8,3:1   AAA
     ink-3, NightSkye 64% ............. 6,1:1  / 6,1:1   AA
     NightSkye sobre Garimpo (CTA) ..... 6,90:1           AA
   ========================================================================== */

[data-tema="claro"] {
  --v2-cartao: var(--gp-branco);
  --v2-borda: color-mix(in srgb, var(--gp-nightskye) 14%, transparent);
  --v2-borda-sutil: color-mix(in srgb, var(--gp-nightskye) 10%, transparent);
  /* Garimpo profundo: o azul da marca puxado para NightSkye. O Sky faz no
     escuro o papel que este faz no claro, e o Garimpo puro reprova em letra. */
  --v2-destaque: color-mix(in srgb, var(--gp-garimpo) 58%, var(--gp-nightskye));
  --v2-ponto: var(--gp-garimpo);
  /* o 55% do tema claro da marca fica em 4,5:1 cravado em letra de 11px;
     na landing o terceiro tom sobe para 64% */
  --ink-3: color-mix(in srgb, var(--gp-nightskye) 64%, transparent);
}

/* qualquer troca de tema recalcula a tinta herdada (texto sem cor própria) */
[data-tema] { color: var(--ink); }

.v2-secao--clara { background: var(--fundo); }

/* Junta: troca seca de Vanilla para NightSkye, sem degradê e sem raio. O
   contraste entre os dois fundos já desenha a borda do bloco. */