/* ==========================================================================
   TOKENS — Design System Alambrado v1.0
   Três cores, zero exceção. Tudo múltiplo de 8.
   ========================================================================== */

:root {
  /* --- Cor ------------------------------------------------------------- */
  --preto: #0F0F0F;
  --amarelo: #FFBA0B;
  --branco: #FFFFFF;

  /* TESTE — gradient de conversão. Sobe do âmbar ao amarelo claro:
     entra pesado contra o bloco branco de cima e clareia até a base.
     A cor da marca fica no meio do curso e o bloco ganha profundidade
     sem sair dela. Preto segue como texto em todos os stops. */
  --amarelo-gradient: linear-gradient(
    0deg,
    #fff0ba 0%,
    #ffe784 20%,
    #ffd857 40%,
    #ffc532 60%,
    #ffae16 80%,
    #ff9203 100%
  );

  /* Escala de texto sobre preto */
  --sobre-preto-100: #FFFFFF;
  --sobre-preto-72: rgba(255, 255, 255, 0.72);
  --sobre-preto-70: rgba(255, 255, 255, 0.70);
  --sobre-preto-45: rgba(255, 255, 255, 0.45);
  --sobre-preto-16: rgba(255, 255, 255, 0.16);
  --sobre-preto-06: rgba(255, 255, 255, 0.06);

  /* Escala de texto sobre branco */
  --sobre-branco-100: #0F0F0F;
  --sobre-branco-65: rgba(15, 15, 15, 0.65);
  --sobre-branco-40: rgba(15, 15, 15, 0.40);
  --sobre-branco-14: rgba(15, 15, 15, 0.14);

  /* Escala de texto sobre amarelo — o mesmo preto que serve o branco. A
     diferença é o acento: sobre amarelo ele não pode ser amarelo, e a
     terceira cor da marca assume o papel. */
  --sobre-amarelo-100: #0F0F0F;
  --sobre-amarelo-65: rgba(15, 15, 15, 0.65);
  --sobre-amarelo-40: rgba(15, 15, 15, 0.40);
  --sobre-amarelo-14: rgba(15, 15, 15, 0.14);

  /* --- Tipografia ------------------------------------------------------ */
  /* Pride é licenciada: basta soltar o arquivo em assets/fonts/ que o
     @font-face abaixo assume. Sem o arquivo, Anton entra como substituta
     métrica e todas as escalas continuam válidas. */
  --font-display: 'Pride', 'Anton', sans-serif;
  --font-text: 'Poppins', sans-serif;

  /* Escala — desktop 1440 / mobile < 768 */
  /* D1 nos 96 do design system. Com a headline centrada em 20ch, e não mais
     presa às 8 colunas, os 66 caracteres fecham em 3 linhas no tamanho cheio. */
  --d1: clamp(2.5rem, 6.6vw, 6rem);         /* 40 → 96  Headline de hero    */
  --d2: clamp(2.125rem, 4.45vw, 4rem);      /* 34 → 64  Headline de bloco   */
  --h3: clamp(1.625rem, 2.2vw, 2.5rem);     /* 26 → 40  Subtítulo de seção  */
  --h4: clamp(1.25rem, 1.4vw, 1.5rem);      /* 20 → 24  Título de card      */
  --apoio: clamp(1.0625rem, 1.15vw, 1.25rem); /* 17 → 20  Linha de apoio    */
  --corpo: clamp(1rem, 1vw, 1.0625rem);     /* 16 → 17  Texto corrido       */
  --card: 0.9375rem;                        /* 15       Texto de card       */
  --rotulo: 0.8125rem;                      /* 13       Rótulo              */
  --meta: 0.75rem;                          /* 12       Legenda e meta      */

  --lh-d1: 0.90;
  --lh-d2: 0.95;
  --lh-h3: 1.15;
  --lh-h4: 1.30;
  --lh-apoio: 1.60;
  --lh-corpo: 1.70;
  --lh-card: 1.60;

  --track-display: -0.01em;
  --track-rotulo: 0.18em;
  --track-meta: 0.14em;

  /* --- Grid ------------------------------------------------------------ */
  --container: 1280px;
  --margem: 80px;
  --gutter: 32px;

  /* --- Espaço e ritmo (base 8) ----------------------------------------- */
  --e-8: 8px;
  --e-16: 16px;
  --e-24: 24px;
  --e-32: 32px;
  --e-48: 48px;
  --e-64: 64px;
  --e-96: 96px;
  --e-120: 120px;
  --e-160: 160px;

  /* Respiro de bloco: 120 padrão, 160 no hero e no bloco final */
  --bloco-y: var(--e-120);
  --bloco-y-amplo: var(--e-160);

  /* --- Movimento -------------------------------------------------------- */
  /* Quatro durações, três curvas. Toda transição da página sai daqui —
     nenhum componente inventa o próprio tempo. */
  --dur-toque: 120ms;    /* resposta imediata: :active                       */
  --dur-rapida: 180ms;   /* estado de controle: cor, borda, opacidade        */
  --dur-media: 320ms;    /* sublinhado, ícone, varredura de botão            */
  --dur-lenta: 560ms;    /* entrada de elemento no scroll                    */
  --dur-ampla: 820ms;    /* entrada de headline e cortina do logotipo        */

  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);    /* desacelera — entradas  */
  --ease-padrao: cubic-bezier(0.4, 0, 0.2, 1);     /* ida e volta de estado  */
  --ease-firme: cubic-bezier(0.65, 0, 0.35, 1);    /* varredura, cortina     */

  --sobe: 28px;          /* deslocamento vertical de entrada                 */
  --lado: 32px;          /* deslocamento lateral de entrada                  */
  --passo: 80ms;         /* intervalo entre irmãos escalonados               */

  /* --- Hero --------------------------------------------------------------
     O painel de mídia do hero recua dos quatro lados. É fotografia, não
     componente de interface: por isso o raio dele é maior que o dos
     controles, que têm o seu próprio em --raio-controle. */
  --hero-recuo: 24px;
  --raio-midia: 20px;

  /* --- Componente ------------------------------------------------------ */
  --btn-altura: 56px;
  --btn-padding: 18px 32px;
  --header-altura: 88px;

  /* Canto dos controles — botões, botão do formulário, menu do cabeçalho e
     link de pular conteúdo. Os 12px vêm da versão anterior da página: canto
     quebrado, não pílula, e ainda de leitura retangular.

     REVERSÍVEL: trocar o valor por 0 devolve a página inteira ao canto reto
     original. Nenhum outro arquivo precisa mudar — todas as regras leem
     este token. O .btn--link é sublinhado, não caixa, e fica de fora. */
  --raio-controle: 12px;

  /* Canto das caixas — card do formulário, card de apresentador, card de
     formato e bloco de dados. O raio acompanha o do painel de mídia do hero:
     caixa é superfície, não controle, e por isso arredonda mais que os 12px
     dos botões. Como herda de --raio-midia, encolhe junto no mobile.

     REVERSÍVEL: --raio-card: 0 devolve todas as caixas ao retângulo reto. */
  --raio-card: var(--raio-midia);

  /* Moldura miúda — o quadro de 40px do ícone do card de formato. Nos 12px
     do botão um quadrado desse tamanho já lê como pastilha; 8px mantém a
     leitura de quadro. REVERSÍVEL: 0. */
  --raio-mini: 8px;

  /* Sombra das caixas, em duas camadas curtas: um contato rente à base e um
     halo largo e fraco, ambos no preto da marca — sobre o amarelo do bloco
     final um cinza neutro sujaria o fundo.

     Só entra onde o fundo tem claridade para carregá-la: o card do
     formulário sobre o amarelo e o card de formato sobre o branco. Sobre o
     preto do bloco 2b não há sombra — #0F0F0F não tem para onde escurecer,
     e ali quem separa o card do fundo é o filete de 1px, como sempre foi.

     REVERSÍVEL: --sombra-card e --sombra-card-alta: none. */
  --sombra-card: none;
  --sombra-card-alta: none;
}

/* Faixa 1280–1439 — ainda 12 colunas, margem menor para a coluna não cair
   muito abaixo dos 76 px de referência do design system. */
@media (max-width: 1439px) and (min-width: 1280px) {
  :root { --margem: 48px; }
}

/* Tablet 768–1279 — 8 colunas · margem 40 · gutter 24 */
@media (max-width: 1279px) {
  :root {
    --margem: 40px;
    --gutter: 24px;
    --bloco-y: var(--e-96);
    --bloco-y-amplo: var(--e-120);
    --header-altura: 80px;
  }
}

/* Mobile < 768 — 4 colunas · margem 20 · gutter 16 */
@media (max-width: 767px) {
  :root {
    --hero-recuo: 12px;
    --raio-midia: 14px;
    --margem: 20px;
    --gutter: 16px;
    --bloco-y: var(--e-64);
    --bloco-y-amplo: var(--e-96);
    --header-altura: 72px;
  }
}

/* Em telas pequenas o movimento encurta: menos deslocamento, menos espera */
@media (max-width: 767px) {
  :root {
    --sobe: 20px;
    --lado: 20px;
    --passo: 60ms;
    --dur-lenta: 480ms;
    --dur-ampla: 640ms;
  }
}