/* ==================================== */
/* 1. RESET Y CONFIGURACIÓN GENERAL     */
/* ==================================== */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evita barras de desplazamiento */
    font-family: Arial, sans-serif;
    color: #fff;
}

/* ==================================== */
/* 2. CONTENEDOR DEL VIDEO DE FONDO     */
/* ==================================== */
.video-background {
    position: fixed; /* Fija el video en la pantalla */
    top: 0;
    left: 0;
    width: 100vw;   /* CLAVE: 100% del Ancho de la Ventana de Visualización */
    height: 100vh;  /* CLAVE: 100% del Alto de la Ventana de Visualización */
    z-index: -1;
    overflow: hidden;
}

.video-background video {
    /* CLAVE: Asegura que el video siempre cubra su contenedor */
    object-fit: cover; /* **Ajuste Importante** - Obliga al video a cubrir el 100% */
    width: 100%;       /* Ocupa el 100% del ancho del contenedor */
    height: 100%;      /* Ocupa el 100% del alto del contenedor */
    position: absolute;
    top: 0;
    left: 0;
    /* Eliminamos el transform: translate(-50%, -50%); ya que object-fit hace el trabajo */
}

/* ==================================== */
/* 3. CAPA SEMI-TRANSPARENTE (OVERLAY)  */
/* ==================================== */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Negro con 40% de opacidad */
    z-index: 0;
}

/* ==================================== */
/* 4. CONTENIDO (TEXTO Y LOGO)          */
/* ==================================== */
.content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.content h1 {
    font-size: 4em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
}

.content .logo {
    /* Posicionamiento del logo en la esquina */
    width: 150px;
    height: auto;
    position: fixed; /* Usamos fixed para fijarlo a la ventana de visualización */
    bottom: 30px;
    right: 30px;
    opacity: 0.8;
}

/* ==================================== */
/* 5. MEDIA QUERIES (RESPONSIVE)        */
/* ==================================== */
@media (max-width: 768px) {
    .content h1 {
        font-size: 2.5em;
    }

    .content .logo {
        width: 100px;
        bottom: 15px;
        right: 15px;
    }
}