/* =====================================================================
   TOKENS DE DISEÑO — Aulas para la Vida
   ---------------------------------------------------------------------
   Si cambia un color o una tipografía de la marca, se cambia AQUÍ y se
   aplica en todo el sitio. Los colores salen del logo oficial (decisión D5).
   ===================================================================== */

:root {
  /* --- Color: muestreado del logo --- */
  --violeta: #613EFF;          /* letras del logo: color dominante */
  --violeta-hondo: #4A2FD6;    /* hover y sombras del violeta */
  --azul-noche: #002F90;       /* «para la» del logo: secciones profundas */
  --naranja-cohete: #EC8326;   /* el cohete: botones principales */
  --naranja-marcador: #FD6F14; /* punta del marcador: resaltes */
  --rosa-orbita: #FD3A6A;      /* el trazo de la órbita: líneas y detalles */

  /* --- Color: derivados de apoyo --- */
  --tinta: #0F1446;            /* texto principal sobre claro */
  --papel: #FFF8EF;            /* fondo claro cálido */
  --lila: #ECE7FF;             /* fondos de apoyo */
  --lila-texto: #F1EDFF;       /* texto secundario sobre violeta */
  --blanco: #FFFFFF;
  --whatsapp: #1FAF5A;

  /* --- Tipografía (Google Fonts) --- */
  --fuente-base: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-rotulo: "Lexend Zetta", "Lexend", system-ui, sans-serif;
  --fuente-mano: "Shantell Sans", "Segoe Print", "Comic Sans MS", cursive;

  /* --- Escala tipográfica (fluida: se adapta al ancho de pantalla) --- */
  --t-display: clamp(2.6rem, 1.1rem + 5.6vw, 6.3rem);
  --t-h2: clamp(2.1rem, 1.3rem + 3.4vw, 4.4rem);
  --t-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --t-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem);
  --t-base: 1rem;
  --t-mano: clamp(1.05rem, 0.95rem + 0.45vw, 1.4rem);
  --t-rotulo: 0.68rem;

  /* --- Espacio y forma --- */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --radio-s: 12px;
  --radio: 20px;
  --radio-l: 28px;
  --sombra: 0 22px 48px -20px rgba(15, 20, 70, 0.55);
  --sombra-s: 0 10px 24px -12px rgba(15, 20, 70, 0.45);

  /* --- Movimiento --- */
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
}