:root{







    --primary: #f5f1dc;

;



    --secondary: #f5f1dc;



    --light: #F6F7F8;



    --dark: #213951;



    --terceario:#232324;



   



}



@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');







*{



    



    font-family: "Fira Sans", sans-serif;



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}



/*-----------btn-wsp------------------*/



.btn-wsp {



    position: fixed;



    bottom: 20px; 



    right: 20px; 



    z-index: 1000; 



    width: 50px; 



    height: 50px; 



    background-color: #25d366; 



    border-radius: 50%; 



    display: flex; 



    justify-content: center;



    align-items: center; 



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



    color: white; 



    text-decoration: none; 



    font-size: 30px; 



}







.iconwsp {



    font-size: 1.2em; 



}







/*--------------nav----------------------*/



.navbar-nav{



    



    margin-bottom: 18px;



}



.navbar-collapse{



    justify-content: space-evenly;



}



.container-color{



background-color: var(--primary);



box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;







}



.enlace-color {



    color: var(--dark)



   



}



.enlace-color:hover{



background-color: var(--dark);

 color:var(--primary)

}



.enlace-color:focus{



    color:var(--primary)

 



}



.navbar-toggler{



    border: 1px solid var(--primary);



    color: rgba(255, 0, 0, 0);



    padding: 0.25rem 0.5rem;







}







.contRedes{



    display: flex;



    gap: 1rem;



    align-items: center;



}



.iconRedes{



    font-size: 1.3rem;



   color:var(--dark);



}



.iconRedes:hover{



    color: var(--primary);

    background-color: var(--dark);

    padding: 5px;

    border-radius: 1px;



}



.logo{



    color: var(--light);



    font-family: 'Times New Roman', Times, serif;



    gap: 1rem;



    display: flex;



    align-items: center;



    font-size:1.5rem;



    font-weight: 800;



}



.logo:hover{



    color: var(--primary)



}



.container-fluid  {



 



    padding-bottom: 1rem;



}







/*.carousel-control-next{



    position: initial;



}*/











.navbar-collapse{



    justify-content: space-evenly;



}









.navbar-toggler{



    border: 1px solid var(--primary);



    color: rgba(255, 0, 0, 0);



    padding: 0.25rem 0.5rem;







}



.navbar{



    padding: 0;



}







.contRedes{



    display: flex;



    gap: 1rem;



    align-items: center;



}







.logo{



    color: var(--light);



    font-family: 'Times New Roman', Times, serif;



    gap: 1rem;



    display: flex;



    align-items: center;



    font-size:1.5rem;



    font-weight: 800;



}



.logo:hover{



    color: var(--primary)



}



.container-fluid  {



 



    padding-bottom: 1rem;



    padding-top: 1rem;



}







/*----------carrousel-------------------*/



.position{



    position: relative;







}

















.slideInDown {



    animation-name: slideInDown;



}







.carousel-control-next-icon , .carousel-control-prev-icon {



    background-color: var(--dark);



}







@keyframes slideInDown {



    0% {



        transform: translate3d(0, -100%, 0);



        visibility: visible;



    }







    100% {



        transform: translateZ(0);



    }







}







.animated {



    animation-duration: 1s;



    animation-fill-mode: both;



}







.carousel-caption {



    background-color: rgba(0, 0, 0, 0.329);



    padding: 1rem;



    bottom: 1.25rem;



}







.carousel-caption h5 {



    font-size: 3rem;



}







@media (max-width:600px) {







    .carousel-caption h5 {



        font-size: 2rem;



    }











}







@media (max-width:450px) {



    .carousel-item {



        height: 300px;



    }







    .h1{



        font-size: 1.3rem;



    }



    .carousel-caption h5 {



        font-size: 1.5rem;



    }







    .carousel-caption p {



        font-size: 0.8rem;



        margin-bottom: 0.5rem;



    }







    .carousel-caption {



        padding: 0;



        bottom: 0.0rem;



    }



    .w-50{



        position: relative; 



        left: -50%;



        height: 100%;



    }



    .w-49{



        position: relative; 



        left: -50%;



        height: 100%;



    }



    .w-48{



        position: relative; 



        left: -50%;



        height: 100%;



    }







.w-100{



    width: auto !important



}



}















/*--------------------------section_uno-------------------------*/



.contTotalSectioUno{



    display: flex;



  justify-content: center;



  background-color: var(--dark);



  padding: 1.5rem 0;



}



.ContSectionUno{



    display: flex;

    width: 70%;

    gap: 2rem;

    align-items: center;







}



.contImgSectionUno{

    flex: 0 0 40%;   /* ocupa 40% del contenedor */

    max-width: 500px; /* límite para pantallas enormes */



  



}



.imgSectioUno{



    



width: 100%;

    height: auto;

    display: block;

}







.contSectionUNoTex h2 {



    color: var(--primary);



    font-weight: 800;



    font-size: 2.5rem;







}



.ContTiposSectionUnoH3{



    color: var(--primary);



}



.aviso{



    text-align: center;



    background-color: var(--primary);



    color: rgb(223, 10, 10);



    padding: 2px;



}



.contSectionUNoTex p{



    margin-top: 0.5rem;



    color: rgb(255, 254, 254);



    font-size: 1.2rem;



}



.ContTiposSectionUno{



    margin-top: 1rem;



}



.tiposSectionUno{



    display: flex;



 



    gap: 0.5rem 2rem;



    flex-wrap: wrap;



}



.fa-solid{



    color: var(--primary);



}



.tiposSectionUnoText{



    margin-bottom: 0;



}



@media (min-width: 1800px) {

  .ContSectionUno {

    width: 56%;

  }

}



@media (max-width:800px) {







    .ContSectionUno{



        flex-direction: column-reverse;

        align-items: center;







    }



    .contImgSectionUno{



        width: 50%;



    }



    .contSectionUNoTex h2{



        line-height: 2.5rem;



    }









}



@media(max-width:500px){







.contSectionUNoTex h2{



    font-size: 1.8rem;



    line-height: 1.5rem;



}



.contSectionUNoTex p{



    font-size: 0.8rem;



    line-height: 1.2rem;



}



.ContSectionUno{



    width: 98%;



        align-items: center;



}







}



/*------------------------------servicios-----------------------*/



.contServices{



    display: flex;



    gap: 1rem;



    flex-wrap: wrap;



    justify-content: center;







    margin: 1rem 0.5rem 0 0.5rem;



}



.tituloService{



margin-top: 2rem;



   text-align: center;



   font-size: 3rem;



   color: var(--dark);



   font-weight: 800;



   font-size: 2.5rem;



}



.cardService{



    display: flex;



    justify-content: flex-start;



    align-items: center;



    flex-direction: column;



    padding: 0.5rem;;



    border: solid 1px  #ddd;







    width: 25rem;



    



}



.cardServiceH3{



    margin-bottom: 1rem;



    color: var(--dark);



    font-size: 1.7rem;



    text-align: center;



    font-weight: 800;







   







}



.uregnciaText{



    font-size: 1.6rem;



    margin-bottom: 20px;



}



.cardServiceText{



    padding: 0.5rem;



    line-height: 1.5;



    font-size: 1.1rem;







    color: var(--dark);



    font-weight: 200;



}



.contTextService{



    display: flex;



    align-items: center;



    flex-direction: column;



}



::marker{



    color: var(--dark);



    font-size: 1.3rem;



}



.cardServiceEspecial{



    border: solid 2px  var(--primary);



    background-color: var(--primary);



    color: rgb(255, 47, 47);



    font-weight: 700;



    border-radius: 0.5rem;



    animation-iteration-count: infinite;



    --animate-duration: 4s



    



}











/*-------------------Galeria_1-------------------*/











 .contTotalPanel{



    display: flex;



    justify-content: center;



    flex-direction: column;
        align-items: center;



 }



.panels {



    align-content: center;



    width: 98%;



    min-height: 100vh;



    display: flex;



    flex-direction: row;



    margin-top: 2rem;



 }



 



 .panel {



    flex-basis: 20%;



    text-align: center;



    background-size: cover;



    background-position: center;



    background-repeat: no-repeat;



    display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: center;



    transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),



       flex-basis 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;



    overflow: hidden;



    flex: 1;



 }



 



 .panels .panel:nth-child(1) {



    background-image: url(../asset/img/1B.jpg);



 }



 



 .panels .panel:nth-child(2) {



    background-image: url(../asset/img/2B.jpg);



 }



 



 .panels .panel:nth-child(3) {



    background-image: url(../asset/img/3B.jpg);



 }



 



 .panels .panel:nth-child(4) {



    background-image: url(../asset/img/a5.jpg);



 }



 







 .panel:hover {



    cursor: pointer;



 }



 



 .panel.open {



    flex-basis: 30%;



    font-size: 40px;



 }



 



 .panel > * {



    transition: transform 0.5s;



    flex: 1;



    display: flex;



    align-items: center;



    justify-content: center;



 }



 



 .panel > *:first-child {



    transform: translateY(-100%);



 }



 



 .panel.open-active > *:first-child {



    transform: translateY(0%);



 }



 



 .panel > *:last-child {



    transform: translateY(100%);



 }



 



 .panel.open-active > *:last-child {



    transform: translateY(0%);



 }



 .galeria_1H2{



    color: white;



    font-size: 4.5rem;
    font-weight: bold;



    text-shadow: 2px 0px 5px rgb(0, 8, 24);

     font-family: "Tangerine", cursive;
  

 }



 @media screen and (max-width: 850px) {



    .panels {



       flex-direction: column;



    }



 



    .panel {



       height: 20vh;



       flex-basis: 100%;



       transition: 



          height 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),



          font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), 



          background 0.2s;



    }



 



    .panel > *:first-child {



       transform: translateY(-25vh);



    }



 



    .panel.open-active > *:first-child {



       transform: translateY(0);



    }



 



    .panel > *:last-child {



       transform: translateY(25vh);



    }



 



    .panel.open-active > *:last-child {



       transform: translateY(0);



    }



 



    .panel.open {



       height: 50vh;



       flex-basis: 100%;



    }



    .galeria_1H2 {



        padding: 20rem;



        }







 }



 @media (max-width: 600px) {



.galeria_1H2 {



   padding: 15rem;



   }



}



@media (max-width: 500px) {

    .contSectionUNoTex{

        padding: 10px;

    }



    .contImgSectionUno {

  width: 90%;

  height: 250px;

  overflow: hidden;

}



.imgSectioUno {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

   .galeria_1H2 {



      padding: 10rem;



      font-size: 3.8rem;



      }







     .uregnciaText{



    font-size: 1.4rem;



    padding-bottom: 15px;



} 



   }



   @media (max-width: 450px) {



    .galeria_1H2 {



       padding: 6rem;



       font-size: 3.8rem;



       }



    }



/*-----Card Soluciones----------------------*/



.soluciones{

        background-color: #fdfbef;

        padding: 1rem 0 3rem 0;

}

.contCardSoluciones{

    padding-top: 15px;

    display: flex;

    gap: 1rem;

    justify-content: space-evenly;

    padding-top: 2rem;

        flex-wrap: wrap;

}

.cardSoluciones{

        width: 300px;

        height: 400px;

        border-radius: 20px;

        background-color: var(--primary);

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

        

}

.cardSoluciones:hover{

    scale: 1.1;

}



.imgSoluciones{

    width: 100%;

    height: auto;

    border-radius: 20px 20px 0 0;

}

.contTextSoluciones{

  display: flex;

        flex-direction: column;

        gap: 10px;

       justify-content: center;

       align-items: center;

}



.cardSolucionesH3{

    color: var(--dark);

    text-align: center;

    padding-top: 10px;

}



.cardSolucionesH5{

    position: relative;

    top: -10px;

    font-size: 15px;

    text-align: center;

    margin-bottom: 0;

     color: var(--dark);

     font-style: italic;

    

}



.cardSoluciones_P{

    font-size: 12px;

    width: 290px;

    padding: 0px 5px 0px 5px;

    margin-bottom: 0;

    text-align: center;

    font-style: italic;

    color: var(--dark);

}

    /*---------------------reseñas-------------------------*/







    .contImgPerfil {



        width: 60px;



        height: 60px;



        border-radius: 50%;



        overflow: hidden;



        display: flex;



        justify-content: center;



        align-items: center;



        aspect-ratio: 1 / 1; /* Mantiene la proporción 1:1 */



    }



    



    .ImgPerfil {



        width: 100px;



        height: 100px;



        object-fit: cover;



    }



    



    .contTotalPerfil {



        border: 1px solid #e7e7e7;



        border-radius: 0.5rem;



    



       



        gap: 1rem;



        background-color: rgb(255, 254, 254);



        flex: 1;



        /* Asegura que todos los artículos tengan la misma altura */



        display: flex;



        flex-direction: column;



        justify-content: space-between;



    }



    



    .perfil {



        display: flex;



        gap: 1rem;



        padding: 0.5rem;



        justify-content: center;



        min-width: 250px;



    }



    



    .estrellas {



        color: rgb(241, 153, 20);



        font-size: 20px;



    }



    



    .comentarioPerfil {



        padding: 0.5rem;



        flex-grow: 1;



    }



    



    .reseñas {



        padding: 1rem 1rem;



        display: flex;



        gap: 1rem;



        justify-content: center;



        flex-wrap: wrap;



        align-items: stretch;



        







    }



    .contReseñas{



    display: flex;



    flex-direction: column;



    align-items: center;



    }



    .tituloReseña{



        display: flex;



        flex-direction: column;



        align-items: center;



        text-align: center;



    }



    .estrellas-2{



        color: rgb(241, 153, 20);



        font-size: 30px;



    }







    /*------------------------Contacto------------------------*/



.contTotalContacto {



    background-color: var(--dark);







    display: flex;



    align-items: center;



    justify-content: center;



    padding: 4rem;



    margin-top: 1rem;



}







.contContactos {



    display: flex;



    align-items: center;











}







.datosContacto {



    color: var(--light);



    display: flex;



    flex-direction: column;



    gap: 2rem;



    align-items: center;



    background-color: var(--dark);



    box-shadow: 2px 1px 14px rgb(1, 0, 14);



    border-radius: 1rem 0 0 1rem;



    justify-content: center;



    width: 600px;



    height: 450px



}







.datosContacto p {



    font-size: 1rem;



    line-height: 1.5;



    width: 80%;



    text-align: center;



    font-weight: 200;



}







.datosContactoH2 {



    color: var(--primary);



    font-weight: 800;



    font-size: 2.5rem;



}







.contContactoRedes {







    display: flex;



    font-size: 2rem;



    gap: 1.5rem;



}







.contContactoRedes a {



    color: var(--light);



    text-shadow: 12px 2px 7px rgb(1, 0, 14);



    font-size: 2rem;



}







.contContactoRedes a :hover {



    color: var(--primary);



    scale: 1.1;



    transition: transform 0.3s ease;



}







.mailContacto {



    text-decoration: none;



    color: var(--light);



    text-shadow: 12px 2px 7px rgb(1, 0, 14);











}







.mailContacto:hover {



    color: var(--primary);



    scale: 1.1;



    transition: transform 0.3s ease;



}







.contContactos i {



    margin-right: 0.5rem;



}







.mapsGoogle {



    border-radius: 0rem 1rem 1rem 0;



    justify-content: center;



    box-shadow: 2px 1px 14px rgb(1, 0, 14);



}







@media(max-width:1024px) {







    .datosContacto,



    .mapsGoogle {



        width: 400px;



    }







}







@media(max-width:768px) {







    .datosContacto,



    .mapsGoogle {



        width: 350px;



    }







}







@media(max-width:600px) {







    .datosContacto,



    .mapsGoogle {



        width: 250px;



    }



    .datosContacto{



        gap: 1rem;



    }







}







@media(max-width:500px) {







    .contTotalContacto {



height: 100%;



padding: 0;







}







    .datosContacto,.mapsGoogle {



        width: 450px;



        height: 350px;



       }



.contContactos{







    flex-direction: column;



    padding: 1.5rem 0 1.5rem 0;



}



.datosContacto{



    



    border-radius: 1rem 1rem 0rem 0rem;



 



}



.mapsGoogle{







    border-radius: 0rem 0rem 1rem 1rem;



}



}



@media(max-width:450px){



    .datosContacto,.mapsGoogle {



        width: 400px;



        height: 380px;



       }







}



@media(max-width:400px){



    .datosContacto,.mapsGoogle {



        width: 320px;



        



       }







}



@media(max-width:320px){



    .datosContacto,.mapsGoogle {



        width: 300px;



        height: 350px;



       }



       .datosContacto{



        height: 420px;



       }



}

/*------------------------SHARE-Section----------------*/
.share-section {
  display: flex;
  justify-content: center;
  padding: 40px 15px;
}

.share-card {

  border-radius: 16px;
  padding: 25px;
  max-width: 350px;
  width: 100%;

  text-align: center;
}

/* QR */
.qr-box img {
  width: 160px;
  max-width: 100%;

  margin: 20px 0;
}

/* Botones */
.actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px;
  border-radius: 10px;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;

  transition: all 0.2s ease;
}

/* Colores */
.btn.share {
  background: var(--dark);
  color: white;
}

.btn.copy {
  background: var(--dark);
  color: white;
}

.btn.whatsapp {
  background: var(--dark);
  color: white;
}

/* Hover */
.btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Responsive */
@media (min-width: 600px) {
  .share-card {
    max-width: 500px;
  }

  .actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn {
    flex: 1;
  }
}


/*----------------Footer---------------------------*/



.footer{



    background-color:var(--primary);



    display: flex;



    flex-direction: column;



    gap: 1rem;



    color: var(--dark);



    align-items: center;



    padding: 1rem 0 1rem 0;



}







.contLogo{



display: flex;



flex-direction: column;



align-items: center;



}



.contTextFooter{



    width: 70%;



    text-align: center;



    font-weight: 200;



line-height: 1.4rem;



}



.line{



    width: 90%;



    border: 0.5px solid var(--dark);







}



.contPubli a{



    text-decoration: none;



    color:rgba(54, 50, 50, 0.664);



    font-size: 0.8rem;



    font-weight: 200;



}



.contPubli a:hover{



    color: #023b13;



    font-size: 1.3rem;



}



.botonUno {



    text-decoration: none;



    background-color: var(--dark);



    padding: 0.3rem;



    border-radius: 5px;



    color: var(--light);



    font-weight: 500;



    display: inline-block;



    line-height: 1.4rem;



    border: 1px solid var(--light);



    margin-bottom: 0.2rem;



}



.botonUno:hover{



    background-color:  var(--primary);

        border: 1px solid var(--dark);

        color: var(--dark);



}

.botonUno:active{

    scale: 1.2;

}





@media (max-width:450px) {



    .contTextFooter{



        width: 95%;



        



    }



    



}





.icon-burger{



    color:var(--dark);



  



}