/* ===================================
    Cover
====================================== */

.cover{
  position: relative;
  min-height: 550px;
  display: flex;
  justify-content: center;
  align-items: end;
  background:linear-gradient(270deg, rgba(242, 242, 242, 0) 0%, #F2F2F2 250%),url("../../assets/img/soluciones/soluciones-header.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

/* ===================================
    Global
====================================== */

.gene-select {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 400;
}

.gene-text {
  background: #4657A3;
  color: #fff;
  padding: 8px 30px;
  border-radius: 32px;
  transition: transform 0.3s ease;
  font-size: 18px;
}

.gene-circle {
  width: 43px!important;
  height: 43px!important;
   aspect-ratio: 1 / 1!important;
  background-color:transparent;
  border-radius: 50%;
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.gene-circle img{
  width: 100%;
  height: 100%;
}

.content-gene-select{
  display: grid;
  grid-template-columns: 1fr;
  gap:10px;
}

#galery-geneselect .swiper-wrapper{
  padding-top: 30px;
  padding-bottom: 50px;
  background: transparent!important;
}

#galery-geneselect .img{
  width: 100%;
  height: 200px;
  border-radius: 16px;
  box-shadow: 0 5px 10px rgba(0,0,0,.18);
  transition: transform .35s ease, box-shadow .35s ease;
  overflow: hidden;
}

#galery-geneselect .img img{
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform .6s ease;
}

#galery-geneselect .img:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 10px rgba(0,0,0,.25);
}

#galery-geneselect .img:hover img{
  transform: scale(1);
}

/*Galery*/

.ventajas{
  width: 100%
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 0px;
}

.ventajas__head{
  display: flex;
  align-items: center;
  gap: 5px;
  flex-direction: column;
}

.ventajas__head h3{
  margin: 0;
  font-weight: 600;
  color: #4A87C6;
}

.ventajas__line{
  flex: 1;
  height: 1px;
  background: rgba(42,91,215,.35);
}

.ventajas__nav{
  display: flex;
  gap: 8px;
}



.swiper-button-next-ventajas::after {
  height: 100%;
 content: "\F285";
 font-family: bootstrap-icons !important;
 display: flex;
 justify-content: center;
 align-items: center;
}

.swiper-button-prev-ventajas::after {
  height: 100%;
content: "\F284";
font-family: bootstrap-icons !important;
display: flex;
justify-content: center;
align-items: center;
}

.swiper-button-next-ventajas {
  width: 30px!important;
  height: 30px!important;
   position: relative;

   display: flex;
   justify-content: center;
   align-items: center;
   top:0px;
   font-size: 18px;
   color: #4657A3;
   border: 1px solid #4657A3;
   border-radius: 50%;
     transition:all .7s ease;
}

.swiper-button-next-ventajas:hover{
  background:  #4A87C6;
  border: 1px solid  #4A87C6;
  color: #fff;
}

.swiper-button-prev-ventajas {
  width: 30px!important;
  height: 30px!important;
   position: relative;

   display: flex;
   justify-content: center;
   align-items: center;
   top:0px;
   font-size: 18px;
   color: #4657A3;
   border: 1px solid #4657A3;
   border-radius: 50%;
     transition:all .7s ease;
}

.swiper-button-prev-ventajas:hover {
  background:  #4A87C6;
  border: 1px solid  #4A87C6;
  color: #fff;
}

.swiper-button-next-ventajas.swiper-button-disabled, .swiper-button-prev-ventajas.swiper-button-disabled {
   opacity: .35;
   cursor: auto;
   pointer-events: none;
}

/* ==== Swiper layout ==== */
.ventajasSwiper{
      padding: 15px 0px 0px;
  overflow: hidden;
}

.ventajasCard{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px;
  align-items: center;

  border-radius: 22px;


  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);

  /* transición ventajas */
  transform: scale(.92);
  opacity: .55;
  transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .45s, filter .45s;
}

.ventajasCard__media{
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #eee;
}

.ventajasCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.ventajasCard__meta{
  position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 20px 10px 20px 0px;
}

.ventajasCard__num{
  font-size: 12px;
  color: rgba(42,91,215,.7);
  font-weight: 700;
  margin-bottom: 0px;
  margin-left: 10px;
}

.ventajasCard__title{
  margin: 0 0 10px;
  font-weight: 500;
  color: #1E2022;
  line-height: 1.2;
}

.ventajasCard__desc{
  margin-bottom:0px;
}

/* ===== Active slide (ventajas effect) ===== */
.swiper-slide-active.ventajasCard{
  transform: scale(1);
  opacity: 1;
  filter: none;
}

.swiper-slide-prev.ventajasCard,
.swiper-slide-next.ventajasCard{
  transform: scale(.96);
  opacity: .75;
}

/* texto entra suave */
.swiper-slide-active .ventajasCard__title,
.swiper-slide-active .ventajasCard__desc,
.swiper-slide-active .ventajasCard__num{
  animation: ventajasIn .45s ease both;
}

@keyframes ventajasIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .ventajasCard{
    grid-template-columns: 200px 1fr;
  }
}
@media (max-width: 650px){
  .ventajasCard{
    grid-template-columns: 1fr;
  }
  .ventajasCard__media{
    aspect-ratio: 16/10;
  }
  .ventajasCard__desc{
    max-width: none;
  }
}


/*Seccion colapse*/

.acordion-section-bg{
  background: linear-gradient(180deg, #E7EFF8 0%, rgba(255, 255, 255, 0) 100%);
}

.accordion-button h2{
  font-weight: 500;
  font-family: 'Onest', sans-serif!important;
  margin-bottom: 0px;
  margin-right: 40px;
}

.accordion-button:not(.collapsed) {
  color: initial;
  background-color: transparent;
  box-shadow: none;
  border: 0px;
}

.accordion-button {
  position: relative;
  display: initial;
  align-items: center;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 0px;
  padding-right: 15px;
  font-size:initial;
  color: initial;
  text-align: start;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;

}

.accordion-button::after{
  width: auto;
  padding: 10px;
position: absolute;
right: 0;
top: 25px;
content: "\F282";
font-size: 25px;
font-family: bootstrap-icons !important;
color: #4657A3;
background-image: none !important;

}

.orange-button::after{
  color: #F17D37!important;
}


.accordion-button:focus {
  z-index: 3;
  border-color: #D9D9D9 !important;
  box-shadow: 0 0 0 0 white;
}

.accordion-body{
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 50px;
}

.accordion-body p{
  margin: 0px;
}

.accordion-button:not(.collapsed)::after{
  width: auto;
  background-image: none;
  content: "\F286";
  font-size: 25px;
  font-family: bootstrap-icons !important;
  color: #4657A3;
  transform: none;
}

.orange-button:not(.collapsed)::after{color: #F17D37!important;}


.content-num{
  display: flex;
  align-items: center;
  gap:15px;
}

.content-num .num{
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border: 1px solid;
  border-image-source: linear-gradient(96.21deg, #F17D37 0.85%, #FFD0B4 53.28%, #FFBD96 100%);
  background: #FFB68A;
  border-radius: 50%;
  font-weight:500;
}

.alt-color .num{
  border: 1px solid;
  border-image-source: linear-gradient(96.21deg, #4657A3 0.85%, #C5CBE5 64.25%, #F2F4FF 100%);
  background: #fff;
  color:#4657A3;
}

.grid-lista{grid-template-columns: 1fr;}

/*Seccion brochure*/

.icon-dowloand{
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #4657A3;
  border-radius: 50%;
  color: #fff;
  font-size: 30px;
}

.grid-tec{grid-template-columns: 1fr;}

.grid-brochure {grid-template-columns: 55px 1fr;}

.card-center{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  min-height: 175px;
  padding: 20px;
  text-align: center;
  border: 1.5px solid;
border-image-source: linear-gradient(96.21deg, #EFEFEF 0.85%, #CFCFCF 53.28%, #F5F4F4 100%);
transition: transform .35s ease, box-shadow .35s ease;
}

.card-center:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}



.card-center .icon img{
  width: 85px;
  transform: scale(1.05);
  transition: transform .6s ease;
}

.card-center:hover .icon img{
  transform: scale(1);
}

/* ===================================
    Responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {

.grid-lista{grid-template-columns: 1fr 1fr;}

.grid-tec{grid-template-columns: repeat(2,1fr);}


#galery-geneselect .img{
  width: 100%;
  height: 300px;
}


} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

.grid-lista{grid-template-columns: 1fr 1fr;}
.grid-tec{grid-template-columns: repeat(2,1fr);}

.ventajas__head {flex-direction: row;gap:15px;}


#galery-geneselect .img{
  width: 100%;
  height: 300px;
}


}
/* md  */ @media (min-width: 768px) {
.grid-lista{grid-template-columns: 1fr;}

.grid-tec{grid-template-columns: repeat(4,1fr);}


#galery-geneselect .img{
  width: 100%;
  height: 250px;
}

.grid-brochure {grid-template-columns: 85px 1fr;}
.icon-dowloand{
  width: 85px;
  height: 85px;
  font-size: 45px;
}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.grid-lista{grid-template-columns: 1fr;}

#galery-geneselect .img{
  width: 100%;
  height: 350px;
}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {

.grid-lista{grid-template-columns: 1fr 1fr;}

}
/* xxl */ @media (min-width: 1400px) {}