/* Aseguramos que el body y html cubran toda la pantalla sin márgenes ni rellenos */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Elimina las barras de desplazamiento */
}

/* El video debe ocupar todo el ancho y la altura de la pantalla */
video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;       /* El video cubre el 100% del ancho */
    height: 100%;      /* El video cubre el 100% de la altura */
    object-fit: cover; /* El video cubre toda la pantalla sin distorsionarse */
    z-index: -1;       /* Coloca el video detrás de otros contenidos, si los hay */
}

/* Overlay: capa transparente encima del video */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Color de fondo semitransparente (negro con opacidad) */
    z-index: 1; /* Asegura que el overlay esté encima del video */
}

/* Contenedor del logo centrado en la pantalla */
.logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Ajusta el logo para que esté exactamente en el centro */
    z-index: 10; /* Asegura que el logo esté por encima del video y el overlay */
}

/* Estilo del logo */
.logo {
    width: 750px; /* Ajusta el tamaño del logo */
    height: auto; /* Mantiene la proporción del logo */
    opacity: 0.9; /* Añade algo de transparencia al logo si es necesario */
}

/* Estilos para el pie de página */
footer {
    position: absolute;
    bottom: 0;        /* El pie de página se coloca en la parte inferior */
    left: 0;
    width: 100%;      /* El pie de página ocupa todo el ancho */
    background-color: rgba(0, 0, 0, 0.1); /* Fondo oscuro semitransparente */
    color: white;     /* Color del texto en blanco */
    text-align: center; /* Centra el texto */
    padding: 10px 0;   /* Espaciado en el pie de página */
    font-size: 14px;   /* Tamaño de fuente pequeño */
    z-index: 10;      /* Asegura que el pie de página esté sobre otros contenidos */
    font-family: 'Roboto', sans-serif; /* Cambia la fuente a Roboto */
}

/* Media Queries para ajustar en diferentes dispositivos */
@media (max-width: 768px) {
    .logo {
        width: 120px; /* Redimensiona el logo en pantallas más pequeñas */
    }
    footer {
        font-size: 12px; /* Reduce el tamaño de la fuente en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    .logo {
        width: 100px; /* Redimensiona aún más el logo para pantallas más pequeñas */
    }
    footer {
        font-size: 10px; /* Aún más pequeño el texto en pantallas muy pequeñas */
    }
}