* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: none; /* Elimina el color de fondo */
}

header {
    background: #000; /* El mismo color del video para la transición */
    color: #fff;
    padding: 1em 0;
    text-align: center;
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    height: 150px; /* Altura fija para el encabezado */
}

.logo-container {
    width: 100%;
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    height: 100%; /* Ocupa toda la altura del encabezado */
}

.logo {
    max-height: 200%; /* Ajusta el tamaño del logo para hacerlo más grande */
    height: auto;
}

main {
    flex: 1;
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    position: relative; /* Necesario para que los elementos dentro de main se posicionen relativos a este */
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Asegura que el video no se desborde */
    z-index: -1; /* Coloca el video detrás de otros elementos */
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el video cubra toda el área del contenedor */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Sombreado semi-transparente */
    z-index: 1; /* Coloca la capa de sombreado por encima del video */
}

.container {
    max-width: 500px; /* Define el ancho máximo del contenedor */
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    color: #6c6b6b46;
    text-align: center; /* Alinea el contenido a la izquierda */
    position: relative; /* Necesario para asegurarse de que el contenido esté por encima del video */
    background: rgba(255, 255, 255, 0.1); /* Fondo semi-transparente blanco para el contenedor */
    z-index: 2; /* Coloca el contenido por encima de la capa de sombreado */
    margin-bottom: 20px; /* Espacio adicional para evitar superposición con el footer */
}

section {
    margin-bottom: 20px;
    background: rgba(91, 90, 90, 0); /* Fondo semi-transparente blanco para las secciones */
    padding: 20px;  
    border-radius: 10px;
    color: #ffffff; /* Texto en negro para contraste */
    width: 100%; /* Asegura que las secciones ocupen todo el ancho del contenedor */
}
.section-link {
    color: #fff; /* Cambia el color del enlace según tus necesidades */
    text-decoration: none; /* Elimina el subrayado del enlace */
    transition: color 0.3s; /* Añade una transición suave para el cambio de color */
}

.section-link:hover {
    color: #ffdd57; /* Cambia el color del enlace al pasar el cursor por encima */
}

footer {
    background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente para el contenedor */
    color: #fff;
    text-align: center;
    padding: 1em 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}