/* ===================================================
   AGUAKAN · nueva.css
   Estilos para secciones a partir de CLIENTES.
   (No se toca css/style.css — versión local del usuario)
   Reutiliza variables y clases base de style.css.
   =================================================== */

/* ===================================================
   CLIENTES
   =================================================== */
.cli-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  margin-top: 8px;
}
.cli-text p{
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--gris-text);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.cli-text p:last-child{ margin-bottom: 0; }
.cli-text strong{ color: var(--azul-fuerte); font-weight: 600; }

.cli-photo{
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-1);
  position: relative;
  position: sticky;
  top: 110px;
}
.cli-photo img{
  width: 100%; height: 100%;
  object-fit: cover;
}
.cli-photo::after{
  content: "";
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 22px solid var(--azul-claro);
  top: -70px; right: -60px;
  opacity: .85;
  pointer-events: none;
}

/* Stat grande +491,300 */
.cli-stat{
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin: 40px 0;
  padding: 34px 40px;
  background: var(--azul-fuerte);
  color: var(--blanco);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 16px 44px -26px rgba(10,40,80,.5);
}
.cli-stat::after{
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 24px solid rgba(255,255,255,.16);
  bottom: -130px; right: -80px;
  pointer-events: none;
}
.cli-stat__num{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(54px, 8vw, 104px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}
.cli-stat__label{
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.3;
  margin: 0;
  opacity: .95;
}

/* Caja verde de cierre (como en el PDF) */
.cli-green{
  background: var(--verde);
  color: var(--blanco);
  border-radius: var(--r-md);
  padding: 34px clamp(28px, 4vw, 44px);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 40px -24px rgba(98,173,70,.5);
  max-width: 900px;
}
.cli-green::before{
  content: "“";
  position: absolute;
  top: 6px; left: 20px;
  font-family: var(--ff-display);
  font-size: 80px;
  line-height: 1;
  opacity: .25;
}

@media (max-width: 980px){
  .cli-grid{ grid-template-columns: 1fr; }
  .cli-photo{ position: relative; top: 0; aspect-ratio: 16/9; max-height: 360px; }
  .cli-stat{ flex-direction: column; gap: 8px; padding: 28px; }
}

/* ===================================================
   CADENA DE SUMINISTRO
   =================================================== */
.cad-grid{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: 8px;
}
.cad-photo{
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-height: 560px;
  box-shadow: var(--shadow-1);
  position: relative;
}
.cad-photo img{ width: 100%; height: 100%; object-fit: cover; }
.cad-photo::after{
  content: "";
  position: absolute;
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 20px solid var(--verde);
  bottom: -70px; right: -50px;
  opacity: .85;
  pointer-events: none;
}
.cad-text p{
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--gris-text);
  margin: 0 0 18px;
}
.cad-text strong{ color: var(--azul-fuerte); font-weight: 600; }

/* Panel proveedores */
.prov-panel{
  background: var(--verde);
  color: var(--blanco);
  border-radius: var(--r-md);
  padding: 36px clamp(28px, 4vw, 48px);
  margin: 40px 0 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 40px -24px rgba(98,173,70,.5);
}
.prov-panel::after{
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 26px solid rgba(255,255,255,.16);
  bottom: -150px; right: -90px;
  pointer-events: none;
}
.prov-panel__title{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 24px;
  opacity: .9;
}
.prov-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 50px);
  position: relative;
  z-index: 1;
}
.prov-item__num{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}
.prov-item__label{
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.3;
  margin: 8px 0 0;
}
.prov-item__sub{
  font-family: var(--ff-body);
  font-size: 14px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.3);
  opacity: .92;
}
.prov-item__sub strong{ font-family: var(--ff-display); font-weight: 700; }

@media (max-width: 980px){
  .cad-grid{ grid-template-columns: 1fr; }
  .cad-photo{ aspect-ratio: 16/9; max-height: 360px; }
  .prov-grid{ grid-template-columns: 1fr; gap: 28px; }
}

/* ===================================================
   APOYO COMUNITARIO
   =================================================== */
.com-intro-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: 8px;
}

/* Stat con círculo */
.com-stat{
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  padding-left: 10px;
}
.com-stat__circle{
  position: absolute;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--azul-soft);
  left: -16px; top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}
.com-stat.--verde .com-stat__circle{ background: var(--verde-soft); }
.com-stat__body{ position: relative; z-index: 1; }
.com-stat__num{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--azul-fuerte);
  margin: 0;
}
.com-stat.--verde .com-stat__num{ color: var(--verde-osc); }
.com-stat__label{
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--azul-claro);
  margin: 6px 0 0;
  max-width: 420px;
}
.com-stat.--verde .com-stat__label{ color: var(--verde-osc); }

/* Vinculación: bullets */
.vinc-block{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin: 8px 0 0;
}
.vinc-list{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vinc-list li{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--gris-text);
}
.vinc-list li::before{
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 3px solid var(--verde);
  margin-top: 4px;
}
.vinc-photo{
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 480px;
  box-shadow: var(--shadow-1);
  position: relative;
}
.vinc-photo img{ width: 100%; height: 100%; object-fit: cover; }

/* Grupos de iniciativas */
.init-group{ margin-top: 64px; }
.init-group__title{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--verde-osc);
  margin: 0 0 22px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 14px;
}
.init-group__title::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gris-2);
}

.init-grid{
  display: grid;
  gap: 16px;
}
.init-grid.--c3{ grid-template-columns: repeat(3, 1fr); }
.init-grid.--c4{ grid-template-columns: repeat(4, 1fr); }
.init-grid.--c2{ grid-template-columns: repeat(2, 1fr); }

.init-card{
  background: var(--azul-soft);
  border: 1px solid rgba(99,197,242,.2);
  border-radius: var(--r-md);
  padding: 24px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.init-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px rgba(10,40,80,.3);
}
.init-card__icon{
  width: 42px; height: 42px;
  flex-shrink: 0;
  color: var(--azul-fuerte);
}
.init-card__icon img{ width: 100%; height: 100%; }
.init-card__name{
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--azul-fuerte);
  margin: 0;
}

.init-stat{
  margin-top: 26px;
}

@media (max-width: 980px){
  .com-intro-grid{ grid-template-columns: 1fr; }
  .vinc-block{ grid-template-columns: 1fr; }
  .vinc-photo{ aspect-ratio: 16/9; max-height: 340px; }
  .init-grid.--c3,
  .init-grid.--c4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .init-grid.--c2,
  .init-grid.--c3,
  .init-grid.--c4{ grid-template-columns: 1fr; }
}

/* ===================================================
   MEDIO AMBIENTE
   =================================================== */
.ma-body p{
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--gris-text);
  margin: 0 0 18px;
}
.ma-body p:last-child{ margin-bottom: 0; }
.ma-body strong{ color: var(--azul-fuerte); font-weight: 600; }

/* dos columnas de texto + foto */
.ma-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.ma-grid--photo{
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
}
.ma-photo{
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  position: relative;
}
.ma-photo--sq{ aspect-ratio: 1/1; max-height: 360px; }
.ma-photo--tall{ aspect-ratio: 3/4; max-height: 540px; }
.ma-photo--wide{ aspect-ratio: 16/9; }
.ma-photo img{ width: 100%; height: 100%; object-fit: cover; }

.ma-panor{
  margin: 30px 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 24/7;
  box-shadow: var(--shadow-1);
}
.ma-panor img{ width: 100%; height: 100%; object-fit: cover; }

/* fila de stats con círculo */
.ma-stats{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 70px);
  margin: 30px 0;
  padding-left: 12px;
}

/* panel verde con varias métricas */
.ma-green-panel{
  background: var(--verde);
  color: var(--blanco);
  border-radius: var(--r-md);
  padding: 36px clamp(28px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 40px -24px rgba(98,173,70,.5);
  display: grid;
  gap: 24px;
  align-content: center;
}
.ma-green-panel::after{
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 24px solid rgba(255,255,255,.16);
  bottom: -140px; right: -80px;
  pointer-events: none;
}
.ma-green-panel__num{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.ma-green-panel__label{
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  margin: 6px 0 0;
  opacity: .95;
}
.ma-green-panel__row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.ma-green-panel__row:last-child{ border-bottom: 0; padding-bottom: 0; }
.ma-green-panel__row .ma-green-panel__num{ font-size: clamp(24px, 2.6vw, 34px); }
.ma-green-panel__row .ma-green-panel__label{ margin: 0; text-align: right; max-width: 200px; }

/* saneamiento green stat band */
.ma-green-band{
  background: var(--verde);
  color: var(--blanco);
  border-radius: var(--r-md);
  padding: 30px 36px;
  margin: 8px 0 30px;
  font-family: var(--ff-display);
  box-shadow: 0 14px 40px -24px rgba(98,173,70,.5);
}
.ma-green-band b{
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 6px;
}
.ma-green-band span{
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
  opacity: .95;
}

/* PTAR proceso 3 pasos */
.ptar{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 0;
  counter-reset: ptar;
}
.ptar__step{
  background: var(--azul-soft);
  border: 1px solid rgba(99,197,242,.22);
  border-radius: var(--r-md);
  padding: 26px 24px;
  text-align: center;
  position: relative;
}
.ptar__icon{
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  color: var(--verde-osc);
}
.ptar__icon img{ width: 100%; height: 100%; }
.ptar__step h4{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--azul-fuerte);
  margin: 0;
}
.ptar__step::before{
  counter-increment: ptar;
  content: counter(ptar, decimal-leading-zero);
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--azul-claro);
  opacity: .7;
}

/* ecoeficiencia 3 cards */
.eco-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 0;
}
.eco-card{
  background: var(--azul-soft);
  border: 1px solid rgba(99,197,242,.22);
  border-radius: var(--r-md);
  padding: 28px 26px;
}
.eco-card__num{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--azul-fuerte);
  margin: 0 0 12px;
}
.eco-card__text{
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--gris-text);
  margin: 0;
}

@media (max-width: 980px){
  .ma-grid,
  .ma-grid--photo{ grid-template-columns: 1fr; }
  .ptar{ grid-template-columns: 1fr; }
  .eco-cards{ grid-template-columns: 1fr; }
  .ma-panor{ aspect-ratio: 16/7; }
}

/* ===================================================
   AJUSTE DE JERARQUÍA · título de subsección (h2)
   más chico que el título de portadilla (unidad general)
   =================================================== */
.page--sub .page__title{
  font-size: clamp(32px, 4.2vw, 56px);
}

/* ===================================================
   GOBERNANZA
   =================================================== */
.gov-body p{
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--gris-text);
  margin: 0 0 18px;
}
.gov-body p:last-child{ margin-bottom: 0; }
.gov-body strong{ color: var(--azul-fuerte); font-weight: 600; }

/* Series accionarias */
.gov-series{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.gov-serie{
  background: var(--azul-soft);
  border: 1px solid rgba(99,197,242,.22);
  border-radius: var(--r-md);
  padding: 22px 24px;
}
.gov-serie__tag{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul-claro);
  margin: 0 0 8px;
}
.gov-serie__txt{
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--gris-text);
  margin: 0;
}
.gov-serie__txt b{ color: var(--azul-fuerte); font-weight: 700; font-family: var(--ff-display); }

/* Tabla del Consejo */
.gov-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 6px 24px -16px rgba(10,40,80,.18);
  font-family: var(--ff-display);
  margin: 20px 0;
}
.gov-table thead th{
  background: var(--azul-fuerte);
  color: var(--blanco);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 15px 24px;
  text-align: left;
}
.gov-table tbody td{
  padding: 15px 24px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--gris-2);
}
.gov-table tbody tr:last-child td{ border-bottom: 0; }
.gov-table tbody tr:nth-child(even){ background: var(--azul-soft); }
.gov-table tbody td:first-child{ color: var(--azul-fuerte); font-weight: 600; }
.gov-table tbody td:last-child{ color: var(--gris-text); }

/* Lista de bullets genérica (herramientas, etc.) */
.doc-list{
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.doc-list li{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gris-text);
}
.doc-list li::before{
  content: "";
  flex: 0 0 auto;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 3px solid var(--azul-claro);
  margin-top: 4px;
}
.doc-list li strong{ color: var(--azul-fuerte); font-weight: 600; }

/* Caja azul (campaña / nota) */
.blue-box{
  background: var(--azul-soft);
  border: 1px solid rgba(99,197,242,.25);
  border-radius: var(--r-md);
  padding: 28px 32px;
}
.blue-box__title{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--azul-fuerte);
  margin: 0 0 12px;
}
.blue-box p{
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gris-text);
  margin: 0;
}

/* Sub-encabezado pequeño dentro de subsección */
.gov-subhead{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--azul-fuerte);
  margin: 28px 0 14px;
}

@media (max-width: 980px){
  .gov-series{ grid-template-columns: 1fr; }
}

/* ===================================================
   CONTACTO
   =================================================== */
.contacto{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: #0e2a3f;
  color: var(--blanco);
  overflow: hidden;
  padding: 140px 0 80px;
}
.contacto__bg{ position: absolute; inset: 0; z-index: 0; }
.contacto__bg img{ width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.contacto__bg::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(8,30,55,.9) 0%, rgba(8,30,55,.62) 60%, rgba(8,30,55,.78) 100%);
}
.contacto__inner{ position: relative; z-index: 2; width: 100%; }
.contacto__title{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.contacto__gri{
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin: 0 0 44px;
  letter-spacing: .04em;
}
.contacto__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  max-width: 1000px;
}
.contacto__label{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--azul-claro);
  margin: 0 0 16px;
}
.contacto__block p{
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,.9);
  margin: 0 0 18px;
}
.contacto__block p:last-child{ margin-bottom: 0; }
.contacto__block a{ color: var(--azul-claro); }
.contacto__name{
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--blanco) !important;
}
.contacto__social{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-top: 28px;
  max-width: 1000px;
}
.contacto__social a{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--blanco);
  transition: color .3s var(--ease);
}
.contacto__social a:hover{ color: var(--azul-claro); }
.contacto__social .ico{
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.contacto__social .ico svg{ width: 15px; height: 15px; }

@media (max-width: 768px){
  .contacto__grid{ grid-template-columns: 1fr; }
  .contacto__social{ grid-template-columns: 1fr; }
}