/* 19/10 (dono): REDESIGN da página, recriado do protótipo do dono ("Puro Suco Landing.dc.html").
   Versão A = o protótipo (escura). Versão B = a mesma página clara (fim deste arquivo, html[data-ab="B"]).
   Fontes do próprio site: Archivo variável (peso 400–900, largura 100–120%) e Instrument Serif itálico, só latim/português. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:100% 120%;font-display:swap;src:url('assets-mc/fonts/archivo.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('assets-mc/fonts/instrument-serif-italic.woff2') format('woff2')}

:root{
  color-scheme:dark;
  --bg:#0b0908;--sf:#16120f;--sf2:#1d1813;
  --ln:#221c17;--ln2:#241e18;--ln3:#2a221c;--ln4:#2e261f;--ln5:#3a3029;
  --tx:#f6efe6;--tx2:#c9bcae;--tx3:#d9cdbf;--tx4:#b5a99b;--mu:#a3978a;--mu2:#8a7e71;--mu3:#7f7366;
  --am:#ffc21a;--la:#ff7a1a;--lae:#c24e00;
  --cr:#f6efe6;--cr2:#ece3d6;--cr3:#e6dccf;--ctx:#0b0908;--ctx2:#3e3329;--ctx3:#5a4d40;--ctx4:#7a6a5a;
  /* destaque em Instrument Serif itálico e "eyebrows" */
  --hl:#ffc21a;--eb:#ff7a1a;
  --sombra:0 30px 60px rgba(0,0,0,.6);--sombra2:0 40px 80px rgba(0,0,0,.7);--sombra-cr:0 14px 30px rgba(11,9,8,.12);
  /* 20/10 (dono): tudo mais compacto — seções com menos respiro, principalmente no celular */
  --pad:clamp(40px,6vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--am);text-decoration:none}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--am);outline-offset:3px}
[id]{scroll-margin-top:16px}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.pular{position:absolute;left:12px;top:-60px;z-index:50;background:var(--am);color:#0b0908;padding:10px 16px;border-radius:999px;font-weight:700}
.pular:focus{top:12px}

/* destaque dos títulos: Instrument Serif itálico */
/* 28/10 (dono): a cursiva fica só em 1 ou 2 palavras e não quebra no meio */
.hl{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-stretch:100%;color:var(--hl);letter-spacing:-.01em;white-space:nowrap}
.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--eb);font-weight:700}
.h2-g,.h2-m,.h2-p{font-weight:900;font-stretch:108%;letter-spacing:-.025em;text-wrap:balance}
.h2-g{font-size:clamp(30px,4vw,54px);line-height:.98}
.h2-m{font-size:clamp(28px,3.6vw,48px);line-height:1}
.h2-p{font-size:clamp(28px,3.4vw,44px);line-height:1.02;font-stretch:106%;letter-spacing:-.02em}
.sec{padding:var(--pad) 0}
.sec-sem-topo{padding:0 0 var(--pad)}
.sec-sub{font-size:16px;color:var(--mu)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font:inherit;cursor:pointer;border:0;transition:background-color .2s,color .2s,border-color .2s;text-align:center}
.btn-am{background:var(--am);color:#0b0908;font-weight:700}
.btn-am:hover{background:var(--la);color:#0b0908}
.btn-ln{color:var(--tx);border:1px solid var(--ln5);font-weight:600}
.btn-ln:hover{border-color:var(--am);color:var(--am)}
.btn-pr{background:#0b0908;color:#f6efe6;font-weight:800}
.btn-pr:hover{background:#2a221c;color:var(--am)}
.btn-g{padding:18px 30px;font-size:17px;font-weight:800}
.btn-ln.btn-g{padding:18px 24px;font-size:16px;font-weight:600}
/* 20/10 (dono): botões do bloco 1 menores e lado a lado, numa linha só até no celular de 360 */
.btn-hero{padding:13px clamp(11px,2.2vw,22px);font-size:clamp(12.5px,3.5vw,16px);font-weight:800;white-space:nowrap}
.btn-ln.btn-hero{font-weight:600}
.btn-am.btn-hero{border:1px solid transparent}
@media (max-width:340px){.btn-hero{font-size:11.5px;padding:12px 9px}}

/* cabeçalho */
/* 20/10 (dono): no topo só o logo, parado (sem fixar, sem links, sem botão) */
.topo-in{padding-top:14px;padding-bottom:4px}
.topo-logo{display:inline-block}
.topo-logo img{height:34px;width:auto}

/* bloco 1 */
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(22px,4vw,48px);align-items:center;padding-top:clamp(14px,3vw,40px);padding-bottom:clamp(24px,4vw,40px)}
.hero-texto{display:flex;flex-direction:column;gap:clamp(14px,2vw,22px);min-width:0}
/* 19/10 (dono): a headline da A é bem mais longa que a do protótipo — mesmo desenho, letra menor (≈4 linhas no
   computador, ≈7 no celular). A B é curta e fica mais perto do tamanho do protótipo. */
#hero-title{font-size:clamp(36px,3.9vw,52px);line-height:.95;font-weight:900;font-stretch:112%;letter-spacing:-.03em;text-wrap:balance}
@media (max-width:600px){#hero-title{font-size:42px}}
@media (min-width:601px) and (max-width:999px){#hero-title{font-size:44px}}
/* no computador o texto do bloco 1 ganha um pouco mais de largura que as criações (a headline da A é longa) */
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
html[data-ab="B"] #hero-title{font-size:clamp(42px,6.4vw,72px);line-height:.93}
.hero-sub{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--tx2);max-width:540px;text-wrap:pretty}
/* 20/10 (dono): os dois botões sempre lado a lado, mesmo no celular de 360 */
.hero-ctas{display:flex;flex-wrap:nowrap;gap:8px;align-items:center}
/* 20/10 (dono): os rostos + "+ de 23 mil" vêm logo depois das criações, junto delas */
.hero-lado{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.hero-prova{display:flex;gap:10px 14px;align-items:center;justify-content:center;flex-wrap:wrap}
.rostos{display:flex}
.rostos i{width:44px;height:44px;border-radius:50%;border:2px solid var(--bg);margin-right:-12px;background:#1d1813 url('assets-mc/faces/hero-5.webp') no-repeat;background-size:500% 100%;background-position:calc(var(--i) * 25%) 0;flex:none}
.hero-prova p{font-size:14px;color:var(--tx2);padding-left:12px}
.hero-prova strong{color:var(--tx);font-size:16px}
.hero-visual{position:relative;aspect-ratio:1/.8;max-width:540px;width:100%}
.hero-brilho{position:absolute;inset:10% 8%;background:var(--la);border-radius:50%;filter:blur(90px);opacity:.28}
.hv{position:absolute;border-radius:14px;box-shadow:var(--sombra);background:var(--sf)}
.hv-e{width:40%;left:1%;top:13%;transform:rotate(-8deg)}
.hv-d{width:40%;right:1%;top:11%;transform:rotate(7deg)}
.hv-c{width:52%;left:24%;top:2%;border-radius:16px;box-shadow:var(--sombra2);border:1px solid var(--ln5);z-index:1}
.hero-pronto{position:absolute;right:2%;bottom:3%;z-index:2;background:var(--am);color:#0b0908;border-radius:999px;padding:10px 16px;font-weight:800;font-size:14px;transform:rotate(4deg);box-shadow:0 16px 30px rgba(0,0,0,.45)}

/* faixas que andam sozinhas (templates, capas, depoimentos) */
@keyframes ps-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ps-marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.faixa{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.faixa-lista{display:flex;gap:16px;width:max-content;align-items:flex-start}
.faixa-lista.anda{animation:ps-marquee var(--dur,80s) linear infinite}
.faixa-lista.faixa-volta.anda{animation-name:ps-marquee-r}
.faixa:hover .faixa-lista{animation-play-state:paused}
.faixa img{background:var(--sf)}
.tpls{padding:0 0 clamp(36px,5vw,56px);display:flex;flex-direction:column;gap:18px}
.tpls-topo{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:0 24px}
.tpls-topo .h2-m{font-size:clamp(26px,3.2vw,42px);font-stretch:108%;letter-spacing:-.02em;line-height:1;max-width:760px}
.tpls-topo p{font-size:14px;color:var(--mu)}
.tpl{width:200px;flex:none;display:flex;flex-direction:column;gap:8px}
.tpl img{width:200px;aspect-ratio:4/5;object-fit:cover;border-radius:12px}
.tpl span{font-size:11px;letter-spacing:.12em;color:var(--mu3);font-weight:600}

/* como funciona (demo + passos) */
.demo{border-top:1px solid var(--ln)}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(22px,4vw,48px);align-items:center}
.demo-texto{display:flex;flex-direction:column;gap:20px}
.demo-lead{font-size:17px;line-height:1.55;color:var(--tx2);max-width:480px}
.demo-selo{display:flex;gap:12px;align-items:center;font-size:15px;color:var(--tx3);max-width:480px}
.demo-selo b,.plano-inclui b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--am);color:#0b0908;display:flex;align-items:center;justify-content:center}
.demo-selo svg,.plano-inclui svg{width:15px;height:15px}
.demo-antes{font-size:15px;color:var(--mu);max-width:480px}
.demo-antes span{display:inline-block;margin-right:10px;padding:3px 9px;border-radius:999px;border:1px solid var(--ln5);color:var(--tx3);font-size:11px;font-weight:700;letter-spacing:.1em}
/* 19/10 (dono): só o vídeo, sem moldura de celular — o próprio vídeo já mostra o app no celular */
.celular{justify-self:center;width:min(340px,74vw)}
.celular-tela{width:100%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;position:relative}
.celular-tela video{width:100%;height:100%;object-fit:contain;display:block}
.demo-play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border:0;border-radius:999px;background:var(--am);color:#0b0908;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px -10px #000a}
.demo-play[hidden]{display:none}
/* 20/10 (dono): passos compactos e destacados: número forte num quadrado amarelo, título de uma linha, texto curto */
.passos{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;margin-top:clamp(22px,3vw,36px)}
.passo{background:var(--sf);border:1px solid var(--ln3);border-radius:18px;padding:18px;display:flex;gap:14px;align-items:flex-start}
.passo>b{flex:none;width:48px;height:48px;border-radius:14px;background:var(--am);color:#0b0908;display:grid;place-items:center;font-size:22px;font-weight:900;font-stretch:115%;line-height:1}
.passo h3{font-size:18px;font-weight:800;font-stretch:105%;letter-spacing:-.01em;line-height:1.15;margin-bottom:4px}
.passo p{font-size:14.5px;line-height:1.5;color:var(--tx2);text-wrap:pretty}
.passo strong{color:var(--tx)}
.meta-faixa{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;padding:14px 20px;border-radius:16px;background:var(--cr);color:#0b0908;margin-top:12px}
.meta-faixa img{height:38px;width:auto}
.meta-faixa p{font-size:14px;color:var(--ctx2);flex:1;min-width:220px}

/* feito por quem assina (faixa creme) */
.feito{background:var(--cr);color:var(--ctx)}
.feito .wrap{display:flex;flex-direction:column;gap:20px}
.feito .eyebrow{color:var(--lae)}
.feito .hl{color:inherit}
.feito-topo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px;align-items:end}
.feito-topo>div{display:flex;flex-direction:column;gap:14px}
.feito-topo>p{font-size:16px;color:var(--ctx3)}
.feito-abas{display:flex;gap:8px;flex-wrap:wrap}
.feito-aba{border:1px solid #d6cab9;background:transparent;color:var(--ctx2);border-radius:999px;padding:10px 18px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.feito-aba span{opacity:.6;font-weight:500}
.feito-aba[aria-selected="true"]{background:#0b0908;border-color:#0b0908;color:#f6efe6}
.feito-mais{border:1px dashed #b8a993;color:var(--lae);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:700}
.feito-mais:hover{border-color:var(--lae);color:var(--lae)}
.feito-slides{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.feito-slides[hidden]{display:none}
.feito-slides li{flex:none;width:min(250px,64vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.feito-slides img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;background:var(--cr3);box-shadow:var(--sombra-cr)}
.feito-slides span{font-size:12px;color:var(--ctx4);font-weight:700;letter-spacing:.1em}

/* nichos */
.nichos{display:flex;flex-direction:column;gap:22px}
.nichos>.wrap:first-child{width:100%;display:flex;flex-direction:column;gap:12px;padding:0 24px}
.nichos .faixa+.faixa{margin-top:-12px}
.faixa-capas{gap:14px}
.faixa-capas li{flex:none;width:200px}
.faixa-capas img{width:200px;aspect-ratio:4/5;object-fit:cover;border-radius:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 4px}
.chips li{border:1px solid var(--ln4);border-radius:999px;padding:8px 14px;font-size:14px;color:var(--tx3)}
.chips .chip-mais{border-style:dashed;border-color:var(--ctx3);color:var(--am);font-weight:700}
.chips .chip-am{background:var(--am);border-color:var(--am);color:#0b0908;font-weight:700}

/* estúdio */
.estudio{border-top:1px solid var(--ln)}
.estudio .wrap{display:flex;flex-direction:column}
.estudio .eyebrow{margin-bottom:14px}
.estudio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:12px;margin-top:clamp(20px,3vw,32px)}
.card{background:var(--sf);border:1px solid var(--ln3);border-radius:20px;padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:14px}
.card-n{font-size:12px;letter-spacing:.14em;color:var(--mu);font-weight:600}
.card h3{font-size:clamp(22px,2.4vw,26px);font-weight:800;font-stretch:106%;letter-spacing:-.015em;line-height:1.05}
.card>p:not(.card-n){font-size:16px;line-height:1.6;color:var(--tx2)}
.card-am{background:var(--am);border-color:var(--am);color:#0b0908}
.card-am .card-n{color:#5a4300;font-weight:700}
.card-am ul{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.5}
.ias{display:flex;gap:8px;flex-wrap:wrap}
.ias li{border:1px solid var(--ln5);border-radius:999px;padding:6px 12px;font-size:13px}
.ias .ias-mais{border:0;padding:6px 4px;color:var(--mu)}
.publico-t{font-size:14px;color:var(--mu);margin-top:24px}
.publico{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.publico li{background:var(--sf2);border:1px solid var(--ln4);border-radius:999px;padding:12px 20px;font-size:16px;font-weight:600}

/* case do Diego */
.case{background:var(--sf);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(24px,4vw,48px);align-items:center}
.case-texto{display:flex;flex-direction:column;gap:16px;min-width:0}
.case-perfil{font-size:15px;color:var(--tx2)}
.verif{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#3897f0;color:#fff;font-size:10px;font-weight:800;vertical-align:1px}
.case-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.case-num li{border-top:2px solid var(--am);padding-top:14px}
.case-num b{display:block;font-size:clamp(24px,2.8vw,38px);font-weight:900;font-stretch:112%;line-height:1}
.case-num span{display:block;font-size:13px;color:var(--mu);margin-top:4px}
.case-insights{width:100%;max-width:494px;border-radius:14px;border:1px solid var(--ln3);background:#000}
.case-nota{font-size:12px;color:var(--mu2);max-width:520px}
.case-grade{justify-self:center;width:min(380px,100%);position:relative}
.case-grade img{width:100%;border-radius:22px;box-shadow:0 40px 80px rgba(0,0,0,.6);border:1px solid var(--ln3);background:#000}
.case-sticker{position:absolute;left:-14px;bottom:28px;background:var(--am);color:#0b0908;border-radius:999px;padding:10px 16px;font-weight:800;font-size:13px;transform:rotate(-4deg)}

/* depoimentos */
.depo{display:flex;flex-direction:column;gap:24px}
.depo>.wrap{width:100%;display:flex;flex-direction:column;gap:12px;padding:0 24px}
.depo .faixa+.faixa{margin-top:-20px}
.faixa-depo li{flex:none;width:260px}
.faixa-depo img{width:260px;border-radius:14px;border:1px solid var(--ln3)}

/* por que carrossel (card creme) */
/* 20/10 (dono): "Por que carrossel" compacto, dentro do case: miniatura da notícia + texto curto, numa faixa creme */
.porque{margin-top:clamp(24px,4vw,40px);background:var(--cr);color:var(--ctx);border-radius:20px;padding:clamp(16px,2.6vw,24px);display:grid;grid-template-columns:clamp(96px,16vw,150px) 1fr;gap:clamp(14px,2.4vw,24px);align-items:center}
.porque>div{display:flex;flex-direction:column;gap:8px}
.porque .eyebrow{color:var(--lae)}
.porque h3{font-size:clamp(18px,2.2vw,26px);font-weight:900;font-stretch:106%;letter-spacing:-.015em;line-height:1.08}
.porque p{font-size:14.5px;line-height:1.5;color:var(--ctx3)}
.porque .porque-fonte{display:block;margin-top:4px;font-size:12px;color:var(--ctx4);font-style:italic}
.porque img{width:100%;border-radius:12px;box-shadow:0 10px 24px rgba(11,9,8,.18)}

/* o que você recebe */
.recebe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(18px,3vw,36px);align-items:start}
.recebe>div:first-child{display:flex;flex-direction:column;gap:14px}
.recebe .h2-m{font-size:clamp(28px,3.4vw,44px)}
.recebe-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.recebe-e,.recebe-nao{border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px;font-size:16px;line-height:1.5}
.recebe-e{background:var(--sf);border:1px solid var(--ln3)}
.recebe-nao{border:1px dashed var(--ln5);color:var(--tx2)}
.recebe-nao strong{color:var(--tx)}
.recebe-r{font-size:12px!important;letter-spacing:.14em;font-weight:700;color:var(--am)}
.recebe-nao .recebe-r{color:var(--mu)}

/* plano */
.plano{border-top:1px solid var(--ln)}
.plano-in{max-width:1100px;display:flex;flex-direction:column;gap:clamp(20px,3vw,32px);align-items:center}
.plano-cab{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.plano-cab .h2-g{font-size:clamp(32px,4.4vw,60px)}
.plano-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px;align-items:stretch}
.plano-am{background:var(--am);color:#0b0908;border-radius:28px;padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:6px}
.plano-prazo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:14px;font-size:14px;font-weight:600}
.plano-prazo[hidden]{display:none}
.plano-prazo span:first-child{background:#0b0908;color:var(--am);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.plano-prazo time{font-weight:800;font-variant-numeric:tabular-nums}
.plano-flag{font-size:12px;letter-spacing:.14em;font-weight:800}
.plano-am h3{font-size:22px;font-weight:800;margin-top:6px}
.plano-de{font-size:15px;margin-top:8px}
.plano-de[hidden]{display:none}
.plano-preco{display:flex;align-items:baseline;gap:6px}
.plano-valor{font-size:clamp(64px,8vw,96px);font-weight:900;font-stretch:112%;letter-spacing:-.03em;line-height:1}
.plano-per{font-size:20px;font-weight:600}
.plano-billing{font-size:15px;line-height:1.5}
.plano-renova{font-size:14px;line-height:1.5;color:#5a4300}
.plano-btn{width:100%;padding:20px;font-size:17px;letter-spacing:.02em;margin-top:16px}
.plano-garantia{font-size:14px;text-align:center;font-weight:600;margin-top:16px}
.plano-inclui{background:var(--sf);border:1px solid var(--ln3);border-radius:28px;padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:16px}
.plano-inclui .card-n{font-weight:700}
.plano-inclui ul{display:flex;flex-direction:column;gap:12px}
.plano-inclui li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;padding-bottom:12px;border-bottom:1px solid var(--ln2)}
.plano-inclui b{width:22px;height:22px;margin-top:1px}

/* bônus */
.bonus .wrap{display:flex;flex-direction:column;gap:12px}
.bonus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin-top:16px}
.bonus-card{background:var(--sf);border:1px solid var(--ln3);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.bonus-card img{width:100%;aspect-ratio:480/689;background:var(--sf2)}
.bonus-card div{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px}
.bonus-card div p:first-child{font-size:11px;letter-spacing:.14em;color:var(--am);font-weight:700}
.bonus-card h3{font-size:21px;font-weight:800;font-stretch:104%}
.bonus-card div p+h3+p{font-size:15px;line-height:1.55;color:var(--tx4)}
/* 20/10 (dono: "não precisa de destaque no bônus, os cards ficaram muito grandes"): cards compactos — no computador três
   pequenos lado a lado; no celular cada bônus vira uma linha (capa pequena à esquerda, texto ao lado) */
.bonus-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:780px;gap:12px}
.bonus-card{border-radius:16px}
.bonus-card img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.bonus-card div{padding:12px 14px 14px;gap:4px}
.bonus-card div p:first-child{font-size:10px}
.bonus-card h3{font-size:16px}
.bonus-card div p+h3+p{font-size:13.5px;line-height:1.45}
@media (max-width:640px){
  .bonus-grid{grid-template-columns:1fr;max-width:none;gap:10px}
  .bonus-card{flex-direction:row;align-items:center;border-radius:14px}
  .bonus-card img{width:84px;flex:0 0 84px;height:auto;aspect-ratio:auto;align-self:stretch;object-fit:cover;object-position:center}
  .bonus-card div{padding:10px 14px}
  .bonus-card h3{font-size:15px}
  .bonus-card div p+h3+p{font-size:13px}
}

/* perguntas */
.faq{border-top:1px solid var(--ln)}
.faq .wrap{display:flex;flex-direction:column;gap:14px}
.faq-lista{max-width:880px;margin-top:26px}
.faq-lista details{border-bottom:1px solid var(--ln3)}
.faq-lista summary{list-style:none;cursor:pointer;font-size:17px;font-weight:700;padding:16px 0;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary span{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--ln5);display:flex;align-items:center;justify-content:center;color:var(--am);font-size:18px}
.faq-lista summary span::before{content:'+'}
.faq-lista details[open] summary span::before{content:'\2212'}
.faq-lista p{margin:0 0 24px;font-size:16px;line-height:1.65;color:var(--tx2);max-width:720px}

/* CTA final + rodapé */
.final{background:var(--la);color:#0b0908}
.final-in{padding-top:var(--pad);padding-bottom:var(--pad);display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center}
.final h2{font-size:clamp(40px,7vw,100px);font-weight:900;font-stretch:115%;letter-spacing:-.04em;line-height:.88;text-wrap:balance}
.final .hl{color:inherit}
.final .btn{padding:20px 34px;font-size:18px}
.rodape-in{padding-top:32px;padding-bottom:32px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--mu2)}
.rodape img{height:28px;width:auto}

/* 20/10 (dono): celular mais compacto — mídias menores, abas do "feito" numa linha que rola, selo da Meta em linha */
@media (max-width:640px){
  .celular{width:min(300px,64vw)}
  .meta-faixa{flex-wrap:nowrap;padding:12px 14px;gap:12px}
  .meta-faixa img{height:28px}
  .meta-faixa p{font-size:13px;min-width:0}
  .tpl,.tpl img{width:160px}
  .faixa-capas li,.faixa-capas img{width:140px}
  .faixa-depo li,.faixa-depo img{width:190px}
  .feito-abas{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none}
  .feito-abas::-webkit-scrollbar{display:none}
  .feito-aba,.feito-mais{flex:none;padding:9px 14px;font-size:13px}
  .chips{gap:6px}
  .chips li{padding:6px 11px;font-size:13px}
  .publico li{padding:9px 14px;font-size:14px}
  .case-grade{width:min(270px,76vw)}
  .case-sticker{left:-8px;font-size:12px;padding:8px 13px}
  .hero-sub{font-size:16px}
}
/* "reduzir movimento": faixas paradas e roláveis, sem rolagem suave */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .faixa{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .faixa-lista.anda{animation:none}
}

/* ═══ 19/10 (dono): versão B — "mesma pegada", CLARA: fundo branco, texto escuro, amarelo/laranja como preenchimento e
   destaque legível (texto de destaque em #c24e00; amarelo só como fundo). Sem brilho, sem desfoque, sem bege. ═══ */
html[data-ab="B"]{
  color-scheme:light;
  --bg:#ffffff;--sf:#f5f5f5;--sf2:#efefef;
  --ln:#e6e6e6;--ln2:#e6e6e6;--ln3:#e2e2e2;--ln4:#dcdcdc;--ln5:#cfcfcf;
  --tx:#0b0908;--tx2:#45403b;--tx3:#2f2a26;--tx4:#55504a;--mu:#625c56;--mu2:#6b655f;--mu3:#6b655f;
  --cr:#f4f4f4;--cr3:#e9e9e9;--ctx2:#2f2a26;--ctx3:#4d4741;--ctx4:#625c56;
  --hl:#c24e00;--eb:#c24e00;
  --sombra:0 18px 40px rgba(0,0,0,.18);--sombra2:0 22px 50px rgba(0,0,0,.22);--sombra-cr:0 10px 24px rgba(0,0,0,.08);
}
html[data-ab="B"] .hero-brilho{display:none}
html[data-ab="B"] .topo-logo img,html[data-ab="B"] .rodape img{filter:brightness(.1)}
html[data-ab="B"] .btn-ln:hover{color:var(--lae);border-color:var(--lae)}
html[data-ab="B"] .recebe-r,html[data-ab="B"] .bonus-card div p:first-child,html[data-ab="B"] .faq-lista summary span{color:var(--lae)}
html[data-ab="B"] .chips .chip-mais{border-color:#b8b8b8;color:var(--lae)}
html[data-ab="B"] .feito-aba{border-color:#cfcfcf}
html[data-ab="B"] .feito-mais{border-color:#b8b8b8}
html[data-ab="B"] .case-num li{border-top-color:var(--la)}
html[data-ab="B"] .case-grade img{box-shadow:0 22px 50px rgba(0,0,0,.2)}
html[data-ab="B"] .hero-pronto{box-shadow:0 12px 24px rgba(0,0,0,.18)}
html[data-ab="B"] .porque img{box-shadow:0 14px 34px rgba(0,0,0,.14)}
/* B: dentro do case (cinza claro) o card do "por que carrossel" fica branco com fio, pra não sumir */
html[data-ab="B"] .porque{background:#fff;border:1px solid var(--ln3)}
html[data-ab="B"] .faixa img,html[data-ab="B"] .case-insights,html[data-ab="B"] .case-grade img{background:#ececec}
/* B: as criações brancas sumiam no fundo branco — fio cinza em volta */
html[data-ab="B"] .tpl img,html[data-ab="B"] .faixa-capas img,html[data-ab="B"] .feito-slides img{outline:1px solid #e0e0e0;outline-offset:-1px}

/* ═══ 28/10 (dono): PRÉVIA do tema CREME — inspirado no estilo do site do Leandro Ferrari (só a linguagem visual):
   fundo creme claro, texto quase preto, o NOSSO laranja no lugar do vermelho, títulos grandes em caixa alta condensada
   (Anton) e texto numa grotesca limpa (Inter Tight; a Neue Haas da referência é paga). Destaque = COR, não cursiva. ═══ */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets-mc/fonts/inter-tight.woff2') format('woff2')}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('assets-mc/fonts/anton.woff2') format('woff2')}
/* 28/10 (dono): a fonte dos títulos da referência é a Boldonse (gratuita, OFL) */
@font-face{font-family:'Boldonse';font-style:normal;font-weight:400;font-display:swap;src:url('assets-mc/fonts/boldonse.woff2') format('woff2')}
html[data-tema="creme"]{
  color-scheme:light;
  --bg:#faf5e5;--sf:#f3ecd6;--sf2:#eee5cb;
  --ln:#e6dcc2;--ln2:#e6dcc2;--ln3:#ddd1b3;--ln4:#d3c6a6;--ln5:#c2b493;
  --tx:#150809;--tx2:#3a2a2b;--tx3:#2c1f20;--tx4:#4a3b3c;--mu:#6b5b55;--mu2:#7a6a63;--mu3:#7a6a63;
  --am:#ff7a1a;--la:#ff7a1a;--lae:#c85300;
  --cr:#f3ecd6;--cr2:#eee5cb;--cr3:#e6dcc2;--ctx:#150809;--ctx2:#3a2a2b;--ctx3:#5a4a45;--ctx4:#6b5b55;
  /* texto em laranja precisa de um tom um pouco mais fechado pra ler no creme; o laranja puro fica pros preenchimentos */
  --hl:#e25e00;--eb:#e25e00;
  --sombra:0 18px 40px rgba(21,8,9,.16);--sombra2:0 22px 50px rgba(21,8,9,.2);--sombra-cr:0 10px 24px rgba(21,8,9,.08);
}
html[data-tema="creme"] body{font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px}
html[data-tema="creme"] .hero-brilho{display:none}
html[data-tema="creme"] .topo-logo img,html[data-tema="creme"] .rodape img{filter:brightness(.1)}
/* destaque: a MESMA família do título, em laranja — nada de cursiva */
html[data-tema="creme"] .hl{font-family:inherit;font-style:normal;font-weight:inherit;font-stretch:inherit;letter-spacing:inherit;color:var(--hl)}
/* títulos de seção: caixa alta condensada, grande */
html[data-tema="creme"] .h2-g,html[data-tema="creme"] .h2-m,html[data-tema="creme"] .h2-p,html[data-tema="creme"] .tpls-topo .h2-m{font-family:'Anton','Inter Tight',sans-serif;font-weight:400;font-stretch:100%;text-transform:uppercase;letter-spacing:0;line-height:1.02}
/* headline do topo: grotesca média, e o fim ("30 segundos.") num bloco laranja, como o "COM 90% DE DESCONTO." */
html[data-tema="creme"] #hero-title{font-family:'Inter Tight',sans-serif;font-weight:600;font-stretch:100%;letter-spacing:-.02em;line-height:1.1;font-size:clamp(30px,3.4vw,46px)}
html[data-tema="creme"] #hero-title .hl{display:block;margin-top:.28em;color:#150809;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0;font-size:1.32em;line-height:1;white-space:normal}
html[data-tema="creme"] #hero-title .hl span{display:inline-block;background:var(--am);padding:.06em .2em .02em;margin:0 0 .06em}
html[data-tema="creme"] .eyebrow{letter-spacing:.2em;font-weight:700}
/* botões: pílula laranja; texto escuro (o creme em cima do laranja não dá leitura) */
html[data-tema="creme"] .btn-am,html[data-tema="creme"] .btn-pr{background:var(--am);color:#150809;font-weight:700;letter-spacing:.02em;box-shadow:0 14px 30px rgba(255,122,26,.32)}
html[data-tema="creme"] .btn-am:hover,html[data-tema="creme"] .btn-pr:hover{background:#ff8f3d;color:#150809}
html[data-tema="creme"] .btn-ln{color:var(--tx);border-color:var(--tx)}
html[data-tema="creme"] .btn-ln:hover{color:var(--lae);border-color:var(--lae)}
html[data-tema="creme"] .hero-pronto{background:var(--am);color:#150809;box-shadow:0 12px 24px rgba(21,8,9,.18)}
/* faixa de preço: bloco laranja inteiro, de ponta a ponta (como a seção vermelha do preço), com o card creme dentro */
html[data-tema="creme"] .plano{background:linear-gradient(160deg,#ff8a2e 0%,#ff7a1a 45%,#e86300 100%);border-top:0;color:#150809}
html[data-tema="creme"] .plano .eyebrow{color:#150809}
html[data-tema="creme"] .plano .h2-g{color:#faf5e5}
html[data-tema="creme"] .plano .hl{color:#150809}
html[data-tema="creme"] .plano-am{background:#faf5e5;color:#150809;box-shadow:0 30px 60px rgba(120,40,0,.25)}
html[data-tema="creme"] .plano-valor{font-family:'Anton',sans-serif;font-weight:400;font-stretch:100%;letter-spacing:0;font-size:clamp(72px,9vw,112px)}
html[data-tema="creme"] .plano-renova{color:var(--mu)}
html[data-tema="creme"] .plano-btn{background:#150809;color:#faf5e5;box-shadow:none}
html[data-tema="creme"] .plano-btn:hover{background:#2c1f20;color:#ffb27a}
html[data-tema="creme"] .plano-grid>*:not(.plano-am){background:#150809;color:#faf5e5;border-color:#150809}
/* listas e cards com fio fino, como a grade da referência */
html[data-tema="creme"] .recebe-e,html[data-tema="creme"] .porque{background:#fffaf0;border:1px solid var(--ln3)}
html[data-tema="creme"] .recebe-r,html[data-tema="creme"] .bonus-card div p:first-child,html[data-tema="creme"] .faq-lista summary span{color:var(--lae)}
html[data-tema="creme"] .chips .chip-mais{border-color:var(--ln5);color:var(--lae)}
html[data-tema="creme"] .case-num li{border-top-color:var(--am)}
html[data-tema="creme"] .case-num b{font-family:'Anton',sans-serif;font-weight:400;font-stretch:100%}
html[data-tema="creme"] .case-insights{background:#fffaf0}
html[data-tema="creme"] .faixa img,html[data-tema="creme"] .case-grade img{background:#efe6cc}
html[data-tema="creme"] .tpl img,html[data-tema="creme"] .faixa-capas img,html[data-tema="creme"] .feito-slides img{outline:1px solid #e2d6b8;outline-offset:-1px}
html[data-tema="creme"] .feito-aba{border-color:var(--ln5)}
/* creme: na faixa final (fundo laranja) o destaque vira caixa preta com letra laranja — laranja sobre laranja sumia */
html[data-tema="creme"] .final .hl{color:var(--am);background:#150809;padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ═══ 28/10 (dono): prévia mais FIEL à referência (medida no site: celular 390px e computador 1440px) ═══
   Fonte do texto = Neue Haas Grotesk Display na referência (paga). Aqui: a Helvetica Neue que o iPhone/Mac já tem
   (mesmo desenho), e Inter Tight nos outros aparelhos. Títulos e caixas = condensada pesada (Anton). */
html[data-tema="creme"] body,html[data-tema="creme"] #hero-title{font-family:'Neue Haas Grotesk Display Pro','Helvetica Neue',Helvetica,'Inter Tight',Arial,sans-serif}
/* frase de cima: peso 500, 34px no computador / ~22px no celular */
html[data-tema="creme"] #hero-title{font-weight:500;letter-spacing:-.01em;line-height:1.2;font-size:clamp(21px,2.4vw,34px)}
@media (max-width:600px){html[data-tema="creme"] #hero-title{font-size:22px}}
@media (min-width:601px) and (max-width:999px){html[data-tema="creme"] #hero-title{font-size:28px}}
/* caixa: 58px no computador / 34px no celular, letra creme no laranja */
html[data-tema="creme"] #hero-title .hl{font-size:clamp(34px,4vw,58px);line-height:1.12;margin-top:.22em;color:#faf5e5}
html[data-tema="creme"] #hero-title .hl span{background:#f26b0f;padding:.04em .16em 0}
html[data-tema="creme"] .hero-sub{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:#3a2a2b}
/* um botão só, em pílula, caixa alta 15px/500, sombra laranja — texto escuro pra dar leitura no laranja */
html[data-tema="creme"] .btn-teste{font-family:inherit;font-weight:600;font-size:15px;letter-spacing:.02em;text-transform:uppercase;padding:21px 38px;border-radius:999px;background:var(--am);color:#150809;box-shadow:0 18px 36px rgba(255,122,26,.35)}
html[data-tema="creme"] .btn-teste:hover{background:#ff8f3d;color:#150809}
html[data-tema="creme"] .plano-btn.btn-teste{width:100%;justify-content:center;background:var(--am);margin-top:16px}
html[data-tema="creme"] .plano-teste{font-size:13px;text-align:center;color:var(--mu);margin-top:6px}
/* celular: TUDO centralizado, como a referência */
@media (max-width:760px){
  html[data-tema="creme"] .topo-in{display:flex;justify-content:center}
  html[data-tema="creme"] .hero-texto{align-items:center;text-align:center}
  html[data-tema="creme"] .hero-sub{margin-left:auto;margin-right:auto}
  html[data-tema="creme"] .hero-ctas{justify-content:center;width:100%}
  html[data-tema="creme"] .btn-teste{width:100%;justify-content:center}
  html[data-tema="creme"] .eyebrow,html[data-tema="creme"] .h2-g,html[data-tema="creme"] .h2-m,html[data-tema="creme"] .h2-p,html[data-tema="creme"] .sec-sub{text-align:center}
  html[data-tema="creme"] .tpls-topo,html[data-tema="creme"] .feito-topo,html[data-tema="creme"] .case-texto,html[data-tema="creme"] .recebe>div:first-child{text-align:center;justify-items:center;align-items:center}
  html[data-tema="creme"] .chips,html[data-tema="creme"] .feito-abas{justify-content:center}
}
@media (max-width:760px){
  html[data-tema="creme"] .demo-lead,html[data-tema="creme"] .demo-antes,html[data-tema="creme"] .case-perfil,html[data-tema="creme"] .tpls-topo p,html[data-tema="creme"] .feito-topo p{text-align:center}
  html[data-tema="creme"] .tpls-topo{justify-content:center}
}
@media (max-width:760px){html[data-tema="creme"] .demo-texto{align-items:center}}

/* ═══ 28/10 (dono): títulos na BOLDONSE (a da referência), destaque = degradê AMARELO → LARANJA do Puro Suco,
   "a autoridade do seu nicho." numa linha só ═══ */
html[data-tema="creme"]{--grad:linear-gradient(90deg,#ffc21a 0%,#ff9a1a 55%,#ff7a1a 100%)}
html[data-tema="creme"] .h2-g,html[data-tema="creme"] .h2-m,html[data-tema="creme"] .h2-p,html[data-tema="creme"] .tpls-topo .h2-m{font-family:'Boldonse',sans-serif;line-height:1.38;letter-spacing:0}
html[data-tema="creme"] .h2-g{font-size:clamp(24px,3vw,44px)}
html[data-tema="creme"] .h2-m,html[data-tema="creme"] .tpls-topo .h2-m,html[data-tema="creme"] .recebe .h2-m{font-size:clamp(22px,2.6vw,38px)}
html[data-tema="creme"] .plano-cab .h2-g{font-size:clamp(24px,3.2vw,46px)}
/* destaque nos títulos: marca-texto em degradê, letra escura (amarelo como LETRA no creme não dá leitura) */
html[data-tema="creme"] .hl{font-family:inherit;font-style:normal;color:#150809;background:var(--grad);padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:nowrap}
/* caixa da headline: uma linha só, Boldonse, o tamanho acompanha a largura (no celular ~19px, no computador até 34px) */
html[data-tema="creme"] #hero-title .hl{display:block;margin-top:.5em;background:none;padding:0;font-family:'Boldonse',sans-serif;line-height:1;white-space:nowrap;font-size:min(34px,calc((100vw - 56px) / 18.6))}
@media (min-width:1000px){html[data-tema="creme"] #hero-title .hl{font-size:34px}}
html[data-tema="creme"] #hero-title .hl span{display:inline-block;background:var(--grad);color:#150809;padding:.42em .34em .3em}
/* botões no degradê */
html[data-tema="creme"] .btn-teste,html[data-tema="creme"] .plano-btn.btn-teste{background:var(--grad);color:#150809;box-shadow:0 18px 36px rgba(255,140,26,.32)}
html[data-tema="creme"] .btn-teste:hover{background:linear-gradient(90deg,#ffd04d,#ff8f3d);color:#150809}
html[data-tema="creme"] .hero-pronto{background:var(--grad)}
/* faixa do preço e faixa final no degradê; título escuro por cima */
html[data-tema="creme"] .plano{background:linear-gradient(160deg,#ffc21a 0%,#ff9a1a 50%,#ff7a1a 100%)}
html[data-tema="creme"] .plano .h2-g{color:#150809}
html[data-tema="creme"] .plano .hl,html[data-tema="creme"] .final .hl{background:#150809;color:#ffc21a}
html[data-tema="creme"] .final{background:linear-gradient(160deg,#ffc21a 0%,#ff9a1a 50%,#ff7a1a 100%)}
html[data-tema="creme"] .final h2{font-family:'Boldonse',sans-serif;font-weight:400;line-height:1.38;letter-spacing:0;font-size:clamp(26px,4vw,56px)}
html[data-tema="creme"] .plano-valor,html[data-tema="creme"] .case-num b{font-family:'Boldonse',sans-serif;letter-spacing:0;line-height:1.2}
html[data-tema="creme"] .plano-valor{font-size:clamp(52px,6.4vw,84px)}
html[data-tema="creme"] .case-num b{font-size:clamp(20px,2.2vw,30px)}
html[data-tema="creme"] .demo-selo b,html[data-tema="creme"] .plano-inclui b{background:var(--grad)}
html[data-tema="creme"] .case-num li{border-image:var(--grad) 1;border-top-width:3px}
/* Boldonse é alta: entrelinha 1,5 como a referência (50px/75px), senão a caixa do destaque encosta na linha de cima */
html[data-tema="creme"] .h2-g,html[data-tema="creme"] .h2-m,html[data-tema="creme"] .h2-p,html[data-tema="creme"] .tpls-topo .h2-m,html[data-tema="creme"] .final h2{line-height:1.5}
html[data-tema="creme"] .hl{padding:.04em .14em 0}
/* o fundo do destaque seguia a altura enorme da Boldonse e cobria a linha de cima: caixa com altura própria */
html[data-tema="creme"] .h2-g .hl,html[data-tema="creme"] .h2-m .hl,html[data-tema="creme"] .h2-p .hl,html[data-tema="creme"] .final h2 .hl{display:inline-block;line-height:1.24;padding:0 .16em .2em;vertical-align:baseline}
/* faixa final em degradê: o botão em degradê sumia nela — botão preto com letra creme */
html[data-tema="creme"] .final .btn-teste{background:#150809;color:#faf5e5;box-shadow:0 18px 36px rgba(21,8,9,.25)}
html[data-tema="creme"] .final .btn-teste:hover{background:#2c1f20;color:#ffc21a}
/* passos do "Como funciona" (4 agora): número no degradê, na Boldonse */
html[data-tema="creme"] .passo{background:#fffaf0}
html[data-tema="creme"] .passo>b{background:var(--grad);color:#150809;font-family:'Boldonse',sans-serif;font-weight:400;font-size:18px;font-stretch:100%}
html[data-tema="creme"] .passos{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
/* 28/10 (dono): faixa "templates virais, atualizados toda semana" no lugar dos cards */
.tarja{padding:clamp(28px,4vw,52px) 0;overflow:hidden}
.tarja-faixa{-webkit-mask-image:none;mask-image:none;background:var(--am);transform:rotate(-2deg);margin:0 -40px;padding:14px 0}
.tarja-lista{gap:0;align-items:center}
.tarja-lista li{flex:none;white-space:nowrap;padding:0 18px;font-size:clamp(18px,2.2vw,28px);font-weight:900;line-height:1.4;color:#0b0908;text-transform:uppercase}
.tarja-lista .tarja-sep{padding:0 4px;font-size:.8em}
html[data-tema="creme"] .tarja-faixa{background:var(--grad);box-shadow:0 14px 30px rgba(255,140,26,.22)}
html[data-tema="creme"] .tarja-lista li{font-family:'Boldonse',sans-serif;font-weight:400;color:#150809}

/* ═══ 28/10 (dono): encaixe ONDULADO entre as seções e mais respiro ═══
   As seções com fundo próprio (feito, case, plano, final) recebem uma máscara com onda em cima e embaixo — funciona até
   com fundo em degradê. O padding cresce o bastante pra onda nunca encostar no conteúdo. */
html[data-tema="creme"]{--pad:clamp(56px,8vw,104px);--onda:clamp(28px,4vw,56px)}
html[data-tema="creme"] .estudio,html[data-tema="creme"] .plano,html[data-tema="creme"] .case,html[data-tema="creme"] .topo + main > section:first-child{border-top:0;border-bottom:0}
html[data-tema="creme"] .hero{border-bottom:0}
html[data-tema="creme"] .feito,html[data-tema="creme"] .case,html[data-tema="creme"] .plano,html[data-tema="creme"] .final{
  position:relative;margin:clamp(16px,3vw,32px) 0;
  padding-top:calc(var(--pad) + var(--onda));padding-bottom:calc(var(--pad) + var(--onda));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C240,2 480,2 720,20 C960,38 1200,38 1440,18 L1440,40 L0,40 Z'/%3E%3C/svg%3E"),linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,18 C1200,38 960,38 720,20 C480,2 240,2 0,22 Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C240,2 480,2 720,20 C960,38 1200,38 1440,18 L1440,40 L0,40 Z'/%3E%3C/svg%3E"),linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,18 C1200,38 960,38 720,20 C480,2 240,2 0,22 Z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% var(--onda),100% calc(100% - 2 * var(--onda) + 2px),100% var(--onda);mask-size:100% var(--onda),100% calc(100% - 2 * var(--onda) + 2px),100% var(--onda);
  -webkit-mask-position:top,center,bottom;mask-position:top,center,bottom;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* a faixa final é a última antes do rodapé: onda só em cima */
html[data-tema="creme"] .final{margin-bottom:0;padding-bottom:var(--pad);
  -webkit-mask-size:100% var(--onda),100% calc(100% - var(--onda) + 1px),0 0;mask-size:100% var(--onda),100% calc(100% - var(--onda) + 1px),0 0;
  -webkit-mask-position:top,bottom,bottom;mask-position:top,bottom,bottom}

/* 28/10 (dono): faixas cruzadas no fim do topo (como a referência): uma escura com letra creme, outra no degradê com
   letra escura, inclinadas pra lados opostos; o separador é a marca do Puro Suco (bolinha amarela com ponto laranja) */
.cruz{position:relative;height:clamp(110px,12vw,150px);overflow:hidden;margin-top:clamp(-30px,-2vw,-10px)}
.cruz .faixa{-webkit-mask-image:none;mask-image:none;position:absolute;left:-60px;right:-60px;top:50%;padding:12px 0}
.cruz-a{background:#150809;transform:translateY(-58%) rotate(-3deg);z-index:1}
.cruz-b{background:var(--grad,var(--am));transform:translateY(-42%) rotate(2.4deg);z-index:2;box-shadow:0 10px 30px rgba(21,8,9,.18)}
.cruz .faixa-lista{gap:0;align-items:center}
.cruz li{flex:none;white-space:nowrap;padding:0 16px;font-family:'Boldonse',sans-serif;font-size:clamp(16px,1.9vw,24px);line-height:1.5;text-transform:uppercase}
.cruz-a li{color:#faf5e5}
.cruz-b li{color:#150809}
.cruz .cruz-sep{padding:0 4px;display:flex;align-items:center}
.cruz-sep i{display:block;width:.9em;height:.9em;border-radius:50%;background:radial-gradient(circle,#e8501a 0 22%,#ffc21a 24%);box-shadow:2px 2px 0 rgba(0,0,0,.55)}
.cruz-b .cruz-sep i{background:radial-gradient(circle,#ffc21a 0 22%,#150809 24%);box-shadow:none}

/* celular: as abas dos nichos quebram em linhas, centralizadas — centralizar uma fileira que rola cortava a 1ª aba e
   não dava pra tocar direito */
@media (max-width:760px){html[data-tema="creme"] .feito-abas{flex-wrap:wrap;overflow:visible;margin:0;padding:0;justify-content:center}}

/* ═══ 28/10 (dono): a PRÉVIA do app, igual (medidas do index.html do app, bloco showIg) ═══ */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('assets-mc/fonts/bricolage-800.woff2') format('woff2')}
.hero-post{aspect-ratio:auto;width:100%;max-width:412px;margin:0 auto;background:rgba(12,8,5,.92);border-radius:22px;padding:14px 16px 12px;display:flex;flex-direction:column;align-items:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.45)}
.pv-rot{align-self:stretch;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:0 4px 8px}
.post{width:100%;max-width:380px;background:#fff;color:#262626;border-radius:8px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);font-family:Inter,-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif}
.post-topo{display:flex;align-items:center;gap:10px;padding:0 12px;height:54px}
.post-av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;outline:2px solid #fff;box-shadow:0 0 0 4px #ff5a3c}
.post-av img{width:100%;height:100%;object-fit:cover}
.post-topo div{flex:1;min-width:0;line-height:1.25;display:flex;flex-direction:column}
.post-topo b{font-size:13px;font-weight:600;color:#262626}
.post-topo span:not(.post-av){font-size:11px;color:#6b6b6b}
.post-topo i{font-style:normal;font-size:18px;line-height:1;color:#262626}
.post-midia{position:relative;background:#000;aspect-ratio:4/5}
.post-slides{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;list-style:none;margin:0;padding:0}
.post-slides::-webkit-scrollbar{display:none}
.post-slides li{flex:none;width:100%;height:100%;scroll-snap-align:start}
.post-slides img{width:100%;height:100%;object-fit:cover;display:block}
.post-nav{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#262626;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.post-nav[hidden]{display:none}
.post-ant{left:8px}.post-prox{right:8px}
.post-conta{position:absolute;top:10px;right:10px;font-size:11px;font-weight:600;color:#fff;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.45)}
.post-acoes{display:flex;align-items:center;gap:16px;padding:0 12px;height:44px}
.post-salva{margin-left:auto;display:flex}
.post-pontos{display:flex;justify-content:center;gap:4px;margin-top:-4px;padding-bottom:6px}
.post-pontos i{width:5px;height:5px;border-radius:50%;background:#c7c7c7}
.post-pontos i.on{background:#0095f6}
.post-txt{padding:0 12px 12px}
.post-curt{font-size:13px;font-weight:600}
.post-leg{font-size:13px;margin-top:4px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-leg b{font-weight:600}
.post-com{font-size:12px;color:#6b6b6b;margin-top:6px}
.post-hora{font-size:10px;color:#6b6b6b;text-transform:uppercase;letter-spacing:.025em;margin-top:6px}
.pv-botoes{display:flex;gap:8px;width:100%;max-width:380px;margin-top:14px}
.pv-botoes span{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.025em;padding:12px 16px;white-space:nowrap}
.pv-pub{flex:1;background:#f7c63c;color:#1c1410;font-size:13px}
.pv-ag{border:1px solid rgba(247,198,60,.5);color:#f7c63c;font-size:12px;gap:6px!important}
.pv-meus{display:flex;align-items:center;gap:6px;margin-top:10px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media (min-width:1000px){.hero-post{max-width:372px}}
/* 28/10 (dono, print da Prévia do app): fundo = o próprio slide desfocado e escurecido (como o modal por cima do editor),
   ✕ no canto, anel branco com fio cinza, sombra suave embaixo da foto, legenda só com a 1ª frase */
.hero-post{position:relative;isolation:isolate;overflow:hidden;background:#0c0805;padding:14px 16px 14px}
.hero-post::before{content:"";position:absolute;inset:-20px;z-index:-1;background:url('assets-mc/post/cabecao-1-fundo.webp') center/cover;filter:blur(14px) brightness(.32) saturate(.8)}
.pv-cab{align-self:stretch;display:flex;align-items:center;justify-content:space-between;margin:0 4px 8px}
.pv-cab .pv-rot{margin:0}
.pv-x{color:rgba(255,255,255,.8);font-size:17px;line-height:1}
.post{border-radius:8px}
.post-av{box-shadow:0 0 0 3px #e3e3e3}
.post-acoes{background:linear-gradient(rgba(0,0,0,.07),rgba(0,0,0,0) 70%)}
/* 28/10 (dono): sem a moldura preta e menor — fica só o cartão do post e os botões, direto no creme */
.hero-post{background:none;padding:0;border-radius:0;box-shadow:none;overflow:visible;max-width:300px}
.hero-post::before{display:none}
@media (min-width:1000px){.hero-post{max-width:320px}}
.post{box-shadow:0 24px 50px -18px rgba(21,8,9,.35)}
.pv-botoes{margin-top:12px}
.pv-ag{border-color:#1c1410;color:#1c1410}
.pv-meus{color:var(--mu,#6b5b55)}
/* 28/10 (dono): sem Publicar/Agendar embaixo do post; no celular o "Teste grátis" vem depois da prévia */
.hero-ctas-cel{display:none}
@media (max-width:760px){.hero-ctas-pc{display:none}.hero-ctas-cel{display:flex;width:100%;max-width:400px;margin:4px auto 0}}
/* 28/10 (dono): no computador o texto começava longe da logo (centralizava pela altura do post) — sobe pro topo */
@media (min-width:761px){html[data-tema="creme"] .hero-grid{align-items:start;padding-top:clamp(12px,2vw,28px)}html[data-tema="creme"] .hero-texto{padding-top:clamp(24px,4vw,64px)}}
/* 28/10 (dono): prova social ("+ de 23 mil criações") embaixo do Teste grátis no computador; celular igual */
.hero-prova-pc{display:none}
@media (min-width:761px){.hero-prova-cel{display:none}.hero-prova-pc{display:flex;justify-content:flex-start;margin-top:4px}.hero-prova-pc p{padding-left:12px}}

/* ═══ 28/10 (dono): MODAL DO TESTE GRÁTIS (teste.js) no tema creme — título na Boldonse, texto na grotesca da página, campos
   no creme claro com fio, botão no degradê amarelo → laranja. O fundo escuro rola sozinho (o teclado do celular nunca esconde
   o botão de enviar); a caixa centra quando cabe. "Reduzir movimento" = sem animação. ═══ */
html.tm-aberto,html.tm-aberto body{overflow:hidden}
html[data-tema="creme"] .tm{position:fixed;inset:0;z-index:1000;display:flex;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:rgba(21,8,9,.62);animation:tm-fundo .18s ease-out}
html[data-tema="creme"] .tm[hidden]{display:none}
html[data-tema="creme"] .tm-caixa{position:relative;box-sizing:border-box;width:100%;max-width:460px;margin:auto;background:var(--bg);color:var(--tx);border-radius:24px;padding:30px 24px 22px;box-shadow:0 30px 80px -20px rgba(21,8,9,.55);animation:tm-caixa .22s ease-out;outline:0}
html[data-tema="creme"] .tm-fecha{position:absolute;top:12px;right:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--tx);cursor:pointer}
html[data-tema="creme"] .tm-fecha:hover{background:var(--sf2)}
html[data-tema="creme"] .tm-titulo{margin:0 40px 0 0;font-family:'Boldonse',sans-serif;font-weight:400;font-size:24px;line-height:1.5;letter-spacing:0;color:var(--tx)}
html[data-tema="creme"] .tm-oferta{margin:6px 0 20px;font-size:15px;line-height:1.45;color:var(--tx2)}
html[data-tema="creme"] .tm-form{display:grid;gap:12px}
html[data-tema="creme"] .tm-duas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
html[data-tema="creme"] .tm-campo{display:grid;gap:5px;min-width:0}
html[data-tema="creme"] .tm-campo label{font-size:13px;font-weight:600;color:var(--tx3)}
html[data-tema="creme"] .tm-campo input{box-sizing:border-box;width:100%;min-width:0;font:inherit;font-size:16px;line-height:1.3;color:var(--tx);background:#fffaf0;border:1px solid var(--ln5);border-radius:14px;padding:13px 14px;-webkit-appearance:none;appearance:none}
html[data-tema="creme"] .tm-campo input::placeholder{color:var(--mu2)}
html[data-tema="creme"] .tm-campo input:focus{outline:2px solid var(--am);outline-offset:1px;border-color:var(--am)}
html[data-tema="creme"] .tm-campo input[aria-invalid="true"]{border-color:#c43d00;background:#fff4ec}
html[data-tema="creme"] .tm-erro{font-size:14px;line-height:1.45;color:#8a2e00;background:#fff1e6;border:1px solid #f3b48a;border-radius:12px;padding:10px 12px}
html[data-tema="creme"] .tm-erro:empty{display:none}
html[data-tema="creme"] .tm-acao:empty{display:none}
html[data-tema="creme"] .tm-acao-btn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:48px;border:0;border-radius:999px;padding:12px 20px;font:inherit;font-size:15px;font-weight:600;text-decoration:none;background:#150809;color:#faf5e5;cursor:pointer}
html[data-tema="creme"] .tm-acao-btn:hover{background:#2c1f20;color:#ffc21a}
html[data-tema="creme"] .tm-acao-btn:disabled{opacity:.6;cursor:default}
html[data-tema="creme"] .tm-ok{margin:0;font-size:14px;line-height:1.45;color:#1f5130;background:#eaf6ec;border:1px solid #a9d6b3;border-radius:12px;padding:10px 12px}
html[data-tema="creme"] .tm-envia{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-top:4px;border:0;border-radius:999px;padding:16px 24px;font:inherit;font-size:16px;font-weight:700;letter-spacing:.01em;color:#150809;background:var(--grad);box-shadow:0 16px 30px rgba(255,140,26,.3);cursor:pointer}
html[data-tema="creme"] .tm-envia:hover{background:linear-gradient(90deg,#ffd04d,#ff8f3d)}
html[data-tema="creme"] .tm-envia:disabled{opacity:.7;cursor:progress}
html[data-tema="creme"] .tm-envia:focus-visible,html[data-tema="creme"] .tm-acao-btn:focus-visible,html[data-tema="creme"] .tm-fecha:focus-visible{outline:3px solid #150809;outline-offset:2px}
html[data-tema="creme"] .tm-aviso{margin:2px 0 0;font-size:12px;line-height:1.4;text-align:center;color:var(--mu)}
@keyframes tm-fundo{from{opacity:0}to{opacity:1}}
@keyframes tm-caixa{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:420px){html[data-tema="creme"] .tm-caixa{padding:26px 18px 18px;border-radius:20px}html[data-tema="creme"] .tm-titulo{font-size:21px}}
@media (max-width:340px){html[data-tema="creme"] .tm-duas{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html[data-tema="creme"] .tm,html[data-tema="creme"] .tm-caixa{animation:none}}