/* =============================================================
   DONAMOR — Asociación Integral Altruista Donando Amor
   Hoja de estilos única del sitio. HTML puro, sin frameworks.

   Identidad extraída del logotipo institucional:
   azul #0B1284 (cuadro), y la paleta del corazón pintado a
   brochazos: amarillo, rojo, magenta, cian, lima y naranja.
   El brochazo es el motivo gráfico que recorre todo el sitio.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marca */
  --azul:        #0B1284;
  --azul-hondo:  #060B52;
  --azul-vivo:   #1F2ECB;
  --azul-humo:   #E8EAF7;

  /* Paleta del corazón */
  --amarillo: #F7B500;
  --rojo:     #E12E26;
  --magenta:  #E5007E;
  --cian:     #29A6DC;
  --lima:     #BFD200;
  --naranja:  #F26722;

  /* Versiones oscurecidas de los acentos, para cuando el color de marca
     hace de TEXTO sobre fondo claro. Los originales son de relleno: en
     cifras grandes el cian y el naranja quedaban lavados sobre la crema. */
  --cian-texto:     #0E6D97;
  --naranja-texto:  #C0480B;
  --lima-texto:     #6E7A00;
  --amarillo-texto: #8A6400;

  /* Colores del brochazo. La palabra resaltada va SIEMPRE en blanco, así
     que el trazo tiene que ser lo bastante oscuro para sostenerlo: sobre
     el amarillo o el lima de marca el blanco daría 1,8:1. Estos son los
     mismos tonos, bajados hasta pasar contraste (3,5:1 a 5,9:1). */
  --brocha-amarillo: #A87200;   /* el más usado: se baja algo más, 4,1:1 */
  --brocha-rojo:     #D42219;
  --brocha-cian:     #0E6D97;
  --brocha-lima:     #6E7A00;
  --brocha-magenta:  #C4006B;
  --brocha-naranja:  #C0480B;

  /* Neutros cálidos.
     Sobre fondo claro no se usan grises medios: el texto secundario
     (--gris) es casi negro igual que el principal. La jerarquía la marcan
     el tamaño y el peso, no un color más flojo. */
  --hueso:  #FBF8F3;
  --crema:  #F3EDE3;
  --tinta:  #12121C;   /* texto principal  · 15.9:1 sobre hueso */
  --gris:   #2B2B3A;   /* texto secundario · 13.1:1 sobre hueso */
  --linea:  #E2DCD1;
  --blanco: #FFFFFF;

  /* Tipografía */
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --texto:   'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Métrica */
  --ancho: 1200px;
  --ancho-ancho: 1400px;
  --radio: 18px;
  --radio-s: 10px;
  --sombra: 0 18px 44px rgba(11,18,132,.10);
  --sombra-alta: 0 28px 70px rgba(11,18,132,.18);
  --alto-header: 84px;
  --transicion: .35s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:100px; }

body{
  margin:0;
  font-family:var(--texto);
  font-size:17px;
  line-height:1.68;
  color:var(--tinta);
  background:var(--hueso);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.menu-abierto{ overflow:hidden; }

/* height:auto es imprescindible. Los atributos width/height del HTML
   (que se ponen para reservar el espacio y evitar saltos al cargar) se
   aplican como altura CSS y anulan cualquier aspect-ratio posterior: sin
   esto, una foto con height="900" se dibuja de 900 px de alto y
   object-fit la recorta a una tira vertical. */
img{ max-width:100%; display:block; height:auto; }
a{ color:var(--azul); text-decoration:none; transition:color var(--transicion); }
a:hover{ color:var(--azul-vivo); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{ margin:0; line-height:1.06; font-weight:400; }
h1,h2{ font-family:var(--display); letter-spacing:.005em; text-transform:uppercase; }
h3,h4{ font-family:var(--texto); font-weight:700; line-height:1.25; letter-spacing:-.01em; }
p{ margin:0 0 18px; }
p:last-child{ margin-bottom:0; }

h1{ font-size:clamp(38px,6.4vw,78px); }
h2{ font-size:clamp(30px,4.4vw,54px); }
h3{ font-size:clamp(20px,2.2vw,26px); }

:focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px; border-radius:4px; }

.salto-contenido{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--azul); color:#fff; padding:14px 22px; border-radius:0 0 10px 0; font-weight:600;
}
.salto-contenido:focus{ left:0; color:#fff; }

/* ---------- 3. Utilidades de layout ---------- */
.contenedor{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 24px; }
.contenedor-ancho{ width:100%; max-width:var(--ancho-ancho); margin:0 auto; padding:0 24px; }

.seccion{ padding:100px 0; position:relative; }
.seccion-compacta{ padding:70px 0; }
.seccion-azul{ background:var(--azul); color:#fff; }
.seccion-azul h2,.seccion-azul h3{ color:#fff; }
.seccion-azul a{ color:var(--amarillo); }
.seccion-crema{ background:var(--crema); }

.cabecera-seccion{ max-width:760px; margin-bottom:56px; }
.cabecera-seccion.centrada{ margin-left:auto; margin-right:auto; text-align:center; }

/* Kicker: etiqueta con punto de color */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul); margin-bottom:18px;
}
.kicker::before{
  content:''; width:11px; height:11px; border-radius:50%;
  background:var(--rojo); flex:none;
}
.seccion-azul .kicker{ color:var(--amarillo); }
.seccion-azul .kicker::before{ background:var(--amarillo); }

.entradilla{ font-size:clamp(17px,1.6vw,20px); color:var(--gris); margin-top:20px; }
.seccion-azul .entradilla{ color:rgba(255,255,255,.93); }

/* ---------- 4. Motivo brochazo ---------- */
/* Resalta una palabra con un trazo de pintura irregular detrás.
   Regla única: la palabra siempre en blanco sobre el trazo oscurecido.
   Da igual si el bloque de alrededor es claro u oscuro, y así el recurso
   se lee igual en toda la web. */
.brocha{
  position:relative; display:inline-block; z-index:0; padding:0 .1em;
  color:#fff;
}
.brocha::before{
  content:''; position:absolute; z-index:-1;
  left:-.08em; right:-.08em; top:14%; bottom:6%;
  background:var(--brocha-amarillo);
  transform:rotate(-1.1deg) skewX(-4deg);
  clip-path:polygon(0% 22%,4% 6%,17% 14%,33% 3%,49% 12%,64% 2%,79% 13%,93% 5%,100% 18%,
                    99% 78%,95% 95%,82% 86%,66% 97%,50% 88%,35% 98%,19% 87%,6% 96%,1% 80%);
}
.brocha-rojo::before{ background:var(--brocha-rojo); }
.brocha-cian::before{ background:var(--brocha-cian); }
.brocha-magenta::before{ background:var(--brocha-magenta); }
.brocha-lima::before{ background:var(--brocha-lima); }
.brocha-naranja::before{ background:var(--brocha-naranja); }

/* Cinta de seis colores: firma visual de la marca */
.cinta-colores{ display:flex; height:7px; width:100%; }
.cinta-colores span{ flex:1; }
.cinta-colores span:nth-child(1){ background:var(--rojo); }
.cinta-colores span:nth-child(2){ background:var(--naranja); }
.cinta-colores span:nth-child(3){ background:var(--amarillo); }
.cinta-colores span:nth-child(4){ background:var(--lima); }
.cinta-colores span:nth-child(5){ background:var(--cian); }
.cinta-colores span:nth-child(6){ background:var(--magenta); }

/* ---------- 5. Botones ---------- */
/* Los selectores llevan también "a.boton-…" a propósito: iguala la
   especificidad de las reglas de color de enlace por contexto
   (.seccion-azul a, .pie a) y, al ir después, el botón manda. */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border:2px solid transparent; border-radius:100px;
  font-weight:700; font-size:15.5px; letter-spacing:.02em; line-height:1;
  cursor:pointer; text-align:center;
  transition:transform var(--transicion), background var(--transicion), color var(--transicion), box-shadow var(--transicion);
}
.boton:hover{ transform:translateY(-3px); }
.boton svg{ width:18px; height:18px; flex:none; }

.boton-donar, a.boton-donar{ background:var(--rojo); color:#fff; box-shadow:0 10px 26px rgba(225,46,38,.34); }
.boton-donar:hover, a.boton-donar:hover{ background:#c4211a; color:#fff; box-shadow:0 16px 34px rgba(225,46,38,.44); }

.boton-azul, a.boton-azul{ background:var(--azul); color:#fff; }
.boton-azul:hover, a.boton-azul:hover{ background:var(--azul-vivo); color:#fff; }

.boton-amarillo, a.boton-amarillo{ background:var(--amarillo); color:var(--azul); }
.boton-amarillo:hover, a.boton-amarillo:hover{ background:#ffc82b; color:var(--azul); }

.boton-linea, a.boton-linea{ background:transparent; color:var(--azul); border-color:var(--azul); }
.boton-linea:hover, a.boton-linea:hover{ background:var(--azul); color:#fff; }

/* Todo lo que tiene fondo azul, no solo .seccion-azul: el hero y la franja
   de donación también son azules y ahí el botón quedaba azul sobre azul. */
.seccion-azul .boton-linea,
.hero .boton-linea,
.hero-interior .boton-linea,
.franja-donar .boton-linea{ color:#fff; border-color:rgba(255,255,255,.6); }
.seccion-azul .boton-linea:hover,
.hero .boton-linea:hover,
.hero-interior .boton-linea:hover,
.franja-donar .boton-linea:hover{ background:#fff; color:var(--azul); border-color:#fff; }

.grupo-botones{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* Enlace con flecha */
.enlace-flecha{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:15px; color:var(--azul);
}
.enlace-flecha span{ transition:transform var(--transicion); }
.enlace-flecha:hover span{ transform:translateX(6px); }

/* ---------- 6. Barra superior + cabecera ---------- */
.barra-super{
  background:var(--azul-hondo); color:rgba(255,255,255,.88);
  font-size:13.5px; padding:9px 0;
}
.barra-super .contenedor-ancho{ display:flex; justify-content:space-between; align-items:center; gap:20px; }
.barra-super a{ color:rgba(255,255,255,.9); }
.barra-super a:hover{ color:var(--amarillo); }
.barra-super-datos{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.barra-super-datos li{ display:flex; align-items:center; gap:8px; }
.barra-super-redes{ display:flex; gap:14px; align-items:center; }
.barra-super-redes a{ display:grid; place-items:center; }
.barra-super svg{ width:15px; height:15px; fill:currentColor; }

.cabecera{
  position:sticky; top:0; z-index:120;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--linea);
  transition:box-shadow var(--transicion);
}
.cabecera.encogida{ box-shadow:0 10px 30px rgba(11,18,132,.10); }
.cabecera-fila{
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  height:var(--alto-header);
  transition:height var(--transicion);
}
.cabecera.encogida .cabecera-fila{ height:68px; }

.logo{ display:flex; align-items:center; gap:13px; flex:none; }
.logo img{ height:56px; width:auto; transition:height var(--transicion); }
.cabecera.encogida .logo img{ height:46px; }
.logo-texto{ display:flex; flex-direction:column; line-height:1.1; }
.logo-texto strong{
  font-family:var(--display); font-size:23px; color:var(--azul);
  letter-spacing:.01em; text-transform:uppercase; font-weight:400;
}
.logo-texto small{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); font-weight:600; }

/* Hijo directo: si no, el flex horizontal alcanzaría también a los submenús. */
.nav-principal > ul{ display:flex; align-items:center; gap:28px; }
.nav-principal a{
  position:relative; font-weight:600; font-size:15.5px; color:var(--tinta); padding:6px 0;
}
.nav-principal a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:3px;
  background:var(--rojo); border-radius:3px; transition:right var(--transicion);
}
.nav-principal a:hover{ color:var(--azul); }
.nav-principal a:hover::after,
.nav-principal a[aria-current="page"]::after{ right:0; }
.nav-principal a[aria-current="page"]{ color:var(--azul); }

/* --- Submenús desplegables --- */
.nav-principal li{ position:relative; }
.tiene-sub > a{ padding-right:16px; }
.sub-flecha{
  position:absolute; right:-2px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; padding:0; border:0; background:none; display:grid; place-items:center;
}
.sub-flecha svg{
  width:11px; height:11px; stroke:var(--gris); fill:none; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; transition:transform var(--transicion), stroke var(--transicion);
}
.tiene-sub:hover .sub-flecha svg,
.sub-flecha[aria-expanded="true"] svg{ stroke:var(--azul); transform:rotate(180deg); }

.submenu{
  display:block;
  position:absolute; top:100%; left:-18px; z-index:20;
  min-width:264px; max-width:min(320px, 90vw); padding:12px 0; margin-top:14px;
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra-alta);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}
/* Puente invisible: el ratón puede bajar sin que se cierre */
.submenu::before{ content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.submenu::after{
  content:''; position:absolute; top:-5px; left:26px; width:10px; height:10px;
  background:#fff; border-left:1px solid var(--linea); border-top:1px solid var(--linea);
  transform:rotate(45deg);
}
.tiene-sub:hover .submenu,
.tiene-sub:focus-within .submenu,
.submenu.abierto{ opacity:1; visibility:visible; transform:none; }

.submenu li{ position:static; }
.submenu a{
  display:flex; align-items:center; gap:11px;
  padding:11px 22px; font-size:15px; font-weight:600; color:var(--tinta); white-space:nowrap;
}
.submenu a::after{ display:none; }
.submenu a::before{
  content:''; flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--color-punto,var(--azul-humo)); transition:transform var(--transicion);
}
.submenu a:hover{ background:var(--hueso); color:var(--azul); }
.submenu a:hover::before{ transform:scale(1.5); }

.cabecera-acciones{ display:flex; align-items:center; gap:14px; flex:none; }
.cabecera-acciones .boton{ padding:13px 24px; font-size:14.5px; }

.boton-menu{
  display:none; width:46px; height:46px; border:1px solid var(--linea); border-radius:12px;
  background:#fff; padding:0; place-items:center;
}
.boton-menu span{
  display:block; width:21px; height:2px; background:var(--azul); border-radius:2px;
  position:relative; transition:background .2s;
}
.boton-menu span::before,.boton-menu span::after{
  content:''; position:absolute; left:0; width:21px; height:2px; background:var(--azul); border-radius:2px;
  transition:transform var(--transicion), top var(--transicion);
}
.boton-menu span::before{ top:-7px; }
.boton-menu span::after{ top:7px; }
.boton-menu[aria-expanded="true"] span{ background:transparent; }
.boton-menu[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.boton-menu[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* Cajón móvil */
.menu-movil{
  position:fixed; inset:0; z-index:130;
  background:var(--azul); color:#fff;
  padding:96px 28px 40px;
  transform:translateX(100%); transition:transform var(--transicion);
  overflow-y:auto; visibility:hidden;
}
.menu-movil.abierto{ transform:translateX(0); visibility:visible; }
.menu-movil ul{ display:flex; flex-direction:column; gap:4px; }
.menu-movil a{
  display:block; color:#fff; font-family:var(--display); font-size:30px;
  text-transform:uppercase; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.menu-movil a:hover,.menu-movil a[aria-current="page"]{ color:var(--amarillo); }
.menu-movil .boton{ width:100%; margin-top:30px; }
.menu-movil-contacto{ margin-top:34px; font-size:15px; color:rgba(255,255,255,.88); }
.menu-movil-contacto a{ font-family:var(--texto); font-size:15px; padding:0; border:0; display:inline; color:var(--amarillo); }

/* Submenús dentro del cajón móvil */
.menu-movil .tiene-sub{ border-bottom:1px solid rgba(255,255,255,.14); }
.menu-movil .tiene-sub > a{ border-bottom:0; }
.menu-movil .fila-sub{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.menu-movil .sub-flecha{
  position:static; transform:none; width:44px; height:44px; flex:none;
  border-radius:12px; background:rgba(255,255,255,.12);
}
.menu-movil .sub-flecha svg{ width:15px; height:15px; stroke:#fff; }
.menu-movil .sub-flecha[aria-expanded="true"]{ background:var(--amarillo); }
.menu-movil .sub-flecha[aria-expanded="true"] svg{ stroke:var(--azul); }
.menu-movil .submenu{
  position:static; min-width:0; margin:0; padding:0; border:0; border-radius:0;
  background:none; box-shadow:none; transform:none;
  height:0; overflow:hidden; opacity:1; visibility:visible;
  transition:height var(--transicion);
}
.menu-movil .submenu::before,.menu-movil .submenu::after{ display:none; }
.menu-movil .submenu ul{ padding:4px 0 18px; gap:0; }
.menu-movil .submenu a{
  font-family:var(--texto); font-size:16.5px; text-transform:none;
  color:rgba(255,255,255,.9); padding:10px 0 10px 22px; border:0; white-space:normal;
}
.menu-movil .submenu a::before{ position:absolute; left:2px; background:var(--amarillo); width:6px; height:6px; }
.menu-movil .submenu a{ position:relative; }
.menu-movil .submenu a:hover{ background:none; color:var(--amarillo); }
.cerrar-menu{
  position:absolute; top:24px; right:24px; width:46px; height:46px;
  background:rgba(255,255,255,.12); border:0; border-radius:12px; color:#fff; font-size:26px; line-height:1;
}

/* ---------- 7. Hero ---------- */
.hero{ position:relative; background:var(--azul-hondo); color:#fff; overflow:hidden; }
.hero-fondo{ position:absolute; inset:0; }
.hero-fondo img{ width:100%; height:100%; object-fit:cover; }
.hero-fondo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(6,11,82,.94) 0%, rgba(11,18,132,.86) 42%, rgba(11,18,132,.42) 100%);
}
.hero-cuerpo{ position:relative; z-index:2; padding:120px 0 130px; max-width:790px; }
.hero h1{ color:#fff; }
/* Vale para los dos heroes: el de portada y el de las páginas interiores.
   Sin .hero-interior, el kicker quedaba azul sobre azul. */
.hero .kicker, .hero-interior .kicker{ color:var(--amarillo); }
.hero .kicker::before, .hero-interior .kicker::before{ background:var(--amarillo); }
.hero-lema{
  font-size:clamp(17px,1.9vw,21px); color:rgba(255,255,255,.94); margin-top:26px; max-width:610px;
}
.hero-pie{
  display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:44px;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.2);
  font-size:14.5px; color:rgba(255,255,255,.88);
}
.hero-pie li{ display:flex; align-items:center; gap:9px; }
.hero-pie b{ color:var(--amarillo); font-family:var(--display); font-size:26px; font-weight:400; line-height:1; }

/* Hero interior (páginas secundarias) */
.hero-interior{ position:relative; background:var(--azul); color:#fff; overflow:hidden; }
.hero-interior .hero-fondo::after{
  background:linear-gradient(100deg, rgba(6,11,82,.93) 0%, rgba(11,18,132,.80) 55%, rgba(11,18,132,.55) 100%);
}
.hero-interior-cuerpo{ position:relative; z-index:2; padding:86px 0 92px; max-width:760px; }
.hero-interior h1{ color:#fff; font-size:clamp(34px,5vw,62px); }
.hero-interior p{ color:rgba(255,255,255,.93); margin-top:22px; font-size:clamp(16px,1.5vw,19px); }

.migas{ display:flex; gap:10px; align-items:center; font-size:13.5px; color:rgba(255,255,255,.78); margin-bottom:20px; }
.migas a{ color:rgba(255,255,255,.82); }
.migas a:hover{ color:var(--amarillo); }

/* ---------- 8. Cifras ---------- */
.cifras{ background:var(--crema); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.cifras-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--linea);
}
.cifra{ background:var(--crema); padding:46px 26px; text-align:center; }
.cifra b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(44px,5.2vw,66px); line-height:1; color:var(--azul);
}
/* Solo el rótulo, que es hijo directo. Sin el ">" esta regla alcanzaba
   también a los <span> de dentro del número (el "+" y la cifra animada)
   y los dejaba en bloques separados de 14 px. */
.cifra > span{ display:block; margin-top:12px; font-size:14px; font-weight:600; color:var(--gris); letter-spacing:.04em; }
/* Los span internos del número no son rótulos: heredan del <b> */
.cifra b > span{ display:inline; font-size:inherit; font-weight:inherit; color:inherit; margin:0; letter-spacing:inherit; }
.cifra:nth-child(1) b{ color:#C21F17; }              /* rojo oscurecido */
.cifra:nth-child(2) b{ color:var(--azul); }
.cifra:nth-child(3) b{ color:var(--naranja-texto); }
.cifra:nth-child(4) b{ color:var(--cian-texto); }

/* ---------- 9. Bloque partido (texto + foto) ---------- */
.partido{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.partido-invertido .partido-texto{ order:2; }

.marco-foto{ position:relative; }
.marco-foto img{
  width:100%; border-radius:var(--radio); box-shadow:var(--sombra-alta);
  aspect-ratio:4/3; object-fit:cover;
  /* Al recortar, se conserva el tercio superior: es donde están las caras */
  object-position:center 32%;
}
/* Cuadro azul girado detrás de la foto: eco del logotipo */
.marco-foto::before{
  content:''; position:absolute; inset:-22px -22px 22px 22px; z-index:-1;
  background:var(--azul); border-radius:var(--radio); transform:rotate(-3deg); opacity:.14;
}
.marco-foto figcaption{ margin-top:14px; font-size:13.5px; color:var(--gris); }

.dato-flotante{
  position:absolute; bottom:-30px; left:-30px;
  background:var(--amarillo); color:var(--azul);
  padding:22px 28px; border-radius:var(--radio-s); box-shadow:var(--sombra-alta);
  max-width:230px;
}
.dato-flotante b{ display:block; font-family:var(--display); font-size:40px; line-height:1; font-weight:400; }
.dato-flotante span{ font-size:13.5px; font-weight:600; line-height:1.35; display:block; margin-top:6px; }

/* Lista con check */
.lista-check{ display:grid; gap:12px; margin-top:26px; }
.lista-check li{ display:flex; gap:13px; align-items:flex-start; font-size:16px; }
.lista-check li::before{
  content:''; flex:none; width:22px; height:22px; margin-top:3px; border-radius:50%;
  background:var(--lima) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1284' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---------- 10. Tarjetas de programa ---------- */
.grid-programas{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.grid-programas.dos{ grid-template-columns:repeat(2,1fr); }

.tarjeta-programa{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra); transition:transform var(--transicion), box-shadow var(--transicion);
  border:1px solid var(--linea);
}
.tarjeta-programa:hover{ transform:translateY(-8px); box-shadow:var(--sombra-alta); }
.tarjeta-programa-foto{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--azul-humo); }
.tarjeta-programa-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.tarjeta-programa:hover .tarjeta-programa-foto img{ transform:scale(1.07); }
.tarjeta-programa-cuerpo{ padding:30px 28px 32px; display:flex; flex-direction:column; flex:1; }
.tarjeta-programa h3{ color:var(--azul); margin-bottom:12px; }
.tarjeta-programa p{ font-size:15.5px; color:var(--gris); }
.tarjeta-programa .enlace-flecha{ margin-top:auto; padding-top:20px; }

/* Etiqueta de color sobre la foto */
.etiqueta{
  position:absolute; top:18px; left:18px; z-index:2;
  padding:8px 15px; border-radius:100px;
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:var(--amarillo); color:var(--azul);
}
/* El cian y el naranja son demasiado claros para texto blanco encima:
   sobre ellos la etiqueta va en azul, igual que sobre amarillo y lima. */
.et-rojo{ background:var(--rojo); color:#fff; }
.et-cian{ background:var(--cian); color:var(--azul); }
.et-magenta{ background:var(--magenta); color:#fff; }
.et-lima{ background:var(--lima); color:var(--azul); }
.et-naranja{ background:var(--naranja); color:var(--azul); }
.et-azul{ background:var(--azul); color:#fff; }

/* Barra de color superior de la tarjeta */
.tarjeta-programa::before{
  content:''; position:absolute; top:0; left:0; right:0; height:5px; z-index:3;
  background:var(--color-acento,var(--amarillo));
}

/* Foto a lo ancho dentro de una tarjeta. Proporción fija para que dos
   tarjetas contiguas queden a la misma altura sea cual sea el original. */
.foto-bloque{
  width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 32%;
  border-radius:14px; margin-bottom:24px;
}

/* ---------- 11. Tarjetas simples / icono ---------- */
.grid-tres{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-cuatro{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.grid-dos{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }

.tarjeta{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:34px 30px; transition:transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover{ transform:translateY(-6px); box-shadow:var(--sombra); }
.tarjeta h3{ color:var(--azul); margin-bottom:12px; }
.tarjeta p{ font-size:15.5px; color:var(--gris); }

.icono-caja{
  width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  margin-bottom:22px; background:var(--azul-humo);
}
.icono-caja svg{ width:28px; height:28px; stroke:var(--azul); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ic-rojo{ background:rgba(225,46,38,.12); } .ic-rojo svg{ stroke:var(--rojo); }
.ic-amarillo{ background:rgba(247,181,0,.16); } .ic-amarillo svg{ stroke:#B98600; }
.ic-cian{ background:rgba(41,166,220,.14); } .ic-cian svg{ stroke:#1683B3; }
.ic-lima{ background:rgba(191,210,0,.18); } .ic-lima svg{ stroke:#7C8A00; }
.ic-magenta{ background:rgba(229,0,126,.10); } .ic-magenta svg{ stroke:var(--magenta); }
.ic-naranja{ background:rgba(242,103,34,.13); } .ic-naranja svg{ stroke:var(--naranja); }

/* Valores institucionales */
.grid-valores{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.valor{
  background:#fff; border-radius:var(--radio); padding:32px 28px;
  border-top:6px solid var(--color-acento,var(--amarillo));
  box-shadow:var(--sombra);
}
.valor h3{ font-size:20px; color:var(--azul); margin-bottom:10px; }
.valor p{ font-size:15px; color:var(--gris); margin:0; }

/* ---------- 12. Acordeón ---------- */
.acordeon{ border-top:1px solid var(--linea); }
.acordeon-item{ border-bottom:1px solid var(--linea); }
.acordeon-boton{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:0; padding:24px 4px; text-align:left;
  font-size:17.5px; font-weight:700; color:var(--azul); line-height:1.35;
}
.acordeon-boton:hover{ color:var(--azul-vivo); }
.acordeon-icono{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--azul-humo);
  display:grid; place-items:center; position:relative; transition:background var(--transicion), transform var(--transicion);
}
.acordeon-icono::before,.acordeon-icono::after{
  content:''; position:absolute; background:var(--azul); border-radius:2px; transition:transform var(--transicion), opacity var(--transicion);
}
.acordeon-icono::before{ width:14px; height:2.4px; }
.acordeon-icono::after{ width:2.4px; height:14px; }
.acordeon-boton[aria-expanded="true"] .acordeon-icono{ background:var(--azul); transform:rotate(180deg); }
.acordeon-boton[aria-expanded="true"] .acordeon-icono::before{ background:#fff; }
.acordeon-boton[aria-expanded="true"] .acordeon-icono::after{ opacity:0; }
.acordeon-panel{ overflow:hidden; height:0; transition:height var(--transicion); }
.acordeon-panel-interior{ padding:0 4px 28px; color:var(--gris); font-size:16px; max-width:820px; }

/* ---------- 13. Ejes temáticos (píldoras) ---------- */
.pildoras{ display:flex; flex-wrap:wrap; gap:12px; }
.pildoras li{
  padding:11px 20px; border-radius:100px; background:#fff;
  border:1px solid var(--linea); font-size:14.5px; font-weight:600; color:var(--azul);
  transition:transform var(--transicion), border-color var(--transicion);
}
.pildoras li:hover{ transform:translateY(-3px); border-color:var(--azul); }
.seccion-azul .pildoras li{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.24); color:#fff; }
.seccion-azul .pildoras li:hover{ border-color:var(--amarillo); }

/* ---------- 14. Citas rotativas ---------- */
.rotador{ position:relative; min-height:230px; }
.cita{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;
}
.cita.activa{ opacity:1; visibility:visible; transform:none; position:relative; }
.cita blockquote{
  margin:0; font-family:var(--display); font-weight:400; text-transform:none;
  font-size:clamp(23px,3.1vw,38px); line-height:1.24; color:#fff;
}
.cita cite{
  display:block; margin-top:22px; font-style:normal; font-size:14px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--amarillo); font-weight:600;
}
.rotador-controles{ display:flex; gap:10px; margin-top:36px; }
.rotador-punto{
  width:34px; height:5px; border-radius:4px; border:0; padding:0;
  background:rgba(255,255,255,.28); transition:background var(--transicion), width var(--transicion);
}
.rotador-punto.activo{ background:var(--amarillo); width:56px; }

/* ---------- 15. Galería ---------- */
.filtros{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.filtro{
  padding:11px 22px; border-radius:100px; border:1px solid var(--linea);
  background:#fff; font-size:14.5px; font-weight:600; color:var(--gris);
  transition:all var(--transicion);
}
.filtro:hover{ border-color:var(--azul); color:var(--azul); }
.filtro.activo{ background:var(--azul); border-color:var(--azul); color:#fff; }

/* Índice de anclas por color de programa. Es un componente distinto de los
   filtros de galería: aquí cada píldora navega, no filtra. */
.indice-anclas{ display:flex; flex-wrap:wrap; gap:10px; }
.ancla-programa{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 22px; border-radius:100px;
  border:1.5px solid var(--color-acento,var(--azul));
  background:#fff; color:var(--azul);
  font-size:14.5px; font-weight:700; line-height:1;
  transition:background var(--transicion), color var(--transicion), transform var(--transicion);
}
.ancla-programa::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--color-acento,var(--azul)); flex:none;
  transition:background var(--transicion);
}
/* --color-texto lo fija cada píldora: blanco sobre rojo/cian/magenta,
   azul sobre amarillo y lima, que son demasiado claros para texto blanco. */
.ancla-programa:hover,
.ancla-programa:focus-visible{
  background:var(--color-acento,var(--azul)); color:var(--color-texto,#fff); transform:translateY(-3px);
}
.ancla-programa:hover::before,
.ancla-programa:focus-visible::before{ background:var(--color-texto,#fff); }

.galeria{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.galeria-item{
  position:relative; border:0; padding:0; margin:0; background:var(--azul-humo);
  border-radius:var(--radio-s); overflow:hidden; aspect-ratio:1/1; cursor:zoom-in;
  transition:opacity .4s ease, transform .4s ease;
}
.galeria-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.galeria-item:hover img{ transform:scale(1.09); }
.galeria-item::after{
  content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(11,18,132,.62),transparent 55%);
  opacity:0; transition:opacity var(--transicion);
}
.galeria-item:hover::after{ opacity:1; }
.galeria-item .pie{
  position:absolute; left:14px; right:14px; bottom:12px; z-index:2;
  color:#fff; font-size:13px; font-weight:600; text-align:left;
  opacity:0; transform:translateY(8px); transition:all var(--transicion);
}
.galeria-item:hover .pie{ opacity:1; transform:none; }
.galeria-item.oculto{ display:none; }

/* Visor */
.visor{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(6,11,82,.96); padding:70px 20px;
  align-items:center; justify-content:center;
}
.visor.abierto{ display:flex; }
.visor img{ max-width:min(1180px,94vw); max-height:80vh; width:auto; border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.visor-pie{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.92); font-size:14.5px; padding:0 20px;
}
.visor-cerrar,.visor-nav{
  position:absolute; border:0; background:rgba(255,255,255,.12); color:#fff;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-size:24px; line-height:1; transition:background var(--transicion);
}
.visor-cerrar:hover,.visor-nav:hover{ background:var(--rojo); }
.visor-cerrar{ top:22px; right:22px; }
.visor-nav.prev{ left:24px; top:50%; transform:translateY(-50%); }
.visor-nav.sig{ right:24px; top:50%; transform:translateY(-50%); }

/* ---------- 16. Aliados ---------- */
.aliados{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:26px; }
.aliado{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio-s);
  padding:22px 30px; display:grid; place-items:center; min-width:210px; min-height:132px;
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.aliado:hover{ transform:translateY(-5px); box-shadow:var(--sombra); }
.aliado img{ max-height:62px; max-width:100%; width:auto; object-fit:contain; }
/* Marcas cuyo escudo o emblema ocupa mucho alto: a 62 px el texto de al
   lado queda ilegible, así que se les da más aire. */
.aliado-alto img{ max-height:88px; }

/* Instituciones (lista de incidencia) */
.grid-instituciones{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.institucion{
  display:flex; align-items:center; gap:14px; padding:18px 22px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radio-s); font-size:15.5px; font-weight:600;
}
.institucion::before{
  content:''; flex:none; width:10px; height:10px; border-radius:50%; background:var(--amarillo);
}

/* ---------- 17. Junta directiva ---------- */
.grid-junta{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.miembro{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:30px 24px; text-align:center;
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.miembro:hover{ transform:translateY(-6px); box-shadow:var(--sombra); }
.monograma{
  width:74px; height:74px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-size:26px; font-weight:400; color:#fff;
  background:var(--color-acento,var(--azul));
}
.miembro h3{ font-size:17px; line-height:1.35; margin-bottom:6px; }
.miembro span{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }


/* Retrato circular de cada integrante de la junta directiva */
.miembro .retrato{
  width:110px; height:110px; border-radius:50%; object-fit:cover;
  margin:0 auto 18px; display:block;
  border:4px solid #fff; box-shadow:0 6px 20px rgba(11,18,132,.18);
}

/* El "+" que antecede a las cifras de alcance: se separa del número para
   que el contador animado pueda escribir solo la parte numérica. */
.cifra b > .cifra-mas{ font-size:.58em; vertical-align:.16em; margin-right:.04em; opacity:.8; }

/* Rejilla de cifras suelta (fuera de la franja a sangre) */
.cifras-sueltas{
  background:transparent; gap:20px;
  grid-template-columns:repeat(3,1fr);
}
.cifras-sueltas .cifra{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  border-top:6px solid var(--color-acento,var(--azul));
  padding:34px 26px;
}
.cifras-sueltas .cifra b{ color:var(--color-acento,var(--azul)); }
/* Sobre fondo claro los acentos vivos se sustituyen por su versión legible */
.cifras-sueltas .cifra[style*="--cian"] b{ color:var(--cian-texto); }
.cifras-sueltas .cifra[style*="--naranja"] b{ color:var(--naranja-texto); }
.cifras-sueltas .cifra[style*="--lima"] b{ color:var(--lima-texto); }
.cifras-sueltas .cifra[style*="--amarillo"] b{ color:var(--amarillo-texto); }

/* Doble clase para ganarle a la regla general de .cifras-grid, que va
   más abajo en el archivo y si no dejaba dos columnas en móvil: la cifra
   de 75,000 no cabía y se salía de la pantalla. */
@media (max-width:1024px){ .cifras-grid.cifras-sueltas{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){ .cifras-grid.cifras-sueltas{ grid-template-columns:1fr; } }

/* ---------- 18. Servicios con precio/detalle ---------- */
.servicio{
  display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra);
}
.servicio + .servicio{ margin-top:44px; }
.servicio-invertido .servicio-texto{ order:2; }
.servicio-texto{ padding:52px 48px; }
.servicio-foto{ align-self:stretch; }
/* Proporción propia en vez de estirarse a la altura del texto: si la
   columna de texto es larga, la foto se convertía en una tira vertical. */
.servicio-foto img{
  width:100%; height:auto; aspect-ratio:4/5; max-height:680px;
  object-fit:cover; object-position:center 30%;
}
.servicio h2{ font-size:clamp(26px,3vw,40px); color:var(--azul); margin-bottom:18px; }

.datos-servicio{ display:grid; gap:14px; margin-top:28px; padding-top:26px; border-top:1px solid var(--linea); }
.dato-servicio{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; }
.dato-servicio b{ color:var(--azul); display:block; font-size:13px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:2px; }
.dato-servicio svg{ width:22px; height:22px; flex:none; stroke:var(--rojo); fill:none; stroke-width:1.9; margin-top:3px; }

/* ---------- 19. Bloque donar ---------- */
.franja-donar{
  position:relative; background:var(--azul); color:#fff; overflow:hidden;
  border-radius:var(--radio); padding:64px 60px;
  display:grid; grid-template-columns:1.4fr auto; gap:44px; align-items:center;
}
.franja-donar::before{
  content:''; position:absolute; right:-90px; top:-70px; width:340px; height:340px;
  background:url('../corazon-donamor.png') center/contain no-repeat; opacity:.16;
  transform:rotate(-8deg);
}
.franja-donar h2{ color:#fff; font-size:clamp(28px,3.6vw,46px); }
.franja-donar p{ color:rgba(255,255,255,.93); margin-top:16px; max-width:620px; }
.franja-donar .grupo-botones{ margin-top:0; }

.grid-apoyo{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.apoyo{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:36px 32px;
  display:flex; flex-direction:column;
  border-top:6px solid var(--color-acento,var(--rojo));
}
.apoyo h3{ color:var(--azul); margin-bottom:12px; }
.apoyo p{ font-size:15.5px; color:var(--gris); }
.apoyo .boton{ margin-top:auto; align-self:flex-start; }
.apoyo .grupo-botones{ margin-top:24px; }


/* ---------- 19b. Apadrinamiento y cuentas bancarias ---------- */
/* Bloque de cifra destacada: el precio es el argumento, así que se le da
   el peso tipográfico del display en vez de esconderlo en un párrafo. */
.apadrina{
  margin-top:30px; padding:26px 30px;
  background:#fff; border:1px solid var(--linea); border-left:6px solid var(--lima);
  border-radius:var(--radio);
}
.apadrina-etiqueta{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--lima-texto); margin-bottom:10px;
}
.apadrina-cifra{ margin:0; display:flex; align-items:baseline; gap:10px; }
.apadrina-cifra b{
  font-family:var(--display); font-weight:400; font-size:clamp(42px,5.4vw,62px);
  line-height:1; color:var(--azul);
}
.apadrina-cifra span{ font-size:17px; font-weight:600; color:var(--gris); }
.apadrina-nota{ margin:12px 0 0; font-size:15px; color:var(--gris); }

/* Cuentas bancarias */
.cuentas{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.cuenta{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 24px; border-top:6px solid var(--color-acento,var(--azul));
}
.cuenta b{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris); margin-bottom:8px;
}
.cuenta .numero{
  font-family:var(--display); font-weight:400; font-size:clamp(22px,2.4vw,29px);
  line-height:1.1; color:var(--azul); letter-spacing:.02em;
  word-break:break-all;
}
.cuenta-copiar{
  margin-top:14px; padding:8px 16px; font-size:13px; font-weight:700;
  border:1px solid var(--linea); border-radius:100px; background:var(--hueso);
  color:var(--azul); transition:all var(--transicion);
}
.cuenta-copiar:hover{ background:var(--azul); color:#fff; border-color:var(--azul); }
.cuenta-copiar.copiado{ background:var(--lima); border-color:var(--lima); color:var(--azul); }

.aviso-sat{
  margin-top:26px; padding:22px 26px; border-radius:var(--radio);
  background:var(--azul-humo); border:1px solid #cdd3ee;
  display:flex; gap:16px; align-items:flex-start; font-size:15.5px;
}
.aviso-sat svg{ width:26px; height:26px; flex:none; stroke:var(--azul); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
.aviso-sat b{ color:var(--azul); }

/* ---------- 19c. Categorías de socio ---------- */
.socios{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
.socio{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:34px 30px; text-align:center; position:relative;
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.socio:hover{ transform:translateY(-6px); box-shadow:var(--sombra-alta); }
.socio-destacado{ border-color:var(--azul); box-shadow:var(--sombra); }
.socio-cinta{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--azul); color:#fff; padding:6px 18px; border-radius:100px;
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  white-space:nowrap;
}
.socio h3{ font-size:19px; color:var(--azul); margin-bottom:14px; }
.socio-medalla{
  width:54px; height:54px; margin:0 auto 16px; border-radius:50%;
  background:var(--color-acento,var(--azul));
}
.socio-precio{ margin:0; }
.socio-precio b{
  font-family:var(--display); font-weight:400; font-size:clamp(38px,4.4vw,50px);
  line-height:1; color:var(--azul); display:block;
}
.socio-precio span{ font-size:14.5px; font-weight:600; color:var(--gris); }
.socio-dia{ margin:10px 0 0; font-size:14px; color:var(--gris); }

/* ---------- 19d. Recursos / publicaciones ---------- */
.recurso{
  display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:32px 34px; transition:transform var(--transicion), box-shadow var(--transicion);
}
.recurso + .recurso{ margin-top:22px; }
.recurso:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
.recurso-icono{
  width:62px; height:62px; border-radius:14px; display:grid; place-items:center;
  background:var(--azul-humo); flex:none;
}
.recurso-icono svg{ width:28px; height:28px; stroke:var(--azul); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.recurso h3{ color:var(--azul); margin-bottom:8px; }
.recurso p{ font-size:15.5px; color:var(--gris); margin:0; }
.recurso-meta{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); margin-bottom:8px; display:block; }

@media (max-width:1024px){
  .cuentas, .socios{ grid-template-columns:repeat(2,1fr); }
  .recurso{ grid-template-columns:auto 1fr; }
  .recurso .boton{ grid-column:1 / -1; }
}
@media (max-width:767px){
  .cuentas, .socios{ grid-template-columns:1fr; }
  .recurso{ grid-template-columns:1fr; text-align:left; padding:26px 22px; }
  .apadrina{ padding:22px 20px; }
}

/* ---------- 20. Contacto ---------- */
.grid-contacto{ display:grid; grid-template-columns:1fr 1.15fr; gap:60px; align-items:start; }
.bloque-datos{ display:grid; gap:22px; }
.dato-contacto{
  display:flex; gap:18px; align-items:flex-start;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:24px 26px;
}
.dato-contacto svg{ width:24px; height:24px; flex:none; stroke:var(--rojo); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; margin-top:3px; }
.dato-contacto b{ display:block; font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--gris); margin-bottom:5px; }
.dato-contacto p{ margin:0; font-size:16.5px; font-weight:600; color:var(--tinta); }
.dato-contacto a{ font-weight:600; }

.formulario{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:44px 42px; box-shadow:var(--sombra);
}
.campo{ margin-bottom:22px; }
.campo label{ display:block; font-size:14px; font-weight:700; color:var(--azul); margin-bottom:8px; }
.campo input,.campo select,.campo textarea{
  width:100%; padding:14px 16px; border:1.5px solid var(--linea); border-radius:var(--radio-s);
  font-family:inherit; font-size:16px; color:var(--tinta); background:var(--hueso);
  transition:border-color var(--transicion), background var(--transicion);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--azul); background:#fff;
}
.campo textarea{ min-height:140px; resize:vertical; }
.campos-fila{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.nota-form{ font-size:13.5px; color:var(--gris); margin-top:16px; }

.redes-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.red{
  display:flex; align-items:center; gap:13px; padding:15px 18px;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio-s);
  font-weight:600; font-size:15px; color:var(--tinta);
  transition:all var(--transicion);
}
.red:hover{ border-color:var(--azul); color:var(--azul); transform:translateX(4px); }
.red svg{ width:21px; height:21px; fill:var(--azul); flex:none; }
.red small{ display:block; font-weight:500; font-size:12.5px; color:var(--gris); }

/* Mapa */
.mapa{ border-radius:var(--radio); overflow:hidden; border:1px solid var(--linea); box-shadow:var(--sombra); }
.mapa iframe{ display:block; width:100%; height:420px; border:0; }

/* ---------- 21. Pie ---------- */
.pie{ background:var(--azul-hondo); color:rgba(255,255,255,.86); padding-top:74px; }
.pie h4{ color:#fff; font-size:14px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:22px; }
.pie a{ color:rgba(255,255,255,.86); }
.pie a:hover{ color:var(--amarillo); }
/* El botón del pie es un enlace: sin esto heredaba el blanco al 86%. */
.pie .boton-donar, .pie .boton-donar:hover{ color:#fff; }
.pie-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:48px; padding-bottom:56px; }
.pie-marca img{ height:88px; width:auto; margin-bottom:22px; }
.pie-marca p{ font-size:15px; max-width:330px; }
.pie ul{ display:grid; gap:12px; font-size:15px; }
.pie-redes{ display:flex; gap:12px; margin-top:24px; }
.pie-redes a{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.10);
  display:grid; place-items:center; transition:background var(--transicion), transform var(--transicion);
}
.pie-redes a:hover{ background:var(--rojo); transform:translateY(-3px); }
.pie-redes svg{ width:18px; height:18px; fill:#fff; }
.pie-legal{
  border-top:1px solid rgba(255,255,255,.14); padding:26px 0;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13.5px;
}

/* ---------- 22. Flotantes ---------- */
.flotantes{ position:fixed; right:22px; bottom:22px; z-index:110; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.flotante{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.22); border:0; transition:transform var(--transicion), background var(--transicion);
}
.flotante:hover{ transform:scale(1.09); }
.flotante svg{ width:26px; height:26px; }
.flotante-whatsapp{ background:#25D366; }
.flotante-whatsapp svg{ fill:#fff; }
.flotante-arriba{ background:var(--azul); opacity:0; pointer-events:none; }
.flotante-arriba.visible{ opacity:1; pointer-events:auto; }
.flotante-arriba svg{ stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

.donar-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:105; display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); border-top:1px solid var(--linea);
  backdrop-filter:blur(10px);
}
.donar-movil .boton{ width:100%; }

/* ---------- 23. Animación de aparición ---------- */
/* El estado oculto solo se aplica cuando hay JavaScript (la clase .js la
   pone un script mínimo en el <head>). Sin JS, todo se ve de entrada. */
.js .aparece{ opacity:0; transform:translateY(28px); transition:opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1); }
.js .aparece.visible{ opacity:1; transform:none; }
.aparece[data-retraso="1"]{ transition-delay:.09s; }
.aparece[data-retraso="2"]{ transition-delay:.18s; }
.aparece[data-retraso="3"]{ transition-delay:.27s; }
.aparece[data-retraso="4"]{ transition-delay:.36s; }
.aparece[data-retraso="5"]{ transition-delay:.45s; }
/* Red de seguridad: si el observador nunca dispara, todo se muestra igual. */
.js.revelar-todo .aparece{ opacity:1 !important; transform:none !important; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js .aparece{ opacity:1; transform:none; }
}

/* ---------- 24. Adaptación ---------- */
@media (max-width:1100px){
  .nav-principal ul{ gap:20px; }
  .nav-principal a{ font-size:14.5px; }
  .pie-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .grid-cuatro{ grid-template-columns:repeat(2,1fr); }
  .grid-junta{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:1024px){
  .nav-principal, .cabecera-acciones .boton{ display:none; }
  .boton-menu{ display:grid; }
  .seccion{ padding:76px 0; }
  .partido{ grid-template-columns:1fr; gap:48px; }
  .partido-invertido .partido-texto{ order:0; }
  .grid-programas, .grid-programas.dos{ grid-template-columns:repeat(2,1fr); }
  .grid-tres, .grid-valores, .grid-apoyo, .grid-instituciones{ grid-template-columns:repeat(2,1fr); }
  .servicio, .servicio-invertido{ grid-template-columns:1fr; gap:0; }
  .servicio-invertido .servicio-texto{ order:0; }
  .servicio-texto{ padding:42px 34px; }
  .servicio-foto img{ aspect-ratio:4/3; max-height:none; }
  .grid-contacto{ grid-template-columns:1fr; gap:44px; }
  .galeria{ grid-template-columns:repeat(3,1fr); }
  .franja-donar{ grid-template-columns:1fr; padding:48px 40px; }
  .hero-cuerpo{ padding:88px 0 96px; }
  .dato-flotante{ left:0; bottom:-24px; }
  .barra-super-datos li:nth-child(n+3){ display:none; }
}

@media (max-width:767px){
  body{ font-size:16px; padding-bottom:74px; }
  .contenedor,.contenedor-ancho{ padding:0 18px; }
  .seccion{ padding:60px 0; }
  .seccion-compacta{ padding:48px 0; }
  .cabecera-seccion{ margin-bottom:38px; }
  .barra-super{ font-size:12.5px; }
  .barra-super .contenedor-ancho{ justify-content:center; }
  .barra-super-datos li:nth-child(n+2){ display:none; }
  .logo img{ height:46px; }
  .logo-texto strong{ font-size:19px; }
  .logo-texto small{ font-size:9px; }
  .hero-cuerpo{ padding:64px 0 72px; }
  .hero-interior-cuerpo{ padding:56px 0 62px; }
  .cifras-grid{ grid-template-columns:repeat(2,1fr); }
  .cifra{ padding:32px 16px; }
  .grid-programas, .grid-programas.dos, .grid-tres, .grid-cuatro,
  .grid-valores, .grid-apoyo, .grid-dos, .grid-instituciones,
  .grid-junta, .redes-grid, .campos-fila{ grid-template-columns:1fr; }
  .galeria{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .formulario{ padding:32px 24px; }
  .servicio-texto{ padding:34px 24px; }
  .franja-donar{ padding:38px 26px; }
  .franja-donar::before{ display:none; }
  .pie-grid{ grid-template-columns:1fr; gap:36px; }
  .pie-legal{ flex-direction:column; text-align:center; }
  .marco-foto::before{ display:none; }
  .dato-flotante{ position:static; margin-top:18px; max-width:none; }
  .donar-movil{ display:block; }
  .flotantes{ bottom:84px; right:16px; }
  .visor{ padding:60px 12px; }
  .visor-nav{ width:44px; height:44px; }
  .visor-nav.prev{ left:8px; } .visor-nav.sig{ right:8px; }
  .grupo-botones .boton{ width:100%; }
}

/* ---------- 25. Impresión ---------- */
@media print{
  .cabecera,.barra-super,.flotantes,.donar-movil,.menu-movil,.visor{ display:none !important; }
  body{ background:#fff; color:#000; }
  .aparece{ opacity:1; transform:none; }
}