/* ============================================================
   TEAM MÁXIMO — DESIGN TOKENS v1.0
   Fonte única de verdade. Não inventar valores fora daqui.
   Fontes: Newsreader (display) + Manrope (texto/UI) — Google Fonts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&family=Manrope:wght@400..800&display=swap');

:root {
  /* ---- MARCA ---------------------------------------------- */
  --tm-black:        #16161C;  /* cor principal: textos, superfícies escuras */
  --tm-night:        #111116;  /* fundo escuro de seção */
  --tm-night-2:      #1C1C23;  /* card sobre fundo escuro */
  --tm-red:          #D81E2C;  /* ação / destaque — máx. 10% da tela */
  --tm-red-deep:     #B8121F;  /* hover + texto vermelho pequeno sobre papel */
  --tm-red-press:    #98101A;  /* :active */
  --tm-red-tint:     #FBE4E6;  /* fundo de destaque suave */

  /* ---- NEUTROS -------------------------------------------- */
  --tm-ink:          #34343C;  /* corpo de texto */
  --tm-ink-2:        #55555E;  /* texto secundário pequeno (AA em 13–14px) */
  --tm-mute:         #6E6E76;  /* texto secundário ≥16px apenas */
  --tm-faint:        #A6A6AE;  /* rótulos, metadados, nunca conteúdo essencial */
  --tm-paper:        #F1F0EE;  /* fundo claro padrão — nunca branco puro */
  --tm-paper-2:      #E6E5E2;  /* fundo alternado / estados hover claros */
  --tm-white:        #FFFFFF;  /* superfície de card sobre papel */
  --tm-line:         rgba(20,20,28,.10);
  --tm-line-strong:  rgba(20,20,28,.20);

  /* ---- SOBRE FUNDO ESCURO --------------------------------- */
  --tm-on-night:      #F1F0EE;
  --tm-on-night-mute: #A6A6AE;
  --tm-night-line:    rgba(241,240,238,.14);

  /* ---- CATEGORIAS DE TURMA (só em grades/tags) ------------- */
  --tm-cat-fund-bg:  #E6E6EA;  --tm-cat-fund-fg:  #20202A;
  --tm-cat-adv-bg:   #E0E8FB;  --tm-cat-adv-fg:   #1E4DB3;
  --tm-cat-all-bg:   #DAF0E4;  --tm-cat-all-fg:   #0E7A4C;
  --tm-cat-fem-bg:   #FBDFEA;  --tm-cat-fem-fg:   #B02456;
  --tm-cat-kids-bg:  #FCE9C6;  --tm-cat-kids-fg:  #8A4E06;
  --tm-cat-thai-bg:  #D6ECF1;  --tm-cat-thai-fg:  #0A5C6B;

  /* ---- TIPOGRAFIA ----------------------------------------- */
  --tm-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --tm-font-ui:      'Manrope', system-ui, -apple-system, sans-serif;

  --tm-display-xl: clamp(48px, 7vw, 88px);   /* Newsreader 500 / 0.98 / -0.02em */
  --tm-display-l:  clamp(40px, 5.2vw, 64px); /* Newsreader 500 / 1.02 / -0.02em */
  --tm-h1:         clamp(34px, 4.2vw, 48px); /* Newsreader 500 / 1.05 / -0.015em */
  --tm-h2:         clamp(28px, 3.2vw, 40px); /* Newsreader 500 / 1.10 / -0.015em */
  --tm-h3:                            28px;  /* Newsreader 500 / 1.25 / -0.01em  */
  --tm-h4:                            20px;  /* Manrope 800  / 1.30 / -0.01em  */
  --tm-body-l:                        18px;  /* Manrope 400  / 1.65 */
  --tm-body:                          16px;  /* Manrope 400  / 1.70 */
  --tm-body-s:                        14px;  /* Manrope 400  / 1.60 */
  --tm-caption:                       13px;  /* Manrope 500  / 1.50 */
  --tm-eyebrow:                       11px;  /* Manrope 800  / 1 / .18em / UPPER */
  --tm-btn:                           15px;  /* Manrope 800  / 1 / -0.01em */

  /* ---- ESPAÇAMENTO (escala 4pt) --------------------------- */
  --tm-space-1: 4px;   --tm-space-2: 8px;   --tm-space-3: 12px;
  --tm-space-4: 16px;  --tm-space-5: 24px;  --tm-space-6: 32px;
  --tm-space-7: 48px;  --tm-space-8: 64px;  --tm-space-9: 96px;
  --tm-space-10:128px; --tm-space-11:160px;

  /* ---- RAIO ----------------------------------------------- */
  --tm-radius-sm:   8px;   /* tags, inputs pequenos */
  --tm-radius-md:  12px;   /* botões, inputs */
  --tm-radius-lg:  16px;   /* cards */
  --tm-radius-xl:  24px;   /* blocos grandes, imagens de seção */
  --tm-radius-pill: 999px;

  /* ---- ELEVAÇÃO (discreta — a marca é editorial) ---------- */
  --tm-shadow-sm: 0 1px 2px rgba(20,20,28,.06);
  --tm-shadow-md: 0 4px 16px rgba(20,20,28,.08);
  --tm-shadow-lg: 0 12px 40px rgba(20,20,28,.12);
  --tm-focus:     0 0 0 3px rgba(216,30,44,.35);

  /* ---- MOVIMENTO ------------------------------------------ */
  --tm-dur-fast: 120ms;  /* hover de cor */
  --tm-dur:      200ms;  /* padrão */
  --tm-dur-slow: 400ms;  /* entrada de seção */
  --tm-ease:     cubic-bezier(.2,0,0,1);
  --tm-ease-out: cubic-bezier(.16,1,.3,1);

  /* ---- LAYOUT --------------------------------------------- */
  --tm-container: 1200px;
  --tm-gutter:    24px;   /* ≥768px: 40px · ≥1280px: 64px */
  --tm-grid-gap:  24px;
  --tm-section-y: 96px;   /* <1024px: 64px · <640px: 48px */
}

/* ---- BREAKPOINTS (referência) -----------------------------
   sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440
   Grid: 12 col ≥1024 · 8 col 768–1023 · 4 col <768
------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tm-paper);
  color: var(--tm-black);
  font-family: var(--tm-font-ui);
  font-size: var(--tm-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--tm-red-deep); text-decoration: none; }
a:hover { color: var(--tm-red-press); text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--tm-focus); border-radius: var(--tm-radius-sm); }

h1, h2, h3 { font-family: var(--tm-font-display); font-weight: 500; letter-spacing: -.015em; margin: 0; }
h1 { font-size: var(--tm-h1); line-height: 1.05; }
h2 { font-size: var(--tm-h2); line-height: 1.10; }
h3 { font-size: var(--tm-h3); line-height: 1.25; }
h4 { font-family: var(--tm-font-ui); font-weight: 800; font-size: var(--tm-h4); line-height: 1.3; margin: 0; }
p  { margin: 0; text-wrap: pretty; }

.tm-container { width: 100%; max-width: var(--tm-container); margin-inline: auto; padding-inline: var(--tm-gutter); }
@media (min-width: 768px)  { .tm-container { padding-inline: 40px; } }
@media (min-width: 1280px) { .tm-container { padding-inline: 64px; } }

.tm-eyebrow {
  font-size: var(--tm-eyebrow); font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tm-mute);
  display: inline-flex; align-items: center; gap: var(--tm-space-2);
}
.tm-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tm-red); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}