/* lp.css — Soluções LLM · v1 · 25-09-26 · dividido em 03-10-26
   Um arquivo para as duas páginas: a home institucional (/) e a página do Trinity (/trinity/).
   Estrutura: fontes → tokens → base → peças → seções → responsivo → movimento reduzido */

/* ============ FONTES (locais, sem CDN) ============ */
@font-face{font-family:'Clash Display';src:url('../fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Clash Display';src:url('../fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap}

/* ============ TOKENS ============ */
:root{
  --noite:#0A0A0B;
  --carvao:#111113;
  --grafite:#17171A;
  --grafite-2:#1F1F23;
  --linha:rgba(255,255,255,.08);
  --linha-2:rgba(255,255,255,.14);
  --giz:#F2F2F2;
  --nevoa:#A1A1AA;
  --cinza:#8A8A93;
  --brasa:#E10600;
  --brasa-viva:#FF3B30;
  --brasa-20:rgba(225,6,0,.2);

  --f-display:'Clash Display','Inter',system-ui,sans-serif;
  --f-texto:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-ui:.24s;
  --t-rv:.9s;

  --wrap:1320px;
  --gutter:clamp(16px,4vw,40px);
  --topo-h:76px;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topo-h) + 12px)}
body{margin:0;background:var(--noite);color:var(--giz);font:400 1rem/1.6 var(--f-texto);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
button{font:inherit;color:inherit}
::selection{background:var(--brasa);color:#fff}
:focus-visible{outline:2px solid var(--brasa-viva);outline-offset:3px;border-radius:6px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mono{font-family:var(--f-mono);font-size:.8em;letter-spacing:.02em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.pular{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--giz);color:#111;font-weight:600;transition:top .2s}
.pular:focus{top:16px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.elo{text-decoration:underline;text-decoration-color:var(--brasa);text-decoration-thickness:2px;text-underline-offset:.22em;transition:color var(--t-ui)}
.elo:hover{color:var(--brasa-viva)}
.junto{white-space:nowrap}

/* ============ PEÇAS ============ */
.rotulo{display:inline-flex;align-items:center;gap:.75em;font-size:.95rem;font-weight:500;color:var(--nevoa);letter-spacing:-.005em;white-space:nowrap}
.rotulo-marca{flex:none;width:1.6em;height:1.3em;overflow:visible}
.js .rv.in .rotulo .desenha{animation:desenha 1.3s var(--ease-io) .2s forwards}

.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:var(--h);padding:0 1.5em;border:0;border-radius:999px;font:600 .96rem/1 var(--f-texto);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;transition:background-color var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease),border-color var(--t-ui),transform var(--t-ui) var(--ease)}
.btn:focus-visible{border-radius:999px}
.ico{width:1.15em;height:1.15em;flex:none}
.btn-brasa{background:var(--brasa);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 30px -12px rgba(225,6,0,.75)}
.btn-brasa:hover{background:#F20A03;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 16px 40px -12px rgba(225,6,0,.9)}
.btn-brasa:active{transform:translateY(1px)}
.btn-vidro{background:rgba(255,255,255,.06);color:var(--giz);border:1px solid var(--linha-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-vidro:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.btn-p{--h:42px;padding:0 1.1em;font-size:.875rem}
.btn-g{--h:60px;padding:0 2em;font-size:1.05rem}
.ico-seta{transition:transform var(--t-ui) var(--ease)}
.btn:hover .ico-seta{transform:translateY(2px)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:8px 14px;border-radius:999px;border:1px solid var(--linha-2);background:rgba(255,255,255,.03);font-size:.875rem}
.chips-p li{padding:5px 11px;font-size:.8rem;color:var(--nevoa)}

.sec-cab{display:grid;gap:18px;justify-items:start;max-width:780px}
.sec-titulo{font:500 clamp(2.1rem,1.1rem + 3.2vw,4.1rem)/1.02 var(--f-display);letter-spacing:-.035em;word-spacing:.05em;text-wrap:balance}
.sec-lead{max-width:58ch;font-size:clamp(1.02rem,.95rem + .3vw,1.18rem);color:var(--nevoa)}

/* entradas */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity var(--t-rv) var(--ease) var(--d,0s),transform var(--t-rv) var(--ease) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .entra{opacity:0;translate:0 18px;animation:entra .9s var(--ease) var(--d,0s) forwards}
@keyframes entra{to{opacity:1;translate:0 0}}

/* traço que se desenha (símbolo da marca) */
.js .desenha{stroke-dasharray:1 1.2;stroke-dashoffset:1.1;opacity:0}
@keyframes desenha{0%{stroke-dashoffset:1.1;opacity:0}6%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes respira{0%,100%{opacity:.5}50%{opacity:.95}}

/* ============ TOPO ============ */
.topo{position:fixed;inset:0 0 auto;z-index:50;padding:12px var(--gutter) 0;pointer-events:none}
.topo-in{pointer-events:auto;position:relative;max-width:calc(var(--wrap) - 2 * var(--gutter) + 20px);margin:0 auto;height:calc(var(--topo-h) - 12px);display:flex;align-items:center;gap:16px;padding:0 10px 0 18px;border:1px solid transparent;border-radius:999px;transition:background-color .35s var(--ease),border-color .35s}
.topo.rolou .topo-in{background:rgba(16,16,18,.78);border-color:var(--linha);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.marca{display:inline-flex;align-items:center;gap:10px;flex:none;padding-block:7px}
.topo-cta{margin-left:auto}
.marca-simbolo{width:38px;height:31px;flex:none}
.marca-letreiro{height:15px;width:auto}
.topo-nav{position:relative;margin-left:auto;padding:12px 2px;color:var(--nevoa);font-size:.92rem;font-weight:500;white-space:nowrap;transition:color var(--t-ui)}
.topo-nav::after{content:"";position:absolute;left:2px;right:2px;bottom:7px;height:2px;border-radius:2px;background:var(--brasa);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.topo-nav:hover,.topo-nav:focus-visible{color:var(--giz)}
.topo-nav:hover::after,.topo-nav:focus-visible::after{transform:scaleX(1)}
.topo-nav + .topo-cta{margin-left:0}
.topo.rolou .topo-nav{color:var(--giz)}

/* ============ HERO ============ */
.hero{position:relative;display:flex;align-items:center;min-height:100svh;padding:calc(var(--topo-h) + clamp(24px,5vh,64px)) 0 clamp(96px,10vh,110px);overflow:clip}
.hero-luz{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(42% 48% at 72% 48%,rgba(225,6,0,.26),transparent 72%),
  radial-gradient(22% 26% at 70% 46%,rgba(255,59,48,.14),transparent 70%),
  radial-gradient(70% 50% at 10% 110%,rgba(255,255,255,.04),transparent 70%)}
.hero-grid{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(16px,3vw,48px)}
.hero-texto{position:relative;z-index:2;container-type:inline-size}
.hero-titulo{margin:0 0 26px;font:500 clamp(2.6rem,14.2cqw,6.3rem)/.9 var(--f-display);letter-spacing:-.04em;word-spacing:.05em}
.ht{display:block;overflow:hidden;overflow:visible clip;padding:.06em 0 .1em;margin:-.04em 0 -.08em}
.ht-p{position:relative;display:inline-block;white-space:nowrap;transition:opacity .5s var(--ease)}
.js .ht-p{transform:translateY(110%);animation:sobe 1.05s var(--ease) var(--d,0s) forwards}
@keyframes sobe{to{transform:none}}
.ht-final .ht-p{color:var(--brasa-viva)}
.ht-p::after{content:"";position:absolute;left:.03em;right:.1em;bottom:.02em;height:.07em;border-radius:1em;background:var(--brasa);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.hero[data-ativa="balcao"] .ht[data-frente="balcao"] .ht-p::after,
.hero[data-ativa="vitrine"] .ht[data-frente="vitrine"] .ht-p::after,
.hero[data-ativa="rota"] .ht[data-frente="rota"] .ht-p::after{transform:scaleX(1)}
.hero[data-ativa="balcao"] .ht:not([data-frente="balcao"],.ht-final) .ht-p,
.hero[data-ativa="vitrine"] .ht:not([data-frente="vitrine"],.ht-final) .ht-p,
.hero[data-ativa="rota"] .ht:not([data-frente="rota"],.ht-final) .ht-p{opacity:.42}
.hero-lead{max-width:46ch;font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);color:var(--nevoa)}
.hero-lead strong{color:var(--giz)}
.hero-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.hero-palco{position:relative;z-index:1;container-type:inline-size;aspect-ratio:1/1;--mx:0;--my:0}
.js .hero-palco{opacity:0;animation:entra 1.2s var(--ease) .15s forwards}
.hero-marca-caixa{position:absolute;left:26%;top:-6%;width:48%;transform:translate3d(calc(var(--mx) * -10px),calc(var(--my) * -10px),0);transition:transform .8s var(--ease)}
.hero-marca{width:100%;height:auto;overflow:visible}
.traco-brilho{opacity:.7}
.js .hero .desenha{animation:desenha 2s var(--ease-io) .35s forwards}
.js .hero .traco-brilho{animation:desenha 2s var(--ease-io) .35s forwards,respira 5s ease-in-out 2.4s infinite}
.hero-marca-caixa.pulsa .hero-marca{animation:pulso-marca 1.1s var(--ease)}
@keyframes pulso-marca{0%{filter:drop-shadow(0 0 0 rgba(225,6,0,0))}35%{filter:drop-shadow(0 0 22px rgba(255,59,48,.55))}100%{filter:drop-shadow(0 0 0 rgba(225,6,0,0))}}

/* dois celulares: atrás a vitrine do cliente, na frente o painel do dono */
.hp-cel{position:absolute;transform:translate3d(calc(var(--mx) * var(--k)),calc(var(--my) * var(--k)),0) rotate(var(--r));transition:transform .8s var(--ease)}
.js .hp-cel{opacity:0;animation:entra 1.1s var(--ease) var(--d) forwards}
.hp-cel .cel{width:100%}
.hp-dono{left:-1%;top:49%;width:21%;--r:-5deg;--k:18px;--d:.6s}
.hp-cliente{right:-1%;top:46%;width:20%;--r:4deg;--k:14px;--d:.75s}
.hp-dono .cel-moldura,.hp-cliente .cel-moldura{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 2.4cqw #0a0a0c,0 60px 100px -40px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.7),0 0 80px -20px rgba(225,6,0,.35)}

/* PC do balcão: monitor com o PDV, logo no queixo */
.hp-pc{position:absolute;left:12%;top:34%;width:76%;--k:8px;transform:translate3d(calc(var(--mx) * var(--k)),calc(var(--my) * var(--k)),0);transition:transform .8s var(--ease)}
.js .hp-pc{opacity:0;animation:entra 1.1s var(--ease) .35s forwards}
.pc{container-type:inline-size;position:relative;width:100%}
.pc-moldura{position:relative;padding:1.3cqw 1.3cqw 0;border-radius:2.2cqw;background:linear-gradient(160deg,#3a3a40,#17171a 40%,#0d0d0f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 50px 90px -40px rgba(0,0,0,.95);transition:box-shadow .5s}
.pc-tela{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:1cqw;background:#0F0F11}
.pc-queixo{display:grid;place-items:center;height:5.6cqw}
.pc-logo{width:4.6cqw;height:3.7cqw}
.pc-pe{position:relative;height:9cqw}
.pc-pe::before{content:"";position:absolute;left:40%;right:40%;top:0;bottom:1cqw;background:linear-gradient(180deg,#232327,#141417);clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}
.pc-pe::after{content:"";position:absolute;left:29%;right:29%;bottom:0;height:1.3cqw;border-radius:1cqw;background:linear-gradient(180deg,#2e2e33,#141417);box-shadow:0 18px 28px -10px rgba(0,0,0,.9)}
.hero[data-ativa="balcao"] .pc-moldura,.hero[data-ativa="todas"] .pc-moldura{box-shadow:inset 0 0 0 1px rgba(255,59,48,.45),0 50px 90px -40px rgba(0,0,0,.95),0 0 70px -18px rgba(225,6,0,.55)}

/* avisos flutuando, um por frente */
.nt{--lift:0px;position:absolute;display:flex;align-items:center;gap:.75em;padding:.72em 1.15em .72em .72em;border-radius:1.15em;font-size:2.1cqw;white-space:nowrap;background:linear-gradient(180deg,rgba(44,44,49,.84),rgba(24,24,27,.9));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px -18px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translate3d(calc(var(--mx) * var(--k)),calc(var(--my) * var(--k) + var(--lift)),0);transition:transform .8s var(--ease),border-color .5s,box-shadow .5s}
.js .nt{opacity:0;scale:.92;animation:aparece .7s var(--ease) var(--d) forwards,flutua 6s ease-in-out calc(var(--d) + .7s) infinite}
@keyframes aparece{to{opacity:1;scale:1}}
@keyframes flutua{50%{translate:0 -6px}}
.nt-ico{display:grid;place-items:center;flex:none;width:2.3em;height:2.3em;border-radius:.75em;background:rgba(255,255,255,.08);font-size:1.05em;line-height:1;transition:background-color .5s,color .5s}
.nt-ico .ico{width:1.3em;height:1.3em}
.nt-txt{display:grid;gap:.22em}
.nt-txt b{font-weight:600;font-size:1em;line-height:1.15}
.nt-txt small{font-size:.84em;color:var(--nevoa)}
/* o aviso sai até 8% para fora do palco, mas nunca a menos de 34 px da borda da tela (sobra para a paralaxe do mouse) */
.nt-vitrine{right:max(-8%,calc(34px - max(var(--gutter),(100vw - var(--wrap)) / 2 + var(--gutter))));top:30%;--k:26px;--d:1.25s}
.nt-balcao{left:-10%;top:36%;--k:22px;--d:1.4s}
.nt-rota{left:30%;bottom:1%;--k:30px;--d:1.55s}
.hero[data-ativa="vitrine"] .nt-vitrine,.hero[data-ativa="balcao"] .nt-balcao,.hero[data-ativa="rota"] .nt-rota,.hero[data-ativa="todas"] .nt{--lift:-8px;border-color:rgba(255,59,48,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,59,48,.2),0 26px 60px -22px rgba(225,6,0,.6)}
.hero[data-ativa="vitrine"] .nt-vitrine .nt-ico,.hero[data-ativa="balcao"] .nt-balcao .nt-ico,.hero[data-ativa="rota"] .nt-rota .nt-ico,.hero[data-ativa="todas"] .nt-ico{background:rgba(225,6,0,.22)}

/* painel do dono (tela do celular da frente) */






.hero-rolar{position:absolute;left:50%;bottom:22px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--cinza);font-size:.8rem}
.hero-rolar i{position:relative;display:block;width:2px;height:38px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.hero-rolar i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;border-radius:2px;background:var(--brasa);animation:desce 2.2s var(--ease-io) infinite}
@keyframes desce{to{top:100%}}
.hero.pausado *,.hero.pausado *::after{animation-play-state:paused!important}

/* ============ HOME · HERO: o que a gente faz, e uma cena que mostra isso acontecendo ============
   Estrutura própria, diferente do hero da página do Trinity (que é coluna de texto + palco).
   Em cima, o título em duas linhas. Embaixo, o palco: o rio (o traço grosso da marca) vem da borda esquerda,
   passa pela folha do caderno e pela marca e entra no sistema, onde a IA lê, responde e resume, um ato de cada vez.
   Tudo em DOM: nada é medido por script. */
.beira{--rio:clamp(15px,1.6vw,23px);position:relative;padding:calc(var(--topo-h) + clamp(18px,4vh,48px)) 0 clamp(64px,9vh,120px);overflow:hidden;overflow:clip}
.beira-luz{position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 26% at 74% 16%,rgba(225,6,0,.2),transparent 72%),radial-gradient(44% 30% at 46% 66%,rgba(225,6,0,.14),transparent 72%)}
.beira-titulo{font:500 5.9rem/1.06 var(--f-display);font-size:min(6.4vw,10.5vh,5.9rem);font-size:min(6.4vw,10.5svh,5.9rem);letter-spacing:-.04em;word-spacing:.04em}
.bt-linha{display:block;white-space:nowrap}
/* cada linha sobe de trás de uma máscara. A máscara é clip-path, que não mexe na linha de base (overflow mexeria) */
.bt-l{display:inline-block;clip-path:inset(-.14em -.5em -.22em -.5em)}
.bt-s{display:inline-block}
.js .bt-s{transform:translateY(130%);animation:sobe .95s var(--ease) var(--d,0s) forwards}
.bt-g{position:relative;display:inline-block;isolation:isolate}
.bt-g::after{content:"";position:absolute;z-index:-1;left:.03em;right:.05em;bottom:-.01em;height:.085em;border-radius:1em;background:var(--giz);transform-origin:left}
.bt-g-v::after{background:var(--brasa)}
.js .bt-g::after{transform:scaleX(0);animation:risca .7s var(--ease) 1.15s forwards}
.js .bt-g-v::after{animation-delay:1.4s}
@keyframes risca{to{transform:scaleX(1)}}
/* embaixo do título: de onde a gente é, o que a gente faz com a rotina do cliente e o botão */
.beira-base{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;grid-template-areas:"casa lead acoes" "lugar lead acoes";align-items:start;gap:6px clamp(28px,4vw,56px);margin-top:clamp(20px,3.4vh,34px)}
.beira-casa{grid-area:casa;font:500 clamp(1.15rem,.8rem + .7vw,1.55rem)/1.2 var(--f-display);letter-spacing:-.025em}
.beira-lugar{grid-area:lugar;color:var(--cinza);font-size:.95rem}
.beira-lead{grid-area:lead;font-size:clamp(1.02rem,.96rem + .3vw,1.16rem);color:var(--nevoa);text-wrap:pretty}
.beira-acoes{grid-area:acoes;display:grid;justify-items:start;gap:12px}
/* o link do hero é texto corrido: se quebrar a linha no celular, a seta acompanha a última palavra */
.beira-acoes .seta-link{display:inline;justify-self:start;padding:10px 0}
.beira-acoes .seta-link .ico{display:inline-block;margin-left:.45em;vertical-align:-.22em}
.cena-nome{font:500 1rem/1.2 var(--f-display);letter-spacing:-.01em;color:var(--nevoa)}
.cena-nota{color:var(--cinza);font-size:.88rem}

/* o palco do hero: o foco da empresa em três atos. À esquerda o que a empresa já tem (a folha do caderno),
   no meio a marca, que dá uma volta inteira a cada ato,, à direita o sistema devolvendo: a IA lê, responde e resume.
   [data-ato] diz o ato; .rodando toca a animação do ato; .andando enche o fio da aba; .viu marca que o palco já entrou.
   Sem JS os três painéis aparecem empilhados; sem .rodando cada ato aparece pronto (é o estado de movimento reduzido). */
.foco{display:grid;gap:20px;margin-top:clamp(24px,4vh,44px)}
.foco-palco{position:relative;display:grid;grid-template-columns:minmax(0,20rem) minmax(130px,1fr) minmax(0,36rem);align-items:center;container-type:inline-size}
.foco-rio{grid-column:1 / 3;grid-row:1;height:var(--rio);margin:22px -3rem 0 -50vw;background:var(--brasa)}
.foco-lado{position:relative;z-index:1;display:grid;gap:12px;min-width:0}
.foco-entra{grid-column:1;grid-row:1}
.foco-sai{grid-column:3;grid-row:1}
.foco-folha{position:relative}
.ia-papel{position:relative;overflow:hidden;border-radius:12px;transform:rotate(-2.2deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4)}
.ia-papel img{width:100%;height:auto}
.ia-scan{position:absolute;left:0;right:0;top:0;height:20%;background:linear-gradient(180deg,transparent,rgba(225,6,0,.16) 70%,rgba(255,59,48,.85) 97%,transparent);opacity:0;transform:translateY(-100%)}
@keyframes scan{0%{opacity:0;transform:translateY(-100%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(500%)}}
/* o que a pessoa faz nos atos 2 e 3: pergunta e fecha o dia */
.foco-fala{position:absolute;right:-12px;bottom:10%;z-index:2;max-width:92%;padding:9px 13px;border-radius:14px 14px 4px 14px;border:1px solid var(--linha-2);background:#1D1D21;box-shadow:0 18px 40px -16px rgba(0,0,0,.9);font-size:.92rem;line-height:1.35;opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s linear .35s}
.foco[data-ato="2"] .foco-fala-2,.foco[data-ato="3"] .foco-fala-3{opacity:1;visibility:visible;transform:none;transition-delay:.2s,.2s,0s}
/* o meio: as contas correm o rio e passam por baixo da marca, que dá meia volta a cada ato */
.foco-meio{grid-column:2;grid-row:1;position:relative;z-index:1;display:grid;place-items:center;height:var(--rio);margin-top:22px}
.foco-contas{position:absolute;inset:0;container-type:inline-size}
.foco-contas i{position:absolute;left:0;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;opacity:0}
@keyframes conta{0%{opacity:0;transform:translateX(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(100cqw)}}
.foco-no{position:relative;display:grid;place-items:center;width:clamp(72px,7vw,96px);aspect-ratio:1;border-radius:50%;border:1px solid var(--linha-2);background:#0D0D0F;box-shadow:0 0 0 7px var(--noite),0 0 56px -6px rgba(225,6,0,.75)}
.foco-no svg{width:58%;height:47%;transform:rotate(calc(var(--giro,0) * 360deg));transition:transform 1.5s var(--ease-io) .8s}
.foco-no::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--brasa-viva);opacity:0}
@keyframes no-onda{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}
/* a janela do sistema: três abas, um painel por ato, todos na mesma célula para a altura não pular */
.foco-abas{display:none;gap:0 22px;padding:0 18px;border-bottom:1px solid var(--linha);background:rgba(255,255,255,.02)}
.js .foco-abas{display:flex}
.foco-abas button{position:relative;padding:15px 0 14px;border:0;background:none;color:var(--cinza);font:500 1.08em/1 var(--f-display);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:color .25s}
.foco-abas button:hover,.foco-abas button[aria-selected="true"]{color:var(--giz)}
.foco-abas i{position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--brasa);transform:scaleX(0);transform-origin:left}
.foco-abas button[aria-selected="true"] i{transform:scaleX(1)}
.foco.andando .foco-abas button[aria-selected="true"] i{animation:tour-prog var(--ato-ms,5s) linear}
.foco-paineis{display:grid;padding:16px}
.foco-painel{display:grid;align-content:start;gap:10px;min-width:0}
.foco-painel + .foco-painel{margin-top:18px;padding-top:18px;border-top:1px solid var(--linha)}
.js .foco-painel{grid-area:1 / 1;margin:0;padding:0;border:0;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.js .foco-painel.on{opacity:1;visibility:visible;transition-delay:0s}
.foco-painel-cab{display:grid;gap:1px}
.foco-painel-cab b{font-weight:600;line-height:1.25}
.foco-painel-cab span{color:var(--nevoa);font-size:.9em}
.ia-linhas{display:grid;gap:8px}
.ia-linhas li{display:grid;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--linha);background:rgba(255,255,255,.04);font-size:.9rem;line-height:1.35}
.ia-linhas span{color:var(--nevoa)}
.ia-linhas .duvida{border-color:rgba(255,59,48,.45);background:rgba(225,6,0,.07)}
.ia-flag{justify-self:start;margin-top:5px;padding:2px 9px;border-radius:999px;border:1px dashed var(--brasa-viva);color:var(--brasa-viva);font-size:.74rem;font-style:normal;font-weight:600}
.foco-pergunta{justify-self:end;max-width:86%;padding:9px 12px;border-radius:14px 14px 4px 14px;border:1px solid var(--linha-2);background:rgba(255,255,255,.06);line-height:1.4}
.foco-resposta{justify-self:start;max-width:90%;padding:9px 12px;border-radius:14px 14px 14px 4px;border:1px solid rgba(255,59,48,.45);background:rgba(225,6,0,.1);line-height:1.4}
.foco-resposta small{display:block;margin-bottom:2px;color:var(--brasa-viva);font-size:.84em;font-weight:600}
/* entrada do palco, uma vez só */
.js .foco:not(.viu) .foco-rio{clip-path:inset(0 100% 0 0)}
.js .foco.viu .foco-rio{clip-path:inset(0 0 0 0);transition:clip-path 1s var(--ease-io)}
.js .foco:not(.viu) .ia-papel{opacity:0;transform:translateY(-24px) rotate(5deg)}
.js .foco.viu .ia-papel{transition:opacity .5s var(--ease) .2s,transform .8s var(--ease) .2s}
.js .foco:not(.viu) .foco-no{opacity:0;transform:scale(.6)}
.js .foco.viu .foco-no{transition:opacity .5s var(--ease) .45s,transform .7s var(--ease) .45s}
.js .foco:not(.viu) .foco-janela{opacity:0;transform:translateY(16px)}
.js .foco.viu .foco-janela{transition:opacity .6s var(--ease) .6s,transform .6s var(--ease) .6s}
.js .foco:not(.viu) .cena-nome{opacity:0}
.js .foco.viu .cena-nome{transition:opacity .5s var(--ease) .3s}
/* os atos: o que entra corre o rio e chega no painel. As animações enchem de trás (backwards), então sem .rodando fica tudo à vista */
@keyframes chega{from{opacity:0;transform:translateX(12px)}}
@keyframes brota{from{opacity:0;transform:translateY(10px) scale(.96)}}
.foco[data-ato="1"]{--t0:2.45s}
.foco[data-ato="3"]{--t0:1.6s}
.foco.rodando[data-ato="1"] .ia-scan{animation:scan 1.7s var(--ease-io) .9s forwards}
.foco.rodando[data-ato="1"] .foco-contas i{animation:conta .95s var(--ease-io) calc(1.5s + var(--i) * .28s) forwards}
.foco.rodando[data-ato="2"] .foco-contas i:first-child,.foco.rodando[data-ato="3"] .foco-contas i:first-child{animation:conta .95s var(--ease-io) .7s forwards}
.foco.rodando .foco-no::after{animation:no-onda 1.1s ease-out 1.5s}
.foco.rodando .foco-painel.on .ia-linhas li{animation:chega .5s var(--ease) calc(var(--t0) + var(--i) * .28s) backwards}
.foco.rodando .foco-painel.on .foco-pergunta{animation:brota .45s var(--ease) .5s backwards}
.foco.rodando .foco-painel.on .foco-resposta{animation:brota .5s var(--ease) 1.75s backwards}
.foco.rodando[data-ato="1"] .ia-flag{animation:confira .6s var(--ease) 3.95s}
@keyframes confira{50%{transform:scale(1.08)}}
.foco figcaption{max-width:78ch;font-size:.95rem;color:var(--nevoa)}
.foco figcaption strong{color:var(--giz)}

/* ============ TRINITY ============ */
.trinity{padding:clamp(24px,4vh,60px) 0 clamp(80px,12vh,140px)}
.jornada{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);margin-top:clamp(40px,7vh,88px)}
.jornada-passos{position:relative;padding-left:52px;padding-bottom:22svh}
.jornada-trilho{position:absolute;left:9px;top:0;bottom:22svh;width:4px;border-radius:4px;background:rgba(255,255,255,.07)}
.jornada-trilho span{position:absolute;inset:0;border-radius:inherit;background:var(--brasa);transform:scaleY(var(--prog,0));transform-origin:top}
.passo{position:relative;min-height:74svh;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:.3;transition:opacity .5s var(--ease)}
.passo:first-of-type{min-height:62svh;justify-content:flex-start;padding-top:12svh}
.passo.ativo{opacity:1}
.passo::before{content:"";position:absolute;left:-52px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--noite);border:4px solid rgba(255,255,255,.16);transition:border-color .4s,background .4s}
.passo:first-of-type::before{top:calc(12svh + .9em)}
.passo.ativo::before,.passo.passou::before{border-color:var(--brasa);background:var(--brasa)}
.passo-n,.linha-quando{font:500 clamp(1.1rem,.95rem + .45vw,1.35rem)/1.15 var(--f-display);letter-spacing:-.012em;color:var(--brasa-viva)}
.passo-titulo{font:500 clamp(1.8rem,1.1rem + 1.7vw,2.75rem)/1.06 var(--f-display);letter-spacing:-.03em}
.passo p:last-child{max-width:44ch;font-size:1.075rem;color:var(--nevoa)}

.jornada-palco{--palco-h:clamp(540px,calc(100svh - 140px),760px);position:sticky;top:calc(var(--topo-h) + 16px);align-self:start;height:var(--palco-h);border-radius:36px;border:1px solid var(--linha);background:radial-gradient(70% 55% at 50% 58%,rgba(225,6,0,.14),transparent 72%),linear-gradient(180deg,#141417,#0C0C0E);overflow:hidden}
.pedido-status{position:absolute;top:18px;left:50%;z-index:5;translate:-50% 0;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid var(--linha-2);background:rgba(20,20,23,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.8125rem;white-space:nowrap}
.pedido-status b{font-weight:600}
.ps-txt{color:var(--nevoa)}
.ps-txt b{color:var(--giz)}
.ps-pontos{display:flex;gap:4px}
.ps-pontos i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .4s}
[data-cena="vitrine"] .ps-pontos i:nth-child(-n+1),
[data-cena="balcao"] .ps-pontos i:nth-child(-n+2),
[data-cena="rota"] .ps-pontos i:nth-child(-n+3),
[data-cena="acompanhamento"] .ps-pontos i{background:var(--brasa)}

.cena{container:cena / inline-size;position:absolute;inset:0;display:grid;place-items:center;padding:70px 20px 24px;opacity:0;visibility:hidden;transform:translateY(28px) scale(.975);transition:opacity .55s var(--ease),transform .8s var(--ease),visibility 0s linear .55s}
.jornada-palco[data-cena="vitrine"] .cena-vitrine,
.jornada-palco[data-cena="balcao"] .cena-balcao,
.jornada-palco[data-cena="rota"] .cena-rota,
.jornada-palco[data-cena="acompanhamento"] .cena-acomp{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* aparelhos */
.cel{container-type:inline-size;position:relative;flex:none;aspect-ratio:9/19;width:min(300px,calc((var(--palco-h,640px) - 100px) * 9 / 19))}
.cel-moldura{position:absolute;inset:0;padding:3.4cqw;border-radius:15cqw;background:linear-gradient(150deg,#3a3a40,#151518 38%,#0b0b0d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 2.4cqw #0a0a0c,0 50px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.7)}
.cel-tela{position:relative;height:100%;overflow:hidden;border-radius:11.6cqw;background:#0F0F11}

/* telas reais: imagem, troca entre telas, foco e toque */
.tela-img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.tela-real{isolation:isolate}
.tr-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:translateX(6%);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.tr-img.ativa{opacity:1;transform:none}
.tr-img.foi{transform:translateX(-6%)}
.tr-foco{position:absolute;z-index:2;left:var(--x,50%);top:var(--y,50%);width:var(--w,0%);height:var(--h,0%);border:2px solid rgba(255,59,48,.95);border-radius:9px;box-shadow:0 0 0 999px rgba(6,6,8,.5),0 0 22px rgba(225,6,0,.55);opacity:0;pointer-events:none;transition:left .6s var(--ease),top .6s var(--ease),width .6s var(--ease),height .6s var(--ease),opacity .35s}
.tr-foco.on{opacity:1}
.tr-toque{--tam:34px;position:absolute;z-index:3;left:var(--tx,50%);top:var(--ty,50%);width:var(--tam);height:var(--tam);border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 16px rgba(0,0,0,.45);translate:-50% -50%;opacity:0;pointer-events:none}
.tr-toque::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #fff;opacity:0}
.tr-toque.on{animation:toque .95s var(--ease)}
.tr-toque.on::after{animation:onda-toque .95s var(--ease)}
@keyframes toque{0%{opacity:0;scale:.5}25%{opacity:.95;scale:1}55%{opacity:.9;scale:.82}100%{opacity:0;scale:1}}
@keyframes onda-toque{0%{opacity:.85;scale:1}100%{opacity:0;scale:2.4}}
.pc .tr-foco{box-shadow:0 0 0 999px rgba(4,4,6,.68),0 0 22px rgba(225,6,0,.6)}
.cel .tr-toque{--tam:12cqw}
.pc .tr-toque{--tam:4.2cqw}
.cena-balcao .pc{width:100%;max-width:660px}

/* 04 · acompanhamento: PC atrás, celular na frente */
.cena-acomp{display:block}
.cena-acomp .pc{position:absolute;right:3%;top:17%;width:80%}
.cena-acomp .cel{position:absolute;left:4%;top:calc(50% + 26px);translate:0 -50%;width:min(230px,calc((var(--palco-h,640px) - 150px) * 9 / 19))}
/* quando o foco passa para o PC, ele vem para a frente e o celular recua: senão o destaque fica atrás do celular */
.cena-acomp .cel{transform-origin:left bottom;transition:transform .6s var(--ease),filter .6s var(--ease)}
.cena-acomp[data-frente="pc"] .pc{z-index:2}
.cena-acomp[data-frente="pc"] .cel{transform:scale(.94);filter:brightness(.55)}

.trinity-base{display:grid;justify-items:start;gap:18px;margin-top:clamp(56px,9vh,110px);padding-top:clamp(32px,5vh,48px);border-top:1px solid var(--linha)}
.tb-txt{font:500 clamp(1.3rem,1rem + .9vw,1.8rem)/1.2 var(--f-display);letter-spacing:-.02em}
.tour{display:grid;gap:22px;justify-self:stretch;margin-top:6px}
.tour-abas{display:flex;flex-wrap:wrap;gap:0 28px;border-bottom:1px solid var(--linha)}
.tour-abas button{position:relative;padding:12px 0 13px;border:0;background:none;color:var(--cinza);font:500 clamp(1rem,.95rem + .25vw,1.15rem)/1 var(--f-display);letter-spacing:-.01em;cursor:pointer;transition:color .25s}
.tour-abas button:hover{color:var(--giz)}
.tour-abas button[aria-selected="true"]{color:var(--giz)}
.tour-abas i{position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--brasa);transform:scaleX(0);transform-origin:left}
.tour-abas button[aria-selected="true"] i{transform:scaleX(1)}
.tour.andando .tour-abas button[aria-selected="true"] i{animation:tour-prog var(--tour-ms,5s) linear}
@keyframes tour-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tour-pc{width:100%;max-width:1000px}
.modulos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px;justify-self:stretch;margin:8px 0 0}
.modulos div{display:grid;align-content:start;gap:6px}
.modulos dt{font:500 1.05rem/1.2 var(--f-display);letter-spacing:-.01em;color:var(--brasa-viva)}
.modulos dd{margin:0;color:var(--nevoa);font-size:.93rem;line-height:1.5}
.trinity-base .btn{margin-top:10px}
.hero + .trinity{padding-top:clamp(72px,11vh,130px)}
.tb-ponte{max-width:62ch;margin-top:8px;color:var(--nevoa)}
.tb-ponte .elo{color:var(--giz)}
.tb-ponte .elo:hover{color:var(--brasa-viva)}

/* ============ TRINITY NA HOME: a motion do pedido e os cartões do que mais o sistema faz ============ */
.produtos{padding:clamp(72px,11vh,130px) 0 clamp(80px,12vh,140px)}
/* motion: três aparelhos reais, um trilho e a ficha do pedido correndo de um para o outro.
   Sem a classe .viva (sem JS ou com movimento reduzido) fica tudo aceso e parado. As telas e os destaques vêm de TELAS.pedido, no lp.js. */
.anda{--g:clamp(16px,2.6vw,40px);display:grid;gap:clamp(18px,2.6vh,26px);margin-top:clamp(36px,6vh,60px)}
.anda-barras{display:none}
.anda-palco{--pad:clamp(20px,3vw,44px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.5fr) minmax(0,1fr);align-items:center;gap:0 var(--g);padding:clamp(20px,2.6vw,34px) var(--pad) clamp(64px,6.4vw,84px);overflow:hidden;border-radius:36px;border:1px solid var(--linha);background:radial-gradient(70% 60% at 50% 62%,rgba(225,6,0,.14),transparent 72%),linear-gradient(180deg,#141417,#0C0C0E)}
.anda-ap{display:grid;justify-items:center;gap:12px;min-width:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* o celular encolhe com a altura da janela, para aparelhos e legendas caberem juntos em notebook */
.anda .cel{width:100%;max-width:212px;max-width:clamp(130px,calc((100svh - 450px) * 9 / 19),212px)}
.anda .cena-nome{font-size:clamp(.85rem,1.6vw,1rem);white-space:nowrap}
.anda-janela{width:100%;overflow:hidden;border-radius:14px;border:1px solid var(--linha-2);background:#0F0F11;box-shadow:0 40px 80px -40px rgba(0,0,0,.95)}
.anda-zoom{position:relative;aspect-ratio:16/9}
.anda-janela .tr-toque{--tam:26px}
.anda.andando .anda-ap{opacity:.36;transform:scale(.97)}
.anda.andando[data-frente=""] .anda-cliente,
.anda.andando[data-frente="cliente"] .anda-cliente,
.anda.andando[data-frente="loja"] .anda-loja,
.anda.andando[data-frente="entregador"] .anda-entregador{opacity:1;transform:none}
/* o trilho vai do meio do primeiro aparelho ao meio do terceiro: (largura útil - 2 vãos) / 9 é meia coluna de celular */
.anda-trilho{position:absolute;left:calc(var(--pad) + (100% - 2 * var(--pad) - 2 * var(--g)) / 9);right:calc(var(--pad) + (100% - 2 * var(--pad) - 2 * var(--g)) / 9);bottom:clamp(26px,2.8vw,36px);height:8px;border-radius:8px;background:rgba(255,255,255,.09)}
.anda-enche{position:absolute;inset:0;border-radius:inherit;background:var(--brasa);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-io)}
.anda[data-passo="2"] .anda-enche{transform:scaleX(.5)}
.anda[data-passo="3"] .anda-enche,.anda[data-passo="4"] .anda-enche{transform:scaleX(1)}
.anda-trilho i{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:4px solid #2a2a2e;background:var(--noite);transition:border-color .4s .5s,background .4s .5s}
.anda-trilho i:nth-of-type(2){left:50%}
.anda-trilho i:nth-of-type(3){left:100%}
.anda-trilho i:nth-of-type(1),
.anda:not([data-passo="1"]) .anda-trilho i:nth-of-type(2),
.anda[data-passo="3"] .anda-trilho i:nth-of-type(3),
.anda[data-passo="4"] .anda-trilho i:nth-of-type(3){border-color:var(--brasa);background:var(--brasa)}
.anda-via{position:absolute;inset:0;transition:transform .9s var(--ease-io)}
.anda[data-frente="loja"] .anda-via{transform:translateX(50%)}
.anda[data-frente="entregador"] .anda-via{transform:translateX(100%)}
.anda-ficha{position:absolute;left:0;top:50%;display:grid;place-items:center;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--brasa);color:#fff;box-shadow:0 0 0 5px rgba(225,6,0,.22),0 10px 24px -8px rgba(225,6,0,.8)}
.anda-ficha .ico{width:20px;height:20px}
.anda-passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px clamp(16px,2.4vw,32px)}
.anda-passos li{position:relative;display:grid;align-content:start;gap:4px;padding-top:16px;color:var(--nevoa);transition:opacity .5s var(--ease)}
.anda-passos li > i,.anda-barras i{position:relative;display:block;height:4px;overflow:hidden;border-radius:4px;background:rgba(255,255,255,.1)}
.anda-passos li > i{position:absolute;left:0;top:0;width:100%}
.anda-passos li > i::after,.anda-barras i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--brasa);transform-origin:left}
.anda-passos b{color:var(--giz);font:500 1.12rem/1.25 var(--f-display);letter-spacing:-.012em}
.anda-passos span{font-size:.95rem}
/* com a motion andando: a legenda do passo acende e o fio dela enche no tempo do passo (as durações são as somas de TELAS.pedido) */
.anda.andando .anda-passos li{opacity:.75}
.anda.andando .anda-passos li > i::after,.anda.andando .anda-barras i::after{transform:scaleX(0)}
.anda.andando[data-passo="1"] .anda-passos li:nth-child(1),
.anda.andando[data-passo="2"] .anda-passos li:nth-child(2),
.anda.andando[data-passo="3"] .anda-passos li:nth-child(3),
.anda.andando[data-passo="4"] .anda-passos li:nth-child(4){opacity:1}
.anda.andando[data-passo="2"] li:nth-child(1) > i::after,.anda.andando[data-passo="2"] .anda-barras i:nth-child(1)::after,
.anda.andando[data-passo="3"] li:nth-child(-n+2) > i::after,.anda.andando[data-passo="3"] .anda-barras i:nth-child(-n+2)::after,
.anda.andando[data-passo="4"] li:nth-child(-n+3) > i::after,.anda.andando[data-passo="4"] .anda-barras i:nth-child(-n+3)::after{transform:scaleX(1)}
.anda.andando[data-passo="1"] li:nth-child(1) > i::after,.anda.andando[data-passo="1"] .anda-barras i:nth-child(1)::after{animation:tour-prog 4.45s linear forwards}
.anda.andando[data-passo="2"] li:nth-child(2) > i::after,.anda.andando[data-passo="2"] .anda-barras i:nth-child(2)::after{animation:tour-prog 3s linear forwards}
.anda.andando[data-passo="3"] li:nth-child(3) > i::after,.anda.andando[data-passo="3"] .anda-barras i:nth-child(3)::after{animation:tour-prog 4.5s linear forwards}
.anda.andando[data-passo="4"] li:nth-child(4) > i::after,.anda.andando[data-passo="4"] .anda-barras i:nth-child(4)::after{animation:tour-prog 3.4s linear forwards}
/* pausada pelo botão: tudo fica onde está, inclusive o fio da legenda (o !important vence o atalho animation das regras de cima, mais específicas) */
.anda.pausada .anda-passos li > i::after,.anda.pausada .anda-barras i::after{animation-play-state:paused!important}
.anda-botao{justify-self:end;display:inline-flex;align-items:center;min-width:44px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--nevoa);font:500 .92rem/1 var(--f-texto);text-decoration:underline;text-decoration-color:var(--brasa);text-decoration-thickness:2px;text-underline-offset:.3em;cursor:pointer;transition:color var(--t-ui)}
.anda-botao:hover{color:var(--giz)}

/* cartões parados: uma coisa que o dono para de fazer na mão, com a tela real que faz aquilo */
.pares-titulo{margin-top:clamp(48px,8vh,88px);font:500 clamp(1.5rem,1.1rem + 1.3vw,2.3rem)/1.12 var(--f-display);letter-spacing:-.025em}
.pares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(20px,3.2vh,32px)}
.par{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:28px;border:1px solid var(--linha);background:linear-gradient(180deg,#151518,#0F0F11)}
.par-telas{display:flex;align-items:flex-start;justify-content:center;gap:clamp(12px,1.8vw,24px);height:clamp(250px,25vw,340px);padding:clamp(20px,2.4vw,32px) clamp(18px,2.4vw,32px) 0;overflow:hidden;border-bottom:1px solid var(--linha);background:radial-gradient(70% 70% at 50% 100%,rgba(225,6,0,.14),transparent 72%)}
.par-telas .par-cel{flex:none;width:clamp(140px,14.5vw,196px)}
.par-janela{flex:1 1 0;align-self:flex-end;min-width:0;overflow:hidden;border-radius:12px 12px 0 0;border:1px solid var(--linha-2);border-bottom:0;background:#0F0F11;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.par-janela img{display:block;width:100%;height:auto}
.par-txt{display:grid;align-content:start;gap:8px;padding:clamp(20px,2.4vw,30px)}
.par p{color:var(--nevoa)}
.par .par-hoje{color:var(--cinza)}
.par p b{color:var(--giz)}
.par .par-leg{margin-top:6px;color:var(--cinza);font-size:.86rem}
.so-cel{display:none}
.produto-fim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px clamp(24px,4vw,64px);margin-top:clamp(28px,5vh,48px)}
.produto-txt{display:grid;gap:8px;max-width:62ch}
.produto-fecho{color:var(--nevoa)}
.produto-nota{color:var(--cinza);font-size:.9rem}
.produto-acoes{display:flex;flex-wrap:wrap;gap:12px}
.sm-lista h3,.linha h3,.par h4{text-wrap:balance}
.par h4{margin-bottom:4px;font:500 clamp(1.3rem,1rem + .8vw,1.7rem)/1.15 var(--f-display);letter-spacing:-.02em}
/* cartão largo da atendente do WhatsApp: o texto e a faixa da tela real de um lado, a conversa do outro */
.par-zap{grid-column:1 / -1;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,25rem)}
.par-zap .par-txt{align-content:center;padding:clamp(24px,3vw,44px)}
.par-zap-cena{display:grid;align-content:center;padding:clamp(18px,2.4vw,30px);border-left:1px solid var(--linha);background:radial-gradient(80% 60% at 50% 100%,rgba(225,6,0,.14),transparent 72%)}
.zap{overflow:hidden;border-radius:26px;border:1px solid var(--linha-2);background:linear-gradient(180deg,#19191C,#111113);box-shadow:0 60px 110px -50px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6)}
.zap-cab{display:grid;gap:1px;padding:14px 18px;border-bottom:1px solid var(--linha);background:rgba(255,255,255,.02)}
.zap-cab b{font-weight:600;line-height:1.25}
.zap-cab span{color:var(--nevoa);font-size:.84rem}
.zap-msgs{display:grid;gap:9px;padding:16px}
.zap-msgs li{max-width:90%;padding:9px 12px;border-radius:14px;font-size:.92rem;line-height:1.42}
.zap-cli{justify-self:end;border:1px solid var(--linha-2);border-bottom-right-radius:4px;background:rgba(255,255,255,.06)}
.zap-at{justify-self:start;border:1px solid rgba(255,59,48,.45);border-bottom-left-radius:4px;background:rgba(225,6,0,.1)}
.zap-at small{display:block;margin-bottom:2px;color:var(--brasa-viva);font-size:.76rem;font-weight:600}
.js .zap-msgs li{opacity:0;transform:translateY(8px)}
.rodando .zap-msgs li{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(.5s + var(--i) * 1.05s),transform .5s var(--ease) calc(.5s + var(--i) * 1.05s)}
.zap-msgs .zap-nota{justify-self:center;max-width:none;padding:0;color:var(--cinza);font-size:.82rem;font-style:italic}
.janela-real{position:relative;overflow:hidden;border-radius:clamp(12px,1.5vw,20px);border:1px solid var(--linha-2);background:#0F0F11;box-shadow:0 60px 120px -60px rgba(0,0,0,.95)}
.janela-real img{display:block;width:100%;height:auto}
.par-zap .janela-real{max-width:33rem;margin-top:12px;box-shadow:none}
.par-zap .janela-real img{width:215%;max-width:none}

/* ============ SOB MEDIDA + IA ============ */
.sob-medida{padding:clamp(24px,4vh,60px) 0}
.laje{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,56px);padding:clamp(24px,5vw,72px);overflow:hidden;border-radius:clamp(28px,4vw,48px);border:1px solid var(--linha);background:linear-gradient(180deg,#141417,#0F0F11)}
.laje::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 45% at 88% 0%,rgba(225,6,0,.12),transparent 70%)}
.laje > *{position:relative}
.sm-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4.4vh,46px) clamp(28px,5vw,80px)}
.sm-lista li{position:relative;display:grid;align-content:start;gap:8px;padding-top:20px}
.sm-lista li::before{content:"";position:absolute;left:0;top:0;width:34px;height:4px;border-radius:4px;background:var(--brasa)}
.sm-lista h3{font:500 1.45rem/1.15 var(--f-display);letter-spacing:-.02em}
.sm-lista p{max-width:52ch;color:var(--nevoa)}
.sm-fim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px clamp(24px,4vw,56px);padding-top:clamp(24px,4vh,36px);border-top:1px solid var(--linha)}
.sm-quem{display:inline-flex;align-items:center;gap:14px;min-height:46px;color:var(--nevoa);font-weight:500;transition:color var(--t-ui)}
.sm-quem:hover{color:var(--giz)}
.sm-logos{display:flex;flex:none}
.sm-logos img{width:46px;height:46px;border-radius:13px;border:1px solid var(--linha-2);background:#0B0B0C;object-fit:cover}
.sm-logos img + img{margin-left:-10px}
.sm-logos .selo{padding:2px;object-fit:contain}
.sm-quem .ico{display:inline-block;margin-left:.45em;vertical-align:-.22em}

/* ============ CASES ============ */
.cases{padding:clamp(24px,4vh,60px) 0 clamp(80px,12vh,140px)}
.cases-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(32px,5vh,56px)}
.case{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.4vw,32px);overflow:hidden;border-radius:28px;border:1px solid var(--linha);background:linear-gradient(180deg,#151518,#0F0F11);transition:border-color .4s,translate .5s var(--ease)}
.case:hover{border-color:rgba(255,255,255,.16);translate:0 -4px}
.case-seg{order:2;font-size:.92rem;color:var(--nevoa)}
.case-nome{font:500 clamp(1.45rem,1rem + 1vw,1.95rem)/1.05 var(--f-display);letter-spacing:-.03em}
.case-txt{color:var(--nevoa)}
.case-topo{display:flex;align-items:center;gap:14px}
.case-logo{display:grid;place-items:center;flex:none;width:68px;height:68px;overflow:hidden;border-radius:18px;border:1px solid var(--linha-2);background:linear-gradient(145deg,#26262B,#141417);color:var(--nevoa);font:600 .88rem/1 var(--f-display);letter-spacing:.02em}
.case-logo img{width:100%;height:100%;object-fit:cover}
.case-logo-selo{padding:3px;background:#0B0B0C}
.case-logo-selo img{object-fit:contain}
.case-id{display:grid;gap:5px;min-width:0}
.case-voz{display:grid;gap:12px}
.estrelas{display:flex;gap:3px;color:var(--brasa-viva)}
.estrelas svg{width:15px;height:15px}
.case-voz blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--giz)}
.case-voz mark{background:none;color:var(--brasa-viva);font-weight:600}
.case-voz figcaption{display:grid;gap:2px;font-size:.875rem}
.case-voz figcaption span{color:var(--cinza)}
.case .chips{margin-top:auto}
.cases-google{margin-top:24px}
.cases-google a,.seta-link{display:inline-flex;align-items:center;gap:.5em;color:var(--nevoa);font-size:.95rem;font-weight:500;transition:color var(--t-ui)}
.cases-google a:hover,.seta-link:hover{color:var(--giz)}
.cases-google a{min-height:44px}
.case-traco{position:absolute;left:clamp(22px,2.4vw,32px);right:clamp(22px,2.4vw,32px);bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--brasa);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.case:hover .case-traco{transform:scaleX(1)}

/* ============ QUEM É A GENTE: o lugar, as quatro coisas de que a gente não abre mão, o portal e a história ============ */
.nossa{padding:clamp(80px,13vh,150px) 0;border-top:1px solid var(--linha)}
.nossa-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(32px,6vw,96px)}
.nossa-cab{position:sticky;top:calc(var(--topo-h) + 40px);display:grid;justify-items:start;gap:18px}
.nossa-lista{min-width:0}
.rio{width:100%;max-width:420px;margin-top:10px;overflow:visible}
.rio-agua{fill:none;stroke:rgba(255,255,255,.13);stroke-width:14;stroke-linecap:round}
.rio-pino circle{fill:var(--brasa)}
.rio-pino .onda{fill:none;stroke:var(--brasa);stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0;animation:onda 2.6s ease-out 4}
.fora .onda{animation-play-state:paused}
@keyframes onda{from{opacity:.7;transform:scale(.45)}to{opacity:0;transform:scale(1.35)}}
.rio-nome{fill:var(--giz);font:500 15px var(--f-display);letter-spacing:-.01em;text-anchor:middle}
.linha{position:relative;display:grid;padding-left:48px}
.linha::before,.linha::after{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:4px;border-radius:4px}
.linha::before{background:rgba(255,255,255,.08)}
.linha::after{background:var(--brasa);transform:scaleY(var(--prog,0));transform-origin:top}
.linha li{position:relative;display:grid;gap:8px;padding-bottom:clamp(40px,7vh,72px)}
.linha li:last-child{padding-bottom:0}
.linha li::before{content:"";position:absolute;left:-48px;top:3px;z-index:1;width:22px;height:22px;border-radius:50%;border:4px solid #2a2a2e;background:var(--noite);transition:border-color .4s,background .4s}
.linha li.passou::before{border-color:var(--brasa);background:var(--brasa)}
.linha h3{font:500 clamp(1.55rem,1.1rem + 1.1vw,2.15rem)/1.1 var(--f-display);letter-spacing:-.025em}
.linha li > p:last-child{max-width:46ch;font-size:1.05rem;color:var(--nevoa)}
.js .rv.in .rio-agua{animation:desenha 1.6s var(--ease-io) .3s forwards}
.linha li > p em{font-style:normal;color:var(--giz)}
/* o portal do cliente é a prova do item 04: fica logo abaixo da lista, alinhado com o texto dela */
.portal-tela{margin:clamp(26px,4vh,40px) 0 0 48px}
.nossa-nota{margin:12px 0 0 48px;color:var(--cinza);font-size:.88rem}
.janela{overflow:hidden;border-radius:24px;border:1px solid var(--linha-2);background:linear-gradient(180deg,#18181B,#121214);box-shadow:0 60px 120px -60px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.5);font-size:clamp(.8rem,.72rem + .28vw,.94rem)}
.pt-topo{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--linha);background:rgba(255,255,255,.02)}
.pt-simbolo{width:28px;height:23px}
.pt-cli{margin-left:auto;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--nevoa);font-size:.9em}
.pt-corpo{display:grid;gap:16px;padding:20px}
.pt-proj{color:var(--nevoa);font-size:.9em;font-weight:500}
.pt-obj{display:grid;gap:4px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,59,48,.35);background:rgba(225,6,0,.06)}
.pt-obj small{color:var(--brasa-viva);font-size:.8em;font-weight:600}
.pt-obj p{font-size:1.02em;line-height:1.45}
.pt-prog{display:grid;gap:8px}
.pt-prog-cab{display:flex;align-items:baseline;justify-content:space-between;color:var(--nevoa)}
.pt-prog-cab b{font:600 1.6em/1 var(--f-display);color:var(--giz);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pt-barra{display:flex;gap:4px;height:10px}
.pt-seg{flex:var(--peso) 1 0;overflow:hidden;border-radius:10px;background:rgba(255,255,255,.08)}
.pt-seg i{display:block;height:100%;border-radius:inherit;background:var(--brasa);transform:scaleX(var(--f));transform-origin:left}
.js .pt-seg i{transform:scaleX(0);transition:transform 1s var(--ease)}
.js .portal-tela.ativo .pt-seg i{transform:scaleX(var(--f))}
.js .portal-tela.ativo .pt-seg:nth-child(2) i{transition-delay:.8s;transition-duration:1.2s}
.pt-etapas{display:flex;gap:4px;font-size:.8em;color:var(--cinza)}
.pt-etapas span{flex:var(--peso) 1 0}
.pt-etapas .ok{color:var(--giz)}
.pt-etapas .agora{color:var(--brasa-viva);font-weight:600}
.pt-abas{display:flex;gap:6px;overflow:hidden;border-bottom:1px solid var(--linha);font-size:.88em}
.pt-abas span{display:flex;align-items:center;gap:6px;margin-bottom:-1px;padding:8px 10px;border-bottom:2px solid transparent;color:var(--nevoa);white-space:nowrap}
.pt-abas .on{border-color:var(--brasa);color:var(--giz)}
.pt-abas i{display:grid;place-items:center;min-width:1.55em;height:1.55em;border-radius:999px;background:var(--brasa);color:#fff;font-size:.78em;font-style:normal}
.pt-linha{display:grid;gap:12px}
.pt-linha li{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:12px}
.pt-linha li > i{position:relative;display:block;width:28px;height:28px;border-radius:9px;border:1px solid var(--linha-2);background:rgba(255,255,255,.06)}
.pt-linha li > i::before{content:"";position:absolute;left:50%;top:50%}
.t-feito > i::before{width:10px;height:5px;margin:-4px 0 0 -5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.t-decisao > i::before{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--giz);transform:rotate(45deg)}
.t-pend > i{border-color:rgba(255,59,48,.5)!important;background:rgba(225,6,0,.12)!important}
.pt-linha .t-pend > i::before{content:"!";color:var(--brasa-viva);font:700 14px/1 var(--f-texto);transform:translate(-50%,-52%)}
.t-recado > i::before{width:12px;height:9px;margin:-6px 0 0 -6px;border:2px solid var(--giz);border-radius:3px 3px 3px 0}
.pt-linha span{display:grid;gap:2px;line-height:1.4}
.pt-linha small{color:var(--cinza);font-size:.84em;font-weight:600}
.js .pt-linha li{opacity:0;transform:translateY(8px)}
.js .portal-tela.ativo .pt-linha li{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(1.1s + var(--i) * .18s),transform .5s var(--ease) calc(1.1s + var(--i) * .18s)}
.origem{display:grid;gap:clamp(18px,3vh,28px);margin-top:clamp(56px,9vh,104px);padding-top:clamp(32px,5vh,48px);border-top:1px solid var(--linha)}
.origem-titulo{font:500 clamp(1.3rem,1rem + .9vw,1.8rem)/1.2 var(--f-display);letter-spacing:-.02em}
.origem-marcos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(20px,3vw,48px)}
.origem-marcos li{position:relative;display:grid;align-content:start;gap:6px;padding-top:18px;color:var(--nevoa)}
.origem-marcos li::before{content:"";position:absolute;left:0;top:0;width:34px;height:4px;border-radius:4px;background:var(--brasa)}
.origem-marcos b{color:var(--brasa-viva);font:500 clamp(1.1rem,.95rem + .45vw,1.35rem)/1.15 var(--f-display);letter-spacing:-.012em}
.origem-marcos p{max-width:40ch}

/* ============ FINAL ============ */
.final{position:relative;padding:clamp(100px,16vh,180px) 0 calc(clamp(90px,14vh,160px) + env(safe-area-inset-bottom));overflow:clip;text-align:center}
.final-luz{position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 42% at 50% 34%,rgba(225,6,0,.22),transparent 72%)}
.final-in{position:relative;display:grid;justify-items:center;gap:22px}
.final-marca{width:clamp(130px,15vw,200px);height:auto;margin-bottom:14px;overflow:visible}
@keyframes vai-e-volta{0%{stroke-dashoffset:1.1;opacity:0}5%{stroke-dashoffset:1.1;opacity:1}38%{stroke-dashoffset:0}62%{stroke-dashoffset:0}95%{stroke-dashoffset:1.1;opacity:1}100%{stroke-dashoffset:1.1;opacity:0}}
.js .final.in .desenha{animation:vai-e-volta 6.4s var(--ease-io) infinite}
.final-titulo{max-width:18ch;font:500 clamp(2.4rem,1.1rem + 4.3vw,5.4rem)/.98 var(--f-display);letter-spacing:-.04em;word-spacing:.05em;text-wrap:balance}
.final-titulo span{display:block;color:var(--brasa-viva)}
.final-lead{max-width:52ch;font-size:1.1rem;color:var(--nevoa)}
.final .btn{margin-top:10px}
.final-num{color:var(--cinza);letter-spacing:.08em}
.final-assina{color:var(--nevoa);font-size:.95rem}

/* ============ MODO REVISÃO (?revisao) ============ */
.revisao [data-confirmar]{position:relative;outline:1.5px dashed #FFB020;outline-offset:6px}
/* o cartão corta o que sai dele: a etiqueta fica do lado de dentro */
.revisao .par > .tag-confirmar{top:12px;right:12px;translate:none}
.tag-confirmar{position:absolute;right:-6px;top:-14px;z-index:6;translate:0 -100%;max-width:260px;padding:4px 7px;border-radius:5px;background:#FFB020;color:#111;font:700 10px/1.25 var(--f-mono);letter-spacing:.03em;text-align:left;text-transform:uppercase;pointer-events:none}

/* ============ RESPONSIVO ============ */
/* hero da home: abaixo desta largura as três colunas de baixo do título viram duas, com o botão numa linha só dele */
@media (max-width:1179px){
  .beira-titulo{font-size:7vw}
  .beira-base{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"casa lead" "lugar lead" "acoes acoes";row-gap:8px}
  .beira-acoes{grid-auto-flow:column;justify-content:start;align-items:center;gap:12px 28px;margin-top:14px}
}

@media (max-width:1100px){
  .jornada{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
  /* a janela do palco estreita: as abas ficam só com o verbo */
  .foco-abas span{display:none}
  /* a janela do portal também estreita na coluna da direita: a terceira aba não cabe */
  .pt-abas span:last-child{display:none}
}

/* janela muito baixa: a coluna presa da "Quem é a gente" (uns 530 px, mais o topo) não cabe, então rola junto */
@media (max-height:660px){
  .nossa-cab{position:static}
}

@media (max-width:899px){
  :root{--topo-h:68px}
  .topo-in{padding:0 8px 0 14px;gap:10px}
  .topo-cta .ico{width:18px;height:18px}

  .hero{min-height:0;padding-bottom:72px}
  .hero-grid{grid-template-columns:1fr;gap:12px}
  .hero-titulo{margin:6px 0 20px;font-size:clamp(2.6rem,14.2cqw,5rem)}
  .hero-palco{width:100%;max-width:560px;margin:8px auto 0;aspect-ratio:1/1.08}
  .hero-marca-caixa{left:22%;top:0;width:56%}
  .hp-pc{left:8%;top:34%;width:84%}
  .hp-dono{left:-2%;top:44%;width:29%}
  .hp-cliente{right:-2%;top:40%;width:28%}
  .nt{font-size:2.6cqw}
  .nt-balcao{left:-2%;top:31%}
  .nt-vitrine{right:-2%;top:44%}
  .nt-rota{left:22%;bottom:0}
  .hero-rolar{display:none}

  .beira{padding-top:calc(var(--topo-h) + 24px)}
  .beira-base{grid-template-columns:minmax(0,1fr);grid-template-areas:"casa" "lead" "acoes" "lugar";gap:14px}
  .beira-acoes{grid-auto-flow:row;margin-top:2px}
  /* a folha e a janela empilham; o rio vira cotovelo: vem da borda esquerda, passa por trás da folha, desce pela marca e entra na janela */
  .foco-palco{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 84px auto}
  .foco-entra{justify-self:end;width:76%}
  .foco-fala{right:auto;left:-16%;bottom:8%}
  .foco-sai{grid-column:1;grid-row:3}
  .foco-rio{grid-column:1;grid-row:1 / 4;align-self:stretch;height:auto;margin:calc(32vw + 32px) 26px 0 calc(-1 * var(--gutter));margin:calc(32cqw + 32px) 26px 0 calc(-1 * var(--gutter));border:solid var(--brasa);border-width:var(--rio) var(--rio) 0 0;border-top-right-radius:40px;background:none}
  .foco-meio{grid-column:1;grid-row:2;justify-self:end;height:auto;margin:0 calc(26px + var(--rio) / 2 - 32px) 0 0}
  .foco-contas{display:none}
  .foco-no{width:64px}
  .foco-abas{gap:0 18px;padding:0 16px}

  .sm-lista{grid-template-columns:minmax(0,1fr)}

  .anda-palco{grid-template-columns:minmax(0,1fr);gap:26px;padding:22px 16px 26px;border-radius:28px}
  .anda-trilho{display:none}
  /* o aparelho encolhe também com a altura da tela, para a legenda do passo caber embaixo dele */
  .anda .cel{max-width:min(230px,62vw);max-width:clamp(150px,calc((100svh - 290px) * 9 / 19),min(230px,62vw))}
  .anda .cena-nome{font-size:1rem}
  /* o painel da loja entra ampliado; a largura dele é limitada para a altura (1,35 × a largura) não passar a do celular */
  .anda-janela{max-width:360px;max-width:min(360px,max(200px,calc((100svh - 290px) / 1.35)))}
  .anda-zoom{width:240%}
  .anda-passos{grid-template-columns:minmax(0,1fr)}
  /* com a motion ligada (.viva): um aparelho e uma legenda por vez, na mesma célula, para a página não pular */
  .anda.viva .anda-barras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .anda.viva .anda-palco{gap:0}
  .anda.viva .anda-ap,.anda.viva.andando .anda-ap{grid-area:1 / 1;opacity:0;transform:translateX(6%);pointer-events:none}
  .anda.viva[data-frente=""] .anda-cliente,
  .anda.viva[data-frente="cliente"] .anda-cliente,
  .anda.viva[data-frente="loja"] .anda-loja,
  .anda.viva[data-frente="entregador"] .anda-entregador{opacity:1;transform:none;pointer-events:auto}
  .anda.viva .anda-passos li,.anda.viva.andando .anda-passos li{grid-area:1 / 1;padding-top:0;opacity:0}
  .anda.viva[data-passo="1"] .anda-passos li:nth-child(1),
  .anda.viva[data-passo="2"] .anda-passos li:nth-child(2),
  .anda.viva[data-passo="3"] .anda-passos li:nth-child(3),
  .anda.viva[data-passo="4"] .anda-passos li:nth-child(4){opacity:1}
  .anda.viva .anda-passos li > i{display:none}

  .pares{grid-template-columns:minmax(0,1fr)}
  .par-telas{height:clamp(250px,72vw,340px)}
  .par-telas .par-cel{width:44%}
  .par-zap{grid-template-columns:minmax(0,1fr)}
  .par-zap-cena{border-left:0;border-top:1px solid var(--linha)}
  .so-desk{display:none}
  .so-cel{display:block}
  span.so-cel{display:inline}

  .jornada{display:flex;flex-direction:column;gap:0;margin-top:24px}
  .jornada-passos,.jornada-palco{display:contents}
  .jornada-trilho,.pedido-status{display:none}
  .passo,.passo:first-of-type{min-height:0;justify-content:flex-start;gap:12px;padding:44px 0 18px;opacity:1}
  .passo::before{display:none}
  .passo[data-cena="vitrine"]{order:1}.cena-vitrine{order:2}
  .passo[data-cena="balcao"]{order:3}.cena-balcao{order:4}
  .passo[data-cena="rota"]{order:5}.cena-rota{order:6}
  .passo[data-cena="acompanhamento"]{order:7}.cena-acomp{order:8}
  .cena{position:relative;inset:auto;padding:18px 0;opacity:1;visibility:visible;transform:none;border-radius:28px;border:1px solid var(--linha);background:radial-gradient(70% 55% at 50% 58%,rgba(225,6,0,.12),transparent 72%),linear-gradient(180deg,#141417,#0C0C0E)}
  .cel{width:min(290px,72vw)}
  .cena-acomp{height:calc(min(200px,46vw) * 19 / 9 + 56px)}
  .cena-acomp .pc{right:0;top:18px;width:min(90%,620px)}
  .cena-acomp .cel{left:3%;top:auto;bottom:14px;translate:none;width:min(200px,46vw)}
  .modulos{grid-template-columns:1fr 1fr}

  .nossa-grid,.cases-grid,.origem-marcos{grid-template-columns:minmax(0,1fr)}
  .nossa-cab{position:static}
  .portal-tela,.nossa-nota{margin-left:0}
  .case{min-height:0}
}

@media (max-width:600px){
  .topo-cta-longo{display:none}
  .btn{--h:50px;padding:.7em 1.25em;font-size:.93rem;line-height:1.2;white-space:normal;text-align:center}
  .beira-titulo{font-size:8vw}
  .beira-acoes{justify-items:stretch}
  .sm-cta,.trinity-base .btn{width:100%}
  .sm-fim{flex-direction:column;align-items:stretch}
  .produto-acoes{flex-direction:column;align-items:stretch;width:100%}
  .zap-msgs li{max-width:94%}
  .hero-acoes{flex-direction:column;align-items:stretch}
  .hero-acoes .btn{width:100%}
  .janela{font-size:.8rem}
  .modulos{grid-template-columns:1fr}
  .tour-abas{gap:0 20px}
  .pt-abas span:last-child{display:none}
  .btn-g{--h:56px;padding:0 1.6em}
}

/* topo em tela estreita: para caber logo, link e WhatsApp, o botão vira só o ícone */
@media (max-width:480px){
  .topo-nav{font-size:.9rem}
  .topo-nav + .topo-cta{--h:44px;flex:none;width:44px;padding:0;border-radius:50%}
  .topo-nav + .topo-cta > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .topo-nav + .topo-cta .ico{width:20px;height:20px}
}
@media (max-width:340px){
  .pt-cli{display:none}
  .marca-simbolo{width:32px;height:26px}
  .marca-letreiro{height:12px}
}

/* ============ MOVIMENTO REDUZIDO ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .rv,.js .entra,.js .hero-palco,.js .hp-cel,.js .nt{opacity:1;translate:none;scale:1}
  .js .zap-msgs li{opacity:1;transform:none}
  .js .rv{transform:none}
  .js .ht-p,.js .bt-s{transform:none}
  .js .bt-g::after{transform:none}
  .js .foco .foco-rio{clip-path:none}
  .js .foco .ia-papel{opacity:1;transform:rotate(-2.2deg)}
  .js .foco .foco-janela,.js .foco .foco-no{opacity:1;transform:none}
  .ia-scan,.foco-contas{display:none}
  .hero-rolar i::after{display:none}
  .js .final .desenha{animation:none!important;stroke-dashoffset:0;opacity:1}
}