/* ============================================================
   tokens.css · VISIONLOVERS · Sistema de diseño VL 2.0 (26/09/2026: 1.0 de Cowork/Design + la marca neón)
   Las variables de Sergio, ordenadas y completadas. Es el ÚNICO sitio
   donde vive un color, un tamaño o una sombra. Todo lo demás usa var().
   El panel de accesibilidad (accesibilidad.css, programación que se
   queda) REDEFINE estas mismas variables bajo html[data-vl-…]: por eso
   aquí no hay ni un píxel escrito fuera de una variable.
   Cero !important. Móvil primero. Comentado en español.
   ============================================================ */
:root {
  /* 26/09 (revisión de diseño): el anillo de foco de Woodmart (base-accessibility.css) carga después que el nuestro con la misma
     especificidad; en vez de pelear, sus variables toman los valores del sistema: foco azul sólido de 3 px en toda la web. */
  --wd-otl-width: var(--vl-focus-width);
  --wd-otl-style: solid;
  --wd-otl-color: var(--vl-focus);
  /* ---- Marca ---- */
  --vl-primary: #d946ef;          /* rosa vivo: SOLO adornos, nunca bajo texto (3,46 sobre blanco) */
  --vl-primary-light: #f5d5f0;    /* fondo de chips */
  --vl-primary-dark: #a91b6f;     /* el rosa que se lee: eyebrows, palabra destacada (6,83) */
  --vl-secondary: #066aab;        /* el azul de acción: botón principal, enlaces, foco (5,74 con blanco) */
  --vl-secondary-light: #e8f2ff;
  --vl-secondary-dark: #035377;   /* hover del botón principal (8,37) */
  --vl-on-color: #ffffff;         /* letra sobre azul, rosa oscuro y pie */
  --vl-primary-rgb: 217, 70, 239;
  --vl-secondary-rgb: 6, 106, 171;

  /* ---- Fondos ---- */
  --vl-bg: #ffffff;
  --vl-bg-soft: #faf8ff;
  --vl-bg-gray: #f5f7fb;
  --vl-bg-hero: #f4ecff;          /* el lila del hero */
  --vl-bg-card: #ffffff;

  /* ---- Texto (todos pasan 4,5:1 sobre los 4 fondos claros) ---- */
  --vl-text: #0f172a;
  --vl-text-muted: #475569;       /* AJUSTADO: antes #64748b (4,14 sobre el lila) */
  --vl-text-light: #5b6779;       /* AJUSTADO: antes #94a3b8 (2,56) */

  /* ---- Bordes ---- */
  --vl-border: #dce1e7;
  --vl-border-strong: #b8c2cf;    /* NUEVO: bordes que llevan significado (3,0:1 mínimo sobre blanco → medido 2,1: solo decorativo; los campos usan --vl-border-field) */
  --vl-border-field: #8593a6;     /* NUEVO: borde de campos de formulario, 3,1:1 sobre blanco (WCAG 1.4.11) */
  --vl-border-brand: #f7dcf9;

  /* ---- Estados (siempre con icono o palabra, nunca solo color) ---- */
  --vl-success: #15803d;  --vl-success-bg: #e9f9ee;
  --vl-warning: #9a3412;  --vl-warning-bg: #fff4e5;
  --vl-danger:  #b91c1c;  --vl-danger-bg:  #fef2f2;
  --vl-info:    #035377;  --vl-info-bg:    #e8f2ff;

  /* ---- Pie ---- */
  --vl-footer-bg: #001f3b; --vl-footer-bg-deep: #00192f;
  --vl-footer-text: #e5f0ff; --vl-footer-muted: #cbd5f5;

  /* ---- Foco ---- */
  --vl-focus: #066aab;
  --vl-focus-width: 3px;

  /* ---- Espacios ---- */
  --vl-space-xs: 4px; --vl-space-sm: 8px; --vl-space-md: 16px; --vl-space-lg: 24px;
  --vl-space-xl: 32px; --vl-space-2xl: 48px; --vl-space-3xl: 72px;
  --vl-touch: 48px;               /* alto mínimo de todo lo que se toca */
  --vl-container: 1180px;
  --vl-container-text: 720px;     /* NUEVO: ancho de lectura (≈ 68 caracteres) */
  --vl-gutter: 16px;              /* margen lateral móvil; 24 desde 768 (base.css) */

  /* ---- Radios ---- */
  --vl-radius-sm: 8px; --vl-radius-md: 12px; --vl-radius-lg: 18px; --vl-radius-pill: 999px;

  /* ---- Sombras ---- */
  --vl-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --vl-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08);
  --vl-shadow-md: 0 10px 28px rgba(15, 23, 42, 0.12);
  --vl-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.16);

  /* ---- Movimiento ---- */
  --vl-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --vl-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --vl-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --vl-lift: -2px;                /* lo que sube una tarjeta al pasar el ratón; 0 con menos movimiento */

  /* ---- Tipografía: móvil primero. Escritorio en base.css (768+) ---- */
  --font-cuerpo: "Inter", "Inter Relleno", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-titulos: "Manrope", "Manrope Relleno", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* VL 1.1 · decisión de Sergio 24/09: Manrope (antes: "Yantramanav", system-ui, -apple-system, BlinkMacSystemFont, sans-serif). Cargar el .woff2 local o Google Fonts: Manrope 600/700/800 */
  --vl-font-h1: 32px;      --vl-lh-h1: 1.12;
  --vl-font-h2: 26px;      --vl-lh-h2: 1.2;
  --vl-font-h3: 20px;      --vl-lh-h3: 1.3;
  --vl-font-h4: 18px;      --vl-lh-h4: 1.35;
  --vl-font-body: 17px;    --vl-lh-body: 1.6;      /* nunca menos de 17 */
  --vl-font-small: 15px;   --vl-lh-small: 1.55;    /* nunca menos de 15 */
  --vl-font-caption: 14px; /* solo contadores y etiquetas */
  --vl-font-eyebrow: 13px; /* solo la línea EN MAYÚSCULAS sobre un título */
  --vl-font-boton: 16px;
  --vl-font-precio: 36px;

  /* ---- VL 2.0 · LA MARCA: el rosa de «Lovers» y el brillo neón en 3 capas (26/09/2026, orden de Sergio «sí o sí»; Claude Code en la nube, D2/F2)
     Receta medida en socialvideohub y pasada a los rosas de VisionLovers. El neón (#d946ef) SOLO adorna: halos, aros, iconos, subrayados,
     manchas de luz. Nunca debajo de un texto (3,46:1 sobre blanco). El texto rosa va siempre en --vl-primary-dark (6,83:1). ---- */
  --vl-neon: #d946ef;                                   /* = --vl-primary; nombre corto para las capas */
  --vl-neon-rgb: 217, 70, 239;
  --vl-neon-suave: #fdf2fb;                             /* fondo del sello rosa (texto #a91b6f encima: 6,27) */
  --vl-halo: 0 10px 30px rgba(15, 23, 42, 0.10), 0 8px 32px rgba(var(--vl-neon-rgb), 0.20), 0 0 0 1px rgba(var(--vl-neon-rgb), 0.28);   /* capa 1: tarjetas */
  --vl-halo-fuerte: 0 14px 40px rgba(15, 23, 42, 0.12), 0 10px 44px rgba(var(--vl-neon-rgb), 0.30), 0 0 0 1px rgba(var(--vl-neon-rgb), 0.45);
  --vl-aro: 0 0 0 1px var(--vl-neon), 0 0 0 4px rgba(var(--vl-neon-rgb), 0.15);   /* capa 2: botones secundarios */
  --vl-aro-fuerte: 0 0 0 1px var(--vl-neon), 0 0 0 5px rgba(var(--vl-neon-rgb), 0.28);
  --vl-mancha: rgba(var(--vl-neon-rgb), 0.22);          /* capa 3: la mancha de luz de fondo (blur 60 px) */
  --vl-mancha-blur: 60px;
  --vl-radius-xl: 24px;                                 /* tarjetas con halo: 24–30 */
  --vl-radius-2xl: 30px;
  --vl-radius-aro: 14px;                                /* botones secundarios con aro */
  --vl-transition-neon: 120ms ease-out;                 /* el brillo cambia en 120 ms; 0 con menos movimiento */
  --vl-sello-1-bg: #e8f2ff;  --vl-sello-1-texto: #035377;   /* Verificada (7,41) */
  --vl-sello-2-bg: #fdf2fb;  --vl-sello-2-texto: #a91b6f;   /* Destacada (6,27), aro neón */
  --vl-sello-0-bg: #f5f7fb;  --vl-sello-0-texto: #475569;   /* Sin verificar (7,07) */
  --vl-skeleton: #eef1f6;                               /* estado «cargando» */

  /* ---- Cabecera (objetivo del encargo: móvil ≤ 120, pegada ≤ 64) ---- */
  --vl-header-h: 60px;            /* fila del logo */
  --vl-header-icons-h: 56px;      /* barra de iconos móvil → 116 en total */
  --vl-header-sticky-h: 60px;     /* pegada: solo la fila del logo, más compacta */
  --vl-header-desktop-h: 76px;
}

/* Contraste alto (lo activa el panel de accesibilidad con data-vl-contraste="alto";
   accesibilidad.css ya redefine los tokens: aquí solo se declara el juego que usará). */
:root {
  --vl-hc-text: #000000; --vl-hc-bg: #ffffff; --vl-hc-link: #003d80; --vl-hc-border: #000000;
}

/* Menos movimiento: preferencia del sistema o del panel (data-vl-quieto). Sin !important:
   se anulan los tokens, no las reglas. */
@media (prefers-reduced-motion: reduce) {
  :root { --vl-transition-fast: 0ms; --vl-transition-normal: 0ms; --vl-transition-slow: 0ms; --vl-lift: 0px; --vl-transition-neon: 0ms; }
}
html[data-vl-quieto="si"] { --vl-transition-fast: 0ms; --vl-transition-normal: 0ms; --vl-transition-slow: 0ms; --vl-lift: 0px; --vl-transition-neon: 0ms; }