@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}

:root{
  --bg:#0E1116;--card:#161B22;--text:#F5F6F8;--text2:#C9CED6;--label:#9AA3AF;--border:#2A313B;
  --accent:#FF5A1F;--accent-text:#FF5A1F;--on-accent:#0E1116;--track:#9AA3AF;--logo-gap:#0E1116;--alt:#12161C;
  --font-brand:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:light){
  :root{--bg:#F5F6F8;--card:#FFFFFF;--text:#0E1116;--text2:#2F3742;--label:#4B5563;--border:#D9DDE3;
    --accent-text:#C2410C;--track:#4B5563;--logo-gap:#F5F6F8;--alt:#ECEEF2}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text2);font:400 1rem/1.55 var(--font-body)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent-text);text-underline-offset:3px}
h1,h2,h3{font-family:var(--font-brand);color:var(--text);margin:0;line-height:1.1;letter-spacing:-.02em}
p{margin:0}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:720px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text)}
.logo-mark{width:32px;height:32px}
.logo-word{font-family:var(--font-brand);font-size:1.5rem;letter-spacing:-.045em;line-height:1}
.logo-word b{font-weight:700;color:var(--text)}
.logo-word span{font-weight:400;color:var(--track)}
.header{padding:14px 0}

/* Hero */
.hero{padding:6px 0 40px}
.hero-grid{display:grid;gap:22px}
h1{font-size:clamp(2rem,8.4vw,3.6rem)}
h1 em{font-style:normal;color:var(--accent-text)}
.lead{font-size:1.05rem;margin-top:12px;color:var(--text2)}
.hero .lead{margin-bottom:16px}
.hero-visual{display:grid;grid-template-columns:62fr 36fr;gap:2%;align-items:center;min-width:0}
.spain-shape{fill:var(--card);stroke:var(--border);stroke-width:2;stroke-linejoin:round}
.lines path{stroke:var(--label);stroke-width:2;opacity:.55;stroke-linecap:round}
.stations circle{fill:var(--bg);stroke:var(--label);stroke-width:1.5}
.trains circle{fill:#FF5A1F;filter:drop-shadow(0 0 4px rgba(255,90,31,.8))}
.phone{border:3px solid var(--border);border-radius:11% / 5.4%;background:#0E1116;overflow:hidden;aspect-ratio:200/410;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.phone svg{width:100%;height:100%}
.ph-bg{fill:#0E1116}.ph-grid path{stroke:#1D242D;stroke-width:1}
.ph-lines path{stroke:#F5F6F8;stroke-width:2;opacity:.5}
.ph-dot{fill:#FF5A1F}.ph-ring{fill:none;stroke:#FF5A1F;stroke-width:1.2;opacity:.5}
.ph-island{fill:#000}.ph-card{fill:#161B22;stroke:#2A313B}
.ph-lab{fill:#9AA3AF;font:700 8px var(--font-body);letter-spacing:.08em}
.ph-big{fill:#F5F6F8;font:700 15px var(--font-brand)}
.ph-track{fill:#2A313B}.ph-prog{fill:#FF5A1F}
.ph-sub{fill:#C9CED6;font:400 9px var(--font-body)}.ph-warn{fill:#FF5A1F;font:700 10px var(--font-body)}

/* Formulario / CTA */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;border:0;font:700 1rem var(--font-brand);cursor:pointer;text-decoration:none;width:100%}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn[disabled]{cursor:not-allowed}
.btn-soon{background:transparent;color:var(--label);border:1px dashed var(--border);margin-top:0;min-height:42px;font-weight:400;font-family:var(--font-body);font-size:.9rem}
.signup{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;display:grid;gap:9px}
.signup-title{font:700 1rem var(--font-brand);color:var(--text)}
.field{display:grid;gap:3px}
.field label{font-size:.78rem;color:var(--label)}
input[type=text],input[type=email],textarea{width:100%;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:400 16px var(--font-body)}
input::placeholder{color:var(--label);opacity:.8}
input[aria-invalid=true]{border-color:#F87171}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;line-height:1.4;color:var(--text2)}
.check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{font-size:.9rem;color:var(--text2)}
.status.ok{color:#34D399;font-weight:700}
.status.err{color:#F87171}
@media (prefers-color-scheme:light){.status.ok{color:#047857}.status.err{color:#B91C1C}input[aria-invalid=true]{border-color:#B91C1C}}
.cta .btn{max-width:360px}

/* Secciones */
.section{padding:56px 0}
.alt{background:var(--alt);border-block:1px solid var(--border)}
.eyebrow{font:700 .8rem var(--font-brand);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px}
h2{font-size:clamp(1.7rem,6vw,2.6rem)}
.muted{color:var(--label);margin-top:14px;font-size:.95rem}
.cards,.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px}
.card .ico{color:var(--accent-text);margin-bottom:12px}
.card h3,.steps h3{font-size:1.15rem;margin-bottom:6px}
.steps li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start}
.steps h3,.steps p{grid-column:2}
.num{grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font:700 1.2rem var(--font-brand)}
.cta-final .signup,.cta-final .cta{margin-top:20px}
.cta-final{text-align:left}

/* Footer */
.footer{padding:36px 0 44px;border-top:1px solid var(--border);display:block}
.footer .wrap{display:grid;gap:12px}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-nav a{color:var(--text);padding:6px 0}
.small{font-size:.85rem;color:var(--label)}
.disclaimer{color:var(--text2)}

/* Páginas legales */
.legal{padding:24px 0 56px}
.legal h1{font-size:clamp(1.8rem,6vw,2.6rem);margin-bottom:6px}
.legal h2{font-size:1.3rem;margin:32px 0 8px;letter-spacing:-.01em}
.legal p,.legal li{margin-top:8px}
.legal ul{padding-left:20px}
.legal .updated{color:var(--label);font-size:.9rem}
mark.hole{background:#FFE08A;color:#3B2A00;padding:0 4px;border-radius:4px;font-weight:700}

@media (min-width:760px){
  .hero{padding:24px 0 72px}
  .hero-grid{grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
  .lead{font-size:1.2rem}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:24px}
  .steps li{grid-template-columns:1fr}
  .steps h3,.steps p{grid-column:1}
  .num{grid-row:auto;margin-bottom:14px}
  .section{padding:88px 0}
  .signup{padding:20px;max-width:440px}
}
@media (min-width:1020px){.cards{grid-template-columns:repeat(3,1fr)}}

textarea{padding:10px 12px;min-height:120px;resize:vertical}
.tagline{color:var(--label);font-size:.95rem;margin-top:-4px}
.contact{margin-top:20px;max-width:560px}

/* ---- Insignia App Store + "muy pronto" ---- */
.badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.badge{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border:1px solid #5b6068;border-radius:12px;padding:8px 16px 8px 14px;text-decoration:none;min-height:52px}
.badge span{display:grid;line-height:1.05;text-align:left}
.badge small{font:400 .66rem var(--font-body)}
.badge b{font:700 1.28rem var(--font-brand);letter-spacing:-.01em}
.badge.is-soon{opacity:.92}
.soon-pill{display:inline-flex;align-items:center;gap:8px;font:700 .9rem var(--font-brand);color:var(--accent-text);border:1px solid var(--accent);border-radius:999px;padding:7px 14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* ---- Escena "subiéndose a la App Store": vía del logo con estaciones y trenes ---- */
.rvl{margin-top:18px;max-width:560px;display:grid;gap:8px}
.rvl p{font-size:.9rem;color:var(--text2)}.rvl p b{color:var(--text)}
.rvl svg{width:100%;height:auto;display:block;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.rvl .rail-adj{fill:none;stroke:var(--border);stroke-width:4;stroke-linecap:round}
.rvl .ties{fill:none;stroke:var(--border);stroke-width:34;stroke-dasharray:3 25}
.rvl .rail-out{fill:none;stroke:var(--text);stroke-width:21;stroke-linecap:round}
.rvl .rail-in{fill:none;stroke:var(--bg);stroke-width:7.5;stroke-linecap:round}
.rvl .rail-glow{fill:none;stroke:transparent;stroke-width:7.5;stroke-linecap:round}
.rvl .stn rect{fill:#4DA3FF;stroke:var(--bg);stroke-width:3}
.rvl .ring{fill:none;stroke:#4DA3FF;stroke-width:2.5}
.rvl .tr{stroke:var(--bg);stroke-width:2.5}
.rvl .tr-me{fill:#FF5A1F;filter:drop-shadow(0 0 6px rgba(255,90,31,.9))}
.rvl .tr-b{fill:#9AA3AF}.rvl .tr-x{fill:#B07CFF}
.rvl-chip{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;border-radius:14px;background:var(--card);border:1.5px solid var(--border);transition:border-color .3s,background .3s}
.rvl-chip span{display:grid;line-height:1.2}.rvl-chip b{font:700 .95rem var(--font-brand);color:var(--text)}.rvl-chip small{font-size:.8rem;color:var(--label)}
.rvl-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);flex:none}
.rvl-chip.y{border-color:#FFC247}.rvl-chip.y .rvl-dot{background:#FFC247}
.rvl-chip.o{border-color:#FF8F3C}.rvl-chip.o .rvl-dot{background:#FF8F3C}
.rvl-chip.r{border-color:#FF4D4D}.rvl-chip.r .rvl-dot{background:#FF4D4D}
.rvl-chip.v{border-color:#B07CFF}.rvl-chip.v .rvl-dot{background:#B07CFF}
.rvl-chip.b{border-color:#4DA3FF}.rvl-chip.b .rvl-dot{background:#4DA3FF}

/* ---- Mapa hero ---- */
.lines path{stroke-dasharray:4 5;animation:flow 20s linear infinite}
@keyframes flow{to{stroke-dashoffset:-180}}
.pl{fill:none;stroke:#FF5A1F;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 3.2s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(4.5);opacity:0}}
.labels text{fill:var(--text2);font:700 10px var(--font-brand);paint-order:stroke;stroke:var(--card);stroke-width:3px}
.trains circle.tt{fill:#FF5A1F;opacity:.35;filter:none}

/* ---- Tarjetas con escenas animadas ---- */
.scene{background:var(--bg);border:1px solid var(--border);border-radius:12px;margin-bottom:16px;overflow:hidden}
.scene svg{width:100%;height:auto}
.scene .t{fill:#FF5A1F;filter:drop-shadow(0 0 4px rgba(255,90,31,.8))}
.s-lines path{stroke:var(--label);stroke-width:2;opacity:.55;fill:none;stroke-dasharray:4 5}
.scene .bar{fill:var(--border)}
.scene .pill{fill:var(--card);stroke:var(--border);stroke-width:1.5}
.scene .pt{fill:var(--text);font:700 10px var(--font-body)}
.scene .pl2{fill:var(--label);font:700 8px var(--font-body);letter-spacing:.08em}

/* ---- Cómo funciona: la vía que avanza con el scroll ---- */
.journey{position:relative;margin-top:28px;padding-left:84px}
.jr-rail{position:absolute;left:0;top:0;width:56px;height:100%;overflow:visible}
.jr-dot{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#FF5A1F;box-shadow:0 0 0 6px rgba(255,90,31,.2),0 0 14px rgba(255,90,31,.8);will-change:transform;backface-visibility:hidden}
.journey .steps{margin:0;gap:56px}
.journey .steps li{opacity:.38;transform:translateX(-6px);transition:opacity .4s,transform .4s}
.journey .steps li.on{opacity:1;transform:none}
.journey .num{background:var(--card);color:var(--text);border:2px solid var(--border);transition:background .4s,color .4s,border-color .4s}
.journey .steps li.on .num{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* ---- Capturas ---- */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;margin-top:32px;justify-items:center}
.shots figure{margin:0;width:100%;max-width:210px;display:grid;gap:10px;text-align:center}
.shots figcaption{font:700 .9rem var(--font-brand);color:var(--text)}
@media (min-width:900px){.shots{grid-template-columns:repeat(4,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  .dot,.lines path,.pl{animation:none}
  .journey .steps li{opacity:1;transform:none;transition:none}
}

/* La vía de "Cómo funciona" es vertical en todos los anchos */
.journey .steps{grid-template-columns:1fr;gap:64px}
.journey .steps li{grid-template-columns:auto 1fr;column-gap:16px}
.journey .steps h3,.journey .steps p{grid-column:2}
.journey .num{grid-row:1/3;margin-bottom:0}
@media (min-width:760px){.journey{max-width:720px}}

/* ===== Hero: mapa real + iPhone ===== */
.rt-defs{position:absolute;width:0;height:0;overflow:hidden}
.rt-defs path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.hero-visual{display:block}
.stage{position:relative;aspect-ratio:1/1.02;max-width:600px;margin:0 auto}
.mapcard{position:absolute;inset:0 0 0 0;border-radius:28px;overflow:hidden;border:1px solid #2A313B;background:radial-gradient(120% 90% at 35% 30%,#16222d 0%,#0c1117 70%);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.rtmap{width:100%;height:100%;display:block}
.rtmap .n0{stroke:#3b4756;stroke-width:.9;opacity:.85}
.rtmap .n1{stroke:#7B8594;stroke-width:1.1;opacity:.9}
.rtmap .n2{stroke:#EEF1F5;stroke-width:1.7;filter:drop-shadow(0 0 3px rgba(255,255,255,.4))}
.rtmap .cd{fill:#0E1116;stroke:#F5F6F8;stroke-width:1.6}
.rtmap .cl{fill:#DCE1E8;font:700 10px var(--font-brand);paint-order:stroke;stroke:#0c1117;stroke-width:3px;stroke-linejoin:round}
.rtmap .pl{fill:none;stroke:#FF5A1F;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 3.4s ease-out infinite}
.rtmap .t{fill:#FF5A1F;stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 0 5px rgba(255,90,31,.95))}
.rtmap .tt{fill:#FF5A1F;opacity:.4}
.front{position:absolute;right:-3%;bottom:-7%;width:41%;transform:rotate(4deg);z-index:2;animation:floaty 7s ease-in-out infinite}
.dev{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 34px rgba(0,0,0,.5));overflow:visible}
@keyframes floaty{50%{transform:rotate(4deg) translateY(-8px)}}
.glass{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:rgba(22,27,34,.82);border:1px solid rgba(245,246,248,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.35);color:#F5F6F8;animation:bob 6s ease-in-out infinite}
.glass span{display:grid;line-height:1.15}.glass small{font-size:.68rem;color:#9AA3AF}.glass b{font:700 .9rem var(--font-brand)}
.gd{width:12px;height:12px;border-radius:50%;background:#B07CFF;box-shadow:0 0 0 0 rgba(176,124,255,.6);animation:halo 2s infinite}
.gd.gb{background:#4DA3FF;box-shadow:0 0 0 0 rgba(77,163,255,.6)}.gd.ga{background:#FFC247;box-shadow:0 0 0 0 rgba(255,194,71,.6)}
.g1{left:3%;top:7%}.g2{left:6%;bottom:9%;animation-delay:-2s}.g3{left:2%;top:40%;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-7px)}}
@keyframes halo{70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.px{font-family:var(--font-body)}.pb{font-family:var(--font-brand)}
.pn0{stroke:#25323d;stroke-width:.8;opacity:.9}.pn1{stroke:#46525f;stroke-width:1}.pn2{stroke:#D3D9E1;stroke-width:1.6}

/* ===== Pantallas ===== */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 18px;margin-top:36px;justify-items:center}
.shots figure{margin:0;width:100%;max-width:250px;display:grid;gap:14px;text-align:center}
.shots figcaption{font:700 .95rem var(--font-brand);color:var(--text)}
.shots figure:nth-child(2),.shots figure:nth-child(4){margin-top:0}
@media (min-width:900px){.shots{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.shots figure:nth-child(even){transform:translateY(34px)}.shots{padding-bottom:40px}}
@media (max-width:759px){.glass{padding:8px 11px}.g3{display:none}.front{width:44%}}
@media (prefers-reduced-motion:reduce){.front,.glass,.gd,.rtmap .pl{animation:none}}
.hero{overflow-x:clip}
@media (min-width:900px){.front{right:-13%;bottom:-6%;width:40%}.stage{margin-right:6%}}

/* Insignia de App Store (imagen) */
.badge{background:none;border:0;padding:0;min-height:0;border-radius:0;display:inline-block;line-height:0}
.badge img{width:136px;height:auto;display:block}
.badge.is-soon{opacity:1}

.journey .jr-dot{left:0;top:0;transform:translate3d(0,0,0)}
.journey .steps li{will-change:opacity,transform}

.rvl-chip.n .rvl-dot{background:#34D399}
.rvl-chip b,.rvl-chip small{display:block;transition:opacity .25s}

/* Registro completado: la vía se dibuja y el punto naranja llega a la estación */
.signup-done{justify-items:center;text-align:center;padding:22px 14px}
.signup-done svg{max-width:100%;height:auto;overflow:visible}
.signup-done .r1,.signup-done .r2{fill:none;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1;animation:rdraw .9s .1s ease-out forwards}
.signup-done .r1{stroke:var(--text);stroke-width:14}
.signup-done .r2{stroke:var(--bg);stroke-width:5}
.signup-done .stn{fill:var(--accent,#FF5A1F);opacity:0;animation:rpop .35s 1s ease-out forwards}
.signup-done .ok{fill:none;stroke:#0E1116;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1;animation:rdraw .35s 1.25s ease-out forwards}
.signup-done .dotr{fill:var(--accent,#FF5A1F);animation:rride .9s .1s ease-out forwards}
.done-title{font:700 1.2rem var(--font-brand);color:var(--text);opacity:0;animation:rfade .5s 1.2s ease-out forwards}
.done-sub{font-size:.95rem;color:var(--text2);opacity:0;animation:rfade .5s 1.45s ease-out forwards}
@keyframes rdraw{to{stroke-dashoffset:0}}
@keyframes rride{to{transform:translateX(182px)}}
@keyframes rpop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes rfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.signup-done .stn{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.signup-done *{animation-duration:.01s!important;animation-delay:0s!important}}

.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}.dl-here{margin-top:0}