/* ==========================================
   SECCIÓN: Súmate
   container: 1076
   gap: 24
   big: 526x436
   top: 526x252
   mini: 342x160
   hash: 160x160
   ========================================== */

.sumate{
  padding: 80px 0;
  background: #fff;
}

.sumate__container{
  max-width: 1076px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.sumate__head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 44px;
}

.sumate__title{
  margin: 0 0 14px;
  color: var(--azul2-100);
}

.sumate__subtitle{
  margin: 0 auto 16px;
  color: var(--texto-100);

}

.sumate__lead{
  margin: 0;
  color: var(--verde-100);
  
}

/* Grid principal: 2 columnas */
.sumate__grid{
  display: grid;
  grid-template-columns: 526px 526px;
  gap: 24px; /* ✅ gap horizontal */
  align-items: start;
  justify-content: center;
}

/* Card base */
.sumate__card{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

.sumate__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Medidas exactas */
.sumate__card--big{
  width: 526px;
  height: 436px;
}

.sumate__right{
  width: 526px;
  display: flex;
  flex-direction: column;
  gap: 24px; /* ✅ gap vertical */
}

.sumate__card--top{
  width: 526px;
  height: 252px;
}

.sumate__bottom{
  display: grid;
  grid-template-columns: 342px 160px;
  gap: 24px; /* ✅ gap horizontal */
}

.sumate__card--mini{
  width: 342px;
  height: 160px;
}

.sumate__card--hash{
  width: 160px;
  height: 160px;
  background: var(--verde-100);
  display: grid;
  place-items: center;
}

.sumate__hash{
  color: #fff;
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
}

/* Hover suave (opcional, consistente con tus otras secciones) */
.sumate__card{
  transition: transform .18s ease;
}
.sumate__card:hover{
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1120px){
  .sumate__grid{
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .sumate__card--big,
  .sumate__right,
  .sumate__card--top{
    width: min(526px, 100%);
  }

  .sumate__card--big{
    height: auto;
    aspect-ratio: 526 / 436;
  }

  .sumate__card--top{
    height: auto;
    aspect-ratio: 526 / 252;
  }

  .sumate__bottom{
    grid-template-columns: 1fr 160px;
  }

  .sumate__card--mini{
    width: 100%;
    height: auto;
    aspect-ratio: 342 / 160;
  }
}

@media (max-width: 520px){
  .sumate__bottom{
    grid-template-columns: 1fr;
  }

  .sumate__card--hash{
    width: 100%;
    height: 160px;
  }
}

/* ==========================================
   SUMATE – Quote card
   card: 1078x143
   icon: 55x79
   ========================================== */

.sumate-quote{
  padding: 40px 0;
  background: #fff;
}

.sumate-quote__container{
  max-width: 1078px;     /* ✅ ancho exacto de la card */
  margin: 0 auto;
  padding: 0 24px;
}

.sumate-quote__card{
  width: 1078px;
  height: 143px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  gap: 22px;

  padding: 24px 32px;
  background: var(--azul-10);             /* celeste suave (ajusta a tu variable si tienes) */
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

.sumate-quote__icon{
  width: 55px;
  height: 79px;
  flex: 0 0 55px;
  display: block;
}

.sumate-quote__text{
  margin: 0;
  color: var(--azul-100);
 
}

/* Responsive */
@media (max-width: 1120px){
  .sumate-quote__card{
    width: 100%;
    height: auto;
    min-height: 143px; /* conserva el “aire” */
  }
}

@media (max-width: 560px){
  .sumate-quote__card{
    padding: 18px 18px;
    gap: 16px;
  }
}

/* ==========================================
   Formas de colaboración (slider)
   container: 1284
   alto referencia: 332
   ========================================== */

.fc2{
  padding: 70px 0;
  background: #fff;
}

.fc2__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.fc2__title{
  text-align: center;
  margin: 0 0 34px;
  color: var(--azul2-100);
}

/* Slider layout */
.fc2__slider{
  position: relative;
  height: 332px;
  display: flex;
  align-items: center;
}

.fc2__nav{
  width: 56px;
  height: 56px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.fc2__nav img{
  width: 56px;
  height: 56px;
  display: block;
}

.fc2__viewport{
  flex: 1 1 auto;
  height: 542px;
  overflow: hidden;
}

.fc2__track{
  height: 332px;
  display: flex;
  transition: transform .35s ease;
  will-change: transform;
}

.fc2__slide{
  flex: 0 0 100%;
  height: 332px;
  display: flex;
  align-items: center;
}

/* Row inside each slide */
.fc2__row{
  width: 100%;
  height: 332px;
  display: grid;
  grid-template-columns: 334px 1fr;  /* orbe + texto */
  align-items: center;
  column-gap: 54px;
}


/* ORBE: imagen fija */
.fc2__orb{
  position: relative;
  width: 490px;
  height: 490px;
  margin-left: 22px;
  transform: scale(.68);            /* para calzar alto 332 */
  transform-origin: left center;
}

.fc2__orbimg{
  width: 490px;
  height: 490px;
  display: block;
}

/* NÚMERO: solo span (programable) */
.fc2__n{
  position: absolute;
  left: 48px;   /* ajusta fino según tu orbe exportado */
  bottom: 54px; /* ajusta fino según tu orbe exportado */

  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: var(--verde-100, #6bb400);
  color: #fff;

  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 35px rgba(0,0,0,.18);
}

/* Texto */
.fc2__h{
  margin: 0 0 10px;
  color: var(--azul-oscuro-100);
}

.fc2__p{
  margin: 0 0 18px;
  color: var(--azul-oscuro-100);
  
}

/* LISTA con checks via ::before */
.fc2__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.fc2__list li{
  position: relative;
  padding-left: 28px;
  color: var(--azul-oscuro-100);
  
}

.fc2__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background: url("../images/iconos/check_verde.svg") no-repeat center;
  background-size: 18px 18px;
}

/* Responsive (luego lo pules) */
@media (max-width: 980px){
  .fc2__slider{ height: auto; }
  .fc2__viewport{ height: auto; }
  .fc2__track{ height: auto; }
  .fc2__slide{ height: auto; padding: 14px 0; }

  .fc2__row{
    height: auto;
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .fc2__orb{
    margin-left: 0;
    transform: scale(.78);
    transform-origin: center;
    justify-self: center;
  }
}


/* ===========================
   WAVE reusable (bg blanco)
   =========================== */
.aq-wave{ background:#fff; overflow:hidden; }
.aq-wave__bg{
  height: 277px; /* ajusta si tu wave ya tiene otro alto */
  background: url("../images/wave/wave-testimonios.svg") no-repeat top center;
  background-size: cover;
}

/* ===========================
   Beneficios (container 1284)
   Orbe 490x490
   =========================== */
.ba{
  background: #eaf3f9;  /* ajusta a tu variable si tienes */
  padding: 56px 0 90px;
}

.ba__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.ba__title{
  text-align: center;
  margin: 0 0 44px;
  color: var(--azul2-100);
}

/* Layout 3 columnas */
.ba__layout{
  display: grid;
  grid-template-columns: 1fr 490px 1fr; /* centro exacto */
  align-items: center;
  column-gap: 56px; /* separacion lateral con el orbe */
}

/* columnas */
.ba__col{
  display: flex;
  flex-direction: column;
  gap: 110px; /* distancia vertical entre item 1 y 2 */
}

/* centro */
.ba__center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.ba__orb{
  width: 490px;
  height: 490px;
}
.ba__orb img{
  width: 490px;
  height: 490px;
  display: block;
}

/* items */
.ba__item{
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 320px; /* controla el ancho del bloque */
}

.ba__item--left{
  justify-content: flex-end;
  text-align: right;
  margin-left: auto;
}

.ba__item--right{
  justify-content: flex-start;
  text-align: left;
  margin-right: auto;
}

.ba__txt{
  margin: 0;
  color: var(--azul-oscuro-100);
  
}

/* iconos verdes */
.ba__ic{
  width: 48px;     /* ajusta al tamaño real de tu SVG */
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ba__ic img{
  width: 72px;
  height: 72px;
  display: block;
}

/* ===========================
   Responsive base (luego afinas)
   =========================== */
@media (max-width: 1024px){
  .ba__layout{
    grid-template-columns: 1fr;
    row-gap: 28px;
    justify-items: center;
  }

  .ba__col{
    gap: 18px;
    align-items: center;
  }

  .ba__item{
    max-width: 520px;
    text-align: left;
    justify-content: flex-start;
  }

  .ba__item--left,
  .ba__item--right{
    margin: 0;
  }
}

/* ==========================================
   CTA – Súmate a Aquafondo
   card: 1100 x 216
   ========================================== */

.cta-sumate{
  padding: 64px 0;
  background: var(--azul-10);
}

.cta-sumate__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Card */
.cta-sumate__card{
  position: relative;
  max-width: 1100px;
  height: 216px;
  margin: 0 auto;

  background: #0066b8; /* azul */
  border-radius: 24px;
  padding: 36px 48px;

  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  column-gap: 56px; /* 🔧 separacion entre columnas */

  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  overflow: hidden;
}

/* Ondas decorativas */
.cta-sumate__wave{
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .35;
}

.cta-sumate__wave--tl{
  top: -20px;
  left: -20px;
 width: 345px;
  height: 337px;
  background-image: url("../images/curvas_formacion_before.svg");
}

.cta-sumate__wave--br{
  right: -40px;
  bottom: -40px;
  width: 427px;
  height: 337px;
  background-image: url("../images/curvas_formacion_after.svg");
}

/* Izquierda */
.cta-sumate__title{
  margin: 0;
  color: #fff;
  
}

/* Derecha */
.cta-sumate__label{
  margin: 0 0 10px;
  color: #fff;
}

/* Form */
.cta-sumate__form{
  display: flex;
  gap: 14px; /* 🔧 gap input / botón */
  align-items: center;
}

.cta-sumate__input{
  flex: 1;
  height: 44px;
  padding: 0 18px;

  border-radius: 999px;
  border: none;
  outline: none;

  font-size: 14px;
}

.cta-sumate__input::placeholder{
  color: #9aa5b1;
}

.cta-sumate__btn{
  height: 44px;
  padding: 0 28px;

  border: none;
  border-radius: 999px;
  background: var(--verde-100, #6bb400);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}

.cta-sumate__btn:hover{
  background: #5aa000;
}

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 900px){
  .cta-sumate__card{
    height: auto;
    grid-template-columns: 1fr;
    row-gap: 20px;   /* 🔧 separacion vertical */
    padding: 28px;
    text-align: center;
  }

  .cta-sumate__form{
    justify-content: center;
    flex-wrap: wrap;
  }

  .cta-sumate__input{
    width: 100%;
  }
}