/* ═══════════════════════════════════════════════════════════════════════════
   Fundación Pintas de Amor — v3
   Paleta muestreada del material oficial (brochure + logo).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* navy — script del logo y titulares */
  --navy-950:#04142C;   /* fondo de los capítulos de video (v4) */
  --navy-900:#062A5D;
  --navy-800:#0E3566;
  --navy-700:#1A3B69;
  --navy-600:#274779;
  /* azules del agua */
  --blue-600:#16629B;
  --blue-500:#196BA3;
  --blue-400:#4FABD2;
  --blue-300:#7EC0DF;
  --blue-200:#A2D1E5;
  --blue-100:#DDECF6;
  --blue-050:#F1F7FC;
  /* rojo de la gota */
  --red-700:#8F1721;
  --red-600:#BF1719;
  --red-500:#D22A2E;
  --red-050:#FDF0F0;
  /* neutros */
  --paper:#FAFBFD;
  --white:#fff;
  --ink:#16233A;
  --muted:#5A6B85;
  --line:#DCE5F0;
  --wa:#1FA855;

  --f-disp:'Archivo', system-ui, sans-serif;
  --f-body:'Nunito Sans', system-ui, sans-serif;
  --f-script:'Great Vibes', cursive;

  --wrap:1180px;
  --pad:clamp(20px,5vw,56px);
  --r:16px;
  --shadow:0 1px 2px rgba(6,42,93,.05), 0 12px 32px -12px rgba(6,42,93,.16);
  --shadow-lg:0 2px 4px rgba(6,42,93,.05), 0 32px 60px -24px rgba(6,42,93,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font:400 clamp(16px,1.05vw,17.5px)/1.68 var(--f-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue-600)}
h1,h2,h3{margin:0}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.wrap{width:min(var(--wrap),100% - var(--pad)*2); margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy-900);color:#fff;padding:12px 18px;border-radius:0 0 10px 0}
.skip:focus{left:0}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--blue-500); outline-offset:3px; border-radius:6px;
}

/* ── tipografía base ─────────────────────────────────────────────────────── */
.h2{
  font-family:var(--f-disp); font-weight:800; font-stretch:92%;
  font-size:clamp(1.9rem,3.9vw,3.05rem); line-height:1.04;
  letter-spacing:-.018em; color:var(--navy-900); text-transform:uppercase;
  margin:0 0 .55em;
}
.h2--light{color:#fff}
.kicker{
  font-family:var(--f-disp); font-weight:700; font-size:.735rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--red-600);
  margin:0 0 1.1em; display:flex; align-items:center; gap:.7em;
}
.kicker::after{content:''; flex:0 0 46px; height:2px; background:var(--red-600); opacity:.55}
.kicker--light{color:var(--blue-300)}
.kicker--light::after{background:var(--blue-300)}
.lede{font-size:clamp(1.08rem,1.65vw,1.32rem); line-height:1.55; color:var(--navy-700)}

/* ── botones ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--f-disp); font-weight:700; font-size:.9rem; letter-spacing:.045em;
  text-transform:uppercase; text-decoration:none;
  background:var(--red-600); color:#fff; border:2px solid var(--red-600);
  padding:.92em 1.6em; border-radius:999px; cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 8px 20px -10px rgba(191,23,25,.7);
}
.btn:hover{background:var(--red-700); border-color:var(--red-700); transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--ghost{
  background:transparent; color:var(--navy-900); border-color:var(--navy-900);
  box-shadow:none;
}
.btn--ghost:hover{background:var(--navy-900); border-color:var(--navy-900); color:#fff}
/* sobre video/oscuro */
.btn--outline{
  background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.75);
  box-shadow:none; backdrop-filter:blur(4px);
}
.btn--outline:hover{background:#fff; border-color:#fff; color:var(--navy-900)}
/* píldora blanca sólida (hero, como la referencia) */
.btn--white{
  background:#fff; color:var(--navy-900); border-color:#fff;
  box-shadow:0 10px 26px -14px rgba(3,18,40,.65);
}
.btn--white:hover{background:var(--blue-050); border-color:var(--blue-050); color:var(--navy-900)}
/* en el hero, los botones hablan en la misma grotesk de la referencia, sin gritar */
.hero .btn{
  font-family:'Figtree', var(--f-disp); text-transform:none; letter-spacing:0;
  font-weight:600; font-size:.98rem; padding:.8em 1.5em;
}
.btn--blue{background:var(--navy-800); border-color:var(--navy-800); box-shadow:0 8px 20px -10px rgba(14,53,102,.7)}
.btn--blue:hover{background:var(--navy-900); border-color:var(--navy-900)}
.btn--sm{padding:.66em 1.15em; font-size:.76rem}
.btn--full{width:100%; margin-top:.4rem}
.btn[disabled]{opacity:.55; pointer-events:none}

/* ── nav ─────────────────────────────────────────────────────────────────── */
/* Estado por defecto = flotando sobre el video del hero (transparente, texto blanco).
   .is-stuck = sólida, texto navy. El cambio lo dispara main.js al salir del hero. */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.72rem var(--pad);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.nav .nav__name i{color:#fff}
.nav .nav__name b{color:#F2A8AB}
.nav .nav__links a:not(.btn){color:rgba(255,255,255,.94); text-shadow:0 1px 12px rgba(3,18,40,.6)}
.nav .nav__links a:not(.btn):hover{color:#fff}
.nav .nav__burger{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); backdrop-filter:blur(6px)}
.nav .nav__burger span{background:#fff}

.nav.is-stuck{
  background:rgba(255,255,255,.9); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(6,42,93,.5);
}
.nav.is-stuck .nav__name i{color:var(--navy-900)}
.nav.is-stuck .nav__name b{color:var(--red-600)}
.nav.is-stuck .nav__links a:not(.btn){color:var(--navy-800); text-shadow:none}
.nav.is-stuck .nav__links a:not(.btn):hover{color:var(--navy-900)}
.nav.is-stuck .nav__burger{background:#fff; border-color:var(--line); backdrop-filter:none}
.nav.is-stuck .nav__burger span{background:var(--navy-900)}
.nav__brand{display:flex; align-items:center; gap:.62rem; text-decoration:none; color:inherit}
.drop-mark{width:19px; display:block; flex:none}
.drop-mark svg{width:100%; height:auto; display:block}
.drop-mark--tiny{width:10px; display:inline-block; vertical-align:-1px}
.nav__name{display:flex; flex-direction:column; line-height:1.06}
.nav__name i{font-family:var(--f-script); font-style:normal; font-size:1.32rem; color:var(--navy-900); line-height:1.15}
.nav__name b{font-family:var(--f-disp); font-weight:600; font-size:.53rem; letter-spacing:.17em; text-transform:uppercase; color:var(--red-600)}
.nav__links{display:flex; align-items:center; gap:1.6rem}
.nav__links a:not(.btn){
  font-family:var(--f-disp); font-weight:600; font-size:.79rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--navy-800); text-decoration:none;
  padding:.3em 0; border-bottom:2px solid transparent; transition:border-color .2s,color .2s;
}
.nav__links a:not(.btn):hover{border-bottom-color:var(--red-600); color:var(--navy-900)}
.nav__burger{
  display:none; position:relative; width:42px; height:38px;
  border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; padding:0;
}
.nav__burger span{
  position:absolute; left:50%; top:50%; width:17px; height:2px;
  background:var(--navy-900); border-radius:2px; transition:transform .28s ease;
}
.nav__burger span:first-child{transform:translate(-50%,-50%) translateY(-3.5px)}
.nav__burger span:last-child {transform:translate(-50%,-50%) translateY(3.5px)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child {transform:translate(-50%,-50%) rotate(-45deg)}

/* ── hero (v4: video a viewport completo, estructura tipo radiatinghope) ──── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--navy-950); overflow:hidden; isolation:isolate;
}
/* la media va sobredimensionada para admitir un parallax sutil sin bordes vacíos */
.hero__media{
  position:absolute; left:0; right:0; top:-6%; height:112%; z-index:0;
  background:url('assets/video/hero-carrera-libre.webp') center/cover no-repeat var(--navy-950);
  will-change:transform;
}
.hero__video{width:100%; height:100%; object-fit:cover; display:block}
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* scrim superior: garantiza legibilidad del nav sobre cualquier frame */
    linear-gradient(to bottom, rgba(3,18,40,.5) 0%, rgba(3,18,40,.12) 18%, rgba(3,18,40,0) 34%),
    /* direccional hacia abajo-izquierda: la zona del H1 (aligerado — el video respira más) */
    linear-gradient(to top right, rgba(3,18,40,.68) 0%, rgba(3,18,40,.5) 30%, rgba(3,18,40,.24) 58%, rgba(3,18,40,.05) 84%),
    linear-gradient(rgba(3,18,40,.08), rgba(3,18,40,.08));
}
.hero__inner{
  position:relative; z-index:2;
  /* pegado a la esquina: ancho completo menos el padding de página (sin el cap
     centrado de --wrap, que a 1440+ dejaba ~165px de margen) */
  width:calc(100% - var(--pad)*2); max-width:none; margin-inline:auto;
  padding:clamp(110px,16vh,180px) 0 clamp(26px,4vh,44px);
}
.hero__eyebrow{
  display:flex; align-items:center; gap:.55em; flex-wrap:wrap;
  font-family:var(--f-disp); font-weight:600; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:#CFE2F1; margin:0 0 1.15em;
}
.hero__eyebrow .hero__eyebrow-b{white-space:nowrap}
.hero__eyebrow i{font-style:normal; color:#7FA9CC; margin-right:.25em}
.hero__title{
  /* grotesk limpia tipo Lausanne (referencia radiatinghope) — sólo en el hero */
  font-family:'Figtree', var(--f-disp); font-weight:500;
  font-size:clamp(2.5rem,5.6vw,5.1rem); line-height:1.1; letter-spacing:-.022em;
  color:#fff; margin:0 0 .62em; max-width:17ch; text-wrap:balance;
}
.hero__title .line{display:block; overflow:hidden; padding-bottom:.04em}
.hero__title .line__in{display:block}
.hero__cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.5rem}
.hero__meta{
  font-size:.85rem; line-height:1.6; color:#BBD2E6; max-width:52ch; margin:0;
  border-left:2px solid rgba(162,209,229,.42); padding-left:.9rem;
}
.hero__meta a{color:#fff; font-weight:700; text-decoration-color:rgba(255,255,255,.5)}
.hero__meta a:hover{text-decoration-color:#fff}

.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(30px,6vh,54px); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-family:var(--f-disp); font-weight:600; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.8); text-decoration:none;
  transition:color .25s;
}
.hero__scroll:hover{color:#fff}
.hero__scroll span:first-child{writing-mode:vertical-rl}
.hero__scroll-line{
  display:block; width:1px; height:56px; background:rgba(255,255,255,.35); position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:''; position:absolute; inset:0 0 auto; height:40%; background:#fff;
  animation:scrollcue 2.2s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes scrollcue{
  0%{transform:translateY(-100%)} 60%,100%{transform:translateY(250%)}
}

/* ── la fundación hoy + aviso ────────────────────────────────────────────── */
.notice{padding:clamp(56px,8vw,104px) 0; background:var(--white)}
.lede--wide{max-width:56ch}
/* el logo oficial del brochure vive sobre papel claro, que es como está diseñado */
.brandmark{margin:0 0 clamp(20px,2.6vw,32px)}
.brandmark img{width:min(210px,46vw)}
.notice__grid{
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(20px,3vw,38px);
  align-items:start; margin-top:clamp(28px,3.8vw,46px);
}
.notice__card{
  display:flex; gap:clamp(16px,2.4vw,28px); align-items:flex-start;
  background:var(--navy-900); color:#EAF2FA; border-radius:var(--r);
  padding:clamp(22px,3.4vw,38px) clamp(20px,3.4vw,40px);
  box-shadow:var(--shadow-lg);
}
.notice__ico{flex:none; width:clamp(34px,4vw,46px); color:var(--blue-300)}
.notice__ico svg{width:100%; height:auto; display:block}
.notice__h{
  font-family:var(--f-disp); font-weight:800; font-stretch:94%;
  font-size:clamp(1.12rem,2.1vw,1.6rem); text-transform:uppercase; letter-spacing:-.005em;
  color:#fff; margin:0 0 .5em;
}
.notice__card p{margin-bottom:.7em; font-size:clamp(.96rem,1.25vw,1.08rem)}
.notice__card strong{color:#fff}
.notice__sub{color:#B9CDE2; font-size:.94rem !important; margin-bottom:0 !important}

/* ── propósito ───────────────────────────────────────────────────────────── */
.who{padding:clamp(56px,8vw,104px) 0}
.who__grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,5vw,72px); align-items:start}
.who__label{
  font-family:var(--f-disp); font-weight:700; font-size:.95rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--red-600); margin-bottom:1.1em;
}
.who__list{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.who__list li{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--blue-050); border:1px solid var(--blue-100); border-radius:12px;
  padding:1rem 1.15rem; font-size:1.02rem; color:var(--navy-800);
}
.who__list span{
  flex:none; width:28px; height:28px; border-radius:50%; background:var(--navy-800); color:#fff;
  display:grid; place-items:center; font-family:var(--f-disp); font-weight:700; font-size:.85rem;
}

/* ═══════════ capítulos oscuros de la historia (v4) ═══════════ */
.chapter{
  position:relative; background:var(--navy-950); color:#C6DAEC;
  padding:clamp(62px,9vw,120px) 0 clamp(52px,7vw,96px); overflow:hidden;
}
.chapter--call{padding-bottom:clamp(30px,4vw,56px)}
.chapter--tight{padding:clamp(34px,5vw,62px) 0 clamp(52px,7vw,92px)}
.chapter .h2{color:#fff}
.chapter .kicker{color:#F0787C}
.chapter .kicker::after{background:#F0787C; opacity:.6}
.chapter .lede{color:#D5E5F3}
.chapter p{color:#A6C0D9}
.chapter strong{color:#fff}
.chapter__intro{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,60px);
  align-items:start; margin-top:.3rem;
}
.chapter__line{
  font-family:var(--f-disp); font-weight:500; font-stretch:98%;
  font-size:clamp(1.4rem,3.2vw,2.5rem); line-height:1.14; letter-spacing:-.014em;
  color:#fff !important; margin:0; max-width:20ch;
}
.chapter__foot{
  margin:clamp(20px,2.6vw,30px) 0 0; font-size:.95rem; max-width:56ch;
}
.chapter .chapter__foot{color:#8FAAC6}

/* marcos de video */
.vgrid{display:grid; gap:clamp(16px,2.4vw,30px); margin-top:clamp(34px,5vw,64px)}
.vgrid--wide{grid-template-columns:1fr 1fr; align-items:start}
.vgrid--aside{grid-template-columns:1.35fr .65fr; align-items:end}
.vgrid__note{
  font-size:.82rem; letter-spacing:.02em; color:#7E9CBC !important; margin:0 0 .4rem;
  padding-left:.9rem; border-left:2px solid rgba(162,209,229,.3);
}
.vframe{margin:0; position:relative}
.vframe video{
  /* height:auto es obligatorio: el atributo height="720" del HTML gana sobre
     aspect-ratio si la altura no es auto, y el marco se deforma. */
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block;
  border-radius:14px; background:var(--navy-950);
  box-shadow:0 30px 64px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(162,209,229,.14);
}
.vframe figcaption{
  margin-top:.85rem; font-size:.82rem; line-height:1.5; letter-spacing:.01em; color:#8FAAC6;
}

/* tira de fotos (marquee) — ahora vive dentro del capítulo oscuro */
.strip{margin-top:clamp(34px,5vw,64px); overflow:hidden}
.strip__track{display:flex; gap:clamp(10px,1.4vw,18px); padding-inline:var(--pad); will-change:transform}
.strip__track figure{
  margin:0; flex:none; border-radius:12px; overflow:hidden; background:var(--navy-800);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9);
}
.strip__track img{height:clamp(200px,26vw,340px); width:auto; object-fit:cover}

/* ── clímax: el podio, a sangre ──────────────────────────────────────────── */
.climax{
  position:relative; min-height:clamp(430px,80vh,800px); display:grid; align-items:end;
  background:var(--navy-950); overflow:hidden; isolation:isolate;
}
.climax__media{position:absolute; inset:0; z-index:0}
.climax__media video{width:100%; height:100%; object-fit:cover; display:block}
.climax__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(3,18,40,.55) 0%, rgba(3,18,40,.05) 22%, rgba(3,18,40,0) 40%),
    linear-gradient(to top, rgba(3,18,40,.95) 0%, rgba(3,18,40,.72) 26%, rgba(3,18,40,.22) 62%, rgba(3,18,40,0) 84%);
}
.climax__inner{position:relative; z-index:2; padding-block:clamp(36px,5.5vw,70px)}
.climax__kicker{
  font-family:var(--f-disp); font-weight:700; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:#F0787C; margin:0 0 .9em;
}
.climax__line{
  font-family:var(--f-disp); font-weight:500; font-stretch:98%;
  font-size:clamp(1.75rem,4.4vw,3.5rem); line-height:1.08; letter-spacing:-.015em;
  color:#fff; margin:0 0 .55em; max-width:18ch;
}
.climax__cap{margin:0; font-size:.8rem; letter-spacing:.02em; color:#9FBCD8}

/* ── 636 ─────────────────────────────────────────────────────────────────── */
.count{background:var(--blue-050)}
.count__stage{position:relative; overflow:hidden; background:var(--navy-900); padding:clamp(56px,8vw,104px) 0 clamp(40px,5vw,62px)}
.count__water{position:absolute; inset:auto 0 0; height:60%; opacity:.55}
.count__water svg{width:100%; height:100%; display:block}
.count__inner{position:relative; z-index:2; display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,64px); align-items:center}
.count__kicker{font-family:var(--f-disp); font-weight:600; font-size:.76rem; letter-spacing:.17em; text-transform:uppercase; color:var(--blue-300); margin-bottom:.5em}
.count__num{
  font-family:var(--f-disp); font-weight:800; font-stretch:88%;
  font-size:clamp(5rem,15vw,11rem); line-height:.84; color:#fff; margin:0;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.count__say{font-size:clamp(1.15rem,2.2vw,1.7rem); color:#DCE9F5; margin:.35em 0 0}
/* rojo aclarado: sobre navy el #D22A2E daba 2.75:1; este da 5.13:1 */
.count__say strong{color:#F0787C}
.count__after{margin-top:1.1em; color:var(--blue-300); font-size:.98rem}
.count__dots{display:grid; grid-template-columns:repeat(auto-fill,minmax(9px,1fr)); gap:5px; align-content:center; min-height:150px}
.count__dots i{display:block; width:7px; height:7px; border-radius:50%; background:var(--blue-400); opacity:0; transform:scale(.3)}
.count__dots i.on{opacity:.85; transform:scale(1); transition:opacity .5s, transform .5s}
.count__cap{position:relative; z-index:2; text-align:center; margin:clamp(26px,4vw,44px) 0 0; font-size:.76rem; color:#7E9CBC; letter-spacing:.03em}

/* ── el giro: aquí la página amanece (oscuro → claro) ────────────────────── */
.turn{
  position:relative; background:var(--navy-900); color:#C6DAEC;
  padding:clamp(72px,10vw,132px) 0 clamp(110px,14vw,200px); overflow:hidden;
}
.turn::before{
  content:''; position:absolute; left:50%; top:-24%; width:min(1000px,132%); aspect-ratio:1;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(79,171,210,.30) 0%, rgba(79,171,210,.10) 42%, rgba(79,171,210,0) 66%);
}
.turn__inner{position:relative; z-index:2}
.turn__h{
  font-family:var(--f-disp); font-weight:600; font-stretch:96%;
  font-size:clamp(1.85rem,4.6vw,3.6rem); line-height:1.08; letter-spacing:-.018em;
  color:#fff; margin:0 0 clamp(28px,4vw,48px); max-width:20ch;
}
.turn__h-a{color:#8FAAC6}
.turn__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start}
.turn__grid > p{font-size:clamp(1.02rem,1.4vw,1.16rem); color:#BDD3E6}
.turn__grid strong{color:#fff}
.turn blockquote{
  margin:0; padding-left:clamp(18px,2.6vw,30px); border-left:3px solid var(--red-500);
  font-family:var(--f-disp); font-weight:500; font-stretch:96%;
  font-size:clamp(1.25rem,2.5vw,1.9rem); line-height:1.24; color:#fff;
}
.turn blockquote em{font-style:normal; color:#F0787C}
.turn cite{
  display:block; margin-top:1em; font-family:var(--f-body); font-style:normal;
  font-size:.82rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#8FAAC6;
}
.turn cite span{color:var(--blue-300)}
.turn__script{
  font-family:var(--f-script); font-size:clamp(2rem,5vw,3.6rem); line-height:1.2;
  color:var(--blue-300); text-align:center; margin:clamp(44px,6vw,80px) auto 0; max-width:22ch;
}
.turn__waves{position:absolute; left:0; right:0; bottom:-2px; width:100%; height:clamp(80px,10vw,160px); z-index:1}

/* ── por qué donar ───────────────────────────────────────────────────────── */
.why{padding:clamp(56px,8vw,104px) 0; background:var(--blue-050)}
.why__lede{max-width:52ch; color:var(--navy-700); font-size:clamp(1.02rem,1.4vw,1.16rem)}
.triad{list-style:none; margin:clamp(30px,4.5vw,54px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px)}
.triad li{background:#fff; border:1px solid var(--blue-100); border-radius:var(--r); padding:clamp(22px,2.8vw,32px); text-align:center; box-shadow:var(--shadow)}
.triad__ico{display:block; width:52px; margin:0 auto .95rem}
.triad__ico svg{width:100%; height:auto; display:block}
.triad h3{font-family:var(--f-disp); font-weight:800; font-stretch:94%; font-size:1.06rem; text-transform:uppercase; letter-spacing:.01em; color:var(--navy-900); margin-bottom:.5em}
.triad p{font-size:.94rem; color:var(--muted); margin:0}
.script-line{
  font-family:var(--f-script); font-size:clamp(1.7rem,4.2vw,3rem); line-height:1.25;
  color:var(--navy-800); text-align:center; margin:clamp(34px,5vw,58px) auto 0; max-width:22ch;
}

/* ── aprende ─────────────────────────────────────────────────────────────── */
.learn{padding:clamp(56px,8vw,104px) 0; background:var(--white)}
.learn__lede{max-width:60ch; color:var(--navy-700)}
.learn__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); margin-top:clamp(30px,4.5vw,52px)}
.lcard{background:var(--blue-050); border:1px solid var(--blue-100); border-radius:var(--r); padding:clamp(20px,2.6vw,30px)}
.lcard h3{font-family:var(--f-disp); font-weight:800; font-stretch:94%; font-size:1.02rem; text-transform:uppercase; color:var(--navy-900); margin-bottom:.85em}
.lcard__note{margin-top:1em; font-size:.83rem; color:var(--muted); border-top:1px solid var(--blue-100); padding-top:.8em}
.steps{margin:0; padding-left:1.15em; display:grid; gap:.5rem; font-size:.95rem; color:var(--navy-700)}
.steps li::marker{color:var(--red-600); font-weight:700}
.steps b{color:var(--navy-900)}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.95rem; color:var(--navy-700)}
.checks li{position:relative; padding-left:1.5em}
.checks li::before{
  content:''; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:50%;
  background:var(--blue-400);
}

/* compatibilidad */
.compat{margin-top:clamp(34px,5vw,60px); background:var(--navy-900); border-radius:var(--r); padding:clamp(24px,3.4vw,40px); color:#DCE9F5; box-shadow:var(--shadow-lg)}
.compat__h{font-family:var(--f-disp); font-weight:800; font-stretch:94%; font-size:clamp(1.1rem,2vw,1.45rem); text-transform:uppercase; color:#fff; margin-bottom:.4em}
.compat__sub{color:#A9C3DC; font-size:.95rem}
.compat__scroll{overflow-x:auto; margin:1.3rem 0 1rem; -webkit-overflow-scrolling:touch}
.compat__tbl{width:100%; border-collapse:collapse; min-width:420px}
.compat__tbl th,.compat__tbl td{text-align:left; padding:.68rem .9rem; border-bottom:1px solid rgba(162,209,229,.22)}
.compat__tbl thead th{
  font-family:var(--f-disp); font-weight:700; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue-300); border-bottom-color:rgba(162,209,229,.4);
}
.compat__tbl tbody th{width:36%}
.compat__tbl td{color:#CADCEC; font-size:.98rem}
.bt{
  display:inline-block; min-width:3.1em; text-align:center;
  font-family:var(--f-disp); font-weight:800; font-size:.95rem;
  background:var(--red-600); color:#fff; border-radius:7px; padding:.24em .5em;
}
.compat__note{font-size:.9rem; color:#A9C3DC; margin:0}
.compat__note strong{color:#fff}
.compat__note em{color:var(--blue-300); font-style:normal}

/* FAQ */
.faq{margin-top:clamp(40px,6vw,70px)}
.faq__h{font-family:var(--f-disp); font-weight:800; font-stretch:94%; font-size:clamp(1.2rem,2.4vw,1.7rem); text-transform:uppercase; color:var(--navy-900); margin-bottom:1rem}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none; cursor:pointer; padding:1.05rem 2.4rem 1.05rem 0; position:relative;
  font-family:var(--f-disp); font-weight:600; font-size:clamp(.98rem,1.35vw,1.1rem);
  color:var(--navy-900);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:''; position:absolute; right:.5rem; top:50%; width:11px; height:11px;
  border-right:2.4px solid var(--red-600); border-bottom:2.4px solid var(--red-600);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s;
}
.faq__item[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq__item summary:hover{color:var(--blue-600)}
.faq__item > div{padding:0 2.4rem 1.15rem 0; color:var(--navy-700); font-size:.99rem}
.faq__item > div p{margin:0}

/* ── formularios ─────────────────────────────────────────────────────────── */
.forms{padding:clamp(56px,8vw,104px) 0; background:var(--navy-900); position:relative}
.kicker__you{color:#F0787C; letter-spacing:.12em}
.forms__lede{max-width:48ch; color:#C6DAEC; font-size:clamp(1.02rem,1.4vw,1.16rem)}
.forms__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); margin-top:clamp(28px,4vw,46px); align-items:start}
.fcard{background:#fff; border-radius:var(--r); padding:clamp(22px,3vw,36px); box-shadow:var(--shadow-lg); scroll-margin-top:90px}
.fcard__head{display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; padding-bottom:1.3rem; border-bottom:1px solid var(--line)}
.fcard__ico{flex:none; width:38px}
.fcard__ico svg{width:100%; height:auto; display:block}
.fcard h3{font-family:var(--f-disp); font-weight:800; font-stretch:94%; font-size:clamp(1.14rem,2vw,1.42rem); text-transform:uppercase; color:var(--navy-900); margin-bottom:.4em}
.fcard__head p{font-size:.92rem; color:var(--muted); margin:0}

.form{display:grid; gap:.95rem}
.row{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
.field{display:grid; gap:.32rem; min-width:0}
.field label{font-family:var(--f-disp); font-weight:600; font-size:.79rem; letter-spacing:.04em; text-transform:uppercase; color:var(--navy-800)}
.field label span[aria-hidden]{color:var(--red-600)}
.opt{text-transform:none; letter-spacing:0; font-weight:400; color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%; font:400 1rem/1.4 var(--f-body); color:var(--ink);
  background:#fff; border:1.6px solid var(--line); border-radius:10px; padding:.72rem .85rem;
  transition:border-color .18s, box-shadow .18s;
}
.field textarea{resize:vertical; min-height:76px}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23274779' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .85rem center; background-size:11px; padding-right:2.2rem}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue-300)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(25,107,163,.14); outline:none}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--red-500); background:var(--red-050)}
.err{margin:0; font-size:.79rem; color:var(--red-600); min-height:0; display:none}
.err.on{display:block}
.err--block{margin:-.5rem 0 0}

.consent{display:flex; gap:.7rem; align-items:flex-start; background:var(--blue-050); border:1px solid var(--blue-100); border-radius:10px; padding:.85rem .95rem}
.consent input{flex:none; width:19px; height:19px; margin:.15rem 0 0; accent-color:var(--red-600)}
.consent label{font-size:.88rem; line-height:1.45; color:var(--navy-800)}
.consent label span{color:var(--red-600)}
.consent.is-bad{border-color:var(--red-500); background:var(--red-050)}

.privacy{font-size:.81rem; line-height:1.55; color:var(--muted); margin:0; padding-left:.9rem; border-left:2px solid var(--blue-200)}
.privacy strong{color:var(--navy-800)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.formmsg{margin:0; font-size:.9rem; line-height:1.5; display:none; border-radius:10px; padding:.8rem .95rem}
.formmsg.on{display:block}
.formmsg.ok{background:#EAF7EF; border:1px solid #B8E3C8; color:#186A38}
.formmsg.bad{background:var(--red-050); border:1px solid #F2C3C3; color:#9A1418}
.formmsg.info{background:var(--blue-050); border:1px solid var(--blue-200); color:var(--navy-800)}
.formmsg a{color:inherit; font-weight:700}

.forms__sla{
  margin:clamp(26px,3.6vw,42px) 0 0; color:#B9CDE2; font-size:.94rem; line-height:1.6;
  max-width:70ch;
}
.forms__sla strong{color:#fff}
.forms__sla a{color:var(--blue-300); font-weight:700}

/* ── cómo ayudar ─────────────────────────────────────────────────────────── */
.help{padding:clamp(56px,8vw,104px) 0; background:var(--white)}
.help__place{
  display:inline-flex; align-items:center; gap:.7rem; margin-bottom:clamp(24px,3vw,36px);
  background:var(--navy-900); color:#fff; border-radius:999px; padding:.8rem 1.5rem .8rem 1.15rem;
  font-family:var(--f-disp); font-weight:700; font-size:clamp(.9rem,1.4vw,1.05rem);
  box-shadow:var(--shadow);
}
.help__place span{flex:none; width:21px; color:var(--blue-300)}
.help__place svg{width:100%; height:auto; display:block}
.help__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
.help__list li{display:flex; gap:.95rem; align-items:flex-start; background:var(--blue-050); border:1px solid var(--blue-100); border-radius:var(--r); padding:clamp(18px,2.3vw,26px)}
.help__ico{flex:none; width:28px; color:var(--navy-800)}
.help__ico--wa{color:var(--wa)}
.help__ico svg{width:100%; height:auto; display:block}
.help__list b{display:block; font-family:var(--f-disp); font-weight:700; font-size:1rem; color:var(--navy-900); margin-bottom:.28em}
.help__list p{font-size:.9rem; color:var(--muted); margin:0}
.tel{font-weight:700; color:#157F3E; text-decoration-thickness:2px}
.help__info{margin-top:clamp(26px,3.6vw,44px); background:var(--red-050); border:1px solid #F3CFCF; border-radius:var(--r); padding:clamp(20px,2.8vw,30px)}
.help__info h3{font-family:var(--f-disp); font-weight:800; font-stretch:94%; font-size:1.02rem; text-transform:uppercase; color:var(--red-700); margin-bottom:.8em}
.help__info ul{margin:0; padding-left:1.2em; display:grid; gap:.4rem; font-size:.95rem; color:var(--navy-700)}
.help__info li::marker{color:var(--red-600)}

/* ── testimonios ─────────────────────────────────────────────────────────── */
.testi{padding:clamp(56px,8vw,104px) 0; background:var(--blue-050)}
.testi__lede{max-width:58ch; color:var(--navy-700)}
.testi__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); margin-top:clamp(28px,4vw,46px)}
.tcard{
  margin:0; background:#fff; border:1px solid var(--blue-100); border-radius:var(--r);
  padding:clamp(22px,2.8vw,32px); box-shadow:var(--shadow); position:relative;
}
.tcard::before{
  content:'“'; position:absolute; top:.05em; right:.35em;
  font-family:var(--f-disp); font-weight:800; font-size:4rem; line-height:1; color:var(--blue-100);
}
.tcard p{font-size:clamp(1rem,1.4vw,1.1rem); line-height:1.5; color:var(--navy-800); position:relative}
.tcard cite{display:block; margin-top:1.1em; font-style:normal; font-size:.79rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.tcard--soon{border-style:dashed; border-color:var(--blue-300); background:transparent; box-shadow:none}
.tcard--soon p{color:var(--muted)}
.tcard__slot{display:block; width:38px; height:3px; border-radius:2px; background:var(--blue-300); margin-bottom:.9rem}
.testi__cta{margin-top:clamp(24px,3vw,36px); font-size:.98rem; color:var(--navy-700)}

/* ── cierre ──────────────────────────────────────────────────────────────── */
.close{position:relative; padding:clamp(60px,9vw,110px) 0 clamp(90px,11vw,140px); background:var(--white); text-align:center; overflow:hidden}
.close__lede{font-family:var(--f-disp); font-weight:600; font-stretch:96%; font-size:clamp(1.2rem,2.6vw,2rem); line-height:1.25; color:var(--navy-900); max-width:24ch; margin-inline:auto}
.close__script{font-family:var(--f-script); font-size:clamp(2.6rem,7vw,5rem); line-height:1.1; color:var(--red-600); margin:.3em 0 .55em}
.close__cta{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:2}
.close__waves{position:absolute; left:0; right:0; bottom:-2px; width:100%; height:clamp(70px,8vw,120px); z-index:1}

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer{background:var(--navy-900); color:#B9CDE2; padding:clamp(46px,6vw,72px) 0 clamp(26px,3vw,36px)}
.footer__grid{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:clamp(26px,4vw,52px); padding-bottom:clamp(28px,3.6vw,44px); border-bottom:1px solid rgba(162,209,229,.18)}
.footer__script{font-family:var(--f-script); font-size:clamp(2.1rem,4.4vw,3rem); line-height:1.05; color:#fff; margin:0}
.footer__legado{font-family:var(--f-disp); font-weight:600; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:#F0787C; margin:.35em 0 1.1em}
.footer__tag{font-family:var(--f-script); font-size:1.4rem; color:var(--blue-300); margin:0}
.footer__links{display:grid; gap:.55rem; align-content:start}
.footer__links a{color:#DCE9F5; text-decoration:none; font-size:.92rem; width:fit-content; border-bottom:1px solid transparent}
.footer__links a:hover{border-bottom-color:var(--red-500)}
.footer__contact p{margin:0 0 .5em; font-size:.92rem}
.footer__contact a{color:#DCE9F5; text-decoration:none; border-bottom:1px solid rgba(162,209,229,.4)}
.footer__contact a:hover{border-bottom-color:var(--red-500); color:#fff}
.footer__label{font-family:var(--f-disp); font-weight:600; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-300); margin-bottom:.9em !important}
.footer__wa{font-weight:700}
.footer__meta{padding-top:clamp(20px,2.6vw,30px); display:grid; gap:.6rem}
.footer__meta p{margin:0; font-size:.79rem; color:#7E9CBC; line-height:1.6}
.footer__note{max-width:78ch}

/* ── reveals ─────────────────────────────────────────────────────────────── */
.js .reveal{opacity:0; transform:translateY(18px)}
.js .hero__title .line__in{transform:translateY(105%)}
/* red de seguridad: si la intro no completó, nada queda invisible */
.motion-off .reveal{opacity:1 !important; transform:none !important}
.motion-off .hero__title .line__in{transform:none !important}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .who__grid,.turn__grid,.forms__grid,.notice__grid,
  .chapter__intro,.vgrid--wide,.vgrid--aside{grid-template-columns:1fr}
  .triad,.learn__grid,.help__list,.testi__grid{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .vgrid--aside{align-items:start}
  .kicker{justify-content:flex-start}
  .hero__title{max-width:none}
}
@media (max-width:760px){
  .hero{min-height:100svh}
  .hero__inner{padding:clamp(96px,18vh,140px) 0 clamp(104px,16vh,150px)}
  /* el titular está escrito en 3 líneas: el tamaño se ajusta para que cada una
     quepa entera — 3 líneas limpias valen más que 4 líneas grandes */
  .hero__title{font-size:clamp(1.6rem,8.2vw,2.4rem); line-height:1.1; margin-bottom:.7em}
  .hero__eyebrow{font-size:.62rem; letter-spacing:.15em; gap:.4em}
  .hero__cta .btn{flex:1 1 100%}
  .hero__meta{font-size:.8rem}
  .hero__scroll span:first-child{display:none}
  .hero__scroll{right:auto; left:var(--pad); bottom:clamp(22px,4vh,36px)}
  .climax{min-height:clamp(400px,68vh,560px)}
  .nav__links{
    position:fixed; inset:56px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:.5rem var(--pad) 1.1rem;
    box-shadow:0 20px 40px -24px rgba(6,42,93,.5);
    transform:translateY(-130%); transition:transform .34s cubic-bezier(.4,0,.2,1);
  }
  .nav__links.on{transform:translateY(0)}
  /* el panel siempre es blanco: los enlaces van en navy aunque el nav flote sobre el video */
  .nav__links a:not(.btn),
  .nav__links.on a:not(.btn){color:var(--navy-800); text-shadow:none}
  .nav__links a:not(.btn){padding:.85rem 0; border-bottom:1px solid var(--line)}
  .nav__links a:not(.btn):hover{border-bottom-color:var(--line)}
  .nav__links .btn{margin-top:.9rem}
  .nav__burger{display:block}
  .triad,.learn__grid,.help__list,.testi__grid,.row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .count__inner{grid-template-columns:1fr}
  .count__dots{display:none}
  .notice__card{flex-direction:column; gap:1rem}
  .compat__tbl tbody th{width:auto}
}

/* ── movimiento reducido ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .js .reveal{opacity:1; transform:none}
  .js .hero__title .line__in{transform:none}
  .hero__scroll-line::after{animation:none !important; transform:translateY(30%)}
  html{scroll-behavior:auto}
}

/* ── impresión ───────────────────────────────────────────────────────────── */
@media print{
  .nav,.hero__veil,.hero__scroll,.hero__media,.climax__media,
  .turn__waves,.close__waves,.count__water{display:none}
  .hero{min-height:auto; background:#fff}
  .hero__title,.hero__eyebrow,.hero__meta{color:#000}
  body{color:#000}
}