/* Fondo 1, operadora */
/* .fondo1 {
    background-image: url('../images/clientes/fondo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 1000px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 20px; 
} */
.fondo1 {
    min-height: 100vh; /* Asegura que la altura mínima sea igual al viewport */
    margin: 0;
    padding: 0;
    background-image: url('../images/clientes/fondo.png'); /* Cambia esto por la ruta a la imagen de fondo */
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* Elimina el comportamiento fijo del fondo */
}

/* Formularios */
#form-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    background: rgba(255, 255, 255, 0.1); /* Ajusta la transparencia */
    padding: 20px;
    border-radius: 15px;
    margin-top: 5%;
}

.form-box {
    background-color: rgba(128, 128, 128, 0.7); /* Fondo gris con transparencia */
    border-radius: 15px;
    flex: 1;
    margin: 0 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}


@media (max-width: 1024px) {
    
    .fondo1 {
        min-height: 80vh; /* Asegura que la altura mínima sea igual al viewport */
        margin: 0;
        padding: 0;
        background-image: url('../images/clientes/fondo.png'); /* Cambia esto por la ruta a la imagen de fondo */
        background-size: cover;
        background-position: center;
        background-attachment: scroll; /* Elimina el comportamiento fijo del fondo */
    }
    
    #form-container {
        flex-direction: column;
        width: 100%;
        margin-top: 20% !important;
    }

    .form-box {
        margin-bottom: 20px;
    }

    .fondo1 {
        min-height: 100vh; /* Mantén el fondo responsivo en pantallas pequeñas */
        background-size: cover; /* Asegura que la imagen siga cubriendo el contenedor */
    }
}

@media (max-width: 768px) {
    #form-container {
        flex-direction: column;
        width: 100%;
        margin-top: 20% !important;
    }

    .form-box {
        margin-bottom: 20px;
    }

    .fondo1 {
        min-height: 100vh; /* Mantén el fondo responsivo en pantallas pequeñas */
        background-size: cover; /* Asegura que la imagen siga cubriendo el contenedor */
    }
}


@media (max-width: 540px) {
    .fondo1 {
        min-height: 100vh; /* Asegura que cubra toda la altura de la pantalla */
        background-size: cover; /* Asegura que el fondo cubra todo sin dejar espacios */
        background-position: center;
        background-attachment: scroll; /* Elimina el comportamiento fijo del fondo */
        /* background-repeat: no-repeat; */
    }

    #form-container {
        display: flex;
        flex-direction: column; /* Asegura que los formularios se apilen uno encima del otro */
        justify-content: center;
        align-items: center;
        width: 90%; /* Reduce el ancho del contenedor en pantallas pequeñas */
        background: rgba(255, 255, 255, 0.1); /* Ajusta la transparencia */
        padding: 10px;
        border-radius: 15px;
        margin-top: 5%;
    }

    .form-box {
        width: 100%; /* Asegura que los formularios ocupen todo el ancho disponible */
        margin-bottom: 20px; /* Añade espacio entre los formularios */
    }
}


@media (max-width: 430px) {
    #form-container {
        flex-direction: column;
        width: 100%;
        margin-top: 50% !important;
    }
}

@media (max-width: 414px) {
    #form-container {
        flex-direction: column;
        width: 100%;
        margin-top: 20% !important;
    }
}

@media (max-width: 375px) {
    #form-container {
        flex-direction: column;
        width: 100%;
        margin-top: 120% !important;
    }
}

/* REsponsives */

@media only screen and (max-width: 1024px) {
    
       
    /* Primera sección */

    /* Ajustes para .fondo1-soporte */
    .fondo1 {
        height: 800px; /* Reduce la altura en pantallas medianas */
        padding: 0 15px; /* Ajusta el padding lateral */
        max-width: 100%;
    }

     
    
}



    @media (max-width: 540px) {

        .fondo1 {
            height: 290px; /* Reduce la altura en pantallas medianas */
            padding: 0 15px; /* Ajusta el padding lateral */
            max-width: 100%;
            background-size: contain;
            
        }
            
        
    }

    @media (max-width: 450px) {

        
        .fondo1 {
            height: 230px; /* Reduce la altura en pantallas medianas */
            padding: 0 15px; /* Ajusta el padding lateral */
            max-width: 100%;
            background-size: cover;
        }
        
        

    }

    @media (max-width: 390px) {
        .btn-naranja-soporte {
            font-size: 13px; /* Reduce el tamaño de fuente */
            width: 250px; /* Ajusta el ancho del botón */
            height: 6% !important; /* Reduce la altura del botón */
            top: 20%; /* Ajusta la posición superior */
            margin-left: 500px; /* Ajusta la posición horizontal */
            padding: 10px;
        }

        .contenedor-boton2 {
            width: 100%; /* Reduce el ancho del contenedor */
            margin-top: 75px; /* Reduce el margen superior */
            margin-left: -2px; /* Alinea mejor el contenedor en pantallas pequeñas */
        }
    
        .btn-naranja2-soporte {
            font-size: 5px; /* Reduce el tamaño de fuente */
            height: 10%; /* Ajusta la altura del botón */
        }
    
        /* Ajustes para .contenedor-boton3 */
        .contenedor-boton3 {
            width: 100%; /* Reduce el ancho del contenedor */
            margin-left: 20%; /* Ajusta la posición en pantallas medianas */
            margin-top: 21%;
        }
    
        .btn-naranja3-soporte {
            font-size: 5px; /* Reduce el tamaño de fuente */
            height: 10%; /* Ajusta la altura del botón */
        }

    }
    @media (max-width: 375px) {

        
        .fondo1-soporte {
            height: 300px; /* Reduce la altura en pantallas medianas */
            padding: 0 15px; /* Ajusta el padding lateral */
            max-width: 100%;
        }
        
        .btn-naranja-soporte {
            font-size: 13px; /* Reduce el tamaño de fuente */
            width: 250px; /* Ajusta el ancho del botón */
            height: 6% !important; /* Reduce la altura del botón */
            top: 15%; /* Ajusta la posición superior */
            margin-left: 500px; /* Ajusta la posición horizontal */
            padding: 10px;
        }
        
        .overlay-text {
            padding: 40px; /* Reduce el padding interno */
            margin-top: 60%; /* Ajusta el margen superior */
            width: 100%; /* Expande el ancho para tabletas */
        }

        .overlay-text h1 {
            font-size: 15px; /* Ajusta el tamaño del título */
        }
    
        .overlay-text p {
            font-size: 12px; /* Ajusta el tamaño del párrafo */
        }

        /* Ajustes para .contenedor-boton2 */
    .contenedor-boton2 {
        width: 90%; /* Reduce el ancho del contenedor */
        margin-top: 75px; /* Reduce el margen superior */
        margin-left: -2px; /* Alinea mejor el contenedor en pantallas pequeñas */
    }

    .btn-naranja2-soporte {
        font-size: 5px; /* Reduce el tamaño de fuente */
        height: 10%; /* Ajusta la altura del botón */
    }

    /* Ajustes para .contenedor-boton3 */
    .contenedor-boton3 {
        width: 100%; /* Reduce el ancho del contenedor */
        margin-left: 20%; /* Ajusta la posición en pantallas medianas */
        margin-top: 21%;
    }

    .btn-naranja3-soporte {
        font-size: 5px; /* Reduce el tamaño de fuente */
        height: 10%; /* Ajusta la altura del botón */
    }

    }

    @media (max-width: 344px) {

        .btn-naranja-soporte {
            font-size: 13px; /* Reduce el tamaño de fuente */
            width: 250px; /* Ajusta el ancho del botón */
            height: 6% !important; /* Reduce la altura del botón */
            top: 20%; /* Ajusta la posición superior */
            margin-left: 480px; /* Ajusta la posición horizontal */
            padding: 10px;
        }
    }