/* ═══════════════════════════════════════════════════════════
   JAAP La Libertad — estilo acuarela (mobile-first)
   Paleta: azules #15566d/#1f6f8b/#7cc3d8 · verdes #1D9E75/#9ad6b9 · papel #fbfaf6
   ═══════════════════════════════════════════════════════════ */
:root{
  --b1:#15566d; --b2:#1f6f8b; --b3:#7cc3d8;
  --g1:#1D9E75; --g2:#9ad6b9;
  --paper:#fbfaf6; --ink:#22333b; --mut:#5b6b72;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--b2)}

/* skip link (visible solo con foco de teclado) */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--b1); color:#fff; font-weight:700; padding:12px 20px; border-radius:0 0 12px 0;
}
.skip:focus{left:0}

/* ── Botones (grandes: socios en celular) ── */
.btn{
  display:inline-block; background:var(--b2); color:#fff; text-decoration:none;
  font-weight:700; font-size:17px; padding:14px 26px; border-radius:14px;
  box-shadow:0 6px 16px rgba(21,86,109,.25); transition:transform .15s, background .15s;
}
.btn:hover{background:var(--b1); transform:translateY(-2px)}
.btn--lg{font-size:18px; padding:16px 30px}
.btn--sm{font-size:15px; padding:10px 18px; border-radius:11px}
.btn--ghost{background:transparent; color:var(--b1); box-shadow:inset 0 0 0 2.5px var(--b2)}
.btn--ghost:hover{background:rgba(124,195,216,.18); color:var(--b1)}
.btn--water{background:#157a5a}
.btn--water:hover{background:#0f5f46}

/* ── Nav fija ── */
.nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px;
  padding:10px 16px; background:rgba(251,250,246,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(21,86,109,.12);
}
.nav__brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--b1); font-size:18px}
.nav__brand b{font-weight:800}
.nav__drop{width:auto; height:32px; display:block}
.nav__links{display:none; align-items:center; gap:18px; margin-left:auto}
.nav__links a{ text-decoration:none; color:var(--ink); font-weight:600; font-size:15px}
.nav__links a:hover{color:var(--b2)}
.nav__links a.btn{color:#fff}
.nav__links a.btn:hover{color:#fff}
.nav__burger{
  margin-left:auto; background:none; border:0; cursor:pointer; padding:8px;
  display:flex; flex-direction:column; gap:5px;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.nav__burger span{width:26px; height:3px; background:var(--b1); border-radius:2px}
@media(min-width:820px){
  .nav{padding:10px 32px}
  .nav__links{display:flex}
  .nav__burger{display:none}
}
/* menú móvil desplegado */
@media(max-width:819px){
  .nav__links.open{
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); padding:14px 22px; gap:4px;
    border-bottom:2px solid var(--b3); box-shadow:0 14px 30px rgba(21,86,109,.15);
  }
  /* touch target ≥44px por enlace */
  .nav__links.open a{display:block; width:100%; padding:12px 4px}
}

/* ── Hero acuarela ── */
.hero{
  position:relative; text-align:center; padding:44px 20px 70px; overflow:hidden;
}
.hero__wash{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(58% 42% at 18% 12%, rgba(154,214,185,.55) 0%, transparent 70%),
    radial-gradient(48% 38% at 85% 20%, rgba(124,195,216,.5) 0%, transparent 70%),
    radial-gradient(70% 52% at 50% 95%, rgba(31,111,139,.28) 0%, transparent 72%),
    radial-gradient(35% 30% at 70% 65%, rgba(29,158,117,.22) 0%, transparent 70%),
    var(--paper);
}
.hero__logo{width:min(230px,52vw); height:auto; margin:0 auto 6px; display:block;
  filter:drop-shadow(0 16px 30px rgba(21,86,109,.28))}
.hero__title{margin:0; color:var(--deep,#083344); line-height:1.02; text-align:center}
.hero__jaap{display:block; font-size:clamp(40px,11vw,64px); font-weight:800; letter-spacing:.05em; color:#15566d}
.hero__lib{display:block; font-size:clamp(20px,5.4vw,30px); font-weight:600; font-style:italic; color:#1f6f8b}
.hero__lema{
  margin-top:26px; font-size:clamp(19px,4.6vw,27px); font-weight:700; color:var(--b1);
  font-style:italic;
}
.hero__sub{margin-top:8px; color:var(--mut); font-size:15px}
.hero__ctas{margin-top:28px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ── Secciones ── */
.sect{padding:58px 20px; position:relative}
.sect--paper{
  background:
    radial-gradient(60% 40% at 90% 8%, rgba(154,214,185,.3) 0%, transparent 70%),
    radial-gradient(50% 45% at 5% 90%, rgba(124,195,216,.3) 0%, transparent 70%),
    #f4f6f1;
}
.sect--deep{
  background:
    radial-gradient(55% 45% at 15% 15%, rgba(124,195,216,.24) 0%, transparent 68%),
    radial-gradient(50% 42% at 88% 80%, rgba(29,158,117,.3) 0%, transparent 70%),
    linear-gradient(160deg, var(--b1), var(--b2));
  color:#eef7fa;
}
.sect--deep a{color:#bfe6f2}
.sect--deep a.btn{color:#fff}
.wrap{max-width:1020px; margin:0 auto}
.lead{color:var(--mut); margin-bottom:26px; font-size:17px}
.sect--deep .lead{color:#cfe8f1}
.center{text-align:center; margin-top:26px}
.note{font-size:13.5px; opacity:.85; margin-top:10px}
.sect--deep .note{opacity:1; color:#dceef5; font-size:14px}

/* Titulares con "pincelada" */
.h{
  display:inline-block; font-size:clamp(24px,5.4vw,34px); font-weight:800;
  margin-bottom:26px; position:relative; z-index:0;
}
.h::after{
  content:""; position:absolute; left:-6px; right:-10px; bottom:2px; height:.48em;
  z-index:-1; border-radius:40% 60% 55% 45%/60% 40% 60% 40%; opacity:.4;
  transform:rotate(-1.2deg);
}
.h--blue{color:var(--b1)} .h--blue::after{background:var(--b3)}
.h--green{color:#14563f} .h--green::after{background:var(--g2)}
.h--paper{color:#fff} .h--paper::after{background:rgba(154,214,185,.5)}

/* ── Tarjetas acuarela ── */
.cols{display:grid; gap:20px}
@media(min-width:760px){.cols{grid-template-columns:1fr 1fr}}
.card{
  background:#fff; border-radius:var(--r); padding:26px 24px;
  box-shadow:0 10px 26px rgba(21,86,109,.08);
  border:1px solid rgba(21,86,109,.07); position:relative; overflow:hidden;
}
.card h3{color:var(--b1); margin-bottom:10px; font-size:19px}
.card--big{padding:32px 28px}
.card__ico{font-size:34px; display:block; margin-bottom:10px}
.wash-blue::before, .wash-green::before{
  content:""; position:absolute; width:190px; height:150px; right:-60px; top:-50px;
  border-radius:45% 55% 60% 40%/55% 45% 55% 45%; opacity:.28; z-index:0;
}
.wash-blue::before{background:var(--b3)}
.wash-green::before{background:var(--g2)}
.card>*{position:relative; z-index:1}
.card--ondark{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#eef7fa}
.card--ondark h3{color:#fff}

/* ── Línea de tiempo ── */
.tline{list-style:none; position:relative; padding-left:8px}
.tline::before{
  content:""; position:absolute; left:26px; top:8px; bottom:8px; width:5px;
  background:linear-gradient(var(--b3), var(--g2)); border-radius:4px; opacity:.6;
}
.tline__item{display:flex; gap:18px; margin-bottom:30px; position:relative}
.tline__dot{
  flex:0 0 44px; height:44px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  box-shadow:0 0 0 4px rgba(124,195,216,.45), 0 6px 14px rgba(21,86,109,.15); z-index:1;
}
.tline__item h3{color:var(--b1); margin-bottom:6px; font-size:19px}
.pend{
  display:inline-block; background:#fff3cd; color:#7a5c00; font-style:normal;
  font-size:12.5px; padding:2px 9px; border-radius:8px; margin-top:6px;
}

/* ── Grid de objetivos ── */
.grid3{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:560px){.grid3{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grid3{grid-template-columns:1fr 1fr 1fr}}
.mini{
  background:#fff; border-radius:var(--r); padding:22px 20px;
  box-shadow:0 8px 20px rgba(21,86,109,.07); border:1px solid rgba(21,86,109,.06);
}
.mini span{font-size:30px; display:block; margin-bottom:8px}
.mini h3{font-size:16.5px; color:var(--b1); margin-bottom:6px}
.mini p{font-size:14.5px; color:var(--mut)}

/* ── Diagrama de flujo ── */
.flow{
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
  gap:10px; margin:14px 0 34px;
}
.flow__step{
  background:#fff; border-radius:16px; padding:16px 18px; text-align:center;
  min-width:118px; box-shadow:0 8px 18px rgba(21,86,109,.09);
  border:1.5px solid rgba(124,195,216,.5);
}
.flow__step span{font-size:28px; display:block}
.flow__step b{display:block; color:var(--b1); font-size:15px; margin-top:4px}
.flow__step small{color:var(--mut); font-size:12px}
.flow__arr{align-self:center; color:var(--b2); font-size:22px; font-weight:800}

/* ── Fotos con marco acuarela ── */
.media2{display:grid; gap:22px; margin-bottom:34px}
@media(min-width:720px){.media2{grid-template-columns:1fr 1fr}}
.photo{position:relative}
.photo img{
  border-radius:26px 34px 28px 36px/34px 26px 36px 28px;
  box-shadow:0 0 0 6px rgba(124,195,216,.35), 0 0 0 12px rgba(154,214,185,.22),
             0 16px 34px rgba(21,86,109,.2);
  width:100%; object-fit:cover; aspect-ratio:4/3.6;
}
.photo figcaption{margin-top:14px; font-size:14px; color:var(--mut); text-align:center}

/* ── Video (play manual) ── */
.videobox{max-width:400px; margin:0 auto; text-align:center}
.videobox video{
  width:100%; height:auto; border-radius:22px;
  box-shadow:0 0 0 6px rgba(154,214,185,.4), 0 16px 36px rgba(21,86,109,.25);
  background:#0b2531;
}
.videobox figcaption{margin-top:12px; font-size:14px; color:var(--mut)}

/* ── Cifras ── */
.stats{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stat{
  background:#fff; border-radius:var(--r); padding:24px 14px; text-align:center;
  box-shadow:0 8px 20px rgba(21,86,109,.07); border-top:5px solid var(--b3);
}
.stat:nth-child(even){border-top-color:var(--g2)}
.stat b{display:block; font-size:clamp(26px,5vw,34px); color:var(--b1); margin-bottom:6px}
.stat span{font-size:13.5px; color:var(--mut); line-height:1.45}

/* ── Directiva ── */
.grid3--people{max-width:860px; margin:0 auto}
.person{
  background:#fff; border-radius:var(--r); padding:26px 20px; text-align:center;
  box-shadow:0 10px 24px rgba(21,86,109,.08);
}
.person__ph{
  width:110px; height:110px; margin:0 auto 14px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #eaf7fb, #cfe8f1);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 4px rgba(124,195,216,.4);
}
.person__ph svg{width:62px; height:62px}
.person h3{font-size:16.5px; color:var(--b1)}
.person p{color:#14563f; font-weight:700; font-size:14px}

/* ── Galería ── */
.gal{display:grid; gap:18px; grid-template-columns:1fr 1fr}
@media(min-width:820px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal__it{position:relative}
.gal__it img{
  width:100%; aspect-ratio:1/1.05; object-fit:cover;
  border-radius:24px 30px 26px 32px/30px 24px 32px 26px;
  box-shadow:0 0 0 5px rgba(124,195,216,.3), 0 10px 24px rgba(21,86,109,.15);
}
.gal__it figcaption{text-align:center; margin-top:10px; font-size:13.5px; color:var(--mut); font-weight:600}
.gal__it a{position:relative; display:block}
.gal__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; background:rgba(21,86,109,.85);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.gal__empty{
  aspect-ratio:1/1.05; border-radius:24px 30px 26px 32px/30px 24px 32px 26px;
  border:2.5px dashed rgba(31,111,139,.4);
  background:
    radial-gradient(50% 45% at 30% 25%, rgba(154,214,185,.3), transparent 70%),
    radial-gradient(45% 40% at 75% 75%, rgba(124,195,216,.3), transparent 70%),
    #fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; font-size:38px; text-align:center; padding:14px;
}
.gal__empty small{font-size:11.5px; color:#7a5c00; background:#fff3cd; padding:3px 9px; border-radius:8px}

/* ── Contacto ── */
.contact p{margin-bottom:12px; font-size:16px}
.contact a{font-weight:600; word-break:break-word}
.mapbox iframe{width:100%; height:300px; border:0; border-radius:var(--r);
  box-shadow:0 10px 24px rgba(21,86,109,.12)}
.mapbox small{display:block; margin-top:8px; color:var(--mut)}

/* ── Pie ── */
.foot{background:var(--b1); color:#cfe8f1; text-align:center; position:relative}
.foot__wave{display:block; width:100%; height:46px; margin-top:-1px;
  background:var(--paper)}
.sect--paper + .foot .foot__wave{background:#f4f6f1}
.foot__in{padding:30px 20px 40px; font-size:14px}
.foot__in p{margin-bottom:8px}
.foot__in a{color:#9ad6b9; font-weight:700}
.foot__brand{display:inline-flex; align-items:center; gap:11px; margin-bottom:16px}
.foot__brand img{height:42px; width:auto; display:block}
.foot__brandtxt{color:#eef7fa; font-size:19px; letter-spacing:.02em}
.foot__brandtxt b{font-weight:800}

/* ── Simulación "minga" siempre viva (loop continuo) ── */
.minga{margin:6px 0 30px; text-align:center}
.minga__svg{width:100%; max-width:660px; height:auto; display:block; margin:0 auto}
.minga figcaption{margin-top:6px; font-size:13.5px; color:var(--mut); font-style:italic}
/* estado base = escena legible sin animación (fallback reduce-motion) */
.minga__p{transform-box:fill-box; transform:translateX(calc(var(--cx) * .72))}
.minga__pbob,.spin,.glow,.cert,.heart{transform-box:fill-box}
.spin,.glow,.heart{transform-origin:center}
.cert{transform-origin:50% 100%}
.mprop{transform-box:fill-box; transform-origin:50% 100%; opacity:0}
.mprop--1{opacity:1}   /* reduce-motion: al menos el primer escenario visible */

/* Animaciones SIEMPRE activas (sin gate de reduce-motion): la escena nunca se queda estática */
.minga__p{animation:mpCrowd 16s ease-in-out infinite}
.minga__p--lone{animation:mpLone 16s ease-in-out infinite}
.minga__pbob{animation:mpBob 1.5s ease-in-out infinite}
.mprop{animation:mprop 18s ease-in-out infinite}
/* delays negativos invertidos → secuencia hacia adelante 1→2→3→4→5→6 */
.mprop--1{animation-delay:0s}    .mprop--2{animation-delay:-15s}
.mprop--3{animation-delay:-12s}  .mprop--4{animation-delay:-9s}
.mprop--5{animation-delay:-6s}   .mprop--6{animation-delay:-3s}
.spin{animation:spin 2.4s linear infinite}
.glow{animation:glowPulse 1.6s ease-in-out infinite}
.cert{animation:certWiggle 3s ease-in-out infinite}
.heart{animation:heartBeat 1.1s ease-in-out infinite}
.river-flow{animation:riverFlow 2.6s linear infinite}
/* casi todos: juntos → se alejan todos → regresan y se quedan juntos */
@keyframes mpCrowd{
  0%,4%    {transform:translateX(calc(var(--cx) * .72))}   /* juntos */
  16%,38%  {transform:translateX(0)}                        /* se alejan todos */
  55%,100% {transform:translateX(calc(var(--cx) * .72))}   /* regresan / reunión */
}
/* el solitario: se aleja con todos, se queda solo mientras los demás vuelven, y al final regresa */
@keyframes mpLone{
  0%,4%    {transform:translateX(calc(var(--cx) * .72))}   /* juntos */
  16%      {transform:translateX(0)}                        /* se aleja */
  38%,68%  {transform:translateX(0)}                        /* queda solito */
  82%,100% {transform:translateX(calc(var(--cx) * .72))}   /* regresa → reunión */
}
@keyframes mpBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
@keyframes mprop{          /* cada escenario aparece, se sostiene y da paso al siguiente */
  0%      {opacity:0; transform:translateY(10px) scale(.72)}
  5%      {opacity:1; transform:translateY(0) scale(1)}
  16%     {opacity:1; transform:translateY(0) scale(1)}
  24%     {opacity:0; transform:translateY(-8px) scale(.88)}
  100%    {opacity:0}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glowPulse{0%,100%{transform:scale(1); opacity:.9} 50%{transform:scale(1.12); opacity:1}}
@keyframes certWiggle{0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)}}
@keyframes heartBeat{0%,100%{transform:scale(1)} 25%{transform:scale(1.16)} 40%{transform:scale(1)} 60%{transform:scale(1.1)}}
@keyframes riverFlow{to{stroke-dashoffset:-48px}}

/* ── Línea de tiempo animada ── */
.tline2{position:relative; list-style:none; margin:8px 0 0; padding:0}
.tline2::before{content:""; position:absolute; left:19px; top:8px; bottom:8px; width:4px;
  background:rgba(124,195,216,.35); border-radius:4px}
.tline2::after{content:""; position:absolute; left:19px; top:8px; width:4px; height:0;
  background:linear-gradient(var(--b3), var(--g1)); border-radius:4px; transition:height 2.6s ease}
.tline2.go::after{height:calc(100% - 16px)}
.tl2{position:relative; padding:0 0 24px 52px}
.tl2__dot{position:absolute; left:11px; top:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:4px solid var(--b3); box-shadow:0 0 0 4px rgba(154,214,185,.35); z-index:1;
  transition:border-color .4s ease}
.tl2__when{margin-bottom:6px}
.tl2__when b{color:#14563f; font-size:15px}
.tl2__when small{display:block; color:var(--mut); font-size:12.5px}
.tl2__card{background:#fff; border-radius:14px; padding:16px 18px;
  box-shadow:0 8px 22px rgba(21,86,109,.08); border:1px solid rgba(21,86,109,.06)}
.tl2__card h3{color:var(--b1); font-size:17.5px; margin-bottom:6px}
.tl2__card p{color:var(--mut); font-size:14.5px}
.tl2__chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; list-style:none; padding:0}
.tl2__chips li{background:#e7f3f7; color:#15566d; font-size:12.5px; font-weight:600;
  padding:4px 11px; border-radius:999px}
/* reveal con stagger (solo cuando JS marca .anim, para no ocultar sin JS) */
.tline2.anim .tl2{opacity:0; transform:translateY(16px)}
.tline2.anim.go .tl2{animation:tlRise .6s ease forwards; animation-delay:calc(var(--i) * .16s)}
.tline2.anim.go .tl2 .tl2__dot{animation:tlDot .5s ease forwards; animation-delay:calc(var(--i) * .16s + .15s)}
@keyframes tlRise{to{opacity:1; transform:none}}
@keyframes tlDot{to{border-color:var(--g1)}}
@media(min-width:820px){
  .tl2{padding-left:200px; min-height:34px}
  .tline2::before,.tline2::after{left:171px}
  .tl2__dot{left:163px}
  .tl2__when{position:absolute; left:0; top:2px; width:150px; text-align:right; margin:0}
}
/* accesibilidad: foco visible (doble capa: funciona en fondos claros y oscuros) */
a:focus-visible, button:focus-visible{
  outline:3px solid #fff; outline-offset:2px;
  box-shadow:0 0 0 6px var(--g1);
}