/* ============================================================
   NEXORA — Landing · Cyber Futurism + Glass · v4 mobile-first
   ============================================================ */
:root {
  --bg:#0A0A0F; --bg-2:#0d0d18; --surface:rgba(255,255,255,0.04);
  --primary:#11B5FF; --secondary:#BB5CFF; --text:#F8FAFC; --muted:#94A3B8;
  --border:rgba(255,255,255,0.10); --green:#22C55E; --yellow:#F59E0B;
  --gradient:linear-gradient(135deg,#11B5FF 0%,#BB5CFF 100%);
  --font-display:'Orbitron',sans-serif; --font-head:'Rajdhani',sans-serif; --font-body:'Space Grotesk',sans-serif;
  --text-sm:clamp(.85rem,1.6vw,.95rem); --text-base:clamp(1rem,2vw,1.15rem); --text-lg:clamp(1.15rem,2.4vw,1.45rem);
  --text-2xl:clamp(1.6rem,4vw,2.4rem); --text-3xl:clamp(2.2rem,6vw,4rem); --text-hero:clamp(2.6rem,10vw,9rem);
  --container:1320px; --pad-x:clamp(1.25rem,5vw,5rem); --radius:22px;
  /* iOS safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  scroll-behavior:auto;
  width:100%;
  max-width:100vw; /* evita que elementos fixed/absolute desborden y creen barra horizontal */
}
body{
  background:var(--bg);color:var(--text);font-family:var(--font-body);
  font-size:var(--text-base);line-height:1.6;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior-y:none;
}
a{color:inherit;text-decoration:none}
strong,b{color:var(--text);font-weight:600}
em{font-style:normal;color:var(--primary)}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--pad-x)}
.grad{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- Background ---------- */
.bg-mesh,.bg-grid,.bg-noise{position:fixed;inset:0;z-index:-3;pointer-events:none;will-change:auto;contain:paint}
.bg-mesh{
  background:
    radial-gradient(ellipse 50% 40% at 18% 12%,rgba(17,181,255,0.20),transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 25%,rgba(187,92,255,0.18),transparent 60%),
    radial-gradient(ellipse 60% 50% at 60% 95%,rgba(17,181,255,0.10),transparent 60%),var(--bg);
  animation:meshShift 16s ease-in-out infinite alternate;
  /* GPU layer propio para que la animación no invalide el resto del árbol */
  will-change:background-position;
  transform:translateZ(0)
}
@keyframes meshShift{0%{background-position:0 0,0 0,0 0}100%{background-position:4% 6%,-3% 4%,2% -4%}}
.bg-grid{z-index:-2;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 80% at 50% 30%,#000 30%,transparent 80%)}
.bg-tint{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.06;background:#11B5FF}
.bg-noise{z-index:-1;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;z-index:10000;background:#07070c;display:grid;place-items:center}
.pre-inner{display:flex;flex-direction:column;align-items:center;gap:1.2rem;width:min(80vw,360px)}
.pre-logo .brand-mark.big{width:64px;height:64px;border-radius:18px;font-size:1.8rem}
.pre-word{font-family:var(--font-display);font-weight:800;letter-spacing:.5em;font-size:1.1rem;padding-left:.5em;color:var(--text);opacity:.0;transform:translateY(10px)}
.pre-bar{width:100%;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.pre-bar span{display:block;height:100%;width:0%;background:var(--gradient)}
.pre-count{font-family:var(--font-display);font-size:.9rem;color:var(--muted)}
.pre-count i{font-style:normal;opacity:.5}

/* ---------- Cursor / progress ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%)}
.cursor{width:38px;height:38px;border:1.5px solid rgba(17,181,255,.6);mix-blend-mode:difference}
.cursor-dot{width:5px;height:5px;background:var(--primary)}
@media (hover:none){.cursor,.cursor-dot{display:none}}
.progress-bar{
  position:fixed;top:0;left:0;height:3px;
  width:100%;            /* siempre full — JS escala con transform */
  transform:scaleX(0);
  transform-origin:left center;
  z-index:1000;
  background:var(--gradient);
  box-shadow:0 0 12px rgba(17,181,255,.6);
  will-change:transform
}

/* ---------- Lienzo 3D ---------- */
#webgl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;will-change:auto;transform:translateZ(0)}
main,.footer{position:relative;z-index:1}

.glass{
  background:var(--surface);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-head);font-weight:600;font-size:var(--text-sm);
  letter-spacing:.02em;padding:.85rem 1.5rem;border-radius:999px;
  border:1px solid var(--border);
  transition:transform .25s,box-shadow .25s,background .25s;
  cursor:pointer;white-space:nowrap;will-change:transform;
  /* iOS: eliminar estilos nativos de botón */
  -webkit-appearance:none;
  touch-action:manipulation
}
.btn svg{transition:transform .25s}.btn:hover svg{transform:translateX(3px)}
/* iOS active state (sin hover real en touch) */
.btn:active{transform:scale(.97)!important;opacity:.9}
.btn-primary{background:var(--gradient);color:#fff;border:none;box-shadow:0 8px 28px rgba(17,181,255,.35)}
.btn-primary:hover{box-shadow:0 14px 40px rgba(187,92,255,.5)}
.btn-ghost{color:var(--text);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--primary)}
.btn-nav{padding:.6rem 1.1rem;background:rgba(255,255,255,.04)}.btn-nav:hover{border-color:var(--primary)}
.btn.big{padding:1.1rem 2.1rem;font-size:var(--text-base)}

.eyebrow,.hero-eyebrow{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.35em;font-size:.72rem;color:var(--primary);font-weight:600;margin-bottom:1rem;display:inline-flex;align-items:center;gap:.6rem}
.hero-eyebrow i,.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary)}
.section{padding-block:clamp(4.5rem,12vw,9rem);position:relative}
.section-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-3xl);line-height:1.05;letter-spacing:-.01em}
.section-lead{color:var(--muted);font-size:var(--text-lg);max-width:46ch;margin-top:1.2rem}

/* ---------- Nav ---------- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--pad-x);
  /* iOS: pad top para el notch */
  padding-top:calc(1rem + var(--safe-top));
  transition:background .35s,padding .35s,border-color .35s;
  border-bottom:1px solid transparent
}
.navbar.scrolled{
  background:rgba(10,10,15,.80);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:var(--border);
  padding-block:.65rem;
  padding-top:calc(.65rem + var(--safe-top))
}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--gradient);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;color:#fff;box-shadow:0 0 18px rgba(17,181,255,.5)}
.brand-text{font-family:var(--font-display);font-weight:700;letter-spacing:.15em;font-size:1.05rem}
.nav-links{display:flex;gap:2rem;font-family:var(--font-head);font-weight:500}
.nav-links a{color:var(--muted);transition:color .2s;position:relative}.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gradient);transition:width .3s}.nav-links a:hover::after{width:100%}
.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:10px;
  touch-action:manipulation;-webkit-appearance:none
}
.nav-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
.nav-toggle.open span:first-child{transform:translateY(7px) rotate(45deg)}.nav-toggle.open span:last-child{transform:rotate(-45deg)}

/* Mobile menu — desliza desde derecha */
.mobile-menu{
  position:fixed;
  /* Desde arriba del notch hasta abajo del safe-area */
  top:0;bottom:0;
  left:auto;right:0;
  width:min(78vw,340px);
  z-index:850;
  background:rgba(8,8,16,.97);
  backdrop-filter:blur(24px) saturate(200%);
  -webkit-backdrop-filter:blur(24px) saturate(200%);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;gap:1.5rem;
  /* Respeta notch arriba y home indicator abajo */
  padding:calc(5.5rem + var(--safe-top)) 2rem calc(2rem + var(--safe-bottom));
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.7,0,.2,1)
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{
  font-family:var(--font-head);font-size:1.3rem;color:var(--text);
  padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.05);
  transition:color .2s,padding-left .2s
}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:active{color:var(--primary);padding-left:.5rem}
.mobile-menu .btn{justify-content:center;margin-top:.5rem}

/* Overlay para cerrar el menú */
.menu-overlay{
  position:fixed;inset:0;z-index:840;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .35s
}
.menu-overlay.open{opacity:1;pointer-events:auto}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh; /* iOS: viewport dinámico sin la barra de Safari */
  /* flex + justify-content:center centra el contenido pero permite que
     crezca sin recortarse por arriba (place-items:center clipa en pantallas bajas) */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
  padding-top:calc(7rem + var(--safe-top));
  padding-bottom:4rem
}
.hero-particles{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.hero-route{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9;will-change:auto}
/* Glow SVG: solo en desktop (feGaussianBlur es muy costoso en móvil) */
.hero-route-path{filter:url(#glow)}
.hero-route .pin-ring{fill:rgba(17,181,255,.12);stroke:var(--primary);stroke-width:2}
#heroVan{filter:drop-shadow(0 6px 14px rgba(17,181,255,.6))}
.hero-inner{position:relative;z-index:2;max-width:1100px}
.hero-eyebrow{justify-content:center;margin-bottom:1.6rem}
.hero-title{font-family:var(--font-display);font-weight:800;font-size:var(--text-hero);line-height:.95;letter-spacing:-.02em}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .w{display:inline-block}
.hero-subtitle{color:var(--muted);font-size:var(--text-lg);max-width:52ch;margin:1.8rem auto 2.4rem}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.hero-live{
  position:absolute;right:clamp(1rem,4vw,3rem);bottom:clamp(1.5rem,5vh,3rem);
  z-index:3;padding:1rem 1.1rem;width:min(86vw,260px);text-align:left
}
.hero-live .live{display:inline-flex;align-items:center;gap:.5rem;color:var(--green);font-family:var(--font-head);font-weight:600;font-size:.8rem;margin-bottom:.7rem}
.live i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}100%{box-shadow:0 0 0 10px rgba(34,197,94,0)}}
.live-feed{display:flex;flex-direction:column;gap:.5rem}
.lf{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.lf b{font-family:var(--font-head);font-weight:600;font-size:.88rem}
.st{font-size:.66rem;font-family:var(--font-head);padding:.12rem .5rem;border-radius:999px}
.st-done{color:var(--green);background:rgba(34,197,94,.12)}.st-go{color:var(--primary);background:rgba(17,181,255,.12)}.st-wait{color:var(--muted);background:rgba(255,255,255,.05)}
.scroll-hint{position:absolute;bottom:calc(1.4rem + var(--safe-bottom));left:50%;transform:translateX(-50%);z-index:3}
.scroll-hint span{display:block;width:22px;height:34px;border:1.5px solid var(--border);border-radius:12px;position:relative}
.scroll-hint span::after{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:8px;border-radius:2px;background:var(--primary);animation:scrolly 1.6s infinite}
@keyframes scrolly{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--border);padding:1.1rem 0;background:rgba(255,255,255,.015)}
.marquee-track{display:flex;gap:0;white-space:nowrap;width:max-content;will-change:transform}
.marquee-track span{font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,2.4vw,1.8rem);letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px rgba(148,163,184,.5);padding-right:1.5rem}

/* ---------- Problema ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
.pain{padding:2rem}.pain-ico{font-size:2rem}
.pain h3{font-family:var(--font-head);font-weight:600;font-size:1.3rem;margin:1rem 0 .5rem}
.pain p{color:var(--muted);font-size:var(--text-sm)}

/* ---------- 4 apps · SWIPE CAROUSEL (móvil) / pinned horizontal (desktop) ---------- */
.h-apps{position:relative}
.carousel-dots{display:none} /* visible solo cuando JS añade .mobile-carousel */
.h-apps.mobile-carousel .carousel-dots{display:flex}
.h-pin{height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:2.5rem}
.h-head .section-title{font-size:var(--text-2xl)}
.h-track{display:flex;gap:1.5rem;padding-inline:var(--pad-x);width:max-content;will-change:transform}
.h-card{
  flex:0 0 min(78vw,420px);padding:2.4rem;display:flex;flex-direction:column;
  min-height:46vh;position:relative;overflow:hidden;transform-style:preserve-3d;
  /* Para el swipe nativo: sin bordes cortados */
  -webkit-user-select:none;user-select:none
}
.h-card::before{content:'';position:absolute;inset:0;background:var(--gradient);opacity:0;transition:opacity .4s;z-index:-1}.h-card:hover::before{opacity:.07}
.b-tag{position:absolute;top:1.4rem;right:1.4rem;font-family:var(--font-head);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--primary);border:1px solid var(--border);border-radius:999px;padding:.2rem .6rem}
.h-card{align-items:center;text-align:center;min-height:auto;gap:1.2rem}
.h-card h3{font-family:var(--font-head);font-weight:700;font-size:1.6rem;margin:0 0 .5rem}
.h-card p{color:var(--muted);font-size:var(--text-sm);max-width:42ch;margin:0 auto}
.h-info .b-tag{position:static;display:inline-block;margin-bottom:.7rem}

/* ── Mockups de dispositivos ── */
.mock{display:flex;justify-content:center}
.phone{width:198px;height:402px;border-radius:30px;background:#05060a;border:1px solid rgba(255,255,255,.12);padding:7px;box-shadow:0 22px 50px rgba(0,0,0,.55);position:relative}
.phone::before{content:'';position:absolute;top:13px;left:50%;transform:translateX(-50%);width:56px;height:5px;border-radius:3px;background:rgba(255,255,255,.16);z-index:3}
.screen{width:100%;height:100%;border-radius:24px;overflow:hidden;background:#0A0A0F;display:flex;flex-direction:column;padding:22px 10px 9px;gap:8px}
.browser{width:330px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0A0A0F;box-shadow:0 22px 50px rgba(0,0,0,.55)}
.browser-bar{display:flex;align-items:center;gap:5px;padding:8px 10px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.browser-bar i{width:9px;height:9px;border-radius:50%}
.browser-url{margin-left:8px;font-size:9px;color:var(--muted);background:rgba(255,255,255,.05);border-radius:6px;padding:2px 9px}
.b-screen{padding:12px;display:flex;flex-direction:column;gap:9px;min-height:236px}
.m-logo{width:22px;height:22px;border-radius:7px;background:var(--gradient);display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:800;font-size:11px;flex-shrink:0}
.m-logo.sm{width:18px;height:18px;font-size:9px}
.m-head,.m-bar{display:flex;align-items:center;gap:8px;color:#fff}
.m-head b,.m-bar b{font-family:var(--font-head);font-weight:600;font-size:12px}
.m-head small{display:block;color:var(--muted);font-size:8px}
.m-bar{justify-content:space-between}
.m-kpis{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.m-kpi{background:rgba(17,181,255,.08);border:1px solid rgba(17,181,255,.15);border-radius:10px;padding:8px}
.m-kpi b{font-family:var(--font-display);color:var(--primary);font-size:16px;display:block;line-height:1}
.m-kpi small{color:var(--muted);font-size:8px}
.m-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.m-grid span{aspect-ratio:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:8px;display:grid;place-items:center;font-size:11px}
.m-chip{font-family:var(--font-head);font-size:9px;border-radius:999px;padding:4px 9px;width:fit-content}
.m-chip.green{color:var(--green);background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.2)}
.m-chip.blue{color:var(--primary);background:rgba(17,181,255,.12)}
.m-chip.yellow{color:var(--yellow);background:rgba(245,158,11,.12)}
.m-chip.sm{font-size:8px;padding:3px 7px}
.m-pet{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px}
.m-pet-img{width:58px;height:58px;border-radius:50%;background:rgba(17,181,255,.1);border:1px solid rgba(17,181,255,.2);display:grid;place-items:center;font-size:28px;margin-bottom:2px}
.m-pet b{color:#fff;font-family:var(--font-head);font-size:14px}
.m-pet small{color:var(--muted);font-size:9px}
.m-moment{font-size:9px;color:var(--muted);text-align:center;background:rgba(255,255,255,.03);border-radius:8px;padding:6px}
.m-tabs{display:flex;justify-content:space-around;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:6px}
.m-tabs span{font-size:13px;opacity:.45}
.m-tabs span.on{opacity:1}
.m-prog{font-size:9px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.m-progbar{height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.m-progbar i{display:block;height:100%;background:var(--gradient)}
.m-stop{font-size:10px;color:#cbd5e1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 9px;text-align:left}
.m-stop.done{color:var(--green);background:rgba(34,197,94,.07);border-color:rgba(34,197,94,.18)}
.m-stop.go{color:var(--yellow);background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.18)}
.m-cta{background:var(--gradient);color:#fff;border:none;border-radius:12px;padding:11px;font-family:var(--font-head);font-weight:600;font-size:11px;cursor:default}
.m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.m-stats div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px;text-align:center}
.m-stats b{font-family:var(--font-display);font-size:14px;color:var(--primary);display:block;line-height:1}
.m-stats small{font-size:7px;color:var(--muted)}

/* ---------- Ruta pinned ---------- */
.ruta{position:relative}
.ruta-pin{min-height:100vh;display:flex;align-items:center;padding-block:4rem}
.ruta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;width:100%}
.ruta-copy{display:flex;flex-direction:column}
/* ══ iPhone Stage ══ */
.iphone-stage{
  position:relative;display:flex;justify-content:center;align-items:center;
  padding:2rem 0
}
/* Wrap con perspectiva 3D */
.iphone-wrap{
  position:relative;z-index:1;
  transform:perspective(1200px) rotateY(-12deg) rotateX(4deg);
  transform-style:preserve-3d;
  transition:transform .6s ease;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))
}
.iphone-wrap:hover{
  transform:perspective(1200px) rotateY(-5deg) rotateX(2deg)
}

/* Cuerpo del iPhone */
.iph-body{
  width:280px;
  background:linear-gradient(160deg,#1c1c1e 0%,#2c2c2e 50%,#1c1c1e 100%);
  border-radius:48px;
  padding:11px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.12),
    2px 0 8px rgba(0,0,0,.4),
    -2px 0 8px rgba(0,0,0,.4);
  position:relative
}
/* Botones de volumen */
.iph-btn-vol1,.iph-btn-vol2{
  position:absolute;left:-3px;width:3px;border-radius:2px 0 0 2px;
  background:linear-gradient(180deg,#3a3a3c,#2c2c2e);
  box-shadow:-1px 0 3px rgba(0,0,0,.5)
}
.iph-btn-vol1{top:130px;height:38px}
.iph-btn-vol2{top:178px;height:38px}
.iph-btn-power{
  position:absolute;right:-3px;top:155px;width:3px;height:62px;
  border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,#3a3a3c,#2c2c2e);
  box-shadow:1px 0 3px rgba(0,0,0,.5)
}

/* Pantalla */
.iph-screen{
  background:#000;
  border-radius:34px;
  overflow:hidden;
  aspect-ratio:9/19.5;
  display:flex;flex-direction:column;
  position:relative
}

/* Status bar */
.iph-status{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px 4px;
  position:absolute;top:0;left:0;right:0;z-index:10;
  background:linear-gradient(to bottom,rgba(0,0,0,.3),transparent)
}
.iph-time{font-family:var(--font-display);font-weight:700;font-size:11px;color:#fff;letter-spacing:-.02em}
.iph-island{
  width:90px;height:26px;
  background:#000;border-radius:13px;
  position:absolute;top:8px;left:50%;transform:translateX(-50%)
}
.iph-icons{display:flex;align-items:center;gap:5px}

/* Mapa */
.map-bg{
  flex:1;position:relative;overflow:hidden;
  background:#e8efe8
}
.map-streets-svg{
  position:absolute;inset:0;width:100%;height:100%
}
.map-route-svg{
  position:absolute;inset:0;width:100%;height:100%;z-index:2
}

/* Paradas */
.map-stop{
  position:absolute;z-index:5;
  opacity:0;
  transition:opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none
}
/* Posición de cada parada (lat/lng → top/left en % de la pantalla) */
/* Posiciones en % del contenedor .map-bg (viewBox 300x520) */
#stop0{top:80%;left:50%;transform:translate(-50%,-100%) scale(.7) translateY(8px)}
#stop1{top:62%;left:29%;transform:translate(-50%,-100%) scale(.7) translateY(8px)}
#stop2{top:44%;left:50%;transform:translate(-50%,-100%) scale(.7) translateY(8px)}
#stop3{top:18%;left:29%;transform:translate(-50%,-100%) scale(.7) translateY(8px)}
/* Al activarse sobreescribimos el transform */
#stop0.visible,#stop1.visible,#stop2.visible,#stop3.visible{
  opacity:1;
  transform:translate(-50%,-100%) scale(1) translateY(0)
}

.stop-pin{
  width:28px;height:28px;border-radius:50% 50% 50% 0;
  display:grid;place-items:center;font-size:13px;
  transform:rotate(-45deg);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  margin:0 auto
}
.stop-pin>span{transform:rotate(45deg);display:block}
.stop-pin.blue  {background:#1a73e8;border:2px solid #fff}
.stop-pin.yellow{background:#f59e0b;border:2px solid #fff}
.stop-pin.purple{background:#BB5CFF;border:2px solid #fff}

.stop-card{
  position:absolute;top:-66px;
  background:rgba(15,15,20,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:7px 10px;
  white-space:nowrap;
  box-shadow:0 6px 24px rgba(0,0,0,.5)
}
.stop-card::after{
  content:'';position:absolute;bottom:-6px;
  width:10px;height:10px;
  background:rgba(15,15,20,.92);
  border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  transform:rotate(45deg)
}
.stop-card-right{left:34px}.stop-card-right::after{left:12px}
.stop-card-left{right:34px}.stop-card-left::after{right:12px}
.stop-action{font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:.05em;margin-bottom:2px}
.stop-action.recogida{color:#22C55E}
.stop-action.entrega{color:#F59E0B}
.stop-action.colegio{color:#BB5CFF}
.stop-name{font-family:var(--font-display);font-size:11px;color:#fff;font-weight:700;line-height:1.2}
.stop-time{font-size:9px;color:rgba(255,255,255,.55);margin-top:1px}

/* Barra inferior tipo Google Maps */
.map-bar{
  position:absolute;bottom:0;left:0;right:0;z-index:10;
  background:linear-gradient(to top, rgba(15,15,22,.98) 70%, transparent);
  padding:10px 12px 8px
}
.map-bar-info{display:flex;align-items:baseline;gap:.4rem;margin-bottom:5px}
.map-eta{font-family:var(--font-display);font-size:13px;font-weight:700;color:#1a73e8}
.map-dist{font-size:9px;color:rgba(255,255,255,.5);font-family:var(--font-head)}
.map-progress-wrap{height:4px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}
.map-progress-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#1a73e8,#11B5FF);border-radius:4px;transition:transform .5s ease}

/* Notificación emergente de parada (aparece sobre el mapa) */
.ruta-notif{
  position:absolute;top:56px;left:8px;right:8px;z-index:20;
  background:rgba(10,10,20,.92);border:1px solid rgba(26,115,232,.4);
  border-radius:12px;padding:8px 10px;
  display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(-10px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;backdrop-filter:blur(8px)
}
.ruta-notif.show{opacity:1;transform:translateY(0)}
.notif-ico{font-size:18px;flex-shrink:0}
.notif-txt{font-family:var(--font-head);font-size:11px;color:#fff;line-height:1.3}
.notif-txt b{color:#11B5FF;font-weight:700}

/* Reflejo lateral */
.iph-reflect{
  position:absolute;right:-4px;top:10%;height:80%;width:2px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.15) 30%,rgba(255,255,255,.08) 70%,transparent);
  border-radius:2px;
  transform:translateZ(-1px)
}
/* Home indicator */
.iph-home{
  height:24px;background:#000;
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.iph-home::after{
  content:'';width:90px;height:4px;
  background:rgba(255,255,255,.35);border-radius:4px
}

/* ── Progreso ruta ── */
#rutaPct{color:var(--primary);font-family:var(--font-display)}

/* ── Ruta steps — scroll-driven ── */
.ruta-steps{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-top:2rem}
.ruta-steps li{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.9rem 1.1rem;border-radius:14px;
  border:1px solid transparent;
  transition:background .4s, border-color .4s, transform .4s;
  opacity:.4;
  transform:translateX(-8px);
  transition:opacity .4s, transform .4s, background .4s, border-color .4s;
}
.ruta-steps li.active{
  opacity:1;
  transform:translateX(0);
  background:rgba(17,181,255,.07);
  border-color:rgba(17,181,255,.25);
}
.ruta-steps li .num{
  font-family:var(--font-display);font-size:.78rem;font-weight:700;
  color:var(--primary);min-width:1.8rem;
  background:rgba(17,181,255,.12);
  padding:.2rem .45rem;border-radius:6px;
  flex-shrink:0;margin-top:.1rem;
}
.ruta-steps li.active .num{
  background:var(--gradient);
  color:#fff;
  box-shadow:0 4px 12px rgba(17,181,255,.4);
}

/* ── Scroll hint en sección ruta ── */
.ruta-scroll-hint{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-head);font-size:.78rem;
  color:var(--muted);letter-spacing:.08em;text-transform:uppercase;
  margin-top:2rem;opacity:.7;
}
.ruta-scroll-hint::before{
  content:'';width:18px;height:2px;
  background:var(--gradient);border-radius:2px;
  display:block;
}

/* ── iPhone glow ambiente mejorado ── */
.iphone-glow{
  position:absolute;
  inset:-30px;
  background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(17,181,255,.18), transparent 70%);
  pointer-events:none;z-index:-1;
  filter:blur(20px);
  opacity:.3;
}

/* ---------- Módulos ---------- */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
.mod{padding:1.6rem;transition:transform .3s,border-color .3s}
.mod:hover{transform:translateY(-4px);border-color:rgba(17,181,255,.4)}
.mod:active{transform:scale(.97)}
.mod span{font-size:1.8rem}.mod h4{font-family:var(--font-head);font-weight:600;font-size:1.15rem;margin:.7rem 0 .35rem}
.mod p{color:var(--muted);font-size:.82rem}

/* ---------- White label ---------- */
.wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.stat{padding:1.8rem;text-align:center}
.stat b{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,5vw,3.2rem);background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block}
.stat span{color:var(--muted);font-size:.82rem;font-family:var(--font-head)}

/* ---------- CTA ---------- */
.cta-final{padding-block:clamp(4rem,10vw,7rem)}
.cta-box{text-align:center;padding:clamp(2.5rem,6vw,5rem);position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(17,181,255,.14),transparent 70%)}
.cta-box h2{font-family:var(--font-display);font-weight:800;font-size:var(--text-3xl);line-height:1.05;position:relative}
.cta-box p{color:var(--muted);margin:1.2rem auto 2rem;max-width:40ch;position:relative}
.cta-phone{font-family:var(--font-head);color:var(--primary);margin-top:1.2rem!important;letter-spacing:.05em}

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  /* Respeta home indicator de iOS */
  bottom:calc(clamp(1rem,3vw,2rem) + var(--safe-bottom));
  z-index:950;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .3s;
  touch-action:manipulation
}
.wa-float:hover{transform:scale(1.09)}
.wa-float:active{transform:scale(.95)}
.wa-float svg{width:32px;height:32px}
.wa-float::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:waPulse 2.2s infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--border);padding-block:3rem 2rem}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:.8rem}.footer-tag{color:var(--muted);font-size:.8rem}
.footer-contact{display:flex;flex-direction:column;gap:.4rem;text-align:right}
.footer-contact a{color:var(--muted);transition:color .2s}.footer-contact a:hover{color:var(--primary)}
.footer-copy{text-align:center;color:var(--muted);font-size:.78rem;margin-top:2rem}

/* ══════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   ══════════════════════════════════════════════════ */

/* ── Tablet ── */
@media (max-width:1024px){
  .ruta-grid,.wl-grid{grid-template-columns:1fr}
  .mods{grid-template-columns:repeat(2,1fr)}
}

/* ── Mobile ── */
@media (max-width:768px){
  /* Nav */
  .nav-links,.btn-nav{display:none}
  .nav-toggle{display:flex}

  /* Hero: compacto, sin panel live */
  .hero{
    padding-top:calc(5.5rem + var(--safe-top));
    padding-bottom:calc(3rem + var(--safe-bottom))
  }
  .hero-subtitle{font-size:1rem;margin:1.4rem auto 1.8rem}
  .hero-live{display:none}
  .hero-cta{gap:.75rem}
  .hero-cta .btn{padding:.8rem 1.3rem;font-size:.9rem}

  /* Problema: columna única */
  .pain-grid{grid-template-columns:1fr}
  .pain{padding:1.5rem}

  /* ── 4 apps: SWIPE CAROUSEL nativo ── */
  .h-apps.mobile-carousel .h-pin{
    height:auto;
    overflow:visible;
    padding-block:clamp(4rem,10vw,6rem);
    gap:1.5rem
  }
  .h-apps.mobile-carousel .h-track{
    /* Scroll nativo horizontal con snap */
    width:100% !important;
    max-width:100%;
    overflow-x:scroll;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    /* Padding para que la primera y última card queden centradas */
    padding-inline:var(--pad-x);
    gap:1.2rem;
    cursor:grab
  }
  .h-apps.mobile-carousel .h-track::-webkit-scrollbar{display:none}
  .h-apps.mobile-carousel .h-card{
    flex:0 0 min(85vw,340px);
    min-height:auto;
    padding:1.6rem;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    /* Animación de escala en el card activo */
    transition:transform .35s,box-shadow .35s;
  }
  .h-apps.mobile-carousel .h-card.active-card{
    transform:scale(1.02);
    box-shadow:0 12px 40px rgba(17,181,255,.2)
  }
  /* Dots de navegación del carrusel */
  .carousel-dots{
    display:flex;justify-content:center;gap:.5rem;
    padding:.75rem 0 .25rem;
  }
  .c-dot{
    width:6px;height:6px;border-radius:50%;
    background:rgba(255,255,255,.25);
    transition:background .3s, transform .3s;
    cursor:pointer;
  }
  .c-dot.active{
    background:var(--primary);
    transform:scale(1.4);
  }

  /* Mockups más pequeños en móvil */
  .browser{width:100%;max-width:300px}
  .b-screen{min-height:auto}
  .phone{width:170px;height:344px}
  .h-card h3{font-size:1.35rem}

  /* ── Ruta en vivo MÓVIL: sección FIJA (pin) — todo cabe en una pantalla ── */
  /* El JS hace pin: el listado + el iPhone se ven juntos mientras la animación
     avanza con el scroll. Layout compacto para que entre completo en el viewport. */
  .ruta-pin{
    min-height:100vh;min-height:100dvh;
    display:flex;flex-direction:column;justify-content:center;gap:.5rem;
    padding-block:calc(4rem + var(--safe-top)) calc(1rem + var(--safe-bottom))
  }
  .ruta-scroll-hint{display:none}

  /* Módulos 2 columnas */
  .stats{grid-template-columns:1fr 1fr}

  /* Secciones */
  .section{padding-block:clamp(3.5rem,11vw,6rem)}

  /* Footer */
  .footer-grid{flex-direction:column;align-items:flex-start}
  .footer-contact{text-align:left}

  /* WhatsApp: más pequeño */
  .wa-float{width:52px;height:52px}
  .wa-float svg{width:28px;height:28px}

  /* Sección ruta: stack vertical compacto (listado arriba + iPhone abajo) */
  .ruta-grid{gap:1rem;grid-template-columns:1fr;align-items:start}
  /* Título de la ruta más compacto */
  .ruta-copy .section-title{font-size:clamp(1.5rem,6vw,2rem)}
  .ruta-copy .eyebrow{margin-bottom:.5rem}
  /* Listado de pasos: compacto para que quepa junto al iPhone */
  .ruta-steps{margin-top:1rem;gap:.5rem}
  .ruta-steps li{padding:.55rem .75rem;font-size:.82rem;gap:.6rem}
  .ruta-steps li .num{font-size:.7rem;padding:.15rem .4rem;min-width:1.6rem}
  /* iPhone más pequeño para que entre completo en pantalla */
  .iphone-stage{padding:.5rem 0}
  .iphone-wrap{transform:perspective(900px) rotateY(0deg) rotateX(2deg)}
  .iph-body{width:185px;border-radius:38px;padding:8px}

  /* ══════════════════════════════════════════════
     PERFORMANCE móvil — iOS Safari + Chrome Android
     Causa #1 de lag: backdrop-filter blur en muchos
     elementos a la vez. Lo cambiamos por fondo sólido.
     ══════════════════════════════════════════════ */
  /* ── Glassmorphism: sin backdrop-filter en móvil (muy costoso en GPU) ── */
  .glass{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(10,10,20,0.82)
  }
  /* Navbar blur: solo cuando está scrolled, blur mínimo */
  .navbar.scrolled{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px)
  }
  /* Fondo: apagar todo lo que genere repaint en scroll */
  .bg-grid,.bg-noise{display:none}
  .bg-mesh{
    animation:none;
    will-change:auto; /* liberar la capa GPU ya que no anima */
    transform:none
  }
  /* bg-tint: position absolute (no fixed) para no generar stacking context en scroll */
  .bg-tint{position:absolute;height:100vh}
  /* WebGL canvas: ocultar cuando scroll pasa del hero para liberar GPU */
  /* (el JS de scene3d.js maneja el fade via scroll listener) */
  /* Progress bar: transform en lugar de width (evita reflow) */
  .progress-bar{
    width:100% !important;
    transform-origin:left;
    transform:scaleX(0)
  }
  /* will-change solo donde animamos activamente */
  .iphone-wrap{will-change:transform}
  .marquee-track{will-change:transform}
  /* Hero route SVG: quitar filtro blur (feGaussianBlur mata la GPU en móvil) */
  .hero-route-path{filter:none}
  .hero-route{contain:layout style}
  /* hero-particles canvas: desactivado en móvil vía JS, pero por si acaso */
  .hero-particles{display:none}
  /* Overflow hero: clip en lugar de hidden para no crear nuevo scroll container */
  .hero-title .line{overflow:hidden}
  /* Sombras costosas → simplificadas */
  .h-card{box-shadow:0 4px 16px rgba(0,0,0,.4)}
  .phone{box-shadow:0 10px 28px rgba(0,0,0,.5)}
  .iph-body{
    box-shadow:
      0 0 0 1px rgba(0,0,0,.8),
      inset 0 1px 0 rgba(255,255,255,.1)
  }
  /* Stop-cards compactas */
  .stop-card{display:block;font-size:.75rem}
  .stop-card-right,.stop-card-left{
    position:static;
    margin-top:4px;
    white-space:normal
  }
  .stop-card::after{display:none}
  /* Evitar que elementos con filter o transform3d fuera del viewport generen layers */
  .reveal{contain:content}
}

/* ── Small mobile (≤480px) ── */
@media (max-width:480px){
  .mods{grid-template-columns:1fr 1fr}
  .hero-title{letter-spacing:-.03em}
  .browser{max-width:100%}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .preloader{display:none!important}
}