/* ═══════════════════════════════════════════════════════════════════════════
ONDA SCROLL v1.0 · folha do padrão scroll-to-delivery
Grupo ONDA · 10/09/2026 · par de onda-scroll-v1.js
MOBILE PRIMEIRO DE VERDADE: o bloco base é o do celular, e o desktop entra
por `min-width`. Não é desktop encolhido.
═══════════════════════════════════════════════════════════════════════════ */
:root{
--noite:#0A0C10; --oceano:#132232; --oceano-claro:#1E3348;
--ouro:#E7A431; --ouro-claro:#FFD98A; --ouro-escuro:#B87A18;
--sol:#E4762A; --areia:#FBF7F0; --papel:#FFFFFF;
--tinta:#16191E; --tinta-media:#4A515C; --tinta-suave:#727A86;
--linha:#E6DFD2; --linha-forte:#D3C9B6;
--verde:#1F7A5C; --vermelho:#B3341F;
/* Espiral do ContraFluxo. Validadas p/ daltonismo: 6/6 pares sobre noite.
Ouro e Fogo NUNCA na mesma série: reprovam (dE 14,1 normal, 11,9 tritan). */
--agua:#1B4462; --terra:#5B6A49; --fogo:#C77235; --ar:#F4EDE4;
--s1:#E7A431; --s2:#6FA3D6; --s3:#5B6A49; --s4:#9AA7B4;
--mono:ui-monospace,Consolas,"SF Mono",Menlo,monospace;
--sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
--max:1240px;
--e-out:cubic-bezier(.16,1,.3,1);
--e-pop:cubic-bezier(.34,1.4,.64,1);
--t-micro:200ms;
--ground:#070910; --surface:#101a26; --raise:#17242f;
--ink:#F4F7FA; --ink-2:#AEBAC6; --ink-3:#78848F;
--line:#1f2d3c; --line-2:#2c4055; --accent:var(--ouro);
--glow:rgba(231,164,49,.16);
--hi:rgba(255,255,255,.055);
--el1:0 1px 0 0 var(--hi) inset,0 1px 2px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.32);
--el2:0 1px 0 0 var(--hi) inset,0 2px 4px rgba(0,0,0,.55),0 12px 30px rgba(0,0,0,.42);
--el3:0 1px 0 0 var(--hi) inset,0 4px 8px rgba(0,0,0,.6),0 26px 60px rgba(0,0,0,.5);
--spot:rgba(255,255,255,.07);
}
html[data-theme="light"]{
--ground:#F7F3EC; --surface:var(--papel); --raise:#F1EADD;
--ink:var(--tinta); --ink-2:var(--tinta-media); --ink-3:var(--tinta-suave);
--line:var(--linha); --line-2:var(--linha-forte); --accent:var(--ouro-escuro);
--ar:#D9C4B1; --s1:#B87A18; --s2:#1B4462; --s3:#5B6A49; --s4:#6B7683;
--glow:rgba(184,122,24,.12); --hi:rgba(255,255,255,.9);
--el1:0 1px 0 0 var(--hi) inset,0 1px 2px rgba(60,44,20,.10),0 4px 12px rgba(60,44,20,.07);
--el2:0 1px 0 0 var(--hi) inset,0 2px 5px rgba(60,44,20,.12),0 14px 30px rgba(60,44,20,.10);
--el3:0 1px 0 0 var(--hi) inset,0 5px 10px rgba(60,44,20,.14),0 28px 60px rgba(60,44,20,.13);
--spot:rgba(120,90,30,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink-2);font-family:var(--sans);font-size:16px;
line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
/* ═══ o portão do movimento ═══════════════════════════════════════════════
Estado inicial escondido SÓ existe quando o motor confirmou que carregou.
Sem `.onda-motion` no , a página aparece inteira. É o que impede
página em branco se o GSAP falhar. */
html.onda-motion [data-rv]{opacity:0}
/* As variantes abaixo animam OUTRA COISA que não a opacidade do próprio
elemento, então o contêiner tem de continuar visível. Sem esta exceção a
headline fica invisível para sempre: as palavras animam dentro de um pai
em opacity 0. Achado ao olhar a página em 10/09/2026. */
html.onda-motion [data-rv="palavra"]{opacity:1}
html.onda-motion [data-rv="linha"]{opacity:1;transform:scaleX(0)}
html.onda-motion [data-rv="mascara"]{opacity:1;clip-path:inset(100% 0% 0% 0%)}
html.onda-motion [data-grupo] > *{opacity:0}
html.onda-motion [data-fixa] [data-passo]{opacity:0;visibility:hidden}
html.onda-motion [data-scrub="progresso"]{transform:scaleX(0)}
/* A MÁSCARA CORTAVA O ACENTO. Corrigido em 17/09/2026, visto no celular do
Yuri na hero da Houses ("VOCÊ VÊ") e na da Plena ("NÃO").
A palavra entra deslizando de baixo, e para isso a caixa precisa de
`overflow:hidden`. Só que a linha da headline roda em `line-height:.96`,
mais curta que a altura real do glifo: o til e o circunflexo das maiúsculas
ficam ACIMA do topo da caixa e eram cortados fora.
A saída é abrir a máscara só para cima, com padding, e puxar a caixa de
volta com a mesma medida em margem negativa: a área visível sobe, o layout
não se mexe e a borda de baixo, que é a que esconde a palavra antes de
entrar, continua exatamente onde estava.
A FOLGA SUBIU DE .18em PARA .32em NO MESMO DIA, e a razão é a pilha de
fontes. A casca ONDA não embute fonte: usa a do sistema. No Chrome desta
máquina a medição da tinta passava com .18em em todas as nove páginas, e
no celular do Yuri o acento continuava cortado, porque lá a fonte é outra
e o acento dela sobe mais. Medir no navegador de casa não prova nada sobre
o aparelho quando a fonte não viaja junto com a peça: a folga tem de caber
na fonte mais alta, não na daqui. .32em cobre as pilhas de Windows,
Android e iOS com margem. */
.onda-pw{display:inline-block;overflow:hidden;vertical-align:top;
padding-top:.32em;margin-top:-.32em}
/* Terminada a entrada, a máscara é desligada pelo motor e o texto passa a
ser texto comum: nenhum recorte, em nenhuma fonte. Ver `onda-revelado` em
onda-scroll-v1.js. Sem o motor (ou com motion reduzido) a headline nasce
assim, pela regra de fallback logo acima. */
[data-rv="palavra"].onda-revelado .onda-pw{overflow:visible}
.onda-p{display:inline-block;will-change:transform}
/* ═══ campo de luz e grão ═══ */
.campo{position:fixed;inset:-20% -10%;z-index:0;pointer-events:none;
background:
radial-gradient(46% 38% at 16% 10%,rgba(231,164,49,.13),transparent 62%),
radial-gradient(40% 34% at 88% 26%,rgba(27,68,98,.30),transparent 64%),
radial-gradient(52% 44% at 62% 92%,rgba(199,114,53,.10),transparent 66%)}
html[data-theme="light"] .campo{background:
radial-gradient(46% 38% at 16% 10%,rgba(184,122,24,.10),transparent 62%),
radial-gradient(40% 34% at 88% 26%,rgba(27,68,98,.09),transparent 64%),
radial-gradient(52% 44% at 62% 92%,rgba(199,114,53,.07),transparent 66%)}
.grao{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.03;
background-repeat:repeat;background-size:170px 170px;
background-image:url("data:image/svg+xml;utf8,")}
main,.topo{position:relative;z-index:2}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 18px}
section{padding:64px 0;position:relative}
/* ═══ topo ═══ */
.topo{position:sticky;top:0;z-index:90;background:var(--ground);
border-bottom:1px solid var(--line)}
.topo-in{max-width:var(--max);margin:0 auto;padding:10px 18px;display:flex;
align-items:center;gap:12px}
.marca{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1}
.marca-sup{font-family:var(--mono);font-size:9px;letter-spacing:.34em;font-weight:700;
color:var(--ink-3);text-transform:uppercase}
.marca-nome{font-size:18px;font-weight:800;letter-spacing:-.012em;color:var(--ink);
text-transform:uppercase}
.marca-fio{width:24px;height:2px;background:var(--accent);margin-top:3px;
box-shadow:0 0 10px var(--glow)}
.topo-sp{flex:1}
.topo-nav{display:none;gap:20px}
.topo-nav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink-3);text-decoration:none;cursor:pointer;transition:color var(--t-micro)}
.topo-nav a:hover{color:var(--accent)}
/* ═══ tipografia ═══ */
.plate{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.plate:before{content:"";width:22px;height:1px;background:var(--accent);flex:none;
box-shadow:0 0 8px var(--glow)}
.plate.mute{color:var(--ink-3)}
.plate.mute:before{background:var(--line-2);box-shadow:none}
/* A entrelinha da headline subiu de .96 para 1.02 em 17/09/2026, junto com a
folga da máscara. São dois problemas diferentes com o mesmo sintoma: a
máscara cortava o acento, e a entrelinha apertada fazia o acento da segunda
linha encostar na primeira. Corrigir só um deixava o outro na tela. */
h1{font-size:clamp(34px,10.4vw,78px);line-height:1.02;letter-spacing:-.03em;font-weight:800;
text-transform:uppercase;color:var(--ink)}
h1 em,h2 em,h3 em,p em{font-style:normal;color:var(--accent)}
h1 em{text-shadow:0 0 44px var(--glow)}
h2 em{text-shadow:0 0 34px var(--glow)}
/* h2 sobe junto com h1, pelo mesmo motivo: ela carrega as frases de palco
("QUASE NINGUÉM LÊ A TABELA ATÉ O FIM") e é onde o acento mais aparece. */
h2{font-size:clamp(24px,6.6vw,44px);line-height:1.08;letter-spacing:-.025em;font-weight:800;
text-transform:uppercase;color:var(--ink);margin-bottom:14px}
h3{font-size:17px;line-height:1.24;font-weight:700;color:var(--ink);margin-bottom:7px}
.lede{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:62ch}
.grande{font-size:clamp(19px,5vw,30px);line-height:1.3;color:var(--ink);font-weight:600;
letter-spacing:-.015em;max-width:34ch}
p{margin-bottom:13px;max-width:70ch}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:700}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ═══ superfície ═══ */
.card{position:relative;background:var(--surface);border:1px solid var(--line);
box-shadow:var(--el1);padding:22px;
transition:border-color var(--t-micro),box-shadow 260ms var(--e-out),transform 220ms var(--e-out)}
.card:hover{box-shadow:var(--el3);border-color:var(--line-2)}
.card.destaque{border-color:var(--accent);box-shadow:var(--el2),0 0 0 1px var(--glow)}
/* ═══ botões e o par de CTA ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.02em;
text-transform:uppercase;padding:16px 24px;cursor:pointer;border-radius:0;
text-decoration:none;border:1px solid var(--accent);
background:linear-gradient(180deg,var(--ouro-claro),var(--accent));color:#221802;
box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 3px 0 -1px var(--ouro-escuro),
0 10px 24px rgba(0,0,0,.34);
transition:transform 170ms var(--e-pop),box-shadow 170ms,filter var(--t-micro)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);
box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 5px 0 -1px var(--ouro-escuro),
0 16px 34px rgba(0,0,0,.4),0 0 0 5px var(--glow)}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;flex:none}
/* verde do WhatsApp é o token --verde da marca, não cor nova */
.btn-zap{background:linear-gradient(180deg,#2FA37B,var(--verde));color:#fff;
border-color:var(--verde);
box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 3px 0 -1px #13563F,0 10px 24px rgba(0,0,0,.34)}
.btn-zap:hover{box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 5px 0 -1px #13563F,
0 16px 34px rgba(0,0,0,.4),0 0 0 5px rgba(31,122,92,.22)}
.btn-2{background:var(--surface);color:var(--ink-2);border:1px solid var(--line-2);
box-shadow:var(--el1)}
.btn-2:hover{color:var(--ink);box-shadow:var(--el2);filter:none}
.par-cta{display:flex;flex-direction:column;gap:11px;margin-top:26px}
.par-cta .btn{width:100%}
.cta-nota{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-3);text-align:center;margin-top:4px}
/* ═══ radar ═══ */
.radar-w{position:relative;width:100%;max-width:168px;margin:0 auto;aspect-ratio:1}
.radar-w:before{content:"";position:absolute;inset:6%;border-radius:50%;
background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.07),transparent 52%),
radial-gradient(circle at 50% 50%,rgba(27,68,98,.35),transparent 72%);
box-shadow:inset 0 2px 26px rgba(0,0,0,.55),0 22px 50px rgba(0,0,0,.42),0 0 0 1px var(--line)}
html[data-theme="light"] .radar-w:before{
background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95),transparent 54%),
radial-gradient(circle at 50% 50%,rgba(27,68,98,.07),transparent 72%);
box-shadow:inset 0 2px 18px rgba(60,44,20,.10),0 20px 44px rgba(60,44,20,.14),0 0 0 1px var(--line)}
.radar{width:100%;display:block;position:relative}
.radar .anel{fill:none;stroke:var(--line-2);stroke-width:.7}
.radar .cruz{stroke:var(--line-2);stroke-width:.7}
.radar .feixe{transform-origin:100px 100px;animation:gira 3.6s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.radar .eco{fill:var(--accent);opacity:0;animation:pisca 3.6s linear infinite}
@keyframes pisca{0%,100%{opacity:0}5%{opacity:1}34%{opacity:0}}
/* ═══ trilhos e barra de progresso ═══ */
.trilho{height:3px;background:var(--raise);position:relative;overflow:hidden;
box-shadow:0 1px 0 var(--hi) inset}
.trilho i{position:absolute;inset:0;background:var(--accent);display:block;
transform-origin:left center;box-shadow:0 0 12px var(--glow)}
/* ═══ seletor de segmento ═══ */
/* Quebra em linhas em vez de rolar na horizontal: com dez segmentos a barra
rolável escondia a maioria e ninguém descobria que o próprio setor estava
lá. Duas filas mostram tudo de uma vez. */
.seg-tabs{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 10px;
scrollbar-width:none;-ms-overflow-style:none}
.seg-tabs::-webkit-scrollbar{display:none}
.seg-tabs button{flex:none;font-family:var(--mono);font-size:clamp(9.5px,2.5vw,10.5px);
letter-spacing:.09em;
text-transform:uppercase;padding:clamp(8px,2.4vw,11px) clamp(9px,2.8vw,14px);
background:var(--surface);color:var(--ink-3);
border:1px solid var(--line);cursor:pointer;white-space:nowrap;
transition:color var(--t-micro),border-color var(--t-micro),background var(--t-micro)}
.seg-tabs button:hover{color:var(--ink)}
.seg-tabs button.on{color:var(--accent);border-color:var(--accent);background:var(--glow)}
.seg-corpo{margin-top:18px}
.seg-lista{list-style:none;display:grid;gap:2px}
.seg-lista li{background:var(--surface);border:1px solid var(--line);padding:16px 18px 16px 42px;
position:relative;font-size:14.5px;color:var(--ink-2)}
.seg-lista li:before{content:"";position:absolute;left:18px;top:23px;width:12px;height:1px;
background:var(--el,var(--accent));box-shadow:0 0 8px var(--glow)}
.seg-lista li b{color:var(--ink)}
.seg-nota{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
border-left:1px solid var(--line-2);padding-left:14px;line-height:1.6}
/* ═══ os quatro funcionários ═══ */
.equipe{display:grid;gap:12px;margin-top:26px}
.fn{position:relative;overflow:hidden;padding:22px}
.fn:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--el);
box-shadow:0 0 16px var(--el)}
.fn-h{display:flex;align-items:flex-start;gap:14px}
.fn-ico{width:46px;height:46px;flex:none;border:1px solid var(--line-2);display:grid;
place-items:center;color:var(--el);background:var(--raise);box-shadow:var(--el1);
transition:transform 420ms var(--e-pop),border-color var(--t-micro)}
.fn:hover .fn-ico{transform:scale(1.07);border-color:var(--el)}
.fn-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
.fn-el{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-3);margin-top:4px}
.fn p{font-size:14px;margin:12px 0 0;color:var(--ink-2);max-width:none}
/* ═══ a jornada fixa · o coração do scroll-to-delivery ═══ */
.jornada{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
padding:44px 0}
.jornada-topo{max-width:var(--max);margin:0 auto;padding:0 18px;width:100%}
/* As etapas são absolutas, então o palco não é medido por elas: a altura vem
daqui. Com a cena de cada etapa a etapa mais alta passou a 464 px no
celular e invadia a barra de progresso em 73 px. Medido em 12/09/2026. */
.jornada-palco{position:relative;max-width:var(--max);margin:22px auto 0;padding:0 18px;
width:100%;min-height:480px}
/* ═══ REGRA DO PADRÃO · TODA TIMELINE TEM IMAGEM POR ETAPA ════════════════
Etapa só com barra e texto vira legenda rolando. A cena entra na MESMA
tela que o texto, nunca em seção separada, porque o que prova o
cronograma é ver a etapa acontecendo. Imagem à esquerda no desktop, em
cima no celular. Definido em 12/09/2026. */
.passo{position:absolute;left:18px;right:18px;top:0;
display:grid;grid-template-columns:1fr;gap:16px;align-content:start}
.passo-foto{position:relative;overflow:hidden;border:1px solid var(--line);
background:var(--raise);aspect-ratio:16/9}
.passo-foto img{width:100%;height:100%;object-fit:cover;display:block;
filter:saturate(.62) contrast(1.08) brightness(.78)}
.passo-foto:after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(27,68,98,.30),rgba(7,9,16,.58))}
.passo-vazio{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
padding:10px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
text-transform:uppercase;color:var(--ink-3);line-height:1.7;
background:repeating-linear-gradient(135deg,var(--raise) 0 11px,var(--surface) 11px 22px)}
.passo-dia{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.passo-dia b{font-size:38px;letter-spacing:-.03em;color:var(--ink);font-weight:700;line-height:1}
.passo h3{font-size:clamp(20px,5.4vw,28px);text-transform:uppercase;letter-spacing:-.02em;
font-weight:800;margin-bottom:10px}
.passo p{font-size:15px;color:var(--ink-2)}
.passo-tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10px;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
border:1px solid var(--line-2);padding:5px 10px}
.jornada-barra{max-width:var(--max);margin:26px auto 0;padding:0 18px;width:100%}
/* ═══ rotas · SAGA, BRISA, PRESENÇA. Sem preço, nunca. ═══ */
.rotas{display:grid;gap:12px;margin-top:26px}
.rota-nome{font-size:clamp(26px,7vw,38px);font-weight:800;letter-spacing:-.03em;
text-transform:uppercase;color:var(--accent);line-height:.96}
.rota-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-3);margin-top:10px}
.rota-sel{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;background:linear-gradient(180deg,var(--ouro-claro),var(--accent));
color:#221802;padding:5px 10px;margin-bottom:12px}
.rota-lista{list-style:none;margin-top:16px;border-top:1px solid var(--line)}
.rota-lista li{padding:13px 0 13px 26px;border-bottom:1px solid var(--line);position:relative;
font-size:14px;color:var(--ink-2)}
.rota-lista li:last-child{border-bottom:0}
.rota-lista li:before{content:"";position:absolute;left:0;top:21px;width:12px;height:1px;
background:var(--accent)}
/* ═══ prova ═══ */
.provas{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:26px}
.provas div{background:var(--surface);border:1px solid var(--line);padding:20px}
.provas b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
font-size:clamp(28px,8vw,44px);font-weight:700;color:var(--ink);letter-spacing:-.035em;
line-height:1}
.provas span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3);margin-top:9px;line-height:1.5}
.fonte{margin-top:20px;padding:15px 18px;border-left:3px solid var(--accent);
background:linear-gradient(90deg,var(--glow),transparent 72%)}
.fonte b{font-family:var(--mono);font-size:26px;color:var(--ink);font-weight:700;
letter-spacing:-.02em;display:block;line-height:1.1}
.fonte span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:6px;max-width:52ch}
.fonte cite{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
/* ═══ FAQ ═══ */
.faq{margin-top:24px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 2px;position:relative;
font-size:15.5px;color:var(--ink);font-weight:600;transition:color var(--t-micro)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary:after{content:"";position:absolute;right:6px;top:26px;width:11px;height:1px;
background:var(--ink-3)}
.faq summary:before{content:"";position:absolute;right:11px;top:21px;width:1px;height:11px;
background:var(--ink-3);transition:transform 260ms var(--e-pop)}
.faq details[open] summary:before{transform:scaleY(0)}
.faq details p{padding:0 2px 20px;font-size:14.5px;color:var(--ink-2);max-width:66ch}
/* ═══ rodapé ═══ */
.rodape{padding:44px 0 60px;border-top:1px solid var(--line)}
.rodape p,.rodape li{font-size:12.5px;color:var(--ink-3);line-height:1.7;max-width:78ch}
.rodape h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-3);font-weight:700;margin-bottom:12px}
.rodape ul{list-style:none;margin-bottom:16px}
.rodape li{padding-left:15px;position:relative;margin-bottom:6px}
.rodape li:before{content:"·";position:absolute;left:4px}
/* ═══ PALCO · mídia grande que atravessa a seção e se revela ═══════════════
O arco visual das referências: a mídia fica presa ao fundo, o texto passa
por cima, e ela cresce e clareia conforme rola. */
.palco{position:relative;min-height:100svh;display:flex;align-items:center;
overflow:clip;padding:76px 0}
.palco-midia{position:absolute;inset:0;z-index:0;overflow:hidden;
will-change:transform}
/* ═══ GRADAÇÃO DE COR · a mídia adota a paleta da página ═══════════════════
O problema que isto resolve: cada mídia chega com a sua temperatura, o
escritório neutro, o mar teal, o androide cinza-frio, o sonar âmbar, e a
página é azul-noite com ouro. Véu que só ESCURECE não resolve: a mídia
continua sendo um retângulo estrangeiro colado na página, e é isso que
dá a sensação de chapado. Aqui ela é tingida e a borda dissolve.
Diagnosticado em 10/09/2026. */
.palco-midia > img,.palco-midia > video{width:100%;height:100%;object-fit:cover;
display:block;
/* puxa toda mídia para o registro contido da marca, seja qual for a origem */
filter:saturate(.76) contrast(1.06) brightness(.86)}
/* 1. AS BORDAS DISSOLVEM NA COR DA PÁGINA.
Gradiente na própria `--ground`, e não máscara: assim a emenda é exata,
porque é literalmente a cor do fundo, e funciona nos dois temas. */
.palco:before{content:"";position:absolute;left:0;right:0;top:0;height:26%;
z-index:1;pointer-events:none;
background:linear-gradient(180deg,var(--ground) 0%,rgba(0,0,0,0) 100%)}
.palco .palco-fim{position:absolute;left:0;right:0;bottom:0;height:30%;
z-index:1;pointer-events:none;
background:linear-gradient(0deg,var(--ground) 0%,rgba(0,0,0,0) 100%)}
/* 2. TINTA DE UNIFICAÇÃO: azul-oceano por cima, em `soft-light`.
É o que faz o mar, o escritório e o submarino parecerem do mesmo filme. */
.palco-grade{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,
rgba(27,68,98,.52) 0%, rgba(10,14,22,.22) 46%, rgba(27,68,98,.50) 100%);
mix-blend-mode:soft-light}
/* 3. calor de ouro no pé, que é onde o texto senta: liga a mídia ao acento */
.palco-grade:after{content:"";position:absolute;inset:0;
background:radial-gradient(126% 72% at 50% 110%,rgba(231,164,49,.20),transparent 64%);
mix-blend-mode:overlay}
html[data-theme="light"] .palco-grade{
background:linear-gradient(180deg,rgba(27,68,98,.16),rgba(255,255,255,.10) 50%,rgba(27,68,98,.14));
mix-blend-mode:multiply}
html[data-theme="light"] .palco-midia > img,
html[data-theme="light"] .palco-midia > video{filter:saturate(.84) contrast(1.02) brightness(1.02)}
/* ═══ HERO COM FOTO EMBAIXO E VÍDEO POR CIMA ══════════════════════════════
Promovido da folha local do ONDA Clinic em 16/09/2026, quando virou o
padrão de seis páginas. O vídeo web tem 1280x720 e abre mole numa tela
grande; a foto tem origem em 2K ou mais e pinta no primeiro quadro. Então
a foto entra embaixo, nítida e imediata, e o vídeo sobe por cima só depois
de ter quadro decodificado. Se o vídeo não carregar, ou se o visitante
pediu menos movimento, a cena continua inteira.
Os filhos de .palco-midia são de fluxo normal na regra acima, por isso
dois deles empilhariam verticalmente sem este posicionamento. */
.palco-midia.sobreposta > picture,
.palco-midia.sobreposta > video{position:absolute;inset:0}
.palco-midia.sobreposta > video{opacity:0;transition:opacity .7s var(--e-out)}
.palco-midia.sobreposta > video.pronto{opacity:1}
/* ═══ DIREÇÃO DE ARTE POR TELA, E POR QUE NÃO É srcset ═════════════════════
O recorte de celular é 4:5 e o de desktop é 16:9: são enquadramentos
diferentes, não resoluções diferentes da mesma foto. `srcset` escolhe por
largura e não sabe disso, então num viewport de 1024 px ele pegava o
recorte vertical e deformava a cena. `` com `media` decide pelo
mesmo ponto de quebra do restante da folha. O preço é repetir aqui o
object-fit e a gradação, porque a regra de cima mira filho direto de
.palco-midia e o agora é filho do . */
.palco-midia > picture{position:absolute;inset:0;display:block}
.palco-midia > picture > img{width:100%;height:100%;object-fit:cover;display:block;
filter:saturate(.76) contrast(1.06) brightness(.86)}
html[data-theme="light"] .palco-midia > picture > img{
filter:saturate(.84) contrast(1.02) brightness(1.02)}
/* o video do mar fica ACIMA das paredes de agua em CSS, que ficam como rede:
se o video nao carregar, a cena ainda existe em vez de ficar preto. */
.mar-video{z-index:2}
.mar-video video{width:100%;height:100%;object-fit:cover;display:block}
/* camada de espera: enquanto a foto real não chega, o lugar não fica quebrado */
.palco-vazio{position:absolute;inset:0;
background:
radial-gradient(60% 50% at 50% 38%,rgba(27,68,98,.55),transparent 70%),
radial-gradient(80% 60% at 50% 100%,rgba(231,164,49,.10),transparent 70%),
linear-gradient(180deg,#0b1420,#070910);
display:grid;place-items:center}
.palco-vazio span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-3);border:1px dashed var(--line-2);
padding:9px 14px;text-align:center;max-width:78%;line-height:1.7}
.palco-veu{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,var(--ground) 0%,rgba(7,9,16,.55) 45%,var(--ground) 100%)}
.palco-corpo{position:relative;z-index:2;width:100%}
/* Texto no pé do palco, com cortina escura por baixo dele. É o que a
referência faz: a frase embaixo, o rosto livre em cima. Resolve a
legibilidade sobre mídia clara sem tapar a cena. */
.palco.rodape-texto{align-items:flex-end;padding-bottom:44px}
.palco.rodape-texto:after{content:"";position:absolute;left:0;right:0;bottom:0;
height:62%;z-index:1;pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(5,7,12,.62) 42%,rgba(5,7,12,.92))}
.palco.rodape-texto .palco-corpo{z-index:3}
/* ── TEXTO NO MEIO DA CENA ────────────────────────────────────────────────
Pedido do Yuri em 17/09/2026, depois de ver as sete no visor de celular:
na segunda seção de cada peça o texto estava no pé e a metade de cima da
cena ficava vazia. No desktop isso é respiro; no celular, onde a cena tem
88svh de altura, a frase some da dobra e o visitante rola achando que a
seção é só imagem.
`centro-texto` é irmã de `rodape-texto`, não substituta: a cortina deixa
de ser uma saia no pé e vira um véu com o miolo mais fechado, que é o que
deixa o texto legível sem apagar a cena nas bordas. */
.palco.centro-texto{align-items:center;padding-top:44px;padding-bottom:44px}
.palco.centro-texto:after{content:"";position:absolute;inset:0;
z-index:1;pointer-events:none;
background:radial-gradient(72% 52% at 50% 50%,rgba(5,7,12,.80),rgba(5,7,12,.42) 62%,transparent 84%)}
.palco.centro-texto .palco-corpo{z-index:3}
/* ── SOMBRA ATRÁS DO TEXTO, SEM CAIXA ─────────────────────────────────────
Para cena clara ou de muito detalhe, onde o véu do palco não basta e a
`cama` seria pesada demais: ali o texto ganharia moldura e viraria card no
meio de uma cena de tela cheia. Aqui a sombra é só uma mancha atrás das
letras, maior que o bloco e sem borda nenhuma.
Nasceu do apontamento do Yuri em 17/09/2026 na virada da Houses e da
Contábil, e vale em qualquer texto sobre mídia. */
.texto-sombra{position:relative}
.texto-sombra > *{position:relative;z-index:2}
.texto-sombra:before{content:"";position:absolute;z-index:1;pointer-events:none;
left:50%;top:50%;transform:translate(-50%,-50%);
width:min(128%,900px);height:calc(100% + 96px);
background:radial-gradient(58% 50% at 50% 50%,rgba(4,6,11,.88),rgba(4,6,11,.62) 55%,transparent 78%);
filter:blur(2px)}
html[data-theme="light"] .texto-sombra:before{
background:radial-gradient(58% 50% at 50% 50%,rgba(255,255,255,.92),rgba(255,255,255,.66) 55%,transparent 78%)}
/* legibilidade sobre mídia: o texto ganha uma cama, não um contorno */
.cama{background:linear-gradient(180deg,rgba(7,9,16,.82),rgba(7,9,16,.62));
border:1px solid var(--line);padding:24px 20px;box-shadow:var(--el3)}
html[data-theme="light"] .cama{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.72))}
/* ── SEÇÃO COMUM COM CENA DE FUNDO ────────────────────────────────────────
Diferente do palco: o palco é uma cena de tela cheia que existe para ser
olhada, e manda na altura. Aqui a seção continua sendo de conteúdo, com a
altura que o conteúdo pede, e a cena entra atrás como fundo. Foi o que o
CTA final pediu em 17/09/2026: a onda se abrindo atrás do "pode ser".
O véu abre e fecha no fundo da página para a seção não ter costura visível
com as vizinhas, e o texto ainda ganha `texto-sombra` por cima disso,
porque água clara com sol estoura o contraste no meio do quadro. */
.cena-fundo{position:relative;overflow:clip;isolation:isolate}
.cena-midia{position:absolute;inset:0;z-index:0;pointer-events:none}
.cena-midia picture{position:absolute;inset:0;display:block}
.cena-midia img,.cena-midia video{position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;display:block;
filter:saturate(.74) contrast(1.05) brightness(.8)}
html[data-theme="light"] .cena-midia img,html[data-theme="light"] .cena-midia video{
filter:saturate(.82) contrast(1.02) brightness(1)}
.cena-veu{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,var(--ground) 0%,rgba(6,9,15,.74) 30%,
rgba(6,9,15,.74) 70%,var(--ground) 100%)}
html[data-theme="light"] .cena-veu{
background:linear-gradient(180deg,var(--ground) 0%,rgba(255,255,255,.80) 30%,
rgba(255,255,255,.80) 70%,var(--ground) 100%)}
.cena-fundo > .wrap{position:relative;z-index:2}
.palco-troca{position:absolute;inset:0}
.palco-troca [data-troca-a],.palco-troca [data-troca-b]{position:absolute;inset:0}
/* ═══ MAR · o elemento de marca. A rolagem abre a água. ═══════════════════
Nenhuma das referências tem isto, porque é nosso. Tudo SVG e CSS: zero
imagem, zero requisição. */
.mar{position:relative;min-height:100svh;display:flex;align-items:center;
overflow:clip;padding:70px 0}
.mar-leito{position:absolute;inset:0;z-index:0;overflow:hidden;
background:
radial-gradient(70% 55% at 50% 62%,rgba(231,164,49,.16),transparent 72%),
linear-gradient(180deg,#0a1520 0%,#050810 100%)}
/* o leito: areia batida, linhas de rota e o eco do sonar */
.mar-leito:after{content:"";position:absolute;inset:0;opacity:.5;
background-image:
repeating-linear-gradient(97deg,transparent 0 38px,rgba(231,164,49,.055) 38px 39px),
repeating-linear-gradient(3deg,transparent 0 54px,rgba(255,255,255,.03) 54px 55px)}
.mar-metade{position:absolute;top:-4%;bottom:-4%;width:58%;z-index:1;
will-change:transform;pointer-events:none}
.mar-metade.esq{left:0}
.mar-metade.dir{right:0}
.mar-corpo{position:relative;z-index:3;width:100%}
/* A PAREDE DE ÁGUA · três camadas, e a borda rasgada por turbulência.
O caminho SVG geométrico anterior parecia peça de quebra-cabeça. O que
quebra a curva mecânica é `feDisplacementMap` com ruído fractal na borda.
Cada camada recebe deslocamento e desfoque diferentes, porque água de
verdade não tem uma borda: tem três, em profundidades diferentes.
Quando a foto ou o vídeo real chegar, ele entra em `.agua-real` e herda
a mesma máscara: a borda continua orgânica. */
.mar-metade .agua{position:absolute;inset:0;overflow:hidden}
.agua-camada{position:absolute;inset:-6% -2%;filter:url(#ondaRasga)}
.agua-camada.c1{background:linear-gradient(90deg,#061320 0%,#0a2135 58%,#123049 100%);
opacity:1}
.mar-metade.dir .agua-camada.c1{background:linear-gradient(270deg,#061320 0%,#0a2135 58%,#123049 100%)}
.agua-camada.c2{background:linear-gradient(90deg,transparent 40%,#1B4462 88%,#2a6187 100%);
opacity:.72;filter:url(#ondaRasga2) blur(1px)}
.mar-metade.dir .agua-camada.c2{background:linear-gradient(270deg,transparent 40%,#1B4462 88%,#2a6187 100%)}
.agua-camada.c3{background:linear-gradient(90deg,transparent 62%,rgba(126,183,214,.5) 92%,rgba(214,238,250,.8) 100%);
opacity:.6;filter:url(#ondaRasga3) blur(3px)}
.mar-metade.dir .agua-camada.c3{background:linear-gradient(270deg,transparent 62%,rgba(126,183,214,.5) 92%,rgba(214,238,250,.8) 100%)}
/* a foto ou o vídeo real, quando existir */
.agua-real{position:absolute;inset:-6% -2%;filter:url(#ondaRasga)}
.agua-real img,.agua-real video{width:100%;height:100%;object-fit:cover;display:block}
/* névoa e respingo na crista, o que dá volume à parede */
.agua-spray{position:absolute;top:0;bottom:0;width:34%;
filter:url(#ondaRasga3) blur(9px);opacity:.5;mix-blend-mode:screen}
.mar-metade.esq .agua-spray{right:-6%;
background:linear-gradient(90deg,transparent,rgba(226,242,250,.42) 74%,rgba(255,255,255,.7))}
.mar-metade.dir .agua-spray{left:-6%;
background:linear-gradient(270deg,transparent,rgba(226,242,250,.42) 74%,rgba(255,255,255,.7))}
/* cáusticas: a luz da superfície tremendo dentro da água */
.agua-caustica{position:absolute;inset:0;opacity:.16;mix-blend-mode:screen;
filter:url(#ondaRasga2);
background:repeating-linear-gradient(102deg,transparent 0 26px,rgba(214,238,250,.5) 26px 28px)}
/* raios de luz vindos da superfície, somem conforme desce */
.raios{position:absolute;left:0;right:0;top:0;height:62%;z-index:2;pointer-events:none;
opacity:.5;background:
linear-gradient(178deg,rgba(255,255,255,.10) 0%,transparent 58%),
repeating-linear-gradient(94deg,transparent 0 70px,rgba(255,255,255,.045) 70px 96px)}
/* divisor de onda entre seções: costura a página como água ═══════════════ */
.divisor{position:relative;height:64px;margin-top:-64px;z-index:5;pointer-events:none}
.divisor svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.divisor path{fill:var(--ground)}
.divisor .espuma{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.34}
/* ═══ CELULAR · moldura e conversa, HTML e CSS puro, zero imagem ══════════ */
/* ═══ REGRA DO PADRÃO · CELULAR À ESQUERDA, BASTIDOR À DIREITA ════════════
Os dois lado a lado SEMPRE, inclusive no celular. A seção só funciona se a
pessoa vir a conversa e o que acontece por baixo dela AO MESMO TEMPO: é a
comparação que é o argumento. Empilhado, ela lê a conversa, rola, e perde
a ligação entre as duas coisas. Definido em 12/09/2026.
O preço é o mockup ficar estreito no celular, e por isso todo texto dentro
dele escala por `clamp` em vez de ter tamanho fixo: a moldura encolhe e a
tipografia encolhe junto, em vez de estourar. */
/* NO CELULAR A DESCOBERTA É EMPILHADA, e isto é correção de 17/09/2026.
Ela nascera em duas colunas desde o primeiro pixel, 48fr contra 52fr, e só
mudava de proporção no desktop. Em 375 px isso dá duas colunas de ~170 px
lado a lado: a conversa de WhatsApp vira um selo ilegível e os bastidores
viram uma coluna de palavras quebradas. O defeito não aparecia no desktop,
que é onde a seção foi desenhada, e apareceu na primeira conferência feita
no visor de celular. Empilhado, o celular fica em cima em tamanho de
celular e os bastidores embaixo, com a largura inteira. */
.demo{display:grid;grid-template-columns:minmax(0,1fr);
gap:22px;margin-top:28px;align-items:start}
/* Empilhado, a moldura ganha a largura inteira da seção e deixa de parecer
aparelho: 335 px de celular dentro de uma tela de 375 px vira painel. Fica
travada em 320 e centrada, que é o tamanho em que ainda se lê aparelho. */
.fone{width:100%;max-width:320px;margin:0 auto;background:#0b1a24;
border-radius:22px;padding:6px;box-shadow:var(--el3),0 0 0 1px rgba(255,255,255,.07) inset}
/* SEM proporção fixa: a moldura é medida pela conversa.
Com `aspect-ratio`, a moldura tinha altura fixa e a conversa não cabia:
no celular as DUAS primeiras mensagens ficavam cortadas fora da tela e o
visitante via só o fim, sem a pergunta que abre. Trocar por altura de
conteúdo resolve nos dois tamanhos. O preço é que conversa comprida vira
celular comprido, então a regra de conteúdo é: no máximo cinco balões, e
curtos. Medido em 12/09/2026. */
.fone-tela{background:#0d1b16;border-radius:17px;overflow:hidden;
display:flex;flex-direction:column;height:auto}
.fone-topo{background:#075E54;padding:clamp(7px,2vw,13px) clamp(8px,2.4vw,15px);
display:flex;align-items:center;gap:clamp(6px,1.8vw,11px);flex:none}
.fone-av{width:clamp(23px,6.4vw,34px);height:clamp(23px,6.4vw,34px);border-radius:50%;
background:#25D366;flex:none;display:grid;place-items:center;font-family:var(--mono);
font-size:clamp(9px,2.4vw,13px);font-weight:700;color:#053b34}
.fone-nome{font-size:clamp(10px,2.8vw,14px);font-weight:700;color:#fff;line-height:1.2}
.fone-status{font-size:clamp(7.5px,2vw,10.5px);color:#a7d8cf;font-family:var(--mono);
letter-spacing:.06em}
.fone-tag{margin-left:auto;font-family:var(--mono);font-size:clamp(6.5px,1.7vw,8.5px);
letter-spacing:.14em;background:rgba(255,255,255,.16);color:#fff;
padding:3px clamp(4px,1.4vw,7px);border-radius:3px}
/* `min-height:0` é o que faz a moldura mandar na altura. Sem ele, item de
flex recusa encolher abaixo do conteúdo, o `aspect-ratio` da tela é
ignorado e a conversa vaza para fora do celular. E ancorar embaixo é o
que faz o corte parecer conversa rolada, e não texto cortado: some a
mensagem mais antiga, como em qualquer chat de verdade. */
.fone-chat{flex:1;min-height:0;overflow:hidden;justify-content:flex-start;
padding:clamp(8px,2.4vw,15px) clamp(7px,2vw,12px);
display:flex;flex-direction:column;gap:clamp(5px,1.6vw,9px);background:#0d1b16}
.bolha{flex:none}
.bolha{max-width:86%;padding:clamp(6px,1.7vw,9px) clamp(7px,2.2vw,12px);
font-size:clamp(9.5px,2.6vw,13.5px);line-height:1.42;border-radius:8px;
position:relative}
.bolha.dele{align-self:flex-start;background:#1f2c33;color:#e9edef;border-top-left-radius:2px}
.bolha.nossa{align-self:flex-end;background:#075E54;color:#eafff7;border-top-right-radius:2px}
.bolha b{display:block;font-family:var(--mono);font-size:clamp(6.5px,1.8vw,9px);
letter-spacing:.13em;text-transform:uppercase;opacity:.72;margin-bottom:3px;font-weight:400}
.bolha i{display:block;font-style:normal;font-family:var(--mono);
font-size:clamp(6.5px,1.8vw,9.5px);opacity:.6;text-align:right;margin-top:3px}
/* bastidores: o que o cliente não vê acontecendo */
.bastidores{padding:clamp(13px,3.4vw,22px)}
.bastidores h4{font-family:var(--mono);font-size:clamp(8.5px,2.2vw,10px);letter-spacing:.15em;
text-transform:uppercase;color:var(--accent);margin-bottom:clamp(10px,2.6vw,16px);
display:flex;align-items:center;gap:9px}
.bastidores h4:before{content:"";width:20px;height:1px;background:var(--accent)}
.bast-lista{list-style:none;display:grid;gap:2px}
.bast-lista li{display:grid;grid-template-columns:clamp(15px,3.6vw,20px) 1fr;
gap:clamp(7px,2vw,12px);align-items:start;padding:clamp(8px,2.2vw,12px) 0;
border-bottom:1px solid var(--line);font-size:clamp(11px,2.9vw,14px);color:var(--ink-2)}
.bast-lista li:last-child{border-bottom:0}
.bast-lista li b{color:var(--ink);font-weight:700}
/* No celular a coluna tem cerca de 170 px e o detalhe de cada item ocupava
cinco linhas: 685 px de bastidor contra 294 px de celular, e a seção
deixava de caber numa tela, que é justamente o que ela precisa fazer. No
celular fica a afirmação; o detalhe volta no desktop, onde há largura. */
.bast-mais{display:none}
.tique{width:clamp(15px,3.6vw,19px);height:clamp(15px,3.6vw,19px);flex:none;
border:1px solid var(--verde);display:grid;place-items:center;margin-top:1px}
.tique svg{width:65%;height:65%;fill:none;stroke:var(--verde);stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round}
.demo-nota{margin-top:clamp(11px,2.8vw,16px);font-size:clamp(11px,2.8vw,13px);color:var(--ink-3);
border-left:1px solid var(--line-2);padding-left:clamp(10px,2.4vw,14px);line-height:1.6}
.demo-nota b{color:var(--ink)}
/* ═══ INTEGRAÇÕES · onde a camada se conecta ═════════════════════════════ */
.integra{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:26px}
.int{background:var(--surface);border:1px solid var(--line);padding:18px 14px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
min-height:104px;text-align:center;
transition:border-color var(--t-micro),transform var(--t-micro) var(--e-pop),
box-shadow var(--t-micro)}
.int:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--el2)}
.int svg{width:26px;height:26px;fill:none;stroke:var(--ink-2);stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t-micro)}
.int:hover svg{stroke:var(--accent)}
.int span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3);line-height:1.4}
.int:hover span{color:var(--ink)}
.integra-nota{margin-top:18px;font-size:13px;color:var(--ink-3);text-align:center;
font-family:var(--mono);letter-spacing:.04em}
/* ═══════════════════════════════════════════════════════════════════════════
DESKTOP · entra por min-width, nunca o contrário
═══════════════════════════════════════════════════════════════════════════ */
@media(min-width:761px){
.wrap,.topo-in,.jornada-topo,.jornada-palco,.jornada-barra{padding-left:34px;padding-right:34px}
.passo{left:34px;right:34px}
section{padding:104px 0}
body{font-size:17px}
.lede{font-size:18px}
.topo-nav{display:flex}
.par-cta{flex-direction:row;flex-wrap:wrap;align-items:center}
.par-cta .btn{width:auto}
.cta-nota{margin-top:0;text-align:left}
.radar-w{max-width:330px}
.equipe{grid-template-columns:repeat(2,1fr);gap:16px}
.rotas{grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.seg-lista{grid-template-columns:repeat(2,1fr)}
.provas{grid-template-columns:repeat(4,1fr)}
.jornada-palco{min-height:360px}
/* etapa da timeline: cena à esquerda, texto à direita */
.passo{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:34px;align-items:center}
.passo-foto{aspect-ratio:4/3}
.demo{grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:30px}
.bast-mais{display:inline}
/* Largura travada: a coluna do desktop é larga e, solto, o celular virava
tablet. A altura continua vindo da conversa. E volta a encostar à
esquerda: centrar é regra do empilhado, onde ele é a peça sozinha. */
.fone{max-width:300px;margin:0}
.card{padding:26px}
.fn{padding:26px}
}
@media(min-width:1000px){
h1{font-size:clamp(56px,6.6vw,86px)}
.equipe{grid-template-columns:repeat(4,1fr)}
.seg-lista{grid-template-columns:repeat(2,1fr)}
}
/* dedo não tem posição de repouso: sem hover-lift onde não há ponteiro */
@media (hover:none){
.card:hover,.fn:hover .fn-ico{transform:none}
.btn:hover{transform:none}
}
@media (prefers-reduced-motion: reduce){
*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
html.onda-motion [data-rv],html.onda-motion [data-grupo] > *{opacity:1}
html.onda-motion [data-fixa] [data-passo]{opacity:1;visibility:visible;position:relative}
.radar .feixe{animation:none}
.radar .eco{opacity:.9}
.campo{animation:none}
}