/* ==========================================================================
   Sistema de diseño del motor · TOKENS
   Variables CSS: roles de color, tipografía, espaciado, radios, sombras,
   anchos y movimiento. kit.css solo consume estas variables: para cambiar
   la marca de una página se tocan tokens, nunca componentes.

   Uso:   <html lang="es" data-tema="claro">   (claro | oscuro | premium)
   Los temas se pueden anidar: <section class="seccion" data-tema="oscuro">
   invierte solo esa sección (kit.css pinta fondo y texto en cada [data-tema]).

   Tema de marca (desde la sección 7 del cerebro): ver bloque al final y
   activos/diseno/SISTEMA.md § "Tema desde el cerebro".
   ========================================================================== */

/* ---- Respaldos con la medida de la fuente web -------------------------------
   Mientras Inter / Inter Tight descargan se ve Arial. Sin ajuste, Arial ocupa
   otro ancho, el texto cambia de líneas al llegar la fuente y la página salta
   (CLS). Estos respaldos escalan Arial a la medida de cada fuente y peso.
   Medidos en Chrome contra Arial; si cambia la fuente de marca, re-medir. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 104%; ascent-override: 93.1%; descent-override: 23.2%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 550 900; size-adjust: 101.8%; ascent-override: 95.2%; descent-override: 23.7%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 100 749; size-adjust: 95.8%; ascent-override: 101.1%; descent-override: 25.2%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 750 900; size-adjust: 97.6%; ascent-override: 99.2%; descent-override: 24.7%; line-gap-override: 0%; }

:root {
  /* ---- Tipografía ------------------------------------------------------- */
  --fuente-cuerpo: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titular: "Inter Tight", "Inter Tight Fallback", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-editorial: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fuente-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala fluida: mínimo a 360 px, máximo a ~1280 px. */
  --texto-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);    /* 12–13 */
  --texto-s: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);   /* 14–15 */
  --texto-m: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);   /* 17–19: cuerpo */
  --texto-l: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);    /* 19–23: subtítulo */
  --texto-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);     /* 22–30: h3 */
  --texto-2xl: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);      /* 26–40: h2 */
  --texto-3xl: clamp(1.875rem, 1.35rem + 2.4vw, 3.25rem);    /* 30–52: h1 m */
  --texto-4xl: clamp(2.125rem, 1.4rem + 3.3vw, 4rem);        /* 34–64: h1 l */
  --texto-5xl: clamp(2.375rem, 1.4rem + 4.4vw, 4.75rem);     /* 38–76: h1 xl */

  --interlineado-titular: 1.08;
  --interlineado-subtitulo: 1.35;
  --interlineado-cuerpo: 1.65;
  --tracking-titular: -0.018em;
  --tracking-mayusculas: 0.12em;
  --peso-titular: 800;
  --peso-fuerte: 700;

  /* ---- Espaciado (base 4 px) ------------------------------------------- */
  --esp-1: 0.25rem;  /* 4 */
  --esp-2: 0.5rem;   /* 8 */
  --esp-3: 0.75rem;  /* 12 */
  --esp-4: 1rem;     /* 16 */
  --esp-5: 1.5rem;   /* 24 */
  --esp-6: 2rem;     /* 32 */
  --esp-7: 3rem;     /* 48 */
  --esp-8: 4rem;     /* 64 */
  --esp-9: 6rem;     /* 96 */
  --esp-10: 8rem;    /* 128 */
  --esp-seccion: clamp(3.5rem, 2.5rem + 5vw, 7rem);     /* padding vertical de sección */
  --esp-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);         /* margen lateral */

  /* ---- Anchos ----------------------------------------------------------- */
  --ancho-lectura: 680px;
  --ancho: 1120px;
  --ancho-estrecho: 560px;
  --ancho-amplio: 1280px;

  /* ---- Radios ----------------------------------------------------------- */
  --radio-s: 6px;
  --radio-m: 12px;
  --radio-l: 20px;
  --radio-xl: 28px;
  --radio-pildora: 999px;

  /* ---- Movimiento ------------------------------------------------------- */
  --dur-rapida: 150ms;
  --dur-media: 280ms;
  --dur-lenta: 640ms;
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);      /* entra rápido, frena suave */
  --curva-entrada: cubic-bezier(0.7, 0, 0.84, 0);
  --curva-estandar: cubic-bezier(0.4, 0, 0.2, 1);
  --desplazamiento-revelar: 18px;

  /* ---- Tamaños de interacción ------------------------------------------ */
  --tap-minimo: 48px;
  --alto-boton: 56px;
  --alto-boton-grande: 68px;
  --alto-campo: 54px;

  --z-barra: 40;
  --z-fijo: 50;
}

/* ==========================================================================
   TEMAS · roles de color
   Cada tema define los mismos roles. Los derivados (hover, suaves) salen de
   color-mix(), así un tema de marca solo necesita los roles base.
   ========================================================================== */

:root,
[data-tema="claro"] {
  --fondo: #FAFAF7;
  --fondo-alt: #F2F1EC;
  --superficie: #FFFFFF;
  --superficie-alt: #F7F6F2;
  --texto: #111318;
  --texto-suave: #4B5160;
  --texto-tenue: #6B7180;           /* solo ≥ 14 px; 4.8:1 sobre blanco */
  --acento: #3B3FD8;
  --acento-texto: #FFFFFF;
  --cta: var(--acento);
  --cta-texto: var(--acento-texto);
  --exito: #0E7A47;
  --exito-texto: #FFFFFF;
  --alerta: #B4410C;
  --alerta-texto: #FFFFFF;
  --borde: #E3E1DA;
  --borde-fuerte: #C9C6BC;
  --marcador-fondo: #FFE45C;
  --marcador-texto: #1A1500;
  --foco: #3B3FD8;

  --sombra-s: 0 1px 2px rgb(17 19 24 / 0.06), 0 1px 1px rgb(17 19 24 / 0.04);
  --sombra-m: 0 4px 12px -2px rgb(17 19 24 / 0.08), 0 2px 4px -2px rgb(17 19 24 / 0.06);
  --sombra-l: 0 24px 48px -12px rgb(17 19 24 / 0.18), 0 8px 16px -8px rgb(17 19 24 / 0.08);
  --sombra-cta: 0 10px 24px -8px color-mix(in oklab, var(--cta) 60%, transparent);
  --brillo-fondo: radial-gradient(60% 50% at 50% 0%, color-mix(in oklab, var(--acento) 10%, transparent), transparent 70%);
  color-scheme: light;
}

[data-tema="oscuro"] {
  --fondo: #0A0C10;
  --fondo-alt: #11141A;
  --superficie: #161A22;
  --superficie-alt: #1C212B;
  --texto: #F3F4F6;
  --texto-suave: #A3AAB8;
  --texto-tenue: #8A92A2;
  --acento: #8B95FF;
  --acento-texto: #0A0C10;
  --cta: #D7FF3A;
  --cta-texto: #0A0C10;
  --exito: #34D399;
  --exito-texto: #04140D;
  --alerta: #FB923C;
  --alerta-texto: #1A0D02;
  --borde: #262B36;
  --borde-fuerte: #3A4150;
  --marcador-fondo: #FFE45C;
  --marcador-texto: #1A1500;
  --foco: #D7FF3A;

  --sombra-s: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-m: 0 8px 20px -6px rgb(0 0 0 / 0.5);
  --sombra-l: 0 30px 60px -12px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.04);
  --sombra-cta: 0 10px 30px -8px color-mix(in oklab, var(--cta) 45%, transparent);
  --brillo-fondo: radial-gradient(60% 55% at 50% 0%, color-mix(in oklab, var(--acento) 22%, transparent), transparent 70%);
  color-scheme: dark;
}

[data-tema="premium"] {
  --fuente-titular: "Fraunces", Georgia, "Times New Roman", serif;
  --peso-titular: 600;
  --tracking-titular: -0.015em;
  --fondo: #0E0D0B;
  --fondo-alt: #15130F;
  --superficie: #1B1915;
  --superficie-alt: #221F1A;
  --texto: #F5F0E6;
  --texto-suave: #B8AE9C;
  --texto-tenue: #9C927F;
  --acento: #D9B26A;
  --acento-texto: #14110C;
  --cta: #D9B26A;
  --cta-texto: #14110C;
  --exito: #7FC8A0;
  --exito-texto: #0B1A12;
  --alerta: #E59A5B;
  --alerta-texto: #1A0F05;
  --borde: #2E2A23;
  --borde-fuerte: #463F33;
  --marcador-fondo: #FFE45C;
  --marcador-texto: #1A1500;
  --foco: #F0D9A8;

  --sombra-s: 0 1px 2px rgb(0 0 0 / 0.45);
  --sombra-m: 0 10px 24px -8px rgb(0 0 0 / 0.55);
  --sombra-l: 0 36px 70px -18px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(217 178 106 / 0.08);
  --sombra-cta: 0 12px 30px -10px color-mix(in oklab, var(--cta) 55%, transparent);
  --brillo-fondo: radial-gradient(55% 50% at 50% 0%, color-mix(in oklab, var(--acento) 16%, transparent), transparent 72%);
  color-scheme: dark;
}

/* Derivados comunes a todos los temas (se recalculan en cada [data-tema]). */
:root,
[data-tema] {
  --acento-hover: color-mix(in oklab, var(--acento) 86%, var(--texto));
  --acento-suave: color-mix(in oklab, var(--acento) 12%, var(--fondo));
  --acento-borde: color-mix(in oklab, var(--acento) 35%, var(--borde));
  --cta-hover: color-mix(in oklab, var(--cta) 88%, var(--texto));
  --exito-suave: color-mix(in oklab, var(--exito) 14%, var(--fondo));
  --anillo-foco: 0 0 0 3px var(--fondo), 0 0 0 6px var(--foco);
  --alerta-suave: color-mix(in oklab, var(--alerta) 14%, var(--fondo));
}

/* ==========================================================================
   TEMA DE MARCA (plantilla)
   Copia este bloque al <style> de la página, cambia los hex por los del
   cerebro (sección 7 · Activos de marca) y pon data-tema="marca" en <html>.
   Hereda escala, espacios y sombras del tema base que elijas en "base".
   Reglas de contraste (AA): --acento-texto sobre --acento ≥ 4.5:1;
   --texto-suave sobre --fondo ≥ 4.5:1. Verifícalo con herramientas/lint o
   con cualquier calculadora WCAG antes de entregar.

   [data-tema="marca"] {
     --fondo: #FFFFFF;          base clara u oscura según la marca
     --fondo-alt: #F4F2EE;      un paso más oscuro (claro) o más claro (oscuro)
     --superficie: #FFFFFF;
     --superficie-alt: #F8F7F4;
     --texto: #161616;
     --texto-suave: #4D4D4D;
     --texto-tenue: #6B6B6B;
     --acento: #0B6E4F;         color principal de la marca
     --acento-texto: #FFFFFF;   blanco o casi negro, el que dé ≥ 4.5:1
     --cta: #F2A900;            opcional: CTA en color de contraste
     --cta-texto: #1A1300;
     --borde: #E4E1DA;
     --borde-fuerte: #CBC6BB;
     --foco: #0B6E4F;
     --fuente-titular: "Familia de la marca", var(--fuente-cuerpo);
     color-scheme: light;
   }
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 0ms;
    --dur-media: 0ms;
    --dur-lenta: 0ms;
    --desplazamiento-revelar: 0px;
  }
}