/* ==========================================================
   01 · BASE
   Vidro, tipografia, espaçamento das seções, botões e
   a animação de entrada. Vale para todos os blocos.
   ========================================================== */

/* ---------- vidro ---------- */
.glass{
  background:var(--glass-bg);
  /* 16px em vez de 26px: o custo do desfoque cresce com o raio, e são 28
     cartões de vidro na página. A diferença visual sobre um fundo liso como
     o nosso é quase nula; a diferença de custo em placa de vídeo fraca não é. */
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--glass-line);
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 -1px 0 rgba(255,255,255,.05),
             0 22px 50px -20px rgba(0,0,0,.75);
}

/* ---------- estrutura ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{padding:96px 0}
/* A nav é fixa no topo. Sem esta folga, clicar em "Planos" no menu leva o
   título para debaixo da barra e a pessoa cai no meio do bloco. */
section[id],header[id]{scroll-margin-top:96px}
/* A voz editorial é a serif. Ela tem UM peso só (400), então nenhum título
   pode pedir 600 ou 700: o navegador simularia o negrito engrossando a
   letra, que é o "fake bold" — deformação, não peso desenhado. */
h2{font:var(--t-h1);letter-spacing:var(--t-h1-ls)}
h3{font:var(--t-h2);letter-spacing:var(--t-h2-ls)}
/* Número não é texto editorial. O tabular-nums vem DEPOIS do atalho `font`,
   que o zeraria. Sem ele as colunas de preço desalinham. */
.plan-price,.stat{font:var(--t-num-xl);letter-spacing:var(--t-num-ls);
  font-variant-numeric:tabular-nums}
p{color:var(--muted)}
/* Amarelo em vez de vermelho: o vermelho sobre o fundo escuro dava ~4,3:1
   de contraste e reprovava no mínimo AA para texto pequeno. Este dá ~11,9:1. */
.eyebrow{font:var(--t-label);letter-spacing:var(--t-label-ls);
  text-transform:uppercase;color:var(--lamp);margin-bottom:18px}
.eyebrow::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--lamp);box-shadow:0 0 10px 1px var(--lamp);
  margin-right:10px;vertical-align:middle;position:relative;top:-1px}
.lead{font:var(--t-lead);max-width:62ch}
.section-head{margin-bottom:52px;max-width:70ch}
.section-head p{margin-top:16px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 15.5px/1.2 var(--sans);letter-spacing:-.005em;
  padding:15px 28px;border-radius:100px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  /* Sem isto, a borda transparente recebe o INÍCIO do degradê repetido e
     aparece uma listra clara de 1px na direita do botão. */
  background-origin:border-box;background-repeat:no-repeat;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
/* Degradê quente no lugar do vermelho cheio: vermelho sozinho lê como alerta,
   e este é justamente o botão que a pessoa precisa querer clicar. O texto vira
   escuro porque branco desaparece na ponta creme do degradê. */
/* Sem brilho `inset`: numa pílula ele contorna as duas pontas arredondadas
   e vira um anel claro em volta do botão, em vez do reflexo de topo. */
.btn-primary{background:var(--grad);
  color:var(--ink);
  box-shadow:0 12px 34px -10px rgba(var(--warm-rgb),.75)}
/* O hover só existe onde há cursor. Em tela de toque o navegador mantém o
   :hover grudado no último elemento tocado, e o botão ficava aceso e
   levantado depois que a pessoa já tinha ido embora dele. */
@media(hover:hover){
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px -10px rgba(var(--warm-rgb),.92)}
}
.btn-ghost{background:rgba(255,255,255,.07);color:var(--text);border-color:var(--glass-line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media(hover:hover){
  .btn-ghost:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
}
/* O contorno já acompanha o arredondamento de cada elemento sozinho. Antes
   havia um border-radius:100px aqui, que virava pílula qualquer coisa que
   recebesse foco — inclusive as perguntas do FAQ e os cards. */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--glow);outline-offset:3px}

/* touch-action tira o atraso de 300ms do toque duplo no celular.
   O tap-highlight padrão é um retângulo cinza-azulado do sistema; trocado
   pelo verde da marca, e sem canto reto atravessando as pílulas. */
a,button,summary{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(var(--lamp-rgb),.16)}

/* Primeiro item do teclado: pula a navegação e vai direto ao conteúdo.
   Fica escondido acima da tela até receber foco. */
.pular{position:fixed;left:16px;top:-120px;z-index:200;
  padding:13px 22px;border-radius:100px;
  background:var(--grad);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:14.5px;
  text-decoration:none;box-shadow:0 12px 34px -10px rgba(var(--warm-rgb),.75);
  transition:top .22s cubic-bezier(.2,.7,.3,1)}
.pular:focus{top:16px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------- telas menores ----------
   DUAS REGRAS PARA NÃO QUEBRAR DE NOVO:

   1. Aqui só entram seletores definidos NESTE arquivo. Media query não
      aumenta a força da regra, e o 02-blocos.css carrega depois — então
      qualquer tentativa de mexer em .hero, .g3 ou .final daqui é ignorada.
      Esses moram no 02-blocos, junto do bloco deles.

   2. Da maior largura para a menor. Numa tela de 375px as três valem ao
      mesmo tempo, e a última a aparecer é a que ganha. */
@media(max-width:1250px){
  section{padding:80px 0}
  .section-head{margin-bottom:42px}
  /* h2 saiu daqui: o clamp do token --t-h1 já cobre toda a faixa de largura.
     Ter clamp E media query fazia duas fontes de verdade para o mesmo valor. */
}
@media(max-width:900px){
  section{padding:72px 0}
}
@media(max-width:620px){
  .wrap{padding:0 18px}
  section{padding:58px 0}
  .section-head{margin-bottom:32px}
  .lead{font-size:16.5px}   /* só o corpo encolhe; entrelinha vem do token */
  .btn{padding:15px 22px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}