/* =========================================================
   La Iluminaria — tokens de diseño
   Fuente de verdad: CLAUDE.md §3
   ========================================================= */

:root {
  /* --- Superficies --------------------------------------- */
  --negro: #161616;        /* canvas de toda la web */
  /* El negro real de las imágenes de fondo del storytelling: medido en
     #0c0c0c (Chispa desktop) y #0b0b0b (Chispa móvil). Es el color al que
     tiene que fundir el hero, porque lo que aparece debajo son esas capas
     y no el canvas. */
  --negro-hoguera: #0b0b0b;
  --crema: #f0ece4;        /* blanco cálido: texto sobre negro */
  --crema-borde: #e8ded2;  /* borde del botón SUSCRIBIRME */

  /* --- Acento fuego -------------------------------------- */
  --fuego: #ff5543;
  --fuego-alt: #ee4042;

  /* Fuego del botón de envío. Va aparte porque el acento de marca no
     cumple contraste AA con texto blanco a 13px/800: `#ff5543` da 3,17 y
     hacen falta 4,5. Estos dos sí (4,67 y 5,64). El `--fuego` sigue
     intacto en la pincelada, los iconos y el foco, donde no lleva texto
     encima. Decidido con Marcos el 30/07/2026. */
  --fuego-boton: #d63a2a;
  --fuego-boton-hover: #c22f20;

  /* --- Tipografía ----------------------------------------
     Producción usa Inter Tight en TODA la web: las 48 reglas
     tipográficas de Elementor la aplican y ninguna llega a usar
     Playfair Display, que solo está declarada como fuente global
     del kit. Por eso aquí no se carga ninguna serif. */
  --sans: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Escala tipográfica (fluida) ------------------------ */
  --t-xs: 0.8125rem;                              /* 13px */
  --t-sm: 0.9375rem;                              /* 15px */
  --t-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --t-md: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --t-lg: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --t-xl: clamp(2rem, 1.4rem + 3vw, 4rem);

  --linea-apretada: 1.2;
  --linea-normal: 1.6;
  --linea-suelta: 1.9;                            /* el copy del storytelling respira */

  /* --- Ritmo vertical ------------------------------------ */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4rem;
  --e-6: clamp(5rem, 10vh, 9rem);
  --e-7: clamp(8rem, 22vh, 16rem);                /* aire entre bloques del storytelling */

  /* --- Relato (medidas tomadas de producción) -------------
     Escritorio: 40px/51px weight 800, bloques con 300px arriba
     y 150px abajo. Móvil (≤767px): 18px, interlínea 1.5, con
     100px arriba y 200px abajo. */
  --relato-t: 40px;
  --relato-linea: 51px;
  --relato-antes: 300px;
  --relato-despues: 150px;

  /* --- Bloque de suscripción (medidas de producción) ------
     Escritorio: alto 1050px, imagotipo de 400px, texto de 16px.
     Móvil: alto 100svh, imagotipo de 200px, texto de 12px. */
  --susc-alto: 1050px;
  --susc-marca: 400px;
  --susc-t: 16px;
  --susc-hueco-marca: 27px;

  /* --- Medidas ------------------------------------------- */
  --ancho-texto: 34rem;
  --ancho-contenido: 68rem;
  --ancho-relato: 71.25rem;       /* 1140px — el ancho real del relato en producción */
  --alto-header: 3.5rem;          /* 56px — producción usaba 51px */

  /* --- Movimiento ---------------------------------------- */
  --t-crossfade: 2s;                              /* crossfade de las capas de fondo */
  --t-pincelada: 2s;
  --t-reveal: 0.9s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Capas --------------------------------------------- */
  --z-fondos: -1;
  --z-contenido: 1;
  --z-header: 100;
}

/* El relato cambia de escala en móvil: mismos nombres, otros valores,
   así las reglas de `styles.css` no necesitan duplicarse. */
@media (max-width: 767px) {
  :root {
    --relato-t: 18px;
    --relato-linea: 1.5;
    --relato-antes: 100px;
    --relato-despues: 200px;

    --susc-alto: 100svh;
    --susc-marca: 200px;
    --susc-t: 12px;
    --susc-hueco-marca: 23px;
  }
}

/* El movimiento es decorativo en toda la web: si el sistema pide
   menos movimiento, los tokens de duración se anulan de raíz. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-crossfade: 0.01ms;
    --t-pincelada: 0.01ms;
    --t-reveal: 0.01ms;
  }
}