@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');





html {

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

}



body {

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

  width: 100%;

}



footer{

  border-top-left-radius: 8px;

  border-top-right-radius: 8px;

  background-color: #222222;

}





.textoSeparador{

    font-family: "Comfortaa", serif;

    font-optical-sizing: auto;

    font-weight: 400;

    font-style: normal;

  

}







.contenedorGeneral {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 8px;

    position: relative;

  }





  h3{

    font-size: 17.5px;

  }





/* HEADER */

header.contenedorGeneral{

    margin-bottom: 140px;

}



header{

    z-index: 999999999;



}



nav {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    padding: 10px;

    transition: all 0.4s ease;

    background-color: white;

    border-bottom: gainsboro 1px solid;



  }

  nav.sticky {

    padding: 15px 20px;

    background: white;

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



  }

  nav .nav-content {

    height: 100%;

    max-width: 1200px;

    margin: auto;

    display: flex;

    align-items: end;

    justify-content: space-around;

  }

  nav .logo a {

    font-weight: 500;

    font-size: 35px;

    color: #7D7D7D;

  }

  nav.sticky .logo a {

    color: #fff;

  }

  

  .nav-content .nav-links {

    display: flex;

  }

  

  .nav-content .nav-links li {

    list-style: none;

    margin: 0 8px;

  }

  

  .nav-links li a {

    text-decoration: none;

    color: #7D7D7D;

    font-size: 14px;

    font-weight: 500;

    padding: 10px 4px;

    transition: all 0.3 ease;

  }





  .nav-links li a:hover{

    color: rgb(255,23,135);

  }



  



  

  .nav.sticky .nav-links li a {

    color: #fff;

    transition: all 0.4 ease;

  }

  

  .nav.sticky .nav-links li a:hover {

    color: #0e2431;

  }







  



  

  .text {

    text-align: justify;

    padding: 40px 80px;

    box-sizing: -5px 0 10px rgba(0, 0, 0, 0.1);

    line-height: 27px;

  }

  





  /* FOOTER */





  .bg-footer {

    background-color: #33383c;

    padding: 20px 20px 20px 20px;

}

.footer-heading {

    letter-spacing: 2px;

    margin: 0px;

}



.footer-link{

    margin: 0px;

}



.footer-link a {

    color: #acacac;

    line-height: 35px;

    font-size: 14px;

    transition: all 0.5s;

    text-decoration: none;

    margin: 0px;

}



.footer-link a:hover {

    color: white;

}



.contact-info {

    color: #acacac;

    font-size: 14px;

}



.footer-social-icon {

    font-size: 15px;

    height: 34px;

    width: 34px;

    line-height: 34px;

    border-radius: 3px;

    text-align: center;

    display: inline-block;

}







.footer-alt {

    color: #acacac;

}



.footer-heading {

    position: relative;

    padding-bottom: 12px;

}









/* CSS DEIMON */







h3{

  font-size: 17.5px;

}





h5{

  font-size: 14px;

}



a{

  text-decoration: none;

}











.contenedorGeneral .rows{

  display: grid;

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

  gap: 1rem;

  justify-items: center;

}





/* CARDS INDEX */



.serviciosContainer {

  display: grid;

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

  gap: 5px;

  width: 100%;

  border-radius: 8px;

}



.servicio{

  border-radius: 8px;

}



.servicio a{

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 2rem;

  text-align: center;

  color: white;

  transition: transform 0.3s ease;

  border-radius: 8px !important;

}









.servicio img {

  width: 96px;

  height: 96px;

  margin-bottom: 1rem;

}



.servicio span {

  font-size: 1.1rem;

  font-weight: 500;

}



.purple {

  background-color: #774894;

}



.blue {

  background-color: #57acde;

}



.pink {

  background-color: #db2c81;

}



/* Responsive design */

@media (max-width: 768px) {

  .serviciosContainer {

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

  }



  h1{

    font-size: 23px !important;

  }



  .serviciosContainer img{

    display: none;

  }



  .logo{

    width: 186px;

    height: 45px !important;

    margin-top: 10px;

}

}



@media (max-width: 480px) {

  .serviciosContainer {

    grid-template-columns: 2fr;

  }

}











.logo{

    height: 60px;

    margin-top: 10px;

}



.logo2{

  max-width: 300px;

  max-height: 46px;

  width: 100%;

  height: auto;

}



.navbar {

    margin-top: 20px;

    background-color: #db2b81 !important;

    padding: 8px;

    border-radius: 8px;

  }



  

  

  .navbar .nav-link {

    font-size: 14px;

    color: white !important; 

    text-decoration: none;

    padding: 0;

  }

  

  

  .navbar-nav {

    display: flex;

    justify-content: space-evenly;

    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: flex-end !important;

  }

  

  

  @media (max-width: 768px) {

    .containerLogo {

      flex-direction: row;

      gap: 10px;

      justify-content: center !important;

      align-items: center !important;

      padding: 7.5px 0px;

    }



    .logo2{

      margin-top: 20px;

    }

  

    .manejoRedes{

      margin-top: -10px !important;

    }

  

    .navbar-toggler {

      color: white !important;

    }

  

    .navbar-nav {

      flex-direction: column;

      margin: 16px 0px !important;

      text-align: left;

    }



    .navbar .nav-link {

      font-size: 16px !important;

      color: white !important; 

      text-decoration: none;

      padding: 0;

    }

  

  





  

    .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

  }









  /* TITULOS */



  .tituloSecundario {



    font-size: 30px;

  

    font-weight: normal;

  

  

    display: inline-block;

  

    border-bottom: 3px solid #db2b81;

  

    padding-bottom: 0.1rem; 

  

    margin-bottom: 5px;

  

    text-align: center;

  

  }



  .bienvenidaTextos {



    display: flex;

  

    flex-direction: column;

  

    justify-content: center;

  

    height: fit-content;

  

    width: 50%;

  

    align-items: flex-start; }

  

    .bienvenidaTextos h1 {

  

      font-size: 35px;

  

      font-weight: normal;

  }

  

      .bienvenidaTextos h1 span {

  

        display: inline-block;

  

        color: #db2b81;

  

        font-weight: bold; }

  



        .textoIntro{

          color: #212529;

          font-weight: 400;

          font-size: 15.5px;

        }













  /* SECCION */





  .bienvenida {



    display: flex;

  

    justify-content: center;

  

    align-items: center;

  

    gap: 30px;

  

  }



  .seccionBienvenida p{



    text-align: justify;

    word-spacing: 1px;  

  }



  .home{

    margin-top: 20px;

  }







  /* IMAGEN */



  .imagenBienvenida {



    width: 50%;

  

    display: inline-block;

  

    text-align: center;

  

  

  

  }





  .imagenBienvenida img {



    width: 100%;



    height: 100%;



    border-radius: 10px;



  }







  @media (max-width: 768px) {



    .imagenBienvenida img {



      max-width: 100%;  



      margin: 0 auto;  



      display: block;



    }



    .contenedorGeneral .rows{

      display: grid;

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

      gap: 1rem;

      justify-items: center;

    }





    .tituloSecundario{

      font-size: 20px !important;

    }





    .seccionBienvenida{

      padding: 0px 8px;

    }



    .serviciosContainer{

      padding: 0px 8px;

    }

  }



  



  @media (max-width: 480px) {



    .imagenBienvenida img {



      max-width: 100%;  



    }



  }









  /* BOTON */





  .boton {



    font-size: 14px;



    color: white;



    font-weight: 700;



    text-decoration: none;



    padding: 15px;



    background: rgb(16,118, 188);



    border-radius: 25px;



    opacity: 1;



    transform: scaleX(1);



    transition: all .2s; }



    .boton:hover {



      opacity: .8;





      color: white; }











      /* ID COLOR BACKGROUND */



      #bg1{

        background-color: rgb(145, 36, 129);

      }



      #bg2{

        background-color: rgb(46, 169, 225)

      }



      #bg3{

        background-color: rgb(226, 20, 122);

      }



      #t1{

        color: rgb(145, 36, 129);

        font-size: 24.5px;

        font-weight: 400;

      }



      #t2{

        color: rgb(46, 169, 225);

        font-size: 24.5px;

        font-weight: 400;

      }



      #t3{

        color: rgb(226, 20, 122);

        font-size: 24.5px;

        font-weight: 400;

      }





.estructure{

  display: flex;

  flex-direction: row;

  text-align: justify;

  gap: 10px;

  margin: 5px;

  padding: 0px;

}





.agencia{

  min-width: 285px;

  min-height: 200px;

  border-radius: 8px;

  display: flex;

  justify-content: center;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}







/* METODO DE TRABAJO */



:root {

  --primary: #db2b81;

  --primary-light: #f6c1d7;

  --text-primary: #333;

  --text-secondary: #666;

  --background: #f4f4f4;

}





.card-grid {

  display: grid;

  gap: 24px;

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

}



.card {

  background: white;

  border-radius: 8px;

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

  overflow: hidden;

  border-left: 4px solid var(--primary);

}



.card-header {

  padding: 16px;

  display: flex;

  align-items: center;

  gap: 12px;

}



.card-icon {

  background: var(--primary-light);

  padding: 12px;

  border-radius: 100%;

}



.card-icon svg {

  width: 24px;

  height: 24px;

  fill: var(--primary);

}



.card-title {

  font-size: 16px;

  color: var(--text-primary);

}



.card-subtitle {

  font-size: 0.875rem;

  text-align: justify;

  color: var(--text-secondary);

}



.card-content {

  padding: 16px;

}



.card-content p {

  margin-bottom: 16px;

  color: var(--text-secondary);

  font-size: 0.875rem;

}



.card-list {

  list-style-type: none;

}



.card-list li {

  display: flex;

  align-items: center;

  margin-bottom: 8px;

  font-size: 0.875rem;

}



.card-list li::before {

  content: "";

  display: inline-block;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background-color: var(--primary);

  margin-right: 8px;

}



@media (max-width: 768px) {

  .card-grid {

      grid-template-columns: 1fr;

  }

}







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



  /* MEDIA QUERY BIENVENIDA SECTION */



  .bienvenida {



    flex-direction: column-reverse;



    justify-content: center;



    align-items: center;



    text-align: center; 



    border-radius: 10px;



    margin-top: 10px !important;



  }



  .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: 30px;

      font-weight: normal;





 }



 .bienvenidaTextos h2{

  font-size: 20px !important;

 }







    }







    /* INTRO  */





    .section {

      display: flex;

      margin-bottom: 2px;

      min-height: 200px;

  }

  

  .logo-container {

      width: 300px;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      padding: 2rem;

      color: white;

      border-radius: 5px;

  }

  

  .logoCard {

      width: 80px;

      height: auto;

      margin-bottom: 1rem;

  }

  

  .content {

      flex: 1;

      padding: 2rem;

      background: white;

      text-align: justify;

  }

  

  .content h2 {

      color: #666;

      margin-top: 0;

      margin-bottom: 1rem;

  }

  

  .content p {

      color: #444;

      margin-bottom: 0.8rem;

      line-height: 1.5;

  }

  

  .marketing .logo-container {

    background-color: #774894;

  }

  

  .design .logo-container {

    background-color: #57acde;

  }

  

  .publicity .logo-container {

    background-color: #db2c81;

  }





  

  .link {

      color: #3498db;

      text-decoration: none;

  }

  

  .link:hover {

      text-decoration: underline;

  }

  

  /* Responsive design */

  @media (max-width: 768px) {

      .section {

          flex-direction: column;

          padding: 0px 8px;

      }



  

      .logo-container {

          width: 100%;

          padding: 1rem;

      }

  

      .content {

          padding: 1rem;

      }



  }









  /* SEPARADOR DEIMON */



  .separator {

    display: flex;

    align-items: center;

    text-align: center;

    margin: 20px 0;

  }

  

  .separator hr {

    flex-grow: 1; 

    border: 3px solid #979ba1;

    border-radius: 5px;

    opacity: inherit;

  }

  

  

  .separator img {

    margin: 0 10px; 

    max-height: 16px;

    max-width: 50px;

  }





  /* QUE INCLUYE Y POR QUE CONTRATARNOS */





  .why-hire-us {

    background-color: #db2b81;

    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 h2 {

    color: white;

    padding: 2rem;

    font-size: 20px;

    font-weight: 600;

    text-align: center;

  }







  .reasons-list {

    background: white;

    padding: 20px;

    border-radius: 0 0 1rem 1rem;

  }



  .reason-item p{

    margin-bottom: 0px;

  }

  

  .reason-item {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1rem;

    margin-bottom: 1rem;

    background: #f8f9fa;

    border-radius: 0.75rem;

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

  }

  

  

  .reason-item:last-child {

    margin-bottom: 0;

  }

  

  .icon {

    color: #db2b81;

    font-size: 1.5rem;

    min-width: 24px;

    text-align: center;

  }

  

  .highlight {

    color: #db2b81;

    font-weight: 600;

  }

  

  @media (max-width: 768px) {

    .contenedorGeneral {

  

    }

  

    .why-hire-us h2 {

        padding: 1.5rem;

        font-size: 1.5rem;

    }

  

    .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: #db2b81;

      color: #ffffff;

      font-size: 15px;

      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;

      }

  

      .feature-item__number {

          padding: 0.5rem;

          font-size: 1.1rem;

          justify-content: flex-start;

      }

  }





  /* cards webs */



  .rowsWeb {

    display: grid;

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

    gap: 10px;

  }









  .row .service {

    background: white;

    color: white;

    font-size: 15px;

    border-radius: 5px;

    text-align: center;

    cursor: pointer;

    transition: 0.5s;

  }



  .row .service p {

    color: white;

  }



  .row .service:hover {

    color: #fff;

    transform: scale(1.05);

  }

  .row .service i {

    color: white;

    margin-bottom: 20px;

    font-size: 40px;

    transition: 0.5s;

  }

  .row .service:hover i {

    color: #fff;

  }

  .row .service h2 {

    font-weight: 600;

    margin-bottom: 20px;

  }





  .icon{

    max-width: 64px;

    max-height: 64px;

  }



  #w1{

    color: #1575bc;

  }



  #w2{

    color: #fdbd26;

  }



  #w3{

    color: #f0524d;

  }



  #w4{

    color: #38b54a;

  }



  #w5{

    color: #00afaf;

  }



  #w6{

    color: #a9479b;

  }



  #w7{

    color: #ee1a7b;

  }



  #w8{

    color: #009cd7;

  }





  .rowsWeb .web1 {

    max-height: 230px;

    max-width: 280px;

    min-height: 230px;

    background-color: #1575bc;

    font-size: 15px;

    border-radius: 5px;

    text-align: center;

    cursor: pointer;

    transition: 0.5s;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

  }



  .rowsWeb .web2 {

    max-height: 230px;

    max-width: 280px;

    min-height: 230px;

    background: #fdbd26;

    font-size: 15px;

    border-radius: 5px;

    text-align: center;

    cursor: pointer;

    transition: 0.5s;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

  }





  .rowsWeb .web3 {

    max-height: 230px;

    max-width: 280px;

    min-height: 230px;

    background: #f0524d;

    font-size: 15px;

    border-radius: 5px;

    text-align: center;

    cursor: pointer;

    transition: 0.5s;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

  }



  .rowsWeb .web4 {

    max-height: 230px;

    max-width: 280px;

    min-height: 230px;

    background: #38b54a;

    font-size: 15px;

    border-radius: 5px;

    text-align: center;

    cursor: pointer;

    transition: 0.5s;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

  }





  .rowsWeb .web5 {

    max-height: 230px;

    max-width: 280px;

    min-height: 230px;

    background: #00afaf;

    font-size: 15px;

    border-radius: 5px;

    text-align: center;

    cursor: pointer;

    transition: 0.5s;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

  }



  .rowsWeb .web6 {

    max-height: 230px;

    max-width: 280px;

    min-height: 230px;

    background: #a9479b;

    font-size: 15px;

    border-radius: 5px;

    text-align: center;

    cursor: pointer;

    transition: 0.5s;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

  }



  .rowsWeb .web7 {

    max-height: 230px;

    max-width: 280px;

    min-height: 230px;

    background: #ee1a7b;

    font-size: 15px;

    border-radius: 5px;

    text-align: center;

    cursor: pointer;

    transition: 0.5s;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

  }



  .rowsWeb .web8 {

    max-height: 230px;

    max-width: 280px;

    min-height: 230px;

    background: #009cd7;

    font-size: 15px;

    border-radius: 5px;

    text-align: center;

    cursor: pointer;

    transition: 0.5s;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

  }





.buttonWeb{

    border: none;

    border-radius: 5px;

    padding: 6px 12px;

    background-color: #343a40;

    color: white;

    margin-left: auto;

    margin-right: auto;

    display: block;

    font-size: 1.2em;

    text-align: center;

    

}





@media (max-width: 768px) {

  .contenedorGeneral .rowsWeb{

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

  }

  

  .rowsWeb .service {

    padding: 30px 20px;

    height: fit-content;

  }

  .service img {

    width: 80%; 

  }



  .rowsWeb a{

    font-size: 13px;

  }





}





.contenido{

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: space-between;

  width: 100%;

}









/* PUBLICIDAD INTERNET */



.rowP {

  display: grid;

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

  gap: 10px;

}







.rowP .pos1 {

  max-width: 380px;

  min-height: 290px;

  background-color: #1575bc;

  font-size: 15px;

  border-radius: 5px;

  text-align: center;

  cursor: pointer;

  transition: 0.5s;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.rowP .pos2 {

  max-width: 380px;

  min-height: 290px;

  background: #fdbd26;

  font-size: 15px;

  border-radius: 5px;

  text-align: center;

  cursor: pointer;

  transition: 0.5s;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}





.rowP .pos3 {

  max-width: 380px;

  min-height: 290px;

  background: #f0524d;

  font-size: 15px;

  border-radius: 5px;

  text-align: center;

  cursor: pointer;

  transition: 0.5s;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.rowP .pos4 {

  max-width: 380px;

  min-height: 290px;

  background: #38b54a;

  font-size: 15px;

  border-radius: 5px;

  text-align: center;

  cursor: pointer;

  transition: 0.5s;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}





.rowP .pos5 {

  max-width: 380px;

  min-height: 290px;

  background: #00afaf;

  font-size: 15px;

  border-radius: 5px;

  text-align: center;

  cursor: pointer;

  transition: 0.5s;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.rowP .pos6 {

  max-width: 380px;

  min-height: 290px;

  background: #a9479b;

  font-size: 15px;

  border-radius: 5px;

  text-align: center;

  cursor: pointer;

  transition: 0.5s;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.rowP .web7 {

  max-width: 380px;

  min-height: 290px;

  background: #ee1a7b;

  font-size: 15px;

  border-radius: 5px;

  text-align: center;

  cursor: pointer;

  transition: 0.5s;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.rowP .web8 {

  max-width: 380px;

  min-height: 290px;

  background: #009cd7;

  font-size: 15px;

  border-radius: 5px;

  text-align: center;

  cursor: pointer;

  transition: 0.5s;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



@media (max-width: 768px), (max-width: 1024px) {

  .rowP .pos1,

  .rowP .pos2,

  .rowP .pos3,

  .rowP .pos4,

  .rowP .pos5,

  .rowP .pos6 {

    min-height: auto;

  }

}





.buttonWeb{

  border: none;

  border-radius: 5px;

  padding: 6px 12px;

  background-color: #343a40;

  color: white;

  margin-left: auto;

  margin-right: auto;

  display: block;

  font-size: 1.2em;

  text-align: center;

}





@media (max-width: 768px), (max-width: 1024px) {

.rowP .pos1 .buttonWeb,

.rowP .pos2 .buttonWeb,

.rowP .pos3 .buttonWeb,

.rowP .pos4 .buttonWeb,

.rowP .pos5 .buttonWeb,

.rowP .pos6 .buttonWeb{

  display: flex;

}

}







/* SUMMARY */







/* details */



details{

  margin: 10px auto;

  padding: 15px;

  background-color: #fff;

  border-radius: 1rem;

  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, 0.1);

  

  summary{

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-weight: 600;

    margin-bottom: 0;

    transition: margin-bottom .4s;

    position: relative;

    font-size: 17px;

  }



  

  summary::-webkit-details-marker,

  summary::marker{

    display: none;

  }

  

 

  summary::after{

    content: "+";

    font-size: 1.5rem;

    font-weight: 400;

    line-height: 1;

    margin-right: 1rem;

    cursor: pointer;

    background-color: rgba(blue, .1);

    padding: .75rem;

    display: grid;

    place-content: center;

    aspect-ratio: 1;

    line-height: 0;

    position: absolute;

    top: -.5rem;

    right: -1.5rem;

    border-radius: 50%;

  }

  

  *:not(summary) {

    animation-name: fade;

    animation-duration: .4s;

  }

}



details p{

  font-size: 15px;

  margin-bottom: 8px;

}





details[open]{

  

  summary{

    margin-bottom: 1.5rem;

    

    &::after{

      content: "−";

    }

  }

}



@keyframes fade {

  0%{

    opacity: 0;

  }

  

  100%{

    opacity: 1;

  }

}





/* Colors */



#s1{

  color: rgb(66, 133, 244);

}



#s2{

  color: #fdbd26;

}



#s3{

  color: #f0524d;

}



#s4{

  color: #38b54a;

}



#s5{

  color: #009cd7;

}



#s6{

  color: #a9479b;

}







.infoServices{

  display: flex;

  justify-content: space-between;

  align-items: center;

}





.masInfo{

  padding: 5px;

  background-color: rgb(66, 133, 244);

  color: white;

  font-size: 16px;

  border: none;

  border-radius: 5px;

}



.photoAndText{

  display: flex;

  justify-content: center;

  align-items:  center;

  gap: 10px;

}



#b1{

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

}



#b2{

  background-color: #fdbd26;

}



#b3{

  background-color: #f0524d;;

}



#b4{

  background-color: #38b54a;;

}



#b5{

  background-color: rgb(1,175,176);

}



#b6{

  background-color: #a9479b;;

}







/* INFO */



.infoContainer1{

  max-width: 105px;

  max-height: 107px;

  background-color: rgb(66, 133, 244);

  border-radius: 5px;

}



.infoContainer2{

  max-width: 123px;

  max-height: 190px;

  background-color: #fdbd26;

  border-radius: 5px;

}



.infoContainer3{

  max-width: 123px;

  max-height: 190px;

  background-color: #f0524d;

  border-radius: 5px;

}



.infoContainer4{

  max-width: 123px;

  max-height: 190px;

  background-color: #38b54a;

  border-radius: 5px;

  padding: 10px;

}



.infoContainer5{

  max-width: 123px;

  max-height: 190px;

  background-color: #009cd7;

  border-radius: 5px;

}



.infoContainer6{

  max-width: 123px;

  max-height: 190px;

  background-color: #a9479b;

  border-radius: 5px;

}









/* MEDIAQ */



@media (max-width: 768px) {



  .btnMargin{

    margin-top: 20px;

  }



  .photoAndText {

    flex-direction: column;

    align-items: center;

  }



  summary {

    font-size: 1.4rem;

  }



  details p {

    font-size: 1.3rem;

  }

  .infoServices{

    display: flex;

    flex-direction: column;

  }



  .masInfo{

    padding: 5px;

    background-color: rgb(66, 133, 244);

    color: white;

    font-size: 20px;

    border: none;

    border-radius: 5px;

    text-decoration: none;

  }



}



@media (max-width: 480px) {



  .btnMargin{

    margin-top: 20px;

  }



  summary {

    font-size: 1.2rem;

  }



  .photoAndText img {

    width: 92px;

    height: auto;

  }



  #b1,#b2,#b3,#b4,#b5,#b6,#b7,#b8,#b10.masInfo{

    padding: 5px;

    color: white;

    font-size: 20px;

    border: none;

    border-radius: 5px;

    text-decoration: none;

  }



  .masInfoBtn{

    margin: 10px 0px;

  }



  details p {

    font-size: 14px;

  }



  .infoContainer3{

    width: 92px;

    height: auto;

  }

  .backgroundContainer1{

    width: 100%;

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

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundContainer2{

    width: 100%;

    background-color: #fdbd26;

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundContainer3{

    width: 100%;

    background-color: #f0524d;

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundContainer4{

    width: 100%;

    background-color: #38b54a;

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundContainer5{

    width: 100%;

    background-color: rgb(1,175,176);

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundContainer6{

    width: 100%;

    background-color: #a9479b;

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundContainer7{

    width: 100%;

      background-color: rgb(175, 79, 153);

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }







  .backgroundPage1{

    width: 100%;

      background-color: rgb(21, 117, 188);

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundPage2{

    width: 100%;

      background-color: rgb(253, 189, 38);

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundPage3{

    width: 100%;

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

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundPage4{

    width: 100%;

      background-color: rgb(56, 181, 74);

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundPage5{

    width: 100%;

      background-color: rgb(0, 175, 175);

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundPage6{

    width: 100%;

      background-color: rgb(169, 71, 155);

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundPage7{

    width: 100%;

      background-color: rgb(238, 26, 123);

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundPage8{

    width: 100%;

      background-color: rgb(0, 156, 216);

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }



  .backgroundPage11{

    width: 100%;

      background-color: rgb(66, 133, 244);

      border-radius: 8px;

      display: flex;

      justify-content: center;

  }

}







@media (max-width: 768px) {

  .contenedorGeneral .rowP{

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

  }

  

  .rowP .service {

    padding: 30px 20px;

    height: fit-content;

  }

  .service img {

    width: 80%; 

  }



  .rowP a{

    font-size: 13px;

  }



  .line{

    border-bottom: none !important;

  }





}







/* SERVICES GRID */





.services-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  gap: 20px;

  max-width: 1200px;

  margin: 0 auto;

}



.service-card {

  color: white;

  font-weight: 400;

  border: 1px solid #ddd;

  border-radius: 8px;

  padding: 20px;

  text-align: center;

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

  transition: transform 0.3s ease;

  text-transform: capitalize;

}



.service-card a{

  color: white;

  font-weight: 400;

  text-decoration: none;

  font-size: 16px;

}







.service-card h3 {

  font-size: 18px;

  margin-bottom: 10px;

}



.service-card p {

  font-size: 14px;

  color: white;

}







#c1{

  background-color: rgb(66, 133, 244);

}



#c2{

  background-color: #fdbd26;

}



#c3{

  background-color: #f0524d;

}



#c4{

  background-color: #38b54a;

}



#c5{

  background-color: #009cd7;

}



#c6{

  background-color: #a9479b;

}





@media (max-width: 768px) {



  .services-grid{

    grid-template-columns: repeat(auto-fill, minmax(150px, 2fr));

    gap: 10px;

    padding: 10px;



  }



  .service-card{

    padding: 10px;

  }



  .service-card a{

    font-size: 14px;

  }



}







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

  }

}





.line{

  border-bottom: 2px solid;

  padding: 1rem !important;

}



#l1{

  color: #774894;

}



#l2{

  color: #57acde;

}



#l3{

  color: #db2c81;

}









.agencyContainer{

  width: 100%;

  display: flex;

  justify-content: space-around;

  margin-bottom: 20px;

}





/* Mantenimiento Web */



.contenidoIframe{

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: space-between;

  width: 100%;

}





@media (max-width: 768px) {



  .contenidoIframe{

    flex-direction: column;

    padding: 0px 8px;

  }



  .spacing{

    gap: 30px;

  }



  .slider{

    max-width: 410px;

  }



  .clientes p{

    font-size: 14px !important;

  }



  .contenidoIframe p{

    font-size: 14px;

  }



  .contenidoIframe h2{

    margin-bottom: 20px;

  }



  .imagenIntro{

    height: 410px;

    margin-bottom: 20px;

  }



  iframe{

    max-width: 410px;

  }





  .agencyContainer{

    width: 100%;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

}







.imgCliente{

  width: 160px;

  height: auto;

  max-width: 185px;

  max-height: auto;

  border-radius: 5px;

}









.clientContainer{

  display: flex;

  justify-content: center;

  flex-direction: row;

  flex-wrap: wrap;

  gap: 20px;

}





.clientBox{

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

}





/* No hay equivalente directo para los mixins en CSS, por lo que tendrás que escribir el código que contiene el mixin directamente */

.white-gradient {

  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);

}



@keyframes scroll {

  0% { transform: translateX(0); }

  100% { transform: translateX(calc(-250px * 7)); }

}



/* Estilos del slider */

.slider {

  background: white;

  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);

  height: 130px;

  margin: auto;

  overflow: hidden;

  position: relative;

  width: 1200px;

}



/* Antes de transformar los pseudo-elementos, los mixins fueron reemplazados */

.slider::before,

.slider::after {

  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);

  content: "";

  height: 200px;

  position: absolute;

  width: 150px;

  z-index: 2;

}



.slider::after {

  right: 0;

  top: 0;

  transform: rotateZ(180deg);

}



.slider::before {

  left: 0;

  top: 0;

}



.slide-track {

  animation: scroll 40s linear infinite;

  display: flex;

  justify-content: center;

  align-items: center;

  width: calc(200px * 14);

}



.slide {

  /* height: 100px; */

  width: 250px;

}









.imgClient{

  width: 100%;

  height: auto;

  max-width: 130px;

  max-height: auto;

}



.slide{

  display: flex;

  justify-content: center;

  align-items: center;

}





.redes{

  display: flex;

  flex-direction: row !important;

  width: 100%;

  height: auto !important;

  justify-content: center;

  align-items: center;

}





.separatorFooter{

  border: 1.5px solid;

  border-radius: 5px;

}



.imagenPlanes {

  width: 100%; 

  max-width: 1200px; 

  height: auto; 

}



.conenedorImagenPlanes {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%; 

}

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


#mensajeForm{
  padding-bottom: 0px;
}