/* Bornelli SST: estilo único do site.
   Movimento: só transform e opacity. Sem clip-path e sem máscara em vídeo.
   Todo estado de partida de animação fica em "backwards" ou atrás de .anima:
   se a animação não rodar, o elemento já está no lugar final, visível. */

@font-face{font-family:Archivo;src:url(/marca/fontes/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Inter;src:url(/marca/fontes/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --grafite:#15171A;--amarelo:#FFC400;--osso:#F4F2EC;--cinza:#A7ADB4;
  --superficie:#1D2024;--linha:#30343A;
  --titulo:Archivo,"Arial Black",Arial,sans-serif;
  --texto:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.7,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --margem:20px;--topo:64px;--mv:16px;--zap:64px;
  /* Inclinação da diagonal amarela do logo. */
  --ang:-25.82deg;
  /* Quanto se rola com a cena presa na home. */
  --curso:110svh;
  /* Margem esquerda da trilha lateral: alinha com o conteúdo. */
  --esq:max(var(--margem),calc((100vw - 1320px) / 2 + var(--margem)));
}
@media (min-width:900px){
  :root{--margem:60px;--topo:84px;--mv:28px;--zap:68px;--curso:120svh}
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--grafite);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grafite);color:var(--osso);font:400 17px/1.55 var(--texto)}
img,video{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}

/* Títulos: Archivo 700, largura 100. Contraste real de escala, sem caixa alta. */
h1,h2,h3{margin:0;font-family:var(--titulo);font-weight:700;font-stretch:100%;line-height:1.06;letter-spacing:-.02em}
h2{font-size:clamp(36px,6vw,88px);line-height:1;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:break-word}
h3{font-size:clamp(24px,2.6vw,36px);line-height:1.1;letter-spacing:-.015em}

.caixa{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--margem)}
.secao{padding-block:72px;position:relative}

.pular{position:absolute;left:12px;top:-80px;z-index:90;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--amarelo);color:var(--grafite);font-weight:700}
.pular:focus{top:10px}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 24px;font:700 17px/1.2 var(--texto);text-align:center;text-decoration:none;border:2px solid var(--amarelo);cursor:pointer;transition:transform .2s var(--ease-out),background-color .2s linear,border-color .2s linear}
.btn svg{width:24px;height:24px;flex:none}
.btn-cheio{background:var(--amarelo);color:var(--grafite)}
@media (hover:hover){
  .btn-cheio:hover{background:var(--osso);border-color:var(--osso)}
}

/* Ícone fixo do WhatsApp: discreto, só o ícone, sem etiqueta e sem anel. */
.zap{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;display:grid;place-items:center;width:var(--zap);height:var(--zap);border:1px solid rgba(244,242,236,.25);border-radius:50%;background:var(--grafite);color:var(--amarelo);transition:transform .25s var(--ease-out)}
.zap svg{width:32px;height:32px}
/* Tela muito estreita: o ícone não pode tomar o texto. */
@media (max-width:340px){:root{--zap:58px}.zap svg{width:28px;height:28px}}
@media (hover:hover){.zap:not(.magnetico):hover{transform:scale(1.07)}}

/* Cabeçalho. O fundo fica num pseudo-elemento para a cena da entrada passar à vista. */
.topo{position:sticky;top:0;z-index:30;height:var(--topo);margin-bottom:calc(var(--topo) * -1);transition:transform .35s var(--ease-out)}
.topo::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grafite);animation:aparece .01s linear .9s backwards}
.home .topo::before{animation:none}
.topo-oculto,.topo-recolhido{transform:translateY(-100%)}
.topo:focus-within{transform:none}
.topo-in{height:100%;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:30px;width:auto}

/* ---------- Cena da home ---------- */
.cena{position:relative}
.palco{position:relative;overflow:hidden;background:var(--grafite)}
.palco-in{position:relative;z-index:2;display:flex;flex-direction:column;height:100vh;height:100svh;min-height:540px}
/* Vídeo da entrada: solto no fundo, com tampa escura por cima. Sem recorte. */
.palco .vid{position:absolute;left:0;top:0;width:100%;height:72vh;height:72svh;object-fit:cover;object-position:var(--foco,50%) 50%;z-index:0}
.palco.tem-video::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(21,23,26,.62) 0,rgba(21,23,26,.1) 13svh,rgba(21,23,26,.1) 58svh,var(--grafite) 72svh)}
/* A película forte fica só atrás do texto e some junto com ele na rolagem. */
.palco.tem-video .cena-texto::before{content:"";position:absolute;z-index:-1;left:calc(var(--margem) * -1);right:calc(var(--margem) * -1);top:-40px;bottom:-26px;background:linear-gradient(to bottom,rgba(21,23,26,0) 0,rgba(21,23,26,.97) 40px)}
.topo.sobre-palco::before{opacity:0}
.palco-grade{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:calc(var(--topo) + 4px);padding-bottom:26px}
.cena-texto{position:relative;z-index:1}
.cena-b{order:-1;flex:1 1 0;min-height:0;position:relative;z-index:2;margin-bottom:16px;pointer-events:none}
.b-cresce{position:absolute;left:0;bottom:0;height:min(100%,44vw);aspect-ratio:1;transform-origin:0 0}
.b-cresce img{width:100%;height:100%}
/* Com vídeo, o selo fica pequeno no canto para não cobrir o miolo da cena. */
.palco.tem-video .b-cresce{left:auto;right:0;width:96px;height:96px;aspect-ratio:auto}
/* Título da home: cada bloco cabe em uma linha. */
#titulo{font-size:min(7.2vw,52px);line-height:1.08;letter-spacing:-.025em}
#titulo .bloco>span{white-space:nowrap}
.bloco{display:block;overflow:hidden;padding-block:.1em .16em;margin-block:-.1em -.16em}
.bloco>span{display:block}
.pag-topo h1 .bloco>span{animation:sobe .95s var(--ease-out) .28s backwards}
/* Última linha do título: uma faixa amarela passa e deixa o texto amarelo. */
.bloco-3{position:relative;width:fit-content}
h1 .bloco-3>span{color:var(--amarelo)}
.bloco-3::after{content:"";position:absolute;inset:.1em 0 .14em;background:var(--amarelo);transform:scaleX(0);transform-origin:left}
@keyframes texto-varrido{0%,45%{opacity:0}46%,100%{opacity:1}}
@keyframes varre-linha{
  0%{transform:translateX(0) scaleX(0);animation-timing-function:cubic-bezier(.7,0,.2,1)}
  45%{transform:translateX(0) scaleX(1)}
  52%{transform:translateX(0) scaleX(1);animation-timing-function:cubic-bezier(.7,0,.2,1)}
  100%{transform:translateX(100%) scaleX(0)}
}
.sub{margin-top:12px;max-width:46ch}
/* O recuo à direita deixa o texto da entrada fora do ícone fixo. */
.cena-texto .sub{padding-right:calc(var(--zap) + 4px)}
@keyframes sobe{from{transform:translateY(112%)}}
@keyframes entra{from{opacity:0;transform:translateY(16px)}}
@keyframes aparece{from{opacity:0}}

/* Abertura da home: só existe com .abrindo, posta por abre.js antes de pintar.
   O selo se forma no centro; ao pousar, a tampa some e vídeo, título e cabeçalho entram juntos.
   Sem JS, com movimento reduzido ou se algo falhar, a página fica no estado final. */
.abertura{display:none}
.abrindo .abertura{display:block;position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none}
.abertura-fundo{position:absolute;inset:0;background:var(--grafite)}
.abertura-selo{--lado:min(62vw,46svh);position:absolute;left:50%;top:50%;width:var(--lado);height:var(--lado);margin:calc(var(--lado) / -2) 0 0 calc(var(--lado) / -2);transform-origin:0 0}
.abertura-selo svg{display:block;width:100%;height:100%;overflow:visible}
.ab-caco,.ab-faisca{position:absolute;left:0;top:0;display:block}
.ab-faisca{height:3px;background:var(--amarelo);transform-origin:0 50%}
.abrindo .b-cresce{visibility:hidden}
.abrindo #titulo .bloco>span{transform:translateY(112%)}
.abrindo .cena-texto .sub{opacity:0}
.pousando #titulo .bloco>span{transform:none;animation:sobe .9s var(--ease-out) backwards}
.pousando #titulo .bloco-2>span{animation-delay:.1s}
.pousando #titulo .bloco-3>span{animation:texto-varrido .76s linear .16s backwards}
.pousando #titulo .bloco-3::after{animation:varre-linha .76s linear .16s backwards}
.pousando .cena-texto .sub{opacity:1;animation:entra .64s var(--ease-out) .26s backwards}

/* Rolagem presa: só liga quando site.js coloca .pin no html. */
.pin .cena{height:calc(100vh + var(--curso));height:calc(100lvh + var(--curso))}
.pin .palco{position:sticky;top:0;height:100vh;height:100lvh}
.pin .palco.fora{visibility:hidden}
.pin .cena-texto{will-change:transform,opacity}
.pin .cena-texto.saiu{visibility:hidden}
.pin .b-cresce,.pin .b-cresce img{will-change:transform,opacity}
/* Os selos sobem por cima do palco enquanto o selo grande dissolve: a tela nunca fica vazia. */
.pin .depois{margin-top:calc(var(--curso) * -.68)}

.depois{position:relative;z-index:2;background:var(--grafite);overflow-x:clip}

/* ---------- Selos: faixa simples, selo grande e o fato ao lado ---------- */
.faixa-selos{padding-block:32px;border-block:1px solid var(--linha)}
.selos{display:grid;gap:18px}
.selo{display:flex;align-items:center;gap:16px;font:600 21px/1.18 var(--titulo);letter-spacing:-.01em}
.selo img,.selo-svg{flex:none;width:72px;height:72px}
.selo a{display:inline-flex;align-items:center;min-height:44px;color:var(--osso)}

/* ---------- Serviços da home: lista comum, sem JS ou com movimento reduzido ---------- */
.linhas{margin-top:28px;border-top:1px solid var(--linha)}
.linhas li{position:relative}
.linhas li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linha);transform-origin:left}
.servico{position:relative;display:grid;grid-template-columns:1fr 44px;align-items:center;column-gap:12px;min-height:92px;padding:18px 0;text-decoration:none}
.servico-txt{min-width:0}
.servico p{margin-top:6px;color:var(--cinza)}
.seta{width:44px;height:44px;display:grid;place-items:center;color:var(--amarelo);font-size:26px;transition:transform .3s var(--ease-out)}
@media (hover:hover){
  .servico:hover .seta{transform:translateX(4px)}
  .servico:hover h3{color:var(--amarelo)}
}
/* Vídeo do cartão: sem arquivo, o elemento fica oculto e a linha é só texto. */
.servico .vid{grid-column:1/-1;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--superficie);margin-bottom:14px}
.servico.tem-video{padding-top:20px}

.lateral-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.contador{flex:none;font:700 24px/1.2 var(--titulo);color:var(--amarelo)}
.contador-cx{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
.contador-n{display:inline-block}
.contador-velho{position:absolute;left:0;top:0}
.barra{height:3px;background:var(--linha)}
.barra i{display:block;height:100%;background:var(--amarelo);transform:scaleX(.125);transform-origin:left}

/* Celular e toque: seção presa; a rolagem escolhe o quadro e a transição do CSS anima.
   Só liga com .trilha-on, posto por site.js. Nada se move a cada evento de rolagem: é o que evita o tremor no iPhone. */
.trilha-on .cena-lateral{--quadro:min(82vw,520px);height:calc(100vh + var(--curso-lateral));height:calc(100lvh + var(--curso-lateral));padding:0}
.trilha-on .lateral-palco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip;background:var(--grafite)}
.trilha-on .lateral-in{display:flex;flex-direction:column;height:100%;padding-top:calc(var(--topo) + 4px);padding-bottom:16px}
.trilha-on .lateral-cab{flex:none}
.trilha-on .lateral-janela{flex:1;min-height:0;max-width:none;margin-top:14px;padding:0}
.trilha-on .lateral-pe{flex:none;margin-top:14px;padding-right:calc(var(--zap) + 28px)}
.trilha-on .barra i{transition:transform .62s var(--ease-out)}
.trilha-on .linhas{display:flex;gap:12px;width:max-content;height:100%;margin:0;padding-inline:var(--margem);border:0;transition:transform .62s var(--ease-out);will-change:transform}
.trilha-on .linhas li{flex:none;width:var(--quadro);height:100%}
.trilha-on .linhas li::after{display:none}
.anima.trilha-on .linhas li.rv{opacity:1;transform:none;transition:none}
.trilha-on .servico{display:block;height:100%;min-height:0;padding:0;overflow:hidden}
.trilha-on .servico .vid{position:absolute;left:0;top:0;width:100%;height:100%;aspect-ratio:auto;margin:0;object-position:var(--foco,50%) 50%}
.trilha-on .servico-txt{position:absolute;left:0;right:0;bottom:0;padding:72px 16px 18px;background:linear-gradient(to bottom,rgba(21,23,26,0) 0,var(--grafite) 72px)}
.trilha-on .servico h3{font-size:28px}
.trilha-on .servico p{color:var(--osso)}
.trilha-on .linhas .seta{display:none}
.trilha-on .servico:not(.tem-video){background:var(--superficie) url(/marca/simbolo-fundo-escuro.svg) no-repeat 16px 16px/88px}

/* Computador: trilha presa, movida pela rolagem. Só liga com .lateral-on, posto por site.js. */
.lateral-on .cena-lateral{height:calc(100vh + var(--curso-lateral));height:calc(100lvh + var(--curso-lateral));padding:0}
.lateral-on .lateral-palco{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;overflow:clip;background:var(--grafite)}
.lateral-on .lateral-in{display:flex;flex-direction:column;height:100vh;height:100svh;padding-top:calc(var(--topo) + 8px);padding-bottom:16px}
.lateral-on .lateral-cab{flex:none}
.lateral-on .lateral-janela{flex:1;min-height:0;max-width:none;margin-top:14px;padding:0}
.lateral-on .lateral-pe{flex:none;margin-top:14px}
.lateral-on .linhas{display:flex;gap:24px;width:max-content;height:100%;margin:0;padding-inline:var(--esq);border:0;will-change:transform;align-items:flex-start}
.lateral-on .linhas li{flex:none;width:min(72vw,calc((100svh - 400px) * 1.778));contain:layout style}
.lateral-on .linhas li::before,.lateral-on .linhas li::after{display:none}
.anima.lateral-on .linhas li.rv{opacity:1;transform:none;transition:none}
.lateral-on .servico{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:end;column-gap:4px;min-height:0;padding:0 0 4px;overflow:hidden}
.lateral-on .servico.tem-video{padding-top:0}
.lateral-on .servico .vid{grid-column:1/-1;width:100%;height:auto;aspect-ratio:16/9;margin:0 0 16px;object-position:50% 50%}
.lateral-on .servico-txt{position:relative;z-index:1}
.lateral-on .seta{position:relative;z-index:1}
/* Sem vídeo: o quadro fica só com a marca. */
.lateral-on .servico:not(.tem-video){min-height:calc(100svh - 400px);padding:24px;background:var(--superficie) url(/marca/simbolo-fundo-escuro.svg) no-repeat 24px 24px/140px}

/* ---------- A segurança no dia a dia: grade compacta de fios, com seta que anda ---------- */
.secao-dia{padding-block:36px 28px}
.dia{margin-top:20px;counter-reset:dia}
.dia li{position:relative;counter-increment:dia}
.dia li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linha);transform-origin:left}
.dia li:last-child{border-bottom:1px solid var(--linha)}
.dia-item{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) 44px;column-gap:6px;align-items:start;padding-block:12px;text-decoration:none}
/* Número discreto, só de ritmo: vem do CSS e não é texto da página. */
.dia-item::before{content:counter(dia,decimal-leading-zero);grid-column:1;grid-row:1;font:600 13px/28px var(--titulo);color:var(--cinza);transition:color .2s linear}
/* O gesto desta seção: um fio amarelo corre em cima da linha e a seta anda. */
.dia-item::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--amarelo);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.dia-item h3{grid-column:2;grid-row:1;font-size:23px}
.dia-item p{grid-column:2;grid-row:2;margin-top:4px;font-size:16px;line-height:1.4;color:var(--cinza)}
.dia-item .seta{grid-column:3;grid-row:1/3;align-self:center}
.dia-item:focus-visible::after,.dia-item:active::after{transform:scaleX(1)}
.dia-item:focus-visible .seta,.dia-item:active .seta{transform:translateX(8px)}
.dia-item:active::before{color:var(--amarelo)}
@media (hover:hover){
  .dia-item:hover::after{transform:scaleX(1)}
  .dia-item:hover .seta{transform:translateX(8px)}
  .dia-item:hover::before{color:var(--amarelo)}
}

/* ---------- Para quem: linhas de largura total ---------- */
.secao-decide{padding-top:16px}
.decide{margin-top:32px}
.decide li{position:relative}
.decide li::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:1px;background:var(--linha);transform-origin:left}
.decide li:last-child{border-bottom:1px solid var(--linha)}
.decide-linha{position:relative;display:block;padding-block:22px;text-decoration:none}
/* Andar: o amarelo sobe de baixo para cima. No celular, na linha do centro da tela; no computador, com o mouse. */
.decide-linha::before{content:"";position:absolute;inset:0;background:var(--amarelo);transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--ease)}
.decide-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;column-gap:8px;row-gap:8px}
.decide-in h3{font-size:clamp(32px,5.5vw,80px);line-height:1;letter-spacing:-.03em;transition:color .2s linear}
.decide-in p{grid-column:1/-1;transition:color .2s linear}
.decide-in .seta{grid-column:2;grid-row:1}
@media (hover:hover){
  .decide-linha:hover::before{transform:scaleY(1)}
  .decide-linha:hover h3,.decide-linha:hover p,.decide-linha:hover .seta{color:var(--grafite)}
  .decide-linha:hover .seta{transform:translateX(6px)}
}
.decide-linha:focus-visible::before,.decide-linha.acesa::before{transform:scaleY(1)}
.decide-linha:focus-visible h3,.decide-linha:focus-visible p,.decide-linha:focus-visible .seta,
.decide-linha.acesa h3,.decide-linha.acesa p,.decide-linha.acesa .seta{color:var(--grafite)}
/* Quadro com o vídeo do serviço que segue o cursor: só transform. */
.andar-quadro{position:fixed;left:0;top:0;z-index:5;width:min(24vw,360px);aspect-ratio:16/9;overflow:hidden;background:var(--superficie);pointer-events:none;visibility:hidden}
.andar-quadro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s linear}
.andar-quadro video.on{opacity:1}

/* ---------- Três passos: numerais enormes ---------- */
.passos{display:grid;gap:22px;margin-top:24px;counter-reset:passo}
.passos li{--n:0%;position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);column-gap:6px;align-content:start;counter-increment:passo}
.passos li::before,.passos li::after{content:counter(passo);grid-area:1/1/3/2;font:700 clamp(64px,11vw,160px)/.86 var(--titulo);letter-spacing:-.04em;color:var(--amarelo);transform-origin:0 100%}
.passos li::after{display:none}
.passos h3,.passos p{grid-column:2}
.passos p{margin-top:6px}

/* Acesas pela rolagem. Só liga com .etapas-on. */
.etapas-on .cena-passos{height:calc(100vh + var(--curso-etapas));height:calc(100lvh + var(--curso-etapas));padding:0}
.etapas-on .passos-palco{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;overflow:clip}
.etapas-on .passos-in{display:flex;flex-direction:column;justify-content:center;height:100vh;height:100svh;padding-top:var(--topo)}
.etapas-on.anima .passos li.rv{opacity:.3;transform:none;transition:opacity .45s var(--ease-out)}
.etapas-on.anima .passos li.rv.on{opacity:1}
.etapas-on .passos li::before{color:var(--cinza)}
/* O numeral enche de amarelo por nível; --n vem de site.js. */
.etapas-on .passos li::after{display:block;padding-block:.1em;margin-block:-.1em;color:transparent;background-image:linear-gradient(to top,var(--amarelo) 50%,rgba(255,196,0,0) 50%);background-size:100% 200%;background-position:0 var(--n);-webkit-background-clip:text;background-clip:text}
.etapas-on .passos li.atual::after{animation:numeral-salta .55s var(--ease-out)}
.passos h3{overflow:hidden;padding-block:.1em .16em;margin-block:-.1em -.16em}
.sobe{display:block}
.etapas-on .passos li.atual h3 .sobe{animation:sobe .7s var(--ease-out)}
/* Celular: só a etapa atual mostra o parágrafo; as outras ficam com número e nome. */
@media (max-width:899px){
  .etapas-on .passos-in{justify-content:flex-start;padding-top:calc(var(--topo) + 12px)}
  .etapas-on .passos li{grid-template-columns:82px minmax(0,1fr);align-items:center}
  .etapas-on .passos li::before,.etapas-on .passos li::after{font-size:100px;align-self:start}
  /* Só a etapa atual mostra o parágrafo. Sem display:none: mudar o layout na troca dava um quadro lento. */
  .etapas-on .passos li p{transition:opacity .35s var(--ease-out)}
  .etapas-on .passos li:not(.atual) p{opacity:0}
  .etapas-on .passos h3{font-size:28px}
}
@keyframes numeral-salta{0%{transform:scale(.9)}45%{transform:scale(1.14)}100%{transform:scale(1)}}

/* ---------- Letreiro: nomes de serviço em contorno, decorativo ---------- */
.letreiro{overflow:hidden;padding-block:20px;border-block:1px solid var(--linha);font:800 clamp(80px,21vw,220px)/1 var(--titulo);letter-spacing:-.02em;white-space:nowrap;user-select:none;pointer-events:none}
.letreiro-trilho{display:flex;width:max-content}
.letreiro-grupo{display:flex;align-items:center;flex:none}
.letreiro span{color:var(--grafite);-webkit-text-stroke:3px rgba(244,242,236,.55);paint-order:stroke fill}
.letreiro i{flex:none;display:block;width:.34em;height:.07em;margin-inline:.2em;background:var(--amarelo);transform:rotate(var(--ang))}
.anima .letreiro-trilho{animation:letreiro 42s linear infinite}
.letreiro-rolagem .letreiro-trilho{animation:none!important}
.letreiro.fora .letreiro-trilho{animation-play-state:paused}
@keyframes letreiro{to{transform:translate3d(-50%,0,0)}}
/* No celular, menor: a faixa inteira é desenhada de uma vez ao entrar na tela. */
@media (max-width:899px){.letreiro{font-size:16vw}.letreiro span{-webkit-text-stroke-width:2px}}

/* ---------- Quem é: o único bloco amarelo da página ---------- */
/* Sem JS e com movimento reduzido: faixa amarela parada, texto inteiro. */
.frase-faixa{position:relative;background:var(--amarelo);color:var(--grafite)}
.frase-texto{position:relative;padding-block:56px;font:600 clamp(34px,6vw,92px)/1.02 var(--titulo);letter-spacing:-.03em}
.frase-peso{display:block;margin-top:.14em;font-weight:900}
.frase-sobe{display:none}
/* Cena presa: só liga com .frase-on, posto por site.js. A rolagem acende palavra por palavra e o amarelo sobe. */
.frase-on .frase-faixa{--curso-frase:170svh;height:calc(100vh + var(--curso-frase));height:calc(100lvh + var(--curso-frase));background:none;color:var(--osso)}
.frase-on .frase-palco{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;overflow:clip;display:grid;grid-template-rows:100vh;grid-template-rows:100svh}
.frase-on .frase-sobe{display:block;position:absolute;inset:0;background:var(--amarelo);transform:scaleY(0);transform-origin:50% 100%}
.frase-on .frase-texto{align-self:center;padding-block:0;font-size:min(10.6vw,8.4svh);line-height:1.02;font-weight:700}
.frase-on .frase-texto .pal{overflow:visible;padding:0;margin:0}
.frase-on .frase-texto .parte{opacity:.2;transition:opacity .22s linear,color .16s linear}
.frase-on .frase-texto .parte.on{opacity:1}
.frase-on .frase-peso .parte.on{color:var(--amarelo)}
.frase-on .frase-texto .parte.inv{color:var(--grafite)}
.quem-grade{display:grid;gap:40px;padding-bottom:72px}
/* Foto do Sr. Antonio: só existe com o arquivo. Sem foto, a seção é só texto. */
.retrato{position:relative;overflow:hidden;width:100%;aspect-ratio:4/5}
.retrato-foto{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.quem-texto{padding-inline:var(--margem)}
.quem-texto:first-child{padding-top:64px}
.quem-texto>p{margin-top:20px;max-width:34ch;font-size:20px;line-height:1.4}

/* ---------- Perguntas ---------- */
.grade-faq{display:grid;gap:32px}
.perguntas{border-top:1px solid var(--linha)}
.perguntas details{border-bottom:1px solid var(--linha)}
.perguntas summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 0;font:600 21px/1.2 var(--titulo);letter-spacing:-.01em;cursor:pointer;list-style:none}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";flex:none;width:24px;text-align:center;color:var(--amarelo);font-size:28px;line-height:1}
.perguntas details[open] summary::after{content:"\2212"}
/* Com JS: o mais gira e a resposta abre com a altura animada. */
.anima .perguntas summary::after,.anima .perguntas details[open] summary::after{content:"+";transition:transform .45s var(--ease-out)}
.anima .perguntas details.aberto summary::after{transform:rotate(135deg)}
.resposta{overflow:hidden}
.perguntas details p{padding-bottom:20px;max-width:64ch}

/* ---------- Chamada final ---------- */
.final{position:relative;overflow:hidden;padding-block:88px 96px;border-top:1px solid var(--linha)}
.final>.caixa{position:relative;z-index:1}
/* Selo enorme atrás da chamada: bem apagado, para não atrapalhar a leitura. */
.final-selo{position:absolute;right:0;bottom:-6%;width:min(100%,92svh);height:auto;opacity:.1;pointer-events:none}
.final h2{font-size:clamp(46px,9.4vw,150px);line-height:.98;letter-spacing:-.035em;max-width:13ch}
.final p{margin-top:24px;font-size:20px;line-height:1.4}
.final .btn{margin-top:32px}

/* ---------- Rodapé ---------- */
.rodape{position:relative;z-index:2;background:var(--grafite);border-top:1px solid var(--linha);padding-block:48px calc(var(--zap) + 40px);font-size:16px;color:var(--cinza)}
.rodape-in{display:grid;gap:32px}
.rodape img{height:60px;width:auto;margin-bottom:20px}
.rodape-fone{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:var(--osso);font-weight:600}
.rodape-email{display:flex;align-items:center;width:fit-content;min-height:44px;margin-top:6px;color:var(--osso);font-weight:600}
.rodape-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.rodape-nav a{display:flex;align-items:center;min-height:44px;padding-block:4px;font-size:15px;line-height:1.2;color:var(--osso);text-decoration:none;text-wrap:balance}
@media (hover:hover){.rodape-nav a:hover{color:var(--amarelo)}}
.rodape-ltv{margin-top:32px;text-align:center;font-size:12px;opacity:.7}
.rodape-ltv a{display:inline-flex;align-items:center;min-height:44px;color:inherit}

/* ---------- Topo das páginas de serviço ---------- */
.pag-topo{position:relative}
/* A folga embaixo mantém o texto acima do ícone fixo. */
.pag-topo-in{position:relative;z-index:2;padding-top:calc(var(--topo) + 4px);padding-bottom:calc(var(--zap) + 32px)}
.migalha{font-size:16px;color:var(--cinza)}
.migalha ol{display:flex;flex-wrap:wrap;align-items:center}
.migalha li{display:flex;align-items:center;min-height:44px}
.migalha li+li::before{content:"/";margin-inline:8px;color:var(--cinza)}
.migalha a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.pag-topo h1{font-size:clamp(34px,9.2vw,68px);line-height:1.04;max-width:18ch;margin-top:4px;text-wrap:balance}
.pag-topo .sub{margin-top:16px;animation:entra .7s var(--ease-out) .5s backwards}
.pag-b{display:none}
/* Risco amarelo que atravessa uma vez ao abrir a página. */
.varre-caixa{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.varre{position:absolute;left:50%;top:42%;width:170vmax;height:4px;margin-left:-85vmax;background:var(--amarelo);visibility:hidden;animation:varre .95s cubic-bezier(.7,0,.2,1) .04s backwards}
@keyframes varre{from{visibility:visible;transform:rotate(var(--ang)) translateX(-100%)}to{visibility:visible;transform:rotate(var(--ang)) translateX(100%)}}
/* Vídeo do topo: solto no fundo, com uma tampa escura por cima. Sem recorte. */
.pag-topo .vid{position:absolute;left:0;top:0;width:100%;height:58vh;height:58svh;object-fit:cover;object-position:var(--foco,50%) 50%;z-index:0}
.pag-topo.tem-video::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(21,23,26,.62) 0,rgba(21,23,26,.1) 13svh,rgba(21,23,26,.1) 42svh,var(--grafite) 58svh)}
.pag-topo.tem-video .pag-topo-in{display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100svh}
.pag-topo.tem-video .pag-topo-in>div:first-child{position:relative}
.pag-topo.tem-video .pag-topo-in>div:first-child::before{content:"";position:absolute;z-index:-1;left:calc(var(--margem) * -1);right:calc(var(--margem) * -1);top:-48px;bottom:calc((var(--zap) + 32px) * -1);background:linear-gradient(to bottom,rgba(21,23,26,0) 0,rgba(21,23,26,.97) 48px)}

/* ---------- Seções das páginas de serviço ---------- */
.bloco-sec{padding-block:64px;border-top:1px solid var(--linha)}
.grade{display:grid;gap:28px}
.corpo{display:grid;gap:18px;max-width:68ch}
/* Listas: tipografia grande e fios, sem marcador. */
.marcas{border-top:1px solid var(--linha)}
.marcas li{padding:16px 0;border-bottom:1px solid var(--linha);font:500 22px/1.24 var(--titulo);letter-spacing:-.01em}
.nr{white-space:nowrap}
/* Lista com nome em destaque e explicação em texto corrido. */
.marcas.com-titulo li{font:400 17px/1.5 var(--texto);letter-spacing:0}
.marcas.com-titulo strong{display:block;margin-bottom:4px;font:600 22px/1.24 var(--titulo);letter-spacing:-.01em}
.numeros{counter-reset:n;border-top:1px solid var(--linha)}
.numeros li{display:grid;grid-template-columns:44px minmax(0,1fr);padding:16px 0;border-bottom:1px solid var(--linha);font:500 22px/1.24 var(--titulo);letter-spacing:-.01em;counter-increment:n}
.numeros li::before{content:counter(n);color:var(--amarelo);font-weight:700}
.inl{display:inline-block;padding:10px 6px;margin:-10px -6px;color:var(--amarelo);font-weight:600;text-underline-offset:3px}
/* Aviso: texto com fio em cima. */
.aviso-caixa{padding-top:20px;border-top:2px solid var(--amarelo);font:600 clamp(23px,2.7vw,38px)/1.2 var(--titulo);letter-spacing:-.015em}
.dupla{display:grid;gap:56px}
.dupla h2{margin-bottom:24px}
.bloco-faq{padding-block:64px;border-top:1px solid var(--linha)}

/* Página 404 */
.pag-404{padding-top:calc(var(--topo) + 48px);padding-bottom:72px}
.pag-404 h1{font-size:clamp(36px,7vw,88px)}
.pag-404 .sub{margin-top:20px}
.pag-404-acoes{margin-top:28px}

/* ---------- Entradas na rolagem. Só valem com .anima, ligado por site.js. ---------- */
.anima .rv{opacity:0;transition:opacity .7s var(--ease-out),transform .85s var(--ease-out)}
.anima .rv.in{opacity:1;transform:none}
.anima .mv-sobe{transform:translateY(24px)}
.anima .mv-esq{transform:translateX(calc(var(--mv) * -1))}
.anima .mv-dir{transform:translateX(var(--mv))}
.anima .mv-escala{transform:scale(.96)}
/* Títulos que não foram divididos: sobem inteiros por trás da máscara. */
.anima .mascara.rv{opacity:1;transform:none}
.anima .mascara .bloco>span{transform:translateY(112%);transition:transform 1s var(--ease-out)}
.anima .mascara.in .bloco>span{transform:none}
/* Títulos divididos por site.js: letras ou palavras sobem por trás da máscara da palavra.
   Sem will-change aqui, de propósito: são centenas de partes. */
.anima .dividido.rv{opacity:1;transform:none}
.pal{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:top;padding:.12em .05em .2em;margin:-.12em -.05em -.2em}
.parte{display:inline-block}
/* Título esperando a vez, sem transform: quem sobe é o GSAP. */
.dividido .parte{color:var(--c2)}
.dividido:not(.in) .parte{visibility:hidden}
/* Nível dentro da letra: o título começa apagado e enche de baixo para cima com a rolagem. */
.lvl{--c1:var(--osso);--c2:rgba(244,242,236,.2);--n:0%}
.lvl-txt{display:block;padding-block:.16em .14em;margin-block:-.16em -.14em;color:transparent;background-image:linear-gradient(to top,var(--c1) 50%,var(--c2) 50%);background-size:100% 200%;background-position:0 var(--n);-webkit-background-clip:text;background-clip:text}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
.anima .desliza.rv{transition:none}
.anima li.rv:nth-child(2){transition-delay:.05s}
.anima li.rv:nth-child(3){transition-delay:.1s}
.anima li.rv:nth-child(4){transition-delay:.15s}
.anima li.rv:nth-child(5){transition-delay:.2s}
.anima li.rv:nth-child(n+6){transition-delay:.24s}
/* Selos: um depois do outro. O aro se desenha, o ícone aparece e a diagonal cruza por último. */
.anima .selos .selo.rv{--vez:0s;transition-delay:var(--vez)}
.anima .selos .selo.rv:nth-child(2){--vez:.22s}
.anima .selos .selo.rv:nth-child(3){--vez:.44s}
.anima .selos .selo.rv:nth-child(4){--vez:.66s}
.anima .selos .selo.rv:nth-child(n+5){--vez:.88s}
.anima .selo-aro,.anima .selo-diag{stroke-dasharray:1;stroke-dashoffset:1}
.anima .selo-aro{transition:stroke-dashoffset 1s var(--ease) var(--vez)}
.anima .selo-diag{transition:stroke-dashoffset .4s var(--ease-out) calc(var(--vez) + .85s)}
.anima .selo-ico{opacity:0;transition:opacity .5s linear calc(var(--vez) + .45s)}
.anima .selo.in .selo-aro,.anima .selo.in .selo-diag{stroke-dashoffset:0}
.anima .selo.in .selo-ico{opacity:1}
/* Listas das páginas de serviço: uma depois da outra, com o fio se desenhando. */
.anima .marcas li,.anima .numeros li{position:relative;border-bottom:0}
.anima .marcas li::after,.anima .numeros li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linha);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) var(--fio,0s)}
.anima .marcas li.in::after,.anima .numeros li.in::after{transform:none}
.anima .marcas li.rv:nth-child(2),.anima .numeros li.rv:nth-child(2){--fio:.14s;transition-delay:.14s}
.anima .marcas li.rv:nth-child(3),.anima .numeros li.rv:nth-child(3){--fio:.28s;transition-delay:.28s}
.anima .marcas li.rv:nth-child(4),.anima .numeros li.rv:nth-child(4){--fio:.42s;transition-delay:.42s}
.anima .marcas li.rv:nth-child(n+5),.anima .numeros li.rv:nth-child(n+5){--fio:.56s;transition-delay:.56s}
/* Serviços em lista: a linha de cada cartão se desenha da esquerda para a direita. */
.anima .linhas li.rv::after{transform:scaleX(0);transition:transform .9s var(--ease-out) .05s}
.anima .linhas li.rv.in::after{transform:none}
/* Para quem: o fio se desenha, o nome sobe por máscara, a frase e a seta aparecem. Um depois do outro. */
.anima .decide li.rv{opacity:1;transform:none;--vez:0s}
.anima .decide li.rv:nth-child(2){--vez:.14s}
.anima .decide li.rv:nth-child(3){--vez:.28s}
.anima .decide li.rv:nth-child(4){--vez:.42s}
.anima .decide li.rv:nth-child(n+5){--vez:.56s}
.anima .decide li.rv::before{transform:scaleX(0);transition:transform 1s var(--ease-out) var(--vez)}
.anima .decide li.rv.in::before{transform:none}
.anima .decide .bloco>span{transform:translateY(112%);transition:transform .8s var(--ease-out) var(--vez)}
.anima .decide li.in .bloco>span{transform:none}
.anima .decide p,.anima .decide .seta{opacity:0;transition:opacity .6s linear calc(var(--vez) + .25s),color .2s linear,transform .3s var(--ease-out)}
.anima .decide li.in p,.anima .decide li.in .seta{opacity:1}

/* A segurança no dia a dia: o fio se desenha, o nome sobe por máscara, a frase e a seta chegam. */
.anima .dia li.rv{opacity:1;transform:none;--vez:0s}
.anima .dia li.rv:nth-child(2){--vez:.12s}
.anima .dia li.rv:nth-child(3){--vez:.24s}
.anima .dia li.rv:nth-child(4){--vez:.36s}
.anima .dia li.rv::before{transform:scaleX(0);transition:transform .9s var(--ease-out) var(--vez)}
.anima .dia li.rv.in::before{transform:none}
.anima .dia .bloco>span{transform:translateY(112%);transition:transform .75s var(--ease-out) var(--vez)}
.anima .dia li.in .bloco>span{transform:none}
.anima .dia p{opacity:0;transition:opacity .55s linear calc(var(--vez) + .22s)}
.anima .dia li.in p{opacity:1}
.anima .dia .seta{opacity:0;transform:translateX(-16px);transition:opacity .4s linear calc(var(--vez) + .3s),transform .3s var(--ease-out)}
.anima .dia li.in .seta{opacity:1;transform:none}
.anima .dia li.in .dia-item:active .seta,.anima .dia li.in .dia-item:focus-visible .seta{transform:translateX(8px)}
@media (hover:hover){.anima .dia li.in .dia-item:hover .seta{transform:translateX(8px)}}

/* ---------- O que a Bornelli faz: o quadro atual ganha nome, frase e risco ---------- */
.trilha-on .servico h3,.lateral-on .servico h3{overflow:hidden;padding-block:.1em .16em;margin-block:-.1em -.16em}
.trilha-on .linhas .sobe,.lateral-on .linhas .sobe{transform:translateY(112%);transition:transform .75s var(--ease-out) .08s}
.trilha-on .servico p,.lateral-on .servico p{opacity:0;transform:translateY(14px);transition:opacity .45s linear .28s,transform .7s var(--ease-out) .28s}
.trilha-on .linhas li.atual .sobe,.lateral-on .linhas li.atual .sobe,.lateral-on .linhas li:hover .sobe,.lateral-on .linhas li:focus-within .sobe{transform:none}
.trilha-on li.atual .servico p,.lateral-on li.atual .servico p,.lateral-on li:hover .servico p,.lateral-on li:focus-within .servico p{opacity:1;transform:none}
.quadro-risco{display:none}
.trilha-on .quadro-risco,.lateral-on .quadro-risco{display:block;position:absolute;left:50%;top:46%;width:160%;height:3px;margin-left:-80%;background:var(--amarelo);visibility:hidden;pointer-events:none}
.trilha-on li.atual .quadro-risco,.lateral-on li.atual .quadro-risco{animation:risco-cruza .95s cubic-bezier(.7,0,.2,1) .05s}
@keyframes risco-cruza{from{visibility:visible;transform:rotate(var(--ang)) translateX(-100%)}to{visibility:visible;transform:rotate(var(--ang)) translateX(100%)}}

/* ---------- Resposta ao toque ---------- */
.servico,.decide-linha,.btn,.zap,.perguntas summary{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){
  .servico,.decide-linha,.perguntas summary{transition:transform .2s var(--ease-out)}
  .servico:active{transform:scale(.97)}
  .decide-linha:active{transform:scale(.985)}
  .perguntas summary:active{transform:scale(.985)}
  .btn:active{transform:scale(.96)}
  .zap:active{transform:scale(.9)}
}

@media (min-width:900px){
  body{font-size:18px}
  .secao{padding-block:128px}
  .logo img{height:38px}
  .btn{font-size:18px}
  .zap svg{width:38px;height:38px}

  .palco .vid{top:0;left:0;width:100%;height:100%}
  .palco.tem-video::before{background:linear-gradient(to top,var(--grafite) 0,rgba(21,23,26,0) 16svh),linear-gradient(to bottom,rgba(21,23,26,.6) 0,rgba(21,23,26,0) 16svh),linear-gradient(to right,rgba(21,23,26,.95) 0,rgba(21,23,26,.93) 46%,rgba(21,23,26,.72) 52%,rgba(21,23,26,.26) 60%,rgba(21,23,26,.08) 68%,rgba(21,23,26,.08) 100%)}
  .palco.tem-video .cena-texto::before{display:none}
  /* Com vídeo, o selo fica no canto inferior direito, acima do ícone fixo, sem cobrir a cena. */
  .palco.tem-video .cena-b{align-self:flex-end;width:150px;height:150px;margin-bottom:max(84px,9svh)}
  .palco-grade{flex-direction:row;align-items:center;justify-content:space-between;gap:48px;padding-top:var(--topo);padding-bottom:20px}
  .cena-b{order:0;flex:none;width:min(62svh,36vw);height:min(62svh,36vw);margin:0}
  .b-cresce,.palco.tem-video .b-cresce{left:0;right:auto;top:0;bottom:auto;width:100%;height:100%;aspect-ratio:auto}
  #titulo{font-size:clamp(42px,3.7vw,52px)}
  .sub{font-size:20px;line-height:1.5}
  .cena-texto .sub{margin-top:20px}
  .cena-texto .sub{padding-right:0}

  .faixa-selos{padding-block:40px}
  .selos{display:flex;flex-wrap:wrap;gap:32px 40px}
  .selo{flex:1 1 260px;gap:18px;font-size:23px}
  .selo img,.selo-svg{width:88px;height:88px}

  .linhas{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;border-top:0;margin-top:48px}
  .linhas li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linha)}
  .servico{min-height:112px;padding:24px 0}
  .contador{font-size:32px}

  .secao-dia{padding-block:96px 64px}
  .dia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:60px;margin-top:48px}
  .dia li:last-child{border-bottom:0}
  .dia li:nth-last-child(-n+2){border-bottom:1px solid var(--linha)}
  .dia-item{grid-template-columns:44px minmax(0,1fr) 44px;padding-block:26px;column-gap:8px}
  .dia-item::before{font-size:15px;line-height:40px}
  .dia-item h3{font-size:clamp(28px,2.6vw,36px)}
  .dia-item p{margin-top:8px;font-size:18px}
  .dia-item .seta{font-size:30px}

  .secao-decide{padding-top:0}
  .decide{margin-top:56px}
  .decide-linha{padding-block:36px}
  .decide-in{grid-template-columns:minmax(0,7fr) minmax(0,4fr) 44px;column-gap:40px}
  .decide-in p{grid-column:auto;font-size:20px;line-height:1.4}
  .decide-in .seta{grid-column:auto;grid-row:auto;font-size:34px}

  .passos{grid-template-columns:repeat(3,1fr);gap:48px;margin-top:56px}
  .passos li{grid-template-columns:minmax(0,1fr)}
  .passos li::before,.passos li::after{grid-area:1/1/2/2;margin-bottom:24px}
  .passos h3,.passos p{grid-column:1}
  .passos p{margin-top:12px;font-size:20px;line-height:1.45}

  .frase-texto{padding-block:112px}
  .frase-on .frase-faixa{--curso-frase:190svh}
  .frase-on .frase-texto{font-size:min(8.2vw,14svh);line-height:1}
  .letreiro{padding-block:28px}
  .letreiro span{-webkit-text-stroke-width:4px}
  .final-selo{right:var(--margem);bottom:-10%;width:min(50vw,100svh);opacity:.1}
  .pag-topo{overflow:hidden}
  .quem-grade{display:flex;align-items:center;gap:80px;padding-bottom:128px}
  .retrato{flex:0 0 45%;width:auto}
  .quem-texto{flex:1;min-width:0;padding:0 var(--margem) 0 0}
  .quem-texto:first-child{padding:112px var(--margem) 0 var(--esq)}
  .quem-texto>p{margin-top:28px;font-size:24px}

  .grade-faq{gap:48px}
  .perguntas summary{min-height:84px;font-size:28px}
  .perguntas details p{font-size:20px;line-height:1.5}

  .final{padding-block:136px 144px}
  .final p{margin-top:32px;font-size:24px}
  .final .btn{margin-top:40px}

  .rodape{padding-block:64px calc(var(--zap) + 44px)}
  .rodape-in{grid-template-columns:5fr 7fr;gap:60px}
  .rodape-nav{align-content:start;grid-template-columns:repeat(3,minmax(0,1fr))}
  .rodape-nav a{font-size:16px}

  .pag-topo-in{display:grid;grid-template-columns:8fr 4fr;align-items:center;column-gap:60px;padding-top:calc(var(--topo) + 28px);padding-bottom:72px}
  .pag-b{display:block;width:100%;max-width:300px;height:auto;justify-self:end;animation:entra 1s var(--ease-out) .4s backwards}
  .pag-topo .vid{height:100%}
  .pag-topo.tem-video .pag-topo-in{display:flex;align-items:flex-start;min-height:84svh}
  .pag-topo.tem-video .pag-b{display:none}
  .pag-topo.tem-video::before{background:linear-gradient(to bottom,rgba(21,23,26,.55) 0,rgba(21,23,26,0) 16svh),linear-gradient(to right,rgba(21,23,26,.95) 0,rgba(21,23,26,.92) 42%,rgba(21,23,26,.72) 49%,rgba(21,23,26,.3) 58%,rgba(21,23,26,.08) 70%,rgba(21,23,26,.08) 100%)}
  .pag-topo.tem-video .pag-topo-in>div:first-child::before{display:none}
  .pag-topo.tem-video h1{font-size:clamp(34px,4.4vw,64px);max-width:15ch}
  .pag-topo.tem-video .sub{max-width:40ch}

  /* Ritmo: o título ocupa a largura toda e o corpo muda de lado de seção para seção. */
  .bloco-sec{padding-block:112px}
  .grade{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px}
  .grade>h2{grid-column:1/-1}
  .corpo{grid-column:5/-1;gap:24px;max-width:none;font-size:20px;line-height:1.5}
  .bloco-sec:nth-of-type(3n) .corpo{grid-column:1/9}
  .marcas li,.numeros li{padding:22px 0;font-size:30px;line-height:1.2}
  .numeros li{grid-template-columns:72px minmax(0,1fr)}
  .marcas.com-titulo li{font-size:20px;line-height:1.45}
  .marcas.com-titulo strong{font-size:30px;line-height:1.2}
  .dupla{grid-template-columns:1fr 1fr;gap:80px}
  .dupla h2{margin-bottom:40px}
  .bloco-faq{padding-block:112px}
}

/* Tela baixa (celular deitado): sem cena presa e sem cortar o botão. */
@media (max-height:519px){
  .palco-in{height:auto;min-height:0}
  .palco-grade{padding-top:calc(var(--topo) + 12px);padding-bottom:24px}
  .cena-b{display:none}
}

/* Movimento reduzido: tudo parado e visível. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .varre-caixa,.abertura,.zap::before{display:none!important}
}

@media print{
  .topo,.zap{display:none}
  .anima .rv{opacity:1;transform:none}
  .anima .mascara .bloco>span,.anima .decide .bloco>span,.parte{transform:none!important}
  .lvl-txt{color:var(--osso);background:none}
  .letreiro{display:none}
  .anima .decide p,.anima .decide .seta{opacity:1}
}