/* =====================================================================
   MARCELO LANGSDORFF · DESIGN SYSTEM
   Toda decisão visual do site mora aqui. Nenhum valor solto nas páginas.
   Princípio da identidade: incisão. Canto vivo, sem raio, sem arredondar.
   O vermelho é bisturi, não tinta: aparece em fio, nunca em área.
   ===================================================================== */

/* ---------- 1. FONTES ------------------------------------------------ */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* ---------- 2. FICHAS (tokens) --------------------------------------- */
:root{
  /* cor · exatamente o guia de identidade, nada inventado */
  --onyx:#0E0F12;        /* fundo */
  --grafite:#17191F;     /* superfície elevada */
  --grafite-2:#22252D;   /* cartão, campo */
  --linha:#33373F;       /* traço divisor e borda */
  --osso:#F4F1EC;        /* texto principal */
  --osso-2:#E7E2D8;      /* texto secundário sobre escuro */
  --prata:#9AA0A8;       /* texto de apoio */
  --fumaca:#6B7079;      /* rótulo, legenda */
  --incisao:#DE1B2C;     /* acento */
  --incisao-funda:#8E0E18;
  --incisao-suave:#F04654;

  /* papéis · use estes, não a cor crua */
  --txt:var(--osso);
  --txt-2:var(--osso-2);
  --txt-3:var(--prata);
  --txt-4:var(--fumaca);
  --fundo:var(--onyx);
  --sup:var(--grafite);
  --sup-2:var(--grafite-2);
  --acento:var(--incisao);
  --acento-hover:var(--incisao-suave);
  --acento-fundo:var(--incisao-funda);

  /* espaço · base 4 */
  --e1:4px;  --e2:8px;  --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px; --e11:176px;

  /* respiro lateral e largura de leitura */
  --margem:clamp(24px,5vw,80px);
  --largura:1360px;
  --leitura:62ch;

  /* tipo · escala fluida */
  --t-micro:10px;
  --t-rotulo:11px;
  --t-mini:13px;
  --t-corpo:clamp(15px,1.05vw,17px);
  --t-lead:clamp(17px,1.35vw,20px);
  --t-h4:clamp(17px,1.5vw,21px);
  --t-h3:clamp(21px,2.1vw,28px);
  --t-h2:clamp(30px,4vw,58px);
  --t-h1:clamp(34px,7vw,116px);
  --t-numero:clamp(30px,3.4vw,50px);

  --f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-texto:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-editorial:'Fraunces',Georgia,'Times New Roman',serif;

  /* traço */
  --borda:1px solid var(--linha);
  --fio:2px;                 /* espessura do fio vermelho */

  /* movimento */
  --rapido:160ms; --normal:240ms; --lento:420ms;
  --curva:cubic-bezier(.22,.61,.36,1);

  /* camadas */
  --z-fundo:0; --z-veu:1; --z-conteudo:2; --z-barra:20; --z-modal:60;
}

/* ---------- 3. BASE -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fundo); color:var(--txt);
  font:400 var(--t-corpo)/1.62 var(--f-texto);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{display:block; max-width:100%; height:auto}
a{color:inherit}
::selection{background:var(--acento); color:#fff}

/* foco visível é requisito, não enfeite */
:focus-visible{outline:2px solid var(--acento-hover); outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- 4. ESTRUTURA --------------------------------------------- */
.env{width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:var(--margem)}
.secao{padding-block:clamp(72px,9vw,var(--e11))}
.secao--curta{padding-block:clamp(48px,6vw,var(--e9))}
/* no celular, 72+72 entre seções vira um vão grande; aperta o ritmo vertical */
@media (max-width:700px){ .secao{padding-block:clamp(48px,9vw,72px)} }
.grade{display:grid; gap:var(--e4)}
.grade--2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.grade--3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.grade--4{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
/* fileira de planos: centraliza e faz a última linha órfã (ex.: 5 cards) fechar no meio, sem buraco */
.planos{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--e4)}
.planos > .cartao{flex:1 1 260px; max-width:340px}
/* filho de grid e de flex tem min-width auto e vaza a tela */
.grade > *, .flex > *{min-width:0}
.flex{display:flex; flex-wrap:wrap; gap:var(--e4)}

/* ---------- 5. TIPOGRAFIA -------------------------------------------- */
.d1,.d2,.d3,.d4{font-family:var(--f-display); font-weight:800; letter-spacing:-.035em; text-transform:uppercase; margin:0}
.d1{font-size:var(--t-h1); line-height:.90}
/* Título longo. A tradução inglesa da promessa tem quase o triplo dos
   caracteres do português e, no corpo cheio, invade a metade direita do
   quadro, onde mora a cena 3D. Reduz o corpo e recupera a composição. */
.d1--longo{font-size:clamp(32px,5.1vw,80px); line-height:.94}
.d2{font-size:var(--t-h2); line-height:1.02; letter-spacing:-.03em}
.d3{font-size:var(--t-h3); line-height:1.12; letter-spacing:-.022em}
.d4{font-size:var(--t-h4); line-height:1.2;  letter-spacing:-.015em; font-weight:600}
.d1 em,.d2 em,.d3 em{font-style:normal; color:var(--acento)}

.lead{font-size:var(--t-lead); color:var(--txt-2); max-width:46ch; margin:0}
.corpo{color:var(--txt-3); max-width:var(--leitura); margin:0}
.editorial{font:italic 400 var(--t-lead)/1.5 var(--f-editorial); color:var(--txt-3); max-width:44ch; margin:0}

/* olho: rótulo com o fio vermelho antes */
.olho{
  display:flex; align-items:center; gap:var(--e3); margin:0 0 var(--e5);
  font:600 var(--t-rotulo)/1.5 var(--f-display);
  letter-spacing:.20em; text-transform:uppercase; color:var(--txt-3);
}
.olho::before{content:""; flex:0 0 34px; height:var(--fio); background:var(--acento)}

.rotulo{
  font:500 var(--t-micro)/1.35 var(--f-texto);
  letter-spacing:.13em; text-transform:uppercase; color:var(--txt-4);
}

/* ---------- 6. BOTÕES ------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  padding:17px 30px; border:1px solid transparent; cursor:pointer;
  font:600 12px/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; background:none; color:inherit;
  transition:background var(--normal) var(--curva), color var(--normal) var(--curva),
             border-color var(--normal) var(--curva), transform var(--rapido) var(--curva);
}
.btn svg{width:15px; height:15px; fill:currentColor; flex:none}
.btn--primario{background:var(--acento); color:#fff}
.btn--primario:hover{background:var(--acento-hover); transform:translateY(-2px)}
.btn--primario:active{transform:translateY(0); background:var(--acento-fundo)}
.btn--secundario{border-color:var(--linha); color:var(--txt-2)}
.btn--secundario:hover{border-color:var(--txt-2); color:var(--txt)}
.btn--fantasma{color:var(--txt-3); padding-inline:0}
.btn--fantasma:hover{color:var(--txt)}
.btn--pequeno{padding:12px 20px; font-size:11px}
.btn--largo{width:100%}
.btn[aria-disabled="true"],.btn:disabled{opacity:.42; pointer-events:none}

/* link com sublinhado que cresce do vermelho */
.link{
  position:relative; text-decoration:none; color:var(--txt-2);
  transition:color var(--normal) var(--curva);
}
.link::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
  background:var(--acento); transform:scaleX(0); transform-origin:left;
  transition:transform var(--normal) var(--curva);
}
.link:hover{color:var(--txt)}
.link:hover::after{transform:scaleX(1)}

/* ---------- 7. CARTÕES ----------------------------------------------- */
.cartao{
  position:relative; padding:var(--e5) var(--e5) var(--e6);
  background:color-mix(in srgb, var(--sup) 78%, transparent);
  border:var(--borda);
  transition:border-color var(--normal) var(--curva), background var(--normal) var(--curva),
             transform var(--normal) var(--curva);
}
.cartao:hover{border-color:var(--fumaca); transform:translateY(-3px)}
/* a incisão: fio vermelho que corre no topo ao passar o mouse */
.cartao::before{
  content:""; position:absolute; inset:-1px auto auto -1px; height:var(--fio); width:0;
  background:var(--acento); transition:width var(--lento) var(--curva);
}
.cartao:hover::before{width:calc(100% + 2px)}
.cartao__rotulo{
  display:block; margin:0 0 var(--e3);
  font:600 12px/1 var(--f-display); letter-spacing:.16em; text-transform:uppercase; color:var(--acento);
}
.cartao__titulo{margin:0 0 var(--e3); font:600 var(--t-h4)/1.25 var(--f-display); letter-spacing:-.015em}
.cartao p{margin:0; color:var(--txt-2); font-size:15px}

/* cartão de produto: leva para landing externa.
   O cartão inteiro é um <a>, então precisa desligar o sublinhado do
   navegador: sem isso o texto do corpo e o rótulo saem riscados. */
.cartao--produto{display:flex; flex-direction:column; gap:var(--e3); min-height:230px;
  text-decoration:none; color:inherit}
.cartao--produto .cartao__pe{margin-top:auto; padding-top:var(--e4); display:flex; align-items:center; gap:var(--e2);
  font:600 11px/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
  transition:color var(--normal) var(--curva), gap var(--normal) var(--curva)}
.cartao--produto:hover .cartao__pe{color:var(--acento); gap:var(--e3)}

/* cartão de plano */
.cartao--plano{display:flex; flex-direction:column}
.cartao--plano .preco{margin:var(--e4) 0 var(--e1); font:800 var(--t-numero)/1 var(--f-display); letter-spacing:-.03em}
.cartao--plano .preco small{font:400 13px/1 var(--f-texto); color:var(--txt-4); letter-spacing:0}
.cartao--plano .antes{margin:0 0 var(--e4); color:var(--txt-4); font-size:13px; text-decoration:line-through}
.cartao--plano ul{margin:0 0 var(--e5); padding:0; list-style:none; display:grid; gap:var(--e2)}
.cartao--plano li{position:relative; padding-left:var(--e4); color:var(--txt-2); font-size:14px}
/* traço de 1 px cai em subpixel e algumas linhas saem apagadas: usa o fio da marca */
.cartao--plano li::before{content:""; position:absolute; left:0; top:.58em; width:8px; height:var(--fio); background:var(--acento)}
.cartao--plano .btn{margin-top:auto}
.cartao--destaque{background:color-mix(in srgb, var(--sup-2) 82%, transparent); border-color:var(--acento-fundo)}
.cartao--destaque::before{width:calc(100% + 2px)}

.selo{
  display:inline-block; padding:6px 10px; background:var(--acento); color:#fff;
  font:600 var(--t-micro)/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase;
}
.selo--vazio{background:none; border:1px solid var(--linha); color:var(--txt-3)}

/* ---------- 8. NÚMEROS ----------------------------------------------- */
.regua{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
       gap:var(--e5) clamp(20px,3.4vw,56px); padding-top:var(--e5); border-top:var(--borda)}
.numero{min-width:0}
.numero b{display:block; font:800 var(--t-numero)/1 var(--f-display); letter-spacing:-.02em; color:var(--txt)}
.numero b i{font-style:normal; color:var(--acento)}
.numero span{display:block; margin-top:var(--e2); color:var(--txt-4);
             font:500 var(--t-micro)/1.35 var(--f-texto); letter-spacing:.13em; text-transform:uppercase}

/* ---------- 9. CITAÇÃO ----------------------------------------------- */
.citacao{position:relative; margin:0; padding-left:var(--e5); border-left:var(--fio) solid var(--acento)}
.citacao p{margin:0 0 var(--e3); font:italic 400 var(--t-h3)/1.35 var(--f-editorial); color:var(--txt-2); max-width:34ch}
.citacao footer{color:var(--txt-4); font:500 var(--t-micro)/1 var(--f-texto); letter-spacing:.13em; text-transform:uppercase}

/* ---------- 10. RETRATO ---------------------------------------------- */
/* Foto recortada sobre o onyx. O fio vermelho de um lado costura a pessoa
   à marca e evita que o recorte pareça colagem solta. */
.retrato{position:relative; display:inline-block; isolation:isolate}
.retrato::after{ /* base de luz: a figura não pode flutuar no nada */
  content:""; position:absolute; left:50%; bottom:-2%; width:78%; height:16%;
  transform:translateX(-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(222,27,44,.20), transparent 72%);
  filter:blur(6px);
}
.retrato::before{ /* fio vermelho no pé: o corte seco da foto vira acabamento, não defeito */
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:68%; max-width:300px; height:3px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--acento) 20%,var(--acento) 80%,transparent);
  box-shadow:0 0 16px 1px rgba(222,27,44,.45);
}
.retrato img{
  display:block; /* mata o vão de baseline pra o fio assentar exatamente no corte */
  filter:drop-shadow(-2px 0 0 rgba(222,27,44,.85))
         drop-shadow(0 0 42px rgba(222,27,44,.16))
         drop-shadow(2px 4px 26px rgba(0,0,0,.55));
}
.retrato--frio img{
  filter:drop-shadow(2px 0 0 rgba(244,241,236,.55))
         drop-shadow(0 0 42px rgba(154,160,168,.12))
         drop-shadow(-2px 4px 26px rgba(0,0,0,.55));
}
.retrato--limpo img{filter:drop-shadow(2px 6px 30px rgba(0,0,0,.6))}
/* moldura editorial: a foto dentro de um bloco com o corte diagonal */
.moldura{position:relative; overflow:hidden; background:var(--sup); border:var(--borda)}
.moldura img{width:100%; object-fit:cover}
/* barra pequena de altura fixa (igual em toda imagem): só o tempo, em vermelho, centrado no eixo vertical */
.moldura__legenda{position:absolute; inset:auto 0 0 0; z-index:2;
  height:34px; display:flex; align-items:center; padding-inline:var(--e4);
  background:linear-gradient(180deg,rgba(14,15,18,.55),rgba(14,15,18,.92));
  font:700 var(--t-rotulo)/1 var(--f-display); letter-spacing:.16em; text-transform:uppercase; color:var(--acento)}
.moldura__legenda i{display:none}

/* ---------- 10b. DEPOIMENTOS (mosaico) ------------------------------ */
/* colunas fecham a altura variável sozinhas, sem buraco no fim */
.depoimentos{columns:3 300px; column-gap:var(--e5); margin-top:var(--e7)}
.depoimento{break-inside:avoid; margin:0 0 var(--e5); padding:var(--e6);
  background:var(--sup); border:var(--borda); position:relative}
.depoimento::before{content:""; position:absolute; left:0; top:0; width:40px; height:var(--fio); background:var(--acento)}
.depoimento__texto{margin:0; color:var(--txt-2); font-size:15px; line-height:1.65}
.depoimento__autor{display:block; margin-top:var(--e4); color:var(--acento);
  font:700 var(--t-rotulo)/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase}
/* Caixa mais baixa da última fileira: aperta o bloco p/ o pé alinhar com as
   outras colunas no desktop (o mosaico de colunas fecha 25px mais baixo). */
.depoimento--compacta{padding-block:20px}

/* ---------- 11. CAMPOS (formulário da versão em inglês) -------------- */
.campo{display:grid; gap:var(--e2)}
.campo label{font:500 var(--t-rotulo)/1 var(--f-texto); letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3)}
.campo input,.campo textarea,.campo select{
  width:100%; padding:14px 16px; color:var(--txt); font:400 15px/1.4 var(--f-texto);
  background:var(--sup-2); border:1px solid var(--linha); border-radius:0;
  transition:border-color var(--normal) var(--curva), background var(--normal) var(--curva);
}
.campo textarea{min-height:132px; resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:var(--txt-4)}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--acento); background:var(--sup); outline:none}
.campo--erro input,.campo--erro textarea,.campo--erro select{border-color:var(--acento)}
.campo__aviso{font-size:12px; color:var(--acento-suave,var(--incisao-suave))}

.formulario{border:var(--borda); background:var(--sup); padding:clamp(24px,3vw,var(--e6))}
.formulario__estado{margin:var(--e4) 0 0; min-height:1.4em; font-size:13px; color:var(--txt-3)}
.formulario__estado[data-estado="erro"]{color:var(--acento-suave,var(--incisao-suave))}
.formulario__estado[data-estado="ok"]{color:var(--txt)}
.formulario[aria-busy="true"]{opacity:.7; pointer-events:none}

/* ---------- 12. ANTES E DEPOIS --------------------------------------- */
.comparador{position:relative; overflow:hidden; border:var(--borda); background:var(--sup); user-select:none}
.comparador img{width:100%; display:block}
.comparador__depois{position:absolute; inset:0; width:50%; overflow:hidden}
.comparador__depois img{position:absolute; inset:0; width:auto; height:100%; max-width:none}
.comparador__puxador{position:absolute; top:0; bottom:0; width:var(--fio); background:var(--acento);
  transform:translateX(-50%); pointer-events:none}
.comparador__puxador::after{
  content:""; position:absolute; top:50%; left:50%; width:38px; height:38px;
  transform:translate(-50%,-50%) rotate(45deg); border:var(--fio) solid var(--acento); background:var(--onyx);
}
.comparador input[type=range]{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;
}
.comparador__marca{position:absolute; top:var(--e3); z-index:2;
  font:600 var(--t-micro)/1 var(--f-display); letter-spacing:.16em; text-transform:uppercase;
  padding:6px 9px; background:rgba(14,15,18,.78); color:var(--osso-2)}
.comparador__marca--a{left:var(--e3)}
.comparador__marca--b{right:var(--e3); color:var(--acento)}
.comparador__tempo{position:absolute; right:var(--e3); bottom:var(--e3); z-index:2;
  font:800 var(--t-h4)/1 var(--f-display); letter-spacing:-.02em; color:var(--osso)}

/* ---------- 13. DIVISOR E INCISÃO ------------------------------------ */
.incisao{height:var(--fio); background:linear-gradient(90deg,var(--acento),transparent); border:0; margin:0}
.divisor{height:1px; background:var(--linha); border:0; margin:0}

/* ---------- 14. RODAPÉ ----------------------------------------------- */
.rodape{border-top:var(--borda); padding-block:var(--e8) var(--e6); color:var(--txt-3)}
.rodape a{text-decoration:none; color:var(--txt-3); transition:color var(--normal) var(--curva)}
.rodape a:hover{color:var(--txt)}
.rodape__legal{margin-top:var(--e7); padding-top:var(--e5); border-top:var(--borda);
  display:flex; flex-wrap:wrap; gap:var(--e3) var(--e5); align-items:center;
  font-size:12px; color:var(--txt-4)}

/* ---------- 15. BARRA DE COOKIES ------------------------------------- */
.cookies{position:fixed; left:var(--e4); right:var(--e4); bottom:var(--e4); z-index:var(--z-modal);
  max-width:520px; padding:var(--e5); background:var(--sup); border:var(--borda)}
.cookies h2{margin:0 0 var(--e2); font:600 var(--t-h4)/1.2 var(--f-display); letter-spacing:-.01em}
.cookies p{margin:0 0 var(--e4); font-size:13px; color:var(--txt-3)}
.cookies .flex{gap:var(--e2)}

/* ---------- 16. ANIMAÇÃO DE ENTRADA ---------------------------------- *
 * O JS só liga e desliga a classe .visivel. Todo o tempo, a curva e o
 * deslocamento vivem aqui, então ajuste de ritmo é ajuste de CSS.
 * Regra dura: scroll nunca é sequestrado. O elemento reage à posição,
 * o usuário continua dono da rolagem.
 * ------------------------------------------------------------------- */
[data-anima]{opacity:0}
[data-anima="sobe"]{transform:translateY(20px)}
[data-anima="desce"]{transform:translateY(-16px)}
[data-anima="entra-esq"]{transform:translateX(-24px)}
[data-anima="entra-dir"]{transform:translateX(24px)}
[data-anima="fio"]{transform:scaleX(0); transform-origin:left}
[data-anima].visivel{
  opacity:1; transform:none;
  transition:opacity 620ms var(--curva), transform 620ms var(--curva);
  transition-delay:var(--atraso,0ms);
}
/* o fio corre mais devagar que o texto, é ele que dá o compasso */
[data-anima="fio"].visivel{transition:opacity 200ms linear, transform 760ms var(--curva); transition-delay:var(--atraso,0ms)}

/* paralaxe: o JS escreve --y, o CSS aplica. Sem layout, só composição. */
[data-paralaxe]{transform:translate3d(0,var(--y,0px),0); will-change:transform}

/* quem pediu menos movimento recebe tudo pronto, sem transição */
@media (prefers-reduced-motion:reduce){
  [data-anima]{opacity:1 !important; transform:none !important; transition:none !important}
  [data-paralaxe]{transform:none !important}
}

/* ---------- 17. ESTRUTURA DO SITE ------------------------------------ */
/* fundo 3D preso, conteúdo rola por cima */
#fundo{position:fixed; inset:0; z-index:var(--z-fundo); pointer-events:none; background:var(--onyx)}
#fundo canvas{display:block; width:100%; height:100%}
#veu{
  position:fixed; inset:0; z-index:var(--z-veu); pointer-events:none;
  background:linear-gradient(90deg,rgba(14,15,18,.94) 0%,rgba(14,15,18,.72) 38%,rgba(14,15,18,.10) 66%,rgba(14,15,18,.28) 100%);
}
main,.topo,.rodape-site{position:relative; z-index:var(--z-conteudo)}

.topo{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-barra);
  display:flex; align-items:center; justify-content:space-between; gap:var(--e4);
  padding:20px var(--margem);
  background:linear-gradient(180deg,rgba(14,15,18,.94),rgba(14,15,18,0));
}
.topo__marca{display:flex; align-items:center; gap:13px; text-decoration:none}
.topo__marca svg{height:22px; width:auto}
.topo__marca span{font:600 11px/1 var(--f-display); letter-spacing:.24em; text-transform:uppercase; color:var(--txt-2)}
.topo nav{display:flex; gap:clamp(16px,2vw,30px)}
.topo nav a{
  position:relative; text-decoration:none; color:var(--txt-3);
  font:500 12px/1 var(--f-texto); letter-spacing:.10em; text-transform:uppercase;
  transition:color var(--normal) var(--curva);
}
.topo nav a:hover{color:var(--txt)}
.topo nav a.ativo{color:var(--txt)}
.topo nav a.ativo::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:var(--fio); background:var(--acento)}
.topo__idioma{display:flex; align-items:center; gap:4px; font:600 11px/1 var(--f-display); letter-spacing:.12em; color:var(--txt-4)}
.topo__idioma a{text-decoration:none; color:var(--txt-4); transition:color var(--normal) var(--curva)}
.topo__idioma a:hover{color:var(--txt)}
.topo__idioma .atual{color:var(--txt)}
@media (max-width:1000px){ .topo nav{display:none} }

.heroi{min-height:100svh; display:flex; flex-direction:column; justify-content:center;
       padding:132px var(--margem) 96px}
.heroi__pe{
  position:absolute; left:var(--margem); bottom:26px;
  display:flex; align-items:center; gap:var(--e3); color:var(--txt-4);
  font:500 var(--t-micro)/1 var(--f-texto); letter-spacing:.18em; text-transform:uppercase;
}
.heroi__pe i{display:block; width:1px; height:34px; background:linear-gradient(180deg,var(--acento),transparent)}
@media (max-width:900px){ .heroi{padding:104px var(--margem) 64px} .heroi__pe{display:none} }

/* botão flutuante de WhatsApp, só na versão em português */
.zap{
  position:fixed; right:var(--e5); bottom:var(--e5); z-index:var(--z-barra);
  display:inline-flex; align-items:center; gap:var(--e2);
  padding:15px 22px; background:var(--acento); color:#fff; text-decoration:none;
  font:600 11px/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  transition:background var(--normal) var(--curva), transform var(--rapido) var(--curva);
}
.zap:hover{background:var(--acento-hover); transform:translateY(-2px)}
.zap svg{width:16px; height:16px; fill:currentColor}
@media (max-width:600px){ .zap{right:var(--e4); bottom:var(--e4); padding:14px 18px} }

/* passo a passo numerado */
.passos{counter-reset:passo; display:grid; gap:var(--e4); margin:0; padding:0; list-style:none}
.passos li{counter-increment:passo; position:relative; padding-left:var(--e7); color:var(--txt-2)}
.passos li::before{
  content:counter(passo,decimal-leading-zero); position:absolute; left:0; top:-2px;
  font:800 var(--t-h4)/1 var(--f-display); color:var(--acento); letter-spacing:-.02em;
}

/* lista com marcador de incisão */
.lista{margin:0; padding:0; list-style:none; display:grid; gap:var(--e3)}
.lista li{position:relative; padding-left:var(--e5); color:var(--txt-2)}
.lista li::before{content:""; position:absolute; left:0; top:.62em; width:12px; height:var(--fio); background:var(--acento)}

/* nota de rodapé de seção */
.nota-secao{margin-top:var(--e5); padding-top:var(--e4); border-top:var(--borda);
  color:var(--txt-4); font-size:13px; max-width:76ch}

/* ---------- 18. CONSENTIMENTO E IDIOMA ------------------------------- */
.cookies__cat{padding:var(--e3) 0; border-top:var(--borda)}
.cookies__cat label{display:flex; align-items:center; gap:var(--e2); cursor:pointer;
  font:500 13px/1 var(--f-texto); color:var(--txt-2)}
.cookies__cat label b{font-weight:600}
.cookies__cat label i{margin-left:auto; font-style:normal; color:var(--txt-4); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase}
.cookies__cat input{accent-color:var(--acento); width:16px; height:16px}
.cookies__cat p{margin:var(--e2) 0 0; font-size:12px; color:var(--txt-4)}

.sugestao{
  position:fixed; left:0; right:0; top:0; z-index:var(--z-modal);
  display:flex; align-items:center; justify-content:center; gap:var(--e3);
  padding:11px var(--e6) 11px var(--e4);
  background:var(--sup-2); border-bottom:var(--borda);
  font-size:13px; color:var(--txt-2);
}
.sugestao__x{
  position:absolute; right:var(--e3); top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--txt-4); font-size:20px; line-height:1; cursor:pointer;
}
.sugestao__x:hover{color:var(--txt)}

/* ---------- 19. UTILITÁRIOS ------------------------------------------ */
.so-leitor{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.centro{text-align:center}
.pilha{display:grid; gap:var(--e4)}
.pilha--larga{display:grid; gap:var(--e6)}