/* ==========================================
   QUIÉNES SOMOS – BLOQUE FRASE / COMILLAS
   ========================================== */
.desc-general{
  padding: 80px 0;
  background: #fff;  /* mismo fondo que el resto de internas */
}

/* Título centrado */
.desc-general-title{
  text-align: center;
  margin-bottom: 40px;
  color: var(--azul2-100);
}
.desc-general-container {
  max-width: 1284px;
  margin: 0 auto;
}
/* GRID de 3 cards */
.desc-general-grid{
  display: flex;
  justify-content: space-between;
  gap: 32px;            /* espacio entre cards */
}

/* CARD */
.desc-card{
  width: 291px;
  height: 356px;
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 32px 40px;
  box-shadow: 0 22px 45px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

/* ICONO – círculo + punto */
.desc-card-icon{
  margin-bottom: 24px;
  position: relative;
}

.desc-icon-circle{
  width: 110px;
  height: 110px; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 14px 28px rgba(0,0,0,0.16); */
}

.desc-icon-circle img{
  width: 110px;
  height: 110px;
  object-fit: contain;
}
.qs-quote{
  padding: 90px 0;
  background: #ffffff;
}

.qs-quote-container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.qs-quote-box{
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 10px 80px; /* deja aire para las comillas */
}

/* Comillas decorativas (SVG) */
.qs-quote-box::before,
.qs-quote-box::after{
  content: "";
  position: absolute;
  width: 93px;   /* ajusta según tu SVG */
  height: 80px;  /* ajusta según tu SVG */
  opacity: .12;   /* suave como maqueta */
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.qs-quote-box::before{
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("../images/quotes/quotes-left.svg"); /* tu svg */
}

.qs-quote-box::after{
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("../images/quotes/quotes-right.svg"); /* tu svg */
}

/* Título */
.qs-quote-title{
  margin: 0 0 18px;
  color: var(--azul2-100);
}

/* Texto */
.qs-quote-text{
  margin: 0;
  color: var(--azul2-100);  
  margin-inline: auto;
}

/* Responsive */
@media (max-width: 900px){
  .qs-quote-box{
    padding: 10px 24px;
  }

  .qs-quote-box::before,
  .qs-quote-box::after{
    width: 110px;
    height: 110px;
    opacity: .10;
  }
}

@media (max-width: 600px){
  .qs-quote-box::before,
  .qs-quote-box::after{
    display: none; /* en mobile se limpia */
  }
}

/* ==========================================
   QUIÉNES SOMOS – ORBES SVG (100% SVG)
   container: 1286
   section height: 508
   ========================================== */

.qs-orbes2{
  height: 508px;            /* ✅ altura exacta */
  background: #ffffff;
  overflow: hidden;
}

.qs-orbes2-container{
  max-width: 1286px;        /* ✅ container exacto */
  height: 508px;            /* ✅ para centrar plus vertical */
  margin: 0 auto;
  position: relative;
  padding: 0 24px;
}

/* TRAMA DETRÁS */
.qs-orbes2-trama{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  opacity: .55; /* ajusta si lo necesitas */
}

.qs-orbes2-trama img{
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
}

/* FILA PRINCIPAL */
.qs-orbes2-row{
  position: relative;
  z-index: 1;
  height: 508px;              /* clave */
  display: flex;
  align-items: center;        /* centra verticalmente todo */
  justify-content: space-between;
  gap: 24px;
}

/* ORBES SVG */
.qs-orbes2-orbe{
  flex: 0 0 auto;
  width: 363px;               /* ✅ tamaño orbe */
  height: 363px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qs-orbes2-orbe img{
  width: 363px;
  height: 363px;
  display: block;
}

/* ORBE CENTRAL MÁS ABAJO */
.qs-orbes2-orbe--center{
  transform: translateY(79px); /* ✅ baja la orbe central (ajusta si tu figma tiene otro valor) */
}

/* PLUS SVG (centrado en el alto general 508) */
.qs-orbes2-plus{
  flex: 0 0 auto;
  width: 44px;               /* ajusta al size real del plus */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qs-orbes2-plus img{
  width: 44px;
  height: 44px;
  display: block;
}

/* RESPONSIVE */
@media (max-width: 1200px){
  .qs-orbes2{
    height: auto;
    padding: 60px 0;
  }

  .qs-orbes2-container,
  .qs-orbes2-row{
    height: auto;
  }

  .qs-orbes2-row{
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 28px;
  }

  .qs-orbes2-orbe--center{
    transform: translateY(0);
  }

  .qs-orbes2-trama{
    display: none; /* opcional: se limpia en mobile */
  }
}


/* ==========================================
   SECCIÓN: Situación del agua en Lima
   container: 1286
   mapa: 526x696
   ========================================== */

.sd-waterlima{
  padding: 80px 0;
  background: #ffffff;
}

.sd-waterlima-container{
  max-width: 1286px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.sd-waterlima-head{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 54px;
}

.sd-waterlima-title{
  margin: 0 0 12px;
  color: var(--azul2-100);
}

.sd-waterlima-subtitle{
  margin: 0;
  color: var(--texto-100);
  
}

/* Layout 2 columnas: MAPA + CARDS */
.sd-waterlima-layout{
  display: grid;
  grid-template-columns: 526px 1fr; /* mapa exacto */
  gap: 54px;
  align-items: center;
}

/* Mapa */
.sd-waterlima-map{
  width: 526px;
  height: 696px;
}

.sd-waterlima-map img{
  width: 526px;
  height: 696px;
  display: block;
  object-fit: contain;
}

/* ==========================================
   CARDS (2 columnas independientes)
   col izq: 336x278 (x2)
   col der: 390x177 (x3)
   gap vertical: 24
   ========================================== */

.sd-waterlima-cards2{
  display: grid;
  grid-template-columns: 336px 390px;
  column-gap: 32px;
  align-items: start;
}

.sd-wl-col{
  display: flex;
  flex-direction: column;
  gap: 24px; /* gap vertical real */
}

/* Card azul oscuro (grande) */
/* .sd-wl-card--dark{
  width: 336px;
  height: 278px;
  border-radius: 20px;
  padding: 24px;
  background: #003b63;
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);

  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
} */
.sd-wl-card--dark{
  width: 336px;
  height: 278px;
  border-radius: 20px;
  padding: 24px;
  background: var(--azul-oscuro-100);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);

  display: flex;               /* ✅ en vez de grid */
  flex-direction: column;
  align-items: flex-start;     /* ✅ todo a la izquierda */
  justify-content: space-between; /* ✅ icono arriba, texto abajo */
}

/* Cards celestes y verde (pequeñas) */
.sd-wl-card--sky,
.sd-wl-card--green{
  width: 390px;
  height: 177px;
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sd-wl-card--sky{ background: #3a8fc0; color: #fff; }
.sd-wl-card--green{ background: #6bb400; color: #fff; }

/* Ícono SVG */
.sd-wl-ic{
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.sd-wl-ic img{
  width: 50px;
  height: 50px;
  display: block;
}
.sd-wl-main{
  margin-top: auto;           /* ✅ empuja este bloque hacia abajo */
}


/* Textos */
.sd-wl-big{
    font-family: var(--font-poppins);
  font-weight: 800;
  font-size: 44px;
 
  margin-bottom: 6px;
}

.sd-wl-big2{
     font-family: var(--font-poppins);
  font-weight: 800;
  font-size: 40px;
 
  margin-bottom: 0px;
}

.sd-wl-small{
  
  opacity: .95;
}

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

@media (max-width: 1100px){
  .sd-waterlima-layout{
    grid-template-columns: 1fr;
  }

  .sd-waterlima-map{
    margin: 0 auto;
  }

  .sd-waterlima-cards2{
    grid-template-columns: 1fr;
    row-gap: 24px;
    justify-items: center;
  }

  .sd-wl-card--dark,
  .sd-wl-card--sky,
  .sd-wl-card--green{
    width: min(390px, 100%);
  }

  .sd-wl-card--dark{
    height: auto; /* puede crecer por texto */
  }
}

/* ===========================
   ODS BLOCK
   =========================== */
.ods-block{
  position: relative;
  background: var(--azul-10); /* tu celeste de fondo */
  padding: 0 0 80px;
  overflow: hidden;
}

/* Wave arriba */
.ods-wave{
  width: 100%;
  line-height: 0;
  background: #fff; /* para que el wave no se “tiña” */
}

.ods-wave img{
  width: 100%;
  height: auto;
  display: block;
}

/* Container */
.ods-container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 56px 24px 0;
}

/* Header */
.ods-head{
  text-align: center;
  max-width: 1284px;
  margin: 0 auto 44px;
}

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

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

/* ===========================
   GRID (1 par: ODS + FOTO)
   ODS: 168x168
   FOTO: 307x168
   =========================== */
.ods-grid{
  display: grid;
  grid-template-columns: 168px 307px; /* ✅ exacto */
  gap: 22px 32px;                    /* vertical / horizontal (ajustable) */
  justify-content: center;
  align-items: center;
}

/* ODS badge */
.ods-badge{
  width: 168px;
  height: 168px;
  display: block;
  object-fit: contain; /* PNG / GIF */
  border-radius: 16px; /* si tus ODS tienen borde redondo */
}

/* Foto lateral */
.ods-photo{
  width: 307px;
  height: 168px;
  display: block;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

/* ===========================
   Variante: 2 pares por fila
   (ODS+FOTO | ODS+FOTO)
   Solo agrega esta clase al .ods-grid:
   class="ods-grid ods-grid--2pairs"
   =========================== */
.ods-grid.ods-grid--2pairs{
  grid-template-columns: 168px 307px 168px 307px;
  column-gap: 32px;
  row-gap: 24px;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 980px){
  .ods-grid,
  .ods-grid.ods-grid--2pairs{
    grid-template-columns: 168px 307px;
  }
}

@media (max-width: 560px){
  .ods-grid,
  .ods-grid.ods-grid--2pairs{
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .ods-photo{
    width: min(307px, 100%);
  }
}