/* ============================================================
   FUNDACIÓN AGUAS — main.css
   Última actualización: Abril 2026

   Estructura:
   01. Variables globales ............ colores, radios, transiciones
   02. Reset y base .................. box-sizing, tipografía, links
   03. Patrón de fondo ............... gotas SVG como watermark
   04. Navegación .................... nav sticky, logo, links, CTA
   05. Hero .......................... hero video (index.html)
   06. Botones ....................... pill, ghost, white, link-arrow
   07. Banner rotativo ............... franja azul debajo del hero
   08. Secciones editoriales ......... texto + imagen/video
   09. Sección triple ................ foto | texto | foto
   10. Sección donación .............. círculo + foto + texto
   11. Historia / testimonio ......... quote + foto
   12. Grid 3 columnas ............... g3-item con divisores
   13. Contador animado .............. franja oscura con números
   14. Grilla de acciones ............ 6 botones con íconos SVG
   15. Newsletter .................... foto fondo + card glassmorphism
   16. Pre-footer CTA ................ franja azul antes del footer
   17. Footer ........................ 4 cols links + social + logo
   18. Animaciones reveal ............ IntersectionObserver fade-in
   19. Responsive .................... 960px tablet / 560px mobile
   20. Páginas internas .............. ph, breadcrumb, imp-sec, equipo
   21. Página aliados ................ ali-intro, ali-logos, ali-grid
   22. Carrusel de historias ......... story-carousel (index.html)
   22. Variantes de grid ............. grid2, grid4, grid-section-title
   22. Página proyectos .............. proy-grid, proy-card, contadores
   23. Página detalle proyecto ....... proj-sec, carrusel, proj-counts
   24. Página contacto ............... ct-info, ct-form, radio buttons
   25. Modal postulación ............. modal, mf-group, mf-field
   26. Utilidades de proyectos ....... proy-header, proj-btn-group
   ============================================================ */

/* ============================================================
   01. VARIABLES GLOBALES
   Modificar aquí para cambiar colores, radios y transiciones
   ============================================================ */
:root {
  /* Paleta principal */
  --azul: #2d6ea8; /* Azul principal — botones, títulos, links */
  --azul-claro: #4fa3e0; /* Azul claro — hover, acentos, subrayados */
  --azul-circulo: #5b9fcf; /* Azul medio — círculo de donación */
  --oscuro: #0a1940; /* Azul muy oscuro — fondo hero */
  --oscuro2: #0d2257; /* Azul oscuro — gradientes y hover */

  /* Colores de texto */
  --texto: #002c5f; /* Texto principal — títulos y nav */
  --gris-texto: #3b3b3b; /* Texto cuerpo — párrafos */

  /* Superficies */
  --gris-claro: #e8edf2; /* Bordes y separadores */
  --gris-footer: #e9eaeb; /* Fondo footer */
  --blanco: #ffffff;

  /* Radios de borde */
  --radio-pill: 50px; /* Botones ovalados */
  --radio-img: 12px; /* Imágenes, fotos, card formulario */

  /* Transición estándar */
  --trans: 0.25s ease;
}

/* ============================================================
   02. RESET Y BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Nunito Sans", sans-serif;
  color: var(--texto);
  background-color: var(--blanco);
  overflow-x: hidden;
  max-width: 1440px;
  margin: 0 auto;
}
img {
  display: block;
  max-width: 100%;
}
a {
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   03. PATRÓN DE FONDO
   Gotas de agua como watermark fijo.
   Ajustar fill-opacity (0.055) para más/menos visibilidad.
   Ajustar background-size (80px) para más/menos densidad.
   ============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 10 C40 10 26 28 26 38 a14 14 0 0 0 28 0 C54 28 40 10 40 10z' fill='%232D6EA8' fill-opacity='0.055'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 80px 80px;
}

/* ============================================================
   04. NAVEGACIÓN
   Logo izquierda — links centrados (absolute) — botón Donar derecha
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-claro);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  height: 100px; /* Alto del nav — ajustar si cambia el logo */
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav__logo img {
  height: 65px; /* Altura del logo — cambiar aquí */
  width: auto;
  object-fit: contain;
}
.nav__logo span {
  display: none;
} /* Texto oculto — el logo ya incluye el nombre */

/* Links centrados */
.nav__links {
  display: flex;
  gap: 36px;
  list-style: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav__links a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
  text-decoration: none;
  padding-bottom: 4px;
  position: relative; /* Necesario para el ::after del subrayado */
  transition: color var(--trans);
}
/* Subrayado al 50% — arranca en 0 y anima a 50% en hover */
.nav__links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; /* Empieza invisible */
  height: 2px;
  background: var(--azul-claro);
  border-radius: 2px;
  transition: width var(--trans);
}
.nav__links a:hover {
  color: var(--azul);
}
.nav__links a:hover::after {
  width: 50%;
} /* Cubre solo la mitad del texto */

/* Botón hamburguesa */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 210;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--texto);
  border-radius: 2px;
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.nav__toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav__toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Botón Donar */
.nav__cta {
  background: var(--azul);
  color: var(--blanco);
  padding: 14px 36px;
  border-radius: var(--radio-pill);
  font-size: 1rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(45, 110, 168, 0.35);
  transition:
    background var(--trans),
    transform var(--trans),
    box-shadow var(--trans);
}
.nav__cta:hover {
  background: var(--oscuro);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(45, 110, 168, 0.45);
}

/* ============================================================
   05. HERO
   Video YouTube de fondo full-width, overlay oscuro izquierda.
   Cambiar altura en .hero { height } si se necesita más/menos.
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  background: var(--oscuro);
}
.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: none;
}
/* Overlay oscuro — degradado de izquierda a transparente */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(10, 25, 64, 0.72) 0%, rgba(10, 25, 64, 0.1) 65%, transparent 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8%;
  color: var(--blanco);
  max-width: 600px;
}
/* Título — font-weight 600 para look más liviano (water.org style) */
.hero__title {
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.hero__sub {
  font-size: 18px;
  opacity: 0.9;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 480px;
}
.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  align-items: center;
}

/* ============================================================
   06. BOTONES
   ============================================================ */

/* Hero: botón relleno con glassmorphism */
.btn-pill-hero {
  padding: 12px 28px;
  border-radius: var(--radio-pill);
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    background var(--trans),
    transform var(--trans);
  white-space: nowrap;
}
.btn-pill-hero--filled {
  background: rgba(79, 163, 224, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--blanco);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
.btn-pill-hero--filled:hover {
  background: rgba(45, 110, 168, 0.65);
  transform: translateY(-1px);
}
.btn-pill-hero--ghost {
  background: transparent;
  color: var(--blanco);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.btn-pill-hero--ghost:hover {
  border-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

/* Botón azul estándar (newsletter, secciones) */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--azul);
  color: var(--blanco);
  padding: 13px 32px;
  border-radius: var(--radio-pill);
  font-size: 0.95rem;
  font-weight: 700;
  width: fit-content;
  transition:
    background var(--trans),
    transform var(--trans);
}
.btn-pill:hover {
  background: var(--oscuro2);
  transform: translateY(-2px);
}

/* Botón blanco (pre-footer) */
.btn-pill-white {
  background: var(--blanco);
  color: var(--azul);
  padding: 11px 28px;
  border-radius: var(--radio-pill);
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    transform var(--trans),
    box-shadow var(--trans);
}
.btn-pill-white:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* Link con flecha y subrayado al 50% siempre visible */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--azul);
  font-size: 0.9rem;
  font-weight: 700;
  position: relative;
  padding-bottom: 3px;
  transition: gap var(--trans);
}
/* Subrayado al 50% — visible siempre, se extiende en hover */
.link-arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%; /* Siempre al 50% */
  height: 2px;
  background: var(--azul);
  border-radius: 2px;
  transition: width var(--trans);
}
.proy-card .link-arrow::after {
  display: none;
}
.link-arrow:hover {
  gap: 8px;
}
.link-arrow:hover::after {
  width: 70%;
} /* Se extiende en hover */

/* ============================================================
   07. BANNER ROTATIVO
   Franja azul debajo del hero. Cambiar mensajes en JS (index.html).
   ============================================================ */
.banner-strip {
  background: var(--azul);
  color: var(--blanco);
  padding: 14px 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.banner-strip button {
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.8;
  padding: 0 4px;
  transition: opacity var(--trans);
}
.banner-strip button:hover {
  opacity: 1;
}
.banner-strip__text {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.banner-strip__text a {
  color: var(--blanco);
  text-decoration: underline;
  transition: color var(--trans);
}
.banner-strip__text a:hover {
  color: #a8d4f5;
} /* Celeste claro en hover */

/* ============================================================
   08. SECCIONES EDITORIALES
   .editorial = texto izquierda / media derecha
   .editorial.reverse = media izquierda / texto derecha
   Cambiar gap para más/menos separación entre columnas.
   ============================================================ */
.editorial {
  padding: 96px 4%;
  background: var(--blanco);
}
.editorial .inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 — modificar proporciones aquí */
  gap: 64px;
  align-items: center;
}
.editorial.reverse .inner {
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  direction: rtl;
}
.editorial.reverse .inner > * {
  direction: ltr;
}

/* Separador entre secciones editoriales */
.editorial-divider {
  border: none;
  border-top: 1px solid var(--gris-claro);
  margin: 0;
}

.ed-title {
  font-size: 28px;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 18px;
  line-height: 1.25;
}
.ed-text {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 27.2px;
  margin-bottom: 14px;
}

/* Video embed */
.ed-video {
  border-radius: var(--radio-img);
  overflow: hidden;
  aspect-ratio: 16/9;
  position: relative;
  box-shadow: 0 4px 20px rgba(10, 25, 64, 0.1);
}
.ed-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: calc(100% + 160px);
  border: none;
  display: block;
}
.ed-video-caption {
  font-size: 0.78rem;
  color: #888;
  font-style: italic;
  margin-top: 8px;
  line-height: 1.5;
}

/* Imagen */
.ed-img {
  border-radius: var(--radio-img);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.ed-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder temporal */
.placeholder-img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  background: linear-gradient(135deg, #c8ddf0, #e8f2fb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: var(--azul);
  opacity: 0.5;
}

/* ============================================================
   09. SECCIÓN TRIPLE
   Foto sangrada | Texto central | Foto sangrada.
   Replicado de la estructura de water.org.
   Cambiar grid-template-columns para ajustar proporciones.
   ============================================================ */
.triple {
  padding: 72px 0;
  background: var(--blanco);
  overflow: hidden;
}
.triple .inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr; /* Proporciones foto / texto / foto */
  align-items: center;
  max-width: 100%;
}
.triple__photo {
  overflow: hidden;
  height: 380px;
  flex-shrink: 0;
  border-radius: var(--radio-img);
}
.triple__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.triple__text {
  padding: 0 64px;
} /* Espacio entre texto y fotos */
.triple__title {
  font-size: 28px;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 20px;
  line-height: 1.25;
}
.triple__intro {
  font-style: italic;
  font-size: 16px;
  color: #3b3b3b;
  line-height: 27.2px;
  margin-bottom: 18px;
}
.triple__body {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 27.2px;
  margin-bottom: 14px;
}

/* ============================================================
   10. SECCIÓN DONACIÓN
   Círculo con monto superpuesto sobre foto + texto a la derecha.
   ============================================================ */
.donation {
  padding: 80px 8%;
  background: var(--blanco);
}
.donation .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}
.don-left {
  position: relative;
}
/* Círculo azul con monto de donación */
.don-circle {
  position: absolute;
  top: -24px;
  left: -20px;
  z-index: 2;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--azul-circulo);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  text-align: center;
  padding: 18px;
  box-shadow: 0 8px 32px rgba(45, 110, 168, 0.3);
}
.don-circle__amt {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
}
.don-circle__lbl {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 8px;
  opacity: 0.92;
}
/* Foto con margen para que el círculo quede visible */
.don-photo {
  border-radius: var(--radio-img);
  overflow: hidden;
  margin-left: 56px;
  aspect-ratio: 3/2.8;
}
.don-title {
  font-size: 28px;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 18px;
  line-height: 1.25;
}
.don-text {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 27.2px;
  margin-bottom: 22px;
}

/* ============================================================
   11. HISTORIA / TESTIMONIO
   Texto con quote en itálica azul + separadores hr + foto derecha.
   ============================================================ */
.story {
  padding: 80px 8%;
  background: var(--blanco);
}
.story .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: start;
}
.story-name {
  font-size: 28px;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 18px;
}
.story-text {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 27.2px;
  margin-bottom: 14px;
}
.story-hr {
  border: none;
  border-top: 1px solid var(--gris-claro);
  margin: 14px 0;
}
/* Quote destacada en itálica azul — entre los dos separadores */
.story-quote {
  font-style: italic;
  font-size: 20px;
  font-weight: 600;
  color: #002c5f;
  line-height: 1.5;
}
.story-img {
  border-radius: var(--radio-img);
  overflow: hidden;
}
.story-img img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* ============================================================
   12. GRID 3 COLUMNAS
   Foto + título + texto + link. Divisores verticales entre cols.
   Cambiar height en .g3-img para unificar altura de fotos.
   ============================================================ */
.grid3 {
  padding: 72px 8%;
  background: var(--blanco);
}
.grid3 .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.g3-item {
  padding: 0 36px 0 0;
  margin-right: 36px;
  border-right: 1px solid var(--gris-claro);
}
.g3-item:first-child {
  padding-left: 0;
}
.g3-item:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
  padding-left: 36px;
}
.g3-item:nth-child(2) {
  padding-left: 36px;
}
.g3-img {
  border-radius: var(--radio-img);
  overflow: hidden;
  height: 220px;
  margin-bottom: 20px;
}
.g3-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.g3-title {
  font-size: 22px;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 14px;
  line-height: 1.3;
}
.g3-text {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 27.2px;
  margin-bottom: 14px;
}

/* ============================================================
   13. CONTADOR ANIMADO
   Franja oscura con números animados por IntersectionObserver.
   Valores definidos con data-target en el HTML.
   ============================================================ */
.counter {
  background: var(--oscuro);
  padding: 64px 8%;
}
.counter .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.cnt-item {
  text-align: center;
  color: var(--blanco);
  padding: 20px 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.cnt-item:last-child {
  border-right: none;
}
.cnt-num {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--azul-claro);
  line-height: 1;
  margin-bottom: 10px;
}
.cnt-lbl {
  font-size: 0.83rem;
  opacity: 0.7;
  line-height: 1.4;
}

/* ============================================================
   14. GRILLA DE ACCIONES
   6 botones azules con ícono SVG + label + flecha.
   Cambiar fondo en .act-btn para otro color.
   ============================================================ */
.actions {
  padding: 80px 8%;
  background: var(--blanco);
}
.actions h2 {
  text-align: center;
  font-size: 28px;
  font-weight: 200;
  color: #002c5f;
  margin-bottom: 36px;
}
.actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
}
.act-btn {
  background: #1e4f8f;
  color: var(--blanco);
  border-radius: 10px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 15px;
  font-weight: 600;
  transition:
    background var(--trans),
    transform var(--trans);
}
.act-btn:hover {
  background: #163d70;
  transform: translateY(-2px);
}
.act-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.act-icon svg {
  width: 26px;
  height: 26px;
  stroke: #7ab8e8;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.act-label {
  flex: 1;
  line-height: 1.35;
}
.act-arrow {
  font-size: 1rem;
  opacity: 0.8;
  margin-left: auto;
}

/* ============================================================
   15. NEWSLETTER
   Foto full-width de fondo + card traslúcida flotante a la derecha.
   Cambiar url() en .nl-photo para otra imagen de fondo.
   Cambiar rgba opacity en .nl-card para más/menos transparencia.
   ============================================================ */
.newsletter {
  position: relative;
  overflow: hidden;
  min-height: 540px;
  display: flex;
}

/* Foto de fondo — reemplazar url() para cambiar imagen */
.nl-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #aac8e0 url("../img/hero-desarrollo-comunitario.jpg") center/cover no-repeat;
}
.nl-form-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 60px 5%;
}
/* Card glassmorphism — ajustar .55 para más/menos transparencia */
.nl-card {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-radius: var(--radio-img);
  padding: 44px 40px;
  width: 100%;
  max-width: 480px;
}
.nl-card h3 {
  font-size: 28px;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 10px;
  line-height: 1.2;
}
.nl-card p {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 27.2px;
  margin-bottom: 28px;
}
.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #3b3b3b;
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d0d8e4;
  border-radius: 4px;
  font-size: 15px;
  font-family: inherit;
  color: var(--texto);
  background: #f4f7fa;
  outline: none;
  transition: border-color var(--trans);
}
.field input:focus {
  border-color: var(--azul);
  background: var(--blanco);
}

/* ============================================================
   16. PRE-FOOTER CTA
   Franja azul con mensaje + botón blanco antes del footer.
   ============================================================ */
.pre-footer {
  background: var(--azul);
  padding: 26px 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.pre-footer p {
  color: var(--blanco);
  font-size: 0.98rem;
  font-weight: 600;
}

/* ============================================================
   17. FOOTER
   Fondo gris. 4 columnas de links + columna de redes. Logo abajo.
   ============================================================ */
.footer {
  background: var(--gris-footer);
  padding: 52px 8% 28px;
}
.footer-cols {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.1fr; /* 4 cols links + 1 social */
  gap: 28px;
  padding-bottom: 44px;
  border-bottom: 1px solid #d0d4d8;
}
.fc h4 {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto);
  margin-bottom: 14px;
}
.fc ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fc ul a {
  font-size: 0.82rem;
  color: var(--gris-texto);
  transition: color var(--trans);
}
.fc ul a:hover {
  color: var(--azul);
}

/* Columna social */
.fc-social {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.social-icons {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
/* Ícono de red social — SVG real */
.social-icons a {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--trans),
    transform var(--trans);
}
.social-icons a svg {
  width: 18px;
  height: 18px;
  fill: var(--texto);
  transition: fill var(--trans);
}
.social-icons a:hover {
  background: var(--azul);
  transform: translateY(-2px);
}
.social-icons a:hover svg {
  fill: var(--blanco);
}

/* Zona inferior: logo + legal */
.footer-bottom {
  max-width: 1100px;
  margin: 24px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-logo img {
  height: 50px;
  width: auto;
}
.footer-logo span {
  display: none;
}
.footer-legal {
  font-size: 0.73rem;
  color: #888;
  line-height: 1.7;
  text-align: right;
}

/* ============================================================
   18. ANIMACIONES REVEAL
   Clases usadas por IntersectionObserver en JS (index.html).
   Los elementos arrancan en opacity 0 y se animan al entrar.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   19. RESPONSIVE
   960px = tablet / 560px = mobile
   ============================================================ */
@media (max-width: 960px) {
  /* Grillas pasan a 1 columna */
  .editorial .inner,
  .donation .inner,
  .story .inner,
  .grid3 .inner,
  .counter .inner {
    grid-template-columns: 1fr;
  }
  .editorial.reverse .inner {
    direction: ltr;
  }

  /* Nav: hamburguesa */
  .nav__toggle {
    display: flex;
  }
  .nav__links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--blanco);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    z-index: 205;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 80px 24px 40px;
  }
  .nav__links.open {
    display: flex;
    transform: translateX(0);
  }
  .nav__links a {
    font-size: 1.3rem;
  }

  /* Acciones: 2 columnas */
  .actions-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer: 2 columnas */
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }

  /* Newsletter: ocultar foto en mobile */
  .nl-photo {
    display: none;
  }
  .nl-form {
    margin-left: 0;
    width: 100%;
  }

  /* Grid3: separadores horizontales */
  .g3-item {
    border-right: none;
    padding: 0 0 28px;
    border-bottom: 1px solid var(--gris-claro);
  }
  .g3-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}
@media (max-width: 560px) {
  .actions-grid {
    grid-template-columns: 1fr;
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   22. CARRUSEL DE HISTORIAS (index.html)
   Reemplaza la sección .story estática por un carrusel
   con dots arriba y controles abajo. Reutiliza clases
   .story-name, .story-text, .story-quote, .story-hr, .story-img
   definidas en la sección 11.
   ============================================================ */

/* Contenedor principal */
.story-carousel {
  padding: 80px 8%;
  background: var(--blanco);
  border-top: 1px solid var(--gris-claro);
}
.sc-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Dots centrados arriba */
.sc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
}
.sc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d0dce8;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background var(--trans);
}
.sc-dot.active {
  background: var(--azul);
}

/* Slides */
.sc-slides {
  position: relative;
}
.sc-slide {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: start;
}
.sc-slide.active {
  display: grid;
}

/* Columna de texto — reutiliza clases de .story */
.sc-text {
  display: flex;
  flex-direction: column;
}

/* Controles centrados abajo — reutiliza .qs-arrow y .qs-counter */
.sc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
}

/* Responsive */
@media (max-width: 960px) {
  .sc-slide.active {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ── Variantes de grid: 2 y 4 columnas ──
   Misma estructura que .grid3 pero con 2 o 4 columnas. */

/* 2 columnas */
.grid2 {
  padding: 72px 8%;
  background: var(--blanco);
}
.grid2 .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.grid2 .g3-item {
  padding: 0 48px 0 0;
  margin-right: 48px;
  border-right: 1px solid var(--gris-claro);
}
.grid2 .g3-item:first-child {
  padding-left: 0;
}
.grid2 .g3-item:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
  padding-left: 48px;
}

/* 4 columnas */
.grid4 {
  padding: 72px 8%;
  background: var(--blanco);
}
.grid4 .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.grid4 .g3-item {
  padding: 0 24px 0 0;
  margin-right: 24px;
  border-right: 1px solid var(--gris-claro);
}
.grid4 .g3-item:first-child {
  padding-left: 0;
}
.grid4 .g3-item:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
  padding-left: 24px;
}
.grid4 .g3-item:nth-child(2),
.grid4 .g3-item:nth-child(3) {
  padding-left: 24px;
}

/* Título de sección — centrado, grid4 y story-carousel */
.grid-section-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #002c5f;
  line-height: 1.25;
  text-align: center;
  padding: 0;
  margin-bottom: 40px;
}

/* Responsive grids 2 y 4 */
@media (max-width: 960px) {
  .grid2 .inner {
    grid-template-columns: 1fr;
  }
  .grid4 .inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid2 .g3-item,
  .grid4 .g3-item {
    border-right: none;
    padding: 0 0 28px;
    border-bottom: 1px solid var(--gris-claro);
  }
  .grid2 .g3-item:last-child,
  .grid4 .g3-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}
@media (max-width: 560px) {
  .grid4 .inner {
    grid-template-columns: 1fr;
  }
}

/* ── Grid: ícono solapando imagen (estilo círculo donación) ── */
.g3-img-wrap {
  position: relative;
  margin-bottom: 20px;
}
.g3-img-wrap .g3-img {
  margin-bottom: 0;
}
/* Ícono posicionado arriba-izquierda solapando la imagen */
.g3-icon {
  position: absolute;
  top: -22px;
  left: -20px;
  width: 85px;
  height: 85px;
  z-index: 2;
  border-radius: 50%;
  object-fit: contain;
}

/* ============================================================
   20. PÁGINAS INTERNAS — estilos compartidos
   Usados en: conocenos.html, impacto.html
   ============================================================ */

.nav__links a.active {
  color: var(--azul);
}
.nav__links a.active::after {
  width: 50%;
}

/* ── Page Hero ── */
.ph {
  position: relative;
  height: 320px;
  overflow: hidden;
}
.ph__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
.ph__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 25, 64, 0.65) 0%, rgba(10, 25, 64, 0.15) 55%, transparent 100%);
}
.ph__content {
  position: absolute;
  bottom: 40px;
  left: 8%;
  z-index: 2;
  color: var(--blanco);
}
.ph__title {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
}

/* ── Breadcrumb ── */
.breadcrumb {
  padding: 13px 8%;
  font-size: 0.72rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--gris-claro);
}
.breadcrumb strong {
  font-weight: 800;
  color: var(--texto);
}
.breadcrumb a {
  color: var(--azul);
}
.breadcrumb span {
  margin: 0 6px;
}

/* ── Secciones internas ── */
.imp-sec {
  padding: 72px 8%;
  border-top: 1px solid var(--gris-claro);
}
.imp-sec .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 72px;
  align-items: center;
}
.imp-sec .link-arrow {
  margin-top: 8px;
  display: inline-block;
}
.imp-sec--stats .inner {
  grid-template-columns: 2fr 3fr;
  align-items: start;
}
.imp-sec--phl {
  padding-left: 0;
}
.imp-sec--phl .inner {
  grid-template-columns: 5fr 6fr;
  max-width: none;
  margin: 0;
}
.imp-sec--phr .inner {
  grid-template-columns: 6fr 5fr;
}
.imp-sec--prov .inner {
  grid-template-columns: 5fr 7fr;
  align-items: start;
}
.imp-sec--video {
  padding-left: 0;
}
.imp-sec--video .inner {
  grid-template-columns: 5fr 6fr;
  gap: 56px;
  max-width: none;
  margin: 0;
}
.imp-sec--phl .imp-caption,
.imp-sec--video .imp-caption {
  padding-left: 4%;
}
.imp-sec h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 16px;
  line-height: 1.3;
}
.imp-sec p {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 27.2px;
  margin-bottom: 14px;
}
.imp-sec p:last-of-type {
  margin-bottom: 0;
}

/* ── Stats grandes ── */
.stat-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: center;
}
.stat-item {
  color: var(--azul-claro);
  line-height: 1.4;
}
.stat-item__num {
  font-size: clamp(2rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--azul-claro);
  line-height: 1;
  display: inline;
}
.stat-item__desc {
  font-size: 2rem;
  font-weight: 200;
  color: var(--azul-claro);
  line-height: 1.4;
  display: inline;
}

/* ── Fotos ── */
.imp-photo {
  border-radius: var(--radio-img);
  overflow: hidden;
  aspect-ratio: 4/3.4;
}
.imp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.imp-caption {
  font-size: 0.78rem;
  color: #888;
  font-style: italic;
  margin-top: 8px;
  line-height: 1.5;
}

/* ── Foto con círculo ── */
.photo-circle-wrap {
  position: relative;
}
.photo-circle-wrap .imp-photo {
  margin-left: 44px;
}
.photo-circle {
  position: absolute;
  top: -20px;
  left: 0;
  z-index: 2;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--blanco);
  box-shadow: 0 8px 32px rgba(45, 110, 168, 0.3);
}
.photo-circle p {
  font-size: 1.3rem;
  font-weight: 200;
  color: var(--blanco) !important;
  line-height: 1.2;
  margin: 0 !important;
}

/* ── Provincias ── */
.prov-regions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.prov-regions--4col {
  grid-template-columns: repeat(4, 1fr);
}
.prov-region h4 {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #888;
  margin-bottom: 12px;
}
.prov-region ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.prov-region ul li a {
  font-size: 1.1rem;
  color: var(--azul);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  transition: color var(--trans);
}
.prov-region ul li a::after {
  content: " ›";
  font-size: 1.4em;
  margin-left: 4px;
}
.prov-region ul li a:hover {
  color: var(--oscuro);
}

/* ── Video embed ── */
.imp-video {
  border-radius: var(--radio-img);
  overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: 0 4px 20px rgba(10, 25, 64, 0.1);
}
.imp-video iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── 3 stats en fila ── */
.stat-strip {
  padding: 56px 8%;
  border-top: 1px solid var(--gris-claro);
}
.stat-strip .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.ss-inline {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  color: var(--azul-claro);
  line-height: 1.5;
  margin: 0;
  text-align: left;
}
.ss-inline strong {
  font-weight: 800;
}

/* ── Grid estadísticas ── */
.impact-stats {
  padding: 64px 8%;
  border-top: 1px solid var(--gris-claro);
}
.impact-stats .inner {
  max-width: 1100px;
  margin: 0 auto;
}
.impact-stats h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 28px;
  text-align: center;
}
.stats-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.st-cell {
  text-align: center;
  padding: 32px 24px;
  border-right: 1px solid var(--gris-claro);
  border-bottom: 1px solid var(--gris-claro);
}
.st-cell:nth-child(4n) {
  border-right: none;
}
.st-cell:nth-last-child(-n + 4) {
  border-bottom: none;
}
.st-cell__label {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 12px;
  line-height: 1.4;
}
.st-cell__num {
  font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: 800;
  color: var(--azul-claro);
  line-height: 1;
  margin-bottom: 12px;
}
.st-cell__chevron {
  display: block;
  color: var(--azul-claro);
  font-size: 0.9rem;
  margin-top: 4px;
}

/* ── Gráfico crecimiento ── */
.growth {
  padding: 64px 8%;
  border-top: 1px solid var(--gris-claro);
}
.growth .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 72px;
  align-items: start;
}
.growth h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 16px;
  line-height: 1.3;
}
.growth p {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 27.2px;
  margin-bottom: 14px;
}
#growthSvg {
  width: 100%;
  display: block;
}

/* ── CTA final ── */
.impact-cta {
  background: var(--azul);
  padding: 28px 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.impact-cta p {
  color: var(--blanco);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

/* ── Stat destacado inline (conocenos) ── */
.qs-stat,
.imp-sec p.qs-stat {
  font-size: 1.8rem !important;
  color: var(--azul-claro) !important;
  font-weight: 300;
  line-height: 1.4;
  margin: 20px 0 16px;
}
.qs-stat strong,
.imp-sec p.qs-stat strong {
  font-weight: 800;
  font-size: 2.8rem !important;
  color: var(--azul-claro) !important;
  display: inline;
  line-height: 1;
  vertical-align: middle;
  margin-right: 6px;
}

/* ── Equipo ── */
.qs-team {
  padding: 72px 8%;
  border-top: 1px solid var(--gris-claro);
}
.qs-team .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
}
.qs-team__intro h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 16px;
}
.qs-team__intro p {
  font-size: 15px;
  color: #3b3b3b;
  line-height: 1.7;
}
.qs-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}
.qs-member {
  text-align: center;
}
.qs-member__photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  background: #d6eaf8;
  border: 4px solid #d6eaf8;
}
.qs-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qs-member__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 5px;
}
.qs-member__role {
  font-size: 0.82rem;
  color: #555;
  line-height: 1.45;
}

/* ── Timeline ── */
.qs-timeline {
  padding: 72px 8%;
  border-top: 1px solid var(--gris-claro);
  background: var(--blanco);
}
.qs-timeline .inner {
  max-width: 1100px;
  margin: 0 auto;
}
.qs-timeline h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 28px;
}
.qs-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
}
.qs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d0dce8;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background var(--trans);
}
.qs-dot.active {
  background: var(--azul);
}
.qs-slides {
  position: relative;
}
.qs-slide {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}
.qs-slide.active {
  display: grid;
}
.qs-slide-left p {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 1.75;
}
.qs-slide-right {
  position: relative;
}
.qs-year-photo {
  border-radius: var(--radio-img);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.qs-year-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qs-year-badge {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--azul-circulo);
  color: var(--blanco);
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(45, 110, 168, 0.25);
}
.qs-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
}
.qs-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--gris-claro);
  background: var(--blanco);
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--texto);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--trans),
    background var(--trans);
}
.qs-arrow:hover {
  border-color: var(--azul);
  background: var(--azul);
  color: var(--blanco);
}
.qs-counter {
  font-size: 0.82rem;
  color: #999;
  font-weight: 600;
}

/* ── Grid 3 col conocenos ── */
.qs-grid3 {
  padding: 72px 8%;
  border-top: 1px solid var(--gris-claro);
  background: var(--blanco);
}
.qs-grid3 .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.qs-col {
  display: flex;
  flex-direction: column;
}
.qs-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #deeef8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.qs-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--azul);
  stroke-width: 1.5;
  fill: none;
}
.qs-col h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--azul);
  margin-bottom: 12px;
  line-height: 1.3;
}
.qs-col p {
  font-size: 0.92rem;
  color: #3b3b3b;
  line-height: 1.7;
  margin-bottom: 14px;
}
.qs-col .link-arrow {
  margin-top: auto;
}

/* ── Foto full-width ── */
.qs-fullphoto {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.qs-fullphoto img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* ── Stats 5 columnas ── */
.stats-table--5col {
  grid-template-columns: repeat(5, 1fr);
}
.stats-table--5col .st-cell:nth-child(4n) {
  border-right: 1px solid var(--gris-claro);
}
.stats-table--5col .st-cell:nth-child(5n) {
  border-right: none;
}
.stats-table--5col .st-cell:nth-last-child(-n + 4) {
  border-bottom: 1px solid var(--gris-claro);
}
.stats-table--5col .st-cell:nth-last-child(-n + 5) {
  border-bottom: none;
}
.stats-table--5col .st-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.stats-table--5col .st-cell__num {
  margin-bottom: 0;
  order: 1;
}
.stats-table--5col .st-cell__label {
  margin-bottom: 0;
  text-align: center;
  font-size: 1rem;
  color: #555;
  order: 2;
}

/* ── Responsive páginas internas ── */
@media (max-width: 960px) {
  .imp-sec--stats .inner,
  .imp-sec--phl .inner,
  .imp-sec--phr .inner,
  .imp-sec--prov .inner,
  .imp-sec--video .inner,
  .growth .inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .stat-strip .inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .stats-table {
    grid-template-columns: repeat(2, 1fr);
  }
  .st-cell:nth-child(4n) {
    border-right: 1px solid var(--gris-claro);
  }
  .st-cell:nth-last-child(-n + 4) {
    border-bottom: 1px solid var(--gris-claro);
  }
  .st-cell:nth-child(2n) {
    border-right: none;
  }
  .st-cell:nth-last-child(-n + 2) {
    border-bottom: none;
  }
  .prov-regions {
    grid-template-columns: 1fr 1fr;
  }
  .ph {
    height: 240px;
  }
  .photo-circle-wrap .imp-photo {
    margin-left: 30px;
  }
  .photo-circle {
    width: 130px;
    height: 130px;
  }
  .qs-team .inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .qs-team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .qs-slide.active {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .qs-year-badge {
    width: 70px;
    height: 70px;
    font-size: 1rem;
    top: -12px;
    right: -8px;
  }
  .qs-grid3 .inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .stats-table--5col {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .prov-regions {
    grid-template-columns: 1fr;
  }
  .stats-table {
    grid-template-columns: 1fr;
  }
  .st-cell:nth-child(2n) {
    border-right: 1px solid var(--gris-claro);
  }
  .st-cell:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--gris-claro);
  }
  .st-cell:last-child {
    border-bottom: none;
  }
  .qs-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-table--5col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   21. PÁGINA ALIADOS
   ============================================================ */
.ali-intro {
  padding: 72px 8%;
  border-top: 1px solid var(--gris-claro);
}
.ali-intro .inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}
.ali-intro h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 20px;
  line-height: 1.3;
  text-align: center;
}
.ali-intro p {
  font-size: 1.05rem;
  color: #3b3b3b;
  line-height: 1.75;
  margin-bottom: 14px;
}
.ali-logos {
  padding: 64px 8% 80px;
  border-top: 1px solid var(--gris-claro);
}
.ali-logos .inner {
  max-width: 1100px;
  margin: 0 auto;
}
.ali-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: stretch;
  justify-items: stretch;
}
.ali-logo {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--gris-claro, #e8eaed);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
  cursor: pointer;
}
.ali-logo:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--azul, #1a6bbf);
}
.ali-logo svg {
  max-height: 56px;
  max-width: 140px;
  width: auto;
  display: block;
}
.ali-logo img {
  max-height: 80px;
  max-width: 170px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.ali-cta {
  padding: 64px 8%;
  background: #f4f8fc;
  border-top: 1px solid var(--gris-claro);
  text-align: center;
}
.ali-cta h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 14px;
}
.ali-cta p {
  font-size: 1rem;
  color: #3b3b3b;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 28px;
}
@media (max-width: 960px) {
  .ali-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .ali-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  transition:
    transform var(--trans),
    box-shadow var(--trans);
}
.wa-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55);
}
.wa-float svg {
  width: 32px;
  height: 32px;
  fill: white;
}

/* ============================================================
   22. PÁGINA PROYECTOS
   Usados en: proyectos.html
   ============================================================ */

.proy-sec {
  padding: 64px 8% 80px;
}
.proy-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.proy-intro {
  max-width: 1440px;
  margin-bottom: 48px;
}
.proy-intro h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 12px;
  line-height: 1.3;
}
.proy-intro p {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 1.75;
}

.proy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.proy-card {
  background: var(--blanco);
  border-radius: var(--radio-img);
  border: 1px solid #c8d4e0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition:
    transform var(--trans),
    box-shadow var(--trans);
}
.proy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(10, 25, 64, 0.1);
}
.proy-card__img {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.proy-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.proy-card:hover .proy-card__img img {
  transform: scale(1.04);
}

.proy-card__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.proy-card__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #002c5f;
  line-height: 1.3;
  margin-bottom: 10px;
}
.proy-card__desc {
  font-size: 0.9rem;
  color: #3b3b3b;
  line-height: 1.7;
  margin-bottom: 12px;
  flex: 1;
}

.proy-card__counts {
  display: flex;
  border-top: 1px solid var(--gris-claro);
  border-bottom: 1px solid var(--gris-claro);
}
.proy-count-item {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-right: 1px solid var(--gris-claro);
}
.proy-count-item:last-child {
  border-right: none;
}
.proy-count-item__num {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--azul-claro);
  line-height: 1;
  margin-bottom: 4px;
}
.proy-count-item__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #999;
  line-height: 1.3;
}

@media (max-width: 960px) {
  .proy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .proy-sec {
    padding: 40px 5% 60px;
  }
}
@media (max-width: 560px) {
  .proy-grid {
    grid-template-columns: 1fr;
  }
  .proy-header h2 {
    display: none;
    flex: 0;
  }
  .proy-header {
    justify-content: center;
  }
  .proy-header .btn-pill {
    margin: 0 auto;
  }
  /* Reducir padding vertical de secciones en mobile */
  .imp-sec,
  .al-sec,
  .cn-sec,
  .contacto-sec,
  .proy-sec,
  .ali-intro,
  .ali-logos,
  .ali-cta,
  .proj-sec,
  .editorial,
  .donation,
  .newsletter,
  .grid4,
  .story-carousel {
    padding: 36px 5% !important;
  }
}

/* ============================================================
   23. PÁGINA DETALLE DE PROYECTO
   Usados en: proyectos/agua-de-lluvia.html y similares
   ============================================================ */

/* Sección principal: descripción + carrusel */
.proj-sec {
  padding: 64px 8% 72px;
  border-top: 1px solid var(--gris-claro);
}
.proj-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.proj-desc h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 18px;
  line-height: 1.3;
}
.proj-desc p {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 1.75;
  margin-bottom: 14px;
}

/* Carrusel */
.proj-carousel {
  position: relative;
}
.pc-slides {
  position: relative;
  border-radius: var(--radio-img);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.pc-slide {
  display: none;
  width: 100%;
  height: 100%;
}
.pc-slide.active {
  display: block;
}
.pc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
.pc-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--gris-claro);
  background: var(--blanco);
  cursor: pointer;
  font-size: 1rem;
  color: var(--texto);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--trans),
    background var(--trans);
}
.pc-arrow:hover {
  border-color: var(--azul);
  background: var(--azul);
  color: var(--blanco);
}
.pc-dots {
  display: flex;
  gap: 8px;
}
.pc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d0dce8;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background var(--trans);
}
.pc-dot.active {
  background: var(--azul);
}

/* Contadores grandes */
.proj-counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--gris-claro);
  border-bottom: 1px solid var(--gris-claro);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 8%;
}
.proj-count-item {
  text-align: center;
  padding: 48px 24px;
  border-right: 1px solid var(--gris-claro);
}
.proj-count-item:last-child {
  border-right: none;
}
.proj-count-num {
  display: block;
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 800;
  color: var(--azul-claro);
  line-height: 1;
  margin-bottom: 12px;
}
.proj-count-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
}

@media (max-width: 960px) {
  .proj-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .proj-counts {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 5%;
  }
}
@media (max-width: 560px) {
  .proj-counts {
    grid-template-columns: 1fr;
  }
  .proj-count-item {
    border-right: none;
    border-bottom: 1px solid var(--gris-claro);
    padding: 32px 24px;
  }
  .proj-count-item:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   24. PÁGINA CONTACTO (contacto.html)
   Formulario de contacto con datos, radio buttons y modal.
   ============================================================ */

/* Imagen de fondo del hero — reemplazar por foto de canilla precaria cuando esté lista */
/* ── Sección principal contacto ── */
.contacto-sec {
  padding: 72px 8%;
  border-top: 1px solid var(--gris-claro);
}
.contacto-sec .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}

/* Columna izquierda */
.ct-info h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 16px;
  line-height: 1.3;
}
.ct-info p {
  font-size: 16px;
  color: #3b3b3b;
  line-height: 1.75;
  margin-bottom: 14px;
}
.ct-datos {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ct-dato {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ct-dato__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #deeef8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ct-dato__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--azul);
  stroke-width: 1.5;
  fill: none;
}
.ct-dato__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ct-dato__label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
}
.ct-dato__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--azul);
}
.ct-dato__value a {
  color: var(--azul);
  transition: color var(--trans);
}
.ct-dato__value a:hover {
  color: var(--oscuro);
}

/* Redes sociales en columna izq */
.ct-social {
  margin-top: 36px;
}
.ct-social__label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 12px;
}

/* Columna derecha — card formulario */
.ct-form-wrap {
  background: #deeef8;
  border-radius: 20px;
  padding: 44px 40px;
}
.ct-form-wrap h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 6px;
}
.ct-form-wrap p {
  font-size: 0.9rem;
  color: #3b3b3b;
  line-height: 1.6;
  margin-bottom: 28px;
}

/* Fila de dos campos */
.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Campo individual */
.ct-field {
  margin-bottom: 16px;
}
.ct-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #002c5f;
  margin-bottom: 6px;
}
.ct-field input,
.ct-field textarea,
.ct-field select {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--texto);
  background: var(--blanco);
  outline: none;
  transition: box-shadow var(--trans);
  appearance: none;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder {
  color: #aab8c8;
}
.ct-field input:focus,
.ct-field textarea:focus,
.ct-field select:focus {
  box-shadow: 0 0 0 3px rgba(45, 110, 168, 0.2);
}
.ct-field textarea {
  resize: vertical;
  min-height: 130px;
}

/* Botón submit */
.ct-submit {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.ct-submit button {
  background: var(--azul);
  color: var(--blanco);
  border: none;
  padding: 14px 48px;
  border-radius: var(--radio-pill);
  font-size: 1rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(45, 110, 168, 0.3);
  transition:
    background var(--trans),
    transform var(--trans),
    box-shadow var(--trans);
}
.ct-submit button:hover {
  background: var(--oscuro);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(45, 110, 168, 0.4);
}

/* Mensaje de éxito (oculto por defecto) */
.ct-success {
  display: none;
  text-align: center;
  padding: 32px 0 16px;
}
.ct-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.ct-success__icon svg {
  width: 28px;
  height: 28px;
  stroke: white;
  stroke-width: 2.5;
  fill: none;
}
.ct-success h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 8px;
}
.ct-success p {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
}

/* Radio buttons motivo */
.ct-motivos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ct-motivo {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blanco);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--trans);
}
.ct-motivo input[type="radio"] {
  display: none;
}
.ct-motivo__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #aac8e0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--trans);
}
.ct-motivo__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--azul);
  display: none;
}
.ct-motivo input[type="radio"]:checked ~ .ct-motivo__radio {
  border-color: var(--azul);
}
.ct-motivo input[type="radio"]:checked ~ .ct-motivo__radio .ct-motivo__dot {
  display: block;
}
.ct-motivo:has(input:checked) {
  border-color: var(--azul);
}
.ct-motivo span {
  font-size: 14px;
  font-weight: 600;
  color: #002c5f;
}

@media (max-width: 560px) {
  .ct-motivos {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 960px) {
  .contacto-sec .inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .ct-row {
    grid-template-columns: 1fr;
  }
  .ct-form-wrap {
    padding: 32px 24px;
  }
}

/* ============================================================
   26. UTILIDADES DE PROYECTOS
   Clases para el título centrado con botón a la derecha.
   ============================================================ */

/* Contenedor del título con botón alineado a la derecha */
.proy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.proy-header h2 {
  flex: 1;
}
.proy-header .btn-pill {
  flex-shrink: 0;
}

/* Botones apilados debajo del carrusel */
.proj-btn-group {
  text-align: center;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* Botón secundario oscuro */
.btn-pill--dark {
  background: var(--oscuro2);
}
.btn-pill--dark:hover {
  background: var(--oscuro);
}

/* ============================================================
   27. CLASES UTILITARIAS — reemplazan inline styles
   ============================================================ */

/* Footer: link "Suscribite a novedades" */
.link-arrow--sm {
  font-size: 0.8rem;
}

/* Imágenes full-width en secciones */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-cover-block {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Modal éxito */
.modal-success {
  display: none;
  text-align: center;
  padding: 32px 0;
}
.modal-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.modal-success__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 8px;
}
.modal-success__text {
  font-size: 0.9rem;
  color: #555;
}

/* Aliados: h2 intro */
.ali-intro__h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #002c5f;
  text-align: center;
  margin-bottom: 56px;
}

/* ============================================================
   25. MODAL POSTULACIÓN
   Usado en: proyectos/agua-de-lluvia.html y similares, proyectos.html
   ============================================================ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 25, 64, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.open {
  display: flex;
}
.modal {
  background: var(--blanco);
  border-radius: 20px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(10, 25, 64, 0.25);
  animation: modalIn 0.25s ease;
}
@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal__header {
  padding: 28px 32px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--blanco);
  border-radius: 20px 20px 0 0;
  z-index: 1;
}
.modal__header-text h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #002c5f;
  margin-bottom: 4px;
}
.modal__header-text p {
  font-size: 0.85rem;
  color: #888;
  margin: 0;
}
.modal__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--gris-claro);
  background: var(--blanco);
  cursor: pointer;
  font-size: 1.1rem;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    border-color var(--trans),
    color var(--trans);
}
.modal__close:hover {
  border-color: var(--azul);
  color: var(--azul);
}
.modal__body {
  padding: 24px 32px 32px;
}
.modal__footer {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

/* Grupos del formulario */
.mf-group {
  margin-bottom: 28px;
}
.mf-group__title {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--azul);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gris-claro);
}
.mf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mf-field {
  margin-bottom: 14px;
}
.mf-field:last-child {
  margin-bottom: 0;
}
.mf-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #002c5f;
  margin-bottom: 6px;
}
.mf-field input,
.mf-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--gris-claro);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--texto);
  background: #f8fafc;
  outline: none;
  transition:
    border-color var(--trans),
    background var(--trans);
}
.mf-field input:focus,
.mf-field textarea:focus {
  border-color: var(--azul);
  background: var(--blanco);
  box-shadow: 0 0 0 3px rgba(45, 110, 168, 0.12);
}
.mf-field input::placeholder,
.mf-field textarea::placeholder {
  color: #b0bec5;
}
.mf-field textarea {
  resize: vertical;
  min-height: 90px;
}
.mf-field textarea.tall {
  min-height: 120px;
}

@media (max-width: 560px) {
  .modal__header,
  .modal__body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .mf-row {
    grid-template-columns: 1fr;
  }
}

/* ── Popup de donación ────────────────────────────────────────────────────── */
.donate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.donate-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.donate-popup {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  max-width: 780px;
  width: 90%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  transform: translateY(16px);
  transition: transform 0.3s ease;
}
.donate-overlay.open .donate-popup {
  transform: translateY(0);
}
.donate-popup__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #888;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition:
    background 0.2s,
    color 0.2s;
  z-index: 1;
}
.donate-popup__close:hover {
  background: #f0f0f0;
  color: #333;
}
.donate-popup__img {
  width: 45%;
  flex-shrink: 0;
}
.donate-popup__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.donate-popup__body {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.donate-popup__body h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 800;
  color: var(--azul-oscuro, #0a1940);
  line-height: 1.2;
  margin: 0;
}
.donate-popup__body p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.65;
  margin: 0;
}
.donate-popup__btn {
  display: inline-block;
  background: var(--azul, #1a6bbf);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 28px;
  border-radius: 50px;
  text-decoration: none;
  align-self: flex-start;
  transition:
    background 0.2s,
    transform 0.2s;
  margin-top: 8px;
}
.donate-popup__btn:hover {
  background: var(--azul-oscuro, #0a1940);
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .donate-popup {
    flex-direction: column;
    width: 92%;
  }
  .donate-popup__img {
    width: 100%;
    height: 200px;
  }
  .donate-popup__body {
    padding: 28px 24px;
  }
}

/* ── Popup Evento ────────────────────────────────────────────────────── */
.donate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.donate-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.donate-popup {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  max-width: 780px;
  width: 90%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  transform: translateY(16px);
  transition: transform 0.3s ease;
}
.donate-overlay.open .donate-popup {
  transform: translateY(0);
}
.donate-popup__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #888;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition:
    background 0.2s,
    color 0.2s;
  z-index: 1;
}
.donate-popup__close:hover {
  background: #f0f0f0;
  color: #333;
}
.donate-popup__img {
  width: 45%;
  flex-shrink: 0;
}
.donate-popup__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.donate-popup__body {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.donate-popup__body h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 800;
  color: var(--azul-oscuro, #0a1940);
  line-height: 1.2;
  margin: 0;
}
.donate-popup__body p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.65;
  margin: 0;
}
.donate-popup__btn {
  display: inline-block;
  background: var(--azul, #1a6bbf);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 28px;
  border-radius: 50px;
  text-decoration: none;
  align-self: flex-start;
  transition:
    background 0.2s,
    transform 0.2s;
  margin-top: 8px;
}
.donate-popup__btn:hover {
  background: var(--azul-oscuro, #0a1940);
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .donate-popup {
    flex-direction: column;
    width: 92%;
  }
  .donate-popup__img {
    width: 100%;
    height: 200px;
  }
  .donate-popup__body {
    padding: 28px 24px;
  }
}

/* ── Modo imagen full ─────────────────────────────────────────────────────── */
.donate-popup--full {
  max-width: 780px;
  width: 90%;
  background: transparent;
  box-shadow: none;
  border-radius: 16px;
  overflow: hidden;
}
.donate-popup--full .donate-popup__close {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
}

/* ══════════════════════════════════════════════════════════════════════════════
   22. Página prensa ................ nota-card, kit-sec, prensa-contacto
   ══════════════════════════════════════════════════════════════════════════════ */
/* ── Grilla de notas ── */
.prensa-grid {
  padding: 64px 8%;
}
.prensa-grid .inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.nota-card {
  background: var(--fondo, #f5f7fa);
  border-radius: var(--radio-img, 14px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.25s,
    transform 0.25s;
}
.nota-card:hover {
  box-shadow: 0 8px 28px rgba(10, 25, 64, 0.12);
  transform: translateY(-3px);
}
.nota-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.nota-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.nota-card:hover .nota-card__img img {
  transform: scale(1.04);
}
.nota-card__body {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nota-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nota-card__medio {
  font-weight: 700;
  color: var(--azul, #1a6bbf);
}
.nota-card__titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--azul-oscuro, #0a1940);
  line-height: 1.35;
  flex: 1;
}
.nota-card__link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--azul, #1a6bbf);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  transition: gap 0.2s;
}
.nota-card__link:hover {
  gap: 8px;
}
.nota-card__resumen {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.6;
  margin: 4px 0 0;
  flex: 1;
}

/* ── Kit de prensa ── */
.kit-sec {
  background: var(--azul-oscuro, #0a1940);
  padding: 72px 8%;
}
.kit-sec .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.kit-sec h2 {
  color: #fff;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 16px;
}
.kit-sec p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 28px;
}
.kit-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kit-item {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.2s;
}
.kit-item:hover {
  background: rgba(255, 255, 255, 0.14);
}
.kit-item svg {
  width: 22px;
  height: 22px;
  fill: var(--azul-claro, #5ba4e5);
  flex-shrink: 0;
}

/* ── Contacto de prensa ── */
.prensa-contacto {
  padding: 72px 8%;
  border-top: 1px solid var(--gris-claro, #e8eaed);
}
.prensa-contacto .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.prensa-contacto h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800;
  color: var(--azul-oscuro, #0a1940);
  margin-bottom: 12px;
}
.prensa-contacto p {
  color: #555;
  line-height: 1.7;
  margin-bottom: 28px;
}
.prensa-dato {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.prensa-dato__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.prensa-dato__icon {
  width: 40px;
  height: 40px;
  background: var(--fondo, #f0f4f8);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.prensa-dato__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--azul, #1a6bbf);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prensa-dato__label {
  font-size: 0.75rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.prensa-dato__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--azul-oscuro, #0a1940);
}
.prensa-dato__value a {
  color: var(--azul, #1a6bbf);
  text-decoration: none;
}

@media (max-width: 960px) {
  .prensa-grid .inner,
  .kit-sec .inner,
  .prensa-contacto .inner {
    grid-template-columns: 1fr;
  }
  .kit-items {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .prensa-grid .inner {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   23. Aliados — Reconocimiento especial
   ══════════════════════════════════════════════════════════════════════════════ */
/* ── Reconocimiento especial ── */
.ali-reconocimiento {
  padding: 72px 8%;
  background: linear-gradient(135deg, #f0f6ff 0%, #e8f4f8 100%);
  border-top: 1px solid var(--gris-claro, #e8eaed);
  border-bottom: 1px solid var(--gris-claro, #e8eaed);
}
.ali-rec__header {
  text-align: center;
  margin-bottom: 48px;
}
.ali-rec__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
}
.ali-rec__header h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--azul-oscuro, #0a1940);
  margin: 0 0 12px;
}
.ali-rec__header p {
  color: #555;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}
.ali-rec__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.ali-rec__card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 36px;
  border-left: 4px solid var(--azul, #1a6bbf);
  box-shadow: 0 4px 20px rgba(10, 25, 64, 0.07);
}
.ali-rec__nombre {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--azul-oscuro, #0a1940);
  margin-bottom: 4px;
}
.ali-rec__rol {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--azul, #1a6bbf);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.ali-rec__texto {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 640px) {
  .ali-rec__cards {
    grid-template-columns: 1fr;
  }
}