/* Vocelle · Neon Whisper */
:root{
  --bg:#05060F; --navy:#0A0F2C; --coral:#FF4D6D; --blush:#FFB3C1; --lav:#B8A1FF;
  --ink:#F5F2FB; --mute:#B4B2CE; --dim:#7F7D9C;
  --line:rgba(184,161,255,.16); --glass:rgba(13,16,44,.55);
  --display:"Gabarito",system-ui,sans-serif; --body:"Onest",system-ui,sans-serif; --mono:"DM Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --pad:clamp(20px,5vw,72px);
  --r:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto;scroll-behavior:auto}
body{font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-style:normal;color:var(--coral)}
.mono{font-family:var(--mono);font-feature-settings:"zero" 0;letter-spacing:.01em}
::selection{background:var(--coral);color:#14020A}
:focus-visible{outline:2px solid var(--blush);outline-offset:4px;border-radius:8px}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--coral);color:#14020A;padding:10px 16px;border-radius:12px;font-weight:600;transition:top .2s}
.skip:focus{top:16px}

/* ── capas fijas ── */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:
  radial-gradient(120% 80% at 70% 40%,rgba(255,77,109,.16),transparent 60%),
  radial-gradient(90% 70% at 20% 90%,rgba(184,161,255,.14),transparent 60%),var(--bg);opacity:0;transition:opacity 1.8s ease}
.scene-on #scene{opacity:1}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--bg);opacity:0;transition:opacity .6s linear}
.grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-2%,3%)}80%{transform:translate(4%,1%)}100%{transform:translate(0,0)}}
main,.foot{position:relative;z-index:3}
.nav{z-index:20}

/* ── cursor ── */
.cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:none;opacity:0;transition:opacity .4s}
.cursor.is-live{opacity:1}
.cursor i,.cursor b{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%);will-change:transform}
.cursor i{width:8px;height:8px;background:var(--coral);box-shadow:0 0 14px 2px rgba(255,77,109,.9)}
.cursor b{width:38px;height:38px;border:1px solid rgba(255,179,193,.55);transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s}
.cursor.is-hot b{width:64px;height:64px;background:rgba(255,77,109,.12);border-color:rgba(255,77,109,.9)}
@media (hover:hover) and (pointer:fine){html.has-cursor .cursor{display:block}html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor input{cursor:none}}

/* ── logo ── */
.logo{display:inline-flex;align-items:flex-end;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.035em;line-height:1;color:#fff}
.logo__bars{display:inline-flex;align-items:flex-end;gap:.085em;margin:0 .05em 0 .045em;height:1.02em;transform:translateY(-.085em)}
.logo__bars i{display:block;width:.17em;border-radius:.1em;background:linear-gradient(180deg,#FF8FA3,var(--coral) 55%,#F03A5F);box-shadow:0 0 .35em rgba(255,77,109,.95),0 0 1em rgba(255,77,109,.55);transform-origin:50% 100%;animation:meter 1.9s var(--ease) infinite}
.logo__bars i:nth-child(1){height:.74em;animation-delay:-.4s}
.logo__bars i:nth-child(2){height:1em;animation-duration:2.3s}
@keyframes meter{0%,100%{transform:scaleY(1)}18%{transform:scaleY(.78)}34%{transform:scaleY(1.04)}52%{transform:scaleY(.86)}70%{transform:scaleY(1)}84%{transform:scaleY(.92)}}
.logo--xl{font-size:clamp(54px,9vw,112px)}

/* ── nav ── */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 12px 10px 22px;border-radius:999px;border:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s,transform .5s var(--ease)}
.nav.is-solid{background:rgba(8,10,30,.62);border-color:var(--line);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.nav.is-away{transform:translate(-50%,-140%)}
.nav__links{display:flex;gap:30px;font-size:15px;color:var(--mute)}
.nav__links a{position:relative;padding:6px 0;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--coral);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease);box-shadow:0 0 10px var(--coral)}
.nav__links a:hover,.nav__links a.is-here{color:#fff}
.nav__links a:hover::after,.nav__links a.is-here::after{transform:scaleX(1)}

/* ── botones ── */
.btn{--bgc:var(--coral);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;border-radius:999px;background:var(--bgc);color:#17020B;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,179,193,.5) inset,0 10px 40px -8px rgba(255,77,109,.75),0 0 80px -20px rgba(255,77,109,.9);transition:box-shadow .35s,background .35s,color .35s;will-change:transform}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.btn:hover{background:#FF6480;box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 14px 50px -6px rgba(255,77,109,.95),0 0 110px -10px rgba(255,77,109,1)}
.btn:hover svg{transform:translateX(4px)}
.btn--sm{padding:12px 20px;font-size:15px}
.btn--lg{padding:21px 36px;font-size:20px}
.btn--ghost{background:rgba(255,255,255,.04);color:#fff;box-shadow:0 0 0 1px rgba(184,161,255,.35) inset;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--ghost:hover{background:rgba(184,161,255,.14);box-shadow:0 0 0 1px rgba(184,161,255,.8) inset,0 0 50px -12px var(--lav)}
.btn--line{background:transparent;color:#fff;box-shadow:0 0 0 1px rgba(255,179,193,.35) inset;width:100%}
.btn--line:hover{background:var(--coral);color:#17020B}

/* ── tipografía común ── */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blush)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 12px 2px var(--coral);animation:blink 1.6s ease-in-out infinite;flex:none}
@keyframes blink{50%{opacity:.35}}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(34px,5.2vw,68px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.h2 em{text-shadow:0 0 34px rgba(255,77,109,.55)}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--mute);max-width:56ch;text-wrap:pretty}
.fine{font-size:13.5px;color:var(--dim)}
.pill{display:inline-block;padding:3px 11px;border-radius:999px;border:1px solid rgba(180,178,206,.4);font-size:.86em;color:var(--mute);transition:all .5s var(--ease)}
.pill--on,.pill.is-on{border-color:var(--coral);color:#fff;background:rgba(255,77,109,.18);box-shadow:0 0 18px -2px rgba(255,77,109,.8)}
.tag{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--mute)}
.tag--on{border-color:rgba(255,77,109,.7);color:var(--blush);background:rgba(255,77,109,.1)}
.tag--soon{border-color:rgba(184,161,255,.5);color:var(--lav)}
.tag--no{border-color:rgba(255,77,109,.55);color:var(--blush);background:rgba(255,77,109,.08)}

/* ── aparición ── */
.reveal{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.is-in{opacity:1;transform:none;filter:none}

/* ── tarjetas de vidrio ── */
.card{position:relative;border-radius:var(--r);background:linear-gradient(160deg,rgba(20,24,62,.62),rgba(8,10,30,.62));border:1px solid var(--line);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);padding:clamp(22px,2.4vw,34px);overflow:hidden;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),rgba(255,77,109,.2),transparent 60%);opacity:0;transition:opacity .4s}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,-20%),rgba(255,179,193,.9),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover::before,.card:hover::after{opacity:1}
.card h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,1.9vw,26px);line-height:1.12;letter-spacing:-.02em;margin-bottom:10px}
.card p{color:var(--mute);font-size:16px}

/* ───────── HERO ───────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px var(--pad) 110px}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,15,.72),rgba(5,6,15,.35) 42%,transparent 62%);pointer-events:none}
.hero__inner{max-width:680px;position:relative}
.hero__title{font-family:var(--display);font-weight:800;font-size:clamp(46px,7.2vw,104px);line-height:.94;letter-spacing:-.045em;margin:22px 0 26px;text-wrap:balance}
.hero__title em{position:relative;white-space:nowrap;text-shadow:0 0 42px rgba(255,77,109,.7),0 0 120px rgba(255,77,109,.45)}
.hero__title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.hero__title .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i)*70ms + .15s)}
.is-ready .hero__title .w>span{transform:none}
.is-done .hero__title .w{overflow:visible}
.uwave{position:absolute;left:-1%;bottom:-.2em;width:102%;height:.26em;overflow:visible;opacity:0;transition:opacity 1s ease .2s;pointer-events:none}
.is-done .uwave{opacity:1}
.uwave path{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(255,77,109,.9))}
.hero__sub{font-size:clamp(17px,1.55vw,21px);color:#D9D6EC;max-width:50ch;text-wrap:pretty;text-shadow:0 1px 20px rgba(5,6,15,.9)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero .eyebrow,.hero__sub,.hero__cta,.live{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.is-ready .hero .eyebrow{opacity:1;transform:none;transition-delay:.1s}
.is-ready .hero__sub{opacity:1;transform:none;transition-delay:.75s}
.is-ready .hero__cta{opacity:1;transform:none;transition-delay:.9s}
.is-ready .live{opacity:1;transform:none;transition-delay:1.15s}

.live-pos{position:absolute;right:var(--pad);bottom:clamp(70px,10vh,120px)}
.live{display:flex;align-items:center;gap:22px;padding:18px 26px 18px 22px;border-radius:24px;background:rgba(10,12,36,.58);border:1px solid rgba(255,77,109,.35);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 0 60px -18px rgba(255,77,109,.8),0 0 0 1px rgba(255,255,255,.04) inset}
.live__wave{display:flex;align-items:center;gap:3px;height:44px}
.live__wave i{width:3px;border-radius:3px;background:var(--coral);box-shadow:0 0 8px var(--coral);height:20%;animation:wv 1.1s ease-in-out infinite}
.live__wave i:nth-child(2){animation-delay:-.2s}.live__wave i:nth-child(3){animation-delay:-.55s}.live__wave i:nth-child(4){animation-delay:-.1s}.live__wave i:nth-child(5){animation-delay:-.7s}.live__wave i:nth-child(6){animation-delay:-.35s}.live__wave i:nth-child(7){animation-delay:-.85s}
@keyframes wv{0%,100%{height:18%}50%{height:100%}}
.live.is-idle .live__wave i{animation-play-state:paused;height:14%}
.live__main{display:flex;flex-direction:column;gap:2px;padding-right:22px;border-right:1px solid var(--line);min-width:168px}
.live__label{font-size:14px;color:var(--mute)}
.live__time{font-family:var(--display);font-size:42px;font-weight:700;line-height:1;color:#fff;letter-spacing:-.02em}
.live__meta{display:flex;flex-direction:column;gap:7px;font-size:14px;color:#DAD7EE}
.live__meta li{display:flex;align-items:center;gap:9px}
.live__meta svg{width:17px;height:17px;fill:none;stroke:var(--blush);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

.hero__scroll{position:absolute;left:var(--pad);bottom:30px;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.hero__scroll i{width:54px;height:1px;background:linear-gradient(90deg,var(--coral),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:slide 2.2s var(--ease) infinite}
@keyframes slide{60%,100%{transform:translateX(100%)}}

/* ───────── HISTORIA ───────── */
.story{position:relative}
.story__pin{height:100svh;display:grid;grid-template-rows:auto 1fr;padding:96px var(--pad) 36px;gap:10px;overflow:hidden}
.story__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.clock{text-align:right;line-height:1}
.clock__time{display:block;font-family:var(--display);font-size:clamp(46px,7vw,104px);font-weight:700;letter-spacing:-.03em;color:#fff;text-shadow:0 0 40px rgba(255,77,109,.55);font-variant-numeric:tabular-nums}
.clock__cap{display:block;margin-top:8px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.story__stage{display:grid;grid-template-columns:minmax(0,1fr) auto 46px;align-items:center;gap:clamp(20px,5vw,90px);min-height:0}
.steps{display:grid;align-items:center;max-width:520px;position:relative;isolation:isolate}
.steps::before{content:"";position:absolute;inset:-22% -26% -22% -40%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(5,6,15,.8),rgba(5,6,15,.52) 55%,transparent)}
.step{grid-area:1/1;opacity:0;transform:translateY(40px);filter:blur(8px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease);pointer-events:none}
.step.is-on{opacity:1;transform:none;filter:none;pointer-events:auto}
.step.is-past{transform:translateY(-40px)}
.step__n{display:inline-block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:16px;padding:6px 12px;border:1px solid rgba(255,77,109,.4);border-radius:999px;background:rgba(255,77,109,.08)}
.step h2{text-shadow:0 2px 30px rgba(5,6,15,.8);font-family:var(--display);font-weight:700;font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.035em;margin-bottom:18px}
.step p{font-size:clamp(16px,1.35vw,19px);color:#CFCBE6;max-width:44ch;text-wrap:pretty}

.device{position:relative;perspective:1400px;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:clamp(11px,1.58svh,16px)}
.device__who{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blush);min-height:1.4em;transition:opacity .3s}
.phone{position:relative;width:18.6em;height:38em;transform-style:preserve-3d;transform:rotateY(var(--ry,-16deg)) rotateX(var(--rx,6deg)) rotateZ(var(--rz,1.5deg));will-change:transform}
.phone__body{position:absolute;inset:0;border-radius:3em;background:linear-gradient(165deg,#12143A 0%,#070818 60%,#0B0D28 100%);border:1px solid rgba(255,179,193,.28);box-shadow:0 0 0 .42em #0B0C22,0 0 0 calc(.42em + 1px) rgba(255,179,193,.38),-1.2em 1.6em 0 -.3em rgba(5,6,15,.55),0 0 6em -1em rgba(255,77,109,.55),0 3em 6em -2em #000;overflow:hidden}
.phone__body::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.13),transparent 28%,transparent 70%,rgba(184,161,255,.1));pointer-events:none}
.phone__glow{position:absolute;left:-30%;right:-30%;bottom:-18%;height:30%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,77,109,.55),transparent 70%);filter:blur(22px);transform:translateZ(-80px) rotateX(80deg);pointer-events:none}
.phone__island{position:absolute;top:.85em;left:50%;transform:translateX(-50%);width:5.6em;height:1.55em;border-radius:1em;background:#020208;z-index:3}
.phone__bar{position:absolute;top:1.05em;left:1.9em;right:1.9em;display:flex;justify-content:space-between;align-items:center;font-size:.78em;color:#fff;z-index:3}
.phone__sig{display:flex;align-items:flex-end;gap:2px;height:.9em}
.phone__sig i{width:3px;background:#fff;border-radius:1px}
.phone__sig i:nth-child(1){height:30%}.phone__sig i:nth-child(2){height:50%}.phone__sig i:nth-child(3){height:75%}.phone__sig i:nth-child(4){height:100%}
.screen{position:absolute;inset:3.4em 1.15em 1.3em;display:flex;flex-direction:column;justify-content:center;gap:1em;opacity:0;transform:translateY(1.2em) scale(.96);filter:blur(6px);transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease);pointer-events:none}
.screen.is-on{opacity:1;transform:none;filter:none}

.formcard{background:#F6F3FA;color:#14122A;border-radius:1.4em;padding:1.3em 1.2em;box-shadow:0 1em 3em -1em rgba(184,161,255,.5)}
.formcard__t{font-family:var(--display);font-weight:700;font-size:1.25em;margin-bottom:.8em;letter-spacing:-.02em}
.field{border:1px solid #D9D5EA;border-radius:.75em;padding:.5em .8em;margin-bottom:.55em;display:flex;flex-direction:column;line-height:1.25}
.field span{font-size:.66em;letter-spacing:.06em;text-transform:uppercase;color:#77749A}
.field b{font-size:.95em;font-weight:600}
.formcard__btn{margin-top:.8em;display:flex;align-items:center;justify-content:center;gap:.45em;background:var(--coral);color:#17020B;font-family:var(--display);font-weight:700;border-radius:999px;padding:.72em;font-size:.95em}
.formcard__btn svg,.slot b svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.screen__note{text-align:center;font-size:.86em;color:var(--mute)}

.screen--ring{align-items:center;text-align:center;gap:.5em}
.ring{position:relative;width:8.6em;height:8.6em;display:grid;place-items:center;margin-bottom:1.2em}
.ring>span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,77,109,.7);animation:ringp 2.2s ease-out infinite;opacity:0}
.ring>span:nth-child(2){animation-delay:.7s}.ring>span:nth-child(3){animation-delay:1.4s}
@keyframes ringp{0%{transform:scale(.45);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.ring__logo{display:flex;align-items:flex-end;gap:.5em;height:3.6em;animation:buzz .9s ease-in-out infinite}
.ring__logo i{width:.95em;border-radius:.5em;background:linear-gradient(180deg,#FF8FA3,var(--coral));box-shadow:0 0 1.4em var(--coral)}
.ring__logo i:first-child{height:70%}.ring__logo i:last-child{height:100%}
@keyframes buzz{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}
.ring__name{font-family:var(--display);font-weight:700;font-size:1.75em;letter-spacing:-.03em;line-height:1.1}
.ring__sub{font-size:.86em;color:var(--mute)}
.ring__btns{display:flex;justify-content:space-between;width:100%;padding:0 1.6em;margin-top:2.6em;font-size:.78em;color:#DAD7EE}
.ring__btns div{display:flex;flex-direction:column;align-items:center;gap:.6em}
.rb{width:4.4em;height:4.4em;border-radius:50%;display:grid;place-items:center}
.rb svg{width:2em;height:2em;fill:#fff}
.rb--no{background:#F0425A}.rb--yes{background:#21C063;box-shadow:0 0 0 0 rgba(33,192,99,.6);animation:yes 1.4s ease-out infinite}
@keyframes yes{100%{box-shadow:0 0 0 1.2em rgba(33,192,99,0)}}

.screen--talk{justify-content:flex-start;padding-top:.8em;gap:.7em}
.talk__state{display:flex;align-items:center;gap:.6em;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--blush)}
.talk__wave{width:100%;height:6.4em;border-radius:1em;background:rgba(255,77,109,.06);border:1px solid rgba(255,77,109,.22)}
.bubbles{display:flex;flex-direction:column;gap:.6em}
.bub{font-size:.84em;line-height:1.35;padding:.7em .9em;border-radius:1.15em;max-width:88%;opacity:0;transform:translateY(.8em) scale(.96);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.bub--a{background:rgba(255,77,109,.16);border:1px solid rgba(255,77,109,.4);border-bottom-left-radius:.3em;align-self:flex-start;color:#fff}
.bub--b{background:rgba(184,161,255,.16);border:1px solid rgba(184,161,255,.4);border-bottom-right-radius:.3em;align-self:flex-end;color:#fff}
.screen--talk.is-on .bub{opacity:1;transform:none}
.screen--talk.is-on .bub:nth-child(1){transition-delay:.25s}.screen--talk.is-on .bub:nth-child(2){transition-delay:.85s}.screen--talk.is-on .bub:nth-child(3){transition-delay:1.45s}

.screen--cal{justify-content:flex-start;padding-top:1em;gap:.7em}
.cal__month{font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cal__grid{display:flex;flex-direction:column;gap:.5em}
.slot{position:relative;display:flex;align-items:center;gap:.8em;min-height:3.3em;padding:.6em .8em;border-radius:.9em;background:rgba(184,161,255,.08);border:1px solid rgba(184,161,255,.18);font-size:.86em;color:var(--mute)}
.slot span{font-size:.86em;color:var(--dim);width:2.8em;flex:none}
.slot i{font-style:normal;line-height:1.2}
.slot--free{background:transparent;border-style:dashed}
.slot--new{min-height:4.6em;background:rgba(255,77,109,.18);border-color:var(--coral);color:#fff;box-shadow:0 0 2.2em -.5em var(--coral);transform:scale(.9);opacity:0;transition:transform .6s var(--ease) .3s,opacity .6s var(--ease) .3s}
.screen--cal.is-on .slot--new{transform:none;opacity:1}
.slot b{margin-left:auto;width:1.9em;height:1.9em;border-radius:50%;background:var(--coral);color:#17020B;display:grid;place-items:center;flex:none;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .8s}
.screen--cal.is-on .slot b{transform:none}
.cal__ok{margin-top:.6em;font-size:.95em;display:flex;align-items:center;gap:.6em}

.screen--note{justify-content:flex-start;padding-top:1.2em;gap:1.3em}
.lock{text-align:center;display:flex;flex-direction:column;gap:.3em}
.lock__d{font-size:.68em;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.lock__t{font-family:var(--display);font-weight:700;font-size:4.4em;line-height:.95;letter-spacing:-.03em;color:#fff;text-shadow:0 0 1em rgba(184,161,255,.5)}
.notif{background:rgba(18,20,56,.92);border:1px solid rgba(255,179,193,.3);border-radius:1.3em;padding:1em;box-shadow:0 1em 3em -1em rgba(255,77,109,.6);transform:translateY(-140%);transition:transform .7s cubic-bezier(.2,1.2,.3,1) .15s}
.screen--note.is-on .notif{transform:none}
.notif__top{display:flex;align-items:center;gap:.6em;font-size:.8em;margin-bottom:.7em}
.notif__top .mono{margin-left:auto;color:var(--dim);font-size:.9em}
.notif__ico{display:flex;align-items:flex-end;gap:2px;width:1.7em;height:1.7em;border-radius:.45em;background:#05060F;padding:.32em .42em;border:1px solid rgba(255,77,109,.5)}
.notif__ico i{flex:1;background:var(--coral);border-radius:2px}.notif__ico i:first-child{height:70%}.notif__ico i:last-child{height:100%}
.notif__h{font-family:var(--display);font-weight:700;font-size:1.08em;letter-spacing:-.01em;margin-bottom:.5em;line-height:1.2}
.notif ul{display:flex;flex-direction:column;gap:.4em;font-size:.82em;color:#D5D2EA;line-height:1.35}
.notif li{padding-left:1em;position:relative}
.notif li::before{content:"";position:absolute;left:0;top:.55em;width:.35em;height:.35em;border-radius:50%;background:var(--lav)}
.player{display:flex;align-items:center;gap:.7em;margin-top:.9em;padding:.55em .7em;border-radius:999px;background:rgba(255,77,109,.12);border:1px solid rgba(255,77,109,.35);font-size:.78em}
.player__play{width:2.2em;height:2.2em;border-radius:50%;background:var(--coral);display:grid;place-items:center;flex:none}
.player__play svg{width:1.1em;height:1.1em;fill:#17020B}
.player__bars{flex:1;height:1.6em;background:repeating-linear-gradient(90deg,var(--blush) 0 2px,transparent 2px 5px);-webkit-mask:linear-gradient(90deg,#000 0 38%,rgba(0,0,0,.35) 38%);mask:linear-gradient(90deg,#000 0 38%,rgba(0,0,0,.35) 38%);clip-path:polygon(0 40%,6% 20%,12% 55%,18% 10%,25% 45%,31% 25%,38% 60%,45% 5%,52% 40%,58% 22%,65% 55%,72% 15%,80% 45%,87% 28%,94% 50%,100% 35%,100% 65%,94% 50%,87% 72%,80% 55%,72% 85%,65% 45%,58% 78%,52% 60%,45% 95%,38% 40%,31% 75%,25% 55%,18% 90%,12% 45%,6% 80%,0 60%)}

.rail{position:relative;height:min(52svh,440px);width:2px;background:rgba(184,161,255,.2);justify-self:center;border-radius:2px}
.rail__fill{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(var(--coral),var(--lav));transform-origin:50% 0;transform:scaleY(var(--p,0));box-shadow:0 0 14px var(--coral)}
.rail i{position:absolute;left:50%;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid rgba(184,161,255,.5);transform:translate(-50%,-50%);transition:all .4s var(--ease)}
.rail i:nth-of-type(1){top:0}.rail i:nth-of-type(2){top:25%}.rail i:nth-of-type(3){top:50%}.rail i:nth-of-type(4){top:75%}.rail i:nth-of-type(5){top:100%}
.rail i.is-on{background:var(--coral);border-color:var(--blush);box-shadow:0 0 16px 3px var(--coral)}

/* ───────── VENTANAS ───────── */
.windows{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(32px,7vw,120px);padding:clamp(90px,14vh,170px) var(--pad)}
.windows__art{--w:min(440px,38vw);position:relative;width:var(--w);height:calc(var(--w)*1.2)}
.win{position:absolute;overflow:hidden;border-radius:999px;border:1px solid rgba(255,179,193,.55);box-shadow:0 0 0 6px rgba(255,77,109,.08),0 0 90px -10px rgba(255,77,109,.75),0 0 30px -4px rgba(255,77,109,.6) inset}
.win--a{left:6%;width:38%;top:22%;bottom:0;--l:.06;--t:.264}
.win--b{left:56%;width:38%;top:0;bottom:0;--l:.56;--t:0}
.win img{position:absolute;max-width:none;width:auto;height:calc(var(--w)*1.2*1.24);left:calc(var(--w)*(-.82 - var(--l)));top:calc(var(--w)*(-.144 - var(--t)));transform:translate3d(0,var(--py,0px),0);will-change:transform}
.win::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,77,109,.16),transparent 40%,rgba(5,6,15,.55));pointer-events:none}
.windows__copy{display:flex;flex-direction:column;gap:22px;max-width:640px}

/* ───────── SECCIONES ───────── */
.sec{padding:clamp(80px,12vh,150px) var(--pad);max-width:1320px;margin:0 auto}
.sec__head{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(36px,5vw,64px);max-width:900px}

.who{display:grid;grid-template-columns:1.25fr 1fr;gap:20px}
.who .tag{margin-bottom:18px}
.who__yes{border-color:rgba(255,77,109,.38);box-shadow:0 0 90px -40px var(--coral)}
.ticks{margin-top:22px;display:flex;flex-direction:column;gap:12px;font-size:16px;color:#E2DFF2}
.ticks li{position:relative;padding-left:32px}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317020B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 0 14px -2px var(--coral)}
.ticks--mute{color:var(--mute)}
.ticks--mute li::before{background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8A1FF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center/14px no-repeat;border:1px solid rgba(184,161,255,.5);box-shadow:none}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.bento__a{grid-column:span 4;display:flex;flex-direction:column;justify-content:flex-end;min-height:330px}
.bento__b{grid-column:span 2}
.bento__c,.bento__d,.bento__e{grid-column:span 2}
.bento .card{display:flex;flex-direction:column;justify-content:flex-end;min-height:270px}
.mini-clock{position:absolute;top:18px;right:26px;font-family:var(--display);font-size:clamp(84px,13vw,190px);font-weight:700;letter-spacing:.01em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,77,109,.75);text-shadow:0 0 60px rgba(255,77,109,.35);pointer-events:none}
.mini-clock b{font-weight:700}
.dg{display:inline-block;width:.6em;text-align:center}.cl{display:inline-block;width:.3em;text-align:center}
.mini-wave{position:absolute;left:26px;right:26px;top:30px;height:74px;background:repeating-linear-gradient(90deg,var(--coral) 0 3px,transparent 3px 9px);-webkit-mask:radial-gradient(60% 100% at 50% 50%,#000,transparent);mask:radial-gradient(60% 100% at 50% 50%,#000,transparent);clip-path:polygon(0 45%,5% 30%,10% 48%,15% 12%,20% 40%,25% 22%,30% 46%,35% 5%,40% 38%,45% 18%,50% 44%,55% 0,60% 36%,65% 20%,70% 46%,75% 10%,80% 40%,85% 26%,90% 46%,95% 32%,100% 45%,100% 55%,95% 68%,90% 54%,85% 74%,80% 60%,75% 90%,70% 54%,65% 80%,60% 64%,55% 100%,50% 56%,45% 82%,40% 62%,35% 95%,30% 54%,25% 78%,20% 60%,15% 88%,10% 52%,5% 70%,0 55%);filter:drop-shadow(0 0 10px var(--coral));animation:wavepan 6s linear infinite}
@keyframes wavepan{to{background-position:90px 0}}
.mini-server{position:absolute;top:30px;left:26px;display:flex;flex-direction:column;gap:8px;width:120px}
.mini-server i{height:20px;border-radius:7px;border:1px solid rgba(184,161,255,.5);background:rgba(184,161,255,.08);position:relative}
.mini-server i::after{content:"";position:absolute;right:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--lav);box-shadow:0 0 10px var(--lav);animation:blink 1.4s infinite}
.mini-server i:nth-child(2)::after{animation-delay:.4s;background:var(--coral);box-shadow:0 0 10px var(--coral)}.mini-server i:nth-child(3)::after{animation-delay:.8s}
.mini-chart{position:absolute;top:28px;left:26px;right:26px;height:84px;display:flex;align-items:flex-end;gap:9px}
.mini-chart i{flex:1;height:var(--h);border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,var(--coral),rgba(255,77,109,.12));transform-origin:50% 100%;transform:scaleY(.1);transition:transform 1.1s var(--ease)}
.is-in .mini-chart i{transform:none}
.mini-chart i:nth-child(2){transition-delay:.08s}.mini-chart i:nth-child(3){transition-delay:.16s}.mini-chart i:nth-child(4){transition-delay:.24s}.mini-chart i:nth-child(5){transition-delay:.32s}.mini-chart i:nth-child(6){transition-delay:.4s;background:linear-gradient(180deg,var(--lav),rgba(184,161,255,.12))}
.mini-day{position:absolute;top:30px;left:26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--lav);padding:9px 14px;border:1px solid rgba(184,161,255,.5);border-radius:999px;box-shadow:0 0 30px -8px var(--lav)}

/* planes */
.dial{margin-bottom:22px;display:flex;flex-direction:column;gap:14px}
.dial label{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.015em}
.dial__row{display:flex;align-items:center;gap:22px}
.dial output{font-family:var(--display);font-size:clamp(38px,4.4vw,60px);font-weight:700;font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:right;color:var(--coral);text-shadow:0 0 30px rgba(255,77,109,.6);line-height:1}
.dial__out{color:var(--mute);font-size:16px}
.dial__out b{color:#fff;font-weight:600}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:34px;background:transparent;--v:15%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--coral) var(--v),rgba(184,161,255,.22) var(--v))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--coral) var(--v),rgba(184,161,255,.22) var(--v))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;border:7px solid var(--coral);box-shadow:0 0 24px 2px rgba(255,77,109,.9)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:7px solid var(--coral);box-shadow:0 0 24px 2px rgba(255,77,109,.9)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;perspective:1600px}
.plan{display:flex;flex-direction:column;gap:22px;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:opacity .9s var(--ease),filter .9s var(--ease),transform .5s var(--ease),border-color .5s,box-shadow .5s;transform-style:preserve-3d}
.plan header{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.plan header h3{margin:0}
.plan__min{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--lav)}
.price{display:flex;align-items:baseline;gap:10px}
.price__n{font-family:var(--display);font-weight:800;font-size:clamp(46px,5vw,72px);letter-spacing:-.045em;line-height:1;color:#fff!important}
.price__u{color:var(--mute);font-size:15px}
.spec{display:flex;flex-direction:column;font-size:15.5px;color:#D9D6EC;flex:1}
.spec li{padding:11px 0;border-top:1px solid var(--line)}
.spec b{color:#fff;font-family:var(--mono);font-weight:500}
.plan.is-pick{border-color:rgba(255,77,109,.75);box-shadow:0 0 110px -36px var(--coral),0 0 0 1px rgba(255,77,109,.35)}
.plan.is-pick .btn--line{background:var(--coral);color:#17020B}
.plan.is-pick::before{opacity:.6}
.plan.is-pick header::after{content:"Te alcanza";font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#17020B;background:var(--coral);padding:5px 10px;border-radius:999px;position:absolute;top:-1px;right:22px;border-radius:0 0 10px 10px}
.extras{margin-top:22px;display:grid;grid-template-columns:auto 1fr;gap:10px 46px;align-items:center;padding:clamp(22px,2.4vw,34px);border-radius:var(--r);border:1px dashed rgba(184,161,255,.35);background:rgba(8,10,30,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.extras__impl{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mute)}
.extras__impl .mono{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blush)}
.extras__impl b{font-family:var(--display);font-weight:800;font-size:clamp(40px,4.4vw,60px);letter-spacing:-.04em;line-height:1;color:#fff}
.extras__list{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;font-size:15.5px;color:#D9D6EC}
.extras__list b{color:var(--blush);font-weight:500}
.extras .fine{grid-column:1/-1;padding-top:14px;border-top:1px solid var(--line);margin-top:8px}

/* implementación */
.track{position:relative;display:flex;flex-direction:column;max-width:920px}
.track::before{content:"";position:absolute;left:27px;top:20px;bottom:20px;width:1px;background:linear-gradient(var(--coral),var(--lav),transparent)}
.track li{position:relative;display:grid;grid-template-columns:56px 1fr;gap:26px;padding:20px 0}
.track__n{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid rgba(255,77,109,.6);color:var(--blush);font-size:15px;box-shadow:0 0 30px -6px var(--coral)}
.track h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;line-height:1.1;margin:10px 0 8px}
.track p{color:#CFCBE6;max-width:60ch}
.aside{margin-top:30px;max-width:920px;padding:18px 22px;border-left:2px solid var(--lav);background:rgba(184,161,255,.07);border-radius:0 14px 14px 0;color:#D9D6EC;font-size:16px}
.aside b{color:#fff}

/* garantía */
.vows{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.vow{display:flex;flex-direction:column;gap:6px}
.vow__k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin-bottom:26px}
.vow p{font-size:15.5px}
.vow__else{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);color:#fff!important;font-weight:500}
.vow__else span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lav);font-weight:400;margin-bottom:4px}
.vow>p:first-of-type{margin-bottom:18px}
.vow--plain{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:8px 40px;align-items:baseline;padding:26px clamp(22px,2.4vw,34px);border-radius:var(--r);border:1px dashed rgba(255,179,193,.4);background:rgba(8,10,30,.5)}
.vow--plain h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,2vw,27px);letter-spacing:-.02em}
.vow--plain p{color:var(--mute)}

/* no hacemos */
.nots{border-top:1px solid var(--line)}
.nots li{display:grid;grid-template-columns:minmax(0,1.1fr) 130px minmax(0,1fr);gap:24px;align-items:center;padding:26px 6px;border-bottom:1px solid var(--line);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease),background .4s,padding .4s var(--ease)}
.nots li:hover{background:linear-gradient(90deg,rgba(255,77,109,.09),transparent);padding-left:20px}
.nots b{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,27px);letter-spacing:-.02em;line-height:1.15}
.nots .tag{justify-self:start}
.nots p{color:var(--mute);font-size:16px}

/* demo */
.demo{padding:clamp(40px,8vh,90px) clamp(14px,3vw,40px) 30px}
.demo__frame{position:relative;min-height:min(86svh,820px);border-radius:clamp(26px,4vw,56px);overflow:hidden;display:grid;place-items:center;border:1px solid rgba(255,179,193,.4);box-shadow:0 0 140px -40px var(--coral)}
.demo__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.demo__shade{position:absolute;inset:0;background:radial-gradient(58% 62% at 50% 48%,rgba(5,6,15,.84),rgba(5,6,15,.3) 85%),linear-gradient(180deg,rgba(5,6,15,.25),transparent 30%,rgba(5,6,15,.55))}
.demo__copy{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding:clamp(40px,7vw,90px) clamp(20px,5vw,60px);max-width:900px}
.demo__copy .lead{color:#DAD7EE}

/* pie */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px;padding:34px var(--pad) 44px;font-size:14px;color:var(--dim)}
.foot .logo{font-size:24px}
.foot__guide{color:var(--blush);border-bottom:1px solid rgba(255,179,193,.4);padding-bottom:2px}
.foot__guide:hover{color:#fff;border-color:#fff}

/* ───────── RESPONSIVO ───────── */
@media (max-width:1080px){
  .nav__links{display:none}
  .vows{grid-template-columns:1fr 1fr}
  .bento__a{grid-column:span 6}.bento__b,.bento__c{grid-column:span 3}.bento__d,.bento__e{grid-column:span 3}
  .live-pos{position:relative;right:auto;bottom:auto;margin-top:44px;align-self:flex-start}
  .hero{flex-direction:column;align-items:flex-start;justify-content:flex-end}
}
@media (max-width:820px){
  body{font-size:16px}
  .hero{padding:44svh 20px 84px;min-height:100svh}
  .hero::before{background:linear-gradient(180deg,transparent 30%,rgba(5,6,15,.6) 46%,rgba(5,6,15,.82))}
  .hero__title{margin:16px 0 18px}
  .hero__cta .btn{flex:1 1 auto}
  .hero__scroll{display:none}
  .live-pos{width:100%;margin-top:30px}
  .live{width:100%;gap:14px;padding:14px 16px}
  .live__main{min-width:0;padding-right:14px}
  .live__time{font-size:32px}
  .live__label{font-size:12.5px;white-space:nowrap}
  .live__meta{font-size:12.5px;gap:5px}
  .live__wave{display:none}
  .story__pin{padding:78px 20px 18px;gap:6px}
  .story__head{align-items:center}
  .clock__time{font-size:44px}
  .clock__cap{font-size:9.5px;margin-top:4px}
  .story__stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px;align-items:start}
  .device{order:-1;font-size:clamp(8px,1.32svh,11.5px);gap:8px}
  .device__who{font-size:10px}
  .steps{align-items:start;max-width:none}
  .step__n{font-size:11px;margin-bottom:10px;padding:5px 10px}
  .step h2{font-size:clamp(26px,7.4vw,34px);margin-bottom:8px}
  .step p{font-size:15px;line-height:1.45}
  .rail{display:none}
  .windows{grid-template-columns:1fr;padding:80px 20px}
  .windows__art{--w:min(300px,76vw);margin:0 auto}
  .who{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bento>*{grid-column:auto!important}
  .bento .card{min-height:230px}
  .bento .bento__a{min-height:320px}
  .mini-clock{font-size:92px;right:18px}
  .plans{grid-template-columns:1fr}
  .dial__row{gap:14px}
  .extras{grid-template-columns:1fr}
  .extras__list{grid-template-columns:1fr}
  .vows{grid-template-columns:1fr}
  .vow__k{margin-bottom:14px}
  .vow--plain{grid-template-columns:1fr}
  .nots li{grid-template-columns:1fr auto;gap:8px 14px;padding:22px 2px}
  .nots li p{grid-column:1/-1}
  .nots .tag{justify-self:end}
  .track li{grid-template-columns:44px 1fr;gap:16px}
  .track__n{width:44px;height:44px;font-size:13px}
  .track::before{left:21px}
  .track h3{margin-top:6px}
  .foot{flex-direction:column;align-items:flex-start}
  .card{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,rgba(20,24,62,.9),rgba(8,10,30,.9))}
  .grain{animation:none}
}

/* historia sin fijar (movimiento reducido o sin JS) */
.story.is-flat .story__pin{height:auto;overflow:visible}
.story.is-flat .story__stage{grid-template-columns:1fr;gap:40px}
.story.is-flat .steps{display:flex;flex-direction:column;align-items:stretch;gap:38px;max-width:640px}
.story.is-flat .steps::before{display:none}
.story.is-flat .step{opacity:1;transform:none;filter:none;pointer-events:auto}
.story.is-flat .rail,.story.is-flat .clock{display:none}
.story.is-flat .device{order:2}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .reveal{opacity:1;transform:none;filter:none}
  .grain{animation:none}
  html{scroll-behavior:auto}
}