/* ==========================================================================
   TEMA — HQ SALA EM AÇÃO
   +200 Questões de Português com Charges e Tirinhas — 6º ao 9º Ano
   Público: professores de Língua Portuguesa (não é visual infantil).
   Paleta: azul-marinho + roxo + rosa, fundo branco, toques lavanda.
   Fontes: Baloo 2 (título do hero e títulos de seção, arredondada e amigável
           sem parecer infantil) + Poppins (subtítulos, textos explicativos,
           FAQ) + Montserrat SemiBold (botões, selos, números).
   Carregado depois do styles.css — só sobrescreve variáveis + acabamentos.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Poppins:ital,wght@0,400;0,500;0,700;0,800;1,700&family=Montserrat:wght@600;700;800&display=swap");

:root {
  /* cores oficiais da marca */
  --navy:          #0F2A5F;   /* azul-marinho principal */
  --navy-dark:     #0A1D45;
  --purple:        #7C3AED;   /* roxo de apoio */
  --purple-dark:   #6324D1;
  --pink:          #F43F5E;   /* rosa de destaque / CTA */
  --pink-dark:     #D62A48;
  --lavender:      #F4EEFF;   /* fundo secundário */
  --pink-tint:      #FFE9F0;  /* detalhes */
  --blue-tint:      #EDF4FF; /* cards */

  --petrol:        var(--navy);
  --petrol-dark:    var(--navy-dark);
  --jade:           var(--purple);
  --jade-dark:      var(--purple-dark);
  --amber:          var(--pink);
  --gold:           var(--purple);

  --bg:             #FDFDFD;
  --surface:        #FFFFFF;
  --surface-alt:    var(--lavender);
  --surface-dark:   var(--navy);
  --surface-darkest: var(--navy-dark);

  --ink:            #1A2340;
  --ink-soft:       #4A5578;
  --ink-muted:      #8089A6;
  --on-dark:        #FFFFFF;
  --on-dark-soft:   #C9D4F2;

  --primary:        var(--navy);
  --action:         var(--pink);
  --action-dark:    var(--pink-dark);
  --action-contrast: #FFFFFF;
  --action-light:   #FF7A92;
  --action-glow:    #FFD3DC;
  --accent:         var(--purple);
  --accent-light:   #A378F2;
  --accent-tint:    var(--blue-tint);
  --border:         #E3E6F5;
  --border-strong:  var(--purple);

  --action-rgb:      244,63,94;
  --action-dark-rgb: 214,42,72;
  --jade-rgb:        124,58,237;
  --petrol-rgb:      15,42,95;
  --petrol-dark-rgb: 10,29,69;
  --gold-rgb:        124,58,237;
  --hero-from:      #FFF7EB;
  --hero-to:        #FFF1DC;
  --check:          var(--purple);
  --attention-ink:  var(--navy-dark);
  --attention-bg:   var(--pink-tint);
  --attention-line: var(--pink);

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px;
  --font-heading: "Baloo 2", "Poppins", system-ui, sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label:   "Montserrat", system-ui, sans-serif;
}

body { font-weight: 400; font-family: var(--font-body); }
h1, h2, h3, h4, .section-title, .hero2-headline {
  font-family: var(--font-heading); font-weight: 700; letter-spacing: 0;
}
p, li { font-weight: 400; }

/* ---------- botões ---------- */
.btn, .btn-pill-cta {
  font-family: var(--font-label);
  font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase;
  font-size: clamp(0.66rem, 3.1vw, 0.92rem);
  min-height: 54px; min-width: 0; max-width: 100%; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  white-space: nowrap; padding-inline: clamp(0.75rem, 4vw, 1.6rem);
  overflow: hidden;
}
.btn.btn-primary {
  background: var(--pink); color: #fff; border-radius: 14px;
  box-shadow: 0 10px 22px -8px rgba(244,63,94,0.45);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn.btn-primary::after { content: "→"; font-weight: 800; }
.btn.btn-primary:hover { background: var(--pink-dark); transform: translateY(-1px); box-shadow: 0 14px 26px -8px rgba(214,42,72,0.5); }
.btn-pill-cta {
  background: var(--pink); color: #fff; border-radius: 999px; font-size: clamp(0.78rem, 3.4vw, 1rem);
  box-shadow: 0 10px 22px -8px rgba(244,63,94,0.45);
}
.btn-pill-cta:hover { background: var(--pink-dark); }
@media (max-width: 640px) { .btn, .btn-pill-cta, .hero2-cta { width: 100%; } }
@media (max-width: 360px) { .btn, .btn-pill-cta { letter-spacing: 0; padding-inline: 0.75rem; } }

/* ---------- faixa superior ---------- */
.announce { background: var(--navy); }
.announce p, .announce * { font-family: var(--font-label); font-weight: 600; letter-spacing: 0.03em; }

/* ---------- hero ---------- */
.hero2 {
  background:
    radial-gradient(circle at 90% 6%, rgba(124,58,237,0.08) 0%, transparent 55%),
    radial-gradient(circle at 6% 94%, rgba(244,63,94,0.07) 0%, transparent 55%),
    linear-gradient(170deg, var(--hero-from) 0%, var(--hero-to) 100%);
}
.hero2-img { border-radius: var(--radius-lg); border: 4px solid #fff; box-shadow: 0 26px 44px -16px rgba(15,42,95,0.25); }
.eyebrow {
  background: var(--pink-tint); border: 1px solid rgba(244,63,94,0.25); color: var(--navy);
  font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em;
}
.eyebrow::before { background: var(--pink); }
.hl-mark { background: linear-gradient(0deg, rgba(244,63,94,0.28) 0%, rgba(244,63,94,0.28) 38%, transparent 38%); color: var(--navy); }
.hl { color: var(--purple); }
.hl-light { color: var(--pink); }

.hero2-headline { color: var(--navy); line-height: 1.18; }
.hero2-sub {
  font-family: var(--font-body); font-weight: 400; color: var(--navy);
  font-size: 20px; line-height: 1.5; max-width: 620px; margin-inline: auto;
}
.hero2-sub strong { font-weight: 700; color: var(--navy); }
@media (max-width: 640px) { .hero2-sub { font-size: 16px; } }
.hero2-cta { max-width: 360px; min-height: 48px; font-size: clamp(0.62rem, 3vw, 0.86rem); }
.hero2-tagline {
  font-family: var(--font-body); font-weight: 600; color: var(--navy);
  margin-top: var(--space-3); margin-bottom: 0;
}
.hero2-note { font-family: var(--font-label); font-weight: 600; color: var(--ink-soft); font-size: 0.82rem; margin-top: var(--space-2); }

.hero2-checklist { max-width: 480px; gap: 0.45rem; }
.hero2-check {
  font-size: clamp(0.66rem, 2.6vw, 0.86rem); font-weight: 600; gap: 0.4rem;
  white-space: nowrap; align-items: center;
}
.hero2-check-icon { width: 16px; height: 16px; font-size: 0.6rem; flex-shrink: 0; }
@media (max-width: 400px) { .hero2-check { font-size: 0.6rem; } }

/* ---------- cards ---------- */
.how-step, .category-card, .bonus-card {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.how-step {
  background: #fff; border: 1px solid var(--lavender);
}
.how-step-number {
  background: var(--pink); color: #fff; font-family: var(--font-label); font-weight: 800; font-size: 1rem; letter-spacing: 0.02em;
}
.how-step h3 { color: var(--navy); }
.category-icon { background: var(--blue-tint); color: var(--purple-dark); }

/* cards "tudo que você recebe" em 3 colunas no desktop */
.category-grid { grid-template-columns: repeat(3, 1fr); max-width: 980px; gap: var(--space-3); align-items: stretch; }
.category-card { flex-direction: column; align-items: flex-start; text-align: left; background: rgba(255,255,255,0.07); }
@media (max-width: 860px) { .category-grid { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- seção escura (preço) ---------- */
.pricing-duo { margin-top: var(--space-7); overflow: visible; }
.pricing-duo__premium {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(124,58,237,0.35);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.5);
  padding-top: calc(var(--space-5) + 10px);
  overflow: visible;
}
.pdu-badge-top {
  background: var(--purple); font-family: var(--font-label); font-weight: 800;
  letter-spacing: 0.06em; max-width: calc(100% - 2rem);
  overflow: hidden; text-overflow: ellipsis;
}
.pdu-name--light { padding-inline: 0.5rem; }
.pdu-subtitle {
  color: var(--on-dark-soft); font-family: var(--font-label); font-weight: 600;
  text-align: center; margin: 0.2rem 0 var(--space-3);
}
.pricing-duo__basic { border-radius: var(--radius-lg); }
.hl-mark { color: var(--navy); }

/* ---------- garantia ---------- */
.guarantee-seal-img { filter: drop-shadow(0 10px 18px rgba(15,42,95,0.22)); }

/* ---------- FAQ (Poppins, não Lilita One) ---------- */
.faq-question { font-family: var(--font-body); font-weight: 700; color: var(--navy); }
.faq-item[data-open="true"] .faq-question { color: var(--pink); }

/* ---------- CTA final ---------- */
.final-cta { background: var(--lavender); }
.final-cta .section-title { color: var(--navy); }
.final-cta .legal-notice { text-align: center; color: var(--ink-muted); border-top: none; }

/* ---------- selo BNCC (destacado) ---------- */
.bncc-wrap { margin-top: var(--space-5); }
.bncc-badge {
  background: var(--lavender); color: var(--navy);
  border: 1.5px solid var(--purple); font-family: var(--font-body);
  font-weight: 700; font-size: 0.85rem; border-radius: var(--radius-md);
  padding: 0.7rem 1.4rem; max-width: 560px; text-align: center; line-height: 1.4;
  box-shadow: 0 6px 16px -8px rgba(124,58,237,0.35);
}

/* ---------- carrosséis sempre fluindo, sem pausa (hover/toque) ---------- */
.strip:hover .strip-track,
.strip.is-paused .strip-track { animation-play-state: running !important; }

/* ---------- selos / amostras (carrosséis maiores, fichas sem crop) ---------- */
.thumb { border: 1px solid rgba(255,255,255,0.7); border-radius: var(--radius-md); }
.thumb--strip {
  width: clamp(190px, 24vw, 320px);
  border-radius: var(--radius-lg); aspect-ratio: 1046 / 1504; background: #fff;
}
.thumb--strip img { object-fit: contain; }
@media (max-width: 640px) { .thumb--strip { width: 62vw; } }
.seal-row span, .pdu-badges span { font-family: var(--font-label); font-weight: 600; }

/* ---------- rodapé (marca em Poppins, não Lilita One) ---------- */
.site-footer { background: var(--navy); }
.footer2-logo { font-family: var(--font-body); font-weight: 800; }
.footer2-bncc {
  display: inline-block; margin-top: 0.6rem;
  background: var(--purple); color: #fff; font-family: var(--font-label);
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.03em;
  padding: 0.35rem 0.9rem; border-radius: 999px;
}