/* planú · sistema visual (v2) */
:root{
  /* paleta oficial */
  --roxo:#8655FF; --lilas:#B48DFF; --lilas2:#C9B3FF; --lilas3:#E4DEFF;
  --rosa:#E655FF; --rosa2:#F08AFF; --rosa3:#F2A9FF; --rosa4:#F8D4FF;
  --tinta:#2B2238; --tinta2:#5F5672; --tinta3:#A399B5;
  /* fundos pastel */
  --papel:#F6F2FF; --papel2:#FCF5FF; --branco:#fff; --linha:#E7E0F5;
  /* ação */
  --cta:#8655FF; --cta-h:#7443F2; --grifo:#F2A9FF; --ok:#8655FF; --desconto:#D4F53C;
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --corpo:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --max:1120px; --nav:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 12px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{font:400 17px/1.5 var(--corpo);color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.025em;text-wrap:balance}
.i{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.wrap{width:min(var(--max),100% - 32px);margin-inline:auto}
.sec{padding:clamp(64px,9vw,112px) 0}
.sec.branco{background:var(--branco)}
.sec.rosa{background:var(--papel2)}
.center{text-align:center}

/* tipografia */
.eb{display:inline-flex;align-items:center;gap:9px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta2)}
.eb::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rosa3);border:2px solid var(--tinta)}
.h2{font-size:clamp(32px,6vw,54px);margin-top:12px}
.h2 em,h1 em{font-style:normal;color:var(--tinta3)}
.sub{margin:14px auto 0;color:var(--tinta2);font-size:17px;max-width:48ch}

.risca{background:linear-gradient(var(--grifo),var(--grifo)) no-repeat 0 100%/100% 40%;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* logo */
.logo{display:inline-block;background:currentColor;-webkit-mask:url(logo-branco.png) center/contain no-repeat;mask:url(logo-branco.png) center/contain no-repeat;aspect-ratio:690/148;height:28px}

/* barra de urgência */
.topbar{background:var(--tinta);color:#fff;font:500 13.5px var(--corpo);text-align:center;padding:9px 12px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.topbar b{color:var(--rosa3);font-weight:700}
.topbar .i{width:16px;height:16px;color:var(--rosa3)}
.cd-mini{font:500 13px var(--mono);background:var(--rosa);color:#fff;border-radius:6px;padding:2px 8px}

/* nav */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--papel) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1.5px solid color-mix(in srgb,var(--tinta) 10%,transparent)}
.hdr .wrap{height:var(--nav);display:flex;align-items:center;gap:22px}
.hdr .wrap>a:first-child{display:flex;align-items:center;height:100%}
.hdr .logo{color:var(--roxo);display:block}
.hdr nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.hdr nav a:not(.cta){text-decoration:none;font-weight:500;font-size:15px;padding:8px 12px;border-radius:99px;color:var(--tinta2)}
.hdr nav a:not(.cta):hover{color:var(--tinta);background:var(--lilas3)}
@media(max-width:760px){.hdr nav{display:none}.hdr .wrap{justify-content:center}.hdr .logo{height:30px}}

/* botões */
.cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--cta);color:#fff;font:800 17px var(--display);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;text-align:center;padding:18px 26px;border-radius:14px;border:3px solid var(--tinta);box-shadow:0 6px 0 var(--tinta);transition:transform .12s,box-shadow .12s,background .2s;cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:1.1}
.cta .i{width:22px;height:22px;transition:translate .2s}
.cta:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--tinta);background:var(--cta-h)}
.cta:hover .i{translate:4px 0}
.cta:active{transform:translateY(6px);box-shadow:0 0 0 var(--tinta)}
.cta:focus-visible{outline:3px solid var(--rosa);outline-offset:4px}
.cta.lg{width:100%;max-width:440px;font-size:19px;padding:21px 26px}
.cta.sm{font-size:13px;padding:9px 14px;border-width:2.5px;border-radius:11px;box-shadow:0 4px 0 var(--tinta)}
.cta.sm .i{width:16px;height:16px}
.cta.rosa{--cta:var(--rosa);--cta-h:#D640F0}
.cta.claro{--cta:#fff;--cta-h:var(--lilas3);color:var(--tinta)}
.cta::after{content:"";position:absolute;top:-50%;left:-60%;width:34%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:rotate(20deg);animation:brilho 3.6s infinite;pointer-events:none}
.cta.claro::after{display:none}
@keyframes brilho{0%,60%{left:-60%}100%{left:130%}}
.link-sec{display:inline-flex;align-items:center;gap:8px;font:700 15px var(--corpo);color:var(--tinta);text-decoration:none;border-bottom:2px solid var(--grifo);padding-bottom:2px}
.link-sec .i{width:18px;height:18px}

/* faixa de confiança (centralizada) */
.confia{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:18px;font-size:14px;color:var(--tinta2)}
.confia span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.confia .i{width:18px;height:18px;color:var(--roxo)}
.confia b{color:var(--tinta);font-weight:700}

/* pílulas */
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:2px solid var(--tinta);border-radius:999px;font-size:13.5px;font-weight:500;background:var(--branco);white-space:nowrap}
.pill .i{width:16px;height:16px;color:var(--roxo)}
.pill b{font-weight:700}

/* preço */
.preco{display:flex;flex-direction:column;align-items:center;gap:8px}
.preco .pt{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.preco .de{font-size:16px;color:var(--tinta2);white-space:nowrap}
.preco .de s{text-decoration-thickness:2px;text-decoration-color:var(--rosa)}
.preco .valor{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.85;color:var(--roxo);display:flex;align-items:flex-start;justify-content:center;font-size:56px}
.preco .valor small{font-size:.32em;letter-spacing:0;margin:.16em .12em 0 0;color:var(--tinta)}
.preco .valor .c{font-size:.4em;margin-top:.06em;letter-spacing:-.02em}
.preco.xl .valor{font-size:clamp(80px,13vw,104px)}
.preco.lg .valor{font-size:clamp(68px,10vw,84px)}
.preco.md .valor{font-size:56px}
.preco.sm .valor{font-size:44px}
.preco.sm .de{font-size:14px}
/* ticket de desconto (cor fora da paleta, para chamar atenção) */
.ticket{--tk:var(--desconto);display:inline-flex;align-items:center;gap:6px;font:800 15px/1 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--tinta);background:var(--tk);padding:7px 14px;border-radius:6px;white-space:nowrap;-webkit-mask:radial-gradient(circle 5px at 0 50%,#0000 97%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,#0000 97%,#000) 100% 0/51% 100% no-repeat;mask:radial-gradient(circle 5px at 0 50%,#0000 97%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,#0000 97%,#000) 100% 0/51% 100% no-repeat}
.ticket::after{content:"OFF"}
.ticket.sem-off::after{content:none}
.ticket.sticker{position:absolute;z-index:8;font-size:22px;padding:11px 20px;rotate:-8deg;filter:drop-shadow(0 4px 0 var(--tinta))}
.economia{font:500 12.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta);background:var(--rosa4);border-radius:8px;padding:5px 10px}
/* contagem */
.cd{display:flex;gap:8px;justify-content:center}
.cd div{background:var(--tinta);color:#fff;border-radius:12px;min-width:62px;padding:9px 6px 7px;text-align:center}
.cd b{display:block;font:800 26px var(--display);line-height:1;letter-spacing:-.02em}
.cd span{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.cd-rot{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta2);margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:6px}
.cd-rot .i{width:15px;height:15px;color:var(--rosa)}

/* cards */
.card{background:var(--branco);border:2px solid var(--linha);border-radius:20px}
.card.forte{border:2.5px solid var(--tinta);box-shadow:0 6px 0 var(--tinta)}
.ico-box{width:48px;height:48px;border-radius:14px;background:var(--lilas3);border:2px solid var(--tinta);display:grid;place-items:center;color:var(--roxo);margin:0 auto 14px}
.ico-box .i{width:24px;height:24px}

/* lista com check */
.lista-check{list-style:none;display:grid;gap:12px}
.lista-check li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.lista-check li .i{width:24px;height:24px;color:var(--roxo)}

/* comparativo escuro */
.compara{background:var(--tinta);color:var(--papel)}
.compara .eb{color:color-mix(in srgb,var(--papel) 72%,transparent)}
.compara .h2 em{color:var(--rosa3)}
.compara .sub{color:color-mix(in srgb,var(--papel) 78%,transparent)}
.lados{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:40px auto 0}
.lado{border-radius:20px;padding:24px;border:2px solid color-mix(in srgb,var(--papel) 18%,transparent);text-align:left}
.lado .rot{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--papel) 60%,transparent)}
.lado h3{font-size:24px;margin:8px 0 16px}
.lado ul{list-style:none;display:grid;gap:11px}
.lado li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:15.5px}
.lado li .i{width:22px;height:22px}
.lado.nao li{color:color-mix(in srgb,var(--papel) 70%,transparent)}
.lado.nao .i{color:color-mix(in srgb,var(--papel) 40%,transparent)}
.lado.sim{background:var(--papel);color:var(--tinta);border-color:var(--rosa3);box-shadow:0 0 0 4px color-mix(in srgb,var(--rosa3) 45%,transparent)}
.lado.sim .rot{color:var(--tinta2)}
.lado.sim .i{color:var(--roxo)}
.lado.sim .preco-lado{display:flex;align-items:center;gap:10px;font:800 34px var(--display);color:var(--roxo);letter-spacing:-.03em;margin-top:18px}
.lado.nao .preco-lado{font:800 22px var(--display);color:color-mix(in srgb,var(--papel) 60%,transparent);margin-top:18px}
@media(max-width:700px){.lados{grid-template-columns:1fr}}

/* passos */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.passo{padding:26px 22px;text-align:center}
.passo .n{font:500 12px var(--mono);letter-spacing:.1em;color:var(--tinta2);text-transform:uppercase;margin-bottom:6px}
.passo h3{font-size:22px;margin-bottom:6px}
.passo p{color:var(--tinta2);font-size:15.5px}
@media(max-width:760px){.passos{grid-template-columns:1fr}}

/* caixa de oferta */
.oferta-box{max-width:640px;margin:40px auto 0;padding:clamp(24px,4vw,40px);text-align:center;position:relative;background:var(--branco);border:3px solid var(--tinta);border-radius:26px;box-shadow:0 8px 0 var(--tinta)}
.oferta-box .fita{position:absolute;top:-17px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;background:var(--desconto);color:var(--tinta);border:2.5px solid var(--tinta);border-radius:999px;padding:6px 16px;font:800 14px var(--display);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.oferta-box .fita .i{width:16px;height:16px}
.oferta-box h3{font-size:clamp(24px,3vw,30px)}
.oferta-box .lista-check{text-align:left;max-width:420px;margin:22px auto 26px;font-size:16px}
.oferta-box .divisor{height:2px;background:var(--linha);margin:26px 0}
.oferta-box .cta{margin-top:24px}

/* FAQ */
.faq{max-width:760px;margin:36px auto 0;display:grid;gap:10px;text-align:left}
.faq details{background:var(--branco);border:2px solid var(--linha);border-radius:16px;overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--tinta)}
.faq summary{list-style:none;cursor:pointer;padding:18px 56px 18px 20px;font:800 18px var(--display);letter-spacing:-.01em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--lilas3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2238' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--rosa4)}
.faq .resp{padding:0 20px 20px;color:var(--tinta2);font-size:16px}

/* barra fixa de compra */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:flex;align-items:center;gap:12px;background:var(--branco);border:2.5px solid var(--tinta);border-radius:18px;box-shadow:0 6px 0 var(--tinta);padding:10px 10px 10px 16px;transform:translateY(160%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.sticky-cta.on{transform:none}
.sticky-cta .info{flex:1;line-height:1.1;font-size:12.5px;color:var(--tinta2)}
.sticky-cta .info s{color:var(--tinta3)}
.sticky-cta .info b{font:800 24px var(--display);color:var(--roxo);letter-spacing:-.03em;display:block}
.sticky-cta .cta{padding:13px 16px;font-size:15px;box-shadow:0 4px 0 var(--tinta)}
@media(min-width:900px){.sticky-cta{left:auto;right:24px;bottom:24px;width:400px}}

/* esteira */
.esteira{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.esteira .trilho{display:flex;gap:10px;width:max-content;animation:corre var(--vel,50s) linear infinite}
.esteira.inv .trilho{animation-direction:reverse}
.esteira:hover .trilho{animation-play-state:paused}
@keyframes corre{to{transform:translateX(-50%)}}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;background:var(--branco);border:2px solid var(--tinta);border-radius:999px;padding:4px 14px 4px 4px;font-weight:700;font-size:14.5px;white-space:nowrap;text-decoration:none}
.chip img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1.5px solid var(--tinta)}

/* rodapé */
.rodape{background:var(--tinta);color:#d9d2e8;padding:52px 0 120px;font-size:14px}
.rodape .logo{color:#fff;height:30px;margin-bottom:12px}
.rodape a{color:#fff}
.rodape .linha{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:flex-start}
.rodape small{display:block;margin-top:22px;opacity:.6;max-width:720px}

/* revelar */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}.rv{opacity:1;transform:none}}

/* ===== interações ===== */
.card{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .35s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,-40%),color-mix(in srgb,var(--rosa3) 28%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::before{opacity:1}
.ben:hover,.passo:hover{transform:translateY(-6px);border-color:var(--tinta);box-shadow:0 6px 0 var(--tinta)}
.ico-box{transition:transform .45s cubic-bezier(.3,1.8,.4,1),background .25s,color .25s}
.card:hover .ico-box{transform:rotate(-10deg) scale(1.12);background:var(--roxo);color:#fff}
.lado{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lado.sim:hover{transform:translateY(-6px) rotate(-.4deg)}
.lado li{transition:transform .25s}
.lado.sim li:hover{transform:translateX(6px)}
.lista-check li{transition:transform .25s}
.lista-check li:hover{transform:translateX(4px)}
.confia span{transition:color .2s}
.confia span:hover{color:var(--tinta)}
.confia span:hover .i{animation:pula .5s cubic-bezier(.3,1.8,.4,1)}
@keyframes pula{40%{transform:translateY(-5px) scale(1.15)}}
.pill{transition:transform .2s,background .2s}
.pill:hover{transform:translateY(-2px);background:var(--lilas3)}
/* ticket balança de tempos em tempos */
.ticket{animation:balanca 5s ease-in-out infinite;transform-origin:50% 0}
.ticket.sticker{animation:balanca2 4s ease-in-out infinite}
@keyframes balanca{0%,86%,100%{transform:none}89%{transform:rotate(-6deg) scale(1.06)}92%{transform:rotate(5deg) scale(1.06)}95%{transform:rotate(-2deg)}}
@keyframes balanca2{0%,80%,100%{transform:translateY(0)}86%{transform:translateY(-8px) rotate(-3deg)}92%{transform:translateY(0) rotate(2deg)}}
/* preço: contagem e brilho ao aparecer */
.preco .valor{transition:transform .5s cubic-bezier(.3,1.6,.4,1)}
.preco.pop .valor{animation:pop .7s cubic-bezier(.3,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.7);opacity:.2}100%{transform:none;opacity:1}}
/* botão: onda ao clicar e seta com impulso */
.cta .onda{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:onda-cta .6s ease-out forwards;pointer-events:none}
.cta.claro .onda{background:rgba(134,85,255,.25)}
@keyframes onda-cta{to{transform:scale(4);opacity:0}}
.cta.lg:not(:hover) .i{animation:empurra 2.4s ease-in-out infinite}
@keyframes empurra{0%,60%,100%{translate:0 0}75%{translate:5px 0}}
/* FAQ abre suave */
.faq summary{transition:background .2s}
.faq summary:hover{background:var(--papel)}
.faq details[open] .resp{animation:abre .4s cubic-bezier(.2,.8,.2,1)}
@keyframes abre{from{opacity:0;transform:translateY(-8px)}}
/* barra fixa: anel pulsando no botão */
.sticky-cta .cta{animation:anel 2.2s infinite}
@keyframes anel{0%,100%{box-shadow:0 4px 0 var(--tinta),0 0 0 0 rgba(134,85,255,.5)}60%{box-shadow:0 4px 0 var(--tinta),0 0 0 12px rgba(134,85,255,0)}}
/* progresso de leitura */
.progresso{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--roxo),var(--rosa));z-index:60;pointer-events:none}
/* revelar em sequência */
.rv.zoom{transform:scale(.94)}
.rv.zoom.in{transform:none}

/* ===== autolayout: espaçamento por tokens, blocos em flex/grid com gap ===== */
:root{--g-2xs:6px;--g-xs:10px;--g-sm:14px;--g-md:22px;--g-lg:36px;--g-xl:64px}
.wrap.center{display:flex;flex-direction:column;align-items:center;gap:var(--g-lg)}
.wrap.center>*{margin-top:0;margin-bottom:0}
.wrap.center>:is(.vitrine,.lados,.passos,.faq,.beneficios,.tour,.oferta-box,.cross,.colunas){width:100%;margin-inline:auto}
.cab{display:flex;flex-direction:column;align-items:center;gap:var(--g-sm);text-align:center}
.cab>*{margin:0}
.h2{margin-top:0}
.sub{margin:0 auto}
.mt-xl{margin-top:calc(var(--g-xl) - var(--g-lg))!important}
/* hero */
.topo .wrap{display:flex;flex-direction:column;align-items:center;gap:var(--g-md)}
.topo .wrap>*{margin:0!important}
.topo .wrap>.cta{margin-top:var(--g-2xs)!important}
.topo .wrap>.confia{margin-top:calc(-1 * var(--g-2xs))!important}
.topo .wrap>:is(.leque,.demo){margin-top:var(--g-lg)!important;width:100%}
.topo.center{display:flex;flex-direction:column;align-items:center;gap:var(--g-md)}
.topo.center>*{margin:0!important}
/* caixa de oferta */
.oferta-box{display:flex;flex-direction:column;align-items:center;gap:var(--g-md)}
.oferta-box>*{margin:0!important}
.oferta-box .lista-check{width:100%;max-width:440px}
.oferta-box .divisor{width:100%;height:2px}
.oferta-box>.cta{margin-top:var(--g-2xs)!important}
.confia{margin-top:0}
.cd-rot{margin-bottom:var(--g-xs)}
/* grades */
.lados,.passos,.beneficios,.faq,.vitrine,.tour{margin-top:0}
.rodape-confia{margin:0 0 var(--g-xl)}
/* imagens sem salto de layout */
img{height:auto}