/* =========================================================================
   BASE — tokens, fontes, reset, tipografia, utilitarios de movimento
   Paleta oficial de 15/08/2026 (ver HANDOFF.md item 3). Nao inventar cor.
   ========================================================================= */

/* Gotham local. Sem Google Fonts nesta versao: uma fonte externa custa
   DNS + TLS + CSS antes do primeiro texto pintar, e o publico e 4G. */
@font-face{font-family:'Gotham';src:url('../../assets/fonts/Gotham-Book.woff2')   format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gotham';src:url('../../assets/fonts/Gotham-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Gotham';src:url('../../assets/fonts/Gotham-Bold.woff2')   format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Gotham';src:url('../../assets/fonts/Gotham-Black.woff2')  format('woff2');font-weight:900;font-display:swap}

:root{
  /* --- primarias --- */
  --verde:#4CAB3B;
  --amarelo:#FBDC34;
  --azul:#1C529D;
  --azul-claro:#2F97D3;

  /* --- rampa verde -> amarelo (6 passos oficiais) --- */
  --va1:#4CAB3B; --va2:#78B53A; --va3:#9CBF37; --va4:#BCC836; --va5:#DCD335; --va6:#FBDC34;
  /* --- rampa amarelo -> azul --- */
  --ab1:#FBDC34; --ab2:#D7CF54; --ab3:#B2C175; --ab4:#8DB394; --ab5:#63A5B4; --ab6:#2F97D3;
  /* --- rampa azul -> verde --- */
  --bv1:#2F97D3; --bv2:#339CB7; --bv3:#389F99; --bv4:#3EA37B; --bv5:#45A75B; --bv6:#4CAB3B;

  /* --- derivadas (sombras do azul, nao estao na palheta) --- */
  --azul-prof:#123A6B;
  --tinta:#0C2444;
  --corpo:#22384F;
  --rotulo:#6A7C92;
  --papel:#f7f6f2;
  --branco:#fff;
  --linha:#DCE6F0;

  --disp:'Gotham',system-ui,-apple-system,sans-serif;
  --texto:'Gotham',system-ui,-apple-system,sans-serif;

  /* medida unica de borda esquerda do conteudo (ver HANDOFF item 5) */
  --gutter:clamp(20px,5vw,60px);
  --largura:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  /* rolagem suave nativa SO quando o Lenis nao esta no comando.
     Os dois juntos brigam e a pagina fica elastica. */
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
html.cinema{scroll-behavior:auto}

body{
  font-family:var(--texto);
  color:var(--corpo);
  background:var(--papel);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--azul-claro);outline-offset:3px}

.wrap{max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter)}

/* Não há mais cabeçalho fixo. Sobra só a barra de leitura, de 3px, então
   uma folga pequena basta para a âncora não colar no topo. */
section[id]{scroll-margin-top:16px}

/* =========================================================================
   TIPOGRAFIA
   ========================================================================= */
.rotulo{
  font-family:var(--disp);font-weight:700;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--verde);
}
.titulo{
  font-family:var(--disp);font-weight:900;color:var(--tinta);
  font-size:clamp(2rem,5.2vw,4.1rem);line-height:1.02;letter-spacing:-.02em;
}
.subtitulo{
  font-family:var(--disp);font-weight:900;color:var(--tinta);
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.08;letter-spacing:-.015em;
}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;max-width:62ch}
.corpo{font-size:1.05rem;line-height:1.72;max-width:66ch}

/* =========================================================================
   BOTOES E MICRO-INTERACAO (item 5 do briefing)
   Transicao curta, sem salto de layout: so cor, sombra e 2px de subida.
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--disp);font-weight:700;font-size:.95rem;
  padding:.95rem 1.6rem;border-radius:999px;
  background:var(--amarelo);color:var(--tinta);
  transition:transform .25s cubic-bezier(.22,1,.36,1),
             box-shadow .25s cubic-bezier(.22,1,.36,1),
             background-color .25s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(12,36,68,.22)}
.btn:active{transform:translateY(0)}
.btn--linha{background:transparent;color:var(--branco);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.btn--linha:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px #fff}

/* sublinhado que cresce da esquerda */
.link-sub{position:relative;font-weight:700}
.link-sub::after{
  content:'';position:absolute;left:0;bottom:-3px;height:2px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.link-sub:hover::after{transform:scaleX(1)}

/* =========================================================================
   ESTADOS DE MOVIMENTO
   TRAVA DUPLA, igual a v1 (HANDOFF item 6):
   1) html.js  -> so entra se o JS estiver vivo. Sem JS a pagina aparece INTEIRA.
   2) prefers-reduced-motion -> quem pediu menos animacao ve tudo parado.
   NUNCA escrever opacity:0 fora deste bloco.
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){
  html.js .sobe{
    opacity:0;transform:translate3d(0,28px,0);
    transition:opacity .7s cubic-bezier(.22,1,.36,1),
               transform .7s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--atraso,0ms);
  }
  html.js .de-esq{opacity:0;transform:translate3d(-36px,0,0);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);transition-delay:var(--atraso,0ms)}
  html.js .de-dir{opacity:0;transform:translate3d( 36px,0,0);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);transition-delay:var(--atraso,0ms)}
  html.js .sobe.dentro,
  html.js .de-esq.dentro,
  html.js .de-dir.dentro{opacity:1;transform:none}

  /* No modo cinema quem anima e o GSAP, quadro a quadro, por estilo em linha.
     A transicao do CSS aqui embaixo brigaria com ele e deixaria rastro. */
  html.cinema .sobe,
  html.cinema .de-esq,
  html.cinema .de-dir{transition:none}
}

/* barra de leitura do topo */
.progresso{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--va1),var(--va3),var(--va6));
}

/* Some da tela mas continua existindo para busca e leitor de tela.
   O h1 do hero usa isto, porque o titulo visivel esta dentro da arte oficial. */
.so-leitor{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.pular{position:absolute;left:-9999px}
.pular:focus{left:12px;top:12px;z-index:999;background:var(--amarelo);padding:.7rem 1rem;border-radius:8px}