/* ============================================================
   Haricode — tokens del sistema de diseño
   Única fuente de verdad de color, tipografía, espacio y forma.
   Regla: ningún archivo del sitio escribe un color literal.
   ============================================================ */
:root{
  /* ---- Superficies ----
     Neutros con un sesgo mínimo hacia el índigo del isotipo. Nadie lo
     nombra al verlo, pero deja de leerse como gris de plantilla. */
  --surface-0:#09090D;   /* fondo de página */
  --surface-1:#0F0F15;   /* secciones alternas */
  --surface-2:#16161D;   /* tarjetas y paneles */
  --surface-3:#1C1C25;   /* estado hover de tarjeta */

  /* ---- Líneas ---- */
  --border:#25252F;
  --border-strong:#32323E;

  /* ---- Texto ---- */
  --text:#F5F5F7;
  --text-2:#A1A1AC;
  --text-3:#878793;   /* AA sobre las tres superficies */

  /* ---- Marca ----
     Los dos colores del isotipo. No son colores de interfaz: solo
     aparecen juntos en el filete de marca, unos 64 px² por sección. */
  --brand-red:#FF3A1F;
  --brand-blue:#124FFF;
  --brand-rule:linear-gradient(90deg,var(--brand-red),var(--brand-blue));

  /* El único texto del sitio que brilla: el concepto que da nombre al
     ecosistema. Son los dos colores del isotipo aclarados hasta que pasan
     el contraste AA de texto grande sobre el fondo de página; el paso
     intermedio evita el malva sucio de ir de rojo a azul en línea recta. */
  --brand-rule-lit:linear-gradient(96deg,#FF7A45 0%,#FF5FA2 40%,#8FBEFF 92%);
  --glow-warm:rgba(255,122,69,.34);
  --glow-cool:rgba(255,95,162,.26);
  --glow-halo:rgba(255,95,162,.10);

  /* ---- Acento: uno solo. Regla del 5 % de área por pantalla. ---- */
  --accent:#C8341B;
  --accent-hover:#A82B15;
  --accent-quiet:rgba(200,52,27,.12);
  --on-accent:#FFFFFF;
  --surface-blur:rgba(10,10,12,.82);

  /* ---- Marcas de producto propio ----
     Rumbo tiene identidad propia (aguja de brújula: ámbar al norte, azul al
     sur). Se declara aquí para no romper la regla de cero literales, pero no
     forma parte de la paleta del sitio: solo pinta su isotipo. */
  --rumbo-north:#E08A2B;
  --rumbo-south:#6FA5FF;

  /* Argos: rojo señal sobre el escudo. Igual que con Rumbo, se declara aquí
     para respetar la regla de cero literales, pero no entra en la paleta del
     sitio: solo pinta su isotipo. */
  --argos-signal:#E8142B;

  /* Hoo, la mascota. Su azul es el azul del isotipo de Haricode, así que no
     entra un color nuevo al sistema: entra un uso nuevo del que ya había. Vive
     dentro de sus ilustraciones y en el halo del botón que las acompaña; la
     interfaz que lo rodea sigue usando el acento del sitio, porque un segundo
     acento compitiendo con el rojo dejaría la pantalla sin jerarquía. */
  --hoo-glow:rgba(18,79,255,.28);
  --hoo-glow-soft:rgba(18,79,255,.10);

  /* ---- Semánticos: solo para estado real, nunca decorativo ---- */
  --ok:#3F9E63;

  /* ---- Tipografía ---- */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-xs:.75rem;      /* 12 */
  --fs-sm:.875rem;     /* 14 */
  --fs-base:1rem;      /* 16 */
  --fs-md:1.125rem;    /* 18 */
  --fs-lg:1.25rem;     /* 20 */
  --fs-xl:1.5625rem;   /* 25 */
  --fs-2xl:1.9375rem;  /* 31 */
  --fs-3xl:2.4375rem;  /* 39 */
  --fs-4xl:3.0625rem;  /* 49 */
  --fs-5xl:3.8125rem;  /* 61 */

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;

  --lh-tight:1.1;
  --lh-heading:1.2;
  --lh-body:1.6;
  --measure:68ch;

  /* ---- Espacio: múltiplos de 4 ---- */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;  --sp-5:24px;
  --sp-6:32px;  --sp-7:48px;  --sp-8:64px;  --sp-9:96px;  --sp-10:128px;

  /* ---- Ritmo de sección ----
     Bandas de contenido corto con 112 px arriba y abajo dejaban franjas
     muertas entre secciones: la página se leía vacía sin estarlo. */
  --section-y:72px;

  /* ---- Forma: tres radios ---- */
  --r-control:8px;
  --r-card:12px;
  --r-pill:999px;

  /* ---- Elevación: una sola, neutra ---- */
  --shadow:0 12px 32px -16px rgba(0,0,0,.7);

  /* ---- Contenedor ---- */
  --container:1200px;
  --gutter:24px;

  /* ---- Movimiento ----
     Una sola gramática: aparecer subiendo. Cambia la duración y el retardo,
     nunca el tipo de movimiento. */
  --ease:cubic-bezier(.2,.7,.2,1);          /* interacción: rápido y directo */
  --ease-reveal:cubic-bezier(.16,1,.3,1);   /* aparición: sale rápido y frena largo */
  --dur:.2s;                                /* hover, foco, estados */
  --dur-reveal:.9s;                         /* entrada de un bloque */
  --rise:16px;                              /* recorrido de la aparición */
  --stagger:60ms;                           /* entre bloques hermanos */
  --stagger-word:34ms;                      /* entre palabras de un titular */
}

@media(min-width:900px){
  :root{ --section-y:88px; --gutter:32px; }
}