/* ==========================================================================
   TEMA COMIC CLASSROOM — colorido, alegre, premium (tirinhas de inglês)
   Só sobrescreve variáveis + alguns toques de acabamento. Carregado depois do styles.css.
   Fontes: Fredoka (títulos, arredondada e expressiva) + Nunito (corpo) + Poppins (etiquetas/botões)
   Paleta oficial: verde-petróleo #234E52 · laranja #F49A38 · rosa-terroso #B14B67 · creme #FFF6E5 · branco #FFFFFF
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Nunito:wght@500;600;700;800&family=Poppins:wght@600;700;800&display=swap");

:root {
  /* base escura: verde-petróleo, usado em seções de contraste e títulos */
  --petrol:        #234E52;
  --petrol-dark:   #16363A;
  --jade:          #F49A38;   /* laranja — destaque (.hl), checks, ícones */
  --jade-dark:     #D97F1F;
  --amber:         #F49A38;   /* laranja — pequenos acentos (selo, ribbon) */
  --amber-dark:    #D97F1F49;
  --gold:          #B14B67;   /* rosa-terroso — selos */
  --purple:        #B14B67;
  --purple-dark:   #8F3A51;

  --bg:            #FFF6E5;
  --surface:       #FFFFFF;
  --surface-alt:   #FFF6E5;
  --surface-dark:  #234E52;
  --surface-darkest: #16363A;

  --ink:           #234E52;
  --ink-soft:      #4A6E71;
  --ink-muted:     #7E9A9C;
  --on-dark:       #FFFFFF;
  --on-dark-soft:  #D7E6E4;

  --primary:       #234E52;
  --action:        #F49A38;   /* laranja — CTA */
  --action-dark:   #D97F1F;
  --action-contrast: #234E52;
  --action-light:  #FFB869;
  --action-glow:   #FFE3BC;
  --accent:        #B14B67;
  --accent-light:  #D27E92;
  --accent-tint:   #FBEAEE;
  --border:        #F3DCC2;
  --border-strong: #F49A38;

  --action-rgb:      244,154,56;
  --action-dark-rgb: 217,127,31;
  --jade-rgb:        244,154,56;
  --petrol-rgb:      35,78,82;
  --petrol-dark-rgb: 22,54,58;
  --gold-rgb:        177,75,103;
  --hero-from:     #FFF6E5;
  --hero-to:       #FFE7C4;
  --check:         #B14B67;
  --attention-ink: #8F3A51;
  --attention-bg:  #FBEAEE;
  --attention-line:#F49A38;

  --radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px; --radius-xl: 36px;
  --font-heading: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { font-weight: 600; }
h1, h2, h3, h4, .section-title, .hero2-headline { font-weight: 700; letter-spacing: -0.005em; }
.btn, .btn-pill-cta, .eyebrow, .faq-question span:first-child { font-family: "Poppins", system-ui, sans-serif; }
.btn, .btn-pill-cta { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.95rem; border-radius: 999px; background: var(--action); color: var(--action-contrast); }
.btn-pill-cta { text-transform: none; font-size: 1.05rem; }

/* faixa de anúncio: rosa-terroso vibrante */
.announce { background: linear-gradient(90deg, var(--purple-dark), var(--purple) 50%, var(--purple-dark)); }
.benefit-strip { background: linear-gradient(90deg, var(--petrol-dark), var(--petrol)); }
.benefit-strip * { color: var(--action-light) !important; }

/* cartões: cantos arredondados, sombra leve, alegre */
.how-step, .category-card, .bonus-card {
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.how-step-number { background: var(--action); color: var(--petrol-dark); }
.category-icon { background: var(--accent-tint); color: var(--purple); }
.thumb { border: 3px solid #fff; border-radius: var(--radius-md); }
.thumb--strip { border-radius: 0; }

/* hero: fundo creme quente e convidativo */
.hero2 {
  background:
    radial-gradient(circle at 88% 8%, rgba(244,154,56,0.18) 0%, transparent 50%),
    radial-gradient(circle at 8% 92%, rgba(177,75,103,0.16) 0%, transparent 50%),
    linear-gradient(160deg, var(--hero-from) 0%, var(--hero-to) 100%);
}
.hero2-img { border-radius: var(--radius-lg); border: 5px solid #fff; box-shadow: 0 26px 44px -16px rgba(35,78,82,0.30); }
.eyebrow { background: #FFFFFF; border: 2px solid rgba(177,75,103,0.30); color: var(--purple); }
.eyebrow::before { background: var(--action); }

/* seções escuras: verde-petróleo */
.pricing-duo__premium {
  border-radius: var(--radius-lg);
  border: 2px solid rgba(244,154,56,0.55);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.45);
}
.pdu-badge-top { background: var(--amber); color: var(--petrol-dark); }
.pricing-duo__basic { border-radius: var(--radius-lg); }
.how-note { background: var(--gold); color: #FFFFFF; }
.hl-mark { background: linear-gradient(0deg, rgba(244,154,56,0.38) 0%, rgba(244,154,56,0.38) 38%, transparent 38%); }
.hl { color: var(--purple); }
.hl-light { color: var(--action); }

/* bônus dentro do card de oferta: bloco compacto e destacado */
.pdu-bonus-box {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(244,154,56,0.14);
  border: 2px dashed rgba(244,154,56,0.55);
}
.pdu-bonus-box .pdu-bonus-divider { border-bottom: none; color: var(--on-dark); font-size: 0.85rem; letter-spacing: 0.01em; text-transform: none; padding-bottom: var(--space-2); }
.pdu-bonus-box .pf-list { margin-top: 0; }
.pdu-bonus-note { font-size: 0.74rem; color: var(--on-dark-soft); margin: var(--space-2) 0 0; text-align: center; }

/* selo de garantia */
.guarantee-seal-img { filter: drop-shadow(0 10px 18px rgba(35,78,82,0.22)); }