/*
 * Video de fondo del hero.
 *
 * Va en hoja aparte a proposito: styles.css sigue siendo byte a byte el fichero que
 * entrego diseno, y .bg-fill se queda debajo en vez de desaparecer. Cumple tres
 * funciones y por eso no se borra:
 *   1. pinta al instante mientras el video aun no ha llegado, asi el LCP no depende de el;
 *   2. es el fallback si el navegador no reproduce video;
 *   3. es lo unico que se ve con prefers-reduced-data, donde el video no se descarga.
 */

:root {
  /*
   * El velo, definido UNA vez.
   *
   * Reproduce el perfil de luminosidad del degradado original: claro arriba, donde va
   * el titular en negro, y marino abajo, donde va el lede en blanco. Sin el, el titular
   * cae sobre la tablet encendida y no se lee.
   *
   * Se declara como variable porque hay dos caminos que lo necesitan identico —el video
   * y el poster de prefers-reduced-motion— y tenerlo duplicado ya provoco una vez que
   * uno de los dos quedara demasiado claro para leer el titular.
   */
  --bts-velo: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.80) 20%,
    rgba(255, 255, 255, 0.68) 40%,
    rgba(255, 255, 255, 0.38) 54%,
    rgba(11, 26, 38, 0.34) 68%,
    rgba(11, 26, 38, 0.72) 85%,
    rgba(11, 26, 38, 0.92) 100%
  );
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bts-velo);
}

/*
 * Conexiones lentas y usuarios que piden menos datos: no se descarga el video ni el
 * poster, y se ve el degradado original — exactamente lo que habia antes de este cambio.
 */
@media (prefers-reduced-data: reduce) {
  .bg-video { display: none; }
  .bg-scrim { display: none; }
}

/*
 * Quien pide menos movimiento no ve el bucle: ve el mismo encuadre congelado, con el
 * MISMO velo. Lo unico que cambia es que el fotograma es estatico.
 */
@media (prefers-reduced-motion: reduce) {
  .bg-video { display: none; }
  .bg-scrim {
    background: var(--bts-velo), var(--bts-poster) center / cover no-repeat;
  }
}

/*
 * En movil no se sirve el video.
 *
 * Medido con PageSpeed el 22-ago-2026: con el video, el Performance movil baja de
 * 100 a 97 y el LCP sube de 1,20 s a 1,57 s. En un telefono el hero es texto casi
 * entero y el video se ve recortado a una franja; el degradado original cuesta cero
 * y se ve igual de bien. Por encima de 1000 px, que es el mismo corte donde el diseno
 * pasa a dos columnas, si se carga.
 */
@media (max-width: 999px) {
  .bg-video { display: none; }
  .bg-scrim { display: none; }
}