/* Video de fondo para los heroes de las páginas de servicio.
 *
 * Archivo aparte a propósito, igual que landing-ciudad.css: main.css se compila
 * desde public/assets/scss y no queremos meter un paso de build en esto.
 *
 * Cómo está pensado, en orden de importancia:
 *   1. El video es un ADORNO. Si no carga, si el navegador no lo deja
 *      reproducir o si el usuario pidió menos animación, la página se ve como
 *      hoy: la imagen de fondo del hero sigue ahí abajo.
 *   2. Esa imagen de fondo es el póster (primer cuadro del propio video), así
 *      que no hay salto visual cuando el video arranca y solo se descarga una
 *      imagen, no dos.
 *   3. En móvil NO se carga el video. Ahí el costo de datos no se justifica y
 *      es donde el rendimiento está más apretado.
 */

.hv-hero {
  position: relative;
  overflow: hidden;
}

.hv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Arranca invisible y aparece cuando ya hay imagen: evita el parpadeo negro
     del primer cuadro sobre el póster. La clase la pone hero-video.js. */
  opacity: 0;
  transition: opacity .6s ease-in;
  pointer-events: none;
}

.hv-video.hv-lista {
  opacity: 1;
}

/* Capa oscura: los clips de la Tierra y el abstracto son más claros que el
   campo de estrellas que había antes, y el texto del hero es blanco. */
.hv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 28, 46, .78) 0%, rgba(0, 28, 46, .55) 45%, rgba(0, 28, 46, .35) 100%);
  pointer-events: none;
}

/* El contenido del hero, por encima del video y de la capa oscura. */
.hv-hero > .contenido,
.hv-hero > .container {
  position: relative;
  z-index: 2;
}

/* Pósters: sustituyen al banner anterior y pesan bastante menos. */
.rs-sec1.hv-hero {
  background-image: url(../img/heroes/hero-redes.jpg);
}

.ga-sec1.hv-hero {
  background-image: url(../img/heroes/hero-ads.jpg);
}

.ecomerce_section01.hv-hero {
  background-image: url(../img/heroes/hero-ecommerce.jpg);
}

/* Sin video en móvil ni tablet: se queda el póster. */
@media (max-width: 991px) {
  .hv-video {
    display: none;
  }
}

/* Y sin video para quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .hv-video {
    display: none;
  }
}