/* Tokens v2 (oscuro y moderno). Landing propia, carpeta luis-y-tona. 2026-10-15.
   2026-10-16: tema 3 "azul y menta" integrado como base (antes temas/tema-3.css, ahora en temas-descartados/).
   Conserva todos los nombres de starter/css/tokens.css; añade los propios del proyecto.
   Contraste medido con scripts/contrast.mjs (ver 03-sistema-visual.md, sección 8).
   Los colores *-on-* son el RESULTADO calculado de una capa translúcida sobre un fondo dado:
   solo existen para medir contraste; en CSS se usa la versión rgba correspondiente. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("../fonts/rethink-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("../fonts/rethink-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* ---------- Color (nombres del starter) ---------- */
  --color-bg: #070A14;              /* negro azulado, nunca #000 */
  --color-surface: #0E1426;         /* un tono arriba: secciones densas, chips opacos, ventana */
  --color-text: #E9EDF8;            /* texto principal, blanco frío sin llegar a #fff */
  --color-text-muted: #A3ADC9;      /* secundario; cumple 4.5:1 incluso sobre vidrio en el peor fondo */
  --color-primary: #2B4DFF;         /* azul rey: SOLO relleno (botones, líneas, brillos). Nunca texto */
  --color-primary-contrast: #FFFFFF;/* texto sobre azul rey */
  --color-accent: var(--color-link);/* "accent" del starter = azul claro (texto). La menta (--color-acento-2) solo decora */
  --color-border: #222A44;          /* borde sutil decorativo (= #9DB0FF al 14 % sobre surface) */
  --color-focus: #9DB0FF;           /* anillo de foco: azul claro, sin acento cálido */
  --color-focus-on-primary: #FFFFFF;/* anillo interior de foco en botones azul rey (doble anillo) */
  --color-error: #FFFFFF;           /* error = blanco puro + icono + borde 2 px + texto. Sin rojo (ver doc) */

  /* ---------- Color (añadidos) ---------- */
  --color-surface-2: #141B33;       /* elevado: líneas activas de la calculadora, hover de tarjeta opaca */
  --color-field: #0A0F1E;           /* fondo de campos y barra de direcciones (hundido) */
  --color-text-strong: #FFFFFF;     /* titulares h1/h2 y cifras */
  --color-link: #9DB0FF;            /* azul claro: enlaces y texto azul sobre fondo oscuro */
  --color-link-hover: #C4D0FF;
  --color-primary-hover: #3A5BFF;   /* más luz + más brillo */
  --color-primary-active: #2440E6;  /* hundido */
  --color-border-strong: #5B6894;   /* borde de controles (campo, casilla, stepper, botón secundario): 3:1 */
  --color-border-subtle-bg: #1C2135;/* borde decorativo sobre bg */
  --color-disabled-bg: #141B33;
  --color-disabled-text: #7F89A6;
  --color-secondary-hover: #161B2C; /* = #9DB0FF al 10 % sobre bg */

  /* Escena del hero (decorativo, aria-hidden) */
  --color-skeleton-1: #1A2340;      /* bloques del esqueleto gris */
  --color-skeleton-2: #26304F;
  --color-grid-line: rgba(157, 176, 255, 0.10);
  --color-grid-line-strong: rgba(157, 176, 255, 0.22);

  /* Translúcidos (se usan en CSS) */
  --glass-bg: rgba(14, 20, 38, 0.82);         /* tarjeta vidrio: surface al 82 % */
  --glass-border: rgba(157, 176, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.06);/* filo superior interior */
  --glass-blur: 16px;
  --header-bg: rgba(7, 10, 20, 0.86);
  --color-border-subtle: rgba(157, 176, 255, 0.14);
  --color-primary-glow: rgba(43, 77, 255, 0.55);
  --color-primary-haze: rgba(43, 77, 255, 0.18);

  /* Tema 3 "azul y menta" (base desde 2026-10-16). Segundo acento: SOLO brillos y detalles, nunca texto */
  --color-acento-2: #2EE6A8;                    /* menta */
  --color-acento-2-haze: rgba(46, 230, 168, 0.12);
  /* Fondo vivo (capa fija detrás de todo): a = azul rey, b = menta, c = verde agua #22C7C7, d = azul rey profundo */
  --fv-a: rgba(43, 77, 255, 0.60);   --fv-a-medio: rgba(43, 77, 255, 0.24);
  --fv-b: rgba(46, 230, 168, 0.34);  --fv-b-medio: rgba(46, 230, 168, 0.12);
  --fv-c: rgba(34, 199, 199, 0.32);  --fv-c-medio: rgba(34, 199, 199, 0.11);
  --fv-d: rgba(43, 77, 255, 0.54);   --fv-d-medio: rgba(43, 77, 255, 0.20);
  --fv-velo: rgba(7, 10, 20, 0.78);             /* velo de "La transformación" sobre el final de la escena */
  --fv-superficie: rgba(14, 20, 38, 0.74);      /* preguntas frecuentes: surface translúcida sobre el fondo vivo */

  /* Resultado de mezcla (solo para medir; peor y mejor caso) */
  --color-glass-on-bg: #0D1223;      /* vidrio .82 sobre #070A14 (fondo más oscuro) */
  --color-glass-on-primary: #131E4D; /* vidrio .82 sobre #2B4DFF (relleno más claro de la escena) */
  --color-glass-on-photo: #393E4D;   /* vidrio .82 sobre #FFFFFF (peor caso: zona blanca de la foto) */
  --color-glass-hover: #1E2A5B;      /* hover de vidrio (+ azul claro 8 %) sobre el peor caso azul */
  --color-header-on-primary: #0C1335;/* header .86 sobre azul rey */
  --color-header-on-photo: #2A2C35;  /* header .86 sobre blanco */
  --color-secondary-hover-surface: #1C243C;

  /* ---------- Tipografía ---------- */
  --font-display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Rethink Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.8125rem;                                   /* 13 px: rótulos, notas legales */
  --text-sm: 0.9375rem;                                   /* 15 px: ayudas, barra de direcciones */
  --text-base: 1.0625rem;                                 /* 17 px: cuerpo */
  --text-md: 1.25rem;                                     /* 20 px: entradilla, h4 */
  --text-lg: 1.5rem;                                      /* 24 px: h3, total de la calculadora */
  --text-xl: clamp(1.75rem, 1.4rem + 1.2vw, 2rem);        /* 28-32 px: titulares de tarjeta grandes */
  --text-2xl: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);       /* 36-48 px: h2 */
  --text-3xl: clamp(2.75rem, 1.7rem + 4.4vw, 4rem);       /* 44-64 px: titular de cierre */
  --text-4xl: clamp(3rem, 1.2rem + 7.6vw, 6rem);          /* 48-96 px: h1 del hero (LCP) */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-display: 700;
  --leading-tight: 0.98;
  --leading-snug: 1.15;
  --leading-body: 1.6;
  --tracking-display: -0.035em;
  --tracking-h2: -0.025em;
  --tracking-body: 0;
  --tracking-label: 0.01em;   /* rótulos en minúscula/oración; nunca mayúsculas espaciadas */
  --measure: 64ch;
  --measure-narrow: 44ch;

  /* ---------- Espaciado (base 8 px) ---------- */
  --space-1: 0.5rem;   /* 8 */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2rem;     /* 32 */
  --space-6: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-12: 6rem;    /* 96 */
  --space-16: 8rem;    /* 128 */
  --space-24: 12rem;   /* 192 */
  --space-half: 0.25rem; /* 4: solo dentro de componentes (icono-texto) */

  /* Ritmo entre secciones (variado a propósito) */
  --section-tight: clamp(4rem, 2.5rem + 6vw, 6rem);     /* FAQ, a medida */
  --section-normal: clamp(6rem, 4rem + 8vw, 9rem);      /* transformación, ejemplos */
  --section-air: clamp(8rem, 5rem + 12vw, 12rem);       /* cómo funciona, calculadora, cierre */

  /* Columna */
  --container: 72rem;          /* 1152 px: ancho máximo de la rejilla */
  --container-wide: 84rem;     /* hero y ejemplos a sangre controlada */
  --column: 44rem;             /* columna centrada de texto */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* ---------- Forma ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-window: 14px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Sombras y brillos (solo azul rey, nunca degradado morado) */
  --shadow-card: inset 0 1px 0 var(--glass-highlight), 0 24px 64px -24px rgba(0, 0, 0, 0.7);
  --shadow-window: 0 40px 120px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(157, 176, 255, 0.12);
  --glow-primary: 0 8px 32px -6px var(--color-primary-glow);
  --glow-primary-strong: 0 0 0 1px rgba(157, 176, 255, 0.35), 0 10px 44px -4px rgba(43, 77, 255, 0.75);
  --glow-flash: 0 0 0 2px rgba(170, 255, 225, 0.5), 0 0 48px 8px rgba(46, 230, 168, 0.40);   /* destello menta */
  --haze-hero:
    radial-gradient(40% 35% at 75% 65%, rgba(46, 230, 168, 0.08), transparent 70%),
    radial-gradient(60% 50% at 45% 60%, rgba(43, 77, 255, 0.18), transparent 70%);

  /* z-index */
  --z-base: 0;
  --z-scene: 1;        /* capas de la ventana: 1-4 en su propio contexto */
  --z-raised: 10;      /* tarjetas sobre la escena */
  --z-header: 100;
  --z-overlay: 200;
  --z-skip: 300;

  /* ---------- Movimiento (nombres del starter) ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 560ms;

  /* Movimiento (añadidos) */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.34, 1.4, 0.64, 1); /* encaje de capa: sobrepasa 2-3 % */
  --reveal-distance: 16px;
  --reveal-duration: 560ms;
  --stagger: 90ms;

  /* Escena "Capas" */
  --scene-length: 250svh;           /* recorrido total; contenedor sticky de 100svh */
  --scene-length-mobile: 170svh;
  --scene-perspective: 1600px;
  --scene-origin: 50% 40%;
  --scene-tilt-x: 22deg;            /* inclinación inicial (rotateX) */
  --scene-tilt-y: -28deg;           /* rotateY */
  --scene-tilt-z: 6deg;             /* rotateZ */
  --layer-gap-z: 110px;             /* separación entre capas en Z al inicio (0, 110, 220, 330) */
  --layer-drift: 24px;              /* desfase lateral por capa al inicio */
  --layer-gap-y-mobile: 28px;       /* móvil: capas desplazadas en vertical, sin 3D */
  --phase-assemble-end: 0.40;       /* 0-40 %: titular sale, ventana gira, capas encajan */
  --phase-type-end: 0.70;           /* 40-70 %: la barra escribe */
  --phase-enter-end: 1;             /* 70-100 %: la cámara entra por la barra */
  --layer-snap-1: 0.16;             /* momento de encaje de cada capa (fracción del recorrido) */
  --layer-snap-2: 0.24;
  --layer-snap-3: 0.32;
  --layer-snap-4: 0.40;
  --flash-window: 0.03;             /* el destello dura 3 % del recorrido por capa */
  --flash-duration: 320ms;          /* versión por tiempo (fallback por IntersectionObserver) */
  --headline-exit-y: -12vh;         /* el titular sube y se desvanece en 0-30 % */
  --type-chars: 21;                 /* "tutienda.com/producto" */
  --camera-scale-end: 14;           /* escala final al atravesar la barra */
  --pointer-tilt-max: 6deg;
  --pointer-smoothing: 0.08;        /* interpolación por cuadro del paralaje */
  --progress-line-width: 2px;
}

@media (max-width: 47.99rem) {
  :root {
    --scene-perspective: none;
    --scene-tilt-x: 0deg;
    --scene-tilt-y: 0deg;
    --scene-tilt-z: 0deg;
    --layer-gap-z: 0px;
    --camera-scale-end: 6;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --reveal-distance: 0px;
    --reveal-duration: 0ms;
    --stagger: 0ms;
    --flash-duration: 0ms;
    --pointer-tilt-max: 0deg;
  }
}