/* Landing do João (P66, 16/10/2026). Mesmas cores e letras do site de antes:
   osso, petróleo e terra; Fraunces, Inter Tight e Geist Mono.
   Regra de tudo aqui: o que esconde só vale com .js no <html>. Sem JavaScript,
   tudo aparece. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NUs8FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChJdt9vIVYX9G37lvd9mv0iQg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url(https://fonts.gstatic.com/s/intertight/v9/NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* reserva do mesmo tamanho: a página não pula quando a letra de verdade chega */
@font-face{font-family:'Fraunces alt';src:local('Georgia'),local('Times New Roman');size-adjust:76.5%;ascent-override:104%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'Inter Tight alt';src:local('Segoe UI'),local('Arial');size-adjust:96%;ascent-override:97%;descent-override:24%;line-gap-override:0%}

:root{
  --osso:#F5F1E8;--osso2:#ECE6DA;--papel:#FBF8F2;--linha-c:#DCD5C7;
  --tinta-c:#1B2A28;--tinta-c2:#4A5E58;
  --petroleo:#173C3A;--petroleo2:#1E4A47;--escuro:#1A1F1D;
  --tinta:#F5F1E8;--tinta2:#B9C6BF;--tinta3:#8FA69C;--linha:rgba(245,241,232,.14);
  --terra:#B85C38;--terra-forte:#9A4627;--terra-viva:#E07A4F;--terra-clara:#E8A07A;
  --verde:#426B61;--zap:#25D366;
  --ease:cubic-bezier(.22,1,.36,1);
  --f-titulo:'Fraunces','Fraunces alt',Georgia,serif;
  --f-texto:'Inter Tight','Inter Tight alt',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Geist Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:var(--ease)}

*{margin:0;padding:0;box-sizing:border-box}
/* clip e não hidden: hidden quebra o position:sticky da página inteira */
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{font-family:var(--f-texto);font-size:1.0625rem;line-height:1.6;color:var(--tinta-c);background:var(--osso);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a,img{-webkit-user-drag:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--terra-viva);outline-offset:3px;border-radius:6px}
::selection{background:rgba(224,122,79,.32)}
.wrap{width:min(1160px,100% - 2.6rem);margin-inline:auto}
@media(min-width:900px){.wrap{width:min(1160px,100% - 5rem)}}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* o "pular pro conteúdo" aparece quando chega nele pelo teclado */
a.so-leitor{background:var(--osso);color:var(--tinta-c)}
a.so-leitor:focus{position:fixed;left:1rem;top:1rem;z-index:700;width:auto;height:auto;clip:auto;padding:.7rem 1.1rem;border-radius:10px;font-weight:600}

h1,h2,h3{font-family:var(--f-titulo);font-weight:600;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(2.35rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.32rem;line-height:1.2}
em{font-style:italic}
.olho{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--terra-forte)}
.olho::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.escura .olho,.heroi .olho{color:var(--terra-clara)}
.lead{font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.55}
.secao{padding:clamp(3.4rem,7vw,5.6rem) 0}
.secao-cab{max-width:46rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.secao-cab h2{margin-top:.8rem}
.secao-cab p:not(.olho){margin-top:1rem;color:var(--tinta-c2);font-size:1.12rem}
.escura{background:var(--petroleo);color:var(--tinta)}
.escura .secao-cab p:not(.olho),.escura .suave{color:var(--tinta2)}
.clara2{background:var(--osso2)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.85rem 1.45rem;border-radius:999px;
  font-weight:600;font-size:1.02rem;text-decoration:none;line-height:1.2;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s}
.btn:active{transform:scale(.97)}
.btn svg{width:22px;height:22px;flex:none}
.btn-zap{background:var(--zap);color:#0d2a17;box-shadow:0 10px 24px -12px rgba(37,211,102,.7)}
.btn-zap:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(37,211,102,.8)}
.btn-linha{border:1.5px solid currentColor;color:inherit}
.btn-linha:hover{background:rgba(127,127,127,.1)}
.escura .btn-linha{color:var(--tinta)}

/* ---------- topo fixo ---------- */
.cab{position:fixed;inset:0 0 auto;z-index:50;color:var(--tinta);background:var(--petroleo);transition:background-color .3s,box-shadow .3s,padding .3s;padding:.95rem 0}
.cab.fix{background:var(--petroleo);box-shadow:0 8px 24px -16px rgba(0,0,0,.5);padding:.55rem 0}
.cab .wrap{display:flex;align-items:center;gap:1.2rem}
.marca{font-family:var(--f-titulo);font-weight:600;font-size:1.32rem;text-decoration:none;display:flex;align-items:center;gap:.6rem;margin-right:auto;white-space:nowrap}
.marca i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--escuro);color:var(--terra-viva);font-style:normal;font-size:.95rem;border:1px solid var(--linha)}
.nav{display:none;gap:1.6rem}
.nav a{text-decoration:none;font-size:.96rem;color:var(--tinta2);position:relative;padding:.3rem 0}
.nav a:hover,.nav a[aria-current]{color:var(--tinta)}
.nav a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--terra-viva);border-radius:2px}
.nav .breve{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;color:var(--terra-clara);margin-left:.3rem;vertical-align:2px}
.cab .btn{min-height:42px;padding:.55rem 1rem;font-size:.92rem}
.cab .btn span{display:none}
.menu-bt{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--linha)}
.menu-bt i,.menu-bt i::before,.menu-bt i::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .3s var(--ease)}
.menu-bt i::before,.menu-bt i::after{content:'';position:absolute;left:0}
.menu-bt i::before{top:-6px}.menu-bt i::after{top:6px}
.menu-aberto .menu-bt i{background:transparent}
.menu-aberto .menu-bt i::before{transform:translateY(6px) rotate(45deg)}
.menu-aberto .menu-bt i::after{transform:translateY(-6px) rotate(-45deg)}
.painel{position:fixed;inset:64px 0 auto;z-index:49;background:var(--petroleo);color:var(--tinta);padding:.6rem 1.3rem 1.4rem;border-top:1px solid var(--linha);box-shadow:0 20px 30px -20px rgba(0,0,0,.6)}
.painel a{display:flex;justify-content:space-between;align-items:center;padding:1rem .2rem;border-bottom:1px solid var(--linha);text-decoration:none;font-size:1.1rem}
.painel a small{font-family:var(--f-mono);color:var(--tinta3);font-size:.75rem}
@media(min-width:560px){.cab .btn span{display:inline}}
@media(min-width:980px){.nav{display:flex}.menu-bt,.painel{display:none!important}}

/* ---------- topo das páginas ---------- */
.heroi{position:relative;background:var(--petroleo);color:var(--tinta);padding:clamp(6.6rem,12vw,8.6rem) 0 clamp(3.4rem,7vw,5.4rem);overflow:hidden}
/* textura de linhas de mapa bem fraca: lembra o mapa de Cananéia sem disputar com o texto */
.heroi::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(900px 520px at 85% 55%,rgba(66,107,97,.45),transparent 70%),
  repeating-radial-gradient(circle at 78% 42%,transparent 0 46px,rgba(245,241,232,.035) 46px 47px)}
.heroi .wrap{position:relative}
.heroi-grade{display:grid;gap:3rem;align-items:center}
@media(min-width:980px){.heroi-grade{grid-template-columns:1.08fr .92fr;gap:3.5rem}}
.heroi .olho{margin-bottom:1.2rem}
.heroi h1 em{color:var(--terra-viva)}
.heroi .lead{margin-top:1.4rem;color:var(--tinta2);max-width:36rem}
.heroi .lead strong{color:var(--tinta);font-weight:600}
.acoes{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.confia{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.92rem;color:var(--tinta3)}
.confia span{display:inline-flex;align-items:center;gap:.45rem}
.confia span::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--terra-clara)}
.volta{display:flex;width:max-content;align-items:center;gap:.45rem;color:var(--tinta2);text-decoration:none;font-size:.95rem;margin-bottom:1.6rem}
.volta:hover{color:var(--tinta)}

/* ---------- celular ---------- */
.cel{position:relative;width:min(292px,70vw);border-radius:46px;padding:10px;background:#1c2120;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.65),inset 0 0 0 1.5px #3b4240,inset 0 0 0 4px #121514}
.cel::after{content:'';position:absolute;right:-3px;top:22%;width:3px;height:60px;border-radius:2px;background:#2c3231}
.tela{position:relative;aspect-ratio:624/1350;border-radius:37px;overflow:hidden;background:#fff}
.tela>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a tela que sai fica um pouco MENOR, não maior: maior, o Chrome contava cada troca como o maior elemento de novo */
.js .tela.troca>img{opacity:0;transform:scale(.985);transition:opacity .55s var(--ease),transform .9s var(--ease)}
.js .tela.troca>img.on{opacity:1;transform:none}
.cel-palco{display:flex;justify-content:center;position:relative}
.selo{position:absolute;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;background:var(--papel);color:var(--tinta-c);padding:.45rem .75rem;border-radius:10px;box-shadow:0 12px 24px -12px rgba(0,0,0,.45);white-space:nowrap}

/* liga e desliga (antes e depois) */
.chave{display:inline-flex;padding:4px;border-radius:999px;background:rgba(245,241,232,.1);border:1px solid var(--linha);gap:2px}
.chave button{padding:.55rem 1rem;border-radius:999px;font-size:.92rem;font-weight:600;color:var(--tinta2);transition:background-color .25s,color .25s}
.chave button[aria-pressed="true"]{background:var(--tinta);color:var(--tinta-c)}
.clara .chave,.clara2 .chave{background:var(--papel);border-color:var(--linha-c)}
.clara .chave button,.clara2 .chave button{color:var(--tinta-c2)}
.clara .chave button[aria-pressed="true"],.clara2 .chave button[aria-pressed="true"]{background:var(--tinta-c);color:var(--osso)}

/* ---------- cartões e listas ---------- */
.grade-3{display:grid;gap:1.1rem}
@media(min-width:760px){.grade-3{grid-template-columns:repeat(3,1fr)}}
.cartao{background:var(--papel);border:1px solid var(--linha-c);border-radius:20px;padding:1.6rem}
.cartao h3{margin:.9rem 0 .5rem}
.cartao p{color:var(--tinta-c2)}
.icone{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--osso2);color:var(--terra-forte)}
.icone svg{width:24px;height:24px}
.lista-check{list-style:none;display:grid;gap:.7rem}
.lista-check li{display:flex;gap:.75rem;align-items:flex-start}
.lista-check li::before{content:'';flex:none;width:22px;height:22px;margin-top:.15rem;border-radius:50%;
  background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F1E8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.lista-x{list-style:none;display:grid;gap:.6rem;color:var(--tinta-c2)}
.lista-x li{display:flex;gap:.75rem}
.lista-x li::before{content:'';flex:none;width:22px;height:22px;margin-top:.15rem;border-radius:50%;
  background:var(--linha-c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5E58' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/12px no-repeat}

/* "em palavras simples": a caixa que explica como pra um amigo */
.simples{display:grid;gap:2rem;align-items:start}
@media(min-width:900px){.simples{grid-template-columns:.9fr 1.1fr;gap:4rem}}
.simples-caixa{background:var(--papel);border:1px solid var(--linha-c);border-radius:24px;padding:clamp(1.5rem,3vw,2.4rem);position:relative}
.simples-caixa p+p{margin-top:1rem}
.simples-caixa .grande{font-family:var(--f-titulo);font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.35;color:var(--tinta-c)}
.simples-caixa .grande em{color:var(--terra-forte)}
.simples-caixa p{color:var(--tinta-c2)}

/* o que eu faço / o que você faz */
.duas{display:grid;gap:1.2rem}
@media(min-width:860px){.duas{grid-template-columns:1.25fr .75fr}}
.duas .cartao h3{margin-top:0;margin-bottom:1.2rem}
.voce{background:var(--petroleo);color:var(--tinta);border-color:transparent}
.voce p,.voce li{color:var(--tinta2)}
.voce .lista-check li::before{background-color:var(--terra)}

/* quanto custa */
.preco-cartao{display:grid;gap:2rem;background:var(--papel);border:1px solid var(--linha-c);border-radius:26px;padding:clamp(1.6rem,4vw,2.8rem)}
@media(min-width:860px){.preco-cartao{grid-template-columns:.85fr 1.15fr;gap:3rem}}
.valor{font-family:var(--f-titulo);font-weight:600;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;letter-spacing:-.02em;color:var(--tinta-c)}
.valor small{font-family:var(--f-texto);font-size:1.02rem;font-weight:500;letter-spacing:0;color:var(--tinta-c2);display:block;margin-top:.55rem;line-height:1.4}
.valor-mais{margin-top:1.2rem;padding-top:1.2rem;border-top:1px dashed var(--linha-c);color:var(--tinta-c2)}
.valor-mais strong{color:var(--tinta-c)}
.preco-cartao h3{font-size:1.05rem;font-family:var(--f-texto);font-weight:600;margin-bottom:.9rem}
.preco-cartao .lista-x{margin-top:.2rem}
.pagto{margin-top:1.4rem;font-size:.97rem;color:var(--tinta-c2)}

/* passos */
.passos{list-style:none;display:grid;gap:1rem;counter-reset:p}
@media(min-width:760px){.passos{grid-template-columns:repeat(4,1fr)}}
.passos li{background:var(--papel);border:1px solid var(--linha-c);border-radius:20px;padding:1.4rem;position:relative}
.passos li::before{counter-increment:p;content:'0' counter(p);font-family:var(--f-mono);font-size:.8rem;color:var(--terra-forte);display:block;margin-bottom:.9rem}
.passos h3{font-size:1.15rem;margin-bottom:.45rem}
.passos p{color:var(--tinta-c2);font-size:.98rem}
.escura .passos li{background:var(--petroleo2);border-color:var(--linha)}
.escura .passos li::before{color:var(--terra-clara)}
.escura .passos p{color:var(--tinta2)}

/* dúvidas */
.duvidas{display:grid;gap:.7rem;max-width:52rem}
.duvidas details{background:var(--papel);border:1px solid var(--linha-c);border-radius:16px}
.duvidas summary{list-style:none;cursor:pointer;padding:1.15rem 3.2rem 1.15rem 1.3rem;font-weight:600;position:relative}
.duvidas summary::-webkit-details-marker{display:none}
.duvidas summary::after{content:'+';position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--terra-forte);transition:transform .3s var(--ease)}
.duvidas details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.duvidas details p{padding:0 1.3rem 1.25rem;color:var(--tinta-c2)}

/* outras portas, no fim de cada serviço */
.outras{display:grid;gap:.8rem}
@media(min-width:760px){.outras{grid-template-columns:repeat(3,1fr)}}
.outra{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;border-radius:18px;background:var(--petroleo2);border:1px solid var(--linha);text-decoration:none;transition:transform .3s var(--ease),border-color .3s}
.outra:hover{transform:translateY(-3px);border-color:rgba(232,160,122,.5)}
.outra .icone{background:rgba(245,241,232,.08);color:var(--terra-clara)}
.outra b{display:block;font-family:var(--f-titulo);font-weight:600;font-size:1.12rem}
.outra small{color:var(--tinta2);font-size:.9rem}
.outra .seta{margin-left:auto;color:var(--terra-clara)}

/* fecho */
.fecho{text-align:center}
.fecho h2{max-width:20ch;margin-inline:auto}
.fecho h2 em{color:var(--terra-viva)}
.fecho p{max-width:34rem;margin:1.2rem auto 0}
.fecho .acoes{justify-content:center}

/* rodapé */
.rodape{background:var(--escuro);color:var(--tinta2);padding:3.4rem 0 2.4rem;font-size:.95rem}
.rodape-grade{display:grid;gap:2rem}
@media(min-width:760px){.rodape-grade{grid-template-columns:1.4fr 1fr 1fr}}
.rodape b{display:block;color:var(--tinta);font-family:var(--f-titulo);font-weight:600;font-size:1.25rem;margin-bottom:.5rem}
.rodape h3{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta3);font-weight:500;margin-bottom:.8rem}
.rodape a{display:block;text-decoration:none;padding:.22rem 0}
.rodape a:hover{color:var(--tinta)}
.creditos{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--linha);font-size:.8rem;color:var(--tinta3);line-height:1.55}
.creditos a{display:inline;text-decoration:underline}

/* botão fixo do WhatsApp */
.zap-fixo{position:fixed;right:1rem;bottom:1rem;z-index:40;width:58px;height:58px;border-radius:50%;background:var(--zap);display:grid;place-items:center;box-shadow:0 14px 28px -12px rgba(0,0,0,.5);transition:transform .25s var(--ease)}
.zap-fixo:hover{transform:scale(1.07)}
.zap-fixo svg{width:30px;height:30px;fill:#0d2a17}

/* ---------- aparecer rolando ---------- */
.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js [data-r].vis{opacity:1;transform:none}
/* topo: entra ao abrir, em cascata */
.js .entra{opacity:0;transform:translateY(22px);animation:entra .9s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes entra{to{opacity:1;transform:none}}

/* robô do Google e quem pediu menos movimento: tudo parado e visível */
.sem-animacao [data-r],.sem-animacao .entra{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-r],.js .entra{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =====================================================================
   PÁGINA PRINCIPAL
   ===================================================================== */
.chip{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;background:var(--terra);color:#fff}
.chip.claro{background:rgba(232,160,122,.18);color:#F4BC9D}
/* topo: o título não some (é o maior texto da tela, o Google mede ele), só sobe */
.js .sobe{animation:sobe .9s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes sobe{from{transform:translateY(18px)}to{transform:none}}

/* o celular que passa pelas 4 telas */
.ciclo{display:grid;justify-items:center;gap:1.2rem}
.ciclo-cap{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta3)}
.ciclo-grade{display:grid;gap:1.4rem;justify-items:center;width:100%}
@media(min-width:620px){.ciclo-grade{grid-template-columns:auto auto;align-items:center;justify-content:center;gap:2rem}}
.ciclo .cel{width:min(268px,64vw)}
.ciclo-passos{list-style:none;display:grid;gap:.55rem;width:100%;max-width:330px}
@media(max-width:619px){.ciclo-passos{grid-template-columns:1fr 1fr;max-width:none}}
.ciclo-passos button{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;text-align:left;padding:.75rem .9rem;border-radius:14px;border:1px solid var(--linha);color:var(--tinta2);overflow:hidden;transition:background-color .3s,border-color .3s,color .3s}
.ciclo-passos .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:.8rem;border:1px solid var(--linha)}
.ciclo-passos .t{font-size:.95rem;line-height:1.25}
.ciclo-passos b{display:block;color:var(--tinta);font-weight:600;font-size:1rem}
.ciclo-passos button.on{background:rgba(245,241,232,.08);border-color:rgba(232,160,122,.55);color:var(--tinta)}
.ciclo-passos button.on .n{background:var(--terra-viva);border-color:var(--terra-viva);color:#1a1f1d}
.ciclo-passos button.foi .n{border-color:var(--terra-clara);color:var(--terra-clara)}
.ciclo-passos .barra{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--terra-viva);transform:scaleX(0);transform-origin:left}
.js .ciclo-passos button.on .barra{animation:barra var(--dur,3s) linear forwards}
@keyframes barra{to{transform:scaleX(1)}}
.sem-animacao .ciclo-passos .barra{display:none}

/* as 4 portas */
.portas{display:grid;gap:1rem}
@media(min-width:680px){.portas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.portas{grid-template-columns:repeat(4,1fr)}}
.porta{position:relative;display:flex;flex-direction:column;min-height:300px;padding:1.5rem 1.4rem 1.4rem;border-radius:24px;background:var(--papel);border:1px solid var(--linha-c);text-decoration:none;overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
.porta:hover{transform:translateY(-6px);border-color:var(--terra);box-shadow:0 26px 40px -30px rgba(23,60,58,.55)}
.porta-n{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.05em;color:var(--terra-forte);text-transform:uppercase}
.porta .icone{margin-top:1.1rem}
.porta h3{font-size:1.5rem;margin-top:1rem}
.porta p{margin:.6rem 0 1.2rem;color:var(--tinta-c2);font-size:1rem}
@media(max-width:679px){.porta-ir{margin-top:auto}}
.porta-ir{font-weight:600;color:var(--terra-forte);display:inline-flex;gap:.4rem;align-items:center}
.porta-ir i{font-style:normal;transition:transform .3s var(--ease)}
.porta:hover .porta-ir i{transform:translateX(5px)}
/* a telinha do serviço: uma janela com o topo da tela do celular, que desliza no mouse */
.porta-tela{display:block;margin-top:auto;height:118px;border-radius:14px;overflow:hidden;border:1px solid var(--linha-c);background:#fff}
.porta-tela img{width:100%;height:auto;transform:translateY(-6%);transition:transform 1.2s var(--ease)}
.porta:hover .porta-tela img{transform:translateY(-22%)}
.porta-ir{padding-top:1rem}
@media(max-width:679px){.porta{min-height:0}.porta-tela{display:none}}
.porta.breve{background:transparent;border-style:dashed;border-width:1.5px}
.porta .chip{position:absolute;top:4.35rem;right:1.2rem}

/* a busca que ninguém vê */
.disputa{display:grid;gap:2.6rem;align-items:center}
@media(min-width:900px){.disputa{grid-template-columns:1fr 1fr;gap:4rem}}
.pontos{list-style:none;display:grid;gap:.9rem;margin-top:1.6rem}
.pontos li{display:flex;gap:.8rem;align-items:flex-start;font-size:1.06rem}
.pontos li b{font-family:var(--f-mono);font-size:.8rem;color:var(--terra-forte);margin-top:.25rem;flex:none}
.frase-forte{margin-top:1.8rem;padding-left:1rem;border-left:3px solid var(--terra);font-family:var(--f-titulo);font-size:1.3rem;line-height:1.35}
.busca{background:var(--papel);border:1px solid var(--linha-c);border-radius:24px;padding:1.2rem;box-shadow:0 30px 50px -40px rgba(23,60,58,.6)}
.busca-barra{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-radius:999px;background:#fff;border:1px solid var(--linha-c);font-size:.98rem;color:var(--tinta-c)}
.busca-barra svg{width:18px;height:18px;flex:none;color:var(--tinta-c2)}
.busca-q{white-space:nowrap;overflow:hidden}
.js .busca .busca-q{clip-path:inset(0 100% 0 0)}
.js .busca.vis .busca-q{animation:digita 1.1s steps(28) .2s forwards}
@keyframes digita{to{clip-path:inset(0 0 0 0)}}
.busca-res{display:grid;gap:.6rem;margin-top:1rem}
.res{display:flex;gap:.8rem;align-items:center;padding:.7rem;border-radius:16px;background:#fff;border:1px solid var(--linha-c)}
.res i{flex:none;width:58px;height:58px;border-radius:12px;background:linear-gradient(135deg,#9fb8ad,#5f8a7d)}
.res:nth-child(2) i{background:linear-gradient(135deg,#d9b08c,#b8794f)}
.res:nth-child(3) i{background:linear-gradient(135deg,#a9b9c8,#6f8aa3)}
.res b{display:block;font-size:1rem}
.res small{display:block;color:var(--tinta-c2);font-size:.86rem}
.res .est{color:#7f560c;letter-spacing:.08em;font-size:.86rem}
.res.voce{background:transparent;border-style:dashed}
.res.voce i{background:var(--osso2)}
.res.voce b{color:var(--tinta-c2)}
.res.voce .tag{display:inline-block;margin-top:.2rem;font-family:var(--f-mono);font-size:.72rem;color:var(--terra-forte);text-transform:uppercase;letter-spacing:.05em}
.js .busca .res{opacity:0;transform:translateY(10px)}
.js .busca.vis .res{animation:resEntra .6s var(--ease) forwards}
.js .busca.vis .res:nth-child(1){animation-delay:1.4s}.js .busca.vis .res:nth-child(2){animation-delay:1.55s}
.js .busca.vis .res:nth-child(3){animation-delay:1.7s}.js .busca.vis .res:nth-child(4){animation-delay:2.2s}
@keyframes resEntra{to{opacity:1;transform:none}}
.sem-animacao .busca .res,.sem-animacao .busca .busca-q{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
.nota{margin-top:.8rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-c2);text-align:center}

/* o caminho */
.caminho{position:relative;--p:0}
.cam-est{list-style:none;display:grid;gap:1.4rem;position:relative;padding-left:3.6rem}
.cam-linha{position:absolute;left:23px;top:22px;bottom:22px;width:3px;border-radius:3px;background:var(--linha)}
.cam-linha i{position:absolute;inset:0;border-radius:inherit;background:var(--terra-viva);transform-origin:top;transform:scaleY(var(--p))}
.cam-est li{position:relative;padding:.2rem 0}
.cam-est .ic{position:absolute;left:-3.6rem;top:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--petroleo2);border:1px solid var(--linha);color:var(--tinta3);transition:background-color .4s,color .4s,border-color .4s,opacity .4s,transform .4s var(--ease)}
.cam-est .ic svg{width:22px;height:22px}
.cam-est b{display:block;font-family:var(--f-titulo);font-weight:600;font-size:1.6rem;line-height:1.1}
.cam-est span{color:var(--tinta2)}
/* a etapa que ainda não acendeu fica com o ícone apagado e o título cinza-claro. P72: apagar a
   etapa inteira (opacidade .42) deixava o texto sem contraste (acessibilidade 96 no PageSpeed) */
.js .cam-est li .ic{opacity:.45}
.js .cam-est li:not(.on) b{color:var(--tinta2)}
.js .cam-est li.on .ic,.sem-animacao .cam-est li .ic{opacity:1}
.cam-est li.on .ic{background:var(--terra-viva);border-color:var(--terra-viva);color:#1a1f1d;transform:scale(1.06)}
.cam-est li.fim.on .ic{background:var(--zap);border-color:var(--zap)}
@media(min-width:900px){
  .cam-est{grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:4.4rem 0 0}
  .cam-linha{left:24px;right:auto;top:23px;bottom:auto;width:calc(75% + 1.125rem);height:3px}
  .cam-linha i{transform-origin:left;transform:scaleX(var(--p))}
  .cam-est .ic{left:0;top:-4.4rem}
}
.acelera{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;padding:1.1rem 1.3rem;border-radius:18px;border:1.5px dashed var(--linha);color:var(--tinta2)}
.acelera b{color:var(--tinta)}

/* antes e depois do Tião, arrastando */
.arrasta{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/9;background:#22302d;user-select:none;--pos:50%}
.arrasta img{width:100%;height:100%;object-fit:cover}
.arr-antes{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.arr-linha{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--osso);pointer-events:none}
.arr-linha i{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--osso);box-shadow:0 8px 20px rgba(0,0,0,.35);
  display:grid;place-items:center;font-style:normal;font-family:var(--f-mono);font-size:.95rem;color:var(--tinta-c)}
.arr-rot{position:absolute;top:1rem;padding:.4rem .75rem;border-radius:10px;background:rgba(26,31,29,.78);color:var(--osso);font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.arr-rot.a{left:1rem}.arr-rot.d{right:1rem}
.arrasta input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y}
.arr-dica{margin-top:.9rem;text-align:center;color:var(--tinta-c2);font-size:.95rem}
@media(max-width:600px){.arrasta{aspect-ratio:4/3}}

/* quem sou */
.sobre{display:grid;gap:2rem;align-items:center}
@media(min-width:820px){.sobre{grid-template-columns:auto 1fr;gap:3.5rem}}
.sobre img{width:min(230px,52vw);aspect-ratio:1;border-radius:50%;object-fit:cover;border:6px solid var(--papel);box-shadow:0 20px 40px -26px rgba(23,60,58,.6)}
.sobre h2{margin-top:.8rem}
.sobre .lead{margin-top:1.1rem;color:var(--tinta-c)}
.sobre p+p{margin-top:.9rem;color:var(--tinta-c2)}

/* preço resumido */
.precos{display:grid;gap:.75rem}
.preco-linha{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1rem;align-items:center;padding:1.2rem 1.3rem;border-radius:20px;background:var(--petroleo2);border:1px solid var(--linha);text-decoration:none;transition:transform .3s var(--ease),border-color .3s}
.preco-linha:hover{transform:translateY(-3px);border-color:rgba(232,160,122,.5)}
.preco-linha .icone{background:rgba(245,241,232,.08);color:var(--terra-clara)}
.pl-nome b{display:block;font-family:var(--f-titulo);font-weight:600;font-size:1.2rem}
.pl-nome small,.pl-valor small{color:var(--tinta2);font-size:.9rem;display:block}
.pl-valor{grid-column:1/-1}
.pl-valor b{font-family:var(--f-titulo);font-weight:600;font-size:1.65rem;color:var(--tinta)}
.pl-ir{grid-column:1/-1;color:var(--terra-clara);font-weight:600;font-size:.95rem}
@media(min-width:820px){.preco-linha{grid-template-columns:auto 1.1fr 1.3fr auto}.pl-valor,.pl-ir{grid-column:auto}}
.precos-nota{margin-top:1.3rem;color:var(--tinta2);font-size:.97rem}

/* =====================================================================
   PÁGINAS DOS SERVIÇOS
   ===================================================================== */
.heroi h1.nome-servico{font-size:clamp(2.8rem,7vw,5.2rem)}
.nome-oficial{display:block;margin-top:.7rem;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;color:var(--tinta3)}
.troca-palco{display:grid;justify-items:center;gap:1.2rem}
.troca-palco .cel-palco{width:100%}
[data-troca] [data-quando]{transition:opacity .6s var(--ease),transform .7s var(--ease)}
[data-estado="antes"] [data-quando="depois"],[data-estado="depois"] [data-quando="antes"]{opacity:0;transform:scale(1.03);pointer-events:none}
.selo-sit{position:absolute;bottom:12%;left:50%;margin-left:70px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.03em;background:var(--papel);color:var(--tinta-c);padding:.5rem .8rem;border-radius:12px;box-shadow:0 12px 24px -12px rgba(0,0,0,.5);white-space:nowrap}
.selo-sit b{color:var(--terra-forte);font-weight:500}
@media(max-width:620px){.selo-sit{margin-left:0;left:auto;right:0;bottom:6%;white-space:normal;max-width:52%}}
.flutua{will-change:transform}
.rodando .flutua{animation:flutua 5s ease-in-out infinite}
@keyframes flutua{50%{transform:translateY(-10px)}}
.lista-mais{list-style:none;display:grid;gap:.6rem;color:var(--tinta-c2)}
.lista-mais li{display:flex;gap:.7rem}
.lista-mais li::before{content:'+';flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--osso2);color:var(--terra-forte);font-weight:600;line-height:1}
.onde{list-style:none;display:grid;gap:.7rem;margin-top:1.4rem}
.onde li{display:flex;gap:.8rem;align-items:center;font-weight:500}
.onde .icone{width:40px;height:40px;border-radius:12px;flex:none}
.repara{margin-top:1.2rem;padding:1rem 1.1rem;border-radius:16px;background:var(--osso2);color:var(--tinta-c);font-weight:500}

/* Google: o perfil que se monta */
.monta{display:grid;gap:2.4rem;align-items:start}
@media(min-width:900px){.monta{grid-template-columns:.95fr 1.05fr;gap:4rem}}
/* no celular o perfil vem primeiro: quem toca na peça vê ela acender logo embaixo */
@media(max-width:899px){.monta{gap:1.4rem}.monta>.g-cel{order:-1}}
.monta-bts{display:grid;gap:.6rem}
.monta-bts button{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.05rem;border-radius:16px;background:var(--papel);border:1px solid var(--linha-c);text-align:left;font-weight:600;transition:border-color .3s,background-color .3s}
.monta-bts button::before{content:'';flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--linha-c);transition:background-color .3s,border-color .3s}
.monta-bts button[aria-pressed="true"]{border-color:var(--verde)}
.monta-bts button[aria-pressed="true"]::before{border-color:var(--verde);background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F1E8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.monta-conta{margin-top:1.2rem;font-family:var(--f-mono);font-size:.85rem;color:var(--tinta-c2)}
.monta-porque{margin-top:.6rem;min-height:3.2em;font-family:var(--f-titulo);font-size:1.2rem;line-height:1.35;color:var(--tinta-c)}
.monta-fim{display:none;margin-top:.8rem;color:var(--verde);font-weight:600}
.completo .monta-fim{display:block}
.g-cel{width:min(360px,100%);margin-inline:auto;background:#fff;border-radius:28px;border:1px solid var(--linha-c);box-shadow:0 30px 60px -40px rgba(23,60,58,.7);overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#202124}
.g-topo{padding:1rem 1rem .7rem}
.g-logo{display:block;text-align:center;font-size:1.5rem;font-weight:500;letter-spacing:-.02em;margin-bottom:.6rem}
.g-logo span:nth-child(1),.g-logo span:nth-child(4){color:#4285f4}.g-logo span:nth-child(2),.g-logo span:nth-child(6){color:#ea4335}
.g-logo span:nth-child(3){color:#fbbc05}.g-logo span:nth-child(5){color:#34a853}
.g-busca{display:flex;align-items:center;gap:.5rem;border:1px solid #dfe1e5;border-radius:999px;padding:.6rem .9rem;font-size:.92rem}
.g-busca svg{width:16px;height:16px;color:#5f6368;flex:none}
.g-mapa{position:relative;height:118px;background:#e8eae6;overflow:hidden}
.g-mapa::before{content:'';position:absolute;inset:-20%;background:
  linear-gradient(28deg,transparent 46%,#fff 46% 49%,transparent 49%),
  linear-gradient(-62deg,transparent 58%,#fff 58% 61%,transparent 61%),
  radial-gradient(120px 70px at 75% 75%,#bcd9e8 60%,transparent 62%)}
.g-mapa svg{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-80%);color:#ea4335}
.g-ficha{padding:1rem;display:grid;gap:.55rem}
.g-fotos{display:grid;grid-template-columns:2fr 1fr 1fr;gap:4px;border-radius:12px;overflow:hidden;height:92px}
.g-fotos img{width:100%;height:100%;object-fit:cover}
.g-nome{font-size:1.2rem;font-weight:400;color:#1a0dab}
.g-cat{font-size:.85rem;color:#4d5156}
.g-est{color:#8a4b00;font-size:.9rem;letter-spacing:.05em}
.g-est small{color:#4d5156;letter-spacing:0;margin-left:.3rem}
.g-hor{font-size:.88rem;color:#137333;display:flex;align-items:center;gap:.4rem}
.g-hor i{width:8px;height:8px;border-radius:50%;background:#137333}
.g-bts{display:flex;gap:.45rem;flex-wrap:wrap}
.g-bts span{padding:.42rem .8rem;border-radius:999px;border:1px solid #dadce0;font-size:.82rem;color:#1a5fc8;font-weight:600}
.g-bts span.z{background:#1a5fc8;color:#fff;border-color:#1a5fc8}
.g-resp{font-size:.84rem;color:#4d5156;background:#f1f3f4;border-radius:10px;padding:.55rem .7rem}
.g-resp b{display:block;color:#202124;font-size:.78rem;margin-bottom:.15rem}
.js .montando [data-peca]{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .montando [data-peca]:not(.on){opacity:.14;transform:scale(.97)}

/* Instagram: o perfil antes e depois, dentro do celular */
.ig{position:absolute;inset:0;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:11px;padding:34px 10px 10px;overflow:hidden}
.ig-cab{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13px;margin-bottom:10px}
.ig-perf{display:flex;align-items:center;gap:12px}
.ig-av{width:62px;height:62px;border-radius:50%;flex:none;object-fit:cover;background:#ddd}
.ig-av.anel{padding:2px;background:linear-gradient(45deg,#f9ce34,#ee2a7b)}
.ig-num{display:flex;gap:12px;text-align:center}
.ig-num b{display:block;font-size:13px}
.ig-bio{margin-top:8px;line-height:1.35}
.ig-bio b{display:block}
.ig-bio .cinza{color:#737373}
.ig-bts{display:flex;gap:5px;margin-top:8px}
.ig-bts span{flex:1;text-align:center;padding:5px;border-radius:7px;background:#efefef;font-weight:700}
.ig-bts span.azul{background:#0074c2;color:#fff}
.ig-dest{display:flex;gap:9px;margin-top:10px}
.ig-dest span{display:grid;justify-items:center;gap:3px;font-size:9px}
.ig-dest img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #dbdbdb;padding:1px}
.ig-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:10px -10px 0}
.ig-grade>*{aspect-ratio:1;background:#f1f1f1}
.ig-grade img{width:100%;height:100%;object-fit:cover}
.ig-vazio{display:grid;place-items:center;color:#bdbdbd;font-size:18px}
.ig-vazio::before{content:"+"}
.js [data-estado="depois"] .ig-grade img{animation:igEntra .5s var(--ease) both}
.js [data-estado="depois"] .ig-grade img:nth-child(2){animation-delay:.08s}.js [data-estado="depois"] .ig-grade img:nth-child(3){animation-delay:.16s}
.js [data-estado="depois"] .ig-grade img:nth-child(4){animation-delay:.24s}.js [data-estado="depois"] .ig-grade img:nth-child(5){animation-delay:.32s}
.js [data-estado="depois"] .ig-grade img:nth-child(6){animation-delay:.4s}
@keyframes igEntra{from{opacity:0;transform:scale(.8)}}

/* os 4 posts que viram */
.posts4{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.posts4{grid-template-columns:repeat(4,1fr)}}
.post{position:relative;aspect-ratio:4/5;perspective:1100px;text-align:left;border-radius:22px;display:block;width:100%}
.post-dentro{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.post.virado .post-dentro{transform:rotateY(180deg)}
.post-f,.post-v{position:absolute;inset:0;border-radius:22px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.post-f img{width:100%;height:100%;object-fit:cover}
.post-f::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,26,24,.88))}
.post-f span{position:absolute;left:.7rem;right:.7rem;bottom:.7rem;z-index:1;color:#fff;background:rgba(20,26,24,.82);padding:.55rem .7rem;border-radius:12px}
.post-f small{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.post-f b{display:block;font-family:var(--f-titulo);font-weight:600;font-size:1.25rem;line-height:1.15;margin-top:.2rem}
.post-f em{position:absolute;top:.8rem;right:.8rem;z-index:1;font-style:normal;font-family:var(--f-mono);font-size:.68rem;background:rgba(245,241,232,.94);color:var(--tinta-c);padding:.3rem .55rem;border-radius:8px}
.post-v{transform:rotateY(180deg);background:var(--petroleo);color:var(--tinta);padding:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.post-v small{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--terra-clara)}
.post-v p{font-size:.98rem;line-height:1.4}
.post-v .ex{margin-top:auto;padding:.7rem .8rem;border-radius:12px;background:rgba(245,241,232,.08);font-size:.9rem;color:var(--tinta2)}
@media(max-width:520px){.post-f b{font-size:1.02rem}.post-v{padding:.85rem}.post-v p{font-size:.86rem}.post-v .ex{font-size:.78rem;padding:.55rem}}

/* Site: as partes acendendo no celular */
.partes{display:grid;gap:1rem}
@media(min-width:900px){.partes{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}}
.partes-palco{position:sticky;top:76px;z-index:2;display:flex;justify-content:center;padding:.6rem 0}
@media(max-width:899px){.partes-palco{top:62px;background:var(--osso2);margin-inline:-1.3rem;padding:.5rem 0 .7rem}}
.partes-palco .cel{width:auto;padding:7px;border-radius:30px}
.partes-palco .tela{height:min(540px,48svh);width:auto;aspect-ratio:624/1350;border-radius:24px}
@media(min-width:900px){.partes-palco .tela{height:min(560px,72svh)}}
.mini-site{position:absolute;inset:0 0 auto;transform:translateY(var(--y,0));transition:transform .8s var(--ease);font-family:var(--f-texto);font-size:10px;line-height:1.3;color:var(--tinta-c);background:var(--osso)}
.ms-cab{display:flex;justify-content:space-between;align-items:center;padding:30px 12px 6px;font-family:var(--f-titulo);font-size:13px;font-weight:600}
.ms-cab i{font-style:italic;color:var(--terra)}
.ms-bloco{position:relative;margin:6px 8px;padding:8px;border-radius:12px;border:2px solid transparent;transition:border-color .4s,box-shadow .4s,opacity .4s}
.ms-bloco.on{border-color:var(--terra-viva);box-shadow:0 0 0 4px rgba(224,122,79,.2)}
.js .partes .ms-bloco:not(.on){opacity:.45}
.sem-animacao .partes .ms-bloco{opacity:1!important}
.ms-topo{padding:0;overflow:hidden}
.ms-topo img{width:100%;height:92px;object-fit:cover;border-radius:10px 10px 0 0}
.ms-topo div{padding:8px}
.ms-t{font-family:var(--f-titulo);font-weight:600;font-size:15px;line-height:1.1}
.ms-btn{display:inline-block;margin-top:6px;padding:5px 10px;border-radius:999px;background:var(--zap);color:#0d2a17;font-weight:600;font-size:9.5px}
.ms-2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.ms-2 img{width:100%;height:54px;object-fit:cover;border-radius:8px}
.ms-2 span{display:block;font-weight:600;margin-top:3px}
.ms-3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}
.ms-3 img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.ms-h{font-family:var(--f-mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--terra-forte)}
.ms-est{color:#7f560c;letter-spacing:.06em;margin-top:4px}
.ms-linha{height:6px;border-radius:3px;background:var(--linha-c);margin-top:5px}
.ms-linha.c{width:60%}
.ms-quem{display:flex;gap:6px;align-items:center;margin-top:6px}
.ms-quem img{width:26px;height:26px;border-radius:50%}
.ms-q{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--linha-c);font-weight:600}
.ms-q i{font-style:normal;color:var(--terra)}
.ms-zap{margin:8px 8px 14px;padding:9px;border-radius:999px;background:var(--zap);color:#0d2a17;font-weight:700;text-align:center;font-size:11px}
.partes-lista{list-style:none;display:grid;gap:0}
.partes-lista li{min-height:44svh;display:flex;align-items:center;padding:.8rem 0}
@media(min-width:900px){.partes-lista li{min-height:58svh}}
.partes-lista li>div{width:100%;padding:1.3rem 1.4rem;border-radius:20px;border:1px solid var(--linha-c);background:var(--papel);transition:border-color .4s,transform .4s var(--ease),box-shadow .4s}
.partes-lista li.on>div{border-color:var(--terra);transform:translateX(6px);box-shadow:0 20px 34px -28px rgba(23,60,58,.6)}
.partes-lista small{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--terra-forte)}
.partes-lista h3{margin:.4rem 0}
.partes-lista p{color:var(--tinta-c2)}
.sem-animacao .partes-lista li{min-height:0}

/* Instagram x site */
.tabela-rola{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:22px}
.compara{width:100%;min-width:520px;border-collapse:separate;border-spacing:0;background:var(--papel);border:1px solid var(--linha-c);border-radius:22px;overflow:hidden}
.compara th,.compara td{padding:1rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linha-c)}
.compara tr:last-child td,.compara tr:last-child th{border-bottom:0}
.compara thead th{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-c2);font-weight:500;background:var(--osso2)}
/* a primeira coluna é o cabeçalho de cada linha (P72, leitor de tela) */
.compara tbody th{font-weight:600;width:34%}
.compara td:last-child{color:var(--verde);font-weight:600}
@media(max-width:560px){.compara th,.compara td{padding:.8rem .7rem;font-size:.92rem}}
.depois-tabela{margin-top:1.4rem;font-family:var(--f-titulo);font-size:1.3rem;line-height:1.35;max-width:40rem}

/* Anúncios: o radar de pessoas em volta de Cananéia */
.radar-palco{position:relative;width:min(420px,88vw);margin-inline:auto}
.radar{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(66,107,97,.45) 0 30%,transparent 70%);border:1px solid var(--linha)}
.radar::before,.radar::after{content:'';position:absolute;inset:18%;border-radius:50%;border:1px solid var(--linha)}
.radar::after{inset:36%}
.radar-centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:grid;justify-items:center;gap:.35rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta)}
.radar-centro i{width:18px;height:18px;border-radius:50%;background:var(--terra-viva);box-shadow:0 0 0 6px rgba(224,122,79,.22)}
.onda{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--terra-clara);transform:translate(-50%,-50%) scale(.05);opacity:0}
.rodando .onda{animation:onda 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.rodando .onda+.onda{animation-delay:1.8s}
@keyframes onda{0%{transform:translate(-50%,-50%) scale(.05);opacity:.9}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.pessoa{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--tinta3);opacity:.55}
.rodando .pessoa{animation:acende 3.6s infinite;animation-delay:var(--d)}
@keyframes acende{0%,8%{background:var(--tinta3);opacity:.55;transform:none}14%,40%{background:var(--terra-clara);opacity:1;transform:scale(1.5)}60%,100%{background:var(--tinta3);opacity:.55;transform:none}}
.radar-cel{position:absolute;right:-8%;bottom:-10%;width:40%;z-index:3}
.radar-cel .cel{width:100%;border-radius:24px;padding:6px}
.radar-cel .cel::after{display:none}
.radar-cel .tela{border-radius:19px}
@media(max-width:620px){.radar-cel{right:-2%;bottom:-6%}}

/* pra quem o anúncio aparece */
.publico{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.publico{grid-template-columns:1fr 1fr;gap:4rem}}
.publico-bts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.publico-bts button{padding:.75rem 1.1rem;border-radius:999px;border:1.5px solid var(--linha-c);background:var(--papel);font-weight:600;transition:background-color .3s,border-color .3s,color .3s}
.publico-bts button[aria-pressed="true"]{background:var(--tinta-c);border-color:var(--tinta-c);color:var(--osso)}
.publico-txt{margin-top:1.3rem;min-height:4.8em;font-family:var(--f-titulo);font-size:1.25rem;line-height:1.4}
.mapa-pub{position:relative;aspect-ratio:5/4;border-radius:24px;overflow:hidden;background:#dfe6dc;border:1px solid var(--linha-c)}
.mapa-pub::before{content:'';position:absolute;inset:0;background:
  radial-gradient(260px 200px at 86% 74%,#b9d3df 60%,transparent 62%),
  linear-gradient(115deg,transparent 40%,rgba(255,255,255,.9) 40% 42.5%,transparent 42.5%),
  linear-gradient(20deg,transparent 62%,rgba(255,255,255,.75) 62% 64%,transparent 64%)}
.mp-loja{position:absolute;left:58%;top:52%;transform:translate(-50%,-100%);display:grid;justify-items:center;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-c);z-index:2}
.mp-loja svg{width:30px;height:30px;color:var(--terra)}
.mp-p{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#9aa9a2;border:2px solid #fff;transition:background-color .4s,transform .4s var(--ease)}
[data-ativo="perto"] .mp-p.perto,[data-ativo="turista"] .mp-p.turista,[data-ativo="site"] .mp-p.site{background:var(--terra);transform:scale(1.35)}
.mp-p.site::after{content:'';position:absolute;right:-9px;top:-9px;width:10px;height:10px;border-radius:3px;background:var(--petroleo);opacity:0;transition:opacity .4s}
[data-ativo="site"] .mp-p.site::after{opacity:1}
.mp-legenda{position:absolute;left:4%;top:6%;font-family:var(--f-mono);font-size:.62rem;color:var(--tinta-c2);text-transform:uppercase;letter-spacing:.05em}
.trilho{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1.6rem}
.trilho span{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .8rem;border-radius:999px;background:var(--papel);border:1px solid var(--linha-c);font-weight:600;font-size:.94rem}
.trilho span.ok::before{content:'';width:16px;height:16px;border-radius:50%;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F1E8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.trilho span.ult{border-style:dashed;color:var(--terra-forte)}
.trilho i{font-style:normal;color:var(--tinta-c2)}

/* =====================================================================
   RODADA P67 (16/10): abertura, topo em 3D, portas, quem sou, entradas
   ===================================================================== */

/* ---------- abertura (só na 1ª visita da sessão, só na principal) ----------
   A busca do dono de negócio se escreve, o resultado dele aparece aceso, uma
   linha terracota corta a tela e ela abre como cortina. Sai no primeiro toque. */
.abre{display:none}
.js.abertura .abre{display:block;position:fixed;inset:0;z-index:600}
.abre-cima,.abre-baixo{position:absolute;left:0;right:0;height:50.2%;background:var(--escuro);transition:transform .9s cubic-bezier(.76,0,.24,1)}
.abre-cima{top:0}.abre-baixo{bottom:0}
.abre-meio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;transition:opacity .3s ease,transform .6s var(--ease)}
.abre-marca{display:flex;align-items:center;gap:.6rem;font-family:var(--f-titulo);font-size:1.05rem;font-weight:600;color:var(--tinta2);opacity:0;animation:abreEntra .5s var(--ease) .05s forwards}
.abre-marca b{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--petroleo);border:1px solid var(--linha);color:var(--terra-viva);font-size:.78rem}
.abre-busca{display:flex;align-items:center;gap:.7rem;width:min(470px,86vw);height:58px;padding:0 1.2rem;border-radius:29px;background:#222826;border:1px solid var(--linha);color:var(--tinta);font-size:1.06rem;opacity:0;animation:abreEntra .5s var(--ease) .15s forwards}
.abre-busca svg{width:20px;height:20px;color:var(--tinta3);flex:none}
@media(max-width:440px){.abre-busca{padding:0 1rem;gap:.55rem;font-size:clamp(.82rem,4.1vw,1rem);white-space:nowrap;overflow:hidden}}
.abre-cursor{flex:0 0 2px;height:1.2em;background:var(--terra-viva);animation:pisca .8s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
@keyframes abreEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.abre-res{display:grid;gap:.5rem;width:min(470px,86vw)}
.abre-res>span{opacity:0;transform:translateY(12px)}
.ar-cinza{height:46px;border-radius:14px;background:#222826;border:1px solid var(--linha)}
.ar-voce{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.8rem;padding:.7rem 1rem;border-radius:14px;background:var(--petroleo2);border:1.5px solid var(--terra-viva);box-shadow:0 0 0 6px rgba(224,122,79,.12)}
.ar-voce i{grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--terra-viva);color:var(--escuro)}
.ar-voce i svg{width:20px;height:20px}
.ar-voce b{color:var(--tinta);font-size:1rem}
.ar-voce small{color:var(--terra-clara);font-size:.85rem}
.achou .abre-res>span{animation:resEntra .45s var(--ease) forwards}
.achou .abre-res>span:nth-child(2){animation-delay:.08s}
.achou .abre-res>span:nth-child(3){animation-delay:.22s}
.abre-linha{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--terra-viva);transform:scaleX(0)}
.js.abertura.abrindo .abre-linha{transform:scaleX(1);transition:transform .34s var(--ease)}
.js.abertura.abrindo .abre-meio{opacity:0;transform:scale(.96)}
.js.abertura.abriu .abre{pointer-events:none}
.js.abertura.abriu .abre-cima{transform:translateY(-100%)}
.js.abertura.abriu .abre-baixo{transform:translateY(100%)}
.js.abertura.abriu .abre-linha{opacity:0;transition:opacity .25s ease .15s}

/* ---------- título palavra por palavra ---------- */
.pal{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.pal>span{display:inline-block}
.js .pal>span{transform:translateY(108%)}
.js.topo-vai .pal>span{animation:palSobe .85s var(--ease) forwards;animation-delay:calc(var(--i,0)*55ms)}
@keyframes palSobe{to{transform:none}}
/* o resto do topo espera a cortina abrir */
.js.abertura:not(.topo-vai) .heroi .entra{animation-play-state:paused}
.risco{position:relative;display:inline-block;white-space:nowrap}
.risco svg{position:absolute;left:-2%;right:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible}
.risco path{fill:none;stroke:var(--terra-viva);stroke-width:5;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240}
.topo-vai .risco path{animation:risca .7s var(--ease) .75s forwards}
.sem-animacao .risco path,.sem-js .risco path{stroke-dashoffset:0}
@keyframes risca{to{stroke-dashoffset:0}}
.sem-animacao .pal>span{transform:none!important;animation:none!important}

/* ---------- a cena em 3D ---------- */
/* o texto fica preso no alto, e o título reserva as 4 linhas dele: centralizado, ele pulava quando a letra de verdade chegava (CLS) */
.heroi-principal{min-height:min(100svh,980px);display:flex;align-items:flex-start}
.heroi-principal h1{min-height:4.36em}
/* P72: com a foto do celular do lado (sem 3D), o texto centralizado pulava quando a fonte chegava */
.heroi-principal .heroi-grade{align-items:start}
/* no tablet o título cabe em 2 ou 3 linhas: a reserva de 4 deixava um buraco */
@media(min-width:600px) and (max-width:979px){.heroi-principal h1{min-height:3.3em}}
@media(min-width:980px){.heroi-principal{padding-top:clamp(7rem,13vh,9rem)}}
.heroi-principal .wrap{width:min(1240px,100% - 2.6rem)}
@media(min-width:900px){.heroi-principal .wrap{width:min(1240px,100% - 5rem)}}
.palco3d{position:relative;width:100%;max-width:560px;aspect-ratio:560/620;margin-inline:auto;perspective:1500px;--k:1}
.balanco,.mundo{position:absolute;inset:0;transform-style:preserve-3d}
.mundo{transform:rotateX(var(--rx,6deg)) rotateY(var(--ry,-10deg))}
/* no toque, sem mouse: a cena balança devagar sozinha */
@media(hover:none){.rodando .balanco{animation:balanca 9s ease-in-out infinite}}
@keyframes balanca{0%,100%{transform:rotateY(-7deg) rotateX(2deg)}50%{transform:rotateY(7deg) rotateX(-2deg)}}
.fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(-1px)}
.fio-base{fill:none;stroke:rgba(245,241,232,.3);stroke-width:2;stroke-dasharray:5 7}
.fio-luz{fill:none;stroke:var(--terra-viva);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:14 100;stroke-dashoffset:14;opacity:0}
.fio-zap{stroke:var(--zap)}
.palco3d[data-passo="0"] .fio-google,.palco3d[data-passo="1"] .fio-insta,.palco3d[data-passo="2"] .fio-site,.palco3d[data-passo="3"] .fio-zap{animation:pulso 1.15s cubic-bezier(.45,0,.3,1) .1s forwards}
@keyframes pulso{0%{stroke-dashoffset:14;opacity:1}85%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
.cel3d{position:absolute;left:50%;top:50%;width:212px;transform:translate(-50%,-50%) scale(var(--k));transform-style:preserve-3d}
.cel3d .cel{width:100%;border-radius:40px;padding:9px;transform-style:preserve-3d}
/* espessura: uma placa atrás, que aparece quando a cena gira */
.cel3d .cel::before{content:'';position:absolute;inset:3px;border-radius:38px;background:#0f1211;transform:translateZ(-16px);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.cel3d .tela{border-radius:32px}
.no{position:absolute;left:50%;top:50%;width:172px;transform:translate(-50%,-50%) translate3d(calc(var(--x) * var(--k)),calc(var(--y) * var(--k)),var(--z)) scale(var(--k));transform-style:preserve-3d}
.no-in{position:relative;transition:transform .5s var(--ease),filter .5s}
.rodando .no-in{animation:flutua 6s ease-in-out infinite;animation-delay:calc(var(--d) * -2s)}
.no-rot{position:absolute;top:-1.55rem;left:.2rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta3);transition:color .4s}
.nc{border-radius:16px;background:#fff;color:#202124;box-shadow:0 22px 40px -18px rgba(0,0,0,.6);border:1.5px solid transparent;transition:border-color .4s,box-shadow .4s,transform .5s var(--ease);font-family:Arial,Helvetica,sans-serif;font-size:11px;overflow:hidden}
.palco3d[data-passo="0"] .no-google .nc,.palco3d[data-passo="1"] .no-insta .nc,.palco3d[data-passo="2"] .no-site .nc,.palco3d[data-passo="3"] .no-zap .nc{border-color:var(--terra-viva);box-shadow:0 0 0 5px rgba(224,122,79,.22),0 26px 44px -18px rgba(0,0,0,.65);transform:scale(1.06)}
.palco3d[data-passo="0"] .no-google .no-rot,.palco3d[data-passo="1"] .no-insta .no-rot,.palco3d[data-passo="2"] .no-site .no-rot,.palco3d[data-passo="3"] .no-zap .no-rot{color:var(--terra-clara)}
.nc-google{display:flex;gap:9px;align-items:center;padding:11px}
.nc-pino{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fde7e4;color:#d93025}
.nc-pino svg{width:19px;height:19px}
.nc-google b{display:block;color:#1a0dab;font-size:12.5px;font-weight:400}
.nc-est{display:block;color:#8a4b00;letter-spacing:.05em}
.nc-google small{display:flex;align-items:center;gap:4px;color:#137333;margin-top:2px}
.nc-google small i{width:6px;height:6px;border-radius:50%;background:#137333}
.nc-site{background:var(--osso);color:var(--tinta-c);font-family:var(--f-texto)}
.nc-barra{display:flex;gap:4px;padding:6px 8px;background:#e6dfd2}
.nc-barra i{width:6px;height:6px;border-radius:50%;background:#b9ae9c}
.nc-site img{width:100%;height:74px;object-fit:cover}
.nc-site b{display:block;font-family:var(--f-titulo);font-size:14px;line-height:1.1;padding:7px 9px 0}
.nc-btn{display:inline-block;margin:6px 9px 10px;padding:5px 9px;border-radius:999px;background:var(--zap);color:#0d2a17;font-weight:700;font-size:10px}
.nc-insta{padding-bottom:6px}
.nc-cab{display:flex;align-items:center;gap:6px;padding:7px 8px;font-weight:700}
.nc-cab img{width:22px;height:22px;border-radius:50%}
.nc-insta>img{width:100%;aspect-ratio:1;object-fit:cover}
.nc-acoes{display:block;padding:5px 8px 0;letter-spacing:.3em;color:#262626}
.nc-zap{background:#e7ddd3;padding:9px;display:grid;gap:6px}
.nc-msg{background:#fff;border-radius:10px 10px 10px 3px;padding:7px 9px;line-height:1.3;max-width:92%;font-size:11.5px}
.nc-msg.eu{justify-self:end;background:#d9fdd3;border-radius:10px 10px 3px 10px}
.palco3d[data-passo="3"] .nc-msg{animation:msgEntra .5s var(--ease) both}
.palco3d[data-passo="3"] .nc-msg.eu{animation-delay:.6s}
@keyframes msgEntra{from{opacity:0;transform:translateY(8px) scale(.94)}}
/* a cena se monta ao abrir: o celular sobe, os cartões vêm do fundo e os fios se desenham */
.js .palco3d .cel3d{transform:translate(-50%,-50%) scale(var(--k)) translateY(60px) translateZ(-200px)}
.js .palco3d .no{opacity:0;transform:translate(-50%,-50%) translate3d(calc(var(--x) * var(--k) * .3),calc(var(--y) * var(--k) * .3),-300px) scale(var(--k))}
.js .palco3d .fio-base{stroke-dashoffset:300;stroke-dasharray:5 7}
.js.topo-vai .palco3d .cel3d{transition:transform 1.1s var(--ease) .15s;transform:translate(-50%,-50%) scale(var(--k))}
.js.topo-vai .palco3d .no{transition:transform 1.1s var(--ease),opacity .6s ease;transition-delay:calc(var(--d) * 1s - .3s);opacity:1;transform:translate(-50%,-50%) translate3d(calc(var(--x) * var(--k)),calc(var(--y) * var(--k)),var(--z)) scale(var(--k))}
.js.topo-vai .palco3d .fio-base{animation:fioDesenha 1.2s var(--ease) 1.1s forwards}
@keyframes fioDesenha{to{stroke-dashoffset:0}}
.sem-animacao .palco3d .cel3d,.sem-animacao .palco3d .no{opacity:1!important}
@media(max-width:979px){.palco3d{max-width:500px;margin-top:.5rem}}
@media(max-width:560px){.no-rot{font-size:.62rem;top:-1.4rem}}
.rola-dica{position:absolute;left:50%;bottom:1.4rem;width:26px;height:42px;margin-left:-13px;border-radius:14px;border:1.5px solid var(--linha);display:none}
.rola-dica i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--terra-clara)}
@media(min-width:980px) and (min-height:760px){.rola-dica{display:block}}
.rola-dica i{animation:rolaDica 1.8s ease-in-out infinite}
@keyframes rolaDica{0%{transform:none;opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ---------- as portas: o site em destaque e bem clicável ---------- */
@media(min-width:1100px){
  .portas{grid-template-columns:1.35fr 1fr 1fr}
  .porta.destaque{grid-row:span 2}
  .porta.breve{grid-column:2/4}
}
.porta{transform-style:preserve-3d}
.porta.destaque{background:var(--petroleo);color:var(--tinta);border-color:transparent}
.porta.destaque .porta-n{color:var(--terra-clara)}
.porta.destaque p{color:var(--tinta2)}
.porta.destaque .icone{background:rgba(245,241,232,.1);color:var(--terra-clara)}
.porta.destaque .porta-tela{height:auto;flex:1;min-height:150px;max-height:330px;border-color:var(--linha)}
.porta.destaque .porta-ir{color:var(--tinta)}
.porta.destaque h3{font-size:2rem}
.porta.breve{min-height:0}
@media(min-width:1100px){.porta.breve{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:1.4rem}
  .porta.breve .porta-n{grid-column:1/-1;margin-bottom:.4rem}.porta.breve .icone{margin:0}.porta.breve h3{margin:0}.porta.breve p{grid-column:2;margin:.3rem 0 0}.porta.breve .porta-tela{display:none}.porta.breve .porta-ir{grid-column:3;grid-row:2/4;padding:0}.porta.breve .chip{top:1.3rem}}
.porta-ir{align-self:flex-start;margin-top:.2rem;padding:.6rem 1rem!important;border-radius:999px;background:var(--osso2);transition:background-color .3s,color .3s,transform .3s var(--ease)}
.porta:hover .porta-ir{background:var(--terra);color:#fff}
.porta.destaque .porta-ir{background:var(--terra-viva);color:var(--escuro)}
.porta.destaque:hover .porta-ir{background:var(--terra-clara)}
.chip-verde{background:var(--zap);color:#0d2a17}
.porta .chip{top:4.35rem}
.porta.destaque .chip{top:4.35rem}
/* brilho que segue o mouse dentro da porta */
.porta::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(224,122,79,.14),transparent 60%)}
.porta:hover::after{opacity:1}

/* ---------- o caminho: uma luz corre na linha ---------- */
.cam-linha b{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--terra-clara);box-shadow:0 0 0 6px rgba(232,160,122,.18);left:-4.5px;top:calc(var(--p) * 100% - 6px)}
@media(min-width:900px){.cam-linha b{top:-4.5px;left:calc(var(--p) * 100% - 6px)}}

/* ---------- passos ligados por uma linha que se desenha ---------- */
.passos-ligados{position:relative}
.passos-ligados li{position:relative}
.passos-ligados li::before{display:grid!important;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--terra);color:#fff!important;font-size:.85rem!important}
.js .passos-ligados li{opacity:0;transform:translateY(20px)}
.js .passos-ligados.vis li{animation:resEntra .7s var(--ease) forwards}
.js .passos-ligados.vis li:nth-child(2){animation-delay:.15s}.js .passos-ligados.vis li:nth-child(3){animation-delay:.3s}.js .passos-ligados.vis li:nth-child(4){animation-delay:.45s}
.sem-animacao .passos-ligados li{opacity:1!important;transform:none!important;animation:none!important}
@media(min-width:760px){
  .passos-ligados::after{content:'';position:absolute;left:3%;right:3%;top:2.8rem;height:2px;background:var(--terra);transform:scaleX(0);transform-origin:left;z-index:0;opacity:.35}
  .passos-ligados.vis::after{transition:transform 1.2s var(--ease) .2s;transform:scaleX(1)}
  .passos-ligados li{z-index:1}
}

/* ---------- quem sou, maior ---------- */
.sobre-grande{display:grid;gap:2.4rem;align-items:center}
@media(min-width:900px){.sobre-grande{grid-template-columns:.8fr 1.2fr;gap:4.5rem}}
.sobre-foto{position:relative;width:min(340px,74vw);aspect-ratio:1;margin-inline:auto}
.sobre-foto img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;object-fit:cover;border:8px solid var(--papel);box-shadow:0 30px 60px -30px rgba(23,60,58,.65)}
.foto-anel{position:absolute;inset:-14px;border-radius:50%;border:2px dashed rgba(184,92,56,.45)}
.quem.rodando .foto-anel{animation:gira 30s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.sobre-grande h2{margin-top:.8rem;font-size:clamp(2.2rem,4.4vw,3.4rem)}
.fatos{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 1.5rem}
.fatos li{padding:.75rem 1rem;border-radius:16px;background:var(--papel);border:1px solid var(--linha-c);min-width:7.5rem}
.fatos b{display:block;font-family:var(--f-titulo);font-weight:600;font-size:1.5rem;line-height:1.1;color:var(--terra-forte)}
.fatos span{font-size:.92rem;color:var(--tinta-c2)}
.sobre-grande .lead{color:var(--tinta-c)}
.sobre-grande p+p{margin-top:1rem;color:var(--tinta-c2)}
.sobre-grande .frase-forte{color:var(--tinta-c)}

/* ---------- fecho: ondas como o radar do anúncio ---------- */
.fecho{position:relative;overflow:hidden}
.fecho .wrap{position:relative;z-index:1}
.fecho-onda{position:absolute;left:50%;top:50%;width:min(1100px,160vw);aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(232,160,122,.35);transform:translate(-50%,-50%) scale(.1);opacity:0;pointer-events:none}
.fecho.rodando .fecho-onda{animation:onda 5.4s cubic-bezier(.2,.6,.3,1) infinite}
.fecho.rodando .fecho-onda:nth-of-type(2){animation-delay:1.8s}
.fecho.rodando .fecho-onda:nth-of-type(3){animation-delay:3.6s}

/* ---------- entrada das páginas de serviço ----------
   A tela abre com o ícone e o nome do serviço, uma linha passa e ela sobe.
   Toda vez que a página abre. */
.intro-tela{display:none}
.js.intro .intro-tela{display:grid;place-items:center;position:fixed;inset:0;z-index:600;background:var(--petroleo);transition:transform .8s cubic-bezier(.76,0,.24,1)}
.intro-meio{display:grid;justify-items:center;gap:1rem;text-align:center;padding:0 1.5rem;transition:opacity .3s,transform .5s var(--ease)}
.intro-ic{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:var(--terra-viva);color:var(--escuro);transform:scale(0) rotate(-20deg);animation:introIc .6s cubic-bezier(.34,1.56,.64,1) .05s forwards}
.intro-ic svg{width:40px;height:40px}
@keyframes introIc{to{transform:none}}
.intro-n{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-clara);opacity:0;animation:abreEntra .5s var(--ease) .3s forwards}
.intro-nome{font-family:var(--f-titulo);font-weight:600;font-size:clamp(2.4rem,8vw,5rem);line-height:1;color:var(--tinta)}
.intro-nome .pal>span{transform:translateY(108%);animation:palSobe .7s var(--ease) forwards;animation-delay:calc(.35s + var(--i,0)*70ms)}
.intro-linha{width:min(320px,70vw);height:2px;background:var(--terra-viva);transform:scaleX(0);animation:linhaVai .6s var(--ease) .7s forwards}
@keyframes linhaVai{to{transform:scaleX(1)}}
.js.intro.intro-sai .intro-tela{transform:translateY(-100%);pointer-events:none}
.js.intro.intro-sai .intro-meio{opacity:0;transform:translateY(-30px)}
/* o topo da página espera a tela subir */
.js.intro:not(.topo-vai) .heroi .entra,.js.intro:not(.topo-vai) .heroi .sobe{animation-play-state:paused}

/* peças que voam em volta do celular (Google, Instagram, site) */
.pecas{position:absolute;inset:0;pointer-events:none}
.peca{position:absolute;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .8rem;border-radius:999px;background:var(--papel);color:var(--tinta-c);font-weight:600;font-size:.86rem;box-shadow:0 14px 26px -12px rgba(0,0,0,.55);white-space:nowrap}
.peca::before{content:'';width:16px;height:16px;border-radius:50%;flex:none;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F1E8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.js .peca{opacity:0;transform:scale(.4) translateY(14px)}
.js .peca-vai .peca{animation:pecaEntra .55s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--i) * 160ms)}
@keyframes pecaEntra{to{opacity:1;transform:none}}
.sem-animacao .peca{opacity:1!important;transform:none!important}
@media(max-width:620px){.peca{font-size:.74rem;padding:.38rem .6rem}.peca::before{width:13px;height:13px;background-size:8px}}

/* entrada do anúncio: o radar estoura na tela inteira */
.intro-onda{position:absolute;left:50%;top:50%;width:140vmax;aspect-ratio:1;border-radius:50%;border:2px solid var(--terra-clara);transform:translate(-50%,-50%) scale(.02);opacity:0}
.js.intro .intro-onda{animation:onda 1.5s cubic-bezier(.2,.6,.3,1) .1s forwards}
.js.intro .intro-onda+.intro-onda{animation-delay:.45s}
.js.intro .intro-onda+.intro-onda+.intro-onda{animation-delay:.8s}

/* ---------- página do site: como traz dinheiro ---------- */
.dinheiro{display:grid;gap:1rem}
@media(min-width:760px){.dinheiro{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.dinheiro{grid-template-columns:repeat(4,1fr)}}
.dinheiro .cartao{position:relative;overflow:hidden}
.dinheiro .cartao b.num{position:absolute;right:1rem;top:.6rem;font-family:var(--f-titulo);font-size:3.4rem;line-height:1;color:var(--osso2)}
.porque-ganha{margin-top:.8rem;padding:.65rem .85rem;border-radius:12px;background:var(--osso2);font-size:.95rem;color:var(--tinta-c)}
.porque-ganha strong{color:var(--terra-forte)}

/* ================= RODADA P68 (17/10): o celular 3D de verdade de volta =================
   O João: o celular em CSS "tá muito desenho"; "pega lá o site do antigo e põe igual".
   O cena.js (three.js num Worker) desenha o celular de titânio, o chão em grade e os
   caminhos de luz, fixo atrás da página. Só na principal e só com .tem3d no <html>
   (decidido no <head>). Sem 3D, tudo volta ao layout normal, com a foto do celular. */
.palco,.cartoes3d{display:none}
.tem3d .palco{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 66% 38%,#21504B 0%,var(--petroleo) 50%,#102B29 100%)}
#gl3d{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease}
.gl-ok #gl3d{opacity:1}
.tem3d.gl-falhou .palco{display:none}
.tem3d main,.tem3d .rodape{position:relative;z-index:1}
/* as partes que passam por cima do 3D: opacas (enquanto uma cobre a tela, o 3D dorme) */
.cobre{position:relative;background:var(--osso)}
/* atrás das partes transparentes está o palco (petróleo): o fundo da página é o mesmo */
html.tem3d:not(.gl-falhou) body{background:var(--petroleo)}
/* as partes onde o 3D aparece ficam transparentes */
.tem3d:not(.gl-falhou) .heroi-principal,.tem3d:not(.gl-falhou) .cam3d,.tem3d:not(.gl-falhou) .fecho3d{background:transparent}
.tem3d:not(.gl-falhou) .heroi-principal::before{display:none}

/* ---------- topo ---------- */
.topo-cel{display:none}
html:not(.tem3d) .topo-cel,.gl-falhou .topo-cel{display:block;justify-self:center}
.cel-foto{width:min(420px,80vw);-webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent);mask-image:radial-gradient(closest-side,#000 84%,transparent)}
.rota{display:none}
@media(min-aspect-ratio:4/5){
  .tem3d:not(.gl-falhou) .heroi-grade{grid-template-columns:1.08fr .92fr}
  .tem3d .rota{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
  .rota path{fill:none;stroke:var(--terra-viva);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85}
  .rota circle{fill:var(--terra-viva);opacity:0;transition:opacity .4s 1.6s}
  .gl-ok.topo-vai .rota path{transition:stroke-dashoffset 1.8s var(--ease) .3s;stroke-dashoffset:0}
  .gl-ok.topo-vai .rota circle{opacity:1}
}
/* celular em pé: o texto em cima e o celular embaixo, subindo quando a pessoa rola */
@media(max-aspect-ratio:4/5){.tem3d:not(.gl-falhou) .heroi-principal{padding-bottom:calc(50svh + 2rem)}}

/* ---------- o caminho: os quatro cartões, um em cada canto do celular ---------- */
.tem3d.gl-ok .cartoes3d{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.c3d{position:absolute;left:0;top:0;width:178px}
.cartoes3d{--ks:1}
.c3d-in{transform:translate(-50%,-50%) translateY(18px) scale(calc(var(--ks) * .55));opacity:0;transition:opacity .35s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.c3d.on .c3d-in{opacity:1;transform:translate(-50%,-50%) scale(var(--ks))}
.c3d-rot{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 .5rem .2rem;padding:.28rem .65rem .28rem .28rem;border-radius:999px;background:var(--petroleo);border:1px solid rgba(232,160,122,.45);font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta);white-space:nowrap}
.c3d-rot i{font-style:normal;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--terra-viva);color:var(--escuro);font-size:.68rem;font-weight:600}
.c3d .nc{border-color:var(--terra-viva);box-shadow:0 0 0 4px rgba(224,122,79,.18),0 24px 44px -18px rgba(0,0,0,.7)}
.c3d .nc-insta>img{aspect-ratio:16/10}
.c3d.on .nc-msg{animation:msgEntra .5s var(--ease) .35s both}
.c3d.on .nc-msg.eu{animation-delay:.9s}

@media(min-aspect-ratio:4/5){
  .tem3d:not(.gl-falhou) .cam3d{height:270vh;padding:0}
  .tem3d:not(.gl-falhou) .cam3d-palco{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:4.2rem}
  .tem3d:not(.gl-falhou) .cam3d-palco>.wrap{width:min(1240px,100% - 5rem)}
  .tem3d:not(.gl-falhou) .cam3d-txt{max-width:min(500px,42vw)}
  .tem3d:not(.gl-falhou) .cam3d .secao-cab{margin-bottom:1.6rem}
  .tem3d:not(.gl-falhou) .cam3d .secao-cab p:not(.olho){font-size:1.04rem}
}
/* com 3D, as quatro etapas viram quatro caixinhas que acendem junto com os cantos do celular */
.tem3d:not(.gl-falhou) .cam3d .cam-linha{display:none}
.tem3d:not(.gl-falhou) .cam3d .cam-est{grid-template-columns:1fr 1fr;gap:.65rem;padding:0}
.tem3d:not(.gl-falhou) .cam3d .cam-est li{padding:.8rem .8rem .8rem 3.4rem;border:1px solid var(--linha);border-radius:16px;background:rgba(18,47,45,.78);transition:opacity .5s,border-color .4s}
.tem3d:not(.gl-falhou) .cam3d .cam-est li.on{border-color:var(--terra-viva)}
.tem3d:not(.gl-falhou) .cam3d .cam-est .ic{left:.75rem;top:.8rem;width:36px;height:36px}
.tem3d:not(.gl-falhou) .cam3d .cam-est .ic svg{width:18px;height:18px}
.tem3d:not(.gl-falhou) .cam3d .cam-est b{font-size:1.18rem}
.tem3d:not(.gl-falhou) .cam3d .cam-est li>span:not(.ic){font-size:.9rem;line-height:1.35;display:block}
.tem3d:not(.gl-falhou) .cam3d .acelera{margin-top:1rem;padding:.8rem 1rem;font-size:.92rem;background:rgba(18,47,45,.78)}
/* celular em pé: a tela fica livre pro caminho se desenhar, e o texto sobe num cartão por cima */
@media(max-aspect-ratio:4/5){
  .tem3d:not(.gl-falhou) .cam3d{padding:0 0 2.4rem}
  .tem3d:not(.gl-falhou) .cam3d-palco::before{content:'';display:block;height:120svh}
  .tem3d:not(.gl-falhou) .cam3d-txt{background:var(--petroleo);border:1px solid var(--linha);border-radius:22px;padding:1.6rem 1.2rem}
}

/* ---------- o fecho: a conversa no WhatsApp do lado ---------- */
@media(min-aspect-ratio:4/5){
  .tem3d:not(.gl-falhou) .fecho3d{min-height:100vh;display:flex;align-items:center;text-align:left}
  .tem3d:not(.gl-falhou) .fecho3d>.wrap{width:min(1240px,100% - 5rem)}
  .tem3d:not(.gl-falhou) .fecho-txt{max-width:540px}
  .tem3d:not(.gl-falhou) .fecho3d h2,.tem3d:not(.gl-falhou) .fecho3d p{margin-inline:0}
  .tem3d:not(.gl-falhou) .fecho3d .acoes{justify-content:flex-start}
  .tem3d:not(.gl-falhou) .fecho3d .fecho-onda{left:72%}
}
/* com o 3D, as ondas do fecho saem do chão (cena.js): as de CSS ficam só pra quem não tem 3D */
.tem3d.gl-ok .fecho3d .fecho-onda{display:none}
@media(max-aspect-ratio:4/5){
  .tem3d:not(.gl-falhou) .fecho3d::before{content:'';display:block;height:60svh}
  .tem3d:not(.gl-falhou) .fecho-txt{background:var(--petroleo);border:1px solid var(--linha);border-radius:22px;padding:1.8rem 1.2rem}
}

/* ---------- as partes da página na lateral (hubtown) ----------
   P69: com o nome escrito, o índice encostava no texto em alguns notebooks. Agora é uma
   faixinha só com os pontos, e o nome aparece do lado quando passa o mouse */
.caps{display:none}
@media(min-width:1360px){.caps{display:flex;flex-direction:column;gap:.15rem;position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:45;padding:.5rem .3rem;border-radius:999px;background:rgba(23,60,58,.9);border:1px solid var(--linha)}}
.caps a{position:relative;display:grid;place-items:center;width:20px;height:22px;color:var(--tinta2);text-decoration:none}
.caps a i{width:7px;height:7px;border:1px solid currentColor;border-radius:2px;transition:background-color .3s,border-color .3s,transform .3s}
.caps a span{position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-6px,-50%);opacity:0;pointer-events:none;white-space:nowrap;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta);background:var(--petroleo);border:1px solid var(--linha);padding:.32rem .6rem;border-radius:8px;transition:opacity .2s,transform .2s}
.caps a:hover span,.caps a:focus-visible span{opacity:1;transform:translate(0,-50%)}
.caps a:hover i{transform:scale(1.3)}
.caps a.passou i{background:var(--tinta3);border-color:var(--tinta3)}
.caps a.on i{background:var(--terra-viva);border-color:var(--terra-viva);transform:scale(1.25)}
.js .caps{opacity:0;transition:opacity .6s ease .9s}
.js.topo-vai .caps,.sem-animacao .caps{opacity:1}

/* ---------- o celular 3D da página de anúncios (P69: "coloca em 3D também") ----------
   O canvas fica por cima do celular desenhado, maior que ele (o 3D gira). Quando o 3D
   fica pronto (.celreal-ok; o nome .cel3d já é do celular em CSS), o desenhado some e o de verdade aparece no mesmo lugar */
.celreal-tela{display:none}
.celreal .celreal-tela{display:block;position:absolute;left:-60%;top:-20%;width:220%;height:140%;pointer-events:none;opacity:0;transition:opacity .5s ease}
.celreal.celreal-ok .celreal-tela{opacity:1}
.radar-cel .cel{transition:opacity .4s ease}
.celreal.celreal-ok .radar-cel .cel{opacity:0}