/* Estilos generales */
body, html {
    height: 100%;
    margin: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(to bottom, #ffffff 0%, #eaeaea 100%); /* Gradiente sutil para un fondo más dinámico */
    color: #333; /* Color de texto oscuro para un contraste óptimo */
    overflow-x: hidden; /* Previene el desbordamiento horizontal */
}

/* Estilos del encabezado */
header {
    text-align: center;
    padding: 30px 0; /* Aumenta el espaciado para un look más aireado */
    color: #0056b3; /* Color distintivo para el encabezado */
    background: linear-gradient(to right, #f0f8ff, #dbefff); /* Gradiente suave horizontal para el encabezado */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada para dar profundidad */
}

header h1 {
    margin: 0;
    font-size: 2.5rem; /* Aumenta el tamaño de fuente para mayor impacto */
    font-weight: bold; /* Fuente en negrita para mayor presencia */
}

header p {
    margin: 15px 0 0; /* Aumenta el espaciado para separar claramente del título */
    font-size: 1.2rem; /* Tamaño de fuente ligeramente mayor para mejor legibilidad */
    color: #007bff; /* Usa un color más vibrante para un toque de color */
}

/* Estilos del contenido principal */
main {
    display: flex;
    flex-direction: column-reverse;
    align-items: center; /* Centra los contenidos */
    padding: 20px; /* Añade un poco de padding para evitar que el contenido toque los bordes */
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2); /* Aumenta la sombra para una mayor sensación de elevación */
}


/* Estilos del reproductor de video */
#player {
    width: 100%; /* Ancho completo para aprovechar el espacio */
    aspect-ratio: 9 / 16; /* Cambiado para mantener la proporción vertical */
    background: #000; /* Fondo oscuro para destacar el contenido del video */
    margin: 0 auto; /* Centrado y con margen uniforme */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
    height: auto;
}


#opciones {
    width: calc(100% - 40px); /* Ajuste del ancho considerando el padding */
    max-width: 640px; /* Alineación con el ancho del reproductor */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Distribución equitativa de los botones */
    gap: 20px; /* Aumenta el espacio entre botones para una mejor separación */
    margin: 30px auto; /* Aumenta el margen para más espacio alrededor */
    background: linear-gradient(145deg, #e9ecef, #dee2e6); /* Gradiente sutil para un fondo más dinámico */
    border-radius: 15px; /* Bordes más redondeados para un aspecto moderno y suave */
    padding: 20px; /* Aumenta el espaciado interno para un aspecto más amplio */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada para una mayor sensación de profundidad */
    text-align: center; /* Asegura que el texto de los botones esté centrado */
    transition: all 0.3s ease; /* Transición suave para los efectos de hover y focus */
}

#opciones:hover, #opciones:focus-within {
    transform: scale(1.02); /* Ligeramente más grande al pasar el ratón o enfocar para dar feedback */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* Sombra más intensa en hover/focus para mayor profundidad */
}


button {
    padding: 15px 30px; /* Aumenta el espaciado interno para un aspecto más prominente */
    font-size: 1.5rem; /* Tamaño legible y accesible */
    color: white; /* Contraste alto para legibilidad */
    background-image: linear-gradient(145deg, #007bff, #0056b3); /* Gradiente para un efecto más dinámico */
    border: none; /* Sin bordes para un diseño limpio */
    border-radius: 10px; /* Bordes más redondeados para un aspecto más suave */
    cursor: pointer; /* Indica interactividad */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Transiciones suaves para feedback */
    margin: 10px; /* Separación entre botones para evitar la sensación de hacinamiento */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave para dar profundidad */
    outline: none; /* Elimina el contorno al hacer clic en algunos navegadores */
}

button:hover {
    background-image: linear-gradient(145deg, #0056b3, #007bff); /* Cambia el gradiente al pasar el ratón para un efecto dinámico */
    transform: translateY(-5px); /* Eleva ligeramente el botón para dar sensación de interactividad */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* Aumenta la sombra para dar la impresión de elevación */
}

button:active {
    background-image: linear-gradient(145deg, #0056b3, #004099); /* Oscurece el botón al hacer clic para un feedback táctil */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); /* Reduce la sombra para simular el botón siendo presionado */
    transform: translateY(-2px); /* Reduce la elevación para simular presión */
}


footer {
    text-align: center;
    padding: 25px 0; /* Aumenta el espaciado para un aspecto más aireado */
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%); /* Gradiente sutil de blanco a gris */
    width: 100%; /* Asegura que ocupa todo el ancho disponible */
    font-size: 1rem; /* Tamaño de fuente ajustado para mejor legibilidad */
    color: #007bff; /* Color de texto para enlazar con el esquema de colores del botón */
    border-top: 1px solid #dee2e6; /* Línea sutil para separar el pie de página del contenido */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05); /* Sombra suave en la parte superior para dar profundidad */
    font-family: Arial, sans-serif; /* Asegura la consistencia de la tipografía */
}