/* Estilo específico para los <h2> dentro de la clase .subtitulo_form */
.subtitulo_form h2 {
    font-family: 'Playfair Display', serif; /* Fuente elegante y moderna */
    font-weight: bold; /* Fuente gruesa */
    font-size: 28px; /* Tamaño de la fuente */
    color: #333; /* Color de la fuente */
    text-align: center; /* Centrado del título */
    margin-bottom: 15px; /* Margen inferior */
    position: relative; /* Necesario si agregamos líneas o decoraciones */
  }

  .titulo_form {
    position: relative; /* Necesario para colocar la raya debajo del título */
    text-align: center !important;
    padding-bottom: 10px; /* Espacio entre el título y la línea */
    margin-bottom: 20px; /* Margen inferior */
    font-weight: bold; /* Hace el texto más grueso */
  }
  
  .titulo_form::after {
    content: ""; /* Necesario para generar la línea */
    position: absolute;
    bottom: 0; /* Coloca la línea en la parte inferior */
    left: 50%; /* Coloca el inicio de la línea al 50% */
    width: 50%; /* Hace que la línea sea un 50% del ancho del título */
    height: 3px; /* Grosor de la línea */
    background: #000000; /* Gradiente para un efecto elegante */
    transform: translateX(-50%); /* Centra la línea respecto al título */
  }

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    text-align: center;
}

.modal-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.modal-message {
    font-size: 16px;
    margin-bottom: 20px;
}

.modal-link {
    color: #007bff;
    text-decoration: none;
}

.modal-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 16px;
    font-size: 16px;
    border-radius: 3px;
    cursor: pointer;
}

.hide-button {
    display: none;
}

/* Animacion carga */

/****** Animación Carga de Página ********/
#contenedor_carga {
    background: white;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 100000;
    display: none;  /* Manténlo oculto inicialmente */
    justify-content: center;
    align-items: center;
    display: flex;  /* Usar Flexbox para centrar el contenido */
}

#carga {
    border: 13px solid #ccc;
    border-top-color: #e30613;
    border-top-style: groove;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    position: absolute;
    animation: girar 1.5s linear infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contenedor-logo {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;  /* Hace el contenedor circular */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10; /* Asegura que la imagen esté por encima del círculo de carga */
}

.contenedor-logo > img {
    width: 100%;  /* Ocupa todo el ancho del contenedor */
    height: 100%; /* Ocupa toda la altura del contenedor */
    object-fit: cover;  /* Ajusta la imagen dentro del círculo sin distorsionarla */
}

@keyframes girar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


#contenedor_carga {
    display: none;
}