@charset "UTF-8";

/* -------------- font google --------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Oswald:wght@200..700&display=swap');

/* ESTILOS GLOBALES */

* {

  padding: 0;

  margin: 0;

  box-sizing: border-box; }

  *::before {

    padding: 0;

    margin: 0;

    box-sizing: border-box; }

  *::after {

    padding: 0;

    margin: 0;

    box-sizing: border-box; }



html {

  /* font-family: 'Poppins', sans-serif !important; */

  font-size: 10px; }



body {

  font-family: 'Poppins', sans-serif !important;

  width: 100%; }

h2{
  font-weight: normal;
}


p {

  font-size: 1.6rem;

  /* color: #9698a6; */

  color: #212529;

  font-weight: 300;

  line-height: 1.6; }



/* section {

  padding: 5rem 0; } */



.contenedorGeneral {

  width: 100%;

  max-width: 120rem;

  margin: 0 auto;

  padding: 0 2.5rem; 

  position: relative;

}



  .contenedorGeneral .row {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1rem; 

  }





  .separator{
    
  }



  :root{

    --safety-orange: hsl(200, 86%, 38%);

    --lavender-gray: hsl(230, 19%, 81%);

    --persian-rose: hsl(197, 88%, 45%);

    --red-crayola: hsl(341, 100%, 49%);

    --eerie-black: hsl(240, 6%, 10%);

    --light-gray: hsl(0, 0%, 80%);

    --cultured-2: hsl(210, 60%, 98%);

    --platinum: hsl(0, 0%, 90%);

    --gray-web: hsl(220, 5%, 49%);

    --cultured: hsl(0, 0%, 93%);

    --black_10: hsla(0, 0%, 0%, 0.1);

    --black_5: hsla(0, 0%, 0%, 0.05);

    --white-1: hsl(0, 0%, 100%);

    --white-2: hsl(0, 14%, 98%);

    --black: hsl(0, 0%, 0%);

  }





    span{

    color: rgb(19, 167, 225);

  }







.textoDecorativo {

  color: #5222D0;

  font-size: 1rem; }



/* CLASES ÚTILES*/

.margenChico {

  margin-bottom: 1.6rem; }



.margenMedio {

  margin-bottom: 3rem; }



.margenGrande {

  margin-bottom: 5rem; }



/********** HEADER STYLES ***********/

/********** HEADER STYLES ***********/

header {

  width: 100%;

  height: 8.5rem;

  padding: 2.5rem 0;

  background-color: white;

  position: relative;

  z-index: 9999999; }



.logo {

  height: 6rem; }



.check {

  display: none; }



.hamburger {

  display: none; }

    

    .boton {

      font-size: 1.5rem;

      color: white;

      font-weight: 700;

      text-decoration: none;

      padding: 8px;

      background: rgb(16,118, 188);

      border-radius: 5rem;

      opacity: 1;

      transform: scaleX(1);

      transition: all .2s; }

      .boton:hover {

        opacity: .8;

        transform: scaleX(1.1);

        color: white; }

        

/********** BIENVENIDA SECTION **********/

/********** BIENVENIDA SECTION **********/

.seccionBienvenida {

  width: 100%;

  background-color: white; 

  margin-top: 50px;

}



.seccionBienvenida p{

  text-align: justify;

}

p {
  text-align: justify;
  hyphens: auto;
}


.seccionBienvenida2 p{

  text-align: justify;

  text-justify: inter-word;

}





.bienvenida {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 30px;

}

.bienvenidaSecundario {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 30px;

}



.imagenBienvenida {

  width: 60%;

  display: inline-block;


}



.imagenBienvenida2{

  width: 30%;

}



  .imagenBienvenida img {

    width: 100%;

    height: 100%;

    border-radius: 10px;

  }





  @media (max-width: 768px) {

    .imagenBienvenida img {

      max-width: 100%;  

      margin-top: 60px;  

      display: block;

    }



    .contenedorGeneral.bienvenida{



    }

  }

  

  @media (max-width: 480px) {

    .imagenBienvenida img {

      max-width: 100%;  

    }

  }



.bienvenidaTextos {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: fit-content;

  width: 50%;

  align-items: flex-start; }

  .bienvenidaTextos h1 {

    font-size: 3.5rem;

    font-weight: normal;

    line-height: 4.5rem; }

    .bienvenidaTextos h1 span {

      display: inline-block;

      color: rgb(19, 167, 225);

      font-weight: bold; }







      @media (max-width: 768px) {

        .bienvenidaTextos {

          width: 100%;

          justify-content: flex-start;

          align-items: flex-start;

          text-align: left;

        }

      

        .seccionBienvenida{

          margin-top: 0px;

          padding-bottom: 0px;

        }



        .contenedorGeneral.home.bienvenida.moveUP.introImage{

          margin-top: 50px !important;

        }

       



        section {

          padding: 1rem 0; }





          .bienvenida{

            margin-top: 0px;

          }





          .introImage{

            margin-top: 50px;

          }



      }

      

      @media (max-width: 480px) {

        .bienvenidaTextos h1 {

          font-size: 2rem;

          line-height: 3rem;

          justify-content: flex-start;

          align-items: center;

          text-align: left;

        }

        


        .bienvenida{

          margin-top: 40px !important;

        }



        .contenedorGeneral.home.bienvenida.moveUP.introImage{

          margin-top: 40px !important;

        }

      }



/********** BENEFICIOS SECTION   **********/

/********** BENEFICIOS SECTION   **********/

.seccionBeneficios {

  background-color: #f3f4f6; }



.seccionTextos {

  width: 100% !important;

  text-align: center !important; 

}



.tituloSecundario {

  font-size: 3rem;

  font-weight: normal;

  line-height: 4.5rem; 

  display: inline-block;

  border-bottom: 3px solid rgb(19, 167, 225);

  padding-bottom: 0.1rem; 

  margin-bottom: 5px;

  text-align: center;

}



.tituloSection{

  display: flex;

  justify-content: center;

  margin: 20px 0px;

}



.galeriaBeneficios {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

  row-gap: 4rem;

  column-gap: 1rem; }



.itemBeneficio {

  display: inline-block;

  text-align: center; }



.tituloTerciario {

  font-size: 2rem;

  font-weight: normal;

  line-height: 4.5rem; }



/********** NOSOTROS SECTION   **********/

/********** NOSOTROS SECTION   **********/

.contenedorNosotros {

  width: 100%;

  background-color: #fafafa; }



.nosotros {

  display: flex;

  justify-content: space-evenly; }



.imagenNosotros {

  width: 60%;

  display: inline-block;

  text-align: center; }

  .imagenNosotros img {

    width: 100%; }



.textosNosotros {

  display: flex;

  flex-direction: column;

  justify-content: center;

  width: 50%;

  align-items: flex-start; }



/************* PROYECTOS SECTION  *************/

/************* PROYECTOS SECTION  *************/

.proyectosSeccion {

  background-color: #fafafa; }



.galeriaProyectos {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

  width: 100%;

  height: auto;

  row-gap: 0rem;

  margin: 40px 0px 0px;

  column-gap: 1rem; }



.itemProyecto {

  background-color: white;

  background-origin: 1px solid transparent;

  border-radius: 8px;

  overflow: hidden; 

  cursor: pointer;

}

  .itemProyecto img {

    width: 100%;

    height: 23rem;

    border-radius: 8px;

    object-fit: cover; }



.datosProyecto {

  padding: 2rem; }



.autorProyecto {

  font-size: 1.2rem; }



.tituloProyecto {

  font-size: 1.7rem;

  font-weight: normal; }



.descripcionItemProyecto {

  font-size: 1.3rem; }







@media (max-width: 768px) {

  .galeriaProyectos {

    grid-template-columns: repeat(2, 1fr); 

    margin-top: 0px;

  }

  .itemProyecto img {

    width: 100%; 

    height: 17rem;

  }

  .textoBienvenida{
    padding: 0px !important;
  }

  .seccionBienvenida2{

    margin-top: 0px !important;
    margin-bottom: 10px !important;
  }



}







/* CONTADOR PROYECTOS MIDDLE */

.contadorSeccion {

  background-color: white;

  width: 100%; 

}



.contador {

  background-color: rgb(19, 167, 225);

  margin-top: 10px !important;

  padding: 5rem;

  border-radius: 2rem;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));

  row-gap: 4rem;

  column-gap: 2rem;

  justify-items: center;

  align-items: center;

  text-align: center;

  margin-bottom: 30px;

}



.tipoContenedor {

  color: white;

  text-align: center;

  font-size: x-large; }

  .tipoContenedor h2 {

    color: white;

    text-align: center;

    font-size: 3.5rem; }

  .tipoContenedor p {

    color: white; }



/***********  MEDIA QUERRY  *****************/

/***********  MEDIA QUERRY  *****************/

/***********  MEDIA QUERRY  *****************/

/* MOBILE RESPONSIVE  OPCIONES MENU */

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

  nav .boton {

    display: none; }

  .hamburger {

    display: inline-block;

    position: absolute;

    top: 2rem;

    right: 2rem;

    cursor: pointer; }

  .hamburger img {

    width: 3rem; }

  .navLista {

    flex-direction: column;

    width: 90%;

    margin: 0 auto;

    padding: 1rem 0;

    margin-top: 4rem;

    background-color: white;

    border: 1px solid #5222D0;

    border-radius: .3rem;

    transform: translateY(-200%);

    transition: all .5s;

    z-index: 999; }

  .navLista li {

    padding: 1rem 0;

    font: 1.6rem; }

  li a {

    color: #9698a6;

    font-weight: 400; }

  li a:hover {

    color: #5222D0; }

  nav ul li a:hover::before {

    opacity: 0; }

  /* SLIDE MENU HAMBURGUESA CUANDO LO CLICKEO */

  #toggle:checked ~ .navLista {

    transform: translateY(1%); }

  #toggle:checked ~ .hamburger {

    border: 1px solid #5222D0;

    border-radius: .3rem;

    padding: .4rem; } }



/* MEDIA QUERY */

/* MEDIA QUERY */

/* para MOBILE y TABLET */

@media screen and (min-width: 200px) and (max-width: 769px) {

  /* MEDIA QUERY BIENVENIDA SECTION */

  .bienvenida {

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center; 

    border-radius: 10px;

    margin-top: 40px !important;

  }


  .bienvenidaSecundario {

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center; 

    border-radius: 10px;


  }

  .imagenBienvenida {

    display: inline-block;

    width: 100%;

    height: 100%;

    text-align: center;

    border-radius: 10px;

  }

  .bienvenidaTextos {

    width: 100%;

    align-items: flex-start; }

    .bienvenidaTextos h1 {

      font-size: 3rem;

      font-weight: normal;

      line-height: 4rem; }

  /* MEDIA QUERY NOSOTROS SECTION */

  .nosotros {

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center; }

  .imagenNosotros {

    display: inline-block;

    text-align: center; }

  .textosNosotros {

    width: 100%;

    align-items: center; }

  /* MEDIA QUERY CONTADOR SECTION */

  .contador {

    margin: 0px;

    margin-top: 0px !important;

    justify-items: center;

    align-items: center;

    text-align: center; }

    .tipoContenedor{

      width: max-content;

    }

  /* MEDIA QUERY ERROR SECTION */

  .recursoNotFound {

    flex-direction: column-reverse;

    justify-content: center;

    align-items: center;

    text-align: center; }

  .recursoNotFoundImagen {

    display: inline-block;

    text-align: center; }

  .recursoNotFoundTextos {

    width: 100%;

    align-items: center; }

  .tituloSecundario {

    font-size: 25px;

    line-height: 4rem; }

  p {

    font-size: 1.4rem; }

  /* MEDIA QUERY PAGE NOSOTROS*/

  .textosPaginaNosotros h1 {

    font-size: 3rem;

    font-weight: normal;

    line-height: 4rem; }

  /* MEDIA QUERY PAGE PREGUNTAS*/

  .accordion-item {

    font-size: 1rem; } }



/* TABLET Y LAPTOP*/

@media screen and (min-width: 770px) {

  .seccionBienvenida {

    padding: 0rem 0 0 0; 

  }

  /* MEDIA QUERY BENEFICIOS SECTION */

  .seccionTextos {

    width: 50%;

    text-align: left; }

  .itemBeneficio {

    text-align: left; } }





    @media (max-width: 768px) {

      .seccionBienvenida {

        margin-top: 60px !important;

      }

    }



/************** ANIMACION *************/

/************** MOVER HACIA ARRIBA *************/

@keyframes moveUP {

  0% {

    transform: translateY(100%); }

  50% {

    transform: translateY(50%); }

  100% {

    transform: translateY(0); } }



.moveUP {

  animation: moveUP .3s 1 linear; }









  /* FORMULARIO */





.working h2{

  font-size: 30px;

  font-weight: 400;

}



.working p{

margin: 0px;

}



@media (max-width: 768px) {

  .working p {

    text-align: left; 

  }



.aboutUs{

  text-align: left;

}



h2{

  font-size: 26px !important;

}



}





/* Estilos para la navegación */



.navbar {

  margin-top: 20px;

  background-color: #131327 !important;

  padding: 8px;

  border-radius: 20px;

}






.navbar .nav-link {

  font-size: 14px;

  color: white !important; 

  text-decoration: none;

  padding: 0;

}





.navbar-nav {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 15px;

  width: 100%;

  margin: 0 !important;

}





.navbar-nav .nav-item {

  font-size: 8px;

  font-weight: 400;

}









.containerLogo {

  display: flex;

  justify-content: space-between;

  align-items: center;

}





@media (max-width: 768px) {

  .containerLogo {

    flex-direction: row;

  }



  .manejoRedes{

    margin-top: 10px !important;

  }



  .navbar-toggler {

    color: white !important;

  }



  .navbar-nav {

    flex-direction: column;

    gap: 26px;

    text-align: left;

  }



  .navbar-collapse.collapse.show{

    margin-top: 10px;

  }





  .navbar-nav .nav-item:not(:last-child)::after {

    content: "";

  }

}





.navbar-toggler .menu-text {

  margin-left: 8px; 

  font-size: 16px; 

  font-weight: 300; 

  color: rgba(255, 255, 255, .5);

}



.navbar-toggler{

  border-color: rgba(255, 255, 255, .5) !important;

}





.navbar-light .navbar-toggler-icon {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}







.navbar-toggler:focus{

  box-shadow: 0 0 0 0px

}







/* fin navbar */



.iframeGoogle{

  border-radius: 8px;

}







.posicionamientoTitulo{

  text-align: center;

  color: white;

  background-color: rgb(16, 118, 188);

  padding: 8px;

  border-radius: 8px;

  font-size: 24px;

}











.steps {

  list-style: none;

  margin: 5px;

  padding: 5px;

}



.steps li {

  display: flex;

  align-items: center;

  margin-bottom: 10px;

  font-size: 16px;

}



.steps li::before {

  content: counter(step);

  counter-increment: step;

  display: inline-block;

  width: 30px;

  height: 30px;

  background-color: rgb(19, 167, 225);

  color: white;

  border-radius: 50%;

  text-align: center;

  line-height: 30px;

  margin-right: 10px;

}



.steps {

  counter-reset: step;

}







/* ADS */



.ads{

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  align-items: center;

}



.ads h3{

  color: white;

}



.ads button{

  padding: 8px;

  border: 2px solid white;

  border-radius: 8px;

  background-color: #ae4f98;

  font-size: 16px;

  font-weight: 400;

}



.ads a{

  text-decoration: none;

  color: white;

}











/* WhatsApp */





.whatsapp-btn {

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 9999;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background-color: #25D366;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

  animation: breathe 2s ease-in-out infinite;

}





.whatsapp-btn i {

  color: #fff;

  font-size: 24px;

  animation: beat 2s ease-in-out infinite;

  text-decoration: none;

}





@keyframes breathe {

  0% {

    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);

  }

  70% {

    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);

  }

  100% {

    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

  }

}





@keyframes beat {

  0% {

    transform: scale(1);

  }

  50% {

    transform: scale(1.2);

  }

  100% {

    transform: scale(1);

  }

}



.imagenVenta{

  height: 100%;

}



.iframeContainer {

  width: 600px; 

  height: 450px; 

  margin: 0 auto; 

  display: flex;

  justify-content: center;

  align-items: center;

}



.iframeContainer iframe {

  width: 100%;

  height: 100%;

}





@media (max-width: 600px) {

  .iframeContainer {

    width: 100%; 

    height: auto; 

  }



  .iframeContainer iframe {

    aspect-ratio: 4 / 3; 

  }

}





.img-responsive {

  max-width: 100%; 

  height: auto; 

}



@media (max-width: 768px) {

  .bienvenidaTextos {

      padding: 0px;

  }





}









@media (max-width: 768px) {

  .mantenimiento.portada h1 {

    font-size: 25px !important;

  }



  .seccionBienvenida{

    margin-top: 0px !important;

  }

}









.gallery {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 20px;

  max-width: 1400px;

  margin: 0 auto;

  padding: 20px 10px;

}



.gallery img {

  width: 100%;

  max-width: 360px;

  height: 300px;

  object-fit: contain;

  border-radius: 10px;

  cursor: pointer;

}







/* Tablets */

@media (max-width: 1024px) {

  .gallery img {

    max-width: 300px;

    height: 250px;

  }

}





@media (max-width: 768px) {

  .gallery {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

  }

  

  .gallery img {

    max-width: 100%;

    height: 100%;

  }

}







@media (max-width: 480px) {

  .gallery {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

  }

  

  .gallery img {

    max-width: 100%;

    height: auto;

  }

  .bonceImage{
    margin-top: 10px !important;
  }
}


video{
  width: 100%;
  height: auto;
}


/* eleccion */



.why-hire-us {
  background-color: rgb(19, 167, 225);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin: 2rem 0;
  padding: 0px !important;
}



.why-hire-us p{
  text-align: left;
  margin-bottom: 0px;
}





.why-hire-us h2 {

  color: white;

  padding: 2rem;

  font-size: 2rem;

  font-weight: 600;

  text-align: center;

}



.reasons-list {

  background: white;

  padding: 2rem;

  border-radius: 0 0 1rem 1rem;

}



.reason-item {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  padding: 1rem;

  margin-bottom: 1rem;

  border-radius: 0.75rem;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}







.reason-item:last-child {

  margin-bottom: 0;

}



.icon {

  color: #2196f3;

  font-size: 1.5rem;

  min-width: 24px;

  text-align: center;

}



.highlight {

  color: #2196f3;

  font-weight: 600;

}



@media (max-width: 768px) {

  .contenedorGeneral {



  }



  .why-hire-us h2 {

      padding: 1.5rem;

      font-size: 1.8rem !important;

  }



  .reasons-list {

      padding: 1.5rem;

  }



  .reason-item {

      padding: 1rem;

  }

}





/* que incluye */



.features {

    padding: 0.8rem 0;

}







.features__list {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.feature-item {

    display: flex;

    background-color: #ffffff;

    border-radius: 8px;

    overflow: hidden;

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

    transition: transform 0.3s ease;

    min-height: 60px;

}







.feature-item__number {

    background-color: rgb(19, 167, 225);

    color: #ffffff;

    font-size: 1.5rem;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1rem;

    min-width: 80px;

}



.feature-item__content {

    padding: 1rem;

    flex-grow: 1;

}



.feature-item__title {

    font-size: 16px;

    color: #343a40;

    margin-bottom: 0.5rem;

    font-weight: 500;

}





.textoItem{

  font-size: 14px;

  margin: 0px;

}



.feature-item__text {

    color: #6c757d;

    line-height: 1.6;

    font-size: 0.95rem;

}



.highlight {

    color: #007bff;

    font-weight: 500;

}



@media (max-width: 768px) {

    .feature-item {

        flex-direction: column;

    }

    .contador{
      margin: 0px;
    }

    .feature-item__number {

        padding: 0.5rem;

        font-size: 1.1rem;

        justify-content: flex-start;

    }

}


.catalogoPortada{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  border-radius: 8px;
  min-height: 70px;
}




.logo2{

  max-width: 225px;

  max-height: 46px;

  width: 100%;

  height: auto;

}





.separator {

  display: flex;

  align-items: center;

  text-align: center;

  margin: 20px 0;

}



.separator hr {

  flex-grow: 1; 

  border: 3px solid rgb(19, 167, 225);

  background-color: rgb(19, 167, 225);

  border-radius: 5px;

  opacity: inherit;

  margin: 20px 0px;

}





.separator img {

  margin: 0 10px; 

  max-height: 16px;

  max-width: 50px;

}









.imagenIntro {

  flex: 1;

  max-width: 50%;

}



.textoBienvenida {

  flex: 1;

  padding-left: 20px;

}



.imagenIntro img {

  width: 100%;

  height: auto; 

  max-width: 600px; 

  border-radius: 8px;

}

.imagenSection img {

  width: 100%;

  height: auto; 

  max-width: 600px; 

  border-radius: 8px;

}



@media (max-width: 768px) {

  .imagenIntro {

      max-width: 100%; 

      /* margin-top: 50px !important; */

  }

  .textCatalogo{
    font-size: 20px !important;
  }

  .imgCatalogo{
    display: none;
  }

  .separator hr{
    border: 3px solid rgb(19, 167, 225) !important;
  }


  .imgDiseno{
    margin-top: 10px !important; 
  }


  .imgDiseno2{
    margin-top: 0px !important; 
  }


  .row{
    margin-bottom: 20px;
  }




  .iconWeb{

    width: 80px !important;

    max-width: 80px;

    padding: 10px;

  }












  .imagenIntro iframe{

    max-width: 400px;

  }



  .imagenIntro img {

      max-width: 600px; 

      margin: 0 auto;

      display: block;

      margin-top: 10px;

  }



  .iframeAbobo{

    max-width: 430px;

  }



  .contenedorGeneral.contener{

    padding: 0px;

  }

}



@media (max-width: 480px) {

  .imagenIntro {

      max-width: 100%; 

      margin: 0 auto;

      margin-top: 10px;

  }

  .imagenIntro img {

      max-width: 600px; 

    width: 100%;

  }

  .textCatalogo{
    font-size: 20px !important;
  }



  .iconWeb{

    width: 80px !important;

    max-width: 80px;

    padding: 10px;

  }



  .imagenIntro iframe{

    max-width: 390px;

  }



  .contenedorGeneral.contener{

    padding: 0px;

  }



  /* .logo2{

   display: none;

  } */



  .containerLogo{

    width: 100%;

    display: flex;

    justify-content: center;



  }





}





.iconWeb{

  width: 100px ;

  max-width: 100px;

  padding: 10px;

}


.imgWebs2{
  max-width: 140px;
  max-height: 139px;
}



/* Estilos básicos para el modal */
#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#modal-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

#closeModal {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 30px;
  cursor: pointer;
  z-index: 1001;
}

#closeModal:hover {
  transform: scale(1.2);
}



/* MANTENIMIENTO WEB */


.contenedorVideo{
  display: flex;
  justify-content: center;
  gap: 30px;
}


@media (max-width: 768px) {
  .contenedorVideo{
    display: flex;
    flex-direction: column;
  }

  .contenedorVideo iframe{
    max-width: 375px;
    display: flex;
    justify-content: center;
  }

  .iframeContenedor{
    height: 370px;
  }
}






/* ACORDION */


.accordion {
  display: flex;
  flex-direction: column;
  /* max-width: 991px;
  min-width: 320px; */
  margin: 50px auto;
  text-align: justify;
}
.accordion h1 {
  font-size: 32px;
  text-align: center;
}
.accordion-item {
  margin-top: 16px;
  border: 1px solid #fcfcfc;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
.accordion-item .accordion-item-title {
  position: relative;
  margin: 0;
  display: flex;
  width: 100%;
  font-size: 15px;
  cursor: pointer;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding: 14px 20px;
  box-sizing: border-box;
  align-items: center;
}
.accordion-item .accordion-item-desc {
  display: none;
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  color: #444;
  border-top: 1px dashed #ddd;
  padding: 10px 20px 20px;
  box-sizing: border-box;
}
.accordion-item input[type="checkbox"] {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}
.accordion-item input[type="checkbox"]:checked ~ .accordion-item-desc {
  display: block;
}
.accordion-item
  input[type="checkbox"]:checked
  ~ .accordion-item-title
  .icon:after {
  content: "-";
  font-size: 20px;
}
.accordion-item input[type="checkbox"] ~ .accordion-item-title .icon:after {
  content: "+";
  font-size: 20px;
}
.accordion-item:first-child {
  margin-top: 0;
}
.accordion-item .icon {
  margin-left: 14px;
}

@media screen and (max-width: 767px) {
  .accordion {
      padding: 0 16px;
  }
  .accordion h1 {
      font-size: 22px;
  }
}



/* FIN ACORDION */


#recaptcha{
  padding-top: 0px;
  padding-bottom: 0px;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;

}


#mensajeForm{
  padding-bottom: 0px;
}




/* CARD SERVICIO WEB */


#tarjeta-title-header{
  font-size: 23px !important;
}


/* #tarjeta-header-color3{
  background-color: #f0524d;
  color: white;
} */


#tarjeta-borde1{
  border: none;
}

#tarjeta-borde2{
  border: none;
}

#tarjeta-borde3{
  border: none;
}


.buttonsCard{
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
}



.imgCardPricing{
  width: 75%;
  height: auto;
}

#tarjeta-list1 ul{
  list-style-type: none !important;
}

#tarjeta-list1 li::before{
  content: none;
  background-color: #1575bc;
}

#tarjeta-list2 li::before{
  content: none;
  background-color: #00afaf;
}

#tarjeta-list3 li::before{
  content: none;
  background-color: #f0524d;
}

#tarjeta-title-header{
  color: white;
}

#tarjeta-header-color1{
  background-color: #1575bc;
}

#tarjeta-header-color2{
  background-color: #00afaf;
}

#tarjeta-header-color3{
  background-color: #f0524d;
}




#buttonCard{
  display: flex;
  justify-content: space-between;
  width: 100%; 
}

#buttonCard button{
  flex: 1;
  margin: 5px; 
  width: 48%; 
}


#btn1{
  font-size: 18px;
  padding: 8px;
  color: white !important;
  background-color:#25d366 !important;
  border: none;
  border-radius: 5px;
}


#btn2{
  font-size: 18px;
  padding: 8px;
  color: white !important;
  background-color: #1575bc;
  border: none;
  border-radius: 5px;

}


#btn3{
 font-size: 18px;
 padding: 8px;
 color: white !important;
 background-color: #00afaf;
 border: none;
 border-radius: 5px;

}

#btn4{
  font-size: 18px;
  padding: 8px;
  color: white !important;
  background-color: #f0524d;
  border: none;
  border-radius: 5px;

}


.textHeader{
  font-size: 1.9rem;
}



#priceTarjeta1{
  color: #1575bc;
  font-size: 30px !important;
}

#priceTarjeta2{
  color: #00afaf;
  font-size: 30px !important;
}

#priceTarjeta3{
  color: #f0524d;
  font-size: 30px !important;
}

.priceTarjeta{
  font-size: 25px;
}

.pricingCardTarjet{
  display: flex;
  justify-content: center;
  margin: 20px 0px;
}



#th1{
  color: #1575bc;
  padding: 6px;
  border-radius: 5px;
  width: fit-content;
  background-color: #8bbde7;
}

#th2{
  color: #00afaf;
  padding: 6px;
  border-radius: 5px;
  width: fit-content;
  background-color: #99e3e3;
}

#th3{
  color: #f0524d;
  padding: 6px;
  border-radius: 5px;
  width: fit-content;
  background-color: #f7b3aa;
}


.separator1{
  background-color: #1575bc;
}

.separator2{
  background-color: #00afaf;
}

.separator3{
  background-color: #f0524d;
  
}



/* ! OTHER CARD */
.more-content {
  display: none; 
  margin-top: 10px;
}

.card-basic.expanded {
  height: auto; 
  overflow: visible; 
}


.card-basic.expanded .more-content {
  display: block; 
  border-radius: 1rem; 
}




#moreContent {
  display: none;
}

#moreButton {
  background-color: transparent;
  color: black;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  transition: height 0.2s ease, overflow 0.2s ease;
}


.moreButton{
    background-color: transparent;
  color: black;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}

.cardHeader{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;

}



.card-basic,
.card-standard,
.card-premium {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 2rem 1rem 0;
  padding: 0 0 0.5rem 0;
  background: #fff;
  color: #444;
  text-align: center;
  border-radius: 0.5rem;
  box-shadow: 0.5rem 0.5rem 1rem rgba(51, 51, 51, 0.2);
  overflow: hidden;
  transition: all 0.3ms ease-in-out;
  flex-grow: 1;
  height: 420px;
}

.card-basic2,
.card-standard2,
.card-premium2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 2rem 1rem 0;
  padding: 0 0 0.5rem 0;
  background: #fff;
  color: #444;
  text-align: center;
  border-radius: 0.5rem;
  box-shadow: 0.5rem 0.5rem 1rem rgba(51, 51, 51, 0.2);
  overflow: hidden;
  transition: all 0.3ms ease-in-out;
  flex-grow: 1;
  height: fit-content;
}


.card-basic2{
  position: relative;
  overflow: visible;
}


.card-standar2{
  height: fit-content !important;
}

.card-header {
  height: 5rem;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 1rem 0;
  color: #fff;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}


.card-header h1{
  font-size: 2.3rem !important;
}

.card-header h2{
  font-size: 2.3rem !important;
}

.header-basic,
.btn-basic {
   background-color: #1575bc;
   border: 1px solid #1575bc !important;
}

.btn-moreinfo{
  background-color: white;
  color: #1575bc !important;
  border: 1px solid #1575bc !important;
  border-radius: 8px !important;
}

.btn-moreinfo:hover{
  background-color: #1575bc !important;
  color: white !important;
}


.btn-moreinfo2{
  background-color: white;
  color: #00afaf !important;
  border: 1px solid #00afaf !important;
  border-radius: 8px !important;
}

.btn-moreinfo2:hover{
  background-color: #00afaf !important;
  color: white !important;
}



.btn-moreinfo3{
  background-color: white;
  color: #f0524d !important;
  border: 1px solid #f0524d !important;
  border-radius: 8px !important;
}

.btn-moreinfo3:hover{
  background-color: #f0524d !important;
  color: white !important;
}


.btn-moreinfo4{
  background-color: white;
  color: #38b54a !important;
  border: 1px solid #38b54a !important;
  border-radius: 8px !important;
}

.btn-moreinfo4:hover{
  background-color: #38b54a !important;
  color: white;
}


.btn-moreinfo5{
  background-color: white;
  color: #009cd7 !important;
  border: 1px solid #009cd7 !important;
  border-radius: 8px !important;
}

.btn-moreinfo5:hover{
  background-color: #009cd7 !important;
  color: white;
}


.header-standard,
.btn-standard {
  /* background: linear-gradient(to right, #00afaf, #00d1d1); */
  background-color: #00afaf;
  border: 1px solid #00afaf !important;
}
.header-premium,
.btn-premium {
  /* background: linear-gradient(to right, #f0524d, #f3806b); */
  background-color: #f0524d;
  border: 1px solid #f0524d !important;
}

.header-recomendado{
  background-color: #212529;
}


.header-remarketing,
.btn-remarketing{
  background-color: #38b54a;
  border: 1px solid #38b54a !important;
}


.header-shopping,
.btn-shopping{
  background-color: #009cd7;
  border: 1px solid #009cd7 !important;
}

.header-economica,
.btn-economica {
  background: linear-gradient(to right, #fdbd26, #ffea00);
}

.header-personalizada,
.btn-personalizada {
  background: linear-gradient(to right, #38b54a, #76d17e);
}

.header-inmobiliaria,
.btn-inmobiliaria{
  background: linear-gradient(to right, #a9479b, #d06db6);
}

.header-hoteleria,
.btn-hoteleria{
  background: linear-gradient(to right, #ee1a7b, #f66db5);
}

.header-turismo,
.btn-turismo{
  background: linear-gradient(to right, #009cd7, #4bb4e8);
}


.card-body {
  padding: 20px;
  /* flex-grow: 1; */
  display: flex;
  flex-direction: column;
}
.card-body h2 {
  font-size: 1.8rem;
  font-weight: 700;
}
.card-element-container {
  color: #444;
  list-style: none;
  font-size: 14px;
  text-align: left;
}



.btn {
  margin-top: auto;
  /* margin: 0.5rem 0; */
  font-size: 16px;
  padding: 0.7rem 0.8rem;
  outline: none;
  border-radius: 1rem;
  font-weight: 400;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.1ms ease-in-out;
  width: 100%;
}
.btn:hover {
  color: white !important;
  
}
.btn:active {
  color: white !important;
}
.card-element-hidden {
  display: none;
}

.card-element{
  margin-bottom: 8px;
}



.gradienteLanding{
 background: linear-gradient(to right, #1575bc, #1d9db9); 
 -webkit-background-clip: text; 
color: transparent;
}

.gradienteEcommerce{
  background: linear-gradient(to right, #00afaf, #00d1d1);
  -webkit-background-clip: text;
  color: transparent;
}

.gradienteAutogestionable{
  background: linear-gradient(to right, #f0524d, #f3806b);
  -webkit-background-clip: text;
  color: transparent;
}

.gradienteEconomica{
  background: linear-gradient(to right, #fdbd26, #ffea00);
  -webkit-background-clip: text;
  color: transparent;
}

.gradientePersonalizada{
  background: linear-gradient(to right, #38b54a, #76d17e);
  -webkit-background-clip: text;
  color: transparent;
}

.gradienteInmobiliaria{
  background: linear-gradient(to right, #a9479b, #d06db6);
  -webkit-background-clip: text;
  color: transparent;
}

.gradienteHoteleria{
  background: linear-gradient(to right, #ee1a7b, #f66db5);
  -webkit-background-clip: text;
  color: transparent;
}

.gradienteTurismo{
  background: linear-gradient(to right, #009cd7, #4bb4e8);
  -webkit-background-clip: text;
  color: transparent;
}


.swiper-container {
  width: 100%;
  overflow: hidden;
} */

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
} */

 .swiper-wrapper{
  height: auto !important;
}


@media screen and (max-width: 768px){
  .card-body h2 {
    font-size: 1.9rem !important;
    font-weight: 700;
  }

  .contenedorGeneral .rowPricingCard{
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .contenedorGeneral .rowPricingCard2{
    grid-template-columns: repeat(1, 1fr) !important;
  }
  
  
  .card-body{
      padding: 20px 10px;
  }
}


.card-basic,
.card-standard,
.card-premium{
  min-height: 400px;
  transition: all 0.3s ease-in-out; /* Transición suave para la expansión */
  overflow: hidden; /* Evita que el contenido se desborde al expandirse */
}



.swiper-button-next,
.swiper-button-prev {
  color: rgb(19, 167, 225) !important;
}



.contenedorGeneral .rowPricingCard {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1rem; 

}


.contenedorGeneral .rowPricingCard2 {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem; 


}




.buttonInfo{
  display: flex;
  flex-direction: row;
  gap: 5px;
}


#he2{
  background-color: #1a83c9;
}

#he3{
  background-color: #2492d6;
}

#he4{
  background-color: #3fa6e2;
}



.contenedorMantenimiento{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}




.icono-servicio{
  color: rgb(19, 167, 225) !important;
}

.posicionamientoCaracteristica{
  font-size: 14px;
}

@media (max-width: 768px) {
  .contenedorMantenimiento {
    flex-direction: column;
    align-items: center;
  }


  .posicionamientoCaracteristica {
 
  }

  .imagenSection {
    width: 100%;
    text-align: center;
  }

  .imagenSection video {
    width: 100%;
  }

  .rowTarjeta {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .serviceTarjeta {
    width: 100%;
    margin-bottom: 15px;
  }

  .itemGrid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .icono-servicio {
    font-size: 2rem;
    margin-bottom: 10px;
  }
}



#inmobiliaria{
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}


.recommended-ribbon {
  z-index: 9999;
  position: absolute;
  top: 10px;
  right: -30px;
  background-color: #000000;
  border-radius: 5px;
  color: white;
  padding: 5px 20px;
  transform: rotate(45deg);
  font-size: 14px;
  font-weight: bold;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}


/* .recommended-badge {
  z-index: 9999;
  position: absolute;
  top: 30;
  right: 30%;
  transform: translateY(-50%);
  background-color: #212529;
  border-radius: 5px;
  color: white;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}


@media (max-width: 768px) {
  .recommended-badge {
    font-size: 12px;
    padding: 4px 8px;
    top: 10px;
    right: 10px;
    transform: none;
  }
} */

.recommended-badge {
  z-index: 9999;
  position: absolute;
  top: -10px;
  right: 0;
  transform: translateY(-50%);
  background-color: #212529;
  border-radius: 5px;
  color: white;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}

.rowAds{
display: flex;
flex-direction: column;
width: 100%;
}


.rowImgContainer{
  display: flex;
  justify-content: center;
  margin: 10px 0px;
}

.rowAdsImg{
  width: 50%;
  height: fit-content;
display: flex;
justify-content: center;
}



/* social media cards */






.custom-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;

}

.custom-wrapper h2 {
  color: white;
  text-align: center;
  font-size: 34px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.unique-grid {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 25px;
}

.unique-item {
  background-color: white;
  box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.1);
  color: white;
  width: 360px;
  padding: 30px 15px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease-in-out;
}



.unique-item h3,
.unique-item p {
  margin: 0px;
  text-align: center;
  color: #212529;
}

/* .unique-item i {
  background-color: #f8f8f8;
  color: #212529;;
  width: 96px;
  height: 96px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  margin-bottom: 16px;
  font-size: 24px;
} */


#serviceSocial{
  background-color: #f9f9f9;
  color: rgb(19, 167, 225);
  /* color: #1575bc; */
  width: 96px;
  height: 96px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  margin-bottom: 16px;
  font-size: 50px;
}



.wide-card-container {
  width: 100%;
  display: flex;
  gap: 25px;
  margin-top: 30px;
}

.wide-card h3,
.wide-card p {
  margin: 0px;
  text-align: center;
  color: #212529;
}

.wide-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  background-color: white;
  box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.1);
  color: white;
  padding: 30px 15px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease-in-out;
  gap: 10px;
}

/* .wide-card i{
  background-color: #f8f8f8;
  color: #212529;
  width: 96px;
  height: 96px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  margin-bottom: 16px;
  font-size: 24px;
} */


/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  .unique-grid {
    width: 100%;
    flex-direction: column;
  }

  .unique-item{
    width: 100%;
  }

  .wide-card-container {
    flex-direction: column;
    width: 100%;
  }

  .wide-card {
    width: 100%;
  }
}





.overlay-container {
  position: relative;
  display: inline-block;
}

.overlay-container img {
  display: block;
  width: 100%;
}


.videoOverlay{
  width: 100%;

}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9); 
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  transition: opacity 0.3s ease;
  opacity: 0;
  border-radius: 8px;
}

.overlay:hover{
  opacity: 1;
}


.overlay p{
  color: white;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
}



.boximg{
  width: 96px !important;
  height: 96px !important;
}


.imgAndtextContainer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}