/* ==========================================================================
   typography.css — TerraBox Kids
   Override de tipografía. No modifica style-main.css (framework base).
   Reversible: quitar este <link> del <head> restaura la tipografía original.
   ========================================================================== */

/* ── Body & texto base ──────────────────────────────────────────────────── */
body {
  font-size: 1rem;      /* 16px — original era 0.9rem (14.4px), más legible */
  line-height: 1.75;    /* Original era 2 — ligeramente más compacto */
  color: #4a5568;       /* Gris más oscuro → mejor contraste sobre blanco */
}

p {
  font-size: 1rem;
  line-height: 1.75;
}

/* ── Jerarquía de encabezados ────────────────────────────────────────────── */
/* Los tamaños originales (h2 = 3.125rem = 50px) eran excesivos.            */
/* Se reduce la escala manteniendo la familia Baloo 2 en h1–h3.             */

h1, .h1 {
  font-size: 2.5rem;        /* 40px — hero principal de la página */
  line-height: 1.2;
  font-family: "Baloo 2", cursive;
  font-weight: 800;
}

h2, .h2 {
  font-size: 2rem;          /* 32px — títulos de sección */
  line-height: 1.25;
  font-family: "Baloo 2", cursive;
  font-weight: 800;
}

h3, .h3 {
  font-size: 1.625rem;      /* 26px */
  line-height: 1.3;
  font-family: "Baloo 2", cursive;
  font-weight: 700;
}

h4, .h4 {
  font-size: 1.25rem;       /* 20px */
  line-height: 1.35;
  font-weight: 700;
}

h5, .h5 {
  font-size: 1.0625rem;     /* 17px */
  line-height: 1.4;
  font-weight: 600;
}

h6, .h6 {
  font-size: 0.9375rem;     /* 15px — original 0.9rem era igual al body */
  line-height: 1.4;
  font-weight: 600;
}

/* ── Tabletas (< 992px) ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  body  { font-size: 0.9375rem; }   /* 15px */

  h1, .h1 { font-size: 2.125rem; }  /* 34px */
  h2, .h2 { font-size: 1.75rem;  }  /* 28px */
  h3, .h3 { font-size: 1.5rem;   }  /* 24px */
  h4, .h4 { font-size: 1.1875rem;}  /* 19px */
  h5, .h5 { font-size: 1rem;     }  /* 16px */
  h6, .h6 { font-size: 0.875rem; }  /* 14px */
}

/* ── Móvil (< 768px) ────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  body  { font-size: 0.9375rem; }   /* 15px */

  h1, .h1 { font-size: 1.875rem; }  /* 30px */
  h2, .h2 { font-size: 1.625rem; }  /* 26px */
  h3, .h3 { font-size: 1.375rem; }  /* 22px */
  h4, .h4 { font-size: 1.125rem; }  /* 18px */
  h5, .h5 { font-size: 0.9375rem;}  /* 15px */
  h6, .h6 { font-size: 0.875rem; }  /* 14px */
}

/* ── Móvil pequeño (< 480px) ────────────────────────────────────────────── */
@media (max-width: 480px) {
  body  { font-size: 0.9rem; }      /* 14.4px — pantallas muy pequeñas */

  h1, .h1 { font-size: 1.75rem;  }  /* 28px */
  h2, .h2 { font-size: 1.5rem;   }  /* 24px */
  h3, .h3 { font-size: 1.25rem;  }  /* 20px */
  h4, .h4 { font-size: 1.0625rem;}  /* 17px */
  h5, .h5 { font-size: 0.9rem;   }  /* 14.4px */
}