/* Estilos generales */
body {
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Contenedor principal */
.container {
    text-align: center;
    margin-top: 50px;
    z-index: 10;
}

/* Logo */
img {
    max-width: 250px;
    margin-bottom: -20px;
    margin-top: -60px;
}

/* Títulos y textos */
h1 {
    font-size: 50px;
    color: black;
    margin: 10px 0;
}

.highlight {
    color: #007bff; /* Azul para resaltar */
}

.highlight-blue {
    color: #004aad; /* Resaltado azul oscuro */
}

/* Botón */
.button-container {
    margin-top: 40px;
}

.cta-button {
    background-color: #007bff; /* Color azul */
    color: white;
    padding: 15px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Mini sombra */
}

.cta-button:hover {
    background-color: #0056b3; /* Color azul más oscuro en hover */
    font-size: 25px
}

/* Sección del video */
.video-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    position: relative;
}

.video-container {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
    padding: 0; /* Sin padding */
    box-shadow: 0 0 20px #007bff; /* Efecto neón azul */
}

video {
    width: 100%;
    height: auto;
    border-radius: 0; /* Sin bordes */
}

/* Botón del video con texto más grande */
.video-label {
    margin-top: 450px;
    font-size: 26px; 
    color: black;
    font-weight: bold;
    text-align: center;
    padding: 10px 15px; 
    background-color: white;
    border-radius: 30px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
}

.video-label:hover {
    background-color: #f1f1f1;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
}

/* Ajustes para el video */
.video-container {
    display: flex;
    justify-content: center; /* Centra el video horizontalmente */
    align-items: center; /* Centra el video verticalmente */
    margin: 30px auto; /* Espaciado automático para que se mantenga centrado */
    max-width: 800px; /* Tamaño más amplio del video */
    height: 450px; /* Altura del video, ajusta según tus preferencias */
    box-shadow: 0px 0px 20px rgba(0, 0, 255, 0.5); /* Sombra de neón azul */
    border-radius: 10px; /* Bordes ligeramente redondeados */
    overflow: hidden; 
}

.video-container iframe {
    width: 100%;
    height: 100%; /* Asegúrate de que el iframe ocupe todo el espacio */
    border: none; /* Sin bordes */
}

.video-container {
    position: relative; /* Hace que el contenedor sea el referente para el posicionamiento absoluto */
    display: inline-block; /* Para ajustar el tamaño del contenedor al tamaño del video */
    margin-bottom: 20px; /* Espaciado inferior */
}

.btn {
    position: absolute; /* Posiciona el botón de manera absoluta */
    bottom: 10px; /* Ajusta la distancia desde el fondo del contenedor */
    left: 50%; /* Centra el botón horizontalmente */
    transform: translateX(-50%); /* Ajusta la posición del botón al centro */
    padding: 8px 16px; /* Espaciado interno */
    font-size: 14px; /* Tamaño de fuente */
    border: none; /* Sin bordes */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #007BFF; /* Color de fondo */
    color: white; /* Color del texto */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s; /* Transición suave al cambiar el color */
}

.btn:hover {
    background-color: #0056b3; /* Cambia el color de fondo al pasar el ratón */
}

.espacio-blanco {
    margin-top: 75px;
}

.logo-pequeño {
    width: 200px;
    height: 200px;
    margin: 5px;
}