/* ================================
   RESET & BASE
================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

/* ================================
   FULLSCREEN VIDEO WRAPPER
================================ */
.video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

/* ================================
   VIDEO ELEMENT
   Cubre toda la pantalla manteniendo
   la proporción original del vídeo.
   Sin barras negras en ningún dispositivo.
================================ */
.video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Mínimo que ocupe el 100% de ancho y alto */
  min-width: 100%;
  min-height: 100%;

  /* Mantiene la proporción y cubre como object-fit: cover */
  width: auto;
  height: auto;

  /* Fallback moderno (soportado en todos los navegadores actuales) */
  object-fit: cover;
  object-position: center center;
}

/* ================================
   RESPONSIVE — MÓVIL
   En pantallas pequeñas nos aseguramos
   de que no quede espacio sin cubrir.
================================ */
@media (max-width: 768px) {
  .video-bg {
    width: 100%;
    height: 100%;
  }
}