/* ==========================================================================
   TEMA "ATLAS DA REDAÇÃO" — 10 Temas Estratégicos da Redação ENEM 2026
   Só sobrescreve variáveis + alguns ajustes de estilo. Carregado depois do styles.css.
   Fontes: Plus Jakarta Sans (títulos) + Source Sans 3 (corpo) + IBM Plex Mono (rótulos)
   Fontes carregadas via <link> no <head> (ver index.html) — evita bloquear o CSS com @import.
   ========================================================================== */

:root {
  /* paleta oficial Atlas da Redação */
  --petrol:        #172C56;   /* azul-marinho */
  --petrol-dark:   #101F3E;
  --jade:          #294FC2;   /* azul de apoio */
  --jade-dark:     #1F3D9C;
  --amber:         #13A68A;   /* verde de destaque, usado em selos/badges */
  --amber-dark:    #0E8A72;
  --gold:          #13A68A;
  --purple:        #294FC2;
  --purple-dark:   #1F3D9C;

  --bg:            #F6F8FC;
  --surface:       #FFFFFF;
  --surface-alt:   #EEF2FA;
  --surface-dark:  #172C56;
  --surface-darkest: #101F3E;

  --ink:           #172C56;
  --ink-soft:      #44557C;
  --ink-muted:     #7A88A8;
  --on-dark:       #FFFFFF;
  --on-dark-soft:  #C7D3EC;

  --primary:       #172C56;
  --action:        #13A68A;
  --action-dark:   #0E8A72;
  --action-contrast: #FFFFFF;
  --action-light:  #3DBFA6;
  --action-glow:   #7BD9C6;
  --accent:        #294FC2;
  --accent-light:  #5E7CDB;
  --accent-tint:   #E9EEFB;
  --border:        #DCE3F2;
  --border-strong: #B9C6E3;

  --action-rgb:      19,166,138;
  --action-dark-rgb: 14,138,114;
  --jade-rgb:        41,79,194;
  --petrol-rgb:      23,44,86;
  --petrol-dark-rgb: 16,31,62;
  --gold-rgb:        19,166,138;
  --hero-from:     #F6F8FC;
  --hero-to:       #E9EEFB;
  --check:         #13A68A;
  --attention-ink: #172C56;
  --attention-bg:  #E9EEFB;
  --attention-line:#B9C6E3;

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 30px;
  --font-heading: "Plus Jakarta Sans", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;
}

body { font-weight: 400; }
h1, h2, h3, h4, .section-title, .hero2-headline { font-weight: 700; letter-spacing: -0.01em; }
.btn, .btn-pill-cta { font-weight: 700; letter-spacing: 0.01em; border-radius: var(--radius-md); }
.btn-pill-cta { text-transform: none; font-size: 1rem; }

/* botões: o texto fica sempre em uma única linha, inclusive no mobile */
.btn, .btn-pill-cta {
  white-space: nowrap;
  font-size: clamp(0.72rem, 3vw, 0.95rem);
  padding-inline: clamp(0.9rem, 4vw, 1.8rem);
}

/* rótulos pequenos (eyebrow, badges) em monoespaçada, no estilo "mapa/atlas" */
.eyebrow, .announce, .bncc-badge, .pdu-pill, .guarantee-seal-unit {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* faixa de anúncio: sólida, sóbria, sem gradiente infantil */
.announce { background: var(--amber); color: #fff; text-shadow: none; }
.benefit-strip { background: linear-gradient(90deg, var(--petrol) 0%, var(--jade) 100%); }

/* cards: lineares, cantos arredondados, sem traços nem rotação */
.how-step, .category-card, .bonus-card { border-style: solid; border-width: 1px; }
.how-step:nth-child(odd),
.how-step:nth-child(even),
.how-step.is-visible:nth-child(odd),
.how-step.is-visible:nth-child(even) { transform: none; }
.how-step-number { background: var(--jade); }
.category-card .category-icon {
  background: var(--accent-tint);
  color: var(--jade);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
}
.thumb { border: 1px solid var(--border); border-radius: var(--radius-md); }
.thumb--strip:nth-child(odd),
.thumb--strip:nth-child(even) { transform: none; }

/* carrosséis um pouco maiores */
.thumb--strip { width: clamp(160px, 21vw, 270px); }
@media (max-width: 640px) { .thumb--strip { width: 56vw; } }

/* carrosséis nunca param: sem pausa ao passar o mouse ou tocar */
.strip:hover .strip-track,
.strip.is-paused .strip-track { animation-play-state: running; }

/* hero: fundo plano, sem confetes */
.hero2 { background: linear-gradient(180deg, var(--hero-from) 0%, var(--hero-to) 100%); }
.hero2-img { border-radius: var(--radius-lg); border: 1px solid var(--border); }
.eyebrow { border-style: solid; }

.section--dark { border-radius: 0; }
.preview, .pricing-section { border-radius: 0; }
.pricing-duo__basic, .pricing-duo__premium { border-radius: var(--radius-xl); }
.bncc-badge { background: var(--accent-tint); color: var(--petrol); }
.hl-mark { background: linear-gradient(0deg, rgba(19,166,138,0.22) 0%, rgba(19,166,138,0.22) 38%, transparent 38%); }

/* ---------- seção de preço com um único plano centralizado ---------- */
.pricing-duo--single {
  grid-template-columns: 1fr;
  max-width: 480px;
}

/* selo "todos inclusos no pagamento único" em uma única linha, inclusive no mobile */
.bonus-free {
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-size: clamp(0.62rem, 2.4vw, 0.85rem);
  padding: 0.5rem clamp(0.7rem, 3vw, 1rem);
  max-width: 94vw;
}

/* ---------- 5 bônus: 3 cards na primeira linha, 2 centralizados na segunda (desktop) ---------- */
/* abaixo de 901px herda o layout responsivo padrão do template (2 colunas / 1 coluna) */
@media (min-width: 901px) {
  .bonus-grid--five { grid-template-columns: repeat(6, 1fr); }
  .bonus-grid--five .bonus-card:nth-child(1) { grid-column: 1 / span 2; }
  .bonus-grid--five .bonus-card:nth-child(2) { grid-column: 3 / span 2; }
  .bonus-grid--five .bonus-card:nth-child(3) { grid-column: 5 / span 2; }
  .bonus-grid--five .bonus-card:nth-child(4) { grid-column: 2 / span 2; }
  .bonus-grid--five .bonus-card:nth-child(5) { grid-column: 4 / span 2; }
}