/* ============================================================================
   LAYOUT › VIDEO DE FONDO GLOBAL  ⭐
   ----------------------------------------------------------------------------
   El video NO vive dentro del hero: vive en un contenedor con position:fixed
   pegado al viewport. Por eso está presente en TODA la landing, de arriba a
   abajo, siempre, aunque scrollees hasta el footer.
   Todo el resto del contenido va por encima (z-index mayor).
   ============================================================================ */

.video-fondo {
  position: fixed;
  inset: 0;                                       /* atajo de top/right/bottom/left: 0 */
  z-index: -2;                                    /* detrás de absolutamente todo */
  overflow: hidden;
  background: var(--color-negro);                 /* color mientras el video carga */
}

.video-fondo video {
  width: 100%;
  height: 100%;
  object-fit: cover;                              /* llena la pantalla sin deformarse */
  /* Se baja el brillo para que el texto blanco siempre tenga contraste
     suficiente por encima (requisito de accesibilidad WCAG). */
  filter: brightness(.55) contrast(1.1) saturate(.9);
}

/* Velo degradado sobre el video: oscurece arriba y abajo para que el header y
   el texto se lean sin importar qué frame del video esté pasando. */
.video-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .75) 0%,
    rgba(0, 0, 0, .35) 35%,
    rgba(0, 0, 0, .55) 70%,
    rgba(0, 0, 0, .90) 100%
  );
}