/* =========================================================
   +kids Tia Cintia - Design System
   Paleta extraida da logo oficial
   ========================================================= */

:root{
  /* ---- Paleta oficial, amostrada da capa "Atividades" ----
     rosa #E8188C · ciano #54D8E4 · amarelo #F5C842 · branco #FCFCFC   */

  /* Texto (berry escuro — mesma família do rosa, contraste AAA no creme) */
  --ink:#3A0E2E;
  --ink-2:#6B3557;
  --ink-3:#9A6B85;

  /* Marca. Os nomes --violet/--magenta são herdados; os valores agora são
     os da paleta nova, então todo o site acompanha sem exceção. */
  --violet:#E8188C;    /* rosa principal   */
  --violet-d:#C1046F;  /* rosa escuro      */
  --magenta:#FF5CB8;   /* rosa claro       */
  --pink:#E8188C;
  --pink-d:#C1046F;
  --pink-l:#FF5CB8;
  --yellow:#F5C842;
  --yellow-l:#FFD96B;
  --cyan:#4AD6E4;
  --cyan-d:#1FB4C4;
  --coral:#F98B7D;
  --green:#0FA98F;     /* teal — os "check" de item incluso */
  --whats:#25D366;     /* verde oficial do WhatsApp         */

  --cream:#FFF5FA;
  --cream-2:#FFE9F4;
  --white:#FFFFFF;
  --line:rgba(58,14,46,.10);
  --line-2:rgba(58,14,46,.16);

  /* Sombras */
  --sh-sm:0 2px 8px rgba(58,14,46,.06);
  --sh-md:0 10px 30px -12px rgba(58,14,46,.20);
  --sh-lg:0 30px 60px -24px rgba(58,14,46,.30);

  /* Formas */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px; --r-full:999px;

  /* Tipografia */
  --f-display:"Fraunces","Georgia",serif;
  --f-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--f-body);color:var(--ink);background:var(--cream);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.15rem,5.2vw,4.1rem);font-variation-settings:"SOFT" 20,"WONK" 1}
h2{font-size:clamp(1.85rem,3.9vw,2.9rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.center{text-align:center}
section{position:relative}
.sec{padding:clamp(64px,9vw,116px) 0}

/* ---------- Utilitarios ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--violet-d);background:rgba(232,24,140,.08);
  padding:.5rem 1rem;border-radius:var(--r-full);margin-bottom:1.1rem;
  border:1px solid rgba(232,24,140,.18);
}
.lead{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--ink-2);max-width:62ch}
.center .lead{margin-inline:auto}
.hl{
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;background-size:100% .34em;background-position:0 88%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .07em;border-radius:.12em;
}
.hl-c{background-image:linear-gradient(var(--cyan),var(--cyan))}
.txt-violet{color:var(--violet-d)}
.txt-magenta{color:var(--magenta)}
.mt-lg{margin-top:2.6rem}
@media (max-width:680px){.hide-mob{display:none}}

/* ---------- Botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:800;font-size:1rem;letter-spacing:-.01em;text-align:center;
  padding:1.05rem 1.9rem;border-radius:var(--r-full);border:0;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s,filter .15s;
  position:relative;line-height:1.2;
}
.btn svg{flex:0 0 auto}
.btn-primary{background:linear-gradient(180deg,#FF3DA6,var(--pink));color:#fff;box-shadow:0 6px 0 0 var(--pink-d),var(--sh-md)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 9px 0 0 var(--pink-d),var(--sh-lg)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 0 var(--pink-d)}
/* botão para usar sobre fundo rosa/escuro, onde o rosa sumiria */
.btn-yellow{background:linear-gradient(180deg,var(--yellow-l),var(--yellow));color:var(--ink);box-shadow:0 6px 0 0 #C79A1B,var(--sh-md)}
.btn-yellow:hover{transform:translateY(-3px);box-shadow:0 9px 0 0 #C79A1B,var(--sh-lg)}
.btn-yellow:active{transform:translateY(3px);box-shadow:0 2px 0 0 #C79A1B}
.btn-cyan{background:linear-gradient(180deg,#6FE2EC,var(--cyan));color:var(--ink);box-shadow:0 6px 0 0 var(--cyan-d),var(--sh-md)}
.btn-cyan:hover{transform:translateY(-3px);box-shadow:0 9px 0 0 var(--cyan-d),var(--sh-lg)}
.btn-violet{background:linear-gradient(180deg,#FF3DA6,var(--pink));color:#fff;box-shadow:0 6px 0 0 var(--violet-d),var(--sh-md)}
.btn-violet:hover{transform:translateY(-3px);box-shadow:0 9px 0 0 var(--violet-d),var(--sh-lg)}
.btn-violet:active{transform:translateY(3px);box-shadow:0 2px 0 0 var(--violet-d)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line-2);padding:1rem 1.7rem}
.btn-ghost:hover{background:#fff;border-color:var(--violet);color:var(--violet-d);transform:translateY(-2px)}
.btn-lg{padding:1.25rem 2.4rem;font-size:1.08rem}
.btn-block{display:flex;width:100%}
.btn-note{display:block;font-size:.82rem;color:var(--ink-3);margin-top:.7rem;font-weight:600}

/* ---------- Barra de anuncio ---------- */
.topbar{
  background:linear-gradient(90deg,var(--violet-d),var(--magenta),var(--violet-d));
  background-size:200% 100%;animation:slide 9s linear infinite;
  color:#fff;font-size:.85rem;font-weight:700;text-align:center;padding:.6rem 1rem;
  letter-spacing:.01em;position:relative;z-index:60;
}
.topbar b{color:var(--yellow)}
@keyframes slide{to{background-position:200% 0}}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;transition:.28s}
.header-in{display:flex;align-items:center;gap:1.5rem;padding:.7rem 0;transition:.28s}
.header.stuck{background:rgba(255,245,250,.90);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),0 12px 30px -22px rgba(58,14,46,.38)}
.logo{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.logo img{height:52px;width:auto;transition:.28s}
.header.stuck .logo img{height:42px}
.nav{display:flex;gap:.35rem;margin-left:auto;align-items:center}
.nav a{padding:.55rem .9rem;border-radius:var(--r-full);font-weight:700;font-size:.94rem;color:var(--ink-2);transition:.18s}
.nav a:hover{color:var(--violet-d);background:rgba(232,24,140,.08)}
.burger{display:none;margin-left:auto;background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:.55rem .7rem;box-shadow:var(--sh-sm)}
.burger span{display:block;width:22px;height:2.5px;background:var(--ink);border-radius:2px;margin:4px 0;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Fundos decorativos ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42;pointer-events:none;z-index:0}
.dots{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(58,14,46,.10) 1.4px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%);
}

/* ---------- Hero ---------- */
.hero{padding:clamp(36px,6vw,72px) 0 clamp(56px,7vw,92px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center;position:relative;z-index:2}
.hero h1{margin-bottom:.55rem}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.24rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0 1.2rem}
.hero-ticks{display:flex;flex-wrap:wrap;gap:.5rem .35rem;margin:1.3rem 0 0;padding:0;list-style:none}
.hero-ticks li{
  display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);
  padding:.42rem .85rem;border-radius:var(--r-full);font-size:.88rem;font-weight:700;box-shadow:var(--sh-sm)
}
.hero-ticks li svg{color:var(--green)}

.proof{display:flex;align-items:center;gap:.9rem;margin-top:1.9rem}
.avatars{display:flex}
.avatars i{
  width:40px;height:40px;border-radius:50%;border:3px solid var(--cream);margin-left:-12px;
  display:grid;place-items:center;font-style:normal;font-weight:800;color:#fff;font-size:.95rem;
}
.avatars i:first-child{margin-left:0}
.proof-txt{font-size:.9rem;color:var(--ink-2);font-weight:600;line-height:1.4}
.stars{color:var(--yellow);letter-spacing:1px}

.hero-art{position:relative}
.hero-art>img{filter:drop-shadow(0 40px 50px rgba(58,14,46,.20));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.chip{
  position:absolute;background:#fff;border-radius:var(--r-md);padding:.75rem 1.05rem;
  box-shadow:var(--sh-lg);border:1px solid var(--line);display:flex;align-items:center;gap:.7rem;
  animation:float 6s ease-in-out infinite;
}
.chip b{display:block;font-family:var(--f-display);font-size:1.35rem;line-height:1}
.chip span{font-size:.76rem;color:var(--ink-3);font-weight:700}
.chip .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:1.1rem}
/* A capa nova é um leque largo (1088x859) com os cantos transparentes —
   as chips ficam nesses cantos para não cobrir as folhas. */
.chip-1{top:-4%;left:-7%;animation-delay:.4s}
.chip-2{bottom:-3%;right:-6%;animation-delay:1.2s}
.chip-3{top:44%;left:-13%;animation-delay:2s}
@media (max-width:1240px){.chip-3{display:none}}

/* ---------- Faixa de confianca ---------- */
.trust{background:var(--ink);color:#fff;padding:1.1rem 0}
.trust-in{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 2.4rem}
.trust-in div{display:flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:700;opacity:.95}
.trust-in svg{color:var(--yellow)}

/* ---------- Cards genericos ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;box-shadow:var(--sh-sm);transition:.28s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--ink-2);font-size:.97rem;margin:0}
.ic-box{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:1.1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}

/* ---------- Dor ---------- */
.pain{background:var(--white)}
.pain .card{background:var(--cream-2);border-color:rgba(232,24,140,.16)}
.pain .ic-box{background:rgba(232,24,140,.10);color:var(--magenta)}

/* ---------- Passos ---------- */
.steps{counter-reset:s}
.step{position:relative;padding-top:1.2rem}
.step::before{
  counter-increment:s;content:counter(s);
  font-family:var(--f-display);font-size:3.6rem;line-height:.8;color:var(--violet);opacity:.2;
  display:block;margin-bottom:.4rem;
}
.step h3{margin-bottom:.35rem}
.step p{color:var(--ink-2);margin:0}

/* ---------- Bento de conteudo ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.bento .b{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;
  grid-column:span 2;display:flex;flex-direction:column;gap:.35rem;transition:.28s;position:relative;overflow:hidden;
}
.bento .b:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.bento .b .n{font-family:var(--f-display);font-size:2.3rem;line-height:1;color:var(--violet-d)}
.bento .b h3{font-size:1.08rem;margin:0}
.bento .b p{font-size:.9rem;color:var(--ink-3);margin:0}
.bento .wide{grid-column:span 3}
.bento .feat{
  grid-column:span 6;background:linear-gradient(135deg,var(--ink),var(--pink-d));color:#fff;border:0;
  display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem;align-items:center;padding:2rem;
}
.bento .feat h3{color:#fff;font-size:clamp(1.3rem,2.4vw,1.9rem)}
.bento .feat p{color:rgba(255,255,255,.82);font-size:1rem}
.bento .feat .n{color:var(--yellow)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.tags span{background:rgba(255,255,255,.14);padding:.3rem .75rem;border-radius:var(--r-full);font-size:.8rem;font-weight:700}

/* ---------- Galeria ---------- */
.gallery{background:var(--white)}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gal{
  position:relative;border-radius:var(--r-md);overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-sm);cursor:zoom-in;transition:.28s;aspect-ratio:1/1.32;margin:0;
}
.gal img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:.5s}
.gal:hover{transform:translateY(-6px) scale(1.015);box-shadow:var(--sh-lg);border-color:var(--violet)}
.gal:hover img{transform:scale(1.05)}
.gal figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.6rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(58,14,46,.90));color:#fff;
  font-size:.85rem;font-weight:800;line-height:1.25;
}
.gal figcaption em{display:block;font-style:normal;font-weight:600;font-size:.74rem;opacity:.8;margin-top:.15rem}

/* ---------- Kit especial ---------- */
.special{background:linear-gradient(155deg,var(--ink) 0%,#7A1155 45%,var(--pink-d) 100%);color:#fff;overflow:hidden}
.special h2{color:#fff}
.special .eyebrow{background:rgba(245,200,66,.16);color:var(--yellow);border-color:rgba(245,200,66,.34)}
.special .lead{color:rgba(255,255,255,.84)}
.special-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;position:relative;z-index:2}
.list-check{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.75rem}
.list-check li{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem}
.list-check li svg{flex:0 0 auto;margin-top:.28rem;color:var(--green)}
.special .list-check li svg{color:var(--cyan)}

/* ---------- Publico ---------- */
.who .card{text-align:center}
.who .ic-box{margin-inline:auto;width:64px;height:64px;font-size:1.9rem}

/* ---------- Planos ---------- */
.plans{background:var(--white)}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start}
.plan{
  background:var(--cream);border:2px solid var(--line);border-radius:var(--r-xl);padding:1.8rem;
  display:flex;flex-direction:column;position:relative;transition:.3s;
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.plan-media{background:var(--white);border-radius:var(--r-lg);margin:-.4rem -.4rem 1.3rem;padding:.6rem;border:1px solid var(--line)}
.plan-media img{border-radius:var(--r-md)}
.plan h3{font-size:1.55rem;margin-bottom:.2rem}
.plan .desc{font-size:.93rem;color:var(--ink-3);margin-bottom:1.2rem;min-height:2.8em}
.price{display:flex;align-items:flex-end;gap:.45rem;margin-bottom:.15rem}
.price .cur{font-size:1.05rem;font-weight:800;color:var(--ink-2);margin-bottom:.55rem}
.price .val{font-family:var(--f-display);font-size:3.1rem;line-height:.9;letter-spacing:-.03em}
.price-old{font-size:.9rem;color:var(--ink-3);margin-bottom:1.1rem}
.price-old s{opacity:.75}
.price-old b{color:var(--magenta);background:rgba(232,24,140,.10);padding:.15rem .5rem;border-radius:var(--r-full);margin-left:.35rem}
.plan .list-check{margin:0 0 1.6rem;flex:1}
.plan .list-check li{font-size:.93rem}
.plan-featured{
  background:linear-gradient(170deg,#fff,var(--cream-2));border-color:var(--violet);
  box-shadow:0 24px 60px -26px rgba(232,24,140,.45);transform:scale(1.035);z-index:2;
}
.plan-featured:hover{transform:scale(1.035) translateY(-6px)}
.plan-tag{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(90deg,var(--pink),var(--pink-l));color:#fff;
  font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.45rem 1.1rem;border-radius:var(--r-full);box-shadow:var(--sh-md);
}
.plan-tag.gold{background:linear-gradient(90deg,var(--yellow),var(--yellow-l));color:var(--ink)}

/* ---------- Bonus ---------- */
.bonus-item{
  display:flex;gap:1.1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--sh-sm);transition:.28s;
}
.bonus-item:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.bonus-item .ic-box{margin:0;flex:0 0 auto;width:48px;height:48px;font-size:1.3rem}
.bonus-item h3{font-size:1.05rem;margin-bottom:.25rem}
.bonus-item p{font-size:.9rem;color:var(--ink-3);margin:0}
.bonus-item .free{
  margin-left:auto;flex:0 0 auto;background:rgba(15,169,143,.14);color:var(--green);
  font-size:.74rem;font-weight:800;padding:.3rem .7rem;border-radius:var(--r-full);
}

/* ---------- Depoimentos ---------- */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem;box-shadow:var(--sh-sm);display:flex;flex-direction:column;height:100%}
.quote .stars{font-size:1rem;margin-bottom:.7rem;display:block}
.quote p{font-size:.98rem;color:var(--ink-2);font-style:italic}
.quote footer{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:1.1rem}
.quote footer b{display:block;font-size:.92rem}
.quote footer span{font-size:.8rem;color:var(--ink-3)}

/* ---------- Garantia ---------- */
.guarantee{background:var(--white)}
.guarantee-box{
  display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;
  background:linear-gradient(135deg,var(--cream-2),#fff);
  border:2px dashed var(--violet);border-radius:var(--r-xl);padding:clamp(1.8rem,4vw,3rem);
}
.seal{
  width:132px;height:132px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 30% 25%,var(--yellow-l),var(--yellow));color:var(--ink);
  box-shadow:0 14px 34px -12px rgba(245,200,66,.65);border:5px solid #fff;flex:0 0 auto;
}
.seal b{font-family:var(--f-display);font-size:2.6rem;line-height:.85;display:block}
.seal span{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin-inline:auto;display:grid;gap:.75rem}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:.25s}
.faq[open]{border-color:var(--violet);box-shadow:var(--sh-md)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 3.2rem 1.15rem 1.4rem;position:relative;font-weight:800;font-size:1rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.3rem;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--violet);border-bottom:2.5px solid var(--violet);
  transform:translateY(-70%) rotate(45deg);transition:.25s;
}
.faq[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq .a{padding:0 1.4rem 1.3rem;color:var(--ink-2);font-size:.96rem}
.faq .a p:last-child{margin:0}

/* ---------- CTA final ---------- */
.final{background:linear-gradient(160deg,var(--pink-d),var(--ink));color:#fff;overflow:hidden}
.final h2{color:#fff;font-size:clamp(2rem,4.6vw,3.4rem)}
.final .lead{color:rgba(255,255,255,.85)}
.final .eyebrow{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28)}
.final-price{
  display:inline-flex;align-items:center;gap:1rem;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-lg);padding:1rem 1.6rem;margin:1.4rem 0 1.8rem;
  backdrop-filter:blur(8px);
}
.final-price s{opacity:.6;font-size:1rem}
.final-price b{font-family:var(--f-display);font-size:2.3rem;line-height:1;color:var(--yellow)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:rgba(255,255,255,.62);padding:3.5rem 0 6.5rem;font-size:.88rem}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.footer img{height:56px;width:auto;margin-bottom:1rem}
.footer a:hover{color:var(--yellow)}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-top:1.5rem;font-size:.8rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between}

/* ---------- Barra fixa mobile ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:55;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,245,250,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line-2);
  display:none;align-items:center;gap:.9rem;transform:translateY(110%);transition:transform .3s;
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .p{flex:1;min-width:0;line-height:1.15}
.sticky-cta .p b{display:block;font-family:var(--f-display);font-size:1.3rem}
.sticky-cta .p span{font-size:.72rem;color:var(--ink-3);font-weight:700}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  position:fixed;right:18px;bottom:96px;z-index:54;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(37,211,102,.7);transition:.25s;
}
.wa-float:hover{transform:scale(1.1) rotate(-6deg)}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(40,6,30,.93);backdrop-filter:blur(6px);display:none;place-items:center;padding:1.5rem}
.lb.open{display:grid}
.lb img{max-width:min(92vw,700px);max-height:84vh;border-radius:var(--r-md);box-shadow:var(--sh-lg);background:#fff}
.lb-close,.lb-nav{
  position:absolute;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;transition:.2s;
}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.28)}
.lb-close{top:1.2rem;right:1.2rem}
.lb-nav.prev{left:1.2rem;top:50%;transform:translateY(-50%)}
.lb-nav.next{right:1.2rem;top:50%;transform:translateY(-50%)}
.lb-cap{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;color:#fff;font-weight:700;font-size:.92rem}

/* ---------- Animacao de entrada ---------- */
/* Visível por padrão. Só passa a nascer oculto (para a animação de entrada)
   depois que main.js confirma, via data-pronto, que rodou até o fim — assim
   nenhuma falha de JS (bundle bloqueado, 404, erro, ad-blocker) deixa conteúdo
   escondido para sempre. Ver assets/js/main.js. */
.rv{opacity:1;transform:none}
html[data-pronto] .rv{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
/* Precisa da mesma âncora html[data-pronto] para vencer a regra acima por
   especificidade — sem isso o elemento nunca reaparece depois de revelado. */
html[data-pronto] .rv.in{opacity:1;transform:none}

/* ---------- Responsivo ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero .lead,.hero-ticks{justify-content:center;margin-inline:auto}
  .hero-cta,.proof{justify-content:center}
  .hero-art{max-width:520px;margin-inline:auto;order:-1}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:repeat(3,1fr)}
  .plans-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .plan-featured{transform:none}
  .plan-featured:hover{transform:translateY(-6px)}
  .special-grid,.bento .feat{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{
    position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:stretch;
    background:var(--cream);padding:6rem 1.5rem 2rem;gap:.2rem;margin:0;
    box-shadow:var(--sh-lg);transform:translateY(-102%);transition:.35s cubic-bezier(.16,1,.3,1);
    border-radius:0 0 var(--r-xl) var(--r-xl);
  }
  .nav.open{transform:translateY(0)}
  .nav a{padding:.9rem 1rem;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:1rem;border-bottom:0}
  .burger{display:block;z-index:2}
  .header-in .btn-header{display:none}
  .sticky-cta{display:flex}
  .wa-float{bottom:88px;width:50px;height:50px}
}
@media (max-width:680px){
  body{font-size:16px}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .b,.bento .wide,.bento .feat{grid-column:span 2}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .guarantee-box{grid-template-columns:1fr;text-align:center;justify-items:center}
  .footer-in{grid-template-columns:1fr;text-align:center}
  .footer ul{justify-items:center}
  .footer img{margin-inline:auto}
  .footer-bottom{justify-content:center;text-align:center}
  .hero-art{order:0;margin-top:2rem;max-width:400px}
  .chip{padding:.5rem .7rem;gap:.5rem}
  .chip b{font-size:1.05rem}
  .chip span{font-size:.68rem}
  .chip .ic{width:30px;height:30px;font-size:.9rem;border-radius:9px}
  .chip-1{top:0;left:-3%} .chip-2{right:-3%;bottom:20%} .chip-3{display:none}
  .trust-in{gap:.6rem 1.2rem}
  .trust-in div{font-size:.8rem}
  .lb-nav{width:40px;height:40px}
  .lb-nav.prev{left:.4rem} .lb-nav.next{right:.4rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* =========================================================
   NUVENS FLUTUANTES
   ========================================================= */
.clouds{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.cloud{
  position:absolute;color:#fff;opacity:.9;
  animation:drift linear infinite;will-change:transform;
}
.cloud svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(58,14,46,.07))}
@keyframes drift{
  from{transform:translate3d(-30vw,0,0)}
  to  {transform:translate3d(130vw,0,0)}
}
/* variações de tamanho, altura e velocidade */
.cloud.c1{width:180px;top:8%;  animation-duration:58s;animation-delay:-6s;  opacity:.85}
.cloud.c2{width:120px;top:26%; animation-duration:74s;animation-delay:-30s; opacity:.65}
.cloud.c3{width:230px;top:56%; animation-duration:92s;animation-delay:-52s; opacity:.75}
.cloud.c4{width:100px;top:74%; animation-duration:66s;animation-delay:-18s; opacity:.55}
.cloud.c5{width:150px;top:40%; animation-duration:84s;animation-delay:-70s; opacity:.5}
/* nuvens sobre fundo escuro (Kit Especial / CTA final) */
.clouds-dark .cloud{color:#fff;opacity:.12}
.clouds-dark .cloud.c2,.clouds-dark .cloud.c4{opacity:.08}

/* -------- Borda de nuvem entre seções --------
   As duas nuvens originais da Cintia entram como máscara (só o canal alpha),
   por isso dá para pintar cada uma na cor da seção vizinha com background-color.
   .top  -> nuvem-desce (bolhas para baixo, com bolinhas): a seção de cima
            escorre para dentro da de baixo.
   .bottom -> nuvem-sobe (bolhas para cima): a seção de baixo sobe.
   A cor vai inline em cada uso, porque depende de quem está do outro lado. */
.cloud-edge{
  position:absolute;left:0;width:100%;
  height:clamp(34px,4.2vw,66px);
  display:block;z-index:3;pointer-events:none;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:center;mask-position:center;
}
.cloud-edge.top{top:-1px;
  -webkit-mask-image:url(../img/nuvem-desce.webp);
          mask-image:url(../img/nuvem-desce.webp);
}
.cloud-edge.bottom{bottom:-1px;
  -webkit-mask-image:url(../img/nuvem-sobe.webp);
          mask-image:url(../img/nuvem-sobe.webp);
}

/* =========================================================
   SCROLLBAR PERSONALIZADA
   ========================================================= */
/* Firefox */
html{scrollbar-color:var(--pink) var(--cream-2);scrollbar-width:thin}
/* Chrome / Edge / Safari */
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pink-l),var(--pink));
  border-radius:var(--r-full);
  border:3px solid var(--cream-2);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--pink),var(--pink-d))}
::-webkit-scrollbar-corner{background:var(--cream-2)}
/* barras internas (galeria, blocos com overflow) */
.lb::-webkit-scrollbar-track{background:transparent}

/* Seleção de texto na cor da marca */
::selection{background:var(--pink);color:#fff}
::-moz-selection{background:var(--pink);color:#fff}

/* Foco visível acessível */
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* =========================================================
   AJUSTES DE HERO PARA A NOVA CAPA
   ========================================================= */
.hero{background:
  radial-gradient(ellipse 80% 60% at 85% 20%,rgba(74,214,228,.28),transparent 60%),
  radial-gradient(ellipse 70% 60% at 10% 10%,rgba(245,200,66,.30),transparent 62%),
  radial-gradient(ellipse 90% 70% at 50% 100%,rgba(232,24,140,.14),transparent 65%);
}
.hero-art>img{filter:drop-shadow(0 30px 40px rgba(58,14,46,.28))}

@media (prefers-reduced-motion:reduce){
  .cloud{animation:none;display:none}
}

/* =========================================================
   AMOSTRA GRÁTIS — captura de lead
   ========================================================= */
.amostra{background:linear-gradient(170deg,var(--cream-2),var(--cream))}
.amostra-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.lead-form{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--sh-lg);display:grid;gap:1rem;
}
.campo{display:grid;gap:.4rem}
.campo label{font-size:.86rem;font-weight:800;color:var(--ink-2)}
.campo input,.campo select{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--cream);
  border:2px solid var(--line-2);border-radius:var(--r-md);padding:.85rem 1rem;
  transition:border-color .18s,box-shadow .18s,background .18s;width:100%;
}
.campo input::placeholder{color:var(--ink-3)}
.campo input:focus,.campo select:focus{
  outline:none;background:#fff;border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(232,24,140,.14);
}
.campo input[aria-invalid],.campo select[aria-invalid]{
  border-color:#DC2626;background:#FEF2F2;
}
.campo .erro{color:#DC2626;font-size:.82rem;font-weight:700;min-height:1.1em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-form .status{margin:0;font-size:.9rem;font-weight:700;text-align:center;min-height:1.3em}
.lead-form .status[data-tipo="erro"]{color:#DC2626}
.lead-form .status[data-tipo="sucesso"]{color:var(--green)}
.lead-form .status[data-tipo="carregando"]{color:var(--ink-3)}
.lead-form .lgpd{margin:0;font-size:.76rem;color:var(--ink-3);text-align:center;line-height:1.45}
.lead-form button[disabled]{opacity:.6;cursor:wait;transform:none!important}
@media (max-width:860px){.amostra-grid{grid-template-columns:1fr}}

/* =========================================================
   CORREÇÕES DE LAYOUT APONTADAS PELOS TESTES E2E
   ========================================================= */

/* Itens de grid com conteúdo largo estouravam a linha em tablet.
   min-width:0 desarma o "auto" implícito do grid. */
.grid-2 > *,.grid-3 > *,.grid-4 > *,.bento > *,.plans-grid > *{min-width:0}

/* Entre 681px e 900px o grid de 3 colunas não cabia (depoimentos). */
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
}

/* Trava definitiva contra rolagem lateral: nada decorativo cria scroll. */
.blob,.clouds,.cloud,.dots,.cloud-edge{max-width:100vw}
body{overflow-x:clip}

/* O rodapé usa h3 (antes h4, que pulava nível de título). */
.footer-titulo{
  color:#fff;font-family:var(--f-body);font-size:.8rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem;
}

/* O bloco de preço do CTA final estourava 13px em telas de 320px. */
.final-price{flex-wrap:wrap;justify-content:center;max-width:100%}
@media (max-width:400px){
  .final-price{gap:.5rem;padding:.9rem 1.1rem}
  .final-price b{font-size:1.9rem}
}
/* scrollWidth do <html> também não pode passar da tela */
html{overflow-x:clip}