/* Modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Permanece en la misma posición al hacer scroll */
    z-index: 3001; /* Z-index mayor que el botón para que aparezca encima */
    left: 0;
    top: 0;
    width: 100vw; /* Ancho completo */
    height: 100vh; /* Alto completo */
    overflow: auto; /* Habilita el scroll si el contenido es demasiado grande */
    background-color: rgba(0,0,0,0.6); /* Fondo semi-transparente */
    justify-content: center;
    align-items: center;
    padding:0!important;
    margin:0!important;
   
}

.modal-content {
    background: #fff;
    margin: 0!important; /* Centra el contenido en el modal */
    padding: 0!important;
    border-radius: 8px;
    width: 100%;
    max-width: 100vw;
    height: auto;;
    position: relative; /* Para posicionar el botón de cerrar */
   
}

iframe{
    margin:0;
    padding:0;
}

.close-button {
    color: #aaa;
    float: right; /* Alinea a la derecha */
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute; /* Posiciona la "X" en la esquina */
    top: 10px;
    right: 16px;
    z-index:10000;
}

.close-button:hover,
.close-button:focus {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
    /* En pantallas pequeñas (móviles) */
    .wpgb-area-top-1 {
        display: none!important; /* Oculta el formulario principal */
    }

    .modal-content .wpgb-area-top-1 {
        display: block!important; /* Asegura que el formulario se muestre dentro del modal en móvil */
    }
}

@media (min-width: 769px) {
    /* En pantallas grandes (desktop) */
    .modal {
        display: none !important; /* Asegura que el modal esté oculto en desktop */
    }
}