/* ==========================================================================
   Nivel UP · Tokens de marca (única fuente de verdad)
   Rediseño "patio del cole, ordenado": crema cálido + color por categoría.
   Paleta de marca APROXIMADA (muestreada del logo). Refinar con el vector.
   ========================================================================== */
:root {
  /* --- Anclas de marca --- */
  --azul: #2e6bf0;          /* azul de marca, vivo */
  --azul-deep: #0b43a7;     /* azul royal original (navy/acento fuerte) */
  --azul-ink: #102a5c;      /* azul muy oscuro para texto fuerte/footer */
  --verde: #4fa828;         /* verde Nivel UP */
  --verde-deep: #3c861f;

  /* --- Familia cálida (personalidad) --- */
  --coral: #2fa84f;         /* acento de acción (CTA). Antes coral; ahora verde, para sintonizar con el logo */
  --coral-deep: #23913f;
  --ambar: #84b72e;         /* lima/verde claro (antes ámbar) */
  --rosa: #e94c7a;          /* único toque cálido (no es naranja): da variedad a las categorías */
  --teal: #0e9488;
  --naranja: #16a085;       /* verde azulado / esmeralda (antes naranja) */

  /* --- Lienzo cálido --- */
  --cream: #fbfaf6;         /* fondo principal, blanco neutro (menos anaranjado) */
  --cream-2: #edf4e7;       /* secciones alternas, verde muy suave */
  --white: #ffffff;
  --paper: #fffdf9;

  /* --- Texto (nunca negro puro) --- */
  --ink: #16243f;           /* titulares / texto fuerte */
  --body: #4a586e;          /* cuerpo */
  --muted: #8090a4;         /* secundario */

  /* --- Líneas --- */
  --line: #efe6d9;          /* bordes cálidos sobre crema */
  --line-soft: rgba(22, 36, 63, 0.08);

  /* --- Colores por categoría (color + fondo lavado + tinta) --- */
  --c-academia: #2e6bf0;   --c-academia-bg: #e7efff;
  --c-arte: #14a7b0;       --c-arte-bg: #e0f4f6;
  --c-teatro: #e94c7a;     --c-teatro-bg: #fde7ef;
  --c-musica: #84b72e;     --c-musica-bg: #f0f6dd;
  --c-deportes: #4fa828;   --c-deportes-bg: #e8f5de;
  --c-estrategia: #0e9488; --c-estrategia-bg: #def3f0;
  --c-valores: #16a085;    --c-valores-bg: #def3ee;

  /* --- Forma (suave, redondeada) --- */
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* --- Sombras (suaves, teñidas) --- */
  --sh-soft: 0 14px 30px -16px rgba(22, 36, 63, 0.18);
  --sh-card: 0 22px 44px -24px rgba(22, 36, 63, 0.22);
  --sh-coral: 0 16px 30px -14px rgba(47, 168, 79, 0.42);
  --sh-azul: 0 16px 30px -14px rgba(46, 107, 240, 0.4);

  /* --- Tipografía --- */
  --font-display: "Outfit", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  /* --- Layout / motion --- */
  --maxw: 1200px;
  --gutter: 22px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}