/* ==========================================================================
   AR+ — tokens de diseño (colores, tipografía, espacios, radios, sombras,
   duraciones y curvas). Fuente única: tools/tokens_src.py, el mismo origen
   que el sistema de diseño AR+. Cambia un valor aquí y cambia en toda la web.
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Color */
  --bg: #0C0C16; /* Fondo de página: el mismo negro azulado del logo. */
  --bg-deep: #06060C; /* Negro más profundo: pantalla de intro, barras de cine (letterbox), viñetas y fondo detrás de videos. */
  --surface: #151520; /* Superficie base: tarjetas, menú con blur, guía de programación, filas del catálogo. */
  --surface-raised: #1E1E2C; /* Superficie elevada: modal de detalle, campo de búsqueda, tooltip, tarjeta en hover. */
  --line: #FFFFFF1A; /* Hairlines y divisores decorativos (no basta para bordes de controles). */
  --line-strong: #FFFFFF59; /* Borde de controles (botón fantasma, buscador, pestañas): 3.2:1 sobre bg, surface y surface-raised. */
  --ink: #FFFFFF; /* Texto principal y letras "AR" del logo, sobre bg, surface y surface-raised (16:1 o más). */
  --ink-muted: #A1A1AA; /* Texto secundario (subtítulos, descripciones) sobre bg, surface y surface-raised (6.4:1 o más). */
  --ink-subtle: #8B8B98; /* Metadatos y leyendas pequeñas (año, género, duración) sobre bg, surface y surface-raised (4.9:1 o más). */
  --red: #E11D48; /* Rojo de marca, valor exacto del logo (ala superior y "+"). */
  --red-press: #BE123C; /* Rojo presionado: estado :active del botón principal y sombras del degradado. */
  --pink: #FF5A78; /* Rosa: final del degradado de marca, brillos y luces. */
  --pink-soft: #FF8FA3; /* Rosa suave: detalles finos, texto pequeño de acento y anillo de foco sobre cualquier superficie oscura (7.6:1 o más). */
  --on-red: #FFFFFF; /* Texto e íconos sobre relleno red (4.7:1). */
  --logo-wing-2: #E74A6D; /* Solo logo: ala central. */
  --logo-feather: #ED7791; /* Solo logo: pluma inferior (trazo fino con barbas). */
  --live: #FF2D55; /* Luz de En vivo (rojo intenso): punto EN VIVO pulsante, línea de "ahora" en la guía y brillo del televisor. */
  --kids-night: #0F1C4D; /* Fondo de Infantil (cielo de noche azul). */
  --kids-sky: #4CC3FF; /* Infantil: planetas, nubes y tarjetas. */
  --kids-sun: #FFD23F; /* Infantil: estrellas, sol y sello de control parental. */
  --kids-mint: #3DDC97; /* Infantil: planetas y tarjetas. */
  --family-dusk: #2A140E; /* Fondo de Familia (atardecer cálido). */
  --family-amber: #FFB547; /* Familia: luz ámbar del atardecer, brillo de la TV y acentos de texto sobre family-dusk (9.9:1). */
  --family-ember: #FF7A3D; /* Familia: degradado del atardecer y halo del sol. */
  --scrim: #06060CCC; /* Velo detrás del modal y del menú móvil, junto con desenfoque (blur-modal). */

  /* Tipografía */
  --font-display: "Outfit", "Sora", system-ui, sans-serif;
  --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espacios */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  /* Radios */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-full: 9999px;

  /* Sombras y brillos */
  --shadow-card: 0 30px 60px -30px #000000E6, 0 0 0 1px #FFFFFF0F;
  --shadow-lift: 0 40px 90px -20px #000000F2, 0 0 0 1px #FFFFFF1F;
  --glow-red: 0 0 40px #E11D4873, 0 0 120px #E11D4838;
  --glow-live: 0 0 0 4px #FF2D5533, 0 0 18px #FF2D55;
  --focus-ring: 0 0 0 2px #0C0C16, 0 0 0 4px #FF8FA3;

  /* Degradados */
  --gradient-brand: linear-gradient(135deg, #E11D48 0%, #FF5A78 100%);
  --gradient-live: radial-gradient(60% 60% at 50% 40%, #FF2D5559 0%, #0C0C1600 70%);
  --gradient-kids: linear-gradient(180deg, #0F1C4D 0%, #1B3A8C 100%);
  --gradient-family: linear-gradient(180deg, #2A140E 0%, #5A2A12 55%, #FF7A3D 140%);

  /* Duraciones */
  --dur-instant: 120ms;
  --dur-fast: 240ms;
  --dur-glitch: 300ms;
  --dur-base: 600ms;
  --dur-slow: 900ms;
  --dur-cine: 1400ms;
  --dur-intro: 2600ms;
  --dur-zap: 4000ms;

  /* Curvas */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cine: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;

  /* Capas */
  --z-content: 1;
  --z-nav: 50;
  --z-fab: 60;
  --z-letterbox: 70;
  --z-modal: 100;
  --z-cursor: 150;
  --z-intro: 200;
  --z-grain: 300;

  /* Desenfoques */
  --blur-nav: 16px;
  --blur-modal: 24px;
  --blur-focus: 14px;

  /* Derivados de maquetación (no son tokens de marca) */
  --gutter: var(--space-4);
  --section-pad: var(--space-9);
  --max-w: 1320px;
  --nav-h: 76px;
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-6); }
}
@media (min-width: 1100px) {
  :root { --gutter: var(--space-7); --section-pad: var(--space-10); }
}

/* Estilos de texto (mismos nombres que en el sistema de diseño; en la web escalan con clamp) */
.t-display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.6rem + 6.2vw, 7.5rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.t-display-l {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.7rem + 4.2vw, 5.5rem);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.t-display-m {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.t-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.t-title-s {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.t-numeral {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.2rem + 3.6vw, 6rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.t-label {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.t-lead {
  font-family: var(--font-text);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0;
}
.t-body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
}
.t-body-s {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0;
}
.t-caption {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.t-button {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
}