/* ==========================================================================
   Aldeas Infantiles SOS — captación de socios
   Paleta: #1976C4 principal · #E63268 secundario · #CDE8F8 · #00ABEC
   Tipografía: Poppins (titulares) + Arial (texto)
   ========================================================================== */

/* ── 1. tokens ─────────────────────────────────────────────────────────── */
:root{
  --azul:#1976C4;
  --azul-hondo:#145FA3;
  --rosa:#E63268;
  --rosa-hondo:#C82656;
  --cian:#00ABEC;
  --cielo:#CDE8F8;
  --cielo-tenue:#EAF5FD;
  --tinta:#10293F;
  --texto:#445A6E;
  --gris:#6A7F92;
  --linea:#DFEBF5;
  --papel:#FFFFFF;

  --titulos:"Poppins","Segoe UI",Arial,sans-serif;
  --lectura:Arial,Helvetica,"Helvetica Neue",sans-serif;

  --ancho:1340px;
  --margen:40px;
  --col-form:392px;
  --hueco:56px;

  --r-s:10px;
  --r-m:18px;
  --r-l:24px;

  --sombra:0 1px 2px rgba(16,41,63,.04),0 14px 30px -18px rgba(16,41,63,.22);
  --sombra-alta:0 2px 6px rgba(16,41,63,.05),0 26px 50px -22px rgba(16,41,63,.3);
  --sombra-form:0 4px 10px rgba(16,41,63,.05),0 34px 64px -30px rgba(16,41,63,.4);
  --salida:cubic-bezier(.22,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  overflow-x:clip;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--lectura);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}

a{color:var(--azul);text-underline-offset:3px}
a:hover{color:var(--azul-hondo)}

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

.saltar{
  position:fixed;top:14px;left:14px;z-index:200;
  transform:translateY(-250%);
  background:var(--tinta);color:#fff;text-decoration:none;
  padding:12px 20px;border-radius:var(--r-s);
  font-family:var(--titulos);font-weight:600;font-size:.9rem;
}
.saltar:focus{transform:none}

.progreso{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none}
.progreso span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cian),var(--azul) 70%,var(--rosa));
  transition:width .12s linear;
}

.contenedor{max-width:var(--ancho);margin:0 auto;padding-inline:var(--margen)}

/* ── 2. tipografía ─────────────────────────────────────────────────────── */
.titular{
  font-family:var(--titulos);font-weight:600;
  font-size:clamp(1.72rem,1.2rem + 1.8vw,2.55rem);
  line-height:1.16;letter-spacing:-.027em;
  color:var(--azul);
  margin:0 0 .8em;max-width:19ch;
  text-wrap:balance;
}
.titular--claro{color:#fff}
.rotulo{
  font-family:var(--titulos);font-weight:600;
  font-size:clamp(1.22rem,1.1rem + .55vw,1.55rem);
  line-height:1.28;letter-spacing:-.022em;
  color:var(--azul);
  margin:0 0 2.1rem;max-width:28ch;
}

.chip{
  display:inline-block;margin:0 0 1.5rem;
  padding:8px 18px;border-radius:999px;
  background:var(--cielo);color:var(--azul-hondo);
  font-family:var(--titulos);font-weight:600;font-size:.79rem;
  animation:asomar .7s var(--salida) both;
}

/* ── 3. estructura ─────────────────────────────────────────────────────── */
.lienzo{position:relative}

.banda{padding-block:clamp(58px,7vw,100px)}
.banda--cielo{background:var(--cielo-tenue)}
.banda--azul{
  background:
    radial-gradient(64% 84% at 96% 4%,rgba(0,171,236,.45),transparent 62%),
    var(--azul);
  color:#fff;
}

.lienzo .contenedor{padding-right:calc(var(--col-form) + var(--hueco) + var(--margen))}

.carril__marco{
  position:absolute;inset:0 0;
  max-width:var(--ancho);margin-inline:auto;
  padding-inline:var(--margen);
  pointer-events:none;
}
.carril{
  position:absolute;top:0;bottom:0;right:var(--margen);
  width:var(--col-form);pointer-events:auto;
}
.muelle{
  position:sticky;top:26px;
  max-height:calc(100dvh - 52px);
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--linea) transparent;
}
.muelle::-webkit-scrollbar{width:6px}
.muelle::-webkit-scrollbar-thumb{background:var(--linea);border-radius:3px}

/* ── 4. cabecera ───────────────────────────────────────────────────────── */
.cabecera{background:#fff;border-bottom:1px solid var(--linea)}
.cabecera__interior{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding-block:18px;
}
.cabecera__marca img{width:clamp(176px,19vw,238px)}

/* ── 5. hero ───────────────────────────────────────────────────────────── */
.hero{
  background:
    radial-gradient(58% 74% at 92% 0%,rgba(0,171,236,.16),transparent 64%),
    linear-gradient(180deg,#EDF6FD 0%,#FFFFFF 78%);
  padding-block:clamp(44px,5.5vw,78px) clamp(56px,6.5vw,92px);
}
.hero__titular{
  font-family:var(--titulos);font-weight:700;
  font-size:clamp(2.35rem,1.15rem + 4.2vw,4.1rem);
  line-height:1.08;letter-spacing:-.036em;
  color:var(--azul);
  margin:0 0 .52em;max-width:15ch;
}
.linea{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em}
.linea > span{
  display:block;
  animation:ascender .95s var(--salida) both;
  animation-delay:calc(200ms + var(--i) * 110ms);
}
@keyframes ascender{from{transform:translateY(105%)}to{transform:translateY(0)}}

.hero__entrada{
  font-size:clamp(1.05rem,1rem + .3vw,1.17rem);line-height:1.65;
  color:var(--texto);max-width:56ch;margin:0 0 2.2rem;
  animation:asomar .8s var(--salida) 520ms both;
}
@keyframes asomar{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero__acciones{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:2.5rem;
  animation:asomar .8s var(--salida) 620ms both;
}
.hero__nota{margin:0;font-size:.87rem;line-height:1.45;color:var(--gris);max-width:24ch}

.hero__creditos{
  list-style:none;margin:0;padding:1.4rem 0 0;
  border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:8px 32px;
  font-size:.84rem;color:var(--gris);
  animation:asomar .8s var(--salida) 720ms both;
}
.hero__creditos li{display:flex;align-items:center;gap:9px}
.hero__creditos li::before{
  content:"";width:15px;height:15px;flex:none;background:var(--cian);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* ── 6. botones ────────────────────────────────────────────────────────── */
.boton{
  position:relative;display:inline-block;border:1.5px solid transparent;cursor:pointer;
  font-family:var(--titulos);font-weight:600;font-size:.96rem;line-height:1.2;
  padding:15px 28px;border-radius:var(--r-s);
  transition:background-color .2s ease,border-color .2s ease,transform .2s var(--salida),box-shadow .25s ease;
}
.boton:active{transform:translateY(1px) scale(.995)}
.boton--rosa{background:var(--rosa);color:#fff;box-shadow:0 12px 26px -16px rgba(230,50,104,.9)}
.boton--rosa:hover{background:var(--rosa-hondo);transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(230,50,104,.85)}
.boton--azul{background:var(--azul);color:#fff}
.boton--azul:hover{background:var(--azul-hondo);transform:translateY(-2px)}
.boton--linea{background:#fff;color:var(--azul);border-color:var(--linea)}
.boton--linea:hover{border-color:var(--azul)}
.boton--ancho{width:100%}
.boton[disabled]{cursor:default;transform:none}

.boton.cargando{color:transparent !important;pointer-events:none}
.boton.cargando::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:20px;height:20px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* ── 7. elige tu aporte ────────────────────────────────────────────────── */
.aporte__intro{max-width:56ch;margin:0 0 2.2rem}
.aporte__panel{
  background:linear-gradient(170deg,#fff 0%,#FBFDFF 55%,var(--cielo-tenue) 100%);
  border-radius:var(--r-l);
  box-shadow:var(--sombra);
  padding:clamp(26px,3.2vw,40px);
  max-width:700px;
}

.aporte__cabeza{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:8px}
.aporte__valor{
  display:flex;align-items:baseline;gap:9px;margin:0;
  font-family:var(--titulos);font-weight:700;
  font-size:clamp(2.6rem,1.9rem + 2.6vw,3.6rem);
  line-height:1;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  color:var(--azul);
}
.aporte__valor small{font-size:.95rem;font-weight:600;letter-spacing:0;color:var(--gris)}
.aporte__anual{margin:0;flex:1 1 210px;font-size:.93rem;line-height:1.5;color:var(--texto)}
.aporte__anual strong{color:var(--tinta);font-weight:700}

.aporte__etiqueta{display:block;font-size:.82rem;color:var(--gris);margin:22px 0 0}
.aporte__linea{position:relative;padding-top:46px}

.burbuja{
  position:absolute;top:2px;left:0;
  transform:translateX(-50%);
  padding:6px 13px;border-radius:999px;
  background:var(--azul);color:#fff;
  font-family:var(--titulos);font-weight:600;font-size:.85rem;line-height:1.2;
  white-space:nowrap;
  box-shadow:0 8px 18px -10px rgba(25,118,196,.9);
  transition:transform .18s var(--salida);
}
.burbuja::after{
  content:"";position:absolute;left:50%;top:100%;
  width:9px;height:9px;background:var(--azul);
  transform:translate(-50%,-55%) rotate(45deg);
  border-radius:2px;
}
.burbuja.late{transform:translateX(-50%) scale(1.08)}

.rango{
  -webkit-appearance:none;appearance:none;
  width:100%;height:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--azul) var(--pos,7%),var(--cielo) var(--pos,7%));
  cursor:pointer;
}
.rango::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:32px;height:32px;border-radius:50%;
  background:#fff;border:5px solid var(--azul);
  box-shadow:0 6px 16px -5px rgba(25,118,196,.85);
  transition:transform .16s var(--salida);
}
.rango:hover::-webkit-slider-thumb{transform:scale(1.06)}
.rango:active::-webkit-slider-thumb{transform:scale(1.14)}
.rango::-moz-range-thumb{
  width:32px;height:32px;border-radius:50%;
  background:#fff;border:5px solid var(--azul);
  box-shadow:0 6px 16px -5px rgba(25,118,196,.85);
}
.rango__marcas{
  display:flex;justify-content:space-between;
  font-size:.76rem;color:var(--gris);margin:14px 0 28px;
}

.aporte__nota{margin:14px 0 0;font-size:.8rem;line-height:1.5;color:var(--gris)}

.sr-solo{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── 8. cifras ─────────────────────────────────────────────────────────── */
.cifras__lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));
  gap:clamp(16px,2vw,26px);
}
.dato{
  margin:0;background:#fff;
  border-radius:var(--r-l);
  box-shadow:var(--sombra);
  padding:30px 26px 32px;
  transition:transform .3s var(--salida),box-shadow .3s ease;
}
.dato:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.dato__num{
  font-family:var(--titulos);font-weight:700;
  font-size:clamp(2.5rem,1.7rem + 2.5vw,3.5rem);
  line-height:1.02;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--azul);margin:0;
}
.dato__barra{
  display:block;width:0;height:3px;border-radius:2px;
  background:var(--azul);
  margin:16px 0 18px;
  transition:width .7s var(--salida) .25s;
}
.dato.visible .dato__barra{width:44px}
.dato__pie{margin:0;font-size:.92rem;line-height:1.55;color:var(--texto)}
.dato--alerta .dato__num,.dato--alerta .dato__barra{color:var(--rosa)}
.dato--alerta .dato__barra{background:var(--rosa)}

/* ── 9. urgencia ───────────────────────────────────────────────────────── */
.urgencia .titular{max-width:20ch;margin-bottom:1.6rem}
.urgencia__rejilla{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,3.4vw,52px);
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.3);
}
.urgencia__texto p{margin:0 0 1.15em;color:rgba(255,255,255,.93)}
.urgencia__texto p:last-child{margin-bottom:0}

.programas{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.programa{
  background:rgba(255,255,255,.12);
  border-radius:var(--r-m);
  padding:18px 22px;
  transition:background-color .25s ease,transform .3s var(--salida);
}
.programa:hover{background:rgba(255,255,255,.2);transform:translateX(4px)}
.programa h3{
  margin:0 0 4px;
  font-family:var(--titulos);font-weight:600;font-size:1rem;
  letter-spacing:-.015em;color:#fff;
}
.programa p{margin:0;max-width:48ch;font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.85)}

.cita{
  margin:clamp(26px,3vw,38px) 0 0;
  padding:0 0 0 26px;
  border-left:4px solid rgba(255,255,255,.85);
  max-width:34ch;
}
.cita p{
  margin:0;
  font-family:var(--titulos);font-weight:600;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem);
  line-height:1.24;letter-spacing:-.028em;color:#fff;
}

/* ── 10. pasos ─────────────────────────────────────────────────────────── */
.pasos__lista{
  list-style:none;margin:0;padding:0;counter-reset:paso;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(16px,2vw,26px);
}
.paso{
  counter-increment:paso;
  background:#fff;border-radius:var(--r-l);
  box-shadow:var(--sombra);
  padding:28px 26px 30px;
  transition:transform .3s var(--salida),box-shadow .3s ease;
}
.paso:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.paso::before{
  content:counter(paso);
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-bottom:18px;
  border-radius:13px;
  background:var(--cielo);color:var(--azul);
  font-family:var(--titulos);font-weight:700;font-size:1.08rem;
  transform:scale(.4);opacity:0;
  transition:transform .5s var(--salida),opacity .4s ease;
  transition-delay:calc(var(--d,0ms) + 180ms);
}
.paso.visible::before{transform:scale(1);opacity:1}
.paso:last-child::before{background:var(--rosa);color:#fff}
.paso__titulo{
  margin:0 0 .5em;
  font-family:var(--titulos);font-size:1.05rem;font-weight:600;
  line-height:1.3;letter-spacing:-.018em;color:var(--tinta);
}
.paso p{margin:0;font-size:.93rem;line-height:1.56;color:var(--texto)}

/* ── 11. preguntas ─────────────────────────────────────────────────────── */
.acordeon{max-width:880px;border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:var(--sombra)}
.pliegue + .pliegue{border-top:1px solid var(--linea)}
.pliegue h3{margin:0;font-size:1rem}
.pliegue__boton{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:none;border:0;cursor:pointer;padding:22px 26px;text-align:left;
  font-family:var(--titulos);
  font-size:clamp(1rem,.95rem + .25vw,1.12rem);
  font-weight:600;line-height:1.35;letter-spacing:-.018em;
  color:var(--tinta);
  transition:color .2s ease,background-color .2s ease;
}
.pliegue__boton:hover{color:var(--azul);background:var(--cielo-tenue)}
.pliegue__signo{
  position:relative;flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--cielo);
  transition:background-color .25s ease,transform .35s var(--salida);
}
.pliegue__signo::before,.pliegue__signo::after{
  content:"";position:absolute;left:50%;top:50%;
  width:12px;height:2px;border-radius:2px;background:var(--azul);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--salida),opacity .25s ease,background-color .25s ease;
}
.pliegue__signo::after{transform:translate(-50%,-50%) rotate(90deg)}
.pliegue[data-abierto] .pliegue__signo{background:var(--azul);transform:rotate(180deg)}
.pliegue[data-abierto] .pliegue__signo::before{background:#fff}
.pliegue[data-abierto] .pliegue__signo::after{transform:translate(-50%,-50%) rotate(0);opacity:0}

.pliegue__cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--salida)}
.pliegue[data-abierto] .pliegue__cuerpo{grid-template-rows:1fr}
.pliegue__cuerpo > div{overflow:hidden}
.pliegue__cuerpo p{
  margin:0 0 1.05em;padding-inline:26px;max-width:66ch;font-size:.95rem;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease .12s,transform .4s var(--salida) .12s;
}
.pliegue[data-abierto] .pliegue__cuerpo p{opacity:1;transform:none}
.pliegue__cuerpo p:last-child{margin-bottom:26px}
.pliegue__cuerpo strong{color:var(--tinta);font-weight:700}

/* ── 12. tarjeta del formulario ────────────────────────────────────────── */
.muelle__tirador,.muelle__scrim,.tarjeta__cerrar{display:none}

.tarjeta{
  position:relative;background:#fff;
  border-radius:var(--r-l);
  padding:30px 28px 28px;
  /* box-shadow:var(--sombra-form); */
  animation:asomar .9s var(--salida) 240ms both;
}
.tarjeta.temblor{animation:temblor .5s ease}
@keyframes temblor{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-8px)}
  36%{transform:translateX(7px)}
  54%{transform:translateX(-4px)}
  72%{transform:translateX(3px)}
}

.tarjeta__barra{
  position:absolute;top:0;left:12px;right:12px;height:4px;
  background:var(--cielo);
  border-radius:var(--r-l) var(--r-l) 0 0;overflow:hidden;
}
.tarjeta__barra span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cian),var(--rosa));
  transition:width .45s var(--salida);
}

.tarjeta__cabecera{margin-bottom:20px}
.tarjeta__titulo{
  font-family:var(--titulos);font-weight:600;font-size:1.5rem;
  letter-spacing:-.032em;line-height:1.2;color:var(--azul);margin:0 0 6px;
}
.tarjeta__sub{margin:0;font-size:.86rem;line-height:1.45;color:var(--gris);max-width:30ch}

.tarjeta__cuota{
  margin:0 0 16px;padding:11px 16px;
  background:var(--cielo-tenue);border-radius:var(--r-s);
  font-size:.84rem;color:var(--azul-hondo);
  animation:entrarCuota .45s var(--salida) both;
}
@keyframes entrarCuota{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.tarjeta__cuota strong{font-weight:700}

/* entrada escalonada de los campos */
.tarjeta.animada .tarjeta__cabecera,
.tarjeta.animada .formulario > *{animation:campoEntra .5s var(--salida) both}
.tarjeta.animada .tarjeta__cabecera{animation-delay:40ms}
.tarjeta.animada .formulario > *:nth-child(1){animation-delay:120ms}
.tarjeta.animada .formulario > *:nth-child(2){animation-delay:180ms}
.tarjeta.animada .formulario > *:nth-child(3){animation-delay:240ms}
.tarjeta.animada .formulario > *:nth-child(4){animation-delay:300ms}
.tarjeta.animada .formulario > *:nth-child(5){animation-delay:350ms}
.tarjeta.animada .formulario > *:nth-child(6){animation-delay:390ms}
.tarjeta.animada .formulario > *:nth-child(7){animation-delay:430ms}
.tarjeta.animada .formulario > *:nth-child(8){animation-delay:470ms}
@keyframes campoEntra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.formulario{display:grid;gap:10px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.campo{position:relative}
.campo input{
  width:100%;
  font-family:var(--lectura);font-size:.95rem;color:var(--tinta);
  background:#F7FBFE;
  border:1.5px solid var(--linea);border-radius:var(--r-s);
  padding:22px 38px 8px 14px;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.campo input::placeholder{color:transparent}
.campo label{
  position:absolute;left:15px;top:14px;
  font-size:.95rem;color:var(--gris);
  pointer-events:none;transform-origin:left top;
  transition:transform .22s var(--salida),color .2s ease;
}
.campo label span{opacity:.75}
.campo input:focus{
  background:#fff;border-color:var(--azul);outline:none;
  box-shadow:0 0 0 3px rgba(25,118,196,.14);
}
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label{transform:translateY(-9px) scale(.73)}
.campo input:focus + label{color:var(--azul)}
.campo input[aria-invalid="true"]{border-color:var(--rosa);background:#FFF6F8}

/* marca de campo correcto */
.campo::after{
  content:"";position:absolute;right:13px;top:22px;
  width:18px;height:18px;background:var(--azul);
  opacity:0;transform:scale(.4);
  transition:opacity .25s ease,transform .35s var(--salida);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  pointer-events:none;
}
.campo.correcto::after{opacity:1;transform:scale(1)}

.campo__error{
  margin:4px 0 0;padding-left:3px;font-size:.73rem;line-height:1.35;color:var(--rosa);
  animation:campoEntra .3s var(--salida) both;
}
.campo__error:empty{display:none;animation:none}
.campo__error--suelto{margin-top:-4px}

.visto{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;margin-top:6px}
.visto input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;margin:1px 0 0;
  border:1.5px solid var(--linea);border-radius:6px;
  background:#fff;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,transform .2s var(--salida);
}
.visto input:checked{
  background:var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--azul);
  animation:marcar .35s var(--salida);
}
@keyframes marcar{0%{transform:scale(.8)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.visto input[aria-invalid="true"]{border-color:var(--rosa)}
.visto label{font-size:.79rem;line-height:1.45;color:var(--gris);cursor:pointer}

.formulario__envio{margin-top:12px;display:grid;gap:10px}
.formulario__avance{margin:0;font-size:.75rem;color:var(--gris);transition:color .2s ease}
.formulario__avance.completo{color:var(--azul);font-weight:700;font-family:var(--titulos)}
.formulario__pie{margin:0;font-size:.74rem;line-height:1.4;color:var(--gris);text-align:center}
.formulario__aviso{
  margin:10px 0 0;padding:11px 14px;border-radius:var(--r-s);
  background:#FFF1F5;border:1px solid #F7CBD9;
  font-size:.82rem;line-height:1.45;color:var(--rosa-hondo);
  animation:campoEntra .3s var(--salida) both;
}

.exito{padding:8px 0 4px;text-align:center}
.exito > *{animation:campoEntra .5s var(--salida) both}
.exito > *:nth-child(1){animation-delay:.05s}
.exito > *:nth-child(2){animation-delay:.32s}
.exito > *:nth-child(3){animation-delay:.42s}
.exito > *:nth-child(4){animation-delay:.52s}
.exito__marca{width:64px;height:64px;margin:0 auto 18px}
.exito__disco{transform-origin:30px 30px;animation:brotarDisco .5s var(--salida) both}
@keyframes brotarDisco{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.exito__trazo{stroke-dasharray:46;stroke-dashoffset:46;animation:trazar .55s var(--salida) .35s forwards}
@keyframes trazar{to{stroke-dashoffset:0}}
.exito__titulo{
  font-family:var(--titulos);font-weight:600;font-size:1.42rem;
  letter-spacing:-.03em;color:var(--azul);margin:0 0 8px;
}
.exito__texto{margin:0 0 14px;font-size:.92rem;color:var(--texto)}
.exito__codigo{
  display:inline-block;margin:0 0 20px;padding:8px 16px;border-radius:999px;
  background:var(--cielo-tenue);color:var(--azul-hondo);
  font-family:var(--titulos);font-weight:600;font-size:.82rem;letter-spacing:.01em;
}

/* ── 12b. franja de fotografía ─────────────────────────────────────────
   Para cambiar la imagen basta con sustituir assets/img/foto-principal.jpg
   por la fotografía definitiva, con el mismo nombre. Si el archivo no
   existe, la franja se muestra en azul plano y la página sigue entera. */
.franja{
  position:relative;
  min-height:clamp(260px,34vw,460px);
  background:var(--azul) url("../img/foto-principal.jpg") center/cover no-repeat;
}
.franja__pie{
  max-width:var(--ancho);width:100%;margin:0 auto;
  padding:clamp(28px,4vw,52px) var(--margen);
}
.franja__pie p{
  margin:0;max-width:22ch;
  font-family:var(--titulos);font-weight:600;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.95rem);
  line-height:1.24;letter-spacing:-.028em;color:#fff;
  text-shadow:0 2px 20px rgba(16,41,63,.5);
}

/* Opcional: fotografía de fondo también en la banda azul. Descomenta y
   deja el archivo en assets/img/fondo-urgencia.jpg
.urgencia{
  background:
    linear-gradient(100deg,rgba(25,118,196,.96) 0%,rgba(25,118,196,.9) 52%,rgba(0,171,236,.78) 100%),
    var(--azul) url("../img/fondo-urgencia.jpg") center/cover no-repeat;
}
*/

/* ── 13. pie ───────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--linea);padding-block:48px 56px}
.pie__marcas{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.pie__marcas img{width:clamp(160px,17vw,196px)}
.pie__legal{max-width:60ch;margin:0 0 20px;font-size:.81rem;color:var(--gris)}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:8px 28px}
.pie__enlaces a{font-size:.81rem;color:var(--gris);text-decoration:none}
.pie__enlaces a:hover{color:var(--azul);text-decoration:underline}

/* ── 14. revelado ──────────────────────────────────────────────────────── */
.js .reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s ease var(--d,0ms),transform .65s var(--salida) var(--d,0ms);
}
.js .reveal.visible{opacity:1;transform:none}

/* ── 15. adaptación ────────────────────────────────────────────────────── */
@media (max-width:1240px){
  :root{--col-form:344px;--hueco:38px;--margen:28px}
}

/* la banda azul pasa a una sola columna en cuanto el texto se estrecha */
@media (max-width:1299px){
  .urgencia__rejilla{grid-template-columns:1fr;gap:clamp(24px,3vw,34px)}
  .programa p{max-width:64ch}
}

/* con dos columnas de cifras, la tercera ocupa el ancho completo */
@media (min-width:1024px) and (max-width:1299px){
  .cifras__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cifras__lista .dato:last-child{grid-column:1 / -1}
  .cifras__lista .dato:last-child .dato__pie{max-width:52ch}
}

/* en tablet los tres programas caben en fila */
@media (min-width:700px) and (max-width:1023px){
  .programas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .programa p{max-width:none}
}

@media (max-width:1023px){
  :root{--margen:24px}

  .lienzo .contenedor{padding-right:var(--margen)}
  .carril__marco{position:static;max-width:none;padding:0;pointer-events:auto}
  .carril{position:static;width:auto}
  .muelle{position:static;max-height:none;overflow:visible}

  .muelle__tirador{
    position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:11px 11px 11px 20px;
    padding-bottom:calc(11px + env(safe-area-inset-bottom));
    border:1px solid var(--linea);border-radius:999px;
    background:#fff;cursor:pointer;
    box-shadow:0 16px 40px -16px rgba(16,41,63,.55);
    animation:subirTirador .7s var(--salida) 900ms both;
  }
  @keyframes subirTirador{from{transform:translateY(150%)}to{transform:none}}
  .muelle__tirador-texto{
    display:flex;flex-direction:column;align-items:flex-start;
    font-family:var(--titulos);font-weight:600;font-size:1rem;
    line-height:1.2;letter-spacing:-.025em;color:var(--azul);
  }
  .muelle__tirador-texto small{
    font-family:var(--lectura);font-weight:400;font-size:.71rem;
    color:var(--gris);margin-top:1px;letter-spacing:0;
  }
  .muelle__tirador-cta{
    background:var(--rosa);color:#fff;padding:13px 22px;border-radius:999px;
    font-family:var(--titulos);font-size:.9rem;font-weight:600;white-space:nowrap;
  }

  .muelle__scrim{
    display:block;position:fixed;inset:0;z-index:70;
    background:rgba(16,41,63,.55);
    opacity:0;transition:opacity .3s ease;
  }
  .muelle.abierto .muelle__scrim{opacity:1}

  .muelle__panel{
    position:fixed;left:0;right:0;bottom:0;z-index:71;
    max-height:94dvh;overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(102%);
    transition:transform .45s var(--salida);
    padding:0 8px 8px;-webkit-overflow-scrolling:touch;
  }
  .muelle.abierto .muelle__panel{transform:none}

  .tarjeta{
    animation:none;
    border-radius:var(--r-l) var(--r-l) 14px 14px;
    padding:30px 22px calc(26px + env(safe-area-inset-bottom));
  }
  .tarjeta__cerrar{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:16px;right:16px;
    width:36px;height:36px;
    border:1px solid var(--linea);border-radius:50%;
    background:#fff;color:var(--tinta);cursor:pointer;
  }
  .tarjeta__cerrar svg{width:17px;height:17px}
  .tarjeta__cabecera{padding-right:44px}

  .pie{padding-bottom:110px}
  body.bloqueado{overflow:hidden}
}

@media (max-width:760px){
  .hero__creditos{gap:6px 0;flex-direction:column}
  .aporte__panel{padding:22px 18px}
  .pliegue__boton{padding:20px 18px}
  .pliegue__cuerpo p{padding-inline:18px}
  .monto{flex:1 1 auto;padding:13px 16px}
}

@media (max-width:560px){
  body{font-size:1rem}
  .fila{grid-template-columns:1fr}
  .cabecera__interior{padding-block:14px}
    .hero__acciones .boton{width:100%;text-align:center}
  .aporte__cifra{padding:18px 18px}
}

/* ── 16. movimiento reducido ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{opacity:1;transform:none}
  .exito__trazo{stroke-dashoffset:0}
  .paso::before{transform:none;opacity:1}
  .pliegue__cuerpo p{opacity:1;transform:none}
}

@media print{
  .muelle,.saltar,.progreso{display:none}
  .banda--azul{background:#fff;color:#000}
}