:root{--tinta:#1f2430;--papel:#fbfaf7;--branco:#fff;--ouro:#ffb03b;--ouro2:#ffd27a;--brasa:#ff6b3d;--brasa2:#ff8a5c;--menta:#e8f6f0;--verde:#19a974;--pessego:#fff1ea;--cinza:#6b7280;--linha:#ece7df;--ok:#19a974;--no:#d9534f;--sombra:0 1px 2px rgba(31,36,48,.04),0 10px 30px rgba(31,36,48,.08)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Space Grotesk",system-ui,sans-serif;background:var(--papel);color:var(--tinta);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,canvas{display:block;max-width:100%}
.c{max-width:1180px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:14px;padding:15px 24px;font:700 16px "Space Grotesk";cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(1px)}
.btn-ouro{background:var(--brasa);color:#fff;box-shadow:0 8px 20px rgba(255,107,61,.28)}
.btn-ouro:hover{background:#f45a2a;box-shadow:0 10px 26px rgba(255,107,61,.35)}
.btn-linha{background:#fff;color:var(--tinta);border:1.5px solid var(--linha);box-shadow:var(--sombra)}
.btn-tinta{background:var(--tinta);color:#fff;box-shadow:0 8px 20px rgba(31,36,48,.18)}
.btn[disabled]{opacity:.5;pointer-events:none}
.rotulo{font:700 12px "Space Grotesk";letter-spacing:.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;color:var(--brasa)}
.rotulo:before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
h2{font-family:Fraunces,serif;font-weight:800;font-size:clamp(32px,4.6vw,56px);line-height:1.05;letter-spacing:-.02em}
h2 em{font-style:italic;font-weight:600;color:var(--brasa)}
.sub{color:var(--cinza);font-size:18px;max-width:600px}
input,select{font:500 16px "Space Grotesk";border:1.5px solid var(--linha);border-radius:12px;padding:13px 15px;width:100%;background:#fff;color:var(--tinta);outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus{border-color:var(--brasa);box-shadow:0 0 0 4px rgba(255,107,61,.12)}
label{font-weight:700;font-size:14px;display:block;margin-bottom:6px}
.oculto{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:12px 20px;border-radius:12px;font-weight:600;z-index:99;max-width:90vw}
.grao{position:relative;isolation:isolate}

/* topo */
nav{position:fixed;inset:0 0 auto;z-index:30;transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent}
nav.rolou{background:rgba(251,250,247,.9);backdrop-filter:blur(14px);border-color:var(--linha)}
nav .c{display:flex;align-items:center;justify-content:space-between;height:72px;color:var(--tinta)}
.marca{display:flex;align-items:center;gap:10px;font:800 25px Fraunces;text-decoration:none;letter-spacing:-.02em;color:var(--tinta)}
.marca svg{width:36px;height:36px}
nav .links{display:flex;gap:28px;align-items:center;font-weight:600;font-size:15px}
nav .links a{text-decoration:none;color:var(--cinza)}nav .links a:hover{color:var(--tinta)}
nav .links .btn{color:#fff;padding:10px 18px;font-size:14px}
@media(max-width:860px){nav .links a:not(.btn){display:none}}

/* hero */
.hero{background:radial-gradient(55% 60% at 88% 18%,#ffe1d3 0,rgba(255,225,211,0) 70%),radial-gradient(45% 55% at 0% 100%,#dcf3ea 0,rgba(220,243,234,0) 70%),var(--papel);padding:120px 0 0;overflow:hidden}
.hero .c{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;min-height:600px}
.hero h1{font:800 clamp(44px,7vw,88px)/.98 Fraunces;letter-spacing:-.035em;margin:20px 0 22px}
.hero h1 em{display:block;font-style:italic;font-weight:600;background:linear-gradient(90deg,#ff6b3d,#ff9a3d 55%,#ffb03b);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:6px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 28px}
.selos{display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:var(--cinza)}
.selos b{color:var(--tinta);font:800 24px Fraunces;display:block}
.leque{position:relative;height:580px}
.leque canvas{position:absolute;width:268px;border-radius:18px;box-shadow:0 30px 60px rgba(31,36,48,.18),0 2px 6px rgba(31,36,48,.06);transition:transform .6s cubic-bezier(.2,.8,.2,1);background:#fff}
.leque canvas:nth-child(1){left:6%;top:90px;transform:rotate(-11deg)}
.leque canvas:nth-child(2){left:30%;top:40px;transform:rotate(-1deg);z-index:2}
.leque canvas:nth-child(3){left:54%;top:110px;transform:rotate(9deg)}
.leque:hover canvas:nth-child(1){transform:rotate(-15deg) translateX(-30px)}
.leque:hover canvas:nth-child(3){transform:rotate(13deg) translateX(30px)}
.pepita{position:absolute;width:var(--t,18px);height:var(--t,18px);background:radial-gradient(circle at 30% 30%,#fff6d6,var(--ouro2) 30%,var(--ouro) 62%,#d98a00);border-radius:47% 53% 40% 60%/55% 45% 55% 45%;filter:drop-shadow(0 6px 10px rgba(255,176,59,.35));animation:boia 6s ease-in-out infinite}
@keyframes boia{50%{transform:translateY(-16px) rotate(18deg)}}
.carimbo{position:absolute;right:2%;bottom:70px;z-index:3;width:142px;height:142px;border-radius:50%;background:#fff;color:var(--tinta);display:grid;place-items:center;text-align:center;font:700 13px/1.15 "Space Grotesk";transform:rotate(-10deg);box-shadow:0 16px 34px rgba(31,36,48,.14);border:2px dashed var(--brasa)}
.carimbo b{font:800 34px Fraunces;display:block;color:var(--brasa)}
@media(max-width:940px){.hero .c{grid-template-columns:1fr}.leque{height:460px;max-width:520px;margin:0 auto;width:100%}.leque canvas{width:210px}.carimbo{width:112px;height:112px;font-size:11px}.carimbo b{font-size:26px}}
@media(max-width:480px){.leque canvas{width:168px}.leque{height:380px}}

/* esteira */
.esteira{background:var(--tinta);color:#fff;overflow:hidden;white-space:nowrap;margin-top:30px}
.esteira div{display:inline-flex;gap:38px;padding:14px 0;animation:corre 60s linear infinite;font-weight:600;font-size:15px}
.esteira span{display:inline-flex;align-items:center;gap:10px}
.esteira span:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ouro)}
.esteira i{font-style:normal;font-family:Fraunces;font-weight:800;color:var(--ouro2)}
@keyframes corre{to{transform:translateX(-50%)}}

/* bateia */
.bateia{padding:110px 0}
.bateia .topo{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:34px}
@media(max-width:900px){.bateia .topo{grid-template-columns:1fr}}
.nichos{display:flex;gap:8px;flex-wrap:wrap}
.nichos button{border:1.5px solid var(--linha);background:#fff;border-radius:999px;padding:8px 16px;font:600 14px "Space Grotesk";cursor:pointer;color:var(--tinta);transition:all .2s}
.nichos button:hover{border-color:var(--brasa)}
.nichos button.on{background:var(--brasa);border-color:var(--brasa);color:#fff;box-shadow:0 6px 16px rgba(255,107,61,.25)}
.mesa{display:grid;grid-template-columns:1fr 330px;gap:28px;align-items:start}
@media(max-width:1000px){.mesa{grid-template-columns:1fr}}
.placar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.placar div{padding:16px 18px;border-radius:18px;background:#fff;box-shadow:var(--sombra)}
.placar div:nth-child(2){background:#fff5f3}.placar div:last-child{background:linear-gradient(135deg,#fff6e3,#ffe8bd)}
.placar b{font:800 44px/1 Fraunces;display:block}.placar div:nth-child(2) b{color:var(--no)}.placar div:last-child b{color:#c97a00}
.placar small{font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.peneira{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:600px){.peneira{grid-template-columns:repeat(4,1fr)}}
.grao-p{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#f1ede6;border:2px solid transparent;transition:filter .4s,opacity .4s,transform .4s,border-color .3s}
.grao-p img{width:100%;height:100%;object-fit:cover}
.grao-p .mot{position:absolute;inset:auto 0 0;background:rgba(217,83,79,.92);color:#fff;font-size:11px;font-weight:700;padding:4px 6px;text-align:center;transform:translateY(100%);transition:transform .3s}
.grao-p.lendo{border-color:var(--brasa);transform:scale(1.04)}
.grao-p.fora{filter:grayscale(1);opacity:.4}.grao-p.fora .mot{transform:none}
.grao-p.ouro{border-color:var(--ouro);box-shadow:0 0 0 3px #ffe3a8,0 10px 24px rgba(255,176,59,.35);transform:scale(1.04)}
.grao-p.ouro:after{content:"✓";position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:var(--ouro);color:#fff;font-weight:900;display:grid;place-items:center}
.celular{background:#1f2430;border-radius:40px;padding:10px;box-shadow:0 30px 60px rgba(31,36,48,.22);position:sticky;top:90px}
.celular .tela{border-radius:31px;overflow:hidden;background:#0b141a;min-height:560px;display:flex;flex-direction:column}
.celular .cab{background:#1f2c34;color:#e9edef;padding:14px;display:flex;gap:10px;align-items:center;font-size:14px}
.celular .cab i{width:34px;height:34px;border-radius:50%;background:var(--brasa);display:grid;place-items:center;font:800 16px Fraunces;color:#fff;font-style:normal}
.celular .cab small{display:block;color:#8696a0;font-size:11px}
.celular .msgs{padding:10px;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.bolha{background:#1f2c34;color:#e9edef;border-radius:12px;padding:6px;font-size:12.5px;line-height:1.35;animation:entra .5s both}
.bolha canvas{width:100%;border-radius:8px}
.bolha p{padding:6px 4px 2px;white-space:pre-line}.bolha .lk{color:#53bdeb;text-decoration:underline}.bolha .h{font-size:10px;color:#8696a0;text-align:right;padding:0 4px}
@keyframes entra{from{opacity:0;transform:translateY(20px) scale(.97)}}
.espera-cel{color:#8696a0;text-align:center;font-size:13px;padding:40px 20px}

/* estúdio */
.estudio{background:linear-gradient(180deg,var(--menta),#f3fbf7);padding:110px 0}
.estudio h2 em{color:var(--verde)}
.vitrine{display:flex;gap:18px;overflow-x:auto;padding:36px 4px 14px;scroll-snap-type:x mandatory;align-items:flex-start;scrollbar-width:none}.vitrine::-webkit-scrollbar{display:none}
.vitrine figure{flex:0 0 220px;scroll-snap-align:start}
.vitrine canvas{width:220px;border-radius:16px;box-shadow:0 18px 40px rgba(31,36,48,.14);background:#fff;transition:transform .3s}
.vitrine figure:hover canvas{transform:translateY(-8px) rotate(-1.5deg)}
.vitrine figcaption{margin-top:12px;font:700 15px "Space Grotesk"}.vitrine figcaption span{display:block;font-weight:500;font-size:13px;color:var(--cinza)}
.ferramentas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.ferramentas div{background:#fff;border-radius:18px;padding:22px;box-shadow:var(--sombra)}
.ferramentas b{font:800 24px Fraunces;color:var(--verde);display:block;margin-bottom:6px}
@media(max-width:900px){.ferramentas{grid-template-columns:1fr 1fr}}

/* trilho */
.trilho{padding:110px 0}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.passos div{padding:26px;background:#fff;border-radius:22px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.passos b{font:800 56px/1 Fraunces;color:var(--brasa);opacity:.9;display:block}
.passos h3{font:700 21px Fraunces;margin:14px 0 8px}.passos p{color:var(--cinza)}
@media(max-width:900px){.passos{grid-template-columns:1fr 1fr}}@media(max-width:520px){.passos{grid-template-columns:1fr}}

/* gerador */
.gerador{background:#fff;border-radius:30px;padding:52px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;box-shadow:var(--sombra);border:1px solid var(--linha)}
.gerador .linha{display:flex;gap:10px;margin:24px 0 14px}.gerador .linha input{flex:1}
.estilos-g{display:flex;gap:8px;flex-wrap:wrap}
.estilos-g button{border:1.5px solid var(--linha);background:#fff;color:var(--tinta);border-radius:10px;padding:8px 12px;font:600 13px "Space Grotesk";cursor:pointer}
.estilos-g button.on{border-color:var(--brasa);color:var(--brasa);background:var(--pessego)}
.estilos-g button.trava{color:var(--cinza)}.estilos-g button.trava:after{content:" 🔒"}
.previa{background:var(--papel);border:2px dashed var(--linha);border-radius:22px;min-height:420px;display:grid;place-items:center;text-align:center;color:var(--cinza);padding:16px}
.previa canvas{max-height:560px;width:auto;border-radius:14px;box-shadow:var(--sombra)}
.manual{display:grid;gap:10px;margin-top:12px}
@media(max-width:900px){.gerador{grid-template-columns:1fr;padding:28px}}

/* lojas */
.lojas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.lojas span{border:1px solid var(--linha);border-radius:999px;padding:10px 18px;font-weight:700;display:inline-flex;gap:10px;align-items:center;background:#fff;box-shadow:var(--sombra)}
.lojas span small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 8px;background:#f1ede6;color:var(--cinza)}
.lojas span.auto small{background:var(--verde);color:#fff}

/* planos */
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;align-items:stretch}
.plano{border:1px solid var(--linha);border-radius:24px;padding:30px;background:#fff;display:flex;flex-direction:column;position:relative;box-shadow:var(--sombra)}
.plano.dest{border:2px solid var(--brasa);box-shadow:0 24px 50px rgba(255,107,61,.16);transform:translateY(-8px)}
.plano.top{background:linear-gradient(160deg,#1f2430,#2b3142);color:#fff;border:0}
.plano.top .obs,.plano.top li{color:#c9cdd6}.plano.top .pr small{color:#9aa0ad}
.plano h3{font:700 24px Fraunces}
.plano .pr{font:800 52px/1 Fraunces;margin:16px 0 4px}.plano .pr small{font:600 16px "Space Grotesk";color:var(--cinza)}
.plano .obs{font-size:14px;color:var(--cinza)}
.plano ul{list-style:none;margin:20px 0 26px;display:grid;gap:10px;font-size:15px}
.plano li{display:flex;gap:10px}.plano li:before{content:"✓";color:var(--verde);font-weight:900}
.plano.top li:before{color:var(--ouro)}
.plano .btn{margin-top:auto;justify-content:center}
.fita{position:absolute;top:-14px;left:24px;background:var(--brasa);color:#fff;font-weight:700;font-size:12px;letter-spacing:.08em;border-radius:999px;padding:6px 14px}
.plano.top .fita{background:var(--ouro);color:var(--tinta)}
@media(max-width:900px){.planos{grid-template-columns:1fr}.plano.dest{transform:none}}
.matriz{width:100%;border-collapse:separate;border-spacing:0;margin-top:36px;font-size:15px;background:#fff;border:1px solid var(--linha);border-radius:18px;overflow:hidden;box-shadow:var(--sombra)}
.matriz th,.matriz td{padding:13px 16px;border-bottom:1px solid var(--linha);text-align:center}
.matriz tr:last-child td{border-bottom:0}
.matriz th:first-child,.matriz td:first-child{text-align:left}
.matriz thead th{background:var(--pessego);font-family:Fraunces;font-size:17px}
.matriz thead th:nth-child(3){color:var(--brasa)}
.matriz td.s{color:var(--verde);font-weight:900}.matriz td.n{color:#c9c2b6}
.rolar{overflow-x:auto}

/* espera + faq */
.espera{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:linear-gradient(135deg,#fff,var(--pessego));border:1px solid var(--linha);border-radius:30px;padding:46px;box-shadow:var(--sombra)}
.espera form{display:grid;gap:14px}
.espera .ok{background:#fff;border:2px solid var(--verde);border-radius:18px;padding:24px;text-align:center;font-weight:700}
@media(max-width:900px){.espera{grid-template-columns:1fr;padding:28px}}
details{border-bottom:1px solid var(--linha);padding:20px 0}
summary{font:700 20px Fraunces;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary:after{content:"+";font-family:"Space Grotesk";color:var(--brasa)}details[open] summary:after{content:"–"}
details p{color:var(--cinza);margin-top:10px;font-size:16px}
footer{background:#f3f0ea;color:var(--cinza);padding:50px 0;margin-top:100px;font-size:14px}
.revela{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s}.revela.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*:after{animation:none!important;transition:none!important}.revela{opacity:1;transform:none}}

/* rodapé completo e páginas internas (sobre, planos, privacidade, termos, suporte) */
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
footer h4{font:700 13px "Space Grotesk";letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:8px}footer ul a{text-decoration:none}footer ul a:hover{color:var(--brasa)}
footer .base{border-top:1px solid var(--linha);margin-top:34px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
@media(max-width:800px){footer .cols{grid-template-columns:1fr 1fr}}
.pagina{padding:130px 0 20px;background:radial-gradient(50% 45% at 90% 0%,#ffe1d3 0,rgba(255,225,211,0) 70%),var(--papel)}
.pagina h1{font:800 clamp(38px,6vw,64px)/1.02 Fraunces;letter-spacing:-.03em;margin:16px 0}
.pagina h1 em{font-style:italic;font-weight:600;color:var(--brasa)}
.texto{max-width:780px;padding:20px 0 40px}
.texto h2{font-size:26px;margin:36px 0 10px}
.texto p,.texto li{color:#3d4250;font-size:16.5px;margin-bottom:10px}
.texto ul{padding-left:20px}
.texto .caixa{background:#fff;border:1px solid var(--linha);border-radius:18px;padding:20px 22px;box-shadow:var(--sombra);margin:20px 0}
.atualizado{font-size:13px;color:var(--cinza)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0}
.cards3 div{background:#fff;border-radius:20px;padding:24px;box-shadow:var(--sombra)}
.cards3 b{font:800 22px Fraunces;display:block;margin-bottom:6px}
@media(max-width:800px){.cards3{grid-template-columns:1fr}}
.form{display:grid;gap:14px;background:#fff;border:1px solid var(--linha);border-radius:24px;padding:28px;box-shadow:var(--sombra)}
textarea{font:500 16px "Space Grotesk";border:1.5px solid var(--linha);border-radius:12px;padding:13px 15px;width:100%;min-height:150px;resize:vertical;outline:none}
textarea:focus{border-color:var(--brasa);box-shadow:0 0 0 4px rgba(255,107,61,.12)}

/* celular */
.plano li{display:block;position:relative;padding-left:24px}.plano li:before{position:absolute;left:0;top:0}
@media(max-width:600px){
  .hero{padding-top:100px}.hero .c{min-height:0}
  .placar{gap:8px}.placar div{padding:12px}.placar b{font-size:32px}.placar small{font-size:10px;letter-spacing:.06em}
  .celular{position:static}.celular .tela{min-height:420px}
  .bateia,.estudio,.trilho{padding:70px 0}
  .passos b{font-size:44px}
  .gerador .linha{flex-direction:column}.gerador .linha .btn{justify-content:center}
  .espera{padding:22px}.plano{padding:24px}
  .ferramentas{grid-template-columns:1fr}
  section[id] h2{font-size:34px}
}
.vitrine canvas{height:275px!important;object-fit:contain}