:root {



    --color-Primario: #1D3A38;



    --color-Secundario: #FF9310;



    --color-Terceario: #A4D53A;



    --color-Cuarto: #2C2B33;



    --color-textoA: #6a6a6b;



    --color-Quinto: #FAF2E5;



}







html {

    scroll-behavior: smooth;

}









* {


    
    margin: 0;



    padding: 0;



    box-sizing: border-box;



    font-family: "Montserrat", sans-serif;







}




/*---------Formulario-----------*/

body {
    background-color: var(--color-Quinto);
}

button {



    padding: 10px 20px;



    font-size: 16px;



    border: none;



    background: var(--color-Secundario);



    color: white;



    border-radius: 8px;



    cursor: pointer;

    font-weight: 800;



}







button:hover {



    background: var(--color-Terceario);



}

.contSectionForm {



    background-color: var(--color-Quinto);
    display: flex;
    justify-content: center;






}



.contContacto {

    max-width: 1400px;

    display: flex;



    justify-content: center;








    align-items: center;



    gap: 2rem;



    padding: 3rem;







}



form {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.contIzq {



    width: 40%;
    display: flex;

    gap: 1rem;
    flex-direction: column;


}



.formH1 {



    color: var(--color-Primario);

    font-size: 4rem;



}



.textForm {



    font-size: 1.4rem;



    font-weight: 600;



    color: var(--color-Primario);



}



.lista-beneficios {

    display: flex;

    flex-direction: column;



}



.fomr_beneficios {

    all: unset;

    color: var(--color-Secundario);

    font-weight: 600;

}



.contformTitulo {

    width: 600px;

    padding: 10px;

}



.form_h2 {

    text-align: center;

    color: var(--color-Primario);

    padding: 10px;

    font-weight: 600;

}



.form_p {



    text-align: center;

}



.contRadio {

    display: flex;

    gap: 2rem;

    padding: 1rem;

}







input[type="radio"] {

    display: none;

}



.contOpcion {

    border: 2px solid var(--color-Primario);

    border-radius: 10px;

    padding: 1rem;

    color: var(--color-Primario);

    cursor: pointer;

    display: block;

}



input[type="radio"]:checked+.contOpcion {

    background-color: var(--color-Terceario);

    color: var(--color-Quinto);

}



.opcion_h5 {



    font-size: 2.5rem;

    font-weight: 900;

    color: var(--color-Primario);

}





.contForm {







    padding: 1rem;







    display: flex;



    justify-content: center;



    gap: 1rem;



}







.form_3,



.form_1 {



    display: flex;



    flex-direction: column;



    gap: 1rem;



}







.form_1 {



    margin-bottom: 1rem;



}







.mail {



    width: 300px;



}











.contForm_1_3 {



    display: flex;



    gap: 1rem;



}



.contButtonForm {



    display: flex;



    width: 100%;



    justify-content: center;



    align-items: center;







}















textarea {



    color: var(--color-textoA);



    width: 20rem;



    height: 10rem;







}







textarea,



input,



.contFormulario {



    border: 2px solid var(--color-Primario);



    border-radius: 0.8rem;



    color: var(--color-textoA);



}







.contContactoIco a {



    color: var(--color-Primario);



}







input,



textarea {



    border-radius: 0;



    padding-left: 2px;



}







input:focus {



    background-color: #FF9310;



}















label {



    color: var(--color-Primario);



    font-weight: 600;







}







input:focus {



    color: var(--color-Primario);



    font-weight: 600;







}







input,



select {



    background-color: transparent;



    font-weight: 600;



    color: var(--color-Primario);







}







select {



    border: 2px solid var(--color-Primario);



}







option {



    background-color: var(--color-Quinto);



    color: var(--color-Primario);



    font-weight: 600;



}







select:hover {



    background-color: var(--color-Secundario);



    font-weight: 600;







}







.botonFormulario {



    background-color: var(--color-Primario);



    font-weight: 600;



}







.botonFormulario:hover {



    background-color: var(--color-Secundario);



}

.formAviso {
    font-size: 0.9rem;
}

/*---------------------------------GRACIAS----------------------*/





.contGracias{
  

        display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    justify-content: center;
}

.contTotalGracias {

    max-width: 1400px;
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;



}

.logoIMG{
    width: 150px;
    height: auto;
    padding-bottom: 3rem;
    margin-top: 2rem;
}

.graciasIMG {

    width: 100%;

    height: auto;

}

.contTituloGracias {

    background-color:#1d3a38bb;

    border-radius: 10px;

    position: absolute;

    width: 100%;

    padding: 0.4rem;

}

.graciasH1 {

    color: var(--color-Terceario);

    text-align: center;

    padding-bottom: 1rem;
    font-size: 1.5rem;

}

.graciasH2 {

    text-align: center;

    color: var(--color-Quinto);
    font-size: 0.9rem;

}



@media(max-width:1200px) {



    .contIzq {



        width: 100%;



    }


    .contContacto {
        flex-wrap: wrap;
    }


}







@media(max-width:960px) {











    .section_1 {



        flex-wrap: wrap;



        flex-direction: column;



        align-items: center;



        gap: 2rem;



    }







    .section_2 {



        flex-wrap: wrap;



        flex-direction: column;



        align-items: center;







    }







    .lineaV {



        width: 300px;



        height: 2px;



    }







    .cotInfo {



        align-items: center;



    }







    .cotInfo p {



        text-align: center;



    }







    .contTitulo {



        align-items: center;



    }







    .contTotalSec3 {



        flex-direction: column-reverse;



        align-items: center;



    }







    .contInfoSec3 {



        align-items: center;



    }







    .contInfoSec3 h2 {



        text-align: center;



    }







    .contInfoSec3 p {



        text-align: center;



    }



















}

@media (max-width:800px) {

    

    .contTituloGracias {

        width: 80%;

    }

}



@media(max-width:720px) {



    form {







        flex-direction: column;



    }

    .graciasH2 {

        font-size: 1.3rem;

    }

    .graciasH1 {

        line-height: 1.1;

        font-size: 1.8rem;

    }

    .contTituloGracias {

        width: 80%;

    }



}



@media(max-width:560px) {



    .contForm_1_3 {







        flex-direction: column;



    }



    .formH1,

    .textForm {



        text-align: center;







    }







}







@media(max-width:500px) {


    .addons-grid {

        grid-template-columns: repeat(auto-fit, minmax(183px, 1fr));

    }

.logoIMG{
    width: 50%;
    padding-bottom: 3rem;
}
 .graciasIMG{
    width: 75%;
 } 

    .cotInfo {



        width: 100%;



    }







    .contInfoSec2 {



        width: 100%;



    }







    h1 {

        padding: 20px;

        font-size: 2rem;





    }







    .TituloH2 {



        font-size: 2rem;



        margin-top: -6px;



    }







    .TituloH2A {



        font-size: 2.5rem;



        margin-bottom: -6px;



    }







    .TituloH2B {



        font-size: 1.4rem;

        padding: 20px;

        text-align: left;



    }







    .cotInfo p {



        width: 100%;



    }







    iframe {



        width: 300px;

    }



    .padi {

        padding-bottom: 2.1rem;

    }

    /*galeria*/



    .swiper-slide {



        flex-direction: column-reverse;



        width: 300px;







    }







    .contDatosGaleria {



        margin-bottom: 2rem;



    }







    .section_4 {







        max-width: 100%;



        width: 400px;



        margin: 0 auto;



        /* Para centrarlo en la pantalla */



        overflow: hidden;



    }







    .swiper-slide img {



        width: 70%;



    }







    .contDatosGaleria a {



        font-size: 1.1rem;







    }







    .contDatosGaleria p {



        text-align: center;



    }







    .textSec4 {



        width: 100%;



    }



    /*-----section_2A-----*/



    h4 {

        font-size: 1.8rem;

        color: var(--color-Secundario);

        background-color: transparent;



    }



    .contIMG {

        gap: 2rem;

    }



    .IMG {

        width: 180px;

    }



    .comparacion {

        padding: 0 10px;

    }



    .contTituloSec_2A {



        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

        background-color: var(--color-Secundario);

        padding: 10px;

    }



    .contTituloSec_2A h3 {

        text-align: center;

    }



    .contimg2 {

        gap: 1.5rem;

    }

    /*-----------------CARD--------------*/
    .tituloItem {
        text-align: center;
    }

    .card {
        width: 290px;
        height: 750px;
    }

    .item_plan {
        font-size: 0.9rem;
    }

    .card p {
        font-size: 0.8rem;
    }




    /*-------------FORMULARIO-----------------*/

    .contRadio,
    .contForm {

        flex-wrap: wrap;

    }

    .contRadio {

        justify-content: center;

    }

    .formH1 {

        font-size: 2.5rem;

    }

    .textForm {

        font-size: 1.1rem;

    }

    .contformTitulo {

        width: 300px;

        padding: 10px;

    }



    .form_1 {

        width: 100%;

    }





    /*-----------------gracias---------------*/



    .graciasH2 {

        font-size: 1rem;
        color: var(--color-Primario);


    }

    .graciasH1 {

        line-height: 1.1;

        font-size: 1.5rem;

        color: var(--color-Primario);

    }

   
    .contTotalGracias{
        flex-direction: column;
      
    }

    .contTituloGracias {

        padding: 0.5rem;
        width: 100%;
        position: relative;
       background: #ff000000;
        

    }





}













@media (max-width: 320px) {



    .TituloH2 {



        font-size: 1.6rem;



        margin-top: -6px;



    }







    .section_4 {







        max-width: 100%;



        width: 300px;



        margin: 0 auto;



        /* Para centrarlo en la pantalla */



        overflow: hidden;



    }







    .swiper-slide img {



        width: 60%;



    }



}