/* =========================================================
   Potinho da Oração Kids — Landing Page
   Style.css — mobile first, pastel premium aesthetic
   ========================================================= */

:root{
  --rose:#ffd6e0;
  --rose-strong:#ff7aa2;
  --rose-deep:#e85a8a;
  --sky:#cfe8ff;
  --sky-strong:#7dc0f5;
  --lila:#e8d6ff;
  --lila-strong:#b78cf0;
  --beige:#fff6ec;
  --white:#ffffff;
  --ink:#3a2a40;
  --ink-soft:#6a5a70;
  --gold:#f5c451;
  --grad-hero: linear-gradient(180deg,#fff0f5 0%,#eaf4ff 60%,#f6ecff 100%);
  --grad-cta: linear-gradient(135deg,#ff7aa2 0%,#ff5a8a 50%,#e85a8a 100%);
  --shadow-soft: 0 10px 30px rgba(232,90,138,.18);
  --shadow-card: 0 8px 24px rgba(120,90,160,.12);
  --radius:22px;
  --radius-sm:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Quicksand',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--beige);
  line-height:1.55;
  overflow-x:hidden;
  padding-bottom:80px; /* room for mobile bar */
}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}

h1,h2,h3{font-family:'Fredoka',sans-serif;font-weight:600;line-height:1.2;color:var(--ink)}
h2.section-title{font-size:1.9rem;text-align:center;margin-bottom:14px}
.section-lead{text-align:center;max-width:720px;margin:0 auto 36px;color:var(--ink-soft);font-size:1.05rem}
.accent{color:var(--rose-deep)}

.section{padding:60px 0}

/* ========== URGENCY TOP BAR ========== */
.urgency-bar{
  background:var(--grad-cta);
  color:#fff;text-align:center;
  padding:10px 14px;font-weight:600;font-size:.9rem;
  position:sticky;top:0;z-index:50;
  box-shadow:0 4px 14px rgba(232,90,138,.3);
}

/* ========== HERO ========== */
.hero{
  background:var(--grad-hero);
  padding:40px 0 70px;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.hero-inner{position:relative;z-index:2}
.hero-badge{
  display:inline-block;background:#fff;border:2px solid var(--rose);
  color:var(--rose-deep);padding:6px 16px;border-radius:999px;
  font-weight:600;font-size:.85rem;margin-bottom:18px;
  box-shadow:var(--shadow-card);
}
.hero-title{
  font-size:2.1rem;margin-bottom:14px;
}
.hero-sub{
  font-size:1.05rem;color:var(--ink-soft);max-width:640px;margin:0 auto 28px;
}

.hero-image-wrap{
  position:relative;
  max-width:900px;margin:0 auto 32px;
  border-radius:var(--radius);
  background:#fff;
  padding:14px;
  box-shadow:var(--shadow-soft);
  transform:translateY(20px);opacity:0;
  transition:all .8s ease;
}
.hero-image-wrap.in{transform:translateY(0);opacity:1}
.hero-image{border-radius:16px}

.seal{
  position:absolute;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.72rem;
  padding:8px 12px;border-radius:999px;color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  z-index:3;
  animation:bob 3s ease-in-out infinite;
}
.seal-pdf{background:var(--rose-deep);top:-12px;left:10px}
.seal-instant{background:var(--sky-strong);top:-12px;right:10px;animation-delay:.5s}
.seal-limited{background:var(--lila-strong);bottom:-12px;left:50%;transform:translateX(-50%);animation-delay:1s}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.seal-limited{animation-name:bobC}
@keyframes bobC{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}

/* CTA */
.cta-btn{
  display:inline-block;
  background:var(--grad-cta);
  color:#fff;font-weight:700;
  padding:18px 32px;border-radius:999px;
  font-size:1.05rem;letter-spacing:.3px;
  box-shadow:0 14px 30px rgba(232,90,138,.45);
  transition:transform .25s ease,box-shadow .25s ease;
  font-family:'Fredoka',sans-serif;
  cursor:pointer;border:none;
}
.cta-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 40px rgba(232,90,138,.55)}
.cta-btn.big{font-size:1.15rem;padding:22px 38px}
.cta-btn.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 14px 30px rgba(232,90,138,.45)}
  50%{box-shadow:0 14px 30px rgba(232,90,138,.45),0 0 0 14px rgba(232,90,138,.0)}
}

/* Countdown */
.countdown{
  display:flex;justify-content:center;align-items:center;gap:8px;
  margin:24px auto 14px;
}
.cd-item{
  background:#fff;border-radius:14px;padding:10px 14px;min-width:64px;
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;align-items:center;
}
.cd-item span{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.6rem;color:var(--rose-deep)}
.cd-item small{color:var(--ink-soft);font-size:.7rem;text-transform:uppercase;letter-spacing:1px}
.cd-sep{font-size:1.6rem;color:var(--rose-deep);font-weight:700}

.hero-trust{margin-top:8px;color:var(--ink-soft);font-size:.95rem}

/* Floating decorations */
.floating-deco{position:absolute;font-size:1.8rem;opacity:.7;animation:float 6s ease-in-out infinite;z-index:1}
.deco-1{top:8%;left:6%;animation-delay:0s}
.deco-2{top:14%;right:8%;animation-delay:1s;font-size:1.4rem}
.deco-3{top:60%;left:4%;animation-delay:2s}
.deco-4{top:70%;right:6%;animation-delay:1.5s;font-size:1.2rem}
.deco-5{top:30%;right:14%;animation-delay:.8s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(6deg)}}

/* ========== PAIN ========== */
.pain{background:#fff}
.pain-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px}
.pain-card{
  background:linear-gradient(180deg,#fff6f9,#fff);
  border:1px solid #ffe1eb;
  border-radius:var(--radius);
  padding:24px;text-align:center;
  box-shadow:var(--shadow-card);
  font-size:2rem;
}
.pain-card h3{font-size:1.1rem;margin:10px 0 6px;color:var(--rose-deep)}
.pain-card p{font-size:.95rem;color:var(--ink-soft)}

/* ========== SOLUTION ========== */
.solution{background:linear-gradient(180deg,#f6ecff 0%,#eaf4ff 100%)}
.solution-list{
  max-width:640px;margin:20px auto 0;list-style:none;
  display:grid;gap:14px;
}
.solution-list li{
  background:#fff;border-radius:var(--radius-sm);
  padding:16px 20px;box-shadow:var(--shadow-card);
  font-weight:500;font-size:1.02rem;
}

/* ========== BENEFITS ========== */
.benefits{background:#fff}
.benefits-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:30px}
.benefit-card{
  background:linear-gradient(180deg,#fff,#fff0f6);
  border-radius:var(--radius);
  padding:22px;text-align:center;
  border:1px solid #ffe1eb;
  box-shadow:var(--shadow-card);
  transition:transform .3s ease;
}
.benefit-card:hover{transform:translateY(-6px)}
.benefit-card .bi{font-size:2.2rem;margin-bottom:8px}
.benefit-card h3{font-size:1.05rem;color:var(--rose-deep);margin-bottom:6px}
.benefit-card p{font-size:.92rem;color:var(--ink-soft)}

/* ========== RECEIVE ========== */
.receive{background:linear-gradient(180deg,#eaf4ff,#fff0f5)}
.receive-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
.receive-card{
  background:#fff;border-radius:var(--radius);padding:24px;text-align:center;
  box-shadow:var(--shadow-card);font-size:2rem;
}
.receive-card h3{font-size:1.05rem;color:var(--rose-deep);margin:8px 0 4px}
.receive-card p{font-size:.92rem;color:var(--ink-soft)}
.receive-card.bonus{
  background:linear-gradient(135deg,#fff6ec,#fff0f5);
  border:2px dashed var(--rose-strong);
}

/* ========== BEFORE/AFTER ========== */
.before-after{background:#fff}
.ba-grid{
  display:grid;grid-template-columns:1fr;gap:16px;
  align-items:center;margin-top:30px;
}
.ba-card{
  border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow-card);
}
.ba-card.before{background:linear-gradient(180deg,#fde7e7,#fff)}
.ba-card.after{background:linear-gradient(180deg,#e7f7ec,#fff)}
.ba-card h3{font-size:1.2rem;margin-bottom:12px;text-align:center}
.ba-card ul{list-style:none;display:grid;gap:8px}
.ba-card li{padding-left:24px;position:relative;color:var(--ink-soft)}
.before li::before{content:"✗";position:absolute;left:0;color:#d65a5a;font-weight:700}
.after li::before{content:"✓";position:absolute;left:0;color:#3aa564;font-weight:700}
.ba-arrow{text-align:center;font-size:2rem;color:var(--rose-deep)}

/* ========== TESTIMONIALS ========== */
.testimonials{background:linear-gradient(180deg,#fff0f5,#f6ecff)}
.testi-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:20px}
.testi-card{
  background:#fff;border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow-card);
  position:relative;
}
.avatar{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka',sans-serif;font-weight:700;color:#fff;
  font-size:1.2rem;margin-bottom:8px;
  background:var(--rose);
}
.stars{color:var(--gold);margin-bottom:8px;font-size:1rem}
.testi-card p{font-style:italic;margin-bottom:8px;color:var(--ink)}
.testi-card small{color:var(--ink-soft);font-weight:600}

/* ========== OFFER ========== */
.offer{background:linear-gradient(180deg,#fff6ec,#fff0f5)}
.offer-box{
  background:#fff;border-radius:28px;
  border:3px solid var(--rose-strong);
  padding:36px 24px;text-align:center;
  box-shadow:0 20px 50px rgba(232,90,138,.2);
  max-width:680px;margin:0 auto;
  position:relative;
}
.offer-seals{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px}
.osel{
  padding:6px 12px;border-radius:999px;font-size:.72rem;
  font-weight:700;color:#fff;letter-spacing:.5px;
  font-family:'Fredoka',sans-serif;
}
.s1{background:var(--rose-deep)}
.s2{background:var(--sky-strong)}
.s3{background:var(--lila-strong)}
.offer-box h2{font-size:1.6rem;margin-bottom:8px}
.offer-desc{color:var(--ink-soft);margin-bottom:20px}
.prices{margin:18px 0 24px}
.price-old{color:var(--ink-soft);font-size:1.1rem}
.price-new{
  font-family:'Fredoka',sans-serif;font-weight:700;
  font-size:3.4rem;color:var(--rose-deep);line-height:1;
  margin:6px 0;
}
.price-new span{font-size:2rem;vertical-align:top}
.price-tag{
  display:inline-block;background:var(--gold);color:#5a3f00;
  padding:6px 14px;border-radius:999px;font-weight:700;font-size:.9rem;
}
.payment-icons{margin-top:14px;color:var(--ink-soft);font-size:.9rem}
.scarcity{margin-top:14px;color:var(--rose-deep);font-weight:600;font-size:.95rem}

/* ========== GUARANTEE ========== */
.guarantee{background:#fff}
.guarantee-inner{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:center;text-align:center;
}
.seal-circle{
  width:160px;height:160px;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,#ffd6e0);
  border:6px dashed var(--rose-strong);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--rose-deep);font-family:'Fredoka',sans-serif;
  box-shadow:var(--shadow-soft);
  animation:spin 24s linear infinite;
}
.seal-circle span{font-size:3.6rem;font-weight:700;line-height:1}
.seal-circle small{font-weight:700;letter-spacing:2px}
@keyframes spin{to{transform:rotate(360deg)}}
.guarantee-text h2{font-size:1.6rem;margin-bottom:10px}
.guarantee-text p{color:var(--ink-soft);max-width:560px;margin:0 auto}

/* ========== FAQ ========== */
.faq{background:linear-gradient(180deg,#f6ecff,#fff0f5)}
.faq-list{max-width:760px;margin:20px auto 0;display:grid;gap:12px}
.faq-item{
  background:#fff;border-radius:var(--radius-sm);
  padding:16px 20px;box-shadow:var(--shadow-card);
  cursor:pointer;
}
.faq-item summary{
  font-weight:700;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Fredoka',sans-serif;
}
.faq-item summary::after{content:"+";color:var(--rose-deep);font-size:1.4rem;transition:transform .3s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin-top:10px;color:var(--ink-soft)}

/* ========== FINAL CTA ========== */
.final-cta{background:var(--grad-hero);text-align:center}
.final-cta h2{font-size:1.7rem;margin-bottom:24px}
.final-cta .mini{margin-top:14px;color:var(--ink-soft);font-size:.9rem}

/* ========== FOOTER ========== */
.footer{background:#3a2a40;color:#fff;text-align:center;padding:30px 16px;font-size:.85rem}
.footer .legal{opacity:.6;margin-top:8px;font-size:.75rem}

/* ========== MOBILE FIXED BAR ========== */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#fff;border-top:1px solid #f0d6e0;
  padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  box-shadow:0 -6px 20px rgba(0,0,0,.08);
}
.mb-price{font-size:.95rem}
.mb-price strong{color:var(--rose-deep);font-size:1.15rem;font-family:'Fredoka',sans-serif}
.mb-cta{
  background:var(--grad-cta);color:#fff;font-weight:700;
  padding:12px 18px;border-radius:999px;font-size:.95rem;
  box-shadow:0 8px 18px rgba(232,90,138,.4);
  font-family:'Fredoka',sans-serif;
}

/* ========== FAKE NOTIF ========== */
.fake-notif{
  position:fixed;left:14px;bottom:90px;z-index:55;
  background:#fff;border-radius:14px;padding:12px 14px;
  display:flex;gap:10px;align-items:center;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  max-width:300px;
  transform:translateY(20px);opacity:0;pointer-events:none;
  transition:all .4s ease;
  border:1px solid #ffe1eb;
}
.fake-notif.show{transform:translateY(0);opacity:1}
.fn-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--rose);display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex-shrink:0;
}
.fn-text{font-size:.85rem;line-height:1.3;color:var(--ink)}
.fn-text small{color:var(--ink-soft)}

/* ========== EXIT POPUP ========== */
.exit-popup{
  position:fixed;inset:0;z-index:100;
  background:rgba(58,42,64,.7);
  display:none;align-items:center;justify-content:center;
  padding:20px;
  animation:fadeIn .3s ease;
}
.exit-popup.show{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.ep-card{
  background:#fff;border-radius:24px;padding:32px 24px;
  max-width:380px;width:100%;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  position:relative;
  animation:popIn .4s cubic-bezier(.18,1.4,.5,1);
}
@keyframes popIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.ep-close{
  position:absolute;top:10px;right:14px;background:none;border:none;
  font-size:1.4rem;cursor:pointer;color:var(--ink-soft);
}
.ep-card h3{font-size:1.5rem;margin-bottom:10px;color:var(--rose-deep)}
.ep-card p{color:var(--ink-soft);margin-bottom:16px}
.ep-coupon{
  background:var(--beige);border:2px dashed var(--rose-strong);
  padding:14px;border-radius:14px;font-family:'Fredoka',sans-serif;
  font-size:1.6rem;font-weight:700;color:var(--rose-deep);
  margin-bottom:18px;letter-spacing:2px;
}

/* ========== REVEAL ANIMATION ========== */
.reveal{opacity:0;transform:translateY(30px);transition:all .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ========== DESKTOP ========== */
@media (min-width:720px){
  h2.section-title{font-size:2.4rem}
  .hero{padding:60px 0 90px}
  .hero-title{font-size:3rem}
  .hero-sub{font-size:1.2rem}
  .section{padding:80px 0}
  .pain-grid,.benefits-grid,.receive-grid{grid-template-columns:repeat(2,1fr)}
  .ba-grid{grid-template-columns:1fr auto 1fr}
  .testi-grid{grid-template-columns:repeat(3,1fr)}
  .guarantee-inner{grid-template-columns:auto 1fr;text-align:left}
  .guarantee-text h2{font-size:2rem}
  .mobile-bar{display:none}
  body{padding-bottom:0}
}
@media (min-width:1024px){
  .benefits-grid,.receive-grid{grid-template-columns:repeat(4,1fr)}
  .pain-grid{grid-template-columns:repeat(4,1fr)}
  .hero-title{font-size:3.4rem}
  .price-new{font-size:4.4rem}
}