/* ============================================================
   FUNDESOBOST — Estilos base
   Fundación BOSSTAURUS para el Desarrollo Integral
   Estándares: accesibilidad (WCAG 2.1 AA+), mobile-first, SEO
   ============================================================ */

/* ---------- Variables de diseño ---------- */
:root {
  /* Marca registrada */
  --verde: #2BAE5E;
  --verde-oscuro: #146B3B;   /* texto y botones (contraste) */
  --verde-medio: #1E9254;
  --verde-claro: #E0F5E8;

  --turquesa: #0E9AA7;
  --turquesa-oscuro: #0B7B86;
  --turquesa-claro: #DFF4F5;

  /* Azul Caribe (texto blanco encima: 5.6:1, cumple WCAG AA) */
  --azul: #0E6BA8;
  --azul-oscuro: #0A4F7D;


  --coral: #FF6F3C;
  --coral-oscuro: #D9532A;   /* texto y botones (contraste) */
  --coral-claro: #FFE4D6;

  --amarillo: #FFC93C;
  --amarillo-suave: #FEF3C7;

  --rojo-zenu: #A93226;

  /* Neutros */
  --tinta: #1F2421;          /* texto principal */
  --tinta-suave: #46504A;    /* texto secundario (≥4.5:1) */
  --arena: #F5EBD3;          /* fondos cálidos */
  --raya: #E3E8E4;
  --blanco: #FFFFFF;

  /* Sombras y radios */
  --sombra: 0 2px 10px rgba(31, 36, 33, 0.06);
  --sombra-media: 0 10px 24px rgba(31, 36, 33, 0.10);
  --sombra-alta: 0 24px 48px rgba(31, 36, 33, 0.16);
  --radio-s: 12px;
  --radio-m: 18px;
  --radio-l: 26px;

  /* Tipografía */
  --fuente-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-titulo: 'Baloo 2', 'Inter', system-ui, sans-serif;
  --fuente-numero: 'Oswald', 'Arial Narrow', sans-serif;
  --fuente-tagline: 'Caveat', cursive;

  /* Layout */
  --ancho-max: 1200px;
  --altura-nav: 78px;
  /* Margen lateral real del contenido (evita scroll horizontal) */
  --gutter: clamp(18px, 4vw, 40px);
}

/* ---------- Reset accesible ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-nav) + 14px);
  -webkit-text-size-adjust: 100%;
}

html.menu-abierto, html.menu-abierto body { overflow: hidden; }

body {
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--verde-oscuro); }

ul, ol { list-style: none; }

/* ---------- Accesibilidad: foco visible ---------- */
:focus-visible {
  outline: 3px solid var(--turquesa);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Saltar al contenido (lectores de pantalla y teclado) */
.enlace-salto {
  position: absolute;
  left: 12px;
  top: -70px;
  z-index: 2000;
  background: var(--verde-oscuro);
  color: var(--blanco);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.enlace-salto:focus { top: 12px; }

/* ---------- Tipografía genérica ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  text-wrap: balance;
}

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: .2px;
  color: var(--tinta);
}

/* Párrafos y listas: limite de lectura comodo (~75 caracteres) */
p, li { text-wrap: pretty; }

/* ---------- Contención: nada puede salirse de su caja ----------
   1) Ningún texto se parte a la mitad sin necesidad, pero las cadenas
      largas (correos, URLs, identificadores) SÍ pueden partirse.
   2) Los hijos de flex/grid pueden encogerse por debajo de su contenido.
   3) Las tablas y embeds nunca empujan el ancho de la página. */
body { overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6, p, li, a, strong, span, button, label, td, th, figcaption {
  overflow-wrap: break-word;
}

/* Correos, telefonos y enlaces largos: permiten corte en cualquier punto */
a[href^="mailto:"], a[href^="tel:"], .dato-grande { overflow-wrap: anywhere; }

/* Los numeros de los contadores nunca deben partirse ni desbordar */
.numero { overflow-wrap: normal; white-space: nowrap; }

/* Hijos de flex/grid: pueden reducirse (por defecto min-width:auto = no) */
.hero-rejilla > *, .nosotros-rejilla > *, .mision-vision > *,
.lineas-rejilla > *, .historias-rejilla > *, .alianzas-rejilla > *,
.transparencia-rejilla > *, .documentos-rejilla > *, .vol-tarjetas > *,
.voluntariado-rejilla > *, .contacto-rejilla > *, .metricas-rejilla > *,
.equipo-rejilla > *, .pie-rejilla > *, .donar-bancos > *,
.historia-contenido, .dato-contacto > div, .articulo .ficha > * {
  min-width: 0;
}

/* Contenedores flexibles: los hijos de texto se pueden encoger */
.historia-contenido > *, .dato-contacto > *, .articulo .ficha > *,
.donar-banco > *, .pie-rejilla > * { min-width: 0; }

/* ---------- Foto grande de Sucre ( Nosotros · inicio ) ---------- */
.marco-foto {
  position: relative;
  margin: 0;
  border-radius: var(--radio-l);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
  background: var(--azul-oscuro);
  isolation: isolate;
}

/* Marco decorativo detrás de la foto */
.marco-foto::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: calc(var(--radio-l) - 12px);
  pointer-events: none;
  z-index: 2;
}

.marco-foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  display: block;
}

.marco-foto figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 24px 20px;
  background: linear-gradient(120deg, var(--azul) 0%, var(--azul-oscuro) 100%);
  color: var(--blanco);
  text-align: left;
}
.marco-foto figcaption strong {
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--blanco);
}

/* Atribución de la licencia CC BY-SA (obligatoria) */
.marco-foto .credito-foto {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .74rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}
.marco-foto .credito-foto a {
  color: rgba(255, 255, 255, .88);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.marco-foto .credito-foto a:hover { color: var(--blanco); }

/* En móvil la foto va debajo del texto, a ancho completo */
@media (max-width: 980px) {
  .marco-foto { max-width: 620px; margin-inline: auto; }
  .marco-foto img { aspect-ratio: 16 / 10; }
  .marco-foto figcaption { padding: 16px 18px 18px; text-align: center; }
  .marco-foto .credito-foto { text-align: center; }
}

@media (max-width: 480px) {
  .marco-foto::before { inset: 10px; }
  .marco-foto img { aspect-ratio: 3 / 2; }
  .marco-foto figcaption strong { font-size: 1.05rem; }
  .marco-foto .credito-foto { font-size: .68rem; }
}

/* ---------- Aviso de solicitud de documentos (Transparencia) ---------- */
.aviso-documentos {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 30px;
  padding: 22px 26px;
  background: var(--verde-claro);
  border: 1px solid var(--raya);
  border-left: 5px solid var(--verde);
  border-radius: var(--radio-m);
}
.aviso-documentos .icono {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--verde-oscuro);
  margin: 0;
}
.aviso-documentos .icono svg { width: 21px; height: 21px; }
.aviso-documentos > div { min-width: 0; }
.aviso-documentos h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: var(--verde-oscuro);
}
.aviso-documentos p {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--tinta);
  max-width: 82ch;
}
.aviso-documentos a {
  color: var(--verde-oscuro);
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .aviso-documentos {
    flex-direction: column;
    gap: 12px;
    padding: 20px 18px;
  }
}

/* ---------- Tablas con desplazamiento propio ---------- */
table { width: 100%; border-collapse: collapse; }

/* Embeds y medios: nunca mas anchos que su columna */
.instagram-embed, .hero-embed, iframe, video, embed, object {
  max-width: 100%;
}

/* Red de seguridad: nada genera scroll horizontal en la pagina.
   `clip` no crea contenedor de scroll, a diferencia de `hidden`. */
html, body { max-width: 100%; overflow-x: clip; }

p { color: var(--tinta-suave); }

.etiqueta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
  max-width: 100%;
  text-align: center;
  line-height: 1.35;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 60px;
  padding: 6px 16px;
  margin-bottom: 16px;
}

.etiqueta-verde { background: var(--verde-claro); color: var(--verde-oscuro); }
.etiqueta-turquesa { background: var(--turquesa-claro); color: var(--turquesa-oscuro); }
.etiqueta-coral { background: var(--coral-claro); color: var(--coral-oscuro); }
.etiqueta-amarilla { background: var(--amarillo-suave); color: #92600a; }

.titulo-seccion {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin-bottom: 18px;
}
.titulo-seccion .resaltado { color: var(--verde-medio); }

.intro-seccion {
  max-width: 760px;
  font-size: 1.05rem;
  margin-bottom: 28px;
}
/* Centrado de bloques y encabezados de seccion.
   El HTML usa `centered` en los titulos de seccion y `centrado` en los
   bloques centrados; ambas clases hacen lo mismo. */
.centrado, .centered { text-align: center; }
.centrado .intro-seccion,
.centered .intro-seccion,
.centrado .titulo-seccion,
.centered .titulo-seccion { margin-inline: auto; }
.centrado .lectura,
.centered .lectura { margin-inline: auto; }
.centrado .btn,
.centered .btn { margin-inline: auto; }


.resaltado-naranja { color: var(--coral-oscuro); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: 12px 28px;
  border-radius: 60px;
  border: 2px solid transparent;
  font-family: var(--fuente-cuerpo);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.btn:active { transform: scale(.98); }

.btn-verde { background: var(--verde-oscuro); color: var(--blanco); }
.btn-verde:hover { background: var(--verde-medio); transform: translateY(-2px); box-shadow: var(--sombra-media); }

.btn-coral { background: var(--coral); color: var(--blanco); }
.btn-coral:hover { background: var(--coral-oscuro); transform: translateY(-2px); box-shadow: var(--sombra-media); }

.btn-amarillo { background: var(--amarillo); color: var(--tinta); }
.btn-amarillo:hover { background: #F5Bf22; transform: translateY(-2px); box-shadow: var(--sombra-media); }

.btn-contorno-verde { background: transparent; border-color: var(--verde-oscuro); color: var(--verde-oscuro); }
.btn-contorno-verde:hover { background: var(--verde-claro); }

.btn-contorno-blanco { background: transparent; border-color: rgba(255,255,255,.7); color: var(--blanco); }
.btn-contorno-blanco:hover { background: rgba(255,255,255,.14); }

.btn-blanco { background: var(--blanco); color: var(--verde-oscuro); }
.btn-blanco:hover { background: var(--verde-claro); }

/* ---------- Estructura de página ---------- */
.contenedor {
  width: min(var(--ancho-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.seccion { padding: clamp(56px, 8vw, 92px) 0; position: relative; }

.seccion-arena { background: var(--arena); }
.seccion-verde-claro { background: var(--verde-claro); }
.seccion-blanca { background: var(--blanco); }

/* Aplicar a todas las páginas ocultas el estado por defecto;
   con JS se añade .activa a la página visible. */
.pagina { display: none; }
.pagina.activa { display: block; animation: aparecer .35s ease both; }

html.no-js .pagina { display: block; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--altura-nav);
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--raya);
  box-shadow: 0 1px 6px rgba(31,36,33,.05);
}

.cabecera-contenido {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--fuente-numero);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--tinta);
  text-decoration: none;
}
.logo { display: inline-flex; align-items: center; gap: .5rem; }
.logo img { width: 34px; height: 34px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: box-shadow .2s, transform .2s; }
@media (max-width: 480px) {
  .logo img { width: 28px; height: 28px; }
}
.logo:hover img { box-shadow: 0 4px 12px rgba(0,0,0,.25); transform: translateY(-1px); }

.navegacion-links {
  display: flex;
  align-items: center;
  gap: 1.7rem;
}
.navegacion-links a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--tinta-suave);
  text-decoration: none;
  transition: color .18s ease;
}
.navegacion-links a:hover,
.navegacion-links a:focus-visible { color: var(--verde-oscuro); }

.navegacion-acciones {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.navegacion-acciones .btn { min-height: 42px; padding: 9px 22px; font-size: .9rem; }

.menu-movil-boton {
  display: none;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--verde-claro);
  cursor: pointer;
}
.menu-movil-boton .barras { display: block; width: 22px; height: 2px; margin: 4px auto; background: var(--verde-oscuro); transition: transform .2s, opacity .2s; }
.menu-movil-boton[aria-expanded="true"] .barras:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-movil-boton[aria-expanded="true"] .barras:nth-child(2) { opacity: 0; }
.menu-movil-boton[aria-expanded="true"] .barras:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .menu-movil-boton { display: block; }
  .navegacion-acciones .btn { display: none; }

  .navegacion-links {
    position: fixed;
    top: var(--altura-nav);
    right: 0;
    width: min(360px, 100%);
    height: calc(100dvh - var(--altura-nav));
    background: var(--blanco);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px 8%;
    overflow-y: auto;
    box-shadow: -12px 0 32px rgba(31,36,33,.12);
    transform: translateX(102%);
    transition: transform .25s ease;
    border-left: 1px solid var(--raya);
  }
  .navegacion-links.abierto { transform: translateX(0); }
  .navegacion-links li { border-bottom: 1px solid var(--raya); }
  .navegacion-links a { display: block; padding: 16px 4px; font-size: 1.02rem; font-weight: 600; }
  .navegacion-links .btn { display: inline-flex; margin-top: 20px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--altura-nav);
  background:
    radial-gradient(60% 55% at 88% 12%, var(--verde-claro) 0%, transparent 60%),
    radial-gradient(45% 40% at 6% 86%, var(--coral-claro) 0%, transparent 60%),
    linear-gradient(180deg, var(--blanco) 0%, #FBFDFB 100%);
  overflow: hidden;
}

.hero-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: 48px;
}

.hero-tagline {
  display: block;
  font-family: var(--fuente-tagline);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--rojo-zenu);
  margin-bottom: 10px;
}

.hero-titulo {
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 20px;
}
.hero-titulo .resaltado {
  color: var(--verde-medio);
  position: relative;
}

.hero-texto { max-width: 620px; font-size: 1.08rem; margin-bottom: 28px; }

.hero-botones { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 34px; }

.hero-img {
  position: relative;
}
.hero-img figure {
  border-radius: var(--radio-l);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
  border: 1px solid rgba(43,174,94,.25);
}

/* Ola del Golfo de Morrosquillo: borde marino entre secciones */
.ola-sucre {
  background: var(--blanco);
  line-height: 0;
}
.ola-sucre svg { width: 100%; height: 64px; display: block; }
.ola-sucre path { fill: var(--turquesa-claro); }

/* Franja tejida: motivo en zigzag inspirado en el tejido zenú */
.franja-zenu {
  height: 12px;
  background:
    repeating-linear-gradient(45deg, var(--rojo-zenu) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(135deg, var(--amarillo) 0 10px, transparent 10px 20px);
  background-color: var(--verde-medio);
  background-size: 20px 20px, 20px 20px;
}

/* Métricas de impacto */
.metricas {
  border-top: none;
  background: linear-gradient(180deg, var(--turquesa-claro) 0%, #EFFAFB 45%, var(--blanco) 100%);
}
.metricas-rejilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  padding-block: 34px;
}
.metrica { text-align: center; }
.metrica .numero {
  font-family: var(--fuente-numero);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 600;
  color: var(--verde-oscuro);
  line-height: 1;
}
.metrica .numero::after { content: none; }
.metrica .etiqueta-metrica {
  display: block;
  margin-top: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--tinta-suave);
  letter-spacing: .04em;
}

/* ============================================================
   SECCIONES DE CONTENIDO COMUNES
   ============================================================ */
.cabecera-seccion { margin-bottom: 40px; }

/* Tarjetas genéricas */
.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio-m);
  border: 1px solid var(--raya);
  box-shadow: var(--sombra);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-media); }

/* ============================================================
   NOSOTROS
   ============================================================ */
.nosotros-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.nosotros-texto p { margin-bottom: 16px; }
.nosotros-texto > p:last-child { margin-bottom: 0; }

/* Limita la linea de lectura: ~70 caracteres, comodo de leer en pantalla */
.lectura { max-width: 68ch; }
.centrado .lectura,
.text-center .lectura { margin-inline: auto; }

.mision-vision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.mision-vision .tarjeta {
  padding: 22px 24px;
  border-top: 5px solid var(--verde);
}
.mision-vision .tarjeta:nth-child(2) { border-top-color: var(--coral); }
.mision-vision h3 { font-size: 1.3rem; margin-bottom: 8px; }
.mision-vision p {
  font-size: .98rem;
  line-height: 1.7;
  text-wrap: pretty;
}


/* ============================================================
   LÍNEAS DE ACCIÓN
   ============================================================ */
.lineas-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.linea {
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
}
.linea::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--verde);
  transition: background .2s;
}
.linea:nth-child(2)::after { background: var(--turquesa); }
.linea:nth-child(3)::after { background: var(--coral); }
.linea:nth-child(4)::after { background: var(--rojo-zenu); }
.linea:nth-child(5)::after { background: var(--amarillo); }
.linea:nth-child(6)::after { background: #7A6F3B; }

.linea .icono {
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--verde-claro);
  color: var(--verde-oscuro);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.linea .icono svg { width: 28px; height: 28px; }
.linea h3 { font-size: 1.28rem; margin-bottom: 10px; }
.linea p { font-size: .93rem; margin-bottom: 14px; }
.linea a { font-weight: 600; font-size: .9rem; text-decoration: none; }
.linea a:hover { text-decoration: underline; }

/* ============================================================
   HISTORIAS / BLOG
   ============================================================ */
.historias-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.historia {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.historia-contenido { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.historia-contenido .categoria { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--verde-oscuro); }
.historia-contenido h3 { font-size: 1.2rem; }
.historia-contenido p { font-size: .9rem; flex: 1; }
.historia-contenido a { align-self: flex-start; font-weight: 600; font-size: .9rem; text-decoration: none; }
.historia-contenido a:hover { text-decoration: underline; }

/* Artículo de crónica */
.articulo {
  max-width: 860px;
  margin-inline: auto;
  padding: 40px clamp(18px, 4vw, 48px);
}
/* Titulo de la crónica: es el h1 de la pagina */
.articulo h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-family: var(--fuente-numero);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .2px;
  margin-bottom: 14px;
  color: var(--tinta);
}
.articulo .bajada {
  font-style: italic;
  font-size: 1.05rem;
  margin-bottom: 22px;
}
.articulo h4 { font-family: var(--fuente-numero); font-size: 1.25rem; color: var(--verde-oscuro); margin: 26px 0 8px; letter-spacing: .4px; }
.articulo h4.naranja { color: var(--coral-oscuro); }
.articulo p { margin-bottom: 14px; }
.articulo .destacado {
  background: var(--verde-claro);
  border-left: 5px solid var(--verde);
  border-radius: var(--radio-s);
  padding: 14px 18px;
  font-weight: 600;
  color: var(--verde-oscuro);
  margin: 18px 0;
}
.articulo .ficha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--raya);
  margin-top: 22px;
  padding-top: 18px;
  font-size: .88rem;
  color: var(--tinta-suave);
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 26px;
}
.volver:hover { text-decoration: underline; }

/* ============================================================
   ALIANZAS
   ============================================================ */
.alianzas-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.alianza { padding: 26px 24px; border-top: 5px solid var(--verde); }
.alianza:nth-child(2) { border-top-color: var(--turquesa); }
.alianza:nth-child(3) { border-top-color: var(--coral); }
.alianza h3 { font-size: 1.3rem; margin-bottom: 14px; }
.alianza ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--tinta-suave);
  font-size: .95rem;
  line-height: 1.5;
}
.alianza ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--verde);
  font-weight: 700;
}

/* ============================================================
   TRANSPARENCIA
   ============================================================ */
.transparencia-caja {
  background: var(--arena);
  border-left: 5px solid var(--verde);
  border-radius: var(--radio-m);
  padding: 20px 24px;
  margin-bottom: 28px;
  font-size: .98rem;
}
/* Variante destacada: la caja de regimen tributario */
.transparencia-caja.destacada {
  background: linear-gradient(135deg, var(--verde-claro) 0%, var(--arena) 100%);
  border-left: 6px solid var(--verde-oscuro);
  border: 1px solid var(--raya);
  border-left: 6px solid var(--verde-oscuro);
  box-shadow: var(--sombra-media);
  padding: 26px 28px;
  margin-bottom: 0;
}
.transparencia-caja .etiqueta { margin-bottom: 12px; }
.transparencia-caja h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin-bottom: 10px;
}
.transparencia-caja.destacada h3 { color: var(--verde-oscuro); }
.transparencia-caja p { max-width: 78ch; line-height: 1.65; }

.transparencia-rejilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.trans-item { padding: 22px; text-align: center; }
.trans-item .icono { font-size: 1.8rem; margin-bottom: 12px; }
.trans-item h3 { font-size: 1.1rem; margin-bottom: 8px; }
.trans-item p { font-size: .88rem; margin-bottom: 14px; }
.sello {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--verde-claro);
  color: var(--verde-oscuro);
  border-radius: 40px;
  padding: 5px 14px;
}

/* Equipo */

.equipo-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  margin-top: 28px;
}
.miembro {
  padding: 24px;
  text-align: center;
  border-top: 4px solid var(--coral);
}
.miembro .avatar {
  width: 74px; height: 74px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--verde-oscuro);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fuente-numero);
  font-size: 1.5rem;
  font-weight: 600;
}
.miembro h3 { font-size: 1.15rem; }

/* Cargo / función de cada integrante (naranja, igual para todo el equipo) */
.miembro .cargo { display: block; font-size: .85rem; color: var(--coral-oscuro); font-weight: 600; margin-top: 4px; }


/* ============================================================
   DONAR
   ============================================================ */
#donar, .cta-donar-banda {
  background: linear-gradient(135deg, var(--verde-oscuro) 0%, var(--verde-medio) 60%, var(--turquesa) 120%);
  color: var(--blanco);
}
#donar .titulo-seccion, #donar h3, .cta-donar-banda h2 { color: var(--blanco); }
#donar p, .cta-donar-banda p { color: rgba(255,255,255,.85); }

.donar-opciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 28px 0; }
.donar-monto {
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 60px;
  border: 2px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12);
  color: var(--blanco);
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.donar-monto:hover { transform: translateY(-2px); }
.donar-monto.activo { background: var(--blanco); color: var(--verde-oscuro); border-color: var(--blanco); }

.donar-bancos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 30px auto 0;
  text-align: left;
}
.donar-banco {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radio-m);
  padding: 18px 20px;
}
.donar-banco h3 { font-size: 1.05rem; margin-bottom: 10px; }
.donar-banco p { font-size: .9rem; margin-bottom: 6px; color: rgba(255,255,255,.85); }
.donar-banco .dato { font-weight: 700; color: var(--blanco); }
.donar-banco a { color: var(--blanco); font-weight: 600; }
/* Numero grande y centrado: es el dato que se copia al donating */
.donar-banco .dato-grande {
  font-family: var(--fuente-numero);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--blanco);
  margin-bottom: 8px;
  text-align: center;
  word-break: break-word;
}
.donar-banco .dato-nota { font-size: .84rem; line-height: 1.5; }
.donar-banco .dato-nota:last-child { margin-bottom: 0; }

/* Copiar el numero al portapapeles */
.btn-copiar {
  margin-top: 12px;
  width: 100%;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 60px;
  border: 1.5px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.1);
  color: var(--blanco);
  font-family: var(--fuente-cuerpo);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: background .2s, transform .2s;
}
.btn-copiar:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.btn-copiar.copiado { background: var(--blanco); color: var(--verde-oscuro); border-color: var(--blanco); }

/* ============================================================
   VOLUNTARIADO
   ============================================================ */
.voluntariado-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.vol-tarjetas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.vol-item {
  background: var(--blanco);
  border-radius: var(--radio-m);
  padding: 20px;
  box-shadow: var(--sombra-media);
}
.vol-item .icono { font-size: 1.9rem; margin-bottom: 10px; }
.vol-item h3 { font-size: 1.1rem; margin-bottom: 6px; }
.vol-item p { font-size: .88rem; }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto-rejilla {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.dato-contacto { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.dato-contacto .icono {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--verde-oscuro);
  display: flex; align-items: center; justify-content: center;
}
.dato-contacto .icono svg { width: 22px; height: 22px; }
.dato-contacto strong { display: block; color: var(--tinta); margin-bottom: 2px; }
.dato-contacto p { font-size: .95rem; }

.formulario-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--raya);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-media);
  padding: clamp(22px, 4vw, 36px);
}
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: .9rem; font-weight: 700; margin-bottom: 6px; color: var(--tinta); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1.5px solid #C9D2CC;
  border-radius: var(--radio-s);
  background: var(--blanco);
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  color: var(--tinta);
  transition: border-color .18s, box-shadow .18s;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346504A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
  -webkit-appearance: none;
  appearance: none;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--verde-medio);
  box-shadow: 0 0 0 4px rgba(43,174,94,.14);
}
.campo .requerido { color: var(--coral-oscuro); }

.estado-formulario {
  display: none;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radio-s);
  font-weight: 600;
}
.estado-formulario.exito { display: block; background: var(--verde-claro); color: var(--verde-oscuro); }
.estado-formulario.error { display: block; background: var(--coral-claro); color: var(--coral-oscuro); }

/* ============================================================
   PIE DE PÁGINA
   ============================================================ */
.pie {
  background: #1A1F1C;
  color: rgba(255,255,255,.72);
  padding: 56px 0 28px;
  border-top: 5px solid var(--verde);
}
.pie-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}
.pie h3 { color: var(--blanco); font-size: 1.05rem; margin-bottom: 16px; font-family: var(--fuente-numero); letter-spacing: .05em; }
.pie a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .93rem; line-height: 2; }
.pie a:hover { color: var(--blanco); }
.pie .logo { color: var(--blanco); margin-bottom: 14px; }
.pie .pie-texto { font-size: .92rem; line-height: 1.7; }

.pie-legal {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}
.pie-firma {
  font-family: var(--fuente-tagline);
  font-size: 1.3rem;
  color: var(--amarillo);
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.sociales { display: flex; gap: 10px; }
.sociales a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.sociales a:hover { background: var(--verde); }
.sociales svg { width: 20px; height: 20px; fill: var(--blanco); }

/* ============================================================
   Botones flotantes (WhatsApp / volver arriba)
   ============================================================ */
.flotante-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-alta);
  transition: transform .2s;
}
.flotante-whatsapp:hover { transform: translateY(-3px) scale(1.05); }
.flotante-whatsapp svg { width: 30px; height: 30px; fill: var(--blanco); }

/* ============================================================
   CRÉDITOS DE IMÁGENES
   ============================================================ */
.credito {
  display: inline-block;
  margin-top: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 40px;
  padding: 3px 10px;
}
.credito-archivo { background: var(--verde-claro); color: var(--verde-oscuro); }
.credito-stock { background: var(--arena); color: var(--tinta-suave); }

/* Logos de aliados */
.logos-aliados {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 34px;
  padding: 26px 18px;
  background: var(--blanco);
  border-radius: var(--radio-m);
  border: 1px dashed var(--raya);
}
.logos-aliados .logo-aliado {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.logos-aliados .logo-aliado img {
  height: 56px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}
.logos-aliados .logo-aliado span { font-size: .72rem; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; }

/* ============================================================
   DESCARGABLES / CONVOCATORIAS
   ============================================================ */
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero-rejilla { grid-template-columns: 1fr; }
  .hero-img { max-width: 620px; }
  .metricas-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nosotros-rejilla { grid-template-columns: 1fr; }
  .mision-vision { grid-template-columns: 1fr; }
  .lineas-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .historias-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alianzas-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .transparencia-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voluntariado-rejilla { grid-template-columns: 1fr; }
  .contacto-rejilla { grid-template-columns: 1fr; }
  .pie-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .vol-tarjetas { grid-template-columns: 1fr; }
  .lineas-rejilla, .historias-rejilla, .alianzas-rejilla, .transparencia-rejilla { grid-template-columns: 1fr; }
  .pie-rejilla { grid-template-columns: 1fr; }
  .botones { width: 100%; }
  .botones .btn { width: 100%; }
  .articulo { padding: 28px 18px 32px; }
  .articulo .ficha { flex-direction: column; align-items: flex-start; }
  .donar-bancos { grid-template-columns: 1fr; }
  .donar-banco .dato-grande { font-size: clamp(1.4rem, 6.4vw, 1.7rem); }
  .pie-legal { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-botones .btn, .text-center .btn { width: 100%; }
}

/* ---- Tablets: la rejilla de documentos pasa a 3 columnas ---- */
@media (max-width: 980px) {
  .documentos-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   REDUCCIÓN DE MOVIMIENTO (accesibilidad)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   UTILIDADES (reemplazan los styles inline del index.html)
   ============================================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 22px; }
.mt-lg { margin-top: 32px; }
.mt-xl { margin-top: 48px; }

.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 22px; }
.mb-lg { margin-bottom: 28px; }

.max-w-420 { max-width: 420px !important; }
.max-w-640 { max-width: 640px !important; }
.max-w-680 { max-width: 680px !important; }
.max-w-720 { max-width: 720px !important; }
.max-w-740 { max-width: 740px !important; }
.max-w-800 { max-width: 800px !important; }

.w-100 { width: 100%; }

.btn-sm {
  min-height: 0;
  padding: 6px 16px;
  font-size: .82rem;
  border-radius: 40px;
}

.texto-amarillo { color: var(--amarillo); }

.tagline {
  font-family: var(--fuente-tagline);
  font-size: 1.7rem;
  color: var(--coral-oscuro);
  margin: .6rem 0 1.4rem;
}

.flex { display: flex; }
.centrado-vertical { align-items: center; }
.min-h-60svh { min-height: 60svh; }

/* ============================================================
   DOCUMENTOS DESCARGABLES (Transparencia)
   ============================================================ */
.documentos-rejilla {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.tarjeta.documento {
  text-align: center;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tarjeta.documento:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.tarjeta.documento .icono {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--verde-claro, #E0F5E8);
  color: var(--verde, #146B3B);
  flex-shrink: 0;
}
.tarjeta.documento .icono svg { width: 21px; height: 21px; }
.tarjeta.documento h3 { margin: 0; font-size: .95rem; line-height: 1.25; }
.tarjeta.documento p { margin: 0; font-size: .82rem; line-height: 1.45; }
.tarjeta.documento .btn { margin-top: auto; padding: 6px 12px; font-size: .78rem; }

@media (max-width: 980px) {
  .documentos-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .documentos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .documentos-rejilla { grid-template-columns: 1fr; }
}

/* --- EMBEDS DE INSTAGRAM (blockquote.instagram-media) ---
   El script oficial de Instagram (embed.js) reemplaza el blockquote por un
   iframe con la altura correcta. No fijamos alturas: basta con acotar el
   ancho y centrarlo. */
.instagram-embed {
  margin: 32px auto;
  max-width: 540px;
  width: 100%;
}
.instagram-embed .instagram-media {
  margin: 0 auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  background: #fff;
}

.hero-img figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-img figcaption {
  text-align: center;
  font-size: 0.92rem;
  color: var(--verde-oscuro, #0F5130);
  line-height: 1.4;
}

.hero-img figcaption strong {
  display: block;
  font-family: var(--fuente-titulos, 'Baloo 2', sans-serif);
  font-size: 1.05rem;
  color: var(--verde, #146B3B);
  margin-bottom: 4px;
}

/* El embed del hero: ancho completo de su columna, sin alturas fijas */
.hero-img .hero-embed {
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}
.hero-img .hero-embed .instagram-media {
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(20, 107, 59, 0.15);
}

@media (max-width: 480px) {
  .instagram-embed { margin: 22px auto 26px; }
  .hero-img .hero-embed .instagram-media { border-radius: 12px; }
}
@media (max-width: 768px) {
  .hero-img .hero-embed .instagram-media { border-radius: 14px; }
}

/* ============================================================
   IMPRESIÓN / EXPORTAR A PDF
   ============================================================ */
@media print {
  .cabecera, .navegacion, .flotante-whatsapp, .ola-sucre,
  .franja-zenu, .donar-opciones, .instagram-embed,
  .enlace-salto, .sociales { display: none !important; }

  body { font-size: 11pt; color: #000; background: #fff; }
  .pagina { display: block !important; }
  .pagina:not(.activa) { page-break-before: always; }
  .seccion { padding: 12pt 0; }
  .contenedor { width: 100%; }
  .tarjeta, .articulo, .formulario-tarjeta {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .pie { background: #fff; color: #000; border-top: 2px solid #000; }
  .pie a, .pie-legal, .pie-legal p { color: #000 !important; }
}