/* Titulo */

.titulo {
    text-align: center;
    /* Centra el texto horizontalmente dentro del div */
    font-family: 'Gothic Ultra OT';
    /* Aplica la tipografía personalizada */
    padding-top: 100px;
    /* Espacio arriba del texto (luego sobreescrito por padding-top: 0;) */
    color: #d4af37;
    /* Color dorado para el texto */
    padding-top: 0;
    /* Anula el padding-top anterior */
    margin: 0;
    /* Elimina margen alrededor del título */
}


/* Contenedor del titulo */

.container-titulo {
    display: inline-block;
    /* Hace que el div tenga ancho solo del contenido */
    text-align: center;
    /* Centra el contenido textual dentro del div */
    background-color: #000000;
    /* Fondo negro sólido */
    padding: 20px;
    /* Espacio interno alrededor del contenido */
    height: auto;
    /* Altura automática según el contenido */
    width: auto;
    /* Ancho automático según el contenido */
    border-radius: 35%;
    /* Bordes redondeados con radio del 35% (curvatura pronunciada) */
}


/* Video de fondo */

.video-background {
    position: fixed;
    /* Fija el video en la pantalla para que no se mueva al hacer scroll */
    top: 0;
    /* Posición superior */
    left: 0;
    /* Posición izquierda */
    min-width: 100%;
    /* Ancho mínimo 85% del viewport */
    min-height: 100%;
    /* Altura mínima 100% del viewport */
    object-fit: cover;
    /* El video se escala para cubrir el área manteniendo proporción */
    z-index: -1;
    /* Se posiciona detrás de otros elementos */
    align-items: center;
    /* No tiene efecto aquí porque no es flex container */
    justify-content: center;
    /* Tampoco tiene efecto por la misma razón */
}


/* Estilo general del body */

body {
    text-align: center;
    /* Centra el texto dentro del body */
}


/* Estilos formulario */

.formulario {
    padding: 10%;
    /* Espacio interno del 10% del contenedor padre (puede generar mucho espacio) */
    margin-top: 10px;
    /* Separación arriba respecto a otros elementos */
    display: flex;
    /* Activa flexbox para distribuir hijos */
    flex-direction: column;
    /* Alinea los hijos en columna (vertical) */
    gap: 10px;
    /* Espacio entre elementos hijos */
    align-items: center;
    /* Centra horizontalmente los hijos */
    margin-bottom: 5%;
}

.formulario input {
    padding: 10px;
    /* Espacio interno para texto en inputs */
    width: 250px;
    /* Ancho fijo de los inputs */
    border: none;
    /* Sin borde */
    border-radius: 8px;
    /* Bordes redondeados */
    font-size: 16px;
    /* Tamaño de letra legible */
}

.formulario button {
    padding: 10px 20px;
    /* Espacio interno para el botón */
    width: 150px;
    /* Ancho fijo del botón */
    background-color: #d4af37;
    /* Color dorado de fondo */
    border: none;
    /* Sin borde */
    border-radius: 8px;
    /* Bordes redondeados */
    font-weight: bold;
    /* Texto en negrita */
    font-size: 16px;
    /* Tamaño de letra */
    color: black;
    /* Color del texto */
    cursor: pointer;
    /* Cambia el cursor a mano cuando se pasa por encima */
    transition: background-color 0.3s ease;
    /* Animación suave al cambiar color */
}

.formulario button:hover {
    background-color: #b38e20;
    /* Cambia el fondo a un dorado más oscuro al pasar el mouse */
}

a {
    font-size: x-large;
    color: #000000;
}

h3 {
    font-size: x-large;
    color: #000000;
}

.login {
    width: auto;
    height: auto;
    background-color: rgba(255, 255, 255, 0.7);
    /* Blanco con 70% opacidad */
    border-radius: 10px;
    /* Opcional: bordes redondeados */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    /* Opcional: sombra para destacar */
    display: inline-block;
    /* Hace que el div tenga ancho solo del contenido */
    text-align: center;
    /* Centra el contenido textual dentro del div */
}