/* ============================================================
   Trade Fence · Landing Page
   Sistema: cinza industrial + vermelho da marca.
   Sem build. Tokens em :root.
   ============================================================ */

:root{
  /* Neutros, aço frio, sem preto puro */
  --ink:        #0C0E10;
  --ink-2:      #14181C;
  --ink-3:      #1D232A;
  --steel-700:  #33404C;
  --steel-500:  #5A6874;
  --steel-400:  #7C8896;
  --steel-300:  #A9B4BF;
  --steel-200:  #D5DCE3;
  --steel-100:  #E7ECF1;
  --paper:      #F5F7F9;
  --white:      #FFFFFF;

  /* Acento único, vermelho da marca.
     Branco sobre --accent dá 6,66:1, então o mesmo tom serve para grafismo e
     para botão preenchido: não precisa mais de dois vermelhos como antes.
     Sobre fundo escuro, porém, #B71810 cai para 2,9:1 e reprova. Daí
     --accent-on-dark, e --accent-ctx, que troca de valor conforme a superfície. */
  --accent:         #B71810;
  --accent-hover:   #98120B;
  --accent-on-dark: #E14237;
  --accent-dim:     rgba(183,24,16,.14);
  --accent-ctx:     var(--accent);

  --ok:         #15803D;
  --err:        #B91C1C;

  /* Tipografia, Manrope (títulos) + Sora (corpo) */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Sora tem avanço lateral largo por padrão. Tracking negativo no corpo
     fecha o texto sem virar aperto; os títulos usam Manrope, que aguenta
     tracking bem mais fechado sem colapsar as contraformas. */
  --track-body:    -.011em;
  --track-display: -.038em;
  --track-h1:      -.046em;

  /* ---------- Escala tipográfica ----------
     Conjunto fechado de valores inteiros: 48 / 40 / 24 / 20 / 18 / 16 / 14.
     Nenhum clamp() e nenhum vw em tamanho de fonte, vw produz um valor
     diferente (e quebrado) em cada largura de tela, que é justamente o que
     destrói a padronização. Os tokens são redefinidos por breakpoint logo
     abaixo, então cada faixa tem um tamanho previsível e conferível.
     Estes são os valores de MOBILE; as faixas maiores sobem daqui. */
  --fs-h1:    32px;
  --fs-h2:    24px;
  --fs-h3:    20px;
  --fs-lede:  16px;
  --fs-body:  16px;
  --fs-sm:    14px;
  --fs-xs:    14px;

  /* Espaçamento, densidade 4/10, marketing respira */
  --s-1: .5rem;  --s-2: .75rem; --s-3: 1rem;   --s-4: 1.5rem;
  --s-5: 2rem;   --s-6: 3rem;   --s-7: 4.5rem; --s-8: 6rem; --s-9: 8rem;

  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 28px;  --r-hero: 40px;
  --wrap: 1280px;   /* teto de largura: vale para desktop e ultrawide */
  --ease: cubic-bezier(.16,1,.3,1);

  /* Sombras tingidas com o matiz do fundo, nunca cinza neutro */
  --sh-1: 0 1px 2px rgba(12,14,16,.06), 0 4px 12px rgba(12,14,16,.05);
  --sh-2: 0 18px 44px -22px rgba(12,14,16,.32);
}

/* ============================================================
   BREAKPOINTS, as cinco faixas do projeto, escritas mobile-first:

     mobile     ....  até  767px
     tablet     ....  768 – 1024px
     notebook   .... 1025 – 1366px
     desktop    .... 1367 – 2400px
     ultrawide  .... 2401px  +

   Ultrawide não tem nenhum aumento de escala nem de largura: o container
   para em 1280px e a tipografia para em 48/40. O teto é proposital, em
   monitor de 3440px o que o cliente não quer é a página crescendo com ele.
   ============================================================ */

/* ---------- TABLET: 768 – 1024 ---------- */
@media (min-width:768px){
  :root{
    --fs-h1:   40px;
    --fs-h2:   32px;
    --fs-body: 18px;
    --fs-lede: 18px;
    --fs-sm:   16px;
  }
}

/* ---------- NOTEBOOK: 1025 – 1366 ---------- */
@media (min-width:1025px){
  :root{
    --fs-h1:   48px;
    --fs-h2:   40px;
    --fs-h3:   24px;
    --fs-lede: 20px;
  }
}

/* ---------- DESKTOP: 1367 – 2400 ----------
   Herda notebook de propósito: 48/40 já é o topo da escala. A faixa existe
   como ponto de ajuste de layout, não de tamanho de fonte. */

/* ---------- ULTRAWIDE: 2401 + ----------
   Nada cresce aqui. Ver o comentário do bloco de breakpoints acima. */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.66;
  letter-spacing:var(--track-body);
  -webkit-font-smoothing:antialiased;
  /* `clip`, e não `hidden`. Com `overflow-x: hidden` o navegador computa o
     eixo Y para `auto`, o <body> vira um container de rolagem, e todo
     `position: sticky` dentro dele passa a se ancorar a um container que não
     rola: o sticky simplesmente para de funcionar. Era por isso que a coluna
     da esquerda da dobra 4 nunca ficava parada, apesar do `position: sticky`
     escrito lá desde o início. `clip` corta igual e não cria container de
     rolagem. */
  overflow-x:clip;
  width:100%;
  max-width:100%;
}

img,svg{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; letter-spacing:var(--track-display); line-height:1.2; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:var(--s-3); top:-100px; z-index:200;
  background:var(--accent); color:var(--white);
  padding:var(--s-2) var(--s-4); border-radius:var(--r-sm); font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus-visible{ top:var(--s-3); }

/* Toda superfície escura reapontar --accent-ctx é o que mantém acento legível
   nos dois fundos sem espalhar `if` de cor por dezenas de regras. */
.hero,.sec--dark,.prod,.closer,.foot,.stickybar{
  --accent-ctx: var(--accent-on-dark);
}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent-ctx);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s-4); }

/* ============================ BOTÕES ============================ */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm);
  /* Altura fixa por variante, não derivada de padding + font-size + line-height.
     Antes as quatro variantes davam quatro alturas diferentes, e dois CTAs lado
     a lado saíam desalinhados. Agora o padding vertical é 0 e quem define a
     altura é o min-height, então a altura não muda com o texto nem com a fonte. */
  min-height:48px; padding:0 1.35rem; border-radius:var(--r-md);
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  cursor:pointer;
  text-align:center;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .12s var(--ease),
             box-shadow .2s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn--accent{
  --btn-bg:var(--accent); --btn-fg:var(--white); --btn-bd:var(--accent);
  box-shadow:0 10px 24px -14px rgba(183,24,16,.85);
  /* overflow para o brilho ser recortado pelo raio do botão, senão ele
     vazaria pelos cantos. */
  position:relative; overflow:hidden;
}
.btn--accent:hover{ --btn-bg:var(--accent-hover); --btn-bd:var(--accent-hover); }

/* Brilho que atravessa o botão em laço.

   Uma faixa clara inclinada, larga e de bordas suaves, deslocada por
   `transform`: é a única propriedade aqui que o navegador anima na GPU sem
   recalcular layout nem repintar o botão, então os cinco CTAs animando ao
   mesmo tempo não custam quadro.

   A faixa tem a largura do botão e o trajeto vai de -100% a 100%, de uma borda
   à outra. A primeira versão usava faixa de 200% indo de -60% a 60%, e a conta
   não fechava: o núcleo claro do gradiente passava boa parte do trajeto fora
   do botão, e o clareamento medido no meio do ciclo era de (183,24,16) para
   (186,36,29), invisível.

   O keyframe vai de 0 a 55% e fica parado até 100%: a pausa entre as passadas
   é o que separa "chamar atenção" de "piscar sem parar". */
.btn--accent::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0;
  width:100%;
  background:linear-gradient(100deg,
    transparent   16%,
    rgba(255,255,255,.14) 38%,
    rgba(255,255,255,.50) 50%,
    rgba(255,255,255,.14) 62%,
    transparent   84%);
  transform:translateX(-100%);
  animation:brilho-cta 4.6s ease-in-out infinite;
  /* Sem isto o pseudo-elemento comeria o clique do botão inteiro. */
  pointer-events:none;
}
@keyframes brilho-cta{
  0%        { transform:translateX(-100%); }
  55%, 100% { transform:translateX(100%); }
}

@media (prefers-reduced-motion: reduce){
  .btn--accent::after{ animation:none; opacity:0; }
}

.btn--ghost{ --btn-fg:var(--steel-200); --btn-bd:rgba(255,255,255,.22); }
.btn--ghost:hover{ --btn-bg:rgba(255,255,255,.07); --btn-fg:var(--white); --btn-bd:rgba(255,255,255,.4); }

.btn--sm{ font-size:var(--fs-xs); min-height:44px; padding:0 1rem; }
.btn--lg{ font-size:var(--fs-body); min-height:64px; padding:0 1.75rem; }
/* .btn--xl saiu de uso: todos os CTAs da página são .btn--lg. */
.btn--block{ width:100%; }

.ico{ width:1.15em; height:1.15em; flex:none; }
.ico--check{ color:var(--accent-ctx); width:1.05rem; height:1.05rem; }

/* Um único logotipo na página inteira: a arte oficial do cliente, em três
   tamanhos. O wordmark composto (pássaro isolado + nome em Manrope) que
   existia antes saiu: ele resolvia a altura de 26px de uma barra de navegação
   que não existe mais, e ter dois logotipos diferentes na mesma página é pior
   que ter um pequeno.
   TODO CLIENTE: trocar o PNG por SVG quando o vetor chegar. */
.logo-hero,.logo-foot,.logo-topo{ display:inline-block; }
.logo-hero img,.logo-foot img,.logo-topo img{ width:auto; }

/* A marca nova é mais alta em proporção que a anterior (1,5:1 contra 2:1) e
   carrega a assinatura "cercamentos | telas | grades | arames" numa faixa que
   ocupa 6% da arte. Nos 72px de antes essa linha caía para 4px e virava
   sujeira; a altura sobe para que ela se leia. */
.logo-hero img{ height:84px; }
/* Em aparelho baixo a marca cede espaço para o botão: num iPhone SE (667px de
   altura) os 84px deixavam o CTA a 23px da dobra. */
@media (max-height:700px){ .logo-hero img{ height:64px; } }
@media (min-width:1025px){ .logo-hero img{ height:96px; } }

.logo-foot{ justify-self:start; }
.logo-foot img{ height:104px; }

.logo-topo img{ height:56px; }

/* ============================ HERO ============================ */
/* A faixa em volta do hero. O padding daqui é a espessura da borda.
   A cor é --paper, a mesma da seção seguinte: assim a moldura lê como o fundo
   da página aparecendo em volta de um cartão, e não como uma borda branca
   desenhada em cima dela. */
.hero-frame{
  background:var(--paper);
  padding:var(--s-2);
}
@media (min-width:768px){ .hero-frame{ padding:var(--s-4); } }

.hero{
  position:relative;
  background:var(--ink);
  color:var(--steel-200);
  /* O respiro extra no topo e a janela de foto do celular: a copia desce para
     a base da caixa e o terco de cima fica so imagem, com o degrade fechando
     apenas onde o texto e o botao pousam. */
  /* A janela de foto encolhe junto com a tela: num iPhone SE (667px de
     altura) 132px fixos deixavam o CTA a 11px da dobra. Com 15svh o respiro
     acompanha o aparelho e o botao sempre sobra folga. */
  padding:calc(var(--s-5) + min(132px, 15svh)) 0 var(--s-5);
  overflow:hidden;
  isolation:isolate;
  /* O raio precisa do overflow:hidden acima para recortar a foto e o degradê,
     que são filhos absolutos. */
  border-radius:var(--r-hero);
  /* Sem cabeçalho, o hero começa no topo da janela. min-height garante que a
     copy tenha ar sobre a foto em vez de ficar comprimida contra o topo.
     O desconto de 2x o padding da moldura é o que impede a soma
     hero + borda de passar da altura da janela. */
  display:grid; align-items:end;
  min-height:min(calc(88svh - var(--s-2) * 2), 720px);
}
@media (min-width:768px){
  .hero{ padding:var(--s-6) 0; align-items:center; min-height:min(calc(90svh - var(--s-4) * 2), 720px); }
}
/* O padding é medido, não escolhido: com o H1 em duas linhas o conteúdo do
   hero soma 623px, e 72px de cada lado dão 767px, que é o que cabe num
   notebook de 768px de altura sem empurrar o CTA para fora da dobra. */
@media (min-width:1025px){ .hero{ padding:var(--s-7) 0; min-height:min(calc(88svh - var(--s-4) * 2), 700px); } }

.hero__bg{ position:absolute; inset:0; z-index:-2; display:block; }
/* A foto e panoramica (1920x863). Numa caixa alta de celular a altura ja
   cabe inteira, entao quem manda no que aparece e o eixo X: em 50% cai o
   trecho de muro liso, e em 64% entra o telhado, a arvore e a linha inteira
   de concertina. */
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:64% 50%; }
@media (min-width:768px){ .hero__bg img{ object-position:50% 45%; } }

/* No celular a foto e a coisa mais cara da dobra, entao o escuro sai do meio
   e desce para o rodape: o terco de cima fica quase limpo, e o degrade so
   fecha onde a copy e o botao realmente pousam. */
.hero__wash{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(12,14,16,.22) 0%,
      rgba(12,14,16,.08) 10%,
      rgba(12,14,16,.40) 20%,
      rgba(12,14,16,.72) 29%,
      rgba(12,14,16,.88) 42%,
      rgba(12,14,16,.94) 62%,
      rgba(12,14,16,.96) 100%),
    radial-gradient(120% 34% at 50% 0%, rgba(183,24,16,.20), transparent 66%);
}
/* Do tablet para cima a copy volta a ocupar o meio da caixa, entao o escuro
   volta para o centro. A camada radial vermelha amarra a foto ao sistema de
   cor da marca. */
@media (min-width:768px){
  .hero__wash{
    background:
      radial-gradient(105% 80% at 50% 46%, rgba(12,14,16,.80) 0%, rgba(12,14,16,.52) 52%, rgba(12,14,16,.18) 100%),
      radial-gradient(90% 65% at 50% 0%, rgba(183,24,16,.22), transparent 60%),
      linear-gradient(180deg, rgba(12,14,16,.46) 0%, rgba(12,14,16,.22) 42%, rgba(12,14,16,.70) 92%, rgba(12,14,16,.86) 100%);
  }
}

.hero__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--s-4);
  display:grid; justify-items:start; text-align:left;
  /* O gap é menor no mobile por conta da dobra: com var(--s-4) em cinco
     intervalos o CTA saía da janela de 844px em quem chega de anúncio. */
  gap:var(--s-3);
}
@media (min-width:768px){ .hero__inner{ gap:var(--s-4); } }

/* Sem pílula: no layout à esquerda ela virava uma caixa solta acima do H1.
   Texto em caixa alta com tracking já marca a hierarquia. */
.eyebrow{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  /* Branco, não --steel-300. Sem a pílula ela perdeu o fundo escuro próprio e
     caiu para 4,11:1 sobre a parede clara da foto, abaixo do mínimo para texto
     de 14px. Em branco vai a 8,6:1, e a credencial ganha o peso que merece. */
  color:var(--white);
  margin:0;
}

/* A medida em ch é o que decide a quebra. 24ch a 48px fecha o H1 em duas
   linhas; `text-wrap: balance` equilibra as duas, e onde não houver suporte a
   quebra continua correta, só menos elegante. */
.hero__title{
  text-wrap:balance;
  font-size:var(--fs-h1);
  /* 30ch a 48px fecha em duas linhas. A headline nova tem 66 caracteres
     contra 54 da antiga: com os 24ch de antes virava três. */
  max-width:30ch;
  margin:0;
  color:var(--white);
  letter-spacing:var(--track-h1);
  line-height:1.2;
}
/* No notebook para cima, parágrafo e CTA dividem a linha. `align-items:end`
   alinha a base do botão com a última linha do parágrafo, que é o que faz os
   dois lerem como uma faixa e não como dois blocos soltos. */
.hero__mid{
  width:100%;
  display:grid; gap:var(--s-4);
}
@media (min-width:1025px){
  .hero__mid{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s-6); align-items:center; }
}

.hero__cta-wrap{ display:grid; gap:var(--s-2); justify-items:start; }
@media (min-width:1025px){ .hero__cta-wrap{ justify-items:end; } }

.hero__sub{
  max-width:52ch;
  font-size:var(--fs-lede);
  color:var(--steel-200);
  line-height:1.62;
  /* `pretty` evita a última linha com uma palavra só. Sem suporte, a medida
     de 52ch já dá uma quebra decente por conta própria. */
  text-wrap:pretty;
}
/* balance só no tablet: no notebook para cima o parágrafo já divide a linha
   com o CTA, e equilibrar as linhas dentro de uma coluna estreita produz
   quebras piores do que a natural. */
@media (min-width:768px) and (max-width:1024px){ .hero__sub{ text-wrap:balance; } }

/* Régua acima dos bullets, e ícone sempre ao lado do texto, nunca acima.
   Os textos foram encurtados para o mesmo comprimento justamente para caber
   em uma linha cada: com dois deles em duas linhas e um em uma, as três
   colunas ficavam com alturas diferentes e a régua perdia a função. */
.hero__bullets{
  margin-top:var(--s-2);
  padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.18);
  display:grid; gap:var(--s-3);
  width:100%;
  text-align:left;
}
@media (min-width:1025px){ .hero__bullets{ margin-top:var(--s-3); padding-top:var(--s-5); } }
/* O arranjo é o mesmo em toda faixa (ícone ao lado do texto, como no print);
   o que muda é o número de colunas, e o corte está em 1025px por medida, não
   por gosto:

     largura da tela   coluna       texto em 1 linha?
     768px             224px        não, quebra em 2
     1024px            309px        não, quebra em 2
     1025px            394px        sim

   O texto mais longo ("Fabricação própria certificada") precisa de ~255px, e
   com o ícone de 52px mais o gap a coluna precisa passar de ~320px. Abaixo de
   1025px as três empilham em coluna única, onde o texto tem a largura inteira
   e sempre cabe em uma linha. */
.hero__bullets li{
  display:flex; align-items:center; gap:.9rem;
  font-size:var(--fs-sm); color:var(--steel-200);
}
@media (min-width:1025px){
  /* `space-between` e não colunas de 1fr: com colunas iguais o texto de cada
     bullet começa na borda da sua coluna e termina onde acaba a frase, e o
     último parava ~110px antes da borda direita, desalinhado do CTA e da
     régua logo acima. Distribuindo o espaço entre os itens, o primeiro encosta
     à esquerda e o último à direita, na mesma medida do resto do hero. */
  .hero__bullets{ display:flex; justify-content:space-between; gap:var(--s-4); }
  /* Com quatro itens o ícone sobe para cima do rótulo. Medido: o rótulo mais
     longo pede 276px e, lado a lado, cada item precisaria de 342px — quatro
     deles somam 1370px numa faixa de 1232px, e todos quebravam com uma
     palavra órfã na segunda linha. Empilhado, cada rótulo tem a largura
     inteira do seu bloco e volta a caber em uma linha só. */
  .hero__bullets li{ flex-direction:column; align-items:flex-start; gap:.85rem; }
  .hero__bullet-txt{ white-space:nowrap; }
}

/* Vidro fosco atrás do ícone. `backdrop-filter` desfoca a própria foto do
   hero, então o quadrado muda de tom conforme o que está por trás dele em vez
   de virar um cinza chapado. O `background` semitransparente é o que segura o
   efeito onde o backdrop-filter não é suportado: sem ele o quadrado
   desapareceria. */
.hero__bullets .bico{
  flex:none;
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:var(--r-md);
  /* Branco, não o vermelho de acento: dentro do quadrado de vidro fosco o
     vermelho competia com o CTA, que é o único vermelho que deve chamar
     clique na dobra. */
  color:var(--white);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 12px 28px -14px rgba(0,0,0,.95);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.hero__bullets li:hover .bico{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.28);
}
.hero__bullets .bico svg{ width:24px; height:24px; }
.hero__bullet-txt{ line-height:1.4; }

/* Credencial da parceria, logo abaixo do CTA. */
.hero__cred{
  margin:0;
  display:flex; align-items:flex-start; gap:.55rem;
  font-size:var(--fs-sm); color:var(--steel-300); line-height:1.5;
}
@media (min-width:1025px){ .hero__cred{ text-align:right; } }
/* Mesma solução dos bullets: a caixa do ícone tem a altura de uma linha
   (1.5em, o line-height daqui) e centra o SVG dentro. No mobile este texto
   quebra em duas linhas, e com `align-items:center` o escudo descia para o
   meio das duas. */
.hero__cred .ico{
  flex:none; width:1.5em; height:1.5em;
  color:var(--accent-ctx);
}
.hero__actions{ margin:0; display:flex; flex-wrap:wrap; gap:var(--s-2); }



/* O CSS do formulário saiu junto com o formulário. A página converte só
   por WhatsApp; se um dia voltar a ter form, está no histórico do git. */

/* ============================ SEÇÕES ============================ */
.sec{ padding:var(--s-8) 0; position:relative; }
@media (min-width:768px){ .sec{ padding:var(--s-9) 0; } }

.sec--dark{ background:var(--ink); color:var(--steel-200); }
.sec--seg{ background:var(--white); }

/* Sem max-width aqui: `ch` resolveria na fonte do container (Sora 16px ≈ 285px),
   não na do título. Quem limita a medida é a própria .h2, em ch de Manrope 48px. */
.sec__head{ margin-bottom:var(--s-7); }
.sec__head--wide{ max-width:none; display:grid; gap:var(--s-4); }
@media (min-width:1025px){
  .sec__head--wide{ grid-template-columns:1.25fr 1fr; gap:var(--s-6); align-items:end; }
}

.h2{ font-size:var(--fs-h2); max-width:20ch; letter-spacing:var(--track-h1); }
/* Estes dois títulos são longos e caíam em 3 linhas na medida padrão de 20ch.
   Medida maior, e a régua passa a ser a contagem de linhas, não o `ch`. */
.h2--wide2{ max-width:30ch; }
.sec__head--wide .h2{ max-width:18ch; }
.sec--dark .h2{ color:var(--white); }

.lede{ font-size:var(--fs-lede); color:var(--steel-500); max-width:56ch; line-height:1.65; }
.sec__cta{ margin-top:var(--s-7); }

/* ---------- Dobra 2: dores como linhas divididas ---------- */
.pains{ border-top:1px solid var(--steel-200); }
.pain{
  display:grid; gap:var(--s-3);
  grid-template-columns:auto 1fr;
  align-items:start;
  padding:var(--s-5) 0;
  border-bottom:1px solid var(--steel-200);
}
@media (min-width:1025px){
  .pain{ grid-template-columns:3.25rem minmax(0,20ch) minmax(0,1fr); gap:var(--s-5); align-items:center; }
}
.pain__ico{
  width:3.25rem; height:3.25rem; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--steel-200); border-radius:var(--r-md);
  background:var(--white); color:var(--accent);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.pain__ico svg{ width:1.4rem; height:1.4rem; }
.pain:hover .pain__ico{ border-color:var(--accent); transform:translateY(-2px); }
.pain__body{ display:contents; }
.pain__quote{
  font-family:var(--font-display); font-size:var(--fs-h3); font-weight:600;
  color:var(--ink); letter-spacing:var(--track-display); line-height:1.2;
}
.pain__answer{ color:var(--steel-500); max-width:62ch; }
@media (max-width:1024px){
  .pain__body{ display:block; }
  .pain__answer{ margin-top:.5rem; }
}

/* ---------- Selo de autoridade ---------- */
.seal{
  margin-top:var(--s-7);
  display:grid; gap:var(--s-5);
  padding:var(--s-5);
  background:var(--white);
  border:1px solid var(--steel-200);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
@media (min-width:768px){ .seal{ grid-template-columns:auto 1fr; align-items:center; gap:var(--s-6); } }

/* No lugar do logotipo do parceiro entra o material em close: o texto ao lado
   fala de aço certificado e fabricação com procedência, e a foto mostra
   exatamente isso. A largura é fixa para a coluna `auto` do grid não variar
   com o recorte. */
.seal__foto{
  display:block; flex:none;
  border-radius:var(--r-md); overflow:hidden;
  background:var(--steel-200);
}
.seal__foto img{
  display:block; width:100%; height:100%;
  aspect-ratio:3/2; object-fit:cover;
}
@media (min-width:768px){ .seal__foto{ width:264px; } }
.seal__text{ color:var(--steel-500); font-size:var(--fs-body); line-height:1.65; max-width:62ch; }
.seal__text strong{ color:var(--ink); font-weight:600; }



/* ---------- Dobra 3: bento denso ---------- */
.bento{
  display:grid; gap:var(--s-3);
  grid-template-columns:1fr;
  grid-auto-flow:dense;
}
@media (min-width:768px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1025px){
  .bento{ grid-template-columns:repeat(4,1fr); }
  .prod--w1{ grid-column:span 1; }
  .prod--w2{ grid-column:span 2; }
  .prod--w3{ grid-column:span 3; }
}

.prod{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);
  background:var(--ink-2);
  /* O texto senta no rodapé do card; a foto ocupa o card inteiro por trás. */
  display:flex; align-items:flex-end;
  min-height:340px;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
@media (min-width:1025px){ .prod{ min-height:380px; } }
.prod:hover{ border-color:rgba(225,66,55,.5); transform:translateY(-3px); }

.prod__img{
  position:absolute; inset:0; z-index:-2;
  display:block; overflow:hidden;
}
.prod__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.prod:hover .prod__img img{ transform:scale(1.05); }

/* Degradê entre foto e texto. Três paradas, não duas: com duas, a parte de
   cima escurece demais para dar contraste embaixo, e a foto vira mancha. A
   primeira parada quase transparente preserva o topo da imagem, e a última,
   quase opaca, é o que segura o texto. */
.prod::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(
    180deg,
    rgba(12,14,16,0)    0%,
    rgba(12,14,16,.16) 44%,
    rgba(12,14,16,.80) 74%,
    rgba(12,14,16,.96) 100%
  );
}

.prod__body{ position:relative; padding:var(--s-4); display:grid; gap:.45rem; }
.prod__body h3{ font-size:var(--fs-h3); color:var(--white); }
/* --steel-300 e não --steel-400: sobre foto, o corpo precisa de mais luz que
   sobre superfície chapada. */
.prod__body p{ font-size:var(--fs-sm); color:var(--steel-300); line-height:1.6; max-width:58ch; }

/* ---------- Dobra 4: split com título fixo ---------- */
.split{ display:grid; gap:var(--s-6); }
@media (min-width:1025px){ .split{ grid-template-columns:.85fr 1.15fr; gap:var(--s-8); align-items:start; } }
.split__sticky{ display:grid; gap:var(--s-4); justify-items:start; }
@media (min-width:1025px){
  /* `align-self: stretch` desfaz o `align-items: start` do .split só para esta
     célula. Sem isso ela teria a altura do próprio conteúdo (219px), e o
     sticky lá dentro não teria território nenhum para percorrer: era a segunda
     razão de a coluna nunca ficar parada. */
  .split__aside{ align-self:stretch; }
  .split__sticky{ position:sticky; top:6rem; }
}
.split__btn{ margin-top:var(--s-2); }

.diffs{ border-top:1px solid var(--steel-200); }
.diff{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-4);
  align-items:baseline;
  padding:var(--s-5) 0;
  border-bottom:1px solid var(--steel-200);
  /* transform, nunca padding: padding anima layout e causa thrash */
  transition:transform .3s var(--ease);
}
.diff:hover{ transform:translateX(.6rem); }

/* ========== Baralho empilhado, do notebook para cima ==========

   Usada pela dobra 4 (diferenciais). O FAQ chegou a usar também, e saiu a
   pedido: com `<details>` expansível o efeito atrapalhava mais do que ajudava,
   porque a resposta aberta disputava espaço com as perguntas coladas.
   Cada filho de `.pilha` é `position: sticky` com um `top` um degrau maior que
   o do anterior: ao rolar, o primeiro gruda, o segundo gruda um degrau abaixo
   e passa por cima, e no fim todos formam uma pilha com a faixa do topo de
   cada um à vista. A coluna da esquerda é sticky com um `top` menor, então
   fica parada durante todo o percurso.

   Três coisas que o efeito exige:

   1. Fundo opaco no item. Sem ele o de cima ficaria transparente e se veria o
      de baixo atravessando o texto.
   2. Ordem de pintura. Itens posicionados mais adiante no DOM ficam acima dos
      anteriores por padrão, que é o necessário aqui; nenhum z-index é
      declarado.
   3. Espaço de rolagem depois do último item, senão ele nunca chega a grudar.
      Ele entra como `::after` no FLUXO e não como `padding` do container: o
      território de colagem de um sticky é o *content box* do pai, e padding
      fica de fora dele.

   `position: sticky` puro, sem JS: é rolagem, não animação, então não depende
   do GSAP. No mobile e no tablet nada disso existe, a lista volta a ser lista.
   ========================================================== */
@media (min-width:1025px){
  .pilha{
    --pilha-topo: 6rem;
    /* O degrau é a altura do cabeçalho do item, não um número escolhido.
       Com 20px via-se só a borda e a pilha fechada era um monte de linhas sem
       informação; com 44px o título aparecia cortado ao meio, que é pior. */
    --pilha-passo: 56px;
    /* `display: block`, e não grid: item sticky dentro de grid tem como
       território a PRÓPRIA célula, não o container, e grudaria por um degrau
       só. Por isso o espaçamento vem de margin nos itens, não de gap. */
    display:block;
    border-top:0;
  }
  .pilha > *{
    position:sticky;
    top:calc(var(--pilha-topo) + (var(--i) - 1) * var(--pilha-passo));
    border:1px solid var(--steel-200);
    border-radius:var(--r-lg);
    background:var(--white);
    box-shadow:0 -1px 0 rgba(12,14,16,.04), 0 18px 40px -28px rgba(12,14,16,.45);
    margin-bottom:var(--s-3);
  }
  .pilha > *:nth-child(1){ --i:1; }
  .pilha > *:nth-child(2){ --i:2; }
  .pilha > *:nth-child(3){ --i:3; }
  .pilha > *:nth-child(4){ --i:4; }
  .pilha > *:nth-child(5){ --i:5; }
  .pilha > *:nth-child(6){ --i:6; }
  /* O z-index repete a ordem do DOM, que já era o padrão, mas declará-lo é o
     que permite a exceção logo abaixo. */
  .pilha > *{ z-index:var(--i); }
  .pilha::after{ content:""; display:block; height:34vh; }

  /* Diferenciais */
  .diff{ padding:var(--s-4) var(--s-5); }
  /* translateX num sticky desloca a partir da posição colada, e o item
     empurrado para o lado sai de baixo do que está em cima. */
  .diff:hover{ transform:none; }

}

/* Quem pediu menos movimento recebe a lista, não o baralho. */
@media (prefers-reduced-motion: reduce){
  .pilha > *{ position:static; }
  .pilha::after{ display:none; }
}
}
.diff__num{
  font-family:var(--font-display); font-size:var(--fs-xs); font-weight:600;
  color:var(--accent); letter-spacing:.06em;
  padding-top:.28rem;
}
.diff h3{ font-size:var(--fs-h3); letter-spacing:var(--track-display); }
.diff p{ margin-top:.4rem; color:var(--steel-500); max-width:56ch; }

/* ---------- Dobra 5: acordeão horizontal ---------- */
.segs{ display:grid; gap:var(--s-3); }
@media (min-width:1025px){
  .segs{
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:var(--s-2);
    height:420px;
  }
  .segs:hover .seg{ flex:none; }
  .seg{ transition:grid-column .5s var(--ease); }
  .segs{ grid-auto-flow:column; grid-auto-columns:1fr; }
  .seg[data-open]{ grid-column:span 1; }
}

.seg{
  position:relative; overflow:hidden; isolation:isolate;
  padding:var(--s-4);
  /* Transparente, e não sem borda: a linha escura aparecia contra o fundo
     claro da seção, mas o 1px precisa continuar ocupando espaço, senão o card
     salta quando o hover pinta a borda de acento. */
  border:1px solid transparent;
  border-radius:var(--r-lg);
  background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem;
  min-height:340px;
  cursor:default;
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.seg:hover,.seg:focus-visible{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:var(--sh-2);
}

/* Foto de fundo e degradê, mesma construção dos cards de produto: quatro
   paradas, para escurecer onde o texto está sem apagar a imagem toda. Aqui as
   fotos são retrato e o card é mais estreito, então o escuro sobe um pouco
   antes do que na dobra 3. */
.seg__img{ position:absolute; inset:0; z-index:-2; display:block; overflow:hidden; }
.seg__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.seg:hover .seg__img img,.seg:focus-visible .seg__img img{ transform:scale(1.06); }
.seg::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(
    180deg,
    rgba(12,14,16,0)    0%,
    rgba(12,14,16,.18) 38%,
    rgba(12,14,16,.82) 70%,
    rgba(12,14,16,.96) 100%
  );
}

.seg__title{ font-size:var(--fs-h3); letter-spacing:var(--track-display); color:var(--white); }
/* --steel-300 e não --steel-500: sobre foto, o corpo precisa de mais luz. */
.seg__text{ font-size:var(--fs-sm); color:var(--steel-300); line-height:1.58; }

/* ---------- Dobra 6: FAQ ---------- */
.sec--faq{
  padding-bottom:0; background:var(--paper);
  /* Altura da faixa de obras: lida tanto por ela quanto pelo fechamento, que
     precisa saber quanto foi puxado para cima para devolver em padding. */
  --galeria-alt: 164px;
  --galeria-pad: var(--s-3);
  --galeria-gap: 10px;
  --galeria-raio: 18px;
}

.faq{ border-top:1px solid var(--steel-200); }
.qa{ border-bottom:1px solid var(--steel-200); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-4) 0;
  cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-body);
  letter-spacing:var(--track-display); color:var(--ink);
  min-height:44px;
  transition:color .2s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--accent); }
/* O + vive dentro de um disco de acento. As duas barras são pseudo-elementos
   e não um SVG porque uma delas gira para virar o traço do "menos": com dois
   ícones trocados haveria um salto no meio da transição. */
.qa summary i{
  position:relative; flex:none;
  width:2rem; height:2rem; border-radius:50%;
  background:var(--accent);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.qa summary i::before,.qa summary i::after{
  content:""; position:absolute; left:50%; top:50%;
  width:.85rem; height:1.6px; margin:-.8px 0 0 -.425rem;
  background:var(--white); border-radius:1px;
  transition:transform .3s var(--ease);
}
.qa summary i::after{ transform:rotate(90deg); }
.qa[open] summary i::after{ transform:rotate(0deg); }
.qa summary:hover i{ background:var(--accent-hover); transform:scale(1.06); }
.qa__body{ padding:0 0 var(--s-4); color:var(--steel-500); max-width:68ch; line-height:1.65; }

/* ---------- Faixa de obras (entre o FAQ e o fechamento) ---------- */
/* A faixa nasce na sessão clara e termina dentro da escura. O recuo negativo
   puxa o fechamento para cima exatamente metade da altura da faixa, e o
   padding-top dele devolve esse espaço, para que o texto não fique embaixo
   das fotos. */
.galeria{
  position:relative; z-index:3;
  overflow:hidden;
  padding-block:var(--galeria-pad);
  margin-top:var(--s-7);
  margin-bottom:calc(-1 * (var(--galeria-alt) / 2 + var(--galeria-pad)));
}
/* O borrão é do fundo, não das fotos: o backdrop-filter pega a emenda
   claro/escuro que passa por trás e a dissolve num degradê. O véu translúcido
   por cima tira o resto do contraste da linha. */
.galeria__veu{
  position:absolute; inset:0; z-index:0;
  backdrop-filter:blur(22px) saturate(115%);
  -webkit-backdrop-filter:blur(22px) saturate(115%);
  background:linear-gradient(180deg,
    rgba(244,245,246,.66) 0%,
    rgba(182,186,190,.34) 34%,
    rgba(44,48,52,.20) 66%,
    rgba(12,14,16,0) 100%);
  pointer-events:none;
}
.galeria__pista{
  position:relative; z-index:1;
  display:flex; width:max-content;
  animation:galeria 96s linear infinite;
  will-change:transform;
}
.galeria__bloco{ display:flex; gap:var(--galeria-gap); padding-right:var(--galeria-gap); }
/* As fotos já saíram do preparo todas em 4:3, então a altura fixa basta para
   igualar o tamanho de todas sem esticar nenhuma. */
.galeria__pista img{
  display:block; flex:none;
  height:var(--galeria-alt);
  width:calc(var(--galeria-alt) * 3 / 2);
  object-fit:cover;
  /* Fundo neutro no lugar da foto: se o carregamento preguiçoso ainda não
     alcançou o quadro que a pista trouxe para a tela, aparece uma placa
     cinza em vez de um buraco. */
  background:var(--steel-300);
  border-radius:var(--galeria-raio);
  box-shadow:0 12px 30px -20px rgba(12,14,16,.85);
}
@keyframes galeria{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }

@media (min-width:768px){ .sec--faq{ --galeria-alt:212px; --galeria-pad:var(--s-4); --galeria-gap:12px; --galeria-raio:22px; } }
@media (min-width:1025px){ .sec--faq{ --galeria-alt:270px; --galeria-gap:16px; --galeria-raio:28px; } }

@media (prefers-reduced-motion: reduce){
  .galeria__pista{ animation:none; }
  .galeria{ overflow-x:auto; }
  .galeria__bloco:last-child{ display:none; }
}

/* ---------- Fechamento ---------- */
.closer{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:0;
  background:var(--ink); color:var(--steel-300);
  padding:calc(var(--s-8) + var(--galeria-alt) / 2 + var(--galeria-pad)) 0 var(--s-8);
  text-align:center;
}
.closer__mesh{
  position:absolute; inset:0; z-index:-1;
  background-image:
    radial-gradient(74% 62% at 50% 16%, rgba(183,24,16,.32), transparent 72%),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto, 58px 58px, 58px 58px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 12%, #000 30%);
  mask-image:linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 12%, #000 30%);
}
.closer__inner{ display:grid; gap:var(--s-3); justify-items:center; }
.closer__copy{ display:grid; gap:var(--s-3); justify-items:center; }
/* Do notebook para cima a copia vai para a esquerda e o mapa ocupa a direita.
   Abaixo disso as duas empilham e a copia volta ao centro, como estava. */
@media (min-width:1025px){
  .closer{ text-align:left; }
  .closer__inner{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--s-6); align-items:center;
  }
  .closer__copy{ justify-items:start; }
  .closer__lead,.closer__sub{ max-width:22ch; }
  .closer__sub{ max-width:34ch; }
}

.closer__mapa{ width:100%; display:grid; gap:var(--s-2); }
/* A moldura e quem define a proporcao e recorta o iframe: o proprio iframe
   nao aceita border-radius em todo navegador, entao o raio mora aqui, com
   overflow:hidden. */
.mapa__moldura{
  position:relative; width:100%; aspect-ratio:16/11;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
.mapa__moldura iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block;
  /* Se um bloqueador barrar o iframe, o navegador pinta a propria tela de
     erro; com color-scheme:dark ela sai escura e nao vira um retangulo
     branco no meio da sessao. */
  color-scheme:dark;
  /* O mapa do Google e claro e brigava com a sessao escura. A dessaturacao
     leve e o escurecimento encaixam ele no tom sem apagar as ruas. */
  filter:grayscale(.32) contrast(1.04) brightness(.88);
}
.mapa__pe{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:var(--fs-sm); color:var(--steel-400); line-height:1.5;
}
.mapa__pe .ico{ flex:none; width:1.15rem; height:1.15rem; margin-top:.12rem; color:var(--accent-on-dark); }
.mapa__rota{
  justify-self:start;
  /* Alinha com o texto do endereço, não com o pino: largura do ícone mais o
     gap da linha de cima. */
  margin-left:calc(1.15rem + .6rem);
  font-size:var(--fs-sm); color:var(--white);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.4);
  /* Alvo de toque de 44px: o padding cria a área clicável e a margem
     negativa devolve o espaço ao fluxo. */
  padding-block:.72rem; margin-block:-.5rem;
}
.mapa__rota:hover{ text-decoration-color:var(--white); }
@media (min-width:1025px){ .mapa__pe{ justify-content:flex-start; } }
/* Empilhado, o mapa herdava a largura inteira da sessão e no tablet virava um
   retângulo de 976x671. A medida e a proporção mudam para ele continuar sendo
   um cartão, e não um bloco que engole a dobra. */
@media (max-width:1024px){
  .closer__mapa{ max-width:560px; margin-inline:auto; }
  .mapa__moldura{ aspect-ratio:16/10; }
  .mapa__pe{ justify-content:center; text-align:left; }
  .mapa__rota{ justify-self:center; margin-left:0; }
}
.closer__lead{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--track-h1);
  color:var(--white); max-width:30ch;
}
.closer__sub{ font-size:var(--fs-lede); color:var(--steel-400); max-width:52ch; }
.closer .btn{ margin-top:var(--s-3); }

/* ============================ RODAPÉ ============================ */
.foot{ background:var(--ink); color:var(--steel-500); padding:var(--s-6) 0 var(--s-7); border-top:1px solid rgba(255,255,255,.08); }
.foot__inner{ display:grid; gap:var(--s-5); }
@media (min-width:768px){
  /* Marca à esquerda, contato à direita, alinhados pelo topo. */
  .foot__inner{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s-6); align-items:start; }
  /* O bloco vai para a direita, mas o texto dentro dele continua alinhado à
     esquerda: endereço e e-mail alinhados à direita ficam com a borda esquerda
     serrilhada e custam legibilidade, justamente na informação que alguém
     precisa copiar. */
  .foot__contato{ justify-self:end; }
}
.logo-foot{ margin-bottom:var(--s-2); }
/* Tudo no rodapé usa --fs-sm e --steel-400. Antes havia três tamanhos
   (--fs-sm na descrição, --fs-xs nos direitos e no link) e quatro cores
   (--steel-300 nos rótulos, --steel-400 no contato, --steel-500 nos direitos e
   na descrição), o que fazia a mesma informação parecer ter importâncias
   diferentes sem motivo. O único contraste que sobrou é o dos rótulos, que são
   títulos de bloco. */
.foot,.foot__desc,.foot__legal,.foot__links a,.foot__contato{
  font-size:var(--fs-sm); color:var(--steel-400);
}
.foot__desc{ line-height:1.65; }

.foot__bar{
  margin-top:var(--s-5);
  padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--s-2) var(--s-4);
}
.foot__legal{ margin:0; }
.foot__links{ display:flex; gap:var(--s-4); }
/* Sublinhado, porque é link e não havia nada dizendo isso: num rodapé escuro,
   cor sozinha não sinaliza que o texto é clicável. */
.foot__links a{
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:underline; text-underline-offset:3px;
  transition:color .2s var(--ease);
}
.foot__links a:hover{ color:var(--white); }

/* No mobile a barra empilha, e aí os direitos reservados ficam por último:
   o link útil sobe para onde o dedo alcança primeiro. */
@media (max-width:767px){
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:var(--s-1); }
  .foot__links{ order:-1; }
}

/* ============================ STICKY MOBILE ============================ */
.stickybar{
  position:fixed; z-index:80; isolation:isolate;
  left:0; right:0; bottom:0;
  padding:.65rem var(--s-3) calc(.65rem + env(safe-area-inset-bottom));
  transform:translateY(calc(100% + 72px)); opacity:0;
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
/* O vidro mora num pseudo-elemento, e nao na barra: assim a mascara que o
   dissolve para cima nao apaga junto o botao. Ele sobe 64px acima da barra
   para o desfoque ter onde nascer, e a mascara leva embora tanto o fundo
   quanto o proprio desfoque, sem deixar linha de corte. */
.stickybar::before{
  content:""; position:absolute; z-index:-1;
  left:0; right:0; bottom:0; top:-64px;
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
  background:linear-gradient(0deg,
    rgba(12,14,16,.80) 0%,
    rgba(12,14,16,.62) 40%,
    rgba(12,14,16,.28) 72%,
    rgba(12,14,16,0) 100%);
  -webkit-mask-image:linear-gradient(0deg, #000 0%, #000 38%, rgba(0,0,0,.48) 72%, transparent 100%);
  mask-image:linear-gradient(0deg, #000 0%, #000 38%, rgba(0,0,0,.48) 72%, transparent 100%);
  pointer-events:none;
}
.stickybar--on{ transform:translateY(0); opacity:1; }
@media (min-width:1025px){ .stickybar{ display:none; } }

/* ============================ MOTION ============================ */
[data-rise],[data-reveal]{ opacity:1; }
.js [data-rise],.js [data-reveal]{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .js [data-rise],.js [data-reveal]{ opacity:1 !important; transform:none !important; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   PÁGINA LEGAL (política de privacidade)
   Reaproveita os tokens da LP: mesma escala tipográfica, mesmo
   conjunto fechado de tamanhos, mesmos breakpoints.
   ============================================================ */
.legal__top{
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:var(--s-3) 0;
  --accent-ctx: var(--accent-on-dark);
}
.legal__topinner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }

.legal{ background:var(--paper); padding:var(--s-7) 0 var(--s-8); }
.legal__wrap{ max-width:800px; }

.legal__title{ font-size:var(--fs-h1); letter-spacing:var(--track-h1); color:var(--ink); }
.legal__meta{ margin-top:var(--s-2); font-size:var(--fs-sm); color:var(--steel-500); }
.legal__lead{
  margin-top:var(--s-4); font-size:var(--fs-lede);
  color:var(--steel-500); line-height:1.65;
}

.legal__h2{
  font-size:var(--fs-h3); color:var(--ink);
  margin-top:var(--s-6); padding-top:var(--s-4);
  border-top:1px solid var(--steel-200);
}
.legal__h3{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-body);
  letter-spacing:var(--track-display); color:var(--ink);
  margin-top:var(--s-4);
}
.legal p{ margin-top:var(--s-3); color:var(--steel-500); line-height:1.7; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal a:not(.btn){ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

.legal__list{ margin-top:var(--s-3); display:grid; gap:.6rem; }
.legal__list li{
  position:relative; padding-left:1.5rem;
  color:var(--steel-500); line-height:1.7;
}
.legal__list li::before{
  content:""; position:absolute; left:.35rem; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}

.legal__note{
  margin-top:var(--s-3); padding:var(--s-3) var(--s-4);
  background:var(--white); border:1px solid var(--steel-200);
  border-left:3px solid var(--steel-300);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
}

/* Canais de contato do controlador. Rótulo e valor em linhas próprias no
   mobile, lado a lado do tablet para cima. */
.legal__contact{ margin-top:var(--s-3); display:grid; gap:var(--s-2); }
.legal__contact li{
  display:grid; gap:.1rem;
  padding:var(--s-2) var(--s-3);
  background:var(--white); border:1px solid var(--steel-200);
  border-radius:var(--r-sm);
  color:var(--steel-500); line-height:1.6;
}
.legal__contact-rot{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-xs);
  letter-spacing:.04em; text-transform:uppercase; color:var(--steel-400);
}
@media (min-width:768px){
  .legal__contact li{ grid-template-columns:11rem 1fr; align-items:baseline; gap:var(--s-3); }
}

/* Tabela larga rola dentro da própria caixa, nunca empurra a página. */
.legal__tablewrap{ margin-top:var(--s-4); overflow-x:auto; }
.legal__table{
  width:100%; border-collapse:collapse;
  font-size:var(--fs-sm); min-width:520px;
  background:var(--white);
  border:1px solid var(--steel-200); border-radius:var(--r-md);
}
.legal__table th,.legal__table td{
  text-align:left; padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--steel-200);
  color:var(--steel-500); line-height:1.6;
  vertical-align:top;
}
.legal__table th{
  font-family:var(--font-display); font-weight:600;
  color:var(--ink); background:var(--paper);
}
.legal__table tr:last-child td{ border-bottom:0; }

.legal__back{ margin-top:var(--s-7); }

/* Contato no rodapé. <address> é o elemento correto para dados de contato do
   responsável pela página, e o reset de itálico é necessário: o padrão do
   navegador italiciza o elemento inteiro. */
.foot__contato{
  margin:0;
  font-style:normal;
  display:grid; gap:var(--s-4);
  line-height:1.65;
}
.foot__bloco{ display:grid; gap:.2rem; }
.foot__rotulo{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--font-display); font-weight:600;
  color:var(--white);
}
.foot__ico{ flex:none; width:1.05rem; height:1.05rem; color:var(--accent-ctx); }
/* O padding cresce a área de toque para 44px e a margem negativa devolve o
   espaço ao layout, então a linha continua onde estava. Sem isso o alvo de
   telefone e e-mail tinha 18px de altura, e são justamente os dois links que
   alguém tenta acertar com o dedo no rodapé. */
.foot__contato a{
  display:inline-block;
  padding-block:.72rem; margin-block:-.72rem;
  color:var(--steel-400);
  text-decoration:underline; text-underline-offset:2px;
  transition:color .2s var(--ease);
}
.foot__contato a:hover{ color:var(--white); }
@media (min-width:768px){
  .foot__contato{ grid-template-columns:repeat(2,auto); gap:var(--s-6); }
}

/* O logotipo do topo da página legal vive numa barra escura. */
.legal__top .logo-topo img{ height:56px; }

/* ---------- Faixa de fechamento da dobra 3 ---------- */
/* Prova à esquerda, ação à direita. Antes o CTA ficava sozinho encostado à
   esquerda, com a largura toda vazia ao lado. */
.faixa{
  display:grid; gap:var(--s-4);
  align-items:center;
}
@media (min-width:768px){
  .faixa{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s-6); }
  .faixa .btn{ justify-self:end; }
}

/* O mesmo bloco serve à dobra 3 (fundo escuro) e ao FAQ (fundo claro). O que
   muda por contexto são duas coisas: a cor da borda dos discos, que é sempre a
   do fundo atrás deles, e o tom do texto de apoio. Um token por contexto
   resolve as duas sem duplicar o bloco. */
.faixa__prova{
  --prova-fundo: var(--ink);
  --prova-texto: var(--steel-400);
  /* No celular os discos sobem e o texto desce. Lado a lado sobravam 20ch
     para a coluna de texto e a frase quebrava em cinco linhas. */
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-2);
}
@media (min-width:768px){
  .faixa__prova{ flex-direction:row; align-items:center; gap:var(--s-3); }
}
.sec--faq .faixa__prova{
  --prova-fundo: var(--paper);
  --prova-texto: var(--steel-500);
  margin-top:var(--s-4);
}

/* Os discos se sobrepõem: cada um recua sobre o anterior, e a borda da cor do
   fundo é o que os separa visualmente sem precisar de espaço entre eles. */
.faixa__avatares{ display:flex; flex:none; }
.faixa__avatares picture{
  display:block; width:44px; height:44px; flex:none;
  border-radius:50%; overflow:hidden;
  /* A borda é da cor do fundo da seção: é ela que abre o vinco entre um disco
     e o outro sem precisar de espaço entre eles. */
  border:2px solid var(--prova-fundo);
  background:var(--steel-700);
}
.faixa__avatares img{ width:100%; height:100%; object-fit:cover; }
.faixa__avatares picture + picture{ margin-left:-14px; }

.faixa__txt{
  font-size:var(--fs-sm); color:var(--prova-texto); line-height:1.5;
  max-width:46ch;
  /* Equilibra as duas linhas em vez de encher a primeira e deixar três
     palavras na segunda. */
  text-wrap:balance;
}
.faixa__txt strong{
  display:block;
  font-family:var(--font-display); font-weight:600;
  color:var(--white);
}
.sec--faq .faixa__txt strong{ color:var(--ink); }

/* ---------- Carrossel de palavras-chave ---------- */
.ticker{
  background:var(--accent);
  color:var(--white);
  overflow:hidden;
  padding:var(--s-3) 0;
  /* Sem máscara nas pontas: a faixa vermelha é uma barra sólida de ponta a
     ponta, e um fade lateral abriria buraco na cor. */
}
.ticker__pista{
  display:flex; width:max-content;
  animation:ticker 42s linear infinite;
  will-change:transform;
}
.ticker__bloco{ display:flex; align-items:center; }
.ticker__bloco span{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm);
  letter-spacing:.02em; white-space:nowrap;
  padding-inline:var(--s-4);
}
.ticker__bloco i{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.55);
}
/* -50% e não -100%: a pista tem dois blocos idênticos, então meia volta já
   recoloca o segundo exatamente onde o primeiro começou. */
@keyframes ticker{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

@media (prefers-reduced-motion: reduce){
  .ticker__pista{ animation:none; }
  /* Parada, a pista precisa poder ser lida com o dedo ou o trackpad. */
  .ticker{ overflow-x:auto; }
}

/* Seta de canto nos cards de produto. É enfeite: `aria-hidden`, sem link e
   sem hover próprio, porque o card inteiro também não é clicável. O disco usa
   `backdrop-filter`, então desfoca a própria foto do card e muda de tom
   conforme o que está atrás; o `background` semitransparente é o que segura o
   efeito onde `backdrop-filter` não é suportado. */
.prod__seta{
  position:absolute; top:var(--s-3); right:var(--s-3); z-index:1;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--accent-ctx);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 10px 24px -14px rgba(0,0,0,.9);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.prod__seta svg{ width:20px; height:20px; }
.prod:hover .prod__seta{ transform:translate(2px,-2px); background:rgba(255,255,255,.24); }