/* Pyno: estilos da landing page. Cores e fontes vêm de tokens.css (manual da marca). */
@font-face{font-family:"Lufga";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/lufga-Light.woff2) format("woff2")}
@font-face{font-family:"Lufga";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/lufga-Regular.woff2) format("woff2")}
@font-face{font-family:"Lufga";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/lufga-Medium.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400 700;font-style:normal;font-display:swap;src:url(../fonts/dmsans-var.woff2) format("woff2")}

:root{--gutter:max(20px,env(safe-area-inset-left,0px));--gutter-r:max(20px,env(safe-area-inset-right,0px));--sec:clamp(72px,10vw,136px);--nav-h:72px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pyno-noite);color:#fff;font:400 18px/1.6 var(--pyno-font-texto);-webkit-font-smoothing:antialiased;overflow-x:clip}
main,footer{overflow-x:clip}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--pyno-font-titulo);text-wrap:balance}
h2{font-weight:300;font-size:clamp(34px,5vw,64px);line-height:1.08;letter-spacing:-.015em}
h3{font-weight:400;font-size:24px;line-height:1.25}
em{font-style:normal;color:var(--acc)}
:focus-visible{outline:2px solid var(--pyno-lilas);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-60px;z-index:60;background:#fff;color:var(--pyno-noite);padding:10px 16px;border-radius:10px}.skip:focus{top:12px}

/* faixas */
.band{--fg2:var(--pyno-cinza-claro);--acc:var(--pyno-lilas);--line:rgba(183,156,255,.22);--card:var(--pyno-ameixa);padding-block:var(--sec);padding-left:var(--gutter);padding-right:var(--gutter-r);background:var(--pyno-noite);color:#fff}
.band.nevoa,.band.branco{--fg2:var(--pyno-cinza);--acc:var(--pyno-roxo);--line:#DFD8EF;--card:#fff;color:var(--pyno-grafite)}
.band.nevoa{background:var(--pyno-nevoa)}.band.branco{background:#fff;--card:var(--pyno-nevoa)}
.band.roxo{--fg2:#fff;--acc:#fff;background:var(--pyno-roxo)}
.wrap{max-width:1200px;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(36px,5vw,64px)}
.head{display:flex;flex-direction:column;gap:18px;max-width:820px}
.kicker{font:500 13px/1.4 var(--pyno-font-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--fg2);max-width:62ch}

/* botões */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:8px 26px 8px 8px;border-radius:var(--pyno-raio-pilula);background:var(--pyno-roxo);color:#fff;font-weight:500;font-size:17px;text-decoration:none;border:1px solid transparent;transition:background .2s}
.btn i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--pyno-roxo);flex:none;transition:transform .25s}
.btn svg{width:20px;height:20px}
.btn:hover{background:var(--pyno-roxo-fundo)}.btn:hover i{transform:translate(2px,-2px)}
.btn.claro{background:#fff;color:var(--pyno-roxo)}.btn.claro i{background:var(--pyno-roxo);color:#fff}.btn.claro:hover{background:var(--pyno-nevoa)}
.link{display:inline-flex;align-items:center;min-height:56px;padding:0 8px;color:#fff;font-weight:500;text-underline-offset:6px;text-decoration-color:var(--pyno-lilas)}
.link:hover{color:var(--pyno-lilas)}
.pendente{display:inline-block;background:#FFD34D;color:#2A2533;font-size:14px;font-weight:700;line-height:1.4;padding:4px 10px;border-radius:8px}

/* menu */
.nav{position:fixed;inset:0 0 auto;z-index:40;padding-top:env(safe-area-inset-top,0px);padding-left:var(--gutter);padding-right:var(--gutter-r);transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.nav.solid,.nav.open{background:rgba(13,7,23,.96);border-bottom-color:rgba(183,156,255,.18)}
.nav-in{max-width:1200px;height:var(--nav-h);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;text-decoration:none}.brand svg{width:104px;height:auto}
.nav ul{display:flex;align-items:center;gap:6px}
.nav ul a{display:block;padding:10px 14px;border-radius:999px;color:var(--pyno-cinza-claro);text-decoration:none;font-size:16px}.nav ul a:hover{color:#fff}
.nav .btn{min-height:44px;padding:4px 20px 4px 4px;font-size:15px;gap:10px}.nav .btn i{width:34px;height:34px}.nav .btn svg{width:17px;height:17px}
.burger{display:none;width:44px;height:44px;border:1px solid rgba(183,156,255,.3);background:none;border-radius:50%;color:#fff;place-items:center;cursor:pointer}
.burger svg{width:20px;height:20px}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--pyno-gradiente);min-height:min(100svh,900px);padding:calc(var(--nav-h) + 56px) var(--gutter-r) clamp(120px,18vh,190px) var(--gutter);display:flex;flex-direction:column;justify-content:flex-end}
.hero .ghost{--g:.08;position:absolute;right:-5%;top:11%;width:min(50vw,760px);height:auto;overflow:visible;pointer-events:none}
.hero .ghost path{fill:#fff;fill-opacity:var(--g);stroke:var(--pyno-lilas);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0;stroke-dasharray:1;stroke-dashoffset:0}
.hero .in{position:relative;width:100%;max-width:1200px;margin-inline:auto;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.pill{display:inline-flex;align-items:center;gap:12px;padding:6px 20px 6px 6px;border-radius:999px;border:1px solid rgba(183,156,255,.32);font-size:16px;color:#fff}
.pill i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--pyno-roxo);color:#fff}.pill svg{width:16px;height:16px}
.hero h1{font-weight:300;font-size:clamp(40px,5.2vw,76px);line-height:1.14;letter-spacing:-.018em;max-width:17.5em}
.hero h1 em{color:var(--pyno-lilas)}
.hero .lead{--fg2:var(--pyno-cinza-claro);color:var(--pyno-cinza-claro)}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:6px}
@media (prefers-reduced-motion:no-preference){.hero .in>*{animation:sobe .7s cubic-bezier(.2,.7,.2,1) both}.hero .in>:nth-child(2){animation-delay:.08s}.hero .in>:nth-child(3){animation-delay:.16s}.hero .in>:nth-child(4){animation-delay:.24s}}
@keyframes sobe{from{opacity:0;transform:translateY(18px)}}

/* problema */
.problema .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:end}

/* método: painel escuro com cartões que saem pela base */
.faixa{--fg2:var(--pyno-cinza);--acc:var(--pyno-lilas);--line:rgba(183,156,255,.22);background:#fff;padding:clamp(40px,6vw,72px) var(--gutter-r) clamp(56px,7vw,96px) var(--gutter)}
.painel{position:relative;max-width:1240px;margin-inline:auto;padding:clamp(48px,6vw,76px) clamp(20px,3.4vw,40px) 0;border-radius:32px;background:var(--pyno-noite);color:#fff;display:flex;flex-direction:column;gap:clamp(32px,4vw,52px)}
.painel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 50% 100px,transparent 149px,rgba(183,156,255,.16) 150px,transparent 151px,transparent 239px,rgba(183,156,255,.11) 240px,transparent 241px,transparent 339px,rgba(183,156,255,.07) 340px,transparent 341px)}
.painel .head{position:relative;align-items:center;text-align:center;margin-inline:auto}
.painel h2{color:#fff}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin-bottom:-64px}
.step{background:var(--pyno-nevoa);color:var(--pyno-grafite);border-radius:24px;padding:26px 26px 0;display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden;box-shadow:0 24px 44px -26px rgba(13,7,23,.4)}
.step small{font-size:15px;font-weight:500;color:var(--pyno-roxo)}
.step b{font:300 clamp(30px,3.2vw,40px)/1.1 var(--pyno-font-titulo);letter-spacing:-.01em}
.step p{color:var(--pyno-cinza);font-size:17px}
.mini{margin:auto auto 0;padding-top:20px;width:100%;flex:none;display:flex;justify-content:center}
.mini .tel{width:min(100%,264px);height:250px;padding:6px 6px 0;border-radius:40px 40px 0 0;box-shadow:0 18px 36px rgba(13,7,23,.2)}
.mini .tela{padding:12px 13px 0;border-radius:35px 35px 0 0;box-shadow:0 0 0 4px #0B0813}
.mini .ilha{width:74px;height:21px}
.mini .busca{gap:8px;margin-top:17px;padding:5px 11px 5px 5px;font-size:14px}
.mini .busca i{width:27px;height:27px}.mini .busca i svg{width:15px;height:15px}
.mini .busca b{height:17px}.mini .busca>svg{width:18px;height:18px}
.mini .busca{gap:6px}.mini .busca>span{overflow:hidden;text-overflow:ellipsis;font-size:12.5px}.mini .busca>span::after,.mini .busca b{display:none}
.m-corpo{flex:1;display:flex;flex-direction:column;gap:9px;margin:13px -13px 0;padding:12px 13px 0;border-top:1px solid #DFD8EF;color:var(--pyno-grafite);font-size:13.5px;line-height:1.3;overflow:hidden}
.m-corpo.sem-linha{margin-top:16px;padding-top:0;border-top:0}
.m-corpo>span{display:block}
.m-res{min-height:50px;padding:8px 11px;border-radius:12px;background:var(--pyno-nevoa);color:var(--pyno-cinza)}.m-res strong{display:block;font-size:14.5px;font-weight:500}.m-res.on{background:var(--pyno-roxo);color:#fff}
.m-site{padding:12px;border-radius:13px;background:var(--pyno-noite);color:var(--pyno-cinza-claro)}.m-site strong{display:block;font:400 17px/1.2 var(--pyno-font-titulo);color:#fff}
.m-cta{padding:9px;border-radius:99px;background:var(--pyno-roxo);color:#fff;text-align:center;font-weight:500}
.m-corpo>.m-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.m-feed i{aspect-ratio:1;border-radius:8px;background:var(--pyno-lilas)}.m-feed i:nth-child(2){background:var(--pyno-noite)}.m-feed i:nth-child(3){background:var(--pyno-roxo)}
.m-msg{align-self:flex-start;max-width:90%;padding:9px 12px;border-radius:13px 13px 13px 4px;background:var(--pyno-nevoa)}.m-msg.eu{align-self:flex-end;border-radius:13px 13px 4px 13px;background:var(--pyno-roxo);color:#fff}

/* serviços */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pilar{background:var(--card);border:1px solid var(--line);border-radius:var(--pyno-raio-m);padding:30px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pilar .ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--pyno-roxo);color:#fff}.pilar .ico svg{width:24px;height:24px}
.pilar>p{color:var(--fg2);font-size:17px}
.check{display:flex;flex-direction:column;gap:10px;font-size:17px}
.check li{position:relative;padding-left:30px}
.check li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;background:var(--acc);-webkit-mask:var(--ok) center/contain no-repeat;mask:var(--ok) center/contain no-repeat;--ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}
.pilar .check{padding-top:14px;border-top:1px solid var(--line)}
.feed{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:auto;padding-top:6px}
.feed span{display:grid;place-items:center;aspect-ratio:1;border-radius:8px;color:#fff}
.feed svg{width:50%;height:50%}
.feed .t0,.feed .t4{background:var(--pyno-roxo)}.feed .t1,.feed .t3{background:var(--pyno-noite)}.feed .t2{background:var(--pyno-lilas);color:var(--pyno-noite)}.feed .t5{background:radial-gradient(120% 120% at 0% 0%,#2B1658,#0D0717)}

/* analogia: o cliente pesquisa no celular antes de ligar */
.analogia{position:relative;overflow:hidden;padding-bottom:0;background:radial-gradient(70% 60% at 50% 0%,#7A33FF 0%,transparent 100%),var(--pyno-roxo)}
.analogia .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.analogia .texto{display:flex;flex-direction:column;gap:18px;padding-bottom:var(--sec)}
.analogia h2{font-size:clamp(40px,5.6vw,76px)}
.cena{position:relative;display:flex;justify-content:center;align-self:end}
.cena::before{content:"";position:absolute;left:50%;bottom:-200px;width:420px;height:420px;border-radius:50%;transform:translateX(-50%);background:rgba(255,255,255,.16);box-shadow:0 0 0 100px rgba(255,255,255,.09),0 0 0 200px rgba(255,255,255,.05)}
.tel{position:relative;width:min(100%,420px);height:540px;padding:10px 10px 0;border-radius:64px 64px 0 0;background:linear-gradient(135deg,#8A8796,#201D29 30%,#0B0813);box-shadow:0 30px 60px rgba(13,7,23,.35)}
.tela{height:100%;padding:20px 22px 0;border-radius:54px 54px 0 0;background:#fff;box-shadow:0 0 0 7px #0B0813;display:flex;flex-direction:column;align-items:stretch;overflow:hidden}
.ilha{align-self:center;width:118px;height:32px;border-radius:999px;background:#0B0813}
.busca{display:flex;align-items:center;gap:12px;margin-top:30px;padding:9px 18px 9px 9px;border-radius:999px;background:var(--pyno-nevoa);color:var(--pyno-grafite);font-size:18px}
.busca i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pyno-roxo);color:#fff;flex:none}.busca i svg{width:19px;height:19px;stroke-width:2.6}
.busca>span{flex:1;min-width:0;white-space:nowrap}
.busca>span::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.15em;background:var(--pyno-roxo)}
.busca b{width:1px;height:24px;background:var(--pyno-cinza-claro)}
.busca>svg{width:24px;height:24px;color:var(--pyno-roxo);flex:none}
.resultado{flex:1;margin:26px -22px 0;padding:32px 22px 0;border-top:1px solid #DFD8EF}
.resultado{display:flex}
.resultado .contato{flex:1;margin-bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;min-height:200px;border-radius:40px 40px 0 0;background:var(--pyno-roxo);color:#fff;font-size:18px;letter-spacing:.02em;text-decoration:none;transition:background .2s}
.resultado .contato i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);flex:none;transition:transform .25s}
.resultado .contato svg{width:22px;height:22px}
.resultado .contato:hover{background:var(--pyno-roxo-fundo)}.resultado .contato:hover i{transform:translateY(-2px)}
@media (prefers-reduced-motion:no-preference){.busca>span::after{animation:cursor 1.1s steps(2) infinite}}
@keyframes cursor{50%{opacity:0}}

/* todo mês */
.mes .grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,80px);align-items:start}
.mes .check{font-size:19px;gap:16px}
.resultados{display:flex;flex-direction:column;gap:16px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
.kpis li{display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:1px solid var(--line);min-width:0}
.kpis strong{font:300 clamp(44px,5.4vw,72px)/1 var(--pyno-font-titulo);letter-spacing:-.02em;color:var(--pyno-roxo);font-variant-numeric:tabular-nums}
.kpis span{font-size:17px;color:var(--pyno-grafite)}
.kpi-nota{font-size:14px;color:var(--pyno-cinza)}

/* planos */
.planos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;width:min(1440px,calc(100vw - 56px));align-self:center}
.plano .preco{display:flex;flex-direction:column;gap:2px}
.plano .check{padding-top:16px;border-top:1px solid var(--line)}
.plano .preco strong{font:300 clamp(28px,2.4vw,34px)/1.1 var(--pyno-font-titulo);letter-spacing:-.01em;color:var(--acc)}
.plano .preco span{font-size:15px;color:var(--fg2)}
.planos-nota{font-size:15px;color:var(--fg2);margin-top:-16px}
@media (max-width:1180px){.planos{grid-template-columns:repeat(2,minmax(0,1fr));width:auto;align-self:stretch}}
.plano{border:1px solid var(--line);border-radius:var(--pyno-raio-m);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:16px;background:var(--card);min-width:0}
.plano h3{font-size:clamp(24px,2.1vw,28px);font-weight:300}.plano>p{color:var(--fg2);font-size:17px}.plano .check{flex:1}
.plano .tipo{font-size:15px;font-weight:500;color:var(--acc)}
.plano .btn{align-self:flex-start;margin-top:8px;font-size:15px;gap:10px;padding-right:16px}
.plano.top{--fg2:var(--pyno-cinza-claro);--acc:var(--pyno-lilas);--line:rgba(183,156,255,.3);background:var(--pyno-noite);color:#fff}

/* cronograma */
.crono{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.crono li{display:flex;flex-direction:column;gap:10px;min-width:0}
.barra{height:6px;border-radius:9px;background:rgba(183,156,255,.2);overflow:hidden}.barra i{display:block;height:100%;background:var(--pyno-lilas);border-radius:9px}
.crono b{font:400 24px/1.2 var(--pyno-font-titulo);margin-top:8px}.crono p{color:var(--fg2);font-size:17px}

/* dúvidas */
.faq .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(28px,5vw,64px)}
.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font:400 21px/1.3 var(--pyno-font-titulo)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:28px;line-height:1;color:var(--pyno-roxo);flex:none}.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:22px;color:var(--fg2);max-width:60ch}

/* chamada final */
.final{position:relative;overflow:hidden}
.final .ghost{position:absolute;right:-6%;bottom:-24%;width:min(60vw,720px);height:auto;opacity:.12;pointer-events:none}
.final .wrap{position:relative;align-items:flex-start;gap:28px}
.final h2{font-size:clamp(40px,6.4vw,88px);max-width:11em}

/* rodapé */
footer{background:var(--pyno-noite);color:var(--pyno-cinza-claro);padding:48px var(--gutter-r) calc(48px + env(safe-area-inset-bottom,0px)) var(--gutter);font-size:16px}
.foot{max-width:1200px;margin-inline:auto;display:flex;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;align-items:flex-end}
.foot svg{width:96px;height:auto;margin-bottom:14px}.foot a{text-decoration-color:rgba(183,156,255,.5);text-underline-offset:4px}.foot a:hover{color:#fff}
.foot ul{display:flex;gap:8px 24px;flex-wrap:wrap}

/* barra de WhatsApp no celular */
.fixo{display:none}

@media (max-width:980px){
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:rgba(13,7,23,.98);padding:8px var(--gutter-r) 20px var(--gutter);border-bottom:1px solid rgba(183,156,255,.18)}
  .nav.open ul{display:flex}.nav ul a{padding:14px 4px;font-size:18px}
  .burger{display:grid}.nav-cta{display:none}
  .problema .wrap,.analogia .wrap,.mes .grade,.faq .wrap{grid-template-columns:minmax(0,1fr)}
  .analogia .texto{padding-bottom:0;text-align:center;align-items:center}
  .cols3{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  body{font-size:17px}
  .hero{min-height:0;padding-top:calc(var(--nav-h) + 72px);padding-bottom:64px}
  .hero .ghost{--g:.07;width:92vw;right:-34vw;top:6%}
  .painel{border-radius:24px}
  .planos,.crono{grid-template-columns:minmax(0,1fr)}
  .hero .cta .btn,.plano .btn{width:100%;justify-content:flex-start}
  .tel{height:470px;border-radius:52px 52px 0 0}.tela{padding:16px 16px 0;border-radius:44px 44px 0 0}.resultado{margin-inline:-16px;padding-inline:16px}.busca{font-size:16px;margin-top:24px}.cena::before{width:300px;height:300px;bottom:-150px;box-shadow:0 0 0 70px rgba(255,255,255,.09),0 0 0 140px rgba(255,255,255,.05)}
  .fixo{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gutter);background:rgba(13,7,23,.96);border-top:1px solid rgba(183,156,255,.18);transform:translateY(110%);transition:transform .25s}
  .fixo.on{transform:none}.fixo .btn{width:100%;min-height:50px;padding-block:4px}.fixo .btn i{width:38px;height:38px}
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- Movimento ----------
   Assinatura: entra e sai na diagonal da seta do símbolo (42 graus).
   As classes só existem com JavaScript e sem pedido de movimento reduzido. */

/* abertura da página: cortina roxa, e a seta dispara */
html.intro body::before{content:"";position:fixed;inset:0;z-index:100;background:var(--pyno-roxo);pointer-events:none;animation:cortina .7s cubic-bezier(.7,0,.2,1) .78s forwards}
html.intro body::after{content:"";position:fixed;z-index:101;left:calc(50% - 60px);top:calc(50% - 49px);width:120px;height:97px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='337 133 935 755'%3E%3Cpath fill='white' d='M650 133H945C1130 133 1272 268 1272 440C1272 628 1112 768 880 768H770Q764 768 767 762.8L860.6 598.6Q863 594.5 868 594.5H898C1010 594.5 1087 525 1087 442C1087 350 1002 292 892 300.8L492 354C430 362 382 402 361 447Q356 457 355 447C354 437 354 432 354.4 422C358 268 492 133 650 133ZM472 535L884 382Q905 375 895 399.5L693 761Q686.5 773 682 760L647 642Q643.5 628 632 639C545 718 450 801 343 887Q337 891 337 882V695C338 625 392 564 472 535Z'/%3E%3C/svg%3E") center/contain no-repeat;animation:marca .55s cubic-bezier(.2,.8,.2,1) both,dispara .55s cubic-bezier(.7,0,.8,.3) .7s forwards}
@keyframes cortina{from{clip-path:polygon(-10% -10%,110% -10%,110% 110%,-10% 110%)}to{clip-path:polygon(110% -10%,110% -10%,110% -10%,110% -10%)}}
@keyframes marca{from{opacity:0;transform:translate(-22px,20px) scale(.82)}}
@keyframes dispara{to{opacity:0;transform:translate(70vmin,-63vmin) scale(.9)}}
@media (prefers-reduced-motion:no-preference){
  html.intro .hero .in>:nth-child(1){animation-delay:1s}html.intro .hero .in>:nth-child(2){animation-delay:1.08s}html.intro .hero .in>:nth-child(3){animation-delay:1.16s}html.intro .hero .in>:nth-child(4){animation-delay:1.24s}
  .hero .ghost{translate:calc(var(--s,0)*90px) calc(var(--s,0)*-81px);animation:flutua 9s ease-in-out infinite alternate}
  .hero .in{transform:translateY(calc(var(--s,0)*-70px));opacity:calc(1 - var(--s,0)*1.15)}
  /* o símbolo se desenha: contorno, depois preenchimento */
  .hero .ghost{--d:.25s}
  html.intro .hero .ghost{--d:1.25s}
  .hero .ghost .p1{animation:traca 1.7s cubic-bezier(.6,0,.3,1) var(--d) both,luz 3.3s linear var(--d) both,preenche .9s ease calc(var(--d) + 2.3s) both}
  .hero .ghost .p2{animation:traca 1.1s cubic-bezier(.6,0,.3,1) calc(var(--d) + 1.2s) both,luz 2.1s linear calc(var(--d) + 1.2s) both,preenche .9s ease calc(var(--d) + 2.3s) both}
  .final .ghost{translate:calc((1 - var(--f,1))*120px) calc((1 - var(--f,1))*108px)}
  .nav{transition:background .25s,border-color .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
}
@keyframes traca{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes luz{0%,70%{stroke-opacity:.9}100%{stroke-opacity:0}}
@keyframes preenche{from{fill-opacity:0}to{fill-opacity:var(--g)}}
@keyframes flutua{to{transform:translateY(-14px) rotate(1.2deg)}}
.nav.esconde{transform:translateY(-105%)}.nav:focus-within{transform:none}

/* entradas e saídas ao rolar */
html.mov{--e:cubic-bezier(.2,.7,.2,1)}
html.mov [data-a]{opacity:0;transition:opacity .7s var(--e),transform .75s var(--e);transition-delay:calc(var(--i,0)*80ms)}
html.mov [data-a=sobe]{transform:translateY(34px)}
html.mov [data-a=seta]{transform:translate(-44px,40px)}
html.mov [data-a=cartao]{transform:translateY(46px) scale(.95)}
html.mov [data-a=tel]{transform:translateY(130px);transition-duration:.8s,1s}
html.mov [data-a=sobe].saiu{transform:translateY(-26px)}
html.mov [data-a=seta].saiu{transform:translate(44px,-40px)}
html.mov [data-a=cartao].saiu{transform:translateY(-34px) scale(.97)}
html.mov [data-a=tel].saiu{transform:translateY(-40px)}
html.mov [data-a].saiu{transition-duration:.45s;transition-delay:0s}
html.mov [data-a].vis{opacity:1;transform:none}
html.mov .step.vis:hover,html.mov .pilar.vis:hover,html.mov .plano.vis:hover{transform:translateY(-6px);transition-duration:.25s;transition-delay:0s}

/* celular: anéis, busca sendo digitada e cartão de contato */
.dig{display:inline-block;white-space:nowrap}
html.mov .analogia .tel:not(.vis) .dig{clip-path:inset(0 100% 0 0)}
html.mov .analogia .tel.vis .dig{animation:digita 1s steps(11) .55s both}
@keyframes digita{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
html.mov .analogia .contato{transition:background .2s,opacity .6s var(--e) 1.45s,transform .7s var(--e) 1.45s}
html.mov .analogia .tel:not(.vis) .contato{opacity:0;transform:translateY(60px);transition-delay:0s}
html.mov .cena::before{transition:transform 1.2s var(--e),opacity 1s var(--e)}
html.mov .cena:not(:has(.tel.vis))::before{transform:translateX(-50%) scale(.55);opacity:0}
html.mov .cena:has(.tel.vis)::before{animation:pulsa 5s ease-in-out 1.2s infinite alternate}
@keyframes pulsa{to{transform:translateX(-50%) scale(1.06)}}

/* barras do cronograma */
html.mov .barra i{transform-origin:left;transition:transform 1.1s var(--e);transition-delay:calc(var(--i,0)*80ms + .25s)}
html.mov .crono li:not(.vis) .barra i{transform:scaleX(0);transition-delay:0s}

@media print{html.mov [data-a]{opacity:1!important;transform:none!important}html.intro body::before,html.intro body::after{display:none}}