/* ════════════════════════════════════════════════════════════════════════
   OLIVER LABS · folha de estilo
   ────────────────────────────────────────────────────────────────────────
   ESCRITA PARA O CELULAR PRIMEIRO. As regras de base são as do telefone;
   as telas grandes entram depois, em `@media (min-width: …)`. Quase todo
   mundo chega aqui pelo link da bio do Instagram, com uma mão só.

   As cores saem do logotipo: o navy do anel, o ciano e o violeta do rabo.
   Nada aqui foi escolhido de fora da marca.

   Ordem do arquivo
     1 · Fichas (tokens)        6 · Garantias        11 · Dúvidas
     2 · Base e tipografia      7 · Tipos de negócio 12 · Símbolo 3D + CTA
     3 · Peças reutilizáveis    8 · Trabalhos        13 · Rodapé e flutuante
     4 · Marca e topo           9 · Ficha técnica    14 · A entrada
     5 · Abertura e celular    10 · O combinado      15 · Telas grandes
   ════════════════════════════════════════════════════════════════════════ */


/* ═══ 1 · FICHAS ════════════════════════════════════════════════════════ */

:root{
  /* ── camada 1 · as cores da marca ─────────────────────────────────── */
  --c-abismo:#081729;   --c-noite:#0B1F3A;   --c-mar:#122E4F;  --c-baia:#1B3B63;
  --c-gelo:#EAF2FB;     --c-neblina:#9DB4D0; --c-fumo:#6C86A6;
  --c-ciano:#22D3EE;    --c-ceu:#38BDF8;     --c-azul:#3B82F6; --c-violeta:#7C3AED;
  --c-zap:#25D366;

  --f-titulo:'Montserrat',system-ui,sans-serif;
  --f-corpo:'Figtree',system-ui,-apple-system,sans-serif;

  /* ── camada 2 · significado ───────────────────────────────────────── */
  --fundo:var(--c-abismo);
  --fundo-alto:var(--c-noite);
  --texto:var(--c-gelo);
  --texto-fraco:var(--c-neblina);
  --texto-apagado:var(--c-fumo);
  --linha:rgba(34,211,238,.14);
  --linha-forte:rgba(34,211,238,.34);
  --acento:var(--c-ciano);

  /* o degradê do rabo do símbolo, na ordem dele */
  --grad-marca:linear-gradient(135deg,var(--c-ciano) 0%,var(--c-azul) 52%,var(--c-violeta) 100%);
  /* o do botão para de subir antes do violeta: texto escuro em cima de
     violeta reprova em contraste, e botão que não se lê não converte */
  --grad-cta:linear-gradient(135deg,var(--c-ciano) 0%,var(--c-ceu) 45%,#4F9CFF 100%);
  /* o de texto começa no gelo e evita o violeta puro pelo mesmo motivo */
  --grad-texto:linear-gradient(115deg,var(--c-gelo) 0%,#7DD3FC 34%,var(--c-ciano) 62%,#818CF8 100%);
  --grad-tenue:linear-gradient(135deg,rgba(34,211,238,.13),rgba(124,58,237,.1));

  /* ── camada 3 · componentes ───────────────────────────────────────── */
  --btn-r:999px;
  --cartao-r:20px;
  --sombra-alta:0 28px 70px -28px rgba(2,8,20,.95);
  --sombra-marca:0 16px 44px -16px rgba(34,211,238,.42);

  --e1:.5rem; --e2:.875rem; --e3:1.25rem; --e4:1.9rem; --e5:2.75rem;
  --e6:clamp(3rem,8vw,5.5rem); --e7:clamp(4rem,12vw,8rem);
  --largura:1180px;
  --curva:cubic-bezier(.22,1,.36,1);
  --curva-tensa:cubic-bezier(.16,1.02,.3,1);
}


/* ═══ 2 · BASE E TIPOGRAFIA ════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:78px}

body{
  font-family:var(--f-corpo);
  font-size:1.03rem;
  line-height:1.62;
  color:var(--texto-fraco);
  background:var(--fundo);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.travado{overflow:hidden}

img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
ul,ol{list-style:none}

::selection{background:var(--c-ciano);color:var(--c-abismo)}
:focus-visible{outline:2px solid var(--c-ciano);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{
  font-family:var(--f-titulo);
  color:var(--texto);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.032em;
  text-wrap:balance;
}
h1{font-size:clamp(2.3rem,8.6vw,4.2rem);line-height:1.02}
h2{font-size:clamp(1.85rem,6.6vw,3rem)}
h3{font-size:clamp(1.25rem,4.3vw,1.65rem);line-height:1.16}

.tinta{
  background:var(--grad-texto);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}


/* ═══ 3 · PEÇAS REUTILIZÁVEIS ═════════════════════════════════════════ */

.wrap{width:min(100% - 2.2rem,var(--largura));margin-inline:auto}

.pular{
  position:fixed;left:1rem;top:-100px;z-index:300;
  background:var(--c-ciano);color:var(--c-abismo);padding:.7rem 1.1rem;
  border-radius:10px;font-weight:700;transition:top .2s;
}
.pular:focus{top:1rem}
.oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.rotulo{
  display:flex;align-items:center;gap:.6rem;
  font-size:.76rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-ciano);
  margin-bottom:var(--e2);
}
.rotulo::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--grad-marca);flex:none}

.secao{padding-block:var(--e7);position:relative}
.secao__topo{margin-bottom:var(--e5)}
.secao__lado{max-width:46ch;margin-top:var(--e3)}

/* ── botões ───────────────────────────────────────────────────────── */
.btn{
  --luzX:50%;--luzY:50%;
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.5rem;border-radius:var(--btn-r);
  font-family:var(--f-titulo);font-weight:700;font-size:.98rem;letter-spacing:-.012em;
  transition:transform .35s var(--curva-tensa),box-shadow .35s var(--curva),
             border-color .3s,background .3s;
}
.btn .ico{width:19px;height:19px;fill:currentColor;flex:none}
.btn:active{transform:scale(.98)}

.btn--marca{background:var(--grad-cta);color:#06121F;box-shadow:var(--sombra-marca)}
.btn--marca::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(170px circle at var(--luzX) var(--luzY),rgba(255,255,255,.55),transparent 62%);
  opacity:0;transition:opacity .3s;
}
.btn--fantasma{border:1px solid var(--linha-forte);color:var(--texto);background:rgba(234,242,251,.03)}
.btn--g{padding:1.1rem 1.7rem}
.btn--p{padding:.6rem 1rem;font-size:.88rem}

/* ── revelação no scroll ─────────────────────────────────────────── */
.rev{transition:opacity .8s var(--curva),transform .8s var(--curva)}
.js .rev{opacity:0;transform:translateY(22px)}
.rev.pronto{opacity:1;transform:none}
.rev:nth-child(2){transition-delay:.06s}
.rev:nth-child(3){transition-delay:.12s}
.rev:nth-child(4){transition-delay:.18s}

.entra{
  transition:opacity .8s var(--curva) var(--atraso,0s),
             transform .8s var(--curva) var(--atraso,0s);
}
.js .entra{opacity:0;transform:translateY(16px)}
.carregado .entra{opacity:1;transform:none}

/* ── fundo ────────────────────────────────────────────────────────
   Duas luzes de marca subindo dos cantos, mais grão. Ambiente, não
   interface — e nada de canvas rodando à toa.                      */
.fundo{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.fundo__luz{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.fundo__luz--a{
  width:78vmax;height:78vmax;top:-36vmax;left:-24vmax;
  background:radial-gradient(circle,rgba(34,211,238,.2),transparent 66%);
  animation:bailar 26s ease-in-out infinite;
}
.fundo__luz--b{
  width:64vmax;height:64vmax;bottom:-30vmax;right:-26vmax;
  background:radial-gradient(circle,rgba(124,58,237,.22),transparent 66%);
  animation:bailar 34s ease-in-out infinite reverse;
}
@keyframes bailar{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6vw,4vh,0) scale(1.12)}
  66%{transform:translate3d(-4vw,7vh,0) scale(.94)}
}
.fundo__grao{
  position:absolute;inset:0;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ═══ 4 · MARCA E TOPO ════════════════════════════════════════════════
   O símbolo é o do manual: anel e um rabo que sai dele em degradê. No
   escuro o anel vira gelo — é a versão de fundo escuro da marca, não uma
   invenção minha.                                                      */

.marca{display:flex;align-items:center;gap:.5rem;flex:none}
/* a marca nova é quase quadrada (1,08:1), então mede-se pela altura */
.marca__sinal{width:34px;flex:none;transition:transform .6s var(--curva)}

/* ── a marca se desenha ────────────────────────────────────────────
   Os tempos e a curva são os do arquivo de animação dele: o arco corre
   em 1,32s, o L entra 1,14s depois e leva 0,92s, os dois em
   `cubic-bezier(.65,0,.35,1)`. Quem dispara é o JS (seção 12), porque
   `animation` precisa ser reiniciada para repetir no ponteiro — coisa
   que uma transição não faz.

   O que eu NÃO trouxe do arquivo dele foi o laço infinito de 4 em 4
   segundos. Num estúdio, olhando só o logo, ele é ótimo. Preso no
   canto de uma página que a pessoa vai ler por um minuto, vira um
   movimento puxando o olho a cada quatro segundos — e o trabalho desta
   página é a pessoa ler e chamar no WhatsApp, não olhar o logo. Aqui
   ele desenha uma vez e repete quando a pessoa passa o mouse ou toca.
   Para voltar ao laço, é uma linha na seção 12 do main.js.        */
@keyframes tracar{to{stroke-dashoffset:0}}
.topo .marca__sinal path{stroke-dasharray:1;stroke-dashoffset:0}
.js .topo .marca__sinal path{stroke-dashoffset:1}
.marca__nome{
  font-family:var(--f-titulo);font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--texto);line-height:1;
  text-transform:uppercase;white-space:nowrap;
}
.marca__nome i{
  font-style:normal;font-weight:400;letter-spacing:.2em;
  margin-left:.34em;color:var(--texto-fraco);
}

.topo{
  position:fixed;top:0;left:0;right:0;z-index:90;
  border-bottom:1px solid transparent;
  transition:background .35s,backdrop-filter .35s,border-color .35s;
}
.topo.encostado{
  background:rgba(8,23,41,.82);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--linha);
}
.topo__in{display:flex;align-items:center;gap:var(--e2);height:66px}

.topo__nav{
  position:fixed;inset:66px 0 auto;
  display:flex;flex-direction:column;align-items:stretch;
  padding:var(--e2) 1.1rem var(--e4);
  background:rgba(8,23,41,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--linha);
  transform:translateY(-118%);transition:transform .42s var(--curva);
}
.topo__nav.aberto{transform:none}
/* o :not(.btn) importa: sem ele este seletor vence `.btn--marca` e
   repinta o texto do botão do menu com a cor de link */
.topo__nav a:not(.btn){padding:.9rem 0;border-bottom:1px solid var(--linha);font-size:1.05rem;font-weight:600}
.topo__navcta{margin-top:var(--e3)}

.hamburguer{width:44px;height:44px;position:relative;flex:none;margin-left:auto}
.hamburguer span{
  position:absolute;left:12px;width:20px;height:2px;border-radius:2px;
  background:var(--texto);transition:transform .35s var(--curva),opacity .2s;
}
.hamburguer span:nth-child(1){top:16px}
.hamburguer span:nth-child(2){top:21px}
.hamburguer span:nth-child(3){top:26px}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.topo__barra{height:2px;width:0;background:var(--grad-marca);transition:width .1s linear}


/* ═══ 5 · ABERTURA E O CELULAR ════════════════════════════════════════ */

.abertura{padding:calc(66px + var(--e3)) 0 var(--e6)}

/* O aparelho é o eixo da frase. A manchete quebra em volta dele — a
   primeira metade em cima, a segunda embaixo — e por isso o topo
   deixou de ser "texto de um lado, imagem do outro". Um botão só.  */
.eixo{
  display:grid;justify-items:center;text-align:center;
  gap:var(--e2);
}
/* `display:contents` faz as duas metades do título virarem itens desta
   grade, para o aparelho poder ficar no meio delas. O elemento continua
   sendo <h1> para leitor de tela e para o Google: só a caixa dele
   deixa de existir. */
.eixo__titulo{display:contents}
.eixo__titulo .pal{
  font-family:var(--f-titulo);font-weight:800;
  font-size:clamp(1.75rem,7.4vw,3.3rem);
  line-height:1.02;letter-spacing:-.035em;
  color:var(--texto);
}
.eixo__titulo .pal:nth-of-type(1){order:1}
.demo{order:2}
.eixo__titulo .pal:nth-of-type(2){order:3}
.trio{order:4}
.eixo__acao{order:5}
.eixo__apoio{order:6}
.eixo__local{order:7}

/* Os três momentos do caminho do cliente. Antes era uma linha de texto
   miúdo; virou três colunas com ícone, título e explicação — e o ícone é
   a própria tela que está passando no aparelho (a grade do perfil, a
   janela do site, o balão da conversa).

   A linha atrás preenche conforme avança, e o passo da vez acende e
   sobe. Assim a pessoa entende o que está vendo mesmo sem olhar para o
   celular — que era o pedido.                                        */
.trio{
  position:relative;width:100%;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 .5rem;
}
/* o trilho e o preenchimento passam atrás dos ícones */
.trio::before,.trio::after{
  content:'';position:absolute;top:19px;height:2px;border-radius:2px;
  left:16.6%;right:16.6%;
}
.trio::before{background:var(--linha)}
.trio::after{
  right:auto;width:calc((66.8% ) * var(--avanco,0));
  background:var(--grad-marca);
  box-shadow:0 0 10px rgba(34,211,238,.55);
  transition:width .7s var(--curva);
}

.trio li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.3rem;position:relative;z-index:1;
  transition:transform .45s var(--curva);
}
.trio__ico{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--c-noite);
  border:1px solid var(--linha-forte);
  transition:background .45s var(--curva),border-color .45s,box-shadow .45s,transform .45s var(--curva);
}
.trio__ico svg{width:17px;height:17px;fill:var(--texto-apagado);transition:fill .45s}
.trio b{
  font-family:var(--f-titulo);font-weight:800;font-size:.82rem;
  letter-spacing:-.01em;color:var(--texto-fraco);
  margin-top:.15rem;transition:color .45s;
}
.trio__diz{
  font-size:.72rem;line-height:1.35;color:var(--texto-apagado);
  max-width:15ch;transition:color .45s;
}

/* o passo da vez */
.trio li.on{transform:translateY(-3px)}
.trio li.on .trio__ico{
  background:var(--grad-cta);border-color:transparent;
  box-shadow:0 0 0 5px rgba(34,211,238,.12),0 8px 22px -8px rgba(34,211,238,.7);
  transform:scale(1.1);
}
.trio li.on .trio__ico svg{fill:#06121F}
.trio li.on b{color:var(--texto)}
.trio li.on .trio__diz{color:var(--texto-fraco)}

.eixo__acao{width:100%;max-width:22rem}
.eixo__apoio{max-width:40ch;font-size:.95rem}
.eixo__local{
  display:flex;align-items:center;gap:.45rem;
  font-size:.82rem;color:var(--texto-apagado);
}
.eixo__local i{
  width:6px;height:6px;border-radius:50%;background:var(--c-zap);
  box-shadow:0 0 0 3px rgba(37,211,102,.16);flex:none;
}

.pal{display:inline-block}
.js .pal{opacity:0;transform:translateY(.3em)}
.pal{transition:opacity .6s ease var(--d,0s),transform .75s var(--curva) var(--d,0s)}
.carregado .pal{opacity:1;transform:none}

/* ── o aparelho ─────────────────────────────────────────────────── */
.demo{display:flex;justify-content:center}
.demo__palco{width:100%;display:flex;justify-content:center;perspective:1400px;perspective-origin:50% 42%}

.aparelho{
  position:relative;width:min(232px,57vw);aspect-ratio:284/583;flex:none;
  border-radius:42px;padding:9px;
  background:linear-gradient(155deg,#24405F 0%,#08111D 46%,#16283F 100%);
  box-shadow:0 0 0 1px rgba(34,211,238,.24),
             0 46px 90px -34px rgba(0,0,0,.95),
             0 0 90px -30px rgba(34,211,238,.42);
  transform-style:preserve-3d;
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
}
.aparelho.girando{will-change:transform}
.aparelho::before{
  content:'';position:absolute;inset:0;border-radius:42px;
  background:linear-gradient(155deg,#1B3252,#070E18 72%);
  box-shadow:0 0 0 1px rgba(34,211,238,.18);
  transform:translateZ(-26px);
}
.aparelho__vidro{
  position:absolute;inset:9px;border-radius:34px;pointer-events:none;z-index:6;
  transform:translateZ(1px);opacity:var(--glo,.06);
  background:linear-gradient(var(--gla,118deg),transparent 43%,rgba(205,235,255,.18) 48%,transparent 54%);
}
.aparelho__ilha{
  position:absolute;top:15px;left:50%;translate:-50% 0;z-index:7;
  width:74px;height:20px;background:#04080E;border-radius:99px;transform:translateZ(2px);
}
.aparelho__tela{
  position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;
  background:#000;transform:translateZ(0);text-align:left;
}

.cena{
  position:absolute;inset:0;opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .55s var(--curva);pointer-events:none;
}
.demo.p1 .cena--perfil,
.demo.p2 .cena--site,
.demo.p3 .cena--zap{opacity:1;transform:none}

/* cena 1 · o perfil, na linguagem visual do Instagram no escuro */
.cena--perfil{padding:34px 13px 0;background:#000;color:#F5F5F5;overflow:hidden}
.ig__barra{display:flex;align-items:center;padding:4px 0 10px}
.ig__barra b{font-size:.76rem;font-weight:600}
.ig__pontos{margin-left:auto;display:flex;flex-direction:column;gap:2.5px}
.ig__pontos i{width:13px;height:1.5px;background:#F5F5F5;border-radius:2px}
.ig__topo{display:flex;align-items:center;gap:15px;padding:2px 0 10px}
.ig__ava{
  width:56px;height:56px;border-radius:50%;flex:none;position:relative;
  background:linear-gradient(45deg,#F09433,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888);
  padding:2.4px;
}
.ig__ava::after{
  content:'';position:absolute;inset:2.4px;border-radius:50%;
  background:linear-gradient(150deg,#2E4763,#141F2C);border:2px solid #000;
}
.ig__nums{display:flex;flex:1;justify-content:space-around}
.ig__nums span{font-size:.52rem;color:#A8A8A8;display:flex;flex-direction:column;align-items:center;line-height:1.35}
.ig__nums b{font-size:.76rem;color:#F5F5F5;font-weight:600}
.ig__nome{font-size:.7rem;font-weight:600}
.ig__cat{font-size:.62rem;color:#A8A8A8;margin-top:1px}
.ig__bio{font-size:.62rem;line-height:1.5;margin-top:4px}
.ig__link{
  position:relative;display:inline-block;margin-top:5px;
  font-size:.63rem;font-weight:600;color:#E0F1FF;transition:opacity .2s;
}
.demo.toque .ig__link{opacity:.5}
.ig__botoes{display:flex;gap:5px;margin-top:11px}
.ig__botoes span{
  flex:1;text-align:center;font-size:.62rem;font-weight:600;
  background:#262626;border-radius:8px;padding:.36rem 0;
}
.ig__botoes span:first-child{background:#0095F6;color:#fff}
.ig__abas{display:flex;margin-top:12px;border-top:1px solid #262626}
.ig__abas i{flex:1;height:26px;display:grid;place-items:center;opacity:.45}
.ig__abas i.on{opacity:1;box-shadow:inset 0 2px 0 #F5F5F5}
.ig__abas svg{width:13px;height:13px;fill:#F5F5F5}
.ig__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:2px}
.ig__grade i{aspect-ratio:1;background:linear-gradient(150deg,#243547,#131B24)}
.ig__grade i:nth-child(2){background:linear-gradient(140deg,#2A3C4E,#161D26)}
.ig__grade i:nth-child(3){background:linear-gradient(160deg,#22303F,#141A21)}
.ig__grade i:nth-child(5){background:linear-gradient(150deg,#293A4C,#151C25)}
.ig__grade i:nth-child(7){background:linear-gradient(130deg,#25333F,#161C22)}
.ig__grade i:nth-child(9){background:linear-gradient(150deg,#2B3B4B,#171E26)}
.toque__eco{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:46px;height:46px;border-radius:50%;
  border:2px solid var(--c-ciano);opacity:0;
}
.demo.toque .toque__eco{animation:tocar .7s ease forwards}
@keyframes tocar{0%{opacity:0;transform:scale(.3)}35%{opacity:1}100%{opacity:0;transform:scale(1.7)}}

/* cena 2 · o site abrindo e rolando sozinho */
.cena--site{background:var(--c-abismo);overflow:hidden}
.cena--site img{width:100%;height:auto}
.demo.p2 .cena--site img{animation:rolarsite 3.3s .45s cubic-bezier(.45,0,.5,1) forwards}
@keyframes rolarsite{from{transform:translateY(0)}to{transform:translateY(-46%)}}
.cena__carga{
  position:absolute;top:0;left:0;height:2px;width:0;z-index:5;
  background:var(--grad-marca);box-shadow:0 0 12px var(--c-ciano);
}
.demo.p2 .cena__carga{animation:carregar .5s ease forwards}
@keyframes carregar{0%{width:0;opacity:1}80%{width:100%;opacity:1}100%{width:100%;opacity:0}}

/* cena 3 · a conversa, na linguagem visual do WhatsApp no escuro */
.cena--zap{background:#0B141A;display:flex;flex-direction:column;color:#E9EDEF;padding-top:26px}
.wa__topo{display:flex;align-items:center;gap:9px;padding:8px 12px;background:#202C33;flex:none}
.wa__volta{width:8px;height:8px;flex:none;border-left:1.6px solid #E9EDEF;border-bottom:1.6px solid #E9EDEF;transform:rotate(45deg)}
.wa__ava{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(150deg,#3E5567,#2A3942)}
.wa__id b{display:block;font-size:.72rem;font-weight:500;line-height:1.25}
.wa__id i{font-style:normal;font-size:.56rem;color:#8696A0}
.wa__corpo{flex:1;padding:10px 9px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.wa__dia{align-self:center;font-size:.5rem;letter-spacing:.06em;color:#8696A0;background:#182229;padding:.2rem .5rem;border-radius:6px}
.wa__balao{
  position:relative;max-width:82%;font-size:.63rem;line-height:1.45;
  padding:.42rem 2.6rem .42rem .55rem;border-radius:8px;opacity:0;
}
.wa__balao em{position:absolute;right:.5rem;bottom:.3rem;font-style:normal;font-size:.48rem;color:#8696A0}
.wa__balao--in{align-self:flex-start;background:#202C33;border-top-left-radius:2px}
.wa__balao--out{align-self:flex-end;background:#005C4B;border-top-right-radius:2px}
.wa__balao--out em{color:#8AD4C1}
.demo.p3 .wa__balao--in{animation:balao .4s .35s var(--curva) forwards}
.demo.p3 .wa__balao--out{animation:balao .4s 1.15s var(--curva) forwards}
@keyframes balao{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.wa__campo{flex:none;display:flex;align-items:center;gap:7px;padding:7px 9px 14px}
.wa__campo span{flex:1;font-size:.6rem;color:#8696A0;background:#2A3942;border-radius:100px;padding:.42rem .72rem}
.wa__campo i{width:28px;height:28px;border-radius:50%;flex:none;background:#00A884}


/* ═══ 6 · GARANTIAS ═══════════════════════════════════════════════════ */

.garantias{border-block:1px solid var(--linha);background:rgba(11,31,58,.5)}
.garantias__in{display:grid;grid-template-columns:1fr 1fr}
.garantias__item{
  padding:var(--e3) var(--e2);border-left:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
}
.garantias__item:nth-child(odd){border-left:0}
.garantias__item:nth-last-child(-n+2){border-bottom:0}
.garantias__item b{
  display:block;font-family:var(--f-titulo);font-size:1rem;
  color:var(--texto);font-weight:800;letter-spacing:-.02em;margin-bottom:.15rem;
}
.garantias__item span{font-size:.82rem;color:var(--texto-apagado);line-height:1.4}


/* ═══ 7 · TIPOS DE NEGÓCIO — O PASSADOR ═══════════════════════════════
   Passa sozinho. Não é menu, é demonstração: nada aqui recebe clique,
   porque o que a pessoa precisa entender — que a estrutura muda de
   negócio para negócio — ela entende só olhando. A barrinha embaixo do
   nome mostra quanto falta para o próximo.                           */

.giro__nomes{
  position:relative;height:3rem;margin-bottom:var(--e4);
  border-bottom:1px solid var(--linha);
}
.giro__nome{
  position:absolute;left:0;bottom:.75rem;
  font-family:var(--f-titulo);font-weight:800;
  font-size:clamp(1.05rem,4.6vw,1.4rem);letter-spacing:-.022em;
  color:var(--texto);white-space:nowrap;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--curva),transform .55s var(--curva);
}
.giro__nome.ativo{opacity:1;transform:none}
.giro__nomes::after{
  content:'';position:absolute;left:0;bottom:-1px;height:2px;
  width:0;border-radius:2px;background:var(--grad-marca);
  box-shadow:0 0 10px rgba(34,211,238,.5);
}
.giro.andando .giro__nomes::after{animation:correr var(--intervalo,6s) linear infinite}
@keyframes correr{from{width:0}to{width:100%}}
@keyframes descer{from{height:0}to{height:100%}}

/* a inclinação no eixo X é o que dá o ar de folha virando em vez de
   texto trocando de opacidade */
.giro__palco{position:relative;perspective:1200px;min-height:var(--altura,auto)}
.giro__caso{
  position:absolute;inset:0;pointer-events:none;
  opacity:0;visibility:hidden;
  transform:translateY(26px) rotateX(7deg);
  transform-origin:50% 0;
  transition:opacity .55s var(--curva),transform .6s var(--curva),visibility .6s;
}
.giro__caso.ativo{opacity:1;visibility:visible;transform:none}

.giro__texto h3{margin-bottom:var(--e2)}
.giro__texto p{max-width:46ch;margin-bottom:var(--e3)}
.giro__ganhos{display:flex;flex-direction:column;gap:.55rem;margin-bottom:var(--e4)}
.giro__ganhos li{display:flex;gap:.65rem;align-items:flex-start;font-size:.97rem}
.giro__ganhos svg{
  width:17px;height:17px;flex:none;margin-top:.3rem;
  fill:none;stroke:var(--c-ciano);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}

/* a pilha: o esqueleto daquele tipo de página, montando-se de cima para
   baixo. É ela que prova a frase do título — a ordem muda de negócio
   para negócio. */
.pilha{
  border:1px solid var(--linha);border-radius:var(--cartao-r);
  background:linear-gradient(180deg,rgba(18,46,79,.6),rgba(8,23,41,.5));
  padding:var(--e3);
}
.pilha__topo{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-apagado);padding-bottom:.7rem;margin-bottom:.8rem;
  border-bottom:1px dashed var(--linha-forte);
}
.pilha__lista{display:flex;flex-direction:column;gap:.42rem}
.pilha__lista li{
  position:relative;display:flex;align-items:center;gap:.7rem;
  padding:.72rem .85rem;border-radius:12px;
  border:1px solid var(--linha);background:rgba(234,242,251,.025);
  font-size:.9rem;color:var(--texto-fraco);overflow:hidden;
}
/* só encaixa quando o caso entra em cena: assim a pilha se monta na
   frente da pessoa a cada troca, em vez de já estar montada */
.giro__caso.ativo .pilha__lista li{animation:encaixar .5s var(--curva) both}
.pilha__lista li:nth-child(1){animation-delay:.08s}
.pilha__lista li:nth-child(2){animation-delay:.16s}
.pilha__lista li:nth-child(3){animation-delay:.24s}
.pilha__lista li:nth-child(4){animation-delay:.32s}
.pilha__lista li:nth-child(5){animation-delay:.4s}
@keyframes encaixar{from{opacity:0;transform:translateX(-14px) scaleX(.95)}to{opacity:1;transform:none}}
.pilha__lista li::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-marca)}
.pilha__lista li em{
  font-style:normal;margin-left:auto;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-apagado);
}
.pilha__lista li:first-child{border-color:var(--linha-forte);background:var(--grad-tenue);color:var(--texto)}

/* ═══ 8 · TRABALHOS — A DEMONSTRAÇÃO ═════════════════════════════════
   Enquadrado em CELULAR, não em janela de navegador. As capturas são de
   560px de largura — a de um telefone — então dentro da moldura o site
   aparece no tamanho real, e não espremido num retângulo deitado. É como
   o cliente dele vai ver: o tráfego vem da bio do Instagram.

   Ninguém escolhe nada e não existe "ver a página inteira". As molduras
   vivem em profundidade de verdade e se revezam sozinhas.           */

.mostra{
  position:relative;
  perspective:1600px;perspective-origin:50% 44%;
  margin-bottom:var(--e5);
}
.mostra__palco{
  position:relative;padding-bottom:10%;
  transform-style:preserve-3d;
  animation:derivar 16s ease-in-out infinite;
}
.mostra__palco.mao{animation:none;transition:transform .6s var(--curva)}
.mostra__palco.mao{transform:rotateY(var(--gy,0deg)) rotateX(var(--gx,0deg))}
@keyframes derivar{
  0%,100%{transform:rotateY(-7deg) rotateX(2deg)}
  50%    {transform:rotateY(7deg)  rotateX(-1.5deg)}
}

.obra{
  position:absolute;top:0;left:0;width:58%;
  border-radius:30px;padding:7px;
  background:linear-gradient(155deg,#24405F 0%,#08111D 46%,#16283F 100%);
  box-shadow:0 0 0 1px rgba(34,211,238,.24),
             0 40px 80px -30px rgba(0,0,0,.95),
             0 0 80px -30px rgba(34,211,238,.4);
  backface-visibility:hidden;
  transition:transform 1.2s var(--curva),opacity 1.2s var(--curva),filter 1.2s var(--curva);
}
/* a primeira fica no fluxo e dita a altura do palco. Todas têm a mesma
   proporção, então tanto faz qual está na frente. */
.obra:first-child{position:relative}
.obra[data-off="0"]{transform:translate3d(0,0,0) rotateY(0deg);opacity:1;z-index:3}
.obra[data-off="1"]{transform:translate3d(52%,7%,-230px) rotateY(-17deg);opacity:.42;filter:saturate(.5);z-index:2}
.obra[data-off="2"]{transform:translate3d(96%,13%,-420px) rotateY(-23deg);opacity:.18;filter:saturate(.35);z-index:1}

.obra__ilha{
  position:absolute;top:15px;left:50%;translate:-50% 0;z-index:2;
  width:30%;height:4.5%;max-height:16px;
  background:#04080E;border-radius:99px;
}
.obra__tela{
  position:relative;aspect-ratio:9/19.5;overflow:hidden;
  border-radius:24px;background:#000;
}
.obra__tela img{position:absolute;top:0;left:0;width:100%;height:auto}
/* Só a da frente percorre, e só depois que a seção aparece na tela. Sem
   o `.viva` a animação começava no carregamento e já tinha acabado
   quando a pessoa rolava até aqui — a tela ficava parada no rodapé
   escuro do site, parecendo um celular desligado.

   Passar o mouse pausa no lugar (`play-state`) em vez de tirar a
   animação, que faria a imagem saltar de volta para o topo.        */
.mostra.viva .obra[data-off="0"] .obra__tela img{
  animation:percorrer var(--percorre,8s) linear forwards;
}
.mostra:not(.andando) .obra[data-off="0"] .obra__tela img{animation-play-state:paused}
@keyframes percorrer{from{transform:translateY(0)}to{transform:translateY(var(--rolar,-80%))}}

.mostra__fichas{position:relative;min-height:var(--altura,auto)}
.ficha{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transform:translateY(16px);
  transition:opacity .5s var(--curva),transform .55s var(--curva),visibility .55s;
}
.ficha.ativo{opacity:1;visibility:visible;transform:none}
.ficha h3{margin-bottom:.25rem}
.ficha__sub{
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-ciano);margin-bottom:var(--e2);
}
.ficha p{max-width:52ch}

/* ═══ 9 · FICHA TÉCNICA E TRILHA ══════════════════════════════════════ */

.especs{border-top:1px solid var(--linha-forte);margin-bottom:var(--e5)}
.especs__linha{padding:.9rem 0;border-bottom:1px solid var(--linha);transition:padding-left .35s var(--curva)}
.especs__linha dt{
  font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-ciano);margin-bottom:.15rem;
}
.especs__linha dd{color:var(--texto);font-size:.98rem}

.trilha{
  border:1px solid var(--linha);border-radius:var(--cartao-r);
  background:linear-gradient(180deg,rgba(18,46,79,.55),rgba(8,23,41,.45));
  padding:var(--e4) var(--e3) var(--e3);
}
.trilha__titulo{
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-apagado);margin-bottom:var(--e4);
}
.trilha__lista{position:relative;padding-left:2rem}
.trilha__lista::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--linha-forte)}
.trilha__lista::after{
  content:'';position:absolute;left:7px;top:6px;width:1px;height:var(--preenchido,0%);
  background:var(--grad-marca);box-shadow:0 0 12px rgba(34,211,238,.6);
  transition:height .7s var(--curva);
}
.trilha__lista li{position:relative;padding-bottom:var(--e4)}
.trilha__lista li:last-child{padding-bottom:0}
.trilha__lista li::before{
  content:'';position:absolute;left:-2rem;top:.4rem;width:15px;height:15px;border-radius:50%;
  border:1px solid var(--linha-forte);background:var(--c-abismo);
  transition:border-color .4s,background .4s,box-shadow .4s;
}
.trilha__lista li.aceso::before{border-color:var(--c-ciano);background:var(--grad-marca);box-shadow:0 0 0 4px rgba(34,211,238,.16)}
.trilha__lista h4{
  font-family:var(--f-titulo);font-size:1.04rem;font-weight:800;
  letter-spacing:-.02em;color:var(--texto);margin-bottom:.15rem;
}
.trilha__lista p{font-size:.93rem}


/* ═══ 10 · O COMBINADO ════════════════════════════════════════════════ */

.combinado{
  position:relative;border-radius:calc(var(--cartao-r) + 6px);
  border:1px solid var(--linha-forte);
  background:
    radial-gradient(700px 320px at 88% -10%,rgba(124,58,237,.2),transparent 62%),
    radial-gradient(600px 280px at 4% 106%,rgba(34,211,238,.16),transparent 60%),
    linear-gradient(180deg,rgba(18,46,79,.7),rgba(8,23,41,.75));
  padding:var(--e5) 1.2rem;overflow:hidden;
}
.combinado h2{margin-bottom:var(--e4)}
.combinado__lista li{padding:var(--e3) 0;border-top:1px solid var(--linha)}
.combinado__lista li:first-child{border-top:0;padding-top:0}
.combinado__lista li:last-child{padding-bottom:0}
.combinado__marca{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.16em;
  color:var(--c-ciano);margin-bottom:.35rem;
}
.combinado__lista strong{
  display:block;font-family:var(--f-titulo);font-weight:800;
  font-size:1.16rem;letter-spacing:-.028em;
  color:var(--texto);line-height:1.2;margin-bottom:.35rem;
}
.combinado__lista span{font-size:.95rem;max-width:56ch;display:block}


/* ═══ 11 · DÚVIDAS E O MEDIDOR DE PREÇO ═══════════════════════════════ */

.duvidas__menu{
  display:flex;gap:.4rem;overflow-x:auto;flex-wrap:nowrap;
  margin-inline:-1.1rem;padding:0 1.1rem .7rem;scrollbar-width:none;
}
.duvidas__menu::-webkit-scrollbar{display:none}
.duvidas__botao{
  white-space:nowrap;padding:.6rem 1rem;border-radius:var(--btn-r);
  font-family:var(--f-titulo);font-weight:700;font-size:.86rem;color:var(--texto-apagado);
  border:1px solid var(--linha);transition:color .25s,background .25s,border-color .25s;
}
.duvidas__botao[aria-selected="true"]{color:#06121F;background:var(--grad-cta);border-color:transparent}

.duvidas__quadro{
  border:1px solid var(--linha);border-radius:var(--cartao-r);
  background:linear-gradient(180deg,rgba(18,46,79,.55),rgba(8,23,41,.45));
  padding:var(--e4) var(--e3);margin-top:var(--e3);
}
.duvidas__resposta[hidden]{display:none}
.duvidas__resposta{animation:trocar .45s var(--curva) both}
@keyframes trocar{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.duvidas__resposta h3{margin-bottom:var(--e2)}
.duvidas__resposta p{margin-bottom:var(--e2)}
.duvidas__resposta p:last-child{margin-bottom:0}
.duvidas__resposta strong{color:var(--texto);font-weight:700}


/* ═══ 12 · SÍMBOLO 3D E FECHAMENTO ════════════════════════════════════
   A peça de marca do fim da página. É o mesmo símbolo do logotipo, mas
   com espessura de verdade: dezoito cópias empilhadas no eixo Z dentro
   de um contexto `preserve-3d`. Quando ele gira, as cópias de trás viram
   a lateral do objeto — dá volume sem WebGL, sem biblioteca e sem os
   600 KB que o Three.js custaria numa página que vive no celular.    */

.fechamento{position:relative;padding-block:var(--e7);overflow:hidden;text-align:center}
.fechamento__brilho{
  position:absolute;left:50%;top:4%;translate:-50% 0;
  width:min(900px,130vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(34,211,238,.16),rgba(124,58,237,.1) 44%,transparent 66%);
  animation:pulsar 10s ease-in-out infinite;
}
@keyframes pulsar{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

.simbolo3d{
  width:min(320px,68vw);margin:0 auto var(--e4);
  perspective:900px;perspective-origin:50% 50%;
}
.simbolo3d__corpo{
  position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--px,-12deg)) rotateY(var(--py,-26deg));
  animation:bambolear 9s ease-in-out infinite;
}
.simbolo3d__corpo.mao{animation:none;transition:transform .5s var(--curva)}
@keyframes bambolear{
  0%,100%{transform:rotateX(-12deg) rotateY(-26deg)}
  50%    {transform:rotateX(-4deg)  rotateY(26deg)}
}
.simbolo3d__folha{
  width:100%;height:auto;
  transform:translateZ(calc(var(--i,0) * -1.7px));
}
/* as fatias de trás só existem para dar espessura: ficam escuras e sem
   brilho, como a lateral de um objeto sólido */
.simbolo3d__folha:not(:first-child){position:absolute;inset:0;filter:brightness(.4) saturate(.65)}

.assinatura__nome{
  font-family:var(--f-titulo);font-weight:800;
  font-size:clamp(1.4rem,6.2vw,2.4rem);letter-spacing:-.015em;
  text-transform:uppercase;color:var(--texto);margin-bottom:var(--e5);
}
.assinatura__nome i{
  font-style:normal;font-weight:400;letter-spacing:.26em;
  margin-left:.3em;color:var(--texto-fraco);
}

.fechamento h2{margin-bottom:var(--e3)}
.fechamento__sub{max-width:44ch;margin:0 auto var(--e4)}

.pedido{
  display:flex;flex-direction:column;gap:.5rem;
  width:min(100%,560px);margin:0 auto;
  padding:.5rem;border:1px solid var(--linha-forte);border-radius:26px;
  background:rgba(11,31,58,.75);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .3s,box-shadow .3s;
}
.pedido:focus-within{border-color:var(--c-ciano);box-shadow:0 0 0 4px rgba(34,211,238,.14)}
.pedido__campo{padding:.85rem 1rem;font-size:1rem;color:var(--texto);text-align:center;width:100%}
.pedido__campo::placeholder{color:var(--texto-apagado)}
.pedido .btn{width:100%}

.fechamento__sugestoes{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:var(--e3)}
.sugestao{
  font-size:.83rem;padding:.34rem .78rem;border-radius:99px;
  border:1px dashed var(--linha-forte);color:var(--texto-apagado);
  transition:color .25s,border-style .25s,background .25s;
}
.fechamento__fino{margin-top:var(--e3);font-size:.83rem;color:var(--texto-apagado)}


/* ═══ 13 · RODAPÉ E FLUTUANTE ═════════════════════════════════════════ */

.rodape{border-top:1px solid var(--linha);padding-top:var(--e5);background:rgba(6,17,31,.6)}
.rodape__in{display:grid;gap:var(--e4);padding-bottom:var(--e4)}
.rodape__sobre p{max-width:38ch;font-size:.93rem;margin-top:var(--e2)}
.rodape h4{
  font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--texto-apagado);margin-bottom:var(--e2);
}
.rodape__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4)}
.rodape__col{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.rodape__col a{font-size:.95rem;transition:color .25s}
.rodape__base{
  display:flex;flex-wrap:wrap;gap:.5rem var(--e3);justify-content:space-between;
  padding-block:var(--e3);border-top:1px solid var(--linha);
  font-size:.8rem;color:var(--texto-apagado);
}

.flutuante{
  position:fixed;right:1rem;bottom:1rem;z-index:80;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:1rem;border-radius:50%;
  background:var(--c-zap);color:#04220F;font-weight:800;
  box-shadow:0 14px 36px -10px rgba(37,211,102,.6);
  transform:translateY(120%) scale(.9);opacity:0;
  transition:transform .5s var(--curva-tensa),opacity .4s;
}
.flutuante.visivel{transform:none;opacity:1}
.flutuante svg{width:22px;height:22px;fill:currentColor}
.flutuante span{display:none}
.flutuante::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  border:2px solid var(--c-zap);animation:eco 2.6s ease-out infinite;
}
@keyframes eco{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.25);opacity:0}}


/* ═══ 14 · A ENTRADA ══════════════════════════════════════════════════
   Sem corte nenhum. O que aparece dentro do celular NÃO é uma maquete:
   é a própria página, movida para dentro da moldura. A câmera avança no
   eixo Z até chegar em 1:1 — nesse ponto o conteúdo já está exatamente
   onde vai ficar, e a moldura só precisa sumir. Não existe troca para a
   pessoa perceber, porque não existe troca.                           */

.camara{
  position:fixed;inset:0;z-index:200;
  background:var(--c-abismo);
  overflow:hidden;
  perspective:1100px;
  perspective-origin:50% 50%;
  transition:opacity .3s ease;
}
.camara.saindo{opacity:0;pointer-events:none}

.voo{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:translateZ(var(--z,-1100px)) rotateY(var(--gy,-16deg)) rotateX(var(--gx,5deg));
  transition:transform var(--dur,1.6s) cubic-bezier(.5,0,.15,1);
  will-change:transform;
}

/* a moldura sai de `box-shadow`, nunca de `border`: borda mudaria a
   caixa de conteúdo, a página lá dentro refluiria a cada quadro e o
   texto tremeria. Sombra fica por fora e não custa layout nenhum. */
.fone{
  position:absolute;inset:0;
  overflow:hidden;
  /* o translateZ(0) não é enfeite: sem um transform aqui, quem está em
     `position:fixed` lá dentro (o topo, o menu, o fundo) usa o `.voo`
     como referência e ESCAPA deste `overflow:hidden` — o menu do celular
     aparecia flutuando fora da moldura. Com o transform, a moldura passa
     a ser o bloco de referência e recorta tudo. */
  transform:translateZ(0);
  border-radius:var(--raio,44px);
  box-shadow:0 0 0 var(--moldura,11px) #0A1524,
             0 0 0 calc(var(--moldura,11px) + 1px) rgba(34,211,238,.3),
             0 60px 120px -40px rgba(0,0,0,.9),
             0 0 130px -30px rgba(34,211,238,.4);
  transition:border-radius var(--dur,1.6s) cubic-bezier(.5,0,.15,1),
             box-shadow var(--dur,1.6s) cubic-bezier(.5,0,.15,1);
}
.fone__ilha{
  position:absolute;top:14px;left:50%;translate:-50% 0;z-index:5;
  width:76px;height:20px;background:#04080E;border-radius:99px;
  transition:opacity .45s ease,transform .45s ease;
}
.camara.chegando .fone__ilha{opacity:0;transform:translate(-50%,-16px)}

/* a página vive aqui dentro durante a entrada, no tamanho natural */
.fone__conteudo{position:absolute;inset:0;overflow:hidden}

.camara__pular{
  position:absolute;right:1rem;bottom:1rem;z-index:6;
  font-size:.8rem;font-weight:700;color:var(--texto-apagado);
  border:1px solid var(--linha);border-radius:99px;padding:.5rem .95rem;
  background:rgba(8,23,41,.6);
}


/* ═══ 15 · TELAS GRANDES ══════════════════════════════════════════════ */

@media (min-width:760px){
  body{font-size:1.06rem}
  .wrap{width:min(100% - 3rem,var(--largura))}

  .topo__in{height:74px;gap:var(--e4)}
  .topo__nav{
    position:static;flex-direction:row;align-items:center;gap:var(--e4);
    margin-left:auto;padding:0;background:none;border:0;transform:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .topo__nav a:not(.btn){padding:0;border:0;font-size:.95rem;font-weight:600;position:relative;color:var(--texto-fraco)}
  .topo__nav a:not(.btn)::after{
    content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
    background:var(--grad-marca);transform:scaleX(0);transform-origin:left;
    transition:transform .35s var(--curva);
  }
  .topo__nav a:not(.btn):hover{color:var(--texto)}
  .topo__nav a:not(.btn):hover::after{transform:scaleX(1)}
  .topo__navcta{margin-top:0}
  .hamburguer{display:none}
  .marca__sinal{width:38px}
  .marca__nome{font-size:1.14rem}

  .abertura{padding:calc(74px + var(--e3)) 0 var(--e6)}
  .eixo{gap:var(--e3)}
  .trio{gap:0 1rem}
  .trio__ico{width:44px;height:44px}
  .trio__ico svg{width:20px;height:20px}
  .trio::before,.trio::after{top:22px}
  .trio b{font-size:.95rem}
  .trio__diz{font-size:.83rem;max-width:20ch}
  .eixo__apoio{font-size:1.05rem}

  .demo__palco{width:auto}

  .secao__topo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--e5);align-items:end}
  .secao__lado{margin-top:0}

  .garantias__in{grid-template-columns:repeat(4,1fr)}
  .garantias__item{border-bottom:0}
  .garantias__item:nth-child(odd){border-left:1px solid var(--linha)}
  .garantias__item:first-child{border-left:0}

  .duvidas__menu{margin-inline:0;padding-inline:0}

  /* os nomes viram lista: no computador cabe mostrar os quatro, com o
     da vez aceso e os outros esperando a vez */
  .giro{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:var(--e5);align-items:start}
  .giro__nomes{
    height:auto;display:flex;flex-direction:column;gap:.9rem;
    border-bottom:0;border-left:1px solid var(--linha);padding-left:var(--e3);margin-bottom:0;
  }
  .giro__nome{
    position:relative;left:auto;bottom:auto;
    opacity:.3;transform:none;white-space:normal;
    transition:opacity .5s var(--curva),color .5s;
  }
  .giro__nome.ativo{opacity:1}
  .giro__nomes::after{
    left:-1px;bottom:auto;top:0;width:2px;height:0;
    background:var(--grad-marca);
  }
  .giro.andando .giro__nomes::after{animation:descer var(--intervalo,6s) linear infinite}
  .giro__caso{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:var(--e5);align-items:start}
  .giro__ganhos{margin-bottom:0}

  /* no computador o aparelho encolhe: a 44% ele ficava com mil pixels
     de altura e a seção passava da tela inteira */
  .obra{width:32%}

  .entrega{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e5);align-items:start}
  .especs{margin-bottom:0}
  .especs__linha{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.5fr);gap:var(--e2);align-items:baseline}
  .especs__linha dt{margin-bottom:0}
  .especs__linha:hover{padding-left:.7rem;background:rgba(34,211,238,.05)}

  .combinado{padding:var(--e6) clamp(1.6rem,4vw,3.2rem)}
  .combinado__lista li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e3);align-items:baseline}
  .combinado__marca{min-width:8.6rem;margin-bottom:0}
  .combinado__lista strong{font-size:1.45rem}

  .duvidas{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--e5);align-items:start}
  .duvidas__menu{flex-direction:column;overflow:visible;gap:.15rem;padding-bottom:0}
  .duvidas__botao{
    white-space:normal;text-align:left;border:0;border-radius:12px;
    padding:.9rem 1rem;font-size:.96rem;position:relative;
  }
  .duvidas__botao::before{
    content:'';position:absolute;left:0;top:16%;bottom:16%;width:3px;border-radius:2px;
    background:var(--grad-marca);transform:scaleY(0);transition:transform .35s var(--curva);
  }
  .duvidas__botao[aria-selected="true"]{background:rgba(34,211,238,.09);color:var(--texto)}
  .duvidas__botao[aria-selected="true"]::before{transform:scaleY(1)}
  .duvidas__quadro{margin-top:0;padding:var(--e5) var(--e4);min-height:330px}

  .pedido{flex-direction:row;align-items:center;gap:.5rem;padding:.45rem .45rem .45rem 1.2rem;border-radius:99px}
  .pedido__campo{text-align:left;padding:.8rem 0;flex:1;min-width:0}
  .pedido .btn{width:auto;flex:none}

  .rodape__in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .rodape__cols{gap:var(--e5)}

  .flutuante{padding:.85rem 1.2rem;border-radius:99px}
  .flutuante span{display:inline}
}

@media (min-width:960px){
  .simbolo3d{width:360px}
}

@media (min-width:1120px){
  /* no computador a composição vira cartaz: tipo grande, aparelho no
     centro. Não é a mesma coisa esticada — é a mesma ideia, maior. */
  .eixo__titulo .pal{font-size:clamp(3rem,4vw,3.9rem)}
  .aparelho{width:250px}
}

@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn--marca:hover{box-shadow:0 20px 52px -14px rgba(34,211,238,.6)}
  .btn--marca:hover::before{opacity:1}
  .btn--fantasma:hover{border-color:var(--c-ciano);background:rgba(34,211,238,.08)}
  .marca:hover .marca__sinal{transform:scale(1.06)}
  .duvidas__botao:hover{color:var(--texto)}
  .rodape__col a:hover{color:var(--c-ciano)}
  .sugestao:hover{color:var(--texto);border-style:solid;background:rgba(34,211,238,.08)}
  .flutuante:hover{box-shadow:0 18px 46px -10px rgba(37,211,102,.8)}
}


/* ═══ MOVIMENTO REDUZIDO ══════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js .rev,.js .entra,.js .pal{opacity:1;transform:none}
  .js .topo .marca__sinal path{stroke-dashoffset:0}
  .fundo__luz{animation:none}
  .demo .cena--zap{opacity:1;transform:none}
  .giro__caso{position:relative;opacity:1;visibility:visible;transform:none}
  .giro__caso + .giro__caso{margin-top:var(--e6);border-top:1px solid var(--linha);padding-top:var(--e5)}
  .giro__nomes,.mostra{display:none}
  .ficha{position:relative;opacity:1;visibility:visible;transform:none}
  .ficha + .ficha{margin-top:var(--e4)}
  .mostra__palco{animation:none}
  .obra__tela img{animation:none}
  .flutuante{transform:none;opacity:1}
  .flutuante::after{display:none}
  .simbolo3d__corpo{animation:none;transform:rotateX(-8deg) rotateY(-18deg)}
}