: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;







}







body {







    display: flex;



    align-items: center;



    flex-direction: column;











}







.contTotal {



    display: flex;



    flex-direction: column;



    align-items: center;



    max-width: 960px;



    background-color: rgb(240, 240, 240);



    overflow: hidden;



}











.logoCabecera {



    padding: 20px;



    width: 200px;



}







.section_1 {







    display: flex;



    justify-content: center;



    background-image: url(../asset/img/fondo.png);



    background-size: inherit;



    background-color: #A2D33A;







    width: 100%;

    background-size: 74%;













}







.cotInfo {



    width: 480px;



    color: #ffffff;



    display: flex;



    flex-direction: column;



    gap: 1rem;



    padding: 15px;





    align-items: center;



}







.contTitulo {



    display: flex;



    flex-direction: column;



    align-items: flecx-start;

    gap: 1rem;



}







.TituloH2A {



    font-size: 3rem;



    font-weight: 600;



    margin-bottom: -10px;



}



.TituloH2B {

    font-size: 1.2rem;

    font-weight: 600;

    color: var(--color-Primario);

}



.TituloH2 {



    font-size: 2.4rem;



    font-weight: 600;



    margin-top: -10px;



}







h1 {



    font-size: 2.5rem;



    font-weight: 900;

    color: var(--color-Primario);



    text-align: center;





}











.cotInfo p {



    width: 80%;



    font-size: 1.3rem;



}







.contImgSec_1 {



    display: flex;



    align-items: center;



    gap: 2rem;







}



.ContUl {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    justify-content: center;

    align-items: center;

    padding: 2rem 1rem;



}





.iconLi {

    color: var(--color-Primario);

    font-size: 2.4rem;

    transition: transform 0.3s ease;

    display: inline-block;

    /* para que funcione bien el transform */



}



.section_1A_item {

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

    border-radius: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 170px;

    height: 250px;

    padding: 10px;

    gap: 20px;

    text-align: center;

    color: var(--color-Cuarto);

}



/* Cuando el mouse está sobre el li, agranda el icono */

li:hover .iconLi {

    transform: scale(1.4);

}



strong {

    color: var(--color-Primario);

}



.escaneo_qr {

    width: 100%;

}



.contImgSec_1A {



    display: flex;



    align-items: flex-start;



    gap: 1rem;







}







.imagenPrecio {



    width: 100%;



    height: auto;



}







.Qr {



    width: 100px;



    padding-top: 10px;



}







.imgSec_1 {



    width: 150px;



}







a {



    all: unset;



}







button {



    all: unset;



    cursor: pointer;



    background-color: #112D2A;



    color: #FF9310;



    padding: 8px;



    border-radius: 15px;



}







span {



    font-weight: 900;



}







.Setcion_contactar {



    width: 100%;



    display: flex;



    flex-direction: column;



    align-items: center;



    gap: 1rem;



    padding: 2rem;



    background-color: #112D2A;



}







.Setcion_contactar h2 {



    color: #FF9310;



}







.section_2 {



    display: flex;



    justify-content: center;



    gap: 3rem;



    padding: 1rem;



    align-items: center;



    width: 90%;







}











.contInfoSec2 {



    display: flex;



    flex-direction: column;



    align-items: center;



    text-align: center;



    gap: 1rem;



    color: #001800;



    width: 400px;







}







.contInfoSec2 h2 {



    font-weight: 500;



    letter-spacing: 1px;



    font-size: 2rem;



    color: #001800;







}







.contInfoSec2 img {



    width: 150px;







}







.naranja {



    background-color: #FF9310;



    padding: 10px;



    color: #001800;



}







.lineaV {



    background-color: #112D2A;



    width: 2px;



    height: 400px;



}







.contImgSec2 {



    display: flex;



    flex-direction: column;



    gap: 1rem;



    align-items: center;



}







.contInfosec2B {



    display: flex;



    flex-direction: column;



    align-items: center;



    color: #001800;







}







.contInfosec2B h3 {



    color: #FF9310;



    text-align: center;



}



/*---------Section 2 comparaciones VS-----------------------------------------------------*/







.contTituloSec_2AInfo {



    text-align: center;

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

    padding: 20px;

}



.contTituloSec_2AInfo h3 {

    text-align: center;

    color: var(--color-Quinto);

    font-size: 2.3rem;

    padding-bottom: 10px;

}



.contTituloSec_2AInfo p {

    font-weight: 600;

    color: var(--color-Quinto);

    font-size: 1.3rem;

}



.section_2A {

    margin-bottom: 2rem;



}



.contIMG {

    display: flex;

    justify-content: center;

    align-items: stretch;

    /* estira los hijos a la misma altura */

    gap: 4rem;

    position: relative;

    padding: 2rem 1rem;

}



h4 {

    font-size: 1.8rem;

    color: var(--color-Primario);

    text-align: center;



}





.contimg1 {

    display: flex;

    flex-direction: column;

    align-items: center;

    /* esto centra horizontalmente */

    justify-content: flex-start;

    width: 40%;

    text-align: center;

}



.contimg3 {

    gap: 2rem;

}



.contimg2 {

    gap: 2.5rem;

}



.IMG {

    width: 100%;

    height: auto;

    max-width: 300px;

    object-fit: contain;

}



/* Separador VS */

.vsSeparator {

    position: absolute;

    left: 50%;

    top: 0;

    height: 100%;

    border-left: 2px solid #bebebe;

}



.vsSeparator .vs {

    position: absolute;

    top: 50%;

    left: -17px;

    transform: translateY(-50%);

    background-color: #fff;

    border: 2px solid #bebebe;

    border-radius: 50%;

    width: 34px;

    height: 34px;

    text-align: center;

    line-height: 32px;

    font-weight: bold;

    color: #616161;

}



.comparativa {

    display: flex;

    flex-direction: column;

    gap: 2rem;

    padding: 0 20px;

}



.titulo_P {

    text-align: center;

    padding-bottom: 10px;



    font-size: 1.5rem;

}



.item {

    border-bottom: 1px solid #ddd;

    padding-bottom: 1rem;

}



.comparacion {

    display: flex;

    flex-direction: column;

    /* en mobile va una arriba del otro */

    gap: 1rem;

}



.col {

    background: #f9f9f9;

    padding: 1rem;

    border-radius: 10px;

}



/* Versión para pantallas grandes */

@media (min-width: 768px) {

    .comparacion {

        flex-direction: row;

        justify-content: space-between;

    }



    .col {

        width: 48%;

    }

}



/*----------------Section_2B------------------------------------*/

.section_2B {



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

    padding: 2rem 0;

}



.contTituloSec_2B {



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

    color: var(--color-Primario);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

    padding: 2rem;

}



.Sec_2BH2 {



    font-weight: 800;

    font-size: 2.5rem;

    text-align: center;

}



.Sec_2BP {

    width: 95%;

    text-align: center;

    font-weight: 600;

    font-size: 1.3rem;

}



.contCard {

    padding-top: 3rem;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 1rem;



}



.card {



    width: 400px;

    height: 800px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

    border: 1px solid var(--color-Secundario);

    border-radius: 10px;

    box-shadow: 5px 5px 5px #ffdda7;

    ;

    justify-content: space-between;



}



.card h3 {

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

    width: 100%;

    text-align: center;

    padding: 5px 0;

    color: var(--color-Quinto);

    border-radius: 10px 10px 0px 0px;

    font-size: 2rem;

}



.card h5 {

    color: var(--color-Primario);

    font-size: 3.8rem;

    text-align: center;

}



.card p {

    color: var(--color-Quinto);

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

    padding: 5px;

    text-align: center;

    font-size: 1.2rem;




}



.aclaracion {

    color: var(--color-Primario);

    font-size: 1.7rem;

    font-weight: 600;

}



.mes {

    font-size: 1rem;

    font-weight: 400;

}



.contItem {

    display: flex;

    flex-direction: column;



    gap: 1rem;





}



.item_plan {

    all: unset;

    font-size: 1.2rem;

    font-weight: 600;

    color: var(--color-Primario);

}



.desactivado {

    color: #6a6a6b;

}



.contItem {

    padding: 10px;

}



.leyenda {

    text-align: center;

    font-style: italic;

    font-size: 0.8rem;

    width: 100%;

    border-radius: 0px 0px 10px 10px;



}



.verde {

    color: var(--color-Terceario);

    margin-right: 10px;



}



.car_P {

    color: var(--color-Primario);

    font-size: 1rem;

    font-weight: 600;

    text-align: center;

    font-style: italic;
}

.tituloItem{

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

}















/*------section_3---------------------------*/



.section_3 {



    background-color: #E0E0E0;



    display: flex;



    justify-content: center;



    width: 100%;



















}







.contTotalSec3 {



    display: flex;



    width: 90%;



    justify-content: center;



    padding: 2rem 1rem;



    gap: 2rem;



}







iframe {



    background-color: rgb(121, 121, 121);



    width: 270px;



    height: 480px;



    border-radius: 20px;



    border: 5px solid floralwhite;



}







.contInfoSec3 {







    width: 300px;



    display: flex;



    flex-direction: column;



    flex-wrap: wrap;



    align-items: flex-end;



    gap: 2rem;



}







.contInfoSec3 h2 {



    color: #FF9310;



    font-size: 2rem;



    text-align: right;







}











.contInfoSec3 p {



    text-align: right;



    color: #112D2A;







}







/*GALERIA*/







.section_4 {



    overflow: hidden;



    max-width: 960px;



    margin: 0 auto;



    padding: 2rem;



}







.contTituloSec4 {



    display: flex;



    flex-direction: column;



    align-items: center;



}







.tituloSec4H2 {



    color: #FF9310;



    font-size: 2rem;



    text-align: center;



    padding-bottom: 15px;



}







.textSec4 {







    width: 60%;



    text-align: center;



}







#galeria-menus {



    padding: 1rem 0;



}







.swiper {



    width: 100%;



    padding-top: 30px;



    padding-bottom: 50px;



}







.swiper-slide {



    background: #fff;



    display: flex;



    justify-content: center;



    align-items: center;



    border-radius: 16px;



    overflow: hidden;



    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);



    transition: transform 0.3s ease;



    width: auto;



    /* o un valor como 250px, pero nunca 100% */



    flex-shrink: 0;



    padding: 2rem;



}







.swiper-slide img {



    width: 50%;



    max-height: 80vh;



    object-fit: contain;



    filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.4));



}







.swiper-slide-active img {



    transform: scale(1.05);



}







.swiper-wrapper {



    display: flex;



    /* 👈 esto es CLAVE */



}







.contDatosGaleria {



    display: flex;



    flex-direction: column;



    gap: 1rem;



    align-items: center;



    width: 250px;



}







.contDatosGaleria h4 {



    font-size: 2rem;



}







.contDatosGaleria a {



    font-size: 1.5rem;



    font-weight: 800;



    background-color: #FF9310;



    padding: 5px 8px;



    border-radius: 3rem;



    box-shadow: 5px 5px 5px gray;



    text-align: center;



    cursor: pointer;



}




/*--------------------section addons---------*/

.addons {
  padding: 60px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.addonsH2{
  text-align: center;
  font-size: 2rem;
  margin-bottom: 10px;
  ;
}

.addons-subtitle {
  text-align: center;
  color: var(--color-Secundario);
  margin-bottom: 40px;
  font-size: 1.5rem;
}

.addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.addon-card {
  background: #f3f2f2;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.addon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.addon-icon {
  font-size: 2rem;
  display: inline-block;
  margin-bottom: 10px;
}

.addon-card h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.addon-card p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 14px;
}

.addon-card ul {
  padding-left: 18px;
  margin: 0;
}

.addon-Item {
  font-size:  0.9rem  ;
  color: #444 ;
  margin-bottom: 6px;
}

.addons-note {
  text-align: center;
  font-size: 0.85rem;
  color: #777;
  margin-top: 30px;
}



/*---------------footer------------------*/







footer {



    margin-top: 3rem;



    display: flex;



    flex-direction: column;



    align-items: center;



    margin-bottom: 3rem;



}







.bajada {



    width: 700px;



    background-color: #2C2B33;



    font-weight: 700;



    font-size: 1.2rem;



    letter-spacing: 5px;



    text-align: center;



    color: #FBB541;



    padding: 20px 0 20px 0;



    margin-bottom: 6rem;











}







.firma {



    display: flex;



    flex-direction: column;



    gap: 1rem;



    align-items: center;



}







.firma img {



    width: 150px;



    height: 150px;



}







.bajadaLogo {



    font-weight: 500;



    font-size: .8rem;



    text-align: center;











    color: #A4D53A;



}







.firma a {



    color: #2C2B33;



    font-size: 0.8rem;



    font-weight: 700;



    letter-spacing: 2px;







}











.contRedes {



    display: flex;







    gap: 1rem;



    justify-content: flex-end;



    align-items: flex-end;







}







.ico {







    background-color: #2C2B33;







    border-radius: 50%;



    width: 35px;



    height: 35px;



    display: flex;



    align-items: center;



    justify-content: center;







}







.icono1 {



    color: #A2D33A;



    font-size: 1.4rem;



}







.ico:hover {



    transform: scale(1.1)

}











.icono1:active {



    color: #A2D33A;







}







.cajaFinal {



    background-color: #1D3A38;



    width: 100%;



    height: 30px;



    margin-top: 2rem;



}







#wifiInfo {



    margin-top: 20px;



    padding: 20px;



    background: #fff;



    border-radius: 12px;



    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);



    display: none;



}







.wifiInfo {



    display: none;



}











canvas {



    margin-top: 15px;



}







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-Primario);



}







/*----------------------PAGINA DE CONTACTO------------------*/



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



.contSectionForm {



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







}



.contContacto {



    display: flex;



    justify-content: center;



    flex-wrap: wrap;



    align-items: center;



    gap: 2rem;



    padding: 3rem;







}



form {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.contIzq {



    width: 40%;



}



.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-Secundario);

    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----------------------*/







.contTotalGracias{

 position: relative;

 display: flex;

 align-items: center;

 justify-content: center;

    

}

.graciasIMG{

    width: 100%;

    height: auto;

}

.contTituloGracias{

    background-color:#20130971;

    border-radius: 10px;

    position: absolute;

    width: 50%;

    padding: 2rem;

}

.graciasH1{

    color: var(--color-Quinto);

    text-align: center;

    padding-bottom: 1rem;

}

.graciasH2{

    text-align: center;

      color: var(--color-Quinto);

}



@media(max-width:1200px) {



    .contIzq {



        width: 100%;



    }



}







@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) {

    .graciasH1{

        font-size: 2rem;

    }

    .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));
  
}




    .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;

}

   .graciasH1{

    line-height: 1.1;

        font-size: 1.5rem;

    }

    .contTituloGracias{

        width: 80%;

    }



.contTituloGracias{

    padding: 0.5rem;

}





}













@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%;



    }



}