/* Banner general */
.banner {
    position: relative;
    width: 100%;
    height: 100vh; /* ocupa toda la pantalla */
    background: url('tu-imagen-banner.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: flex-end; /* empuja el formulario a la derecha */
    align-items: center; /* centrado vertical */
    padding-right: 40px; /* espacio a la derecha */
}

/* Caja del formulario */
.form-banner {
    background: rgba(255, 255, 255, 0.95);
    padding: 25px;
    border-radius: 12px;
    width: 320px;  /* tamaño fijo */
    box-shadow: 0px 4px 12px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
}

/* Título */
.form-banner h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #0077ff;
}

/* Formulario vertical */
.form-banner form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-banner label {
    text-align: left;
    font-weight: bold;
    font-size: 14px;
    color: #333;
}

.form-banner input,
.form-banner select,
.form-banner textarea {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* Botón */
.form-banner button {
    background: #0077ff;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.form-banner button:hover {
    background: #005bb5;
}

/* Contenedor del banner */
.banner-content {
    display: flex;
    justify-content: space-between; /* separa texto y formulario */
    align-items: center;
    padding: 40px;
}

/* Texto del banner */
.banner-text {
    max-width: 50%;
    color: white; /* puedes ajustarlo según tu fondo */
}

/* Formulario */
.form-banner {
    background: rgba(255, 255, 255, 0.95);
    padding: 25px;
    border-radius: 12px;
    max-width: 380px;
    text-align: center;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.3);
}

.form-banner h3 {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #0077ff;
}

.form-banner form input,
.form-banner form select,
.form-banner form textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.form-banner form button {
    background: #0077ff;
    color: white;
    padding: 12px;
    width: 100%;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.form-banner form button:hover {
    background: #005bb5;
}


.form-banner {
    background: rgba(255, 255, 255, 0.9);
    padding: 25px;
    border-radius: 12px;
    max-width: 400px;
    margin: 20px auto;
    text-align: center;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.3);
}

.form-banner h3 {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #0077ff;
}

.form-banner form input,
.form-banner form select,
.form-banner form textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.form-banner form button {
    background: #0077ff;
    color: white;
    padding: 12px;
    width: 100%;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.form-banner form button:hover {
    background: #005bb5;
}


/* Botón flotante */
/* Botón flotante de inscripción */
#btn-inscripcion {
    position: fixed;
    bottom: 90px; /* arriba del WhatsApp */
    right: 20px;
    background: #0077ff;
    color: white;
    padding: 14px 20px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    z-index: 10000;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.3);
    transition: 0.3s;
}

#btn-inscripcion:hover {
    background: #005bb5;
}

/* Fondo semitransparente */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: flex-end;
    z-index: 20000;
}

/* Caja del formulario tipo sidebar */
.modal-box {
    background: #fff;
    width: 350px;
    height: 100%;
    padding: 25px;
    border-radius: 0;
    box-shadow: -4px 0px 20px rgba(0,0,0,0.4);
    position: relative;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

/* Cuando está activo */
.modal-overlay.active .modal-box {
    transform: translateX(0);
}

/* Botón de cerrar */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

/* Inputs */
.modal-box form input,
.modal-box form select,
.modal-box form button {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* Botón de enviar */
.modal-box form button {
    background: #0077ff;
    color: #fff;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.modal-box form button:hover {
    background: #005bb5;
}

:root {

    --color-primary: #6420aa;
    --color-success: #45ffca;;
    --color-warning: #f7c94b;
    --color-danger: #f75842;
    --color-danger-variant: rgba(247, 88, 66, 0.4);
    --color-white: #fff;
    --color-light: rgba(255, 255, 255, 0.7);
    --color-black: #000;
    --color-bg: #1f2641;
    --color-bg1: #2e3267;
    --color-bg2: #424890;
    --container-widht-lg: 80%;
    --container-widht-md: 90%;
    --container-widht-sm: 94%;
    --fondo: url(../images/light-bg.png);
    --transition: all 400ms ease;
}


#form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10vh;
    height: 80%;
    width: 100%;
}

.form-title{
     color: #6420aa ;
     text-align: center;
    
}

form {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--fondo);
    background-size: cover;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    width: 100%;
    height: 75%;
    max-width: 1000px; /* Asegura que no exceda el ancho de la pantalla */
}

#imageSection {
    margin-right: 20px;
    flex-shrink: 0; /* Previene que la imagen se encoja */
}

#imageSection img {
    width: 235px; /* Tamaño más grande */
    height: auto;
    border-radius: 8px;
}

.form-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Alineación horizontal al centro */
    justify-content: center; /* Alineación vertical al centro */
    width: 100%;
    gap: 30px; /* Espacio entre los controles del formulario */
}

.form-section input, .form-section select {
    margin-bottom: 5px;
    padding: 10px;
    width: 100%; /* Ancho más grande */
    border: 3px solid #ccc;
    border-radius: 6px;
}

.label-text{
    color: #000;
    margin-bottom: 10px; /* Añade un margen inferior para el label */
}

.cont-form-button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    height: 90px;
}
.seleccion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Espacio entre cada par de radio button y label */
    padding: 20px;
}

.seleccion input[type="radio"] {
    display: inline-block;
    margin-right: 0%; /* Espacio entre el radio button y el label */
}

.seleccion label {
    display: inline-block;
    /* Espacio entre cada par de radio button y label */
}

.seleccion .cont-form-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.form-section button {
    padding: 10px 20px;
    background-color: #6420aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: auto; /* Ancho automático basado en el contenido */
}

.form-section button:hover {
    background-color: #6420aa;
}

.hidden {
    display: none; /* Mantiene ocultos los elementos hasta que se necesiten */
    gap: 30px;
}

/* Ajustes Responsivos */
@media (max-width: 768px) {
    form {
        flex-direction: column;
        padding: 10px;
    }

    #imageSection {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .form-section {
        width: 100%; /* Ajusta el ancho al 100% para dispositivos móviles */
    }

    .form-section input, .form-section select {
        width: 100%; /* Ancho completo */
    }

    .cont-form-button {
        width: 100%; /* Asegura que el contenedor de los botones se mantenga dentro */
    }

    #form-container {
        padding: 10px;
    }
}