/* ==========================================
   SECCIÓN: ¿Qué es un Fondo de Agua?
   Container: 1440
   Centro: SVG 490x490 (incluye foto dentro del SVG)
   Iconos laterales: 72x72
   ========================================== */

.qs-fondoagua{
  padding: 84px 0 92px;
  background: #fff;
}

.qs-fondoagua__container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.qs-fondoagua__head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 54px;
}

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

.qs-fondoagua__lead{
  margin: 0;
  color: var(--texto-100);
  
}

/* GRID GLOBAL: 2 filas compartidas (✅ alinea izquierda y derecha) */
.qs-fondoagua__grid{
  display: grid;
  grid-template-columns: 1fr 490px 1fr;   /* centro exacto */
  grid-template-rows: auto auto;          /* ✅ 2 filas globales */
  column-gap: 72px;
  row-gap: 72px;
  align-items: center;
}

/* Centro ocupa 2 filas */
.qs-fondoagua__center{
  grid-column: 2;
  grid-row: 1 / span 2;

  width: 490px;
  height: 490px;
  margin: 0 auto;
}

.qs-fondoagua__center img{
  width: 490px;
  height: 490px;
  display: block;
  object-fit: contain;
}

/* Posicionamiento exacto por fila */
.qs-fondoagua__item--lt{ grid-column: 1; grid-row: 1; }
.qs-fondoagua__item--lb{ grid-column: 1; grid-row: 2; }
.qs-fondoagua__item--rt{ grid-column: 3; grid-row: 1; }
.qs-fondoagua__item--rb{ grid-column: 3; grid-row: 2; }

/* ITEM BASE */
.qs-fondoagua__item{
  display: grid;
  grid-template-columns: 1fr 72px;
  column-gap: 22px;
  align-items: center;
}

/* ITEM DERECHA: icono primero */
.qs-fondoagua__item--right{
  grid-template-columns: 100px 1fr;
}

/* Icono 72x72 */
.qs-fondoagua__icon{
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}

.qs-fondoagua__icon img{
  /* width: 72px;
  height: 72px; */
    width: 102px;
  height: 102px;
  display: block;
}

/* Texto */
.qs-fondoagua__text{
  color: var(--azul-oscuro-100);
 
}

.qs-fondoagua__text strong{
  font-weight: 800;
}

/* Alineación texto según lado */
.qs-fondoagua__item:not(.qs-fondoagua__item--right) .qs-fondoagua__text{
  text-align: right;
}

.qs-fondoagua__item--right .qs-fondoagua__text{
  text-align: left;
}

/* ===========================
   Responsive (base)
   =========================== */
@media (max-width: 1180px){
  .qs-fondoagua__grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 28px;
  }

  .qs-fondoagua__center{
    grid-column: auto;
    grid-row: auto;
    width: min(490px, 100%);
    height: auto;
  }

  .qs-fondoagua__center img{
    width: 100%;
    height: auto;
  }

  .qs-fondoagua__item--lt,
  .qs-fondoagua__item--lb,
  .qs-fondoagua__item--rt,
  .qs-fondoagua__item--rb{
    grid-column: auto;
    grid-row: auto;
  }

  .qs-fondoagua__item{
    grid-template-columns: 72px 1fr;
  }

  .qs-fondoagua__item:not(.qs-fondoagua__item--right) .qs-fondoagua__text,
  .qs-fondoagua__item--right .qs-fondoagua__text{
    text-align: left;
  }
}


/* ==========================================
   SECCIÓN: CONFÍAN EN NOSOTROS (tabs + panel)
   Panel: 848x440
   Wave: images/wave-testimonios.svg
   ========================================== */

.cs-trust{
  position: relative;
  background: #fff;        /* ✅ el wave cae sobre blanco */
  overflow: hidden;
  padding: 0;
}

/* Wave arriba */
.cs-trust__wave{
  height: 277px; /* ajusta según tu SVG */
  background: url("../images/wave/wave-testimonios.svg") no-repeat top center;
  background-size: cover;
}


/* Fondo celeste SOLO debajo del wave */
.cs-trust__body{
  background: var(--azul-10);
  padding: 70px 0 0;       /* espacio interno arriba */
  margin-top: -16px;       /* opcional: “pega” el body al wave */
}





/* Container */
.cs-trust__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.cs-trust__grid{
  display: grid;
  grid-template-columns: 1fr 848px; /* panel exacto */
  gap: 56px;
  align-items: center;
  margin-top: -40px; /* si quieres que suba un poco bajo el wave */
}

/* Left */
.cs-trust__title{
  margin: 0 0 18px;
  color: var(--azul2-100);
}

.cs-trust__text{
  margin: 0 0 26px;
  max-width: 360px;
  color: var(--texto-100);
  
}

/* Tabs */
.cs-trust__tabs{
  display: flex;
  gap: 26px;
  align-items: center;
}

.cs-trust__tab{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: rgba(0, 103, 197, .35); /* inactivo */
}

.cs-trust__tab.is-active{
  color: #63b200; /* verde activo (ajusta a tu variable si tienes) */
}

/* Panel fijo */
.cs-trust__panel{
  width: 848px;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-trust__panel-img{
  width: 848px;
  height: 440px;
  display: block;
  object-fit: contain;
  /* si quieres sombra suave tipo maqueta: */
  /* filter: drop-shadow(0 18px 30px rgba(0,0,0,.12)); */
}

/* Responsive */
@media (max-width: 1100px){
  .cs-trust__grid{
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 0;
  }

  .cs-trust__panel{
    width: 100%;
    height: auto;
  }

  .cs-trust__panel-img{
    width: 100%;
    height: auto;
    aspect-ratio: 848 / 440;
  }
}


/* ==========================================
   SECCIÓN: Redes / Fronteras
   Panel: 1284x369
   Logos SVG: 681x209
   ========================================== */

.wf-redes{
  position: relative;
  --bg-top: var(--azul-10); /* el MISMO fondo de la sección de arriba */
  background: #fff;
}

/* WAVE detrás */
/* WAVE full width (no dentro del container) */
.wf-redes__wave{
  height: 401px;                 /* ✅ alto real del SVG */
  background-color: var(--bg-top);
  background-image: url("../images/wave/wave-qs_3.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1905px 582px; /* ✅ tamaño real del SVG */
}

/* Container general */
.wf-redes__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Panel azul sube para “encajar” con el wave */
.wf-redes__panel{
  height: 369px;
  background: #0067c5;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);

  margin-top: -260px; /* ✅ AJUSTA este valor hasta que calce con tu wave */
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Layout interno */
.wf-redes__inner{
  width: 100%;
  padding: 0 41px;

  display: grid;
  grid-template-columns: 1fr 681px; /* texto + bloque logos exacto */
  gap: 56px;
  align-items: center;
}

/* Texto */
.wf-redes__title{
  margin: 0 0 14px;
  color: #fff;
}

.wf-redes__text{
  margin: 0;
  color: rgba(255,255,255,.92);
  max-width: 420px;
  line-height: 1.55;
}

/* Logos */
.wf-redes__logos{
  width: 681px;
  height: 209px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-redes__logos img{
  width: 681px;
  height: 209px;
  display: block;
  object-fit: contain;
}

/* ===========================
   Responsive base (afinamos luego)
   =========================== */
@media (max-width: 1100px){
  .wf-redes__panel{
    height: auto;
    padding: 28px 0;
  }

  .wf-redes__inner{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 0 22px;
    text-align: left;
  }

  .wf-redes__text{
    max-width: 620px;
  }

  .wf-redes__logos{
    width: 100%;
    height: auto;
    justify-content: flex-start;
  }

  .wf-redes__logos img{
    width: min(681px, 100%);
    height: auto;
  }
}

@media (max-width: 560px){
  .wf-redes__wave{
    height: 220px;
    background-size: 100% 220px;
  }

  .wf-redes__panel{
    border-radius: 18px;
    margin-top: -12px;
  }
}

/* ==========================================
   SECCIÓN: Reconocidos (Carrusel 4 cards)
   container: 1284
   card: 303x329
   ========================================== */

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

.reconocidos__container{
  max-width: 1440px;
  margin: 0 auto;
  /* padding: 0 24px; */
}

.reconocidos__head{
  text-align: center;
  margin-bottom: 42px;
}

.reconocidos__title{
  margin: 0 0 10px;
  color: var(--azul2-100);
}

.reconocidos__subtitle{
  margin: 0;
  color: var(--texto-100);
  
}

/* Swiper */
.reconocidos__swiper{
  overflow: visible; /* para que sombra no se corte */
}

/* Importante: Swiper usa translate, NO uses gap en wrapper */
.reconocidos__slide{
  width: 303px; /* fuerza ancho real */
  height: 329px;
}

/* Card */
.rec-card{
  width: 303px;
  height: 329px;
  background: #f5f5f5;
  border-radius: 18px;
  box-shadow: 0 22px 45px rgba(0,0,0,.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
}

.rec-card__logo{
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.rec-card__logo img{
  max-width: 86%;
  max-height: 70px;
  object-fit: contain;
  display: block;
}

.rec-card__body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.rec-card__name{
  margin: 0;
  color: var(--texto-100);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
}

.rec-card__text{
  margin: 0;
  color: var(--texto-700);
  font-size: 12.5px;
  line-height: 1.55;
}

.rec-card__meta{
  margin: 0;
  color: var(--texto-700);
  font-size: 12px;
  line-height: 1.4;
}

/* Flechas (abajo centradas) */
.reconocidos__nav{
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 26px;
}

.reconocidos__btn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--verde-100, #6bb400);
  background: transparent;
  position: relative;
  cursor: pointer;
}

.reconocidos__btn::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: 14px;
  height: 14px;
  background: url("../images/iconos/arrow_green_prev.svg") no-repeat center;
  background-size: contain;
}

/* gira el icono para prev */
.reconocidos__next::before{
  transform: rotate(180deg);
}

.reconocidos__prev::before {
    transform: rotate(360deg);
}

.reconocidos__btn:hover{
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 1200px){
  /* 3 por vista aprox */
}

@media (max-width: 980px){
  /* 2 por vista */
}

@media (max-width: 620px){
  /* 1 por vista */
  .reconocidos__slide,
  .rec-card{
    width: 100%;
  }
}