/* ===========================================================================
   tokens.css — a base do site do Anderson Vieira.
   Tudo aqui saiu medido da imagem aprovada (direcao/base-desktop.jpg +
   direcao/base-mobile.png) pelo Ato 1 do Time de Fidelidade:
   cor  → direcao/spec.md §Paleta medida
   tipo → direcao/fontes.md
   movimento → direcao/coreografia.md §Tokens
   Nenhum valor aqui é gosto do executor. É o que a imagem mostra.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Gantari:wght@100..600&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=recia@601&display=swap"); /* 601 = 600 italic */

:root{
  /* ---------- TINTA (hex medido na imagem, não escolhido) ---------- */
  --chao:            #0B0B0C;   /* preto quente das áreas chapadas */
  --chao-canto:      #070709;   /* cantos inferiores */
  --ambar:           #DA9D4A;   /* acento de ação — CHAPADO, sem gradiente */
  --ambar-luz:       #E7AE5E;   /* hover: a luz sobe 7% na pílula */
  --ambar-fundo:     #C98D3D;   /* ativo */
  --ambar-halo:      #A67749;   /* halo da fonte de luz fora de quadro */
  /* #FFFFFF É LEI (design-guide, medido 255,255,255 na imagem aprovada) —
     divergência DECLARADA do tell 3 do detector; não "corrigir" pra quase-branco. */
  --branco:          #FFFFFF;   /* wordmark, headline, nav, link (medido 255,255,255) */
  --branco-quente:   #FFF6EA;   /* hover de texto: o que está perto da luz esquenta */
  --cinza-selo:      #B7B7B9;
  --cinza-rodape:    #D5D0D0;
  --tinta-no-ambar:  #140000;   /* rótulo sobre a pílula */
  /* as mesmas cores em tripla, pra onde o CSS precisa de alpha (refino r3,
     patch 26: "um hex, um token" — 7 triplas escritas na mão saíram) */
  --chao-rgb:        11 11 12;
  --chao-canto-rgb:  7 7 9;
  --ambar-rgb:       218 157 74;
  --ambar-halo-rgb:  166 119 73;
  --tinta-rgb:       20 0 0;
  --placa-rgb:       20 18 18;

  /* opacidade efetiva das réguas de 1px, medida sobre o chão. As três do
     cabeçalho (0,28 · 0,45 · 0,55) voltaram em 21/09 (refino, B1/D6/F2):
     a régua do header saiu, mas a escala continua sendo o vocabulário de
     linha da marca (design-guide): repouso dos campos, hover, régua da
     chamada final. */
  --regua-cabecalho: .28;
  --regua-cabecalho-curta: .45;
  --regua-cabecalho-fundo: .55;
  --regua-rodape: .75;
  --traco-link: .98;
  --traco-nav: .75;

  /* ---------- TIPO ---------- */
  --fonte-sans:  "Gantari", "Red Hat Display", "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-serif: "Recia", "Playfair Display", Georgia, "Times New Roman", serif;

  /* headline: as três linhas foram ajustadas pela LARGURA DE TINTA medida na
     imagem (a arte tem tracking mais fechado que a Gantari; casar só o corpo
     deixava cada linha 3-6% mais larga que a arte).
     40,8px @390 · 95,3px @1440 → a L1 sai com os mesmos 338px de tinta da arte. */
  --h1: clamp(2.55rem, 1.285rem + 5.19vw, 6.35rem);
  /* razão medida entre as três linhas, corrigida pela largura de tinta */
  --h1-l2: .877em;   /* iguala a altura-x da linha 1 */
  /* A arte tem a L3 em 79,2% do corpo da L1. Este é o valor NATURAL dela — vale
     inteiro no empilhado. No desktop a guarda 1 corta abaixo disso (ver
     --l3-limite): ali a L3 fica no que couber sem encostar no herói. */
  --h1-l3: .785em;

  --tam-wordmark: clamp(1.5625rem, 1.168rem + 1.619vw, 2.75rem); /* 25px @390 · 42px @1440 (corpo da arte) */
  --tam-selo:     max(.875rem, clamp(.8rem, .74rem + .017vw, .9rem)); /* piso 14px da casa */
  --tam-nav:      clamp(1rem, .72rem + .45vw, 1.13rem);   /* ~18px @1440 */
  --tam-botao:    clamp(.96rem, .79rem + .71vw, 1.6rem);  /* 15.4px @390 · 22.9px @1440 */
  --tam-faixa:    clamp(.875rem, .7rem + .3vw, .98rem);   /* piso 14px @390 · 15.5px @1440 */
  --tam-menu:     clamp(1.5rem, 1rem + 2vw, 2.5rem);

  /* tracking do selo: no lockup o selo tem a MESMA largura do wordmark.
     0,25px @390 (wordmark 25px) → 5,94px @1440 (wordmark 42px). No celular o piso
     de 14px come quase todo o tracking: é o preço do piso, não escolha. */
  --tracking-selo: clamp(.245px, -1.87px + .542vw, 6.2px);
  --tracking-faixa: .14em;   /* medido: a faixa tem 354px de tinta @1586 */

  /* ---------- ABAIXO DA DOBRA ----------
     Nada aqui é direção nova: a escala desce da headline medida, a cor sai da
     paleta travada e a linha é a mesma régua de 1px em três opacidades. */
  /* 21/09 (corpo, direcao/spec-corpo.md decisão 6): a escala da direção
     escolhida em imagem é 74-80px @1440, não os 48/57 do build anterior.
     36px @390 (piso do clamp) · 74px @1440 · 77px teto. */
  /* refino r1 (patch 27): o piso desce a 32px — no celular o h2 é 80% da h1
     (design-guide: L3 = 79% da L1). 32,8px @390 · 32 @360 · 74/80 @1440 inalterados. */
  --h2:        clamp(2rem, 1.1rem + 3.9vw, 4.8rem);
  --h2-grande: clamp(2rem, 1.1rem + 4.3vw, 5rem);        /* 34,4px @390 · 80px @1440 */

  /* ---------- CORPO DA HOME (spec-corpo.md A6/B7, medidos @1586 → @1440) ---- */
  --tam-rotulo:       clamp(.875rem, .806rem + .286vw, 1.0625rem); /* 14px @390 · 17px @1440 */
  --tracking-rotulo-corpo: .25em;                                 /* rótulo de seção do corpo */
  --tam-rotulo-faixa: .9375rem;                                   /* 15px: "Onde ele já esteve" */
  --tam-rotulo-interno: .875rem;                                  /* 14px (piso): PRA QUEM, rótulo de campo */
  --tracking-rotulo-interno: .22em;
  --h3-card:     clamp(1.5rem, 1.314rem + .762vw, 2rem);          /* 24px @390 · 32px @1440: nome do card */
  --h3-painel:   clamp(1.5rem, 1.129rem + 1.524vw, 2.5rem);       /* 24px @390 · 40px @1440: título do form (dec. 25) */
  --h3-passo:    clamp(1.375rem, 1.2rem + .476vw, 1.625rem);      /* 22px @390 · 26px @1440: nome do passo */
  --numeral:     clamp(4.5rem, 3.571rem + 3.81vw, 7rem);          /* 72px @390 · 112px @1440: hairline do método */
  --tam-link:      clamp(1.125rem, .974rem + .619vw, 1.53rem);    /* 18px @390 · 24,5px @1440: link com seta das seções */
  --tam-link-card: clamp(1rem, .92rem + .333vw, 1.22rem);         /* 16px @390 · 19,5px @1440: link no pé do card */
  /* refino r1 (patch 25): os dois cinzas chutados voltam pro degrau da tabela
     travada (#B7B7B9 — contraste 9,8:1 no chão, ≈9,5:1 na placa) */
  --cinza-rotulo-placa: var(--cinza-selo);    /* rótulos internos dos cards */
  --cinza-rotulo-campo: var(--cinza-selo);    /* rótulos de campo do formulário */
  --numeral-cor: var(--cinza-rodape);   /* #D5D0D0 a 1 (decisão 8 revista em r2 P-9); um hex, um token (refino r2 patch 28) */
  /* a placa: UM preenchimento, dois tamanhos (decisão 2) */
  --placa-fundo: rgb(var(--placa-rgb) / .90);
  --placa-raio-card: 10px;
  /* refino r1 (patch 1): UM painel só, o da home (spec-corpo dec. 28) — raio 10,
     padding 43, título 40. Os tokens *-home saíram; contato, parcerias, projeto
     social, palestras e vizu-one herdam o mesmo acabamento. */
  --placa-raio-painel: 10px;
  --placa-pad-card:   clamp(24px, 2.5vw, 40px);              /* 24 @390 · 36 @1440 */
  --placa-pad-painel: clamp(24px, 1.059rem + 1.81vw, 43px);  /* 24 @390 · 43 @1440 */
  /* respiro de seção do corpo (decisão 13): ≈12% H em cima, 10% embaixo, base 8 */
  --secao-topo: clamp(64px, 7.2vw, 104px);
  --secao-base: clamp(56px, 6.1vw, 88px);

  /* ---------- MESA 2 · OS ATOS II E III (spec-corpo §C, decisões 17-32) -------
     Tokens NOVOS: nada aqui sobrescreve o que as internas já usam. O método, o
     Vizu X, a faixa e a chamada aplicam estes por escopo em home.css §12 — as
     páginas internas (que também carregam home.css e têm .passos e
     .placa--painel) continuam com os valores da rodada 2.
     390 é DEDUÇÃO declarada: não existe imagem mobile da mesa 2. */
  --numeral-metodo:   clamp(6rem, 3.586rem + 9.905vw, 12.5rem);  /* 96px @390 · 200px @1440 (dec. 18) */
  --h3-passo-metodo:  clamp(1.5rem, 1.314rem + .762vw, 2rem);    /* 24px @390 · 32px @1440 (dec. 18) */
  /* ar das duas seções de 2 colunas do Ato II (dec. 21: 216/240 @1440) */
  --secao-topo-2col:  clamp(96px, 3.214rem + 11.43vw, 216px);
  --secao-base-2col:  clamp(104px, 3.343rem + 12.95vw, 240px);
  /* a faixa de conteúdo (dec. 32: topo→cap do rótulo 188; tinta→corte 141).
     O padding é 182 porque o CAP do rótulo nasce 6px abaixo da caixa dele. */
  --faixa-topo:       clamp(81px, 2.718rem + 9.619vw, 182px);
  --faixa-base:       clamp(54px, 1.914rem + 6.286vw, 120px);
  /* a chamada (dec. 32: corte→topo do painel 135; cena embaixo ≈200) */
  --chamada-topo:     clamp(72px, 3.038rem + 6vw, 135px);
  --chamada-base:     clamp(96px, 3.586rem + 9.905vw, 200px);
  /* refino r3 (patch 17): o vocabulário de linha em SETE opacidades, não nove
     (pares a ≤.05 são indistinguíveis a 1px): .22 · .28 · .45 · .55 · .65 · .75 · .98.
     Corte/painel medidos .20-.26 → .22; moldura medida .30-.50 → .45. O corte
     da DOBRA (sobre cena acesa) fica no .28 — internas.css §18. */
  --regua-corte: .22;          /* a régua entre a faixa e a chamada (dec. 27) */
  --regua-dupla-links: .65;    /* a régua entre os dois links da faixa (dec. 26) */
  --fio-painel-lado: var(--regua-corte);      /* laterais e base do painel da chamada (dec. 28) */
  --fio-moldura: var(--regua-cabecalho-curta); /* o fio da moldura de foto (dec. 10; refino r1 patch 26) */
  /* MÉTRICA DA GANTARI, medida no navegador (canvas measureText, 21/09):
     ascender 0,950em · descender 0,250em (área de conteúdo 1,200em) · altura do
     cap 0,675em no peso 300/100 e 0,6875em no 400 (área 1,1875em).
     Daí a distância do TOPO DA CAIXA ao CAP da 1ª linha, por entrelinha:
     c = (lh − área)/2 + (ascender − cap). É o que casa cap com cap entre corpos
     diferentes (o título de 80 com o do painel de 40; o numeral de 200 com o nome
     de 32; os links da faixa com a L1 do título) sem chutar pixel — conferido no
     DOM: Δ 0,8px entre "Comece pela data." e "Peça uma data". */
  --cap-lh095: .150;      /* .secao__titulo — 80px, peso 300, lh .95 */
  --cap-lh100: .180;      /* .passo__n — o numeral, peso 100, lh 1 */
  --cap-lh120: .256;      /* .passo__titulo — peso 400, lh 1,2 */
  --cap-lh120-300: .275;  /* .formulario__titulo — peso 300, lh 1,2 */
  --cap-lh140: .356;      /* .rotulo e .link-seta — peso 400, lh 1,4 */
  --vao-colunas: clamp(48px, 4.8vw, 80px);          /* vão mínimo entre as duas colunas (B5) */
  --vao-pilula-link: 54px;                          /* pílula → link na chamada final, medido na imagem (dec. 28) */
  /* refino r2 (patch 21): três degraus a 1,5px (24,5 link · 26 passo · 28 item)
     viram um — --h3 desce pro degrau medido do passo (26 @1440 · 22 @390).
     Escada final: 14 · 17/18 · 24,5 · 26 · 32 · 40 · 56 · 74/80 · 95 · 112 · 200 */
  --h3:        var(--h3-passo);
  --tam-corpo: clamp(1rem, .93rem + .3vw, 1.125rem);      /* 16px @390 · 18px @1440 */
  --lh-corpo: 1.45;   /* UMA entrelinha pro corpo (refino r3, patch 18 — spec-corpo dec. 7); a política (leitura longa) é a exceção declarada, 1,55 */
  --tam-micro: max(.875rem, clamp(.875rem, .82rem + .14vw, .98rem)); /* piso 14px */
  --tracking-rotulo: .28em;   /* o tratamento do selo da dobra */
  --secao-y:  clamp(72px, 8.4vw, 136px);   /* respiro entre seções, base 8 */
  --coluna-texto: 518px;   /* 36% W @1440 medido na imagem (r2 P-2: 58ch dava 670) */

  /* ---------- RESPIRO (base 8; relock recomendado pelo spec) ---------- */
  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 32px;
  --e5: 40px; --e6: 48px; --e7: 56px; --e8: 64px; --e10: 80px;

  /* margem do conteúdo: 4,7% da largura na imagem (67px @1440) */
  --margem: clamp(24px, 4.63vw, 72px);
  /* a margem direita da imagem é MENOR que a esquerda: 63px contra 74px @1586 */
  --margem-direita: clamp(20px, 3.97vw, 62px);
  /* o mobile tem DUAS margens na imagem: 9,03% no header, 13,07% no conteúdo */
  --margem-cabecalho: var(--margem);

  /* ---------- A LENTE (assinatura "Um ou Dois") ----------
     O `1` e a imagem aprovada. O `2` e um quarto de grau fora: +5px de
     suavidade e -6% de luz, SO no fundo.png. Volta sozinha pro `1` em 4s. */
  --lente-blur: 5px;
  --lente-luz: .94;
  --lente-dur: var(--t-lento);   /* a volta pro `1`: 520ms */
  /* altura do bloco do rodape: padding + regua + vao + faixa. E por ela que os
     dois algarismos pousam na regua nos dois tamanhos. */
  --rodape-linha: calc(var(--e5) + 13px + var(--tam-faixa) * 1.2);

  /* ---------- MOVIMENTO (coreografia.md) ---------- */
  --ease-luz:       cubic-bezier(.22, 1, .36, 1);   /* a mãe: curva de dimmer */
  --ease-ui:        cubic-bezier(.2, .8, .3, 1);    /* hover, foco, ativo */
  --ease-filamento: cubic-bezier(.32, .06, .24, 1); /* rampas de brightness */
  --t-rapido: 160ms;
  --t-medio:  260ms;
  --t-lento:  520ms;
  --t-cenico: 720ms;
  --t-ativo:   90ms;
  --sobe: 12px;        /* amplitude de entrada; 8px em texto ≤16px */
  --sobe-miudo: 8px;

  /* ---------- GEOMETRIA DAS CAMADAS (registro medido, NCC 0,973) ----------
     herói: escala 0,710 · x=703 · y=67 sobre o quadro 1586×992
     → left 44,33% · largura 50,23% · topo 6,75% · proporção 1122/1402 */
  --heroi-esq: 44.33vw;
  --heroi-topo: 6.75dvh;
  --heroi-prop: .8003;
  /* A largura do herói tem três regras, nesta ordem:
     1. o tamanho da imagem (50,23vw);
     2. PISO — ele nunca flutua: precisa chegar na base da dobra, senão o recorte
        vira boneco de papel (74,6dvh é o que faz a base dele cruzar a dobra);
     3. GUARDA 2 — a base das mãos (86% da altura dele) fica dentro da dobra com
        ≥24px de folga; abaixo disso ele ENCOLHE em vez de sangrar mais.
        Medido com margem: mãos em 88% da altura dele e folga de 32px pedida
        (0,88·h + 6,75%·H ≤ H − 32), pra não fechar em cima dos 24 prometidos.
        →  largura ≤ 84,8dvh − 30px */
  --heroi-larg: min(max(50.23vw, 74.6dvh), calc(84.8dvh - 30px));

  /* GUARDA 1 — a última coluna de tinta da L3 fica a ≥8px da primeira coluna
     NÃO-TRANSPARENTE do herói (alpha > 0), em qualquer frame e qualquer altura.
     A primeira coluna opaca NÃO é constante: medida linha a linha no alpha do
     heroi.png, na faixa de tinta da L3 ela varia de 5,35% a 9,89% da largura
     dele conforme a ALTURA do viewport (quanto mais baixa a tela, mais embaixo
     no corpo dele a L3 cai, e mais à esquerda começa a silhueta). Por isso o
     limite usa o PISO conservador de 4,0% — abaixo do menor valor observado nos
     16 viewports medidos —, e não um valor médio. */
  --guarda: 8px;
  --l3-limite: calc(var(--heroi-esq) + var(--heroi-larg) * .04 - var(--guarda) - var(--margem));

  /* ---------- CABEÇALHO ---------- */
  --cab-altura: 90px;
  --cab-altura-curta: 64px;

  /* ---------- A SETA ↓ DO SELECT (refino r3, patch 31) ----------
     seta.svg girada 135°, traço 1,714 (1,5px a 14px); os estados trocam só o
     token, e o F4 do painel compõe a seta com a régua que se refaz. */
  --seta-cinza:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B7B7B9' stroke-width='1.714' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(135 8 8)' d='M2.2 13.8 13.8 2.2M5.6 2.2h8.2v8.2'/%3E%3C/svg%3E");
  --seta-branca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='1.714' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(135 8 8)' d='M2.2 13.8 13.8 2.2M5.6 2.2h8.2v8.2'/%3E%3C/svg%3E");
  --seta: var(--seta-cinza);

  /* ---------- FOCO (anel duplo da coreografia) ---------- */
  /* refino r2 (patch 28): um hex, um token — os dois anéis são degraus da tabela */
  --anel-interno: var(--chao);
  --anel-externo: var(--branco);

  /* o calendário, o realce do select e o visto nativo caem na paleta da casa,
     nunca no azul do sistema (refino r2, patch 26) */
  color-scheme: dark;
  accent-color: var(--ambar);
}

/* ===========================================================================
   BASE
   =========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

html{
  background: var(--chao);
  color: var(--branco);
  font-family: var(--fonte-sans);
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;   /* o #0B0B0C fica no html (refino r2, patch 24): senão o body cobre a cena e as poças */
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
}

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

/* seleção de texto na paleta da casa (refino r1, patch 25): âmbar a .32 sob o
   branco; sobre a pílula, a tinta escura a .25 */
::selection{ background: rgb(var(--ambar-rgb) / .32); color: var(--branco); }
.btn::selection,
.btn *::selection{ background: rgb(var(--tinta-rgb) / .25); color: var(--tinta-no-ambar); }

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

button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1{ margin: 0; }
p{ margin: 0; }

/* foco visível: anel duplo, instantâneo, nunca só outline do sistema */
:focus-visible{
  outline: 2px solid var(--anel-externo);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--anel-interno);
  border-radius: 2px;
}

/* "e-mail" nunca quebra em "e-" no fim da linha (refino r2, patch 28; sem
   U+2011: a Gantari pode não ter o glifo) */
.sem-quebra{ white-space: nowrap; }

.so-leitor{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular{
  position: absolute;
  left: var(--e2);
  top: -100px;
  z-index: 60;
  padding: var(--e2) var(--e3);
  background: var(--ambar);
  color: var(--tinta-no-ambar);
  font-weight: 500;
  border-radius: 999px;
  transition: top var(--t-rapido) var(--ease-ui);
}
.pular:focus{ top: var(--e2); }

@media (prefers-reduced-motion: reduce){
  .pular{ transition: none; }
}