/* ===== Historia animada de la portada ===== */
.story{display:flex;flex-direction:column;gap:0;text-align:center}
.story h2{font-size:clamp(26px,7vw,34px)}
.story .lead{max-width:34ch}

/* Intro de cine: noche, un arco de luz cruza el cielo y enciende el título */
.intro{position:relative;min-height:calc(100svh - 90px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px 0 50px}
.intro-arc{position:absolute;inset:-20px -20px auto;width:calc(100% + 40px);height:auto;pointer-events:none;overflow:visible}
.intro .arc{stroke-dasharray:520;stroke-dashoffset:520}
.intro.play .arc{animation:drawArc 1.8s .1s cubic-bezier(.45,0,.25,1) forwards, arcFade 2.4s 2.4s ease forwards}
@keyframes drawArc{to{stroke-dashoffset:0}}
@keyframes arcFade{to{opacity:.35}}
.intro-kicker,.intro-title,.intro-sub,.intro-scroll{opacity:0;position:relative}
.intro-kicker{margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.intro-title{font-family:var(--display);font-weight:400;font-variation-settings:"SOFT" 100;font-size:clamp(38px,11vw,58px);line-height:1.05;margin:0;text-wrap:balance}
.intro-title em{color:var(--gold);text-shadow:0 0 24px rgba(244,213,154,.65),0 0 60px rgba(248,176,166,.35)}
.intro-sub{margin:0;max-width:30ch;color:var(--muted);font-size:17px}
.intro-scroll{appearance:none;border:0;background:none;color:var(--starlight);font:500 14px var(--body);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;margin-top:18px}
.intro-scroll svg{width:26px;height:26px;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(6px)}}
.intro.play .intro-kicker{animation:fadeUp .7s .1s ease forwards}
.intro.play .intro-title{animation:titleIn 1.1s .35s cubic-bezier(.2,.8,.2,1) forwards}
.intro.play .intro-sub{animation:fadeUp .9s 1s ease forwards}
.intro.play .intro-scroll{animation:fadeUp .9s 1.4s ease forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes titleIn{from{opacity:0;filter:blur(10px);transform:scale(.96)}to{opacity:1;filter:none;transform:none}}

/* Capítulos */
.chapter{display:flex;flex-direction:column;align-items:center;gap:14px;padding:46px 0 30px}
.chapter > *:not(.frame){opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease}
.chapter.play > *:not(.frame){opacity:1;transform:none}
.chapter.play > *:nth-child(2){transition-delay:.15s}.chapter.play > *:nth-child(3){transition-delay:.3s}.chapter.play > *:nth-child(4){transition-delay:.45s}
.ch-num{margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.frame{width:100%;max-width:460px;border-radius:28px;overflow:hidden;position:relative;opacity:.0;transform:scale(.97);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(244,213,154,.22),0 0 60px -20px rgba(244,213,154,.35)}
.chapter.play .frame{opacity:1;transform:none}
.frame svg{display:block;width:100%;height:auto}
.tw{animation:twk 3.4s ease-in-out infinite}
@keyframes twk{50%{opacity:.25}}

/* Cap. 1: Elena llega caminando con su maleta */
.walker{transform:translateX(-80px)}
.chapter.play .walker{animation:walkIn 6s .4s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes walkIn{to{transform:translateX(150px)}}
.waddle{transform-box:fill-box;transform-origin:50% 100%}
.chapter.play .waddle{animation:waddle .5s ease-in-out 12 alternate}
@keyframes waddle{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.snow circle{animation:snow 6s linear infinite}
@keyframes snow{from{transform:translateY(-10px)}to{transform:translateY(110px);opacity:0}}
.city-glow{animation:glowPulse 4s ease-in-out infinite}
@keyframes glowPulse{50%{opacity:.25}}

/* Cap. 2: sola bajo la lluvia, la luz del farol la cuida */
.rain path{animation:rain 1.1s linear infinite}
@keyframes rain{from{transform:translate(0,-20px)}to{transform:translate(-8px,60px);opacity:0}}
.lamp-cone{animation:lamp 3s ease-in-out infinite}
@keyframes lamp{50%{opacity:.75}}
.breathe{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.03,.98)}}

/* Cap. 3: llegan los pelícanos y se enciende la red */
.fly,.land,.net-lines,.net-glow,.net-dots circle,.hearts path{opacity:0}
.flyer .w-front,.flyer .w-back{transform-box:fill-box;transform-origin:100% 100%;animation:flap .45s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
.chapter.play .fly-a{animation:flyA 1.8s .2s ease-out forwards}
.chapter.play .fly-b{animation:flyB 1.8s .5s ease-out forwards}
@keyframes flyA{0%{opacity:1;transform:translate(-60px,40px)}80%{opacity:1;transform:translate(66px,170px)}100%{opacity:0;transform:translate(80px,192px)}}
@keyframes flyB{0%{opacity:1;transform:translate(420px,30px)}80%{opacity:1;transform:translate(294px,170px)}100%{opacity:0;transform:translate(280px,192px)}}
.chapter.play .land-a{animation:landIn .6s 1.8s ease-out forwards}
.chapter.play .land-b{animation:landIn .6s 2.1s ease-out forwards}
@keyframes landIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.net-lines path{stroke-dasharray:900;stroke-dashoffset:900}
.chapter.play .net-lines{opacity:.85}
.chapter.play .net-lines path{animation:drawArc 2.4s 2.4s ease forwards}
.chapter.play .net-glow{animation:fadeIn 2s 2.4s ease forwards}
@keyframes fadeIn{to{opacity:.8}}
.chapter.play .net-dots circle{animation:pop .6s ease forwards}
@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
.net-dots circle{transform-box:fill-box;transform-origin:center}
.chapter.play .hearts path{animation:heartUp 3s ease-out infinite}
@keyframes heartUp{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-40px)}}
.happy{transform-box:fill-box;transform-origin:50% 100%}
.chapter.play .happy{animation:hop .5s 2.6s ease-in-out 4 alternate}
@keyframes hop{to{transform:translateY(-8px)}}

/* La vida real */
.reel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:4px -20px 0;padding:14px 20px 18px;width:calc(100% + 40px);scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.polaroid{flex:none;width:62%;max-width:260px;margin:0;padding:8px 8px 10px;background:#FFF6EC;border-radius:10px;scroll-snap-align:center;transform:rotate(var(--r));box-shadow:0 18px 40px -16px rgba(0,0,0,.8),0 0 40px -14px rgba(244,213,154,.45)}
.polaroid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.polaroid figcaption{margin-top:8px;font-family:var(--script);font-size:22px;line-height:1;color:#2b3a5e}
.trust{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.trust li{display:flex;flex-direction:column;align-items:center;padding:0 4px;line-height:1.25}
.trust li + li{border-left:1px solid rgba(244,213,154,.22)}
.trust b{font-family:var(--display);font-weight:500;font-size:19px;color:var(--gold)}
.trust span{font-size:12.5px;color:var(--muted)}
.programs{display:grid;gap:14px;text-align:left;width:100%;margin-top:6px}
.program{display:flex;gap:14px;align-items:center}
.program img{width:72px;height:72px;flex:none;object-fit:cover;border-radius:18px}
.program b{display:block;font-family:var(--display);font-weight:500;font-size:17px;line-height:1.25}
.program span{display:block;font-size:14px;line-height:1.4;color:var(--muted)}

/* Tu capítulo: las dos formas, igual de claras */
.way{appearance:none;cursor:pointer;width:100%;display:flex;gap:14px;align-items:center;text-align:left;padding:18px;border-radius:24px;font:inherit;color:var(--starlight);transition:transform .25s}
.way:hover{transform:translateY(-2px)}
.way b{display:block;font-family:var(--display);font-weight:500;font-size:21px}
.way small{display:block;font-size:14px;line-height:1.4;color:var(--muted);margin-top:2px}
.way-ic{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px}
.way.gold{background:linear-gradient(150deg,rgba(244,213,154,.22),rgba(27,42,71,.6));border:1.5px solid rgba(244,213,154,.6);box-shadow:0 0 40px -16px rgba(244,213,154,.7)}
.way.gold .way-ic{background:linear-gradient(135deg,#FFF6EC,var(--gold));color:var(--coral)}
.way.rose{background:linear-gradient(150deg,rgba(248,176,166,.22),rgba(27,42,71,.6));border:1.5px solid rgba(248,176,166,.6);box-shadow:0 0 40px -16px rgba(248,176,166,.7)}
.way.rose .way-ic{background:linear-gradient(135deg,var(--blush),var(--coral));color:#fff}
.way:focus-visible,.dock-btn:focus-visible,.intro-scroll:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.founder{margin:10px 0 0;display:grid;justify-items:center;gap:10px;padding:20px 16px;border-radius:22px;background:rgba(255,246,236,.05);border:1px solid rgba(244,213,154,.2)}
.founder img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(244,213,154,.5)}
.founder blockquote{margin:0;font-family:var(--display);font-size:18px;line-height:1.4}
.founder blockquote em{color:var(--blush)}
.founder figcaption{font-size:13px;color:var(--muted)}

/* Barra fija: donar o compartir, siempre a la mano */
.dock{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translate(-50%,140%);z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(calc(100% - 24px),420px);padding:8px;border-radius:999px;
  background:rgba(12,20,38,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(244,213,154,.3);box-shadow:0 14px 40px -12px rgba(0,0,0,.8);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.dock.show{transform:translate(-50%,0)}
.dock-btn{appearance:none;border:0;cursor:pointer;border-radius:999px;padding:14px 10px;font:700 15px var(--body)}
.dock-btn.donate{background:linear-gradient(135deg,var(--blush),var(--coral));color:#fff}
.dock-btn.share{background:rgba(244,213,154,.14);color:var(--gold);border:1px solid rgba(244,213,154,.5)}
.story-on .app{padding-bottom:96px}
.story-on .star-wrap{display:none}



.glow-egg .e-egg{filter:drop-shadow(0 0 0 rgba(255,226,170,0))}
.chapter.play .glow-egg .e-egg{animation:eggGlow 2.4s 3s ease-in-out infinite}
@keyframes eggGlow{50%{filter:drop-shadow(0 0 6px rgba(255,226,170,.95))}}
.chapter.play .polaroid{animation:floaty 5s ease-in-out infinite}
.chapter.play .polaroid:nth-child(2n){animation-delay:-2.5s}
@keyframes floaty{50%{transform:rotate(var(--r)) translateY(-6px)}}

.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.tile{margin:0;border-radius:18px;overflow:hidden;background:rgba(255,246,236,.06);box-shadow:0 0 0 1px rgba(244,213,154,.25),0 14px 30px -16px rgba(0,0,0,.8);display:flex;flex-direction:column}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.tile figcaption{padding:9px 8px 11px;text-align:left}
.tile b{display:block;font-family:var(--display);font-weight:500;font-size:15px;line-height:1.15;color:var(--starlight)}
.tile span{display:block;margin-top:3px;font-size:11.5px;line-height:1.3;color:var(--gold)}
.trust-line{margin:0;font-size:13px;letter-spacing:.04em;color:var(--gold)}

.ch-num.sub{margin-top:10px}
.way-ic svg{width:34px;height:34px;overflow:visible}
.way.gold .way-ic{background:radial-gradient(circle at 35% 30%,#3a4f7d,#1c2a4b);box-shadow:0 0 0 1.5px rgba(244,213,154,.7),0 0 22px rgba(244,213,154,.55)}
.way.rose .way-ic{background:radial-gradient(circle at 35% 30%,#F8B0A6,#F16062);box-shadow:0 0 0 1.5px rgba(255,227,220,.7),0 0 22px rgba(248,176,166,.6)}
.way-ic .spk{transform-box:fill-box;transform-origin:center;animation:spk 2.2s ease-in-out infinite}
.way-ic .spk.s2{animation-delay:1.1s}
@keyframes spk{0%,100%{opacity:.2;transform:scale(.5)}50%{opacity:1;transform:scale(1.15)}}
.way-ic .wave{animation:wave 1.8s ease-in-out infinite}
.way-ic .wave.w2{animation-delay:.3s}
@keyframes wave{0%,100%{opacity:.35}50%{opacity:1}}