/* ============================================================
   Gimnasio Cristiano Belén — Design tokens
   Paleta institucional: rojo · blanco · mostaza, y sus gamas.
     rojo #d62839 · mostaza #f7b928
   Del rojo salen el vino y el coral; del mostaza, el naranja teja
   y el amarillo claro. Esas cuatro gamas sostienen las tarjetas y
   los bloques que antes iban en turquesa, verde, azul o morado.
   El amarillo suave (#fdf6e3) es solo fondo de sección.
   El gris queda para el texto; los fondos neutros son crema.
   ============================================================ */

:root {
  /* --- Marca --------------------------------------------- */
  /* Solo hay dos colores de marca: el rojo manda y el mostaza
     acompaña. Todo lo demás de la página sale de esos dos. */
  --rojo: #d62839;
  --mostaza: #f7b928;
  /* El mostaza un punto más oscuro, para los hover de sus botones. */
  --mostaza-hover: #e5a511;

  /* El verde de WhatsApp. No es color de marca: solo lo llevan los
     botones que abren el chat, para que se reconozcan de un vistazo. */
  --whatsapp: #25d366;
  --whatsapp-hover: #1ebe5a;

  /* Los nombres turquesa / verde / azul / morado se conservan porque
     los usan decenas de clases (.value--turquesa, .grado--verde,
     .section--azul…). Ya no son esos colores: son las cuatro gamas
     de rojo y de amarillo que rotan por la página. Renombrarlos
     obligaría a tocar los diez HTML sin cambiar nada de lo que se ve.
     Turquesa y azul llevan texto blanco encima, así que son oscuros. */
  --turquesa: #9c1f36;   /* vino, el acento secundario principal */
  --verde: #ffd65c;      /* amarillo claro, lleva texto oscuro encima */
  --azul: #c2410c;       /* naranja teja */
  --morado: #f0826c;     /* coral, solo en bordes */

  /* Derivados oscurecidos: los colores puros no alcanzan
     4.5:1 sobre blanco, así que el texto y los enlaces usan estos. */
  --rojo-ink: #a81828;
  --mostaza-ink: #8a5b05;
  --turquesa-ink: #7d172b;
  --verde-ink: #7a5a00;
  --azul-ink: #9a3412;
  --morado-ink: #a4391f;

  /* Tintes claros para fondos de sección, tarjetas y chips: cada uno
     va hacia su color. */
  --rojo-tint: #fdebed;
  /* Aún más suave que --rojo-tint: es el fondo de los hover del menú,
     que se encienden y apagan constantemente al recorrerlo con el ratón
     y no deben parpadear. */
  --rojo-tint-suave: #fef6f7;
  --mostaza-tint: #fef1c7;
  --turquesa-tint: #fbe8ec;
  --verde-tint: #fff8dc;
  --azul-tint: #fff0e3;
  --morado-tint: #fdece7;

  /* Amarillo suave: el fondo de sección más claro de la paleta. No es
     un color de marca, no se usa en texto ni en botones. */
  --amarillo-suave: #fdf6e3;

  /* --- Neutros ------------------------------------------- */
  /* El texto sigue en gris oscuro, que es lo que mejor se lee. Los
     fondos y las líneas, en cambio, son crema: tiran al amarillo. */
  --ink: #23262b;            /* titulares */
  --body: #44484f;           /* cuerpo de texto */
  --muted: #5f646d;          /* gris medio, 6:1 sobre blanco */
  --grey: #8c9199;           /* gris claro, usos decorativos */
  --gris-suave: #fbefd6;     /* fondo de las pistas de uso */
  --surface: #ffffff;
  --surface-2: #fff9ec;      /* crema pálido, secciones alternas */
  --line: #eadfcd;
  --line-soft: #f5eee2;

  /* --- Tipografía ---------------------------------------- */
  /* Onest sostiene los titulares; Gveret Levin marca la palabra
     clave de cada título (el rotulado a mano del boceto);
     Inter queda para texto corrido e interfaz. */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --font-hand: "Gveret Levin", "Onest", cursive;

  /* Piso tipográfico: ningún texto baja de 17px. La página la usan
     personas mayores y con poca práctica en internet. */
  --step--1: clamp(1.05rem, 1rem + 0.15vw, 1.12rem);
  --step-0:  clamp(1.08rem, 1.02rem + 0.25vw, 1.18rem);
  --step-1:  clamp(1.22rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.85vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.58rem + 1.75vw, 2.95rem);
  --step-4:  clamp(2.45rem, 1.82rem + 2.95vw, 4rem);
  --step-5:  clamp(2.95rem, 2rem + 4.4vw, 5.2rem);

  /* --- Espacio ------------------------------------------- */
  --shell: 1400px;
  --gutter: clamp(1.15rem, 4.5vw, 3rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);

  /* Alto mínimo de todo lo que se toca: 56px, el tamaño de dedo
     que recomienda WCAG para objetivos táctiles cómodos. */
  --tap: 3.5rem;

  /* --- Forma --------------------------------------------- */
  /* A diferencia del sitio anterior, aquí el redondeo es parte del
     tono: tarjetas y botones muy suaves, acordes al público joven. */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-full: 999px;
  /* Curva de las esquinas inferiores de la barra de navegación. */
  --r-nav: clamp(28px, 4vw, 56px);

  --shadow-sm: 0 2px 10px -4px rgb(30 32 36 / 0.18);
  --shadow-md: 0 14px 34px -22px rgb(30 32 36 / 0.45);
  --shadow-lg: 0 30px 70px -40px rgb(30 32 36 / 0.5);
  /* Sombra sólida de color: da a los botones aspecto de tecla. */
  --shadow-btn: 0 4px 0 rgb(30 32 36 / 0.22);

  /* --- Movimiento ---------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}