/* =========================================================
   Caixa Cartonada do Zero — variação de design
   Sistema visual portado de "Café da Manhã sem Pão"
   (tokens extraídos do bundle Tailwind/shadcn da página):
   fundo creme, vermelho-laranja como destaque/urgência,
   verde como cor de dinheiro/CTA, Anton + Bebas Neue + Inter.
   ========================================================= */
:root{
  --background:hsl(30 100% 98%);
  --foreground:hsl(20 14% 12%);
  --card:hsl(0 0% 100%);
  --card-foreground:hsl(20 14% 12%);

  --primary:hsl(10 78% 52%);
  --primary-foreground:#fff;
  --primary-glow:hsl(18 90% 60%);

  --secondary:hsl(30 60% 95%);
  --muted:hsl(30 30% 94%);
  --muted-foreground:hsl(20 10% 40%);

  --accent:hsl(142 70% 38%);
  --accent-foreground:#fff;
  --destructive:hsl(0 84% 60%);

  --border:hsl(30 30% 88%);
  --radius:1rem;

  --gradient-hero:linear-gradient(180deg, hsl(30 100% 97%) 0%, hsl(15 80% 92%) 100%);
  --gradient-banner:linear-gradient(90deg, hsl(10 78% 52%), hsl(18 90% 55%));
  --gradient-banner-rtl:linear-gradient(270deg, hsl(10 78% 52%), hsl(18 90% 55%));
  --gradient-cta:linear-gradient(135deg, hsl(142 70% 38%), hsl(142 70% 45%));

  --shadow-card:0 10px 40px -15px hsl(10 78% 52% / .25);
  --shadow-cta:0 10px 30px -10px hsl(142 70% 38% / .5);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--background);color:var(--foreground);
  line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
.wrap{max-width:64rem;margin:0 auto;padding:0 1rem}
.wrap-sm{max-width:48rem}
.wrap-md{max-width:56rem}
.wrap-lg{max-width:72rem}
section{padding:4rem 1rem}
@media(min-width:768px){section{padding:5.5rem 1rem}}

h1,h2,h3,h4{line-height:1.15;font-weight:600}
h2{font-size:1.7rem;text-align:center;margin-bottom:1rem}
h2 .accent{color:var(--primary)}
h2 .accent-green{color:var(--accent)}
.lead{font-size:1.02rem;color:color-mix(in srgb,var(--foreground) 80%,transparent);text-align:center;max-width:42rem;margin:0 auto 2.5rem}
@media(min-width:768px){h2{font-size:2.2rem}}

/* ===== Barra de urgência ===== */
.urgency-bar{
  background:#034200;color:#fff;text-align:center;
  padding:.7rem 1rem;font-weight:600;font-size:.82rem;
  position:sticky;top:0;z-index:50;
}
.urgency-bar .inner{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
.urgency-bar .clock{
  font-variant-numeric:tabular-nums;font-weight:800;
  background:rgba(255,255,255,.16);border-radius:6px;padding:.15rem .55rem;
}

/* ===== CTA ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;max-width:460px;margin:0 auto;
  background:var(--gradient-cta);color:var(--accent-foreground);
  text-decoration:none;font-weight:800;font-size:1.1rem;
  padding:1.15rem 1.75rem;border-radius:1.25rem;border:none;cursor:pointer;
  box-shadow:var(--shadow-cta);transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
}
.btn:hover{opacity:.95;transform:translateY(-2px);box-shadow:0 16px 34px -10px hsl(142 70% 38% / .6)}
.btn-outline{
  background:transparent;color:var(--primary);border:2px solid var(--primary);
  box-shadow:none;
}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-white{background:var(--card);color:var(--primary);box-shadow:0 20px 45px -15px rgba(0,0,0,.35)}
.btn-block{display:block}
.trust-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .7rem;
  margin-top:.7rem;font-size:.76rem;color:var(--muted-foreground);
}
.trust-row span{display:inline-flex;align-items:center;gap:.3rem}
.trust-row svg{width:13px;height:13px}

/* ===== Hero ===== */
.hero{background:#FDF7EC;padding:2.5rem 1rem 1.5rem;text-align:center}
.hero-inner{max-width:44rem;margin:0 auto}
.hero h1{
  font-family:'Bebas Neue',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.98;
  -webkit-text-stroke:1px currentColor;
  text-shadow:0 1px 1px rgba(0,0,0,.08);
}
.hero h1 span{display:block;font-size:2.3rem}
.hero h1 span.line1{color:var(--foreground)}
.hero h1 span.line2{color:var(--accent);margin-top:.2rem}
@media(min-width:640px){.hero h1 span{font-size:3.2rem}}
.hero .sub{margin:1rem auto 0;max-width:26rem;font-size:.95rem}
.hero-media{
  position:relative;max-width:32rem;margin:1.5rem auto .5rem;
  border-radius:1.25rem;overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow-card);
}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media .fade{
  position:absolute;inset:auto 0 0 0;height:14%;
  background:linear-gradient(rgba(253,247,236,0) 0%, rgba(253,247,236,.7) 60%, #FDF7EC 100%);
}
.price-hero{margin:.5rem 0 1.25rem;line-height:1}
.price-hero-tag{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:.3rem}
.price-hero .old{font-size:1.1rem;color:var(--primary);text-decoration:line-through;font-weight:600;display:block;margin-bottom:.15rem}
.price-hero .new{
  font-family:'Bebas Neue',sans-serif;font-size:3.6rem;font-weight:800;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 80%,transparent),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.price-hero .new small{font-size:2.1rem;vertical-align:top}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;max-width:34rem;margin:2rem auto 0}
.stat-card{
  background:var(--card);border:1px solid var(--border);border-radius:.9rem;
  padding:.9rem .5rem;text-align:center;
}
.stat-card .num{
  font-family:'Anton',sans-serif;font-size:1.5rem;
  background:linear-gradient(90deg,var(--primary),var(--primary),color-mix(in srgb,var(--primary) 70%,transparent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-card .lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-foreground);margin-top:.3rem}

/* ===== Divisor "existe uma forma melhor" ===== */
.divider-block{display:flex;flex-direction:column;align-items:center;margin:2.5rem 0}
.divider-block .line{width:1px;height:2.5rem;background:hsl(10 78% 52% / .5)}
.divider-block .label{margin:1rem 0;color:var(--primary);font-weight:700;letter-spacing:.22em;font-size:.85rem;text-align:center}

/* ===== Cards de dor / pontos de identificação ===== */
.pain-grid{display:grid;gap:.75rem;max-width:40rem;margin:0 auto}
@media(min-width:640px){.pain-grid{grid-template-columns:1fr 1fr}}
.pain-card{
  background:var(--card);border:1px solid var(--border);border-radius:.8rem;
  padding:1rem;display:flex;align-items:center;gap:.75rem;box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.pain-card .emoji{font-size:1.4rem;flex-shrink:0}
.pain-card .txt{font-size:.92rem;font-weight:500}

/* ===== Banner de alerta (urgência) ===== */
.banner-alert{
  margin-top:2.5rem;background:var(--gradient-banner);color:#fff;
  border-radius:1.25rem;padding:2rem 1.5rem;text-align:center;
}
.banner-alert .emoji{font-size:2.4rem;margin-bottom:.5rem}
.banner-alert h3{font-size:1.2rem;margin-bottom:.4rem}
.banner-alert p{opacity:.92;font-size:.92rem}

/* ===== Seção "por que não pode faltar" ===== */
.section-cream{background:#fff}
.section-beige{background:#f6f0ea}
.center-media{display:flex;justify-content:center;margin-bottom:2.5rem}
.center-media img{width:100%;max-width:26rem;height:auto}
.benefits-grid{display:grid;gap:1rem}
@media(min-width:768px){.benefits-grid{grid-template-columns:repeat(3,1fr)}}
.benefit-card{
  background:#F1FAF4;border:1px solid var(--border);border-radius:.8rem;
  padding:1.4rem;display:flex;gap:1rem;align-items:center;
  transition:box-shadow .2s ease;
}
.benefit-card:hover{box-shadow:var(--shadow-card)}
.benefit-card .emoji{font-size:1.8rem;flex-shrink:0}
.benefit-card h4{font-size:1rem;margin-bottom:.25rem}
.benefit-card p{font-size:.85rem;color:var(--muted-foreground)}

/* ===== Galeria (o que você vai aprender) ===== */
.gallery{display:flex;flex-direction:column;gap:1.1rem;max-width:26rem;margin:0 auto}
.gallery-item{position:relative;border-radius:1.1rem;overflow:hidden;box-shadow:var(--shadow-card);background:var(--card)}
.gallery-item img{width:100%;aspect-ratio:16/10;object-fit:cover}
.gallery-badge{
  position:absolute;top:.7rem;right:.7rem;background:rgba(58,36,24,.9);color:#fff;
  font-size:.62rem;font-weight:800;padding:.35rem .7rem;border-radius:.7rem;
}
.gallery-more{text-align:center;margin-top:1.8rem;font-weight:700;color:#686155;font-size:.95rem}

/* Placeholder de imagem — usado onde ainda falta gerar a foto real */
.img-placeholder{
  width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;text-align:center;color:#fff;font-weight:700;font-size:.72rem;line-height:1.4;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 10px, transparent 10px 20px),
    linear-gradient(140deg, hsl(10 78% 52%), hsl(142 70% 38%));
  border:2px dashed rgba(255,255,255,.55);
}
.img-placeholder .n{font-family:'Anton',sans-serif;font-size:1.3rem;letter-spacing:.05em}

/* ===== Bônus ===== */
.bonus-grid{display:grid;gap:1.1rem}
@media(min-width:768px){.bonus-grid{grid-template-columns:1fr 1fr}}
.bonus-card{
  background:var(--card);border:2px solid hsl(142 70% 38% / .2);border-radius:.9rem;
  padding:1.3rem;display:flex;gap:1rem;align-items:flex-start;
}
.bonus-card .thumb{width:6.5rem;height:6.5rem;flex-shrink:0;border-radius:.7rem;overflow:hidden}
.bonus-card .thumb img{width:100%;height:100%;object-fit:cover}
.bonus-card .head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.3rem}
.bonus-card h4{font-size:1rem}
.bonus-badge{background:var(--gradient-cta);color:#fff;font-size:.65rem;font-weight:800;padding:.15rem .55rem;border-radius:999px}
.bonus-card p{font-size:.85rem;color:var(--muted-foreground);margin-bottom:.5rem}
.bonus-card .price s{color:var(--muted-foreground)}
.bonus-card .price em{color:var(--primary);font-weight:800;font-style:normal;margin-left:.3rem}
.bonus-total{text-align:center;margin-top:2rem;font-size:.95rem}
.bonus-total s{color:var(--destructive);font-weight:800}
.bonus-total .free{color:#0c8a3e;font-weight:800}

/* ===== Oferta / plano único ===== */
.offer-section{background:#fff;border-top:2px solid hsl(10 78% 52% / .2);border-bottom:2px solid hsl(10 78% 52% / .2)}
.plans-grid{display:grid;gap:1.75rem;max-width:56rem;margin:0 auto;align-items:start}
@media(min-width:768px){.plans-grid{grid-template-columns:1fr 1fr}}
.plan-card{
  position:relative;border-radius:1.25rem;
  padding:2rem 1.5rem 1.75rem;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;height:100%;
}
.plan-card.basico{background:#f0faf3;border:2px solid #74c894}
.plan-card.premium{background:#fdeeed;border:2px solid #bf3a2b}
@media(min-width:768px){.plan-card.premium{margin-top:1rem}}
.plan-ribbon{
  position:absolute;top:-1rem;left:50%;transform:translateX(-50%);
  background:var(--gradient-banner);color:#fff;font-size:.72rem;font-weight:800;
  padding:.4rem 1.1rem;border-radius:999px;white-space:nowrap;
}
.plan-eyebrow{
  border-radius:.7rem;padding:.5rem 1rem;
  text-align:center;margin:.75rem 0 1rem;
}
.plan-eyebrow.premium{background:var(--gradient-banner-rtl)}
.plan-eyebrow.premium p{color:#fff}
.plan-eyebrow.basico{background:#d6ffe4}
.plan-eyebrow.basico p{color:#264a31}
.plan-eyebrow p{font-weight:800;letter-spacing:.2em;font-size:.72rem}
.plan-card img.product{max-width:12rem;margin:0 auto 1rem;filter:drop-shadow(0 12px 20px rgba(0,0,0,.18))}
.plan-card h3{
  font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.35rem;
  text-align:center;margin-bottom:.3rem;font-weight:400;
}
.plan-card .desc{text-align:center;font-size:.85rem;color:var(--muted-foreground);margin-bottom:1.25rem}
.plan-list{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.25rem;flex:1}
.plan-list li{display:flex;align-items:flex-start;gap:.5rem;font-size:.86rem;font-weight:500}
.plan-list svg{flex-shrink:0;margin-top:.1rem;color:var(--accent)}
.plan-list li.excluded{opacity:.55}
.plan-list li.excluded span{text-decoration:line-through;color:var(--muted-foreground)}
.plan-list li.excluded svg{color:var(--destructive)}
.plan-price-old{text-align:center;font-size:.85rem;color:var(--primary);text-decoration:line-through}
.plan-price-new{
  text-align:center;font-family:'Bebas Neue',sans-serif;font-size:2.4rem;font-weight:800;margin-bottom:1.1rem;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 80%,transparent),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.plan-fine{text-align:center;font-size:.74rem;color:var(--muted-foreground);margin-top:.8rem}

/* ===== Modal de upsell (Básico → Premium) ===== */
.upsell-overlay{
  position:fixed;inset:0;background:rgba(20,14,10,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:1rem;z-index:200;
  opacity:0;transition:opacity .25s ease;
}
.upsell-overlay[hidden]{display:none}
.upsell-overlay.open{opacity:1}
.upsell-modal{
  position:relative;width:100%;max-width:24rem;max-height:calc(100vh - 2rem);overflow-y:auto;
  background:#FDF7EC;border:2px solid var(--primary);border-radius:1.25rem;
  padding:1.75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));text-align:center;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
  transform:translateY(14px) scale(.97);transition:transform .25s ease;
}
.upsell-overlay.open .upsell-modal{transform:translateY(0) scale(1)}
.upsell-close{
  position:absolute;top:.75rem;right:.75rem;width:2.1rem;height:2.1rem;border-radius:50%;
  border:1px solid var(--border);background:#fff;color:var(--muted-foreground);
  font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.upsell-eyebrow{
  font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--primary);margin-bottom:.6rem;
}
.upsell-modal h3{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.35rem;margin-bottom:.7rem;padding-right:1rem;
}
.upsell-text{color:var(--muted-foreground);font-size:.88rem;margin-bottom:1rem}
.upsell-price{display:flex;align-items:baseline;justify-content:center;gap:.6rem;margin-bottom:.3rem;flex-wrap:wrap}
.upsell-price-old{font-size:.95rem;color:var(--primary);text-decoration:line-through}
.upsell-price-new{
  font-family:'Bebas Neue',sans-serif;font-size:2.2rem;font-weight:800;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 80%,transparent),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.upsell-fine{font-size:.72rem;color:var(--muted-foreground);margin-bottom:1.25rem}
.upsell-accept{animation:upsellPulse 2.2s infinite ease-in-out}
@keyframes upsellPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.upsell-decline{
  display:inline-block;margin-top:.9rem;color:var(--muted-foreground);
  font-size:.8rem;font-weight:600;text-decoration:underline;padding:.4rem;
}

/* ===== Prova social / avaliações ===== */
.rating-summary{
  background:var(--secondary);border-radius:1.25rem;padding:1.75rem;margin-bottom:2rem;
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;
}
@media(min-width:768px){.rating-summary{flex-direction:row;text-align:left}}
.rating-summary .big{font-family:'Anton',sans-serif;font-size:3.2rem;color:var(--primary);line-height:1}
.rating-summary .stars{display:flex;gap:.15rem;justify-content:center;margin:.3rem 0}
.rating-summary .stars svg{width:16px;height:16px;fill:#facc15;color:#facc15}
.rating-summary .count{font-size:.8rem;color:var(--muted-foreground)}
.rating-bars{flex:1;width:100%;display:flex;flex-direction:column;gap:.35rem}
.rating-bars .row{display:flex;align-items:center;gap:.5rem;font-size:.8rem}
.rating-bars .row svg{width:12px;height:12px;fill:#facc15;color:#facc15;flex-shrink:0}
.rating-bars .track{flex:1;height:8px;background:var(--background);border-radius:999px;overflow:hidden}
.rating-bars .fill{height:100%;background:#facc15}

.review-grid{display:grid;gap:1rem}
@media(min-width:768px){.review-grid{grid-template-columns:1fr 1fr}}
.review-card{background:var(--card);border:1px solid var(--border);border-radius:.8rem;padding:1.2rem}
.review-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.review-top img{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;flex-shrink:0}
.review-top .who{flex:1}
.review-top .who p:first-child{font-weight:700;font-size:.88rem}
.review-top .who p:last-child{font-size:.72rem;color:var(--muted-foreground)}
.review-stars{display:flex;gap:.1rem}
.review-stars svg{width:14px;height:14px;fill:#facc15;color:#facc15}
.review-text{font-size:.88rem;margin-bottom:.7rem}
.review-meta{display:flex;align-items:center;gap:.7rem;font-size:.72rem;color:var(--muted-foreground)}
.review-meta .heart{display:flex;align-items:center;gap:.25rem;color:var(--primary)}
.review-meta svg{width:12px;height:12px;fill:var(--primary);color:var(--primary)}

/* ===== FAQ ===== */
.faq-list{max-width:42rem;margin:0 auto;display:flex;flex-direction:column;gap:.65rem}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:.8rem;overflow:hidden}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;font:inherit;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem;font-weight:700;font-size:.92rem;text-align:left;color:var(--foreground);
}
.faq-q svg{flex-shrink:0;transition:transform .2s ease;color:var(--muted-foreground)}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-item.open .faq-a{max-height:300px}
.faq-a p{padding:0 1.1rem 1.1rem;font-size:.85rem;color:var(--muted-foreground)}

/* ===== Banner final ===== */
.final-banner{background:var(--gradient-banner);color:#fff;text-align:center}
.final-banner h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:2.2rem;line-height:1.1;margin-bottom:1rem;color:#fff;
}
@media(min-width:768px){.final-banner h2{font-size:3.2rem}}
.final-banner .lead{color:rgba(255,255,255,.95);max-width:36rem}

footer{padding:2rem 1rem;text-align:center;font-size:.8rem;color:var(--muted-foreground);background:var(--background)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}