/* ===========================================================================
   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@200..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 */
  --parede-quente:   #2A2017;   /* parede dentro do cone de luz */
  --parede-fria:     #1A1410;
  --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 */
  --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 */

  /* opacidade efetiva das três réguas de 1px, medida sobre o chão */
  --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. */
  --h2:        clamp(1.75rem, 1.06rem + 2.36vw, 3rem);    /* 28px @390 · 48px @1440 */
  --h2-grande: clamp(2rem, 1.16rem + 2.87vw, 3.5rem);     /* 32px @390 · 57px @1440 */
  --h3:        clamp(1.25rem, 1.03rem + .76vw, 1.75rem);  /* 20px @390 · 28px @1440 */
  --tam-corpo: clamp(1rem, .93rem + .3vw, 1.125rem);      /* 16px @390 · 18px @1440 */
  --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: 58ch;

  /* ---------- 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;

  /* ---------- FOCO (anel duplo da coreografia) ---------- */
  --anel-interno: #0B0B0C;
  --anel-externo: #FFFFFF;
}

/* ===========================================================================
   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: var(--chao);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
}

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

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;
}

.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; }
}