/* =========================================================================
   JUVENAI · v2 — banda inteligente
   Orden: tokens → base → chrome → banda 3D → secciones (en orden de la
   página) → responsive → reduced-motion.
   Sin build, sin framework. Todo lo que conduce el scroll son variables
   CSS que escribe main.js; el CSS decide qué hacer con ellas.
   ========================================================================= */

/* ------------------------------------------------------------------
   1 · Tokens
   ------------------------------------------------------------------ */
:root {
  /* color */
  --ink:      #06080D;   /* negro dominante */
  --ink-2:    #0A0E16;   /* oscuro secundario */
  --ink-3:    #10151F;   /* superficie sobre oscuro */
  --paper:    #FFFFFF;
  --mist:     #F3F4F6;   /* claro alterno */
  --text:     #0B0E14;
  --muted:    #697180;
  --muted-d:  rgba(255,255,255,.62);
  --line:     #E6E8EC;
  --line-d:   rgba(255,255,255,.12);

  /* Acento único, derivado del punto azul del logo. El tono se eligió por
     contraste: con blanco da 5,1:1, así que sirve tanto de fondo de botón
     como de color de rótulo sobre claro. Un azul más luminoso se quedaba
     en 3,8:1 y no pasaba AA en ninguno de los dos usos. */
  --acc:      #1A66E6;
  --acc-soft: #7FB0FF;   /* el acento sobre fondo oscuro */
  --acc-deep: #053C83;   /* azul institucional del logo */

  /* tipografía */
  --f-dis: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-txt: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* espacio y forma */
  --gut: clamp(20px, 4.6vw, 72px);
  --sec: clamp(92px, 11vw, 190px);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 28px;
  --pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  /* dimensiones de la banda (px, escaladas por --sc) */
  --case-w: 140px;
  --case-h: 186px;
  --case-d: 26px;
  --strap-w: 112px;
  --strap-h: 62px;
  --strap-d: 12px;
}

/* ------------------------------------------------------------------
   2 · Base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-txt);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }

[id] { scroll-margin-top: 96px; }

::selection { background: var(--acc); color: #fff; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: -80px; left: 16px; z-index: 200;
  padding: 10px 18px; border-radius: var(--pill);
  background: var(--acc); color: #fff; font-size: 14px;
  transition: top .2s var(--ease);
}
.skip:focus { top: 16px; }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }

/* ---- escalas tipográficas ---- */
.h-xl, .h-lg, .h-md {
  font-family: var(--f-dis);
  font-weight: 600;
  text-wrap: balance;
}
.h-xl { font-size: clamp(46px, 8.6vw, 128px); line-height: .93; letter-spacing: -.042em; }
.h-lg { font-size: clamp(34px, 5.4vw, 82px);  line-height: .99; letter-spacing: -.034em; }
.h-md { font-size: clamp(27px, 3.9vw, 56px);  line-height: 1.06; letter-spacing: -.028em; }

.h-xl em, .h-lg em, .h-md em {
  font-style: normal;
  color: var(--acc);
}
[data-theme="dark"] .h-xl em,
[data-theme="dark"] .h-lg em,
[data-theme="dark"] .h-md em { color: var(--acc-soft); }

.lead {
  font-size: clamp(16.5px, 1.35vw, 20px);
  line-height: 1.6;
  font-weight: 300;
  color: var(--muted);
  max-width: 56ch;
}
[data-theme="dark"] .lead { color: var(--muted-d); }

.mono, .kicker {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.kicker { color: var(--muted); margin-bottom: 22px; }
[data-theme="dark"] .kicker { color: var(--muted-d); }
.kicker--acc { color: var(--acc); }
[data-theme="dark"] .kicker--acc { color: var(--acc-soft); }

/* ---- botones ---- */
.btn {
  --bg: var(--acc);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  border-radius: var(--pill);
  background: var(--bg);
  color: #fff;
  font-family: var(--f-dis);
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn::after {
  content: "→";
  font-family: var(--f-txt);
  transition: transform .35s var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120px 60px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(26,102,230,.62); }
.btn:hover::after { transform: translateX(4px); }
.btn:hover::before { opacity: 1; }
.btn--sm { padding: 11px 20px; font-size: 14px; }
.btn--ghost {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 1px var(--line-d);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px currentColor; }
[data-theme="dark"] .btn--ghost { color: #fff; }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-dis); font-size: 15px; font-weight: 500;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .4s var(--ease);
}
.link::after { content: "→"; transition: transform .35s var(--ease); }
.link:hover { background-size: 100% 1px; }
.link:hover::after { transform: translateX(4px); }

.chip {
  display: inline-block;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: rgba(26,102,230,.12);
  box-shadow: inset 0 0 0 1px rgba(26,102,230,.28);
  color: var(--acc);
  font-size: 15px; line-height: 1.45;
}
[data-theme="dark"] .chip { color: var(--acc-soft); background: rgba(26,102,230,.16); }
.chip--lg { font-size: 17px; padding: 18px 22px; }

/* ---- revelado base ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Sin JS no hay quien encienda los estados: todo se muestra ya puesto.
   (El resto de lo que se oculta lleva su clase de reposo escrita por JS,
   así que si main.js falla el contenido sigue visible por sí solo.) */
.no-js .eco__n { opacity: 1; transform: none; }
.no-js .wire, .no-js .ecg, .no-js .curve, .no-js .dv__spark { stroke-dashoffset: 0; }
.no-js .bars i { height: var(--h); }

/* ------------------------------------------------------------------
   3 · Chrome: loader, progreso, header, menú
   ------------------------------------------------------------------ */
.loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-content: center; gap: 26px; justify-items: center;
  background: var(--ink);
  color: #fff;
  transition: opacity .7s var(--ease), visibility .7s;
}
.loader.is-off { opacity: 0; visibility: hidden; }
.no-js .loader { display: none; }
.loader__sym { display: block; height: 62px; width: auto; opacity: 0; animation: pop .7s var(--ease) .1s forwards; }
.loader__bar { width: 132px; height: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .18s linear; }
@keyframes pop  { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

.prog {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: transparent; pointer-events: none;
}
.prog i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--acc-deep), var(--acc));
}

/* Barra a ancho completo con la marca centrada y la navegación repartida a
   los dos lados. A diferencia de la referencia, aquí el fondo del sitio
   alterna claro y oscuro, así que la barra se invierte con `.on-dark`. */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  transition: transform .5s var(--ease);
}
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 var(--gut);
  height: 74px;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 -1px 0 var(--line);
  transition: background .5s var(--ease), box-shadow .5s var(--ease),
              color .5s var(--ease), height .4s var(--ease);
}
.hdr.on-dark .hdr__in {
  background: rgba(6,8,13,.72);
  color: #fff;
  box-shadow: inset 0 -1px 0 var(--line-d);
}
.hdr.is-small .hdr__in { height: 62px; }

.hdr__logo {
  grid-column: 2;
  display: flex; align-items: center; gap: 9px;
  flex: none;
  justify-self: center;
}
.hdr__logo img { display: block; width: auto; }
.hdr__sym  { flex: none; height: 26px; }
.hdr__word { height: 13px; }
.hdr.is-small .hdr__sym { height: 23px; }
/* la pareja blanca sobre fondo oscuro, la navy sobre fondo claro */
.hdr .l-light { display: none; }
.hdr:not(.on-dark) .l-dark  { display: none; }
.hdr:not(.on-dark) .l-light { display: block; }

.hdr__side { display: flex; align-items: center; gap: 26px; min-width: 0; }
.hdr__side--l { grid-column: 1; justify-content: flex-start; }
.hdr__side--r { grid-column: 3; justify-content: flex-end; gap: 18px; }

.hdr__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-txt);
  font-size: 14.5px; font-weight: 400; white-space: nowrap;
  opacity: .74;
  transition: opacity .3s var(--ease);
}
.hdr__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 1px; background: currentColor;
  transition: right .4s var(--ease);
}
.hdr__link:hover { opacity: 1; }
.hdr__link:hover::after, .hdr__link.is-on::after { right: 0; }
.hdr__link.is-on { opacity: 1; }

/* ---- desplegables ---- */
.drop { position: relative; }
.drop__chev { width: 11px; height: 7px; transition: transform .35s var(--ease); }
.drop.is-open .drop__btn { opacity: 1; }
.drop.is-open .drop__chev { transform: rotate(180deg); }
/* el subrayado del enlace no pega en un disparador de menú */
.drop__btn::after { display: none; }

.drop__panel {
  position: absolute; top: calc(100% + 14px); left: -14px;
  display: grid; gap: 2px;
  width: max-content; max-width: 330px;
  padding: 10px;
  border-radius: var(--r-lg);
  /* opaco de verdad: si el navegador no compone el backdrop-filter, el
     texto de detrás se transparenta y el menú se vuelve ilegible */
  background: rgba(255,255,255,.985);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(11,14,20,.45);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.drop__panel--end { left: auto; right: -14px; }
.drop.is-open .drop__panel { opacity: 1; transform: none; }
.hdr.on-dark .drop__panel {
  background: rgba(9,12,19,.985);
  box-shadow: inset 0 0 0 1px var(--line-d), 0 30px 60px -30px #000;
}
.drop__panel a {
  display: grid; gap: 2px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  transition: background .25s var(--ease);
}
.drop__panel a:hover { background: rgba(26,102,230,.08); }
.hdr.on-dark .drop__panel a:hover { background: rgba(255,255,255,.07); }
.drop__panel b {
  font-family: var(--f-dis); font-size: 15px; font-weight: 500; letter-spacing: -.015em;
}
.drop__panel i {
  font-style: normal; font-size: 13px; line-height: 1.35;
  color: var(--muted);
}
.hdr.on-dark .drop__panel i { color: var(--muted-d); }
.lang { display: flex; align-items: center; gap: 5px; flex: none; font-family: var(--f-mono); font-size: 11.5px; }
.lang__b { opacity: .48; letter-spacing: .08em; transition: opacity .3s var(--ease); }
.lang__b:hover { opacity: .85; }
.lang__b.is-on { opacity: 1; color: var(--acc); }
.hdr.on-dark .lang__b.is-on { color: var(--acc-soft); }
.lang__sep { opacity: .28; }

/* flex:none, o en pantallas estrechas el botón se encoge, las barras se
   salen de su caja y la hamburguesa desaparece */
.burger { display: none; flex: none; width: 40px; height: 34px; position: relative; }
.burger i {
  position: absolute; left: 9px; right: 9px; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s;
}
.burger i:first-child { top: 13px; }
.burger i:last-child { top: 20px; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 105;
  background: var(--ink); color: #fff;
  display: grid; place-content: center;
  opacity: 0; transition: opacity .5s var(--ease);
}
/* [hidden] del navegador es display:none, y la regla de arriba lo gana:
   hay que devolvérselo o el panel tapa la página entera y come los clics */
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
/* mismos dos grupos que en escritorio, uno debajo del otro */
.menu {
  place-content: start stretch;
  padding: 104px var(--gut) 48px;
  overflow-y: auto;
}
.menu__nav { display: grid; gap: 2px; width: 100%; max-width: 520px; margin: 0 auto; }
.menu__t {
  margin: 26px 0 10px;
  color: rgba(255,255,255,.42);
}
.menu__t:first-child { margin-top: 0; }
.menu__nav a {
  font-family: var(--f-dis); font-weight: 500;
  font-size: clamp(22px, 6vw, 30px); letter-spacing: -.03em;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-d);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu__nav a:hover { color: var(--acc-soft); }
.menu__nav a:nth-of-type(1) { transition-delay: .04s; }
.menu__nav a:nth-of-type(2) { transition-delay: .08s; }
.menu__nav a:nth-of-type(3) { transition-delay: .12s; }
.menu__nav a:nth-of-type(4) { transition-delay: .16s; }
.menu__nav a:nth-of-type(5) { transition-delay: .2s; }
.menu__nav a:nth-of-type(6) { transition-delay: .24s; }
.menu__nav a:nth-of-type(7) { transition-delay: .28s; }
.menu__nav a:nth-of-type(8) { transition-delay: .32s; }
.menu__nav a:nth-of-type(9) { transition-delay: .36s; }
/* sólo existe en el menú móvil; en escritorio manda el de la barra */
.menu__lang { display: none; }
.menu__cta {
  margin-top: 34px;
  padding: 15px 28px !important;
  border: 0 !important;
  border-radius: var(--pill);
  background: var(--acc);
  color: #fff;
  text-align: center;
  font-size: 16px !important;
}

/* ------------------------------------------------------------------
   4 · LA BANDA — objeto 3D
   Todo se dibuja con capas: no hay imágenes. Las caras del case dan
   grosor real; las correas son tres segmentos anidados que acumulan
   la curva de la muñeca.
   ------------------------------------------------------------------ */
.band {
  --sc: 1;
  --ry: 0deg;   /* giro horizontal — lo escribe el scroll */
  --rx: -8deg;  /* inclinación */
  --rz: 0deg;
  --fy: 0px;    /* flotación */
  position: relative;
  width: calc(var(--case-w) + 60px);
  /* la extensión real del objeto es case + dos correas curvadas; si la caja
     es más baja, las puntas se cortan con un canto recto que canta mucho */
  height: 520px;
  perspective: 1500px;
  perspective-origin: 50% 45%;
}
.band__obj {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform:
    translate3d(0, var(--fy), 0)
    rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))
    scale(var(--sc));
  will-change: transform;
}

/* ---- caja del dispositivo ---- */
.case {
  position: absolute; top: 50%; left: 50%;
  width: var(--case-w); height: var(--case-h);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.face {
  position: absolute; top: 50%; left: 50%;
  border-radius: 34px;
  backface-visibility: hidden;
}
.face--front, .face--back {
  width: var(--case-w); height: var(--case-h);
  background:
    linear-gradient(150deg, #2B3240 0%, #171C26 34%, #0D1118 62%, #232A36 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.face--front { transform: translate(-50%,-50%) translateZ(13px); padding: 7px; }
.face--back  { transform: translate(-50%,-50%) rotateY(180deg) translateZ(13px); }

/* cantos — dan el grosor de 8,5 mm */
.face--l, .face--r {
  width: var(--case-d); height: calc(var(--case-h) - 24px);
  border-radius: 8px;
  background: linear-gradient(180deg, #333B4B, #12161F 55%, #2A313E);
}
.face--l { transform: translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--case-w) / 2)); }
.face--r { transform: translate(-50%,-50%) rotateY(90deg)  translateZ(calc(var(--case-w) / 2)); }
.face--t, .face--b {
  width: calc(var(--case-w) - 24px); height: var(--case-d);
  border-radius: 8px;
  background: linear-gradient(90deg, #2C3341, #14181F 50%, #2C3341);
}
.face--t { transform: translate(-50%,-50%) rotateX(90deg)  translateZ(calc(var(--case-h) / 2)); }
.face--b { transform: translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--case-h) / 2)); }

/* corona lateral */
.crown {
  position: absolute; top: 32%; left: 50%;
  width: 4px; height: 30px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(180deg, #6E7A8E, #39414F);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}

/* ---- pantalla ---- */
.scr {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 30% 0%, #131A26 0%, #05070B 60%, #02040A 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  overflow: hidden;
}
.scr__ui {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 0;
  color: #fff;
}
.scr__time {
  position: absolute; top: 14px; left: 0; right: 0;
  text-align: center;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  color: rgba(255,255,255,.55);
}
.scr__ring { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; transform: translate(-50%,-54%); }
.scr__arc { transition: stroke-dashoffset 1.2s var(--ease); }
.scr__val {
  position: relative; top: -3px;
  font-family: var(--f-dis); font-size: 26px; font-weight: 600; letter-spacing: -.03em;
}
.scr__val i { font-style: normal; font-size: 13px; opacity: .6; }
.scr__lbl {
  position: absolute; bottom: 20px; left: 0; right: 0;
  text-align: center;
  font-family: var(--f-mono); font-size: 8px; letter-spacing: .22em;
  color: var(--acc-soft);
}
/* reflejo especular: se mueve con el giro */
.scr__glare {
  position: absolute; inset: -30%;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.03) 56%, transparent 64%);
  transform: translateX(calc(var(--glare, 0) * 1%));
  pointer-events: none;
}

/* ---- sensores (reverso) ---- */
.sens {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 34px;
  background: radial-gradient(60% 42% at 50% 44%, #1B2230 0%, #10141C 55%, #0B0E14 100%);
}
.sens__hub {
  position: relative;
  width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 42% 35%, #1E2634, #090C12 72%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 22px -6px rgba(26,102,230,.5);
}
.sens__led {
  position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #38E08A;
  box-shadow: 0 0 12px 2px rgba(56,224,138,.65);
  transform: rotate(calc(var(--a) * 1deg)) translateY(-24px);
  animation: ledPulse 2.6s var(--ease-io) infinite;
  animation-delay: calc(var(--a) * 2ms);
}
@keyframes ledPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.sens__eye {
  position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #2A3444, #05070B 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.sens__pins {
  position: absolute; bottom: 26px; left: 50%;
  display: flex; gap: 12px; transform: translateX(-50%);
}
.sens__pins i {
  width: 16px; height: 5px; border-radius: 3px;
  background: linear-gradient(180deg, #C6A15E, #8A6B33);
}
.sens__mark {
  position: absolute; top: 20px; left: 0; right: 0;
  text-align: center;
  font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .3em;
  color: rgba(255,255,255,.34);
}

/* ---- correas ---- */
.strap {
  position: absolute; left: 50%;
  width: var(--strap-w); height: 0;
  transform: translateX(-50%);
  transform-style: preserve-3d;
}
.strap--up { bottom: 50%; margin-bottom: calc(var(--case-h) / 2 - 8px); }
.strap--dn { top: 50%;    margin-top:    calc(var(--case-h) / 2 - 8px); }

.seg {
  position: absolute; left: 0;
  width: 100%; height: var(--strap-h);
  transform-style: preserve-3d;
}
.strap--up > .seg { bottom: 0; transform-origin: 50% 100%; transform: rotateX(16deg); }
.strap--up .seg .seg { bottom: 100%; transform-origin: 50% 100%; transform: rotateX(19deg); }
.strap--dn > .seg { top: 0; transform-origin: 50% 0%; transform: rotateX(-16deg); }
.strap--dn .seg .seg { top: 100%; transform-origin: 50% 0%; transform: rotateX(-19deg); }

.seg > i {
  position: absolute; top: 50%; left: 50%;
  backface-visibility: hidden;
}
.s-f, .s-b {
  width: 100%; height: 100%;
  border-radius: 9px;
  background: linear-gradient(105deg, #262D3A 0%, #161B25 44%, #0E1219 72%, #232A37 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
/* estrías de la silicona */
.s-f::after {
  content: "";
  position: absolute; inset: 8px 14px;
  border-radius: 5px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 8px);
}
.s-f { transform: translate(-50%,-50%) translateZ(calc(var(--strap-d) / 2)); }
.s-b { transform: translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--strap-d) / 2)); }
.s-l, .s-r {
  width: var(--strap-d); height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, #2B3240, #10141B 60%, #262D3A);
}
.s-l { transform: translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--strap-w) / 2)); }
.s-r { transform: translate(-50%,-50%) rotateY(90deg)  translateZ(calc(var(--strap-w) / 2)); }

/* sombra proyectada */
.band__shadow {
  position: absolute; left: 50%; bottom: 6%;
  width: 62%; height: 40px;
  transform: translateX(-50%) scale(var(--sc));
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%);
  filter: blur(14px);
  opacity: .8;
}

/* ------------------------------------------------------------------
   5 · Fondos oscuros
   ------------------------------------------------------------------ */
[data-theme="dark"] { background: var(--ink); color: #fff; }
[data-theme="dark"] .lead, [data-theme="dark"] p { color: var(--muted-d); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #fff; }

/* ------------------------------------------------------------------
   6 · HERO
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 130px var(--gut) 90px;
  overflow: hidden;
  /* se ve mientras el vídeo carga, y por debajo de él siempre */
  background: var(--ink);
}

/* ---- el render del producto, a sangre ---- */
.hero__media { position: absolute; inset: 0; z-index: 1; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% center;   /* las bandas quedan a la derecha del titular */
  transform: scale(var(--vz, 1.06));
  transform-origin: 62% 50%;
  will-change: transform;
}
/* El render viene sobre gris claro y el hero es negro: sin este velo el
   titular no se lee y el corte del vídeo cantaría. Fuerte a la izquierda,
   donde cae el texto; suave a la derecha, donde está el producto. */
.hero__veil {
  position: absolute; inset: 0;
  background:
    /* El render pasa por planos casi blancos (la correa arena a contraluz).
       El velo se calibra para ese fotograma, no para el más oscuro. */
    linear-gradient(100deg,
      rgba(6,8,13,.97) 0%,
      rgba(6,8,13,.94) 30%,
      rgba(6,8,13,.78) 46%,
      rgba(6,8,13,.42) 68%,
      rgba(6,8,13,.5) 100%),
    /* funde con la sección siguiente y asienta el borde superior */
    linear-gradient(to bottom, rgba(6,8,13,.55) 0%, transparent 22%, transparent 74%, var(--ink) 100%),
    /* un rastro del azul de marca, lo justo para que no sea un vídeo pegado */
    radial-gradient(60% 50% at 78% 42%, rgba(26,102,230,.16) 0%, transparent 70%);
}

.hero__in {
  position: relative; z-index: 3;
  width: 100%; max-width: 1320px; margin: 0 auto;
  will-change: transform, opacity;
  /* red de seguridad: el velo se calcula para el fotograma más claro, pero
     el vídeo es un elemento vivo y esto garantiza el contraste en todos */
  text-shadow: 0 1px 30px rgba(4,6,11,.6);
}
.hero__h1 { max-width: 12ch; margin-bottom: 30px; }
.hero__lead { max-width: 44ch; margin-bottom: 42px; }
.hero__act { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__foot {
  position: absolute; left: var(--gut); bottom: 34px; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  color: var(--muted-d);
}
.hero__line { display: block; width: 54px; height: 1px; background: rgba(255,255,255,.2); overflow: hidden; }
.hero__line i {
  display: block; width: 40%; height: 100%; background: var(--acc);
  animation: slide 2.4s var(--ease-io) infinite;
}
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* ------------------------------------------------------------------
   6b · LA APP — mosaico de capturas + propuesta
   Estructura tomada del bloque de producto de whoop.com: mosaico oscuro
   a un lado, titular grande, lista con marcas y CTA al otro.
   ------------------------------------------------------------------ */
.appx { padding: var(--sec) 0; background: var(--mist); }
.appx__in {
  display: grid;
  grid-template-columns: 1fr .78fr;   /* el mosaico manda, pero sin ahogar al texto */
  align-items: center;
  gap: clamp(40px, 5vw, 86px);
  max-width: 1320px; margin: 0 auto; padding: 0 var(--gut);
}

/* ---- el mosaico ----
   Rejilla asimétrica: a la izquierda tres piezas apiladas, a la derecha dos
   datos y el teléfono. El aire entre tarjetas y el margen del panel son lo
   que hace que no se vea apretado: si se bajan, el bloque se cierra. */
.appx__mosaic {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 18px;
  padding: 22px;
  border-radius: 30px;
  background: linear-gradient(155deg, #12161E 0%, #0B0F16 60%, #0E131B 100%);
  box-shadow: 0 60px 100px -60px rgba(11,14,20,.7), inset 0 0 0 1px rgba(255,255,255,.07);
}
/* Las dos columnas casan de alto por composición, no estirando las piezas:
   estirarlas obliga a `cover` a recortar por los lados y se comen los
   rótulos. Cuatro piezas apaisadas a la izquierda ≈ anillo + teléfono. */
.appx__col {
  display: grid; gap: 18px; align-content: start;
  /* --py lo escribe el scroll: las dos columnas derivan en sentidos opuestos.
     El recorrido (±16px) cabe dentro del padding del panel, así que nunca
     asoma un hueco por los bordes. */
  transform: translate3d(0, var(--py, 0px), 0);
}

/* ---- el mosaico se monta pieza a pieza al entrar ---- */
.appx__tile {
  opacity: 0;
  transform: translateY(20px) scale(.975);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}
.appx__mosaic.is-in .appx__tile { opacity: 1; transform: none; }
.no-js .appx__tile { opacity: 1; transform: none; }

/* orden de lectura, no orden del DOM: primero los sistemas, enseguida el
   anillo (que es la pieza protagonista) y después el resto */
.appx__col:first-child .appx__tile:nth-child(1) { transition-delay: .02s; }
.appx__col:last-child  .appx__tile:nth-child(1) { transition-delay: .09s; transform: translateY(24px) scale(.955); }
.appx__col:first-child .appx__tile:nth-child(2) { transition-delay: .17s; }
.appx__col:first-child .appx__tile:nth-child(3) { transition-delay: .24s; }
.appx__col:first-child .appx__tile:nth-child(4) { transition-delay: .31s; }
.appx__col:last-child  .appx__tile:nth-child(2) { transition-delay: .38s; }

/* un brillo cruza el panel una vez, cuando termina de montarse */
.appx__mosaic { position: relative; overflow: hidden; }
.appx__mosaic::after {
  content: "";
  position: absolute; inset: -40% -60%;
  background: linear-gradient(112deg, transparent 42%, rgba(255,255,255,.055) 50%, transparent 58%);
  transform: translateX(-60%);
  opacity: 0;
  pointer-events: none;
}
.appx__mosaic.is-in::after { animation: sheen 1.5s var(--ease) .5s 1; }
@keyframes sheen {
  0%   { opacity: 0; transform: translateX(-60%); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}

.appx__tile {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #171B23;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* --ar fija la proporción de cada pieza: así las dos columnas casan de alto
   sin depender del alto natural de cada captura */
.appx__tile img {
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: var(--ar, auto);
  object-fit: cover;
  object-position: top center;
}

/* el teléfono va contenido y con aire, no sangrando */
.appx__tile--device {
  display: grid; place-items: end center;
  padding: 26px 26px 0;
  background: radial-gradient(80% 60% at 50% 0%, #1B212C 0%, #141922 70%);
  min-height: 0;
}
.appx__device {
  display: block;
  width: min(100%, 236px);
  padding: 7px;
  border-radius: 26px;
  background: linear-gradient(160deg, #333A46, #171B22);
  box-shadow: 0 26px 44px -26px #000;
  animation: floatY 7s var(--ease-io) infinite;
}
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.appx__device img {
  aspect-ratio: auto;
  border-radius: 20px;
  object-fit: cover;
  object-position: top center;
}

/* ---- el texto ---- */
.appx__txt .h-lg { margin-bottom: 26px; }
.appx__txt .lead { margin-bottom: 34px; }
.appx__list { display: grid; gap: 14px; margin-bottom: 40px; }
.appx__list li {
  position: relative;
  padding-left: 34px;
  font-size: 16.5px; line-height: 1.5;
}
.appx__list li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--acc)
    /* la marca de verificación, dibujada: sin iconos externos */
    no-repeat center/11px 8px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M1 4l3 3 6-6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.appx__act { display: grid; gap: 18px; justify-items: center; max-width: 420px; }
.btn--block { width: 100%; justify-content: center; padding: 18px 28px; font-size: 16px; }
.appx__more { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.appx__more::after { content: none; }

/* ------------------------------------------------------------------
   7 · INTRO
   ------------------------------------------------------------------ */
.intro { padding: var(--sec) 0; background: var(--paper); }
.intro .h-lg { max-width: 20ch; margin-bottom: 64px; }
.intro__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px;
  max-width: 900px; margin-left: auto;
  font-size: 17px; color: var(--muted);
}

/* palabras que se revelan ligadas al scroll */
.words .w { opacity: .14; transition: opacity .5s var(--ease); }
.words .w.is-on { opacity: 1; }
.no-js .words .w { opacity: 1; }

/* ------------------------------------------------------------------
   9 · SMART TECHNOLOGY
   ------------------------------------------------------------------ */
.tech {
  position: relative;
  padding: var(--sec) 0;
  background: #04060B;
  overflow: hidden;
}
.tech__field { position: absolute; inset: 0; opacity: .5; }
.tech__field svg { width: 100%; height: 100%; }
.tech__field circle { fill: var(--acc); }
.tech__h { max-width: 18ch; margin-bottom: 26px; }
.tech__lead { margin-bottom: 78px; }
.tech .wrap { position: relative; z-index: 2; }

.flow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.flow__i {
  position: relative;
  padding: 32px 30px 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  box-shadow: inset 0 0 0 1px var(--line-d);
  color: #fff;
}
.flow__i:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; left: 100%; width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--acc), rgba(26,102,230,.12));
}
.flow__n { display: block; color: var(--acc-soft); margin-bottom: 20px; }
.flow__i h3 {
  font-family: var(--f-dis); font-size: 27px; font-weight: 600;
  letter-spacing: -.025em; margin-bottom: 12px;
}
.flow__i p { font-size: 15.5px; color: var(--muted-d); margin-bottom: 26px; }
.flow__viz { height: 82px; display: grid; place-items: center; color: var(--acc-soft); }
.flow__viz svg { width: 100%; }
.ecg { stroke-dasharray: 420; stroke-dashoffset: 420; }
.is-in .ecg { animation: dash 2.4s var(--ease) forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }

.flow__viz--an { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; width: 96px; }
.flow__viz--an span {
  width: 100%; aspect-ratio: 1; border-radius: 4px;
  background: rgba(26,102,230,.22);
  box-shadow: inset 0 0 0 1px rgba(26,102,230,.42);
}
.is-in .flow__viz--an span { animation: cell 2.2s var(--ease-io) infinite; }
.flow__viz--an span:nth-child(2){ animation-delay:.1s } .flow__viz--an span:nth-child(3){ animation-delay:.2s }
.flow__viz--an span:nth-child(4){ animation-delay:.3s } .flow__viz--an span:nth-child(5){ animation-delay:.4s }
.flow__viz--an span:nth-child(6){ animation-delay:.5s } .flow__viz--an span:nth-child(7){ animation-delay:.6s }
.flow__viz--an span:nth-child(8){ animation-delay:.7s } .flow__viz--an span:nth-child(9){ animation-delay:.8s }
@keyframes cell { 0%,100% { background: rgba(26,102,230,.14); } 45% { background: rgba(26,102,230,.6); } }
.flow__viz--in { display: block; }

/* ------------------------------------------------------------------
   10 · SMART FEATURES
   ------------------------------------------------------------------ */
.ft { background: var(--mist); }
/* la pista da el recorrido de scroll; el sticky es lo que se queda quieto.
   420vh = una pantalla de entrada más un tramo por cada una de las cinco lecturas */
.ft__track { height: 420vh; }
.ft__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center;
  overflow: hidden;
  /* arriba, hueco para el header flotante */
  padding: clamp(64px, 9svh, 112px) 0 clamp(18px, 3.6svh, 44px);
}
.ft__head { margin-bottom: clamp(16px, 3.4svh, 56px); }
.ft__head .h-lg { max-width: 16ch; }
.ft__body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }

/* portátiles de pantalla baja: el titular cede para que la pista no recorte */
@media (min-width: 961px) and (max-height: 800px) {
  .ft__sticky .h-lg { font-size: clamp(30px, 4.1vw, 58px); }
  .app__sticky .h-md { font-size: clamp(24px, 3.2vw, 44px); }
}
.ft__list { border-top: 1px solid var(--line); }
.ft__i {
  display: grid; grid-template-columns: auto 1fr; gap: 0 22px;
  padding: clamp(11px, 2.2svh, 26px) 4px;
  border-bottom: 1px solid var(--line);
  cursor: default;
  transition: padding-left .5s var(--ease);
}
.ft__i:hover, .ft__i.is-on { padding-left: 14px; }
.ft__n { color: var(--muted); grid-row: 1 / span 2; padding-top: 8px; transition: color .4s var(--ease); }
.ft__i.is-on .ft__n { color: var(--acc); }
.ft__i h3 {
  font-family: var(--f-dis); font-size: clamp(24px, 2.6vw, 36px); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.1;
  color: var(--muted); transition: color .4s var(--ease);
}
.ft__i.is-on h3 { color: var(--text); }
.ft__i p {
  grid-column: 2;
  max-width: 42ch; font-size: 15.5px; color: var(--muted);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease), opacity .4s var(--ease), margin .6s var(--ease);
}
.ft__i.is-on p { max-height: 120px; opacity: 1; margin-top: 12px; }

.ft__panel {
  position: relative;
  height: min(58svh, 540px);
  border-radius: var(--r-lg);
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(11,14,20,.9);
}
.ft__card {
  position: absolute; inset: 0;
  display: grid; align-content: center; gap: 4px;
  padding: clamp(28px, 3.4vw, 48px);
  color: #fff;
  opacity: 0; transform: scale(1.03);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}
.ft__card.is-on { opacity: 1; transform: none; }
.ft__tag {
  position: absolute; top: clamp(24px,3vw,36px); left: clamp(28px,3.4vw,48px);
  color: var(--acc-soft);
}
.ft__viz { height: clamp(120px, 16vw, 190px); display: grid; place-items: center; color: var(--acc-soft); margin-bottom: 30px; }
.ft__viz svg { width: 100%; height: 100%; }
.ft__viz--ring svg { width: auto; }
.ft__viz--txt { height: auto; place-items: start; }
.hyp rect { fill: var(--acc); opacity: .28; }
.hyp rect:nth-child(3) { opacity: .95; }
.hyp rect:nth-child(2), .hyp rect:nth-child(4) { opacity: .6; }
.curve { stroke-dasharray: 600; stroke-dashoffset: 600; }
.is-on .curve { animation: dash 1.8s var(--ease) .1s forwards; }
.ring { transition: stroke-dashoffset 1.4s var(--ease); }
.bars { display: flex; align-items: flex-end; gap: 10px; width: 100%; height: 100%; }
.bars i {
  flex: 1; height: 0; border-radius: 5px;
  background: linear-gradient(180deg, var(--acc), rgba(26,102,230,.3));
  transition: height 1s var(--ease);
}
.is-on .bars i { height: var(--h); }
.bars i:nth-child(2){ transition-delay:.06s } .bars i:nth-child(3){ transition-delay:.12s }
.bars i:nth-child(4){ transition-delay:.18s } .bars i:nth-child(5){ transition-delay:.24s }
.bars i:nth-child(6){ transition-delay:.3s }  .bars i:nth-child(7){ transition-delay:.36s }

.ft__big {
  font-family: var(--f-dis); font-weight: 600;
  font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.ft__big i { font-style: normal; font-size: .42em; opacity: .55; margin-left: 2px; }
.ft__sub { font-size: 14.5px; color: var(--muted-d); margin-top: 10px; }

/* ------------------------------------------------------------------
   11 · DATA VISUALIZATION
   ------------------------------------------------------------------ */
.dv { padding: var(--sec) 0; background: var(--ink); }
.dv__h { max-width: 20ch; margin-bottom: 78px; }
.dv__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line-d); }
.dv__i { background: var(--ink); padding: 40px 30px 34px; }
.dv__n {
  font-family: var(--f-dis); font-weight: 600;
  font-size: clamp(40px, 4.6vw, 72px); line-height: .95; letter-spacing: -.045em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.dv__n i { font-style: normal; font-size: .34em; opacity: .5; margin-left: 3px; }
.dv__l { color: var(--muted-d); margin-bottom: 26px; }
.dv__spark { width: 100%; height: 44px; color: var(--acc); opacity: .85; stroke-dasharray: 340; stroke-dashoffset: 340; }
.dv__i.is-in .dv__spark { animation: dash 1.8s var(--ease) .3s forwards; }
.dv__note { color: rgba(255,255,255,.5); margin-top: 34px; font-size: 10.5px; }

/* ------------------------------------------------------------------
   12 · EL OBJETO — pista sticky con lista a la izquierda y producto
   a la derecha. La lista manda: el ítem activo abre su párrafo y saca
   su vista. Estructura del bloque "24/7" de whoop.com.
   ------------------------------------------------------------------ */
.tb { background: var(--ink); }
.tb__track { height: 330vh; }
.tb__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center;
  overflow: hidden;
}
.tb__head { margin-bottom: clamp(28px, 4vw, 56px); }
.tb__head .h-lg { max-width: 16ch; }
.tb__body {
  display: grid; grid-template-columns: 1fr 1.05fr;
  align-items: center; gap: clamp(30px, 5vw, 80px);
}

.tb__list { display: grid; gap: 6px; }
.tb__i {
  padding: 12px 0 12px 26px;
  border-left: 2px solid var(--line-d);
  transition: border-color .5s var(--ease);
}
.tb__i.is-on { border-color: #fff; }
.tb__i h3 {
  font-family: var(--f-dis); font-weight: 600;
  font-size: clamp(19px, 2.1vw, 28px); letter-spacing: -.028em; line-height: 1.15;
  color: rgba(255,255,255,.42);
  transition: color .5s var(--ease);
}
.tb__i.is-on h3 { color: #fff; }
.tb__i p {
  max-width: 44ch; font-size: 15.5px; line-height: 1.55;
  color: var(--muted-d);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease), opacity .45s var(--ease), margin .6s var(--ease);
}
.tb__i.is-on p { max-height: 190px; opacity: 1; margin-top: 12px; }

/* ---- el producto ---- */
.tb__stage { position: relative; aspect-ratio: 1; }
.tb__stage::before {
  content: "";
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26,102,230,.14), transparent 72%);
  filter: blur(26px);
}
.tb__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 46px rgba(0,0,0,.65));
  opacity: 0; transform: scale(.965);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.tb__shot.is-on { opacity: 1; transform: none; }
.no-js .tb__shot:first-child { opacity: 1; transform: none; }

/* ---- la ficha, debajo de la pista ---- */
.tb__ficha { padding: clamp(70px, 9vw, 130px) var(--gut) var(--sec); }
.specs {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px; background: var(--line-d);
  border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d);
}
.specs__i { background: var(--ink); padding: 30px 26px 34px; }
.specs dt {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acc-soft); margin-bottom: 12px;
}
.specs dd { font-size: 15.5px; line-height: 1.5; color: var(--muted-d); }
.tb__note { color: rgba(255,255,255,.4); margin-top: 26px; font-size: 10.5px; }

/* ------------------------------------------------------------------
   13 · ALL DAY — recorrido horizontal, de la luz a la noche
   ------------------------------------------------------------------ */
.day { --p: 0; position: relative; height: 100vh; }
.day__sky { position: absolute; inset: 0; }
.day__dawn, .day__night { position: absolute; inset: 0; display: block; }
.day__dawn { background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F7 100%); }
.day__night {
  background: radial-gradient(80% 70% at 30% 30%, #131C2C 0%, #080B12 60%, #04060A 100%);
  opacity: var(--p);
}
.day__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; grid-template-rows: auto 1fr; align-content: center;
  padding: 116px 0 70px;
  overflow: hidden;
}
.day__head {
  padding: 0 var(--gut); max-width: 1320px; width: 100%; margin: 0 auto 46px;
  color: var(--text);
  transition: color .4s linear;
}
.day.is-night .day__head, .day.is-night .day__head .kicker { color: #fff; }
.day.is-night .day__head .kicker { opacity: .7; }

.day__track {
  display: flex; align-items: stretch; gap: 26px;
  padding: 0 var(--gut);
  will-change: transform;
}
.day__c {
  flex: 0 0 clamp(260px, 27vw, 380px);
  display: grid; align-content: start; gap: 12px;
  padding: 34px 30px 30px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(11,14,20,.09), 0 26px 60px -46px rgba(11,14,20,.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease);
}
.day.is-night .day__c {
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  color: #fff;
}
.day__t { color: var(--acc); }
.day__c h3 {
  font-family: var(--f-dis); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600;
  letter-spacing: -.03em;
}
.day__c p { font-size: 15.5px; color: var(--muted); }
.day.is-night .day__c p { color: var(--muted-d); }
.day__viz { margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.day.is-night .day__viz { border-color: var(--line-d); }
.day__met b {
  display: block;
  font-family: var(--f-dis); font-size: 34px; font-weight: 600; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.day__met b em { font-style: normal; font-size: .5em; opacity: .55; }
.day__met i {
  font-style: normal;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.day.is-night .day__met i { color: var(--muted-d); }

/* ------------------------------------------------------------------
   14 · APP
   ------------------------------------------------------------------ */
.app { position: relative; background: var(--ink); }
/* 300vh = pantalla de entrada más un tramo por cada uno de los tres pasos */
.app__track { height: 300vh; }
.app__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center;
  overflow: hidden;
}
.app__in {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px);
  align-items: center;
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: clamp(56px, 8svh, 96px) var(--gut) clamp(18px, 3.4svh, 48px);
}
.app__phone { display: grid; place-items: center; }
.phone {
  width: min(clamp(210px, 20vw, 268px), calc((100svh - clamp(150px, 22svh, 220px)) * 0.462));
  aspect-ratio: 620 / 1342;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(150deg, #333B4A, #14181F 46%, #2A313D);
  box-shadow: 0 50px 90px -50px #000, inset 0 0 0 1px rgba(255,255,255,.14);
}
.phone__body {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 32px;
  background: #04060B;
  overflow: hidden;
}
.phone__scr { position: relative; width: 100%; height: 100%; }
.ph {
  position: absolute; inset: 0;
  color: #fff;
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.ph.is-on { opacity: 1; transform: none; }
/* la captura llena la pantalla del teléfono: la proporción es la misma */
.ph__shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ph__top { position: absolute; top: 38px; left: 24px; color: var(--muted-d); font-size: 9.5px; }
.ph__ring { position: relative; display: grid; place-items: center; }
.ph__ring svg { width: 148px; height: 148px; }
.ph__big {
  position: absolute;
  font-family: var(--f-dis); font-size: 42px; font-weight: 600; letter-spacing: -.04em;
}
.ph__big i { font-style: normal; font-size: .42em; opacity: .55; }
.ph__cap { font-size: 13.5px; line-height: 1.45; color: var(--muted-d); text-align: center; }
.ph__rows { display: grid; gap: 1px; background: var(--line-d); border-radius: var(--r-sm); overflow: hidden; }
.ph__rows span {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 13px; background: #080B12;
  font-size: 12.5px;
}
.ph__rows i { font-style: normal; color: var(--muted-d); }
.ph__rows b { font-family: var(--f-dis); font-weight: 500; font-variant-numeric: tabular-nums; }
.ph__hyp { display: flex; align-items: flex-end; gap: 5px; height: 120px; }
.ph__hyp i {
  height: var(--h); width: var(--w); border-radius: 4px;
  background: linear-gradient(180deg, var(--acc), rgba(26,102,230,.28));
}
.ph__chart { height: 120px; display: grid; place-items: center; }

.app__txt .h-md { max-width: 16ch; margin-bottom: clamp(18px, 4svh, 64px); }
.app__steps { display: grid; gap: clamp(14px, 3svh, 46px); }
.app__s {
  padding-left: 24px;
  border-left: 2px solid var(--line-d);
  opacity: .34;
  transition: opacity .5s var(--ease), border-color .5s var(--ease);
}
.app__s.is-on { opacity: 1; border-color: var(--acc); }
.app__s h3 {
  font-family: var(--f-dis); font-size: clamp(21px, 2.1vw, 28px); font-weight: 600;
  letter-spacing: -.028em; margin-bottom: 10px; color: #fff;
}
.app__s p { font-size: 15.5px; color: var(--muted-d); max-width: 40ch; }

/* ------------------------------------------------------------------
   15 · ECOSYSTEM
   ------------------------------------------------------------------ */
.eco { padding: var(--sec) 0; background: var(--paper); }
.eco__h { max-width: 14ch; margin-bottom: 80px; }
.eco__map { position: relative; margin-bottom: 60px; }
.eco__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.wire {
  fill: none; stroke: var(--acc); stroke-width: 1.5;
  stroke-dasharray: 220; stroke-dashoffset: 220;
}
.eco__map.is-in .wire { animation: dash 1.1s var(--ease) forwards; }
.eco__map.is-in .wire:nth-child(2) { animation-delay: .3s; }
.eco__map.is-in .wire:nth-child(3) { animation-delay: .6s; }

.eco__nodes {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px;
}
.eco__n {
  display: grid; gap: 8px; justify-items: start;
  padding: 30px 26px;
  border-radius: var(--r-lg);
  background: var(--mist);
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), background .4s;
}
.eco__map.is-in .eco__n { opacity: 1; transform: none; }
.eco__map.is-in .eco__n:nth-child(2) { transition-delay: .12s; }
.eco__map.is-in .eco__n:nth-child(3) { transition-delay: .24s; }
.eco__map.is-in .eco__n:nth-child(4) { transition-delay: .36s; }
.eco__n:hover { background: #EDEFF3; }
.eco__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 5px rgba(26,102,230,.18);
  margin-bottom: 6px;
}
.eco__n b { font-family: var(--f-dis); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.eco__n i { font-style: normal; font-size: 14.5px; color: var(--muted); }
.eco__p { max-width: 60ch; }

/* ------------------------------------------------------------------
   16 · PRIVACY
   ------------------------------------------------------------------ */
.pv { padding: var(--sec) 0; background: var(--ink-2); }
.pv__in { max-width: 780px; }
.pv__lock { color: #fff; margin-bottom: 34px; }
.pv__box, .pv__sh { stroke-dasharray: 130; stroke-dashoffset: 130; }
.pv.is-in .pv__box, .pv.is-in .pv__sh { animation: dash 1.4s var(--ease) forwards; }
.pv .h-md { margin-bottom: 26px; }
.pv .lead { margin-bottom: 40px; }
.pv__l { display: flex; flex-wrap: wrap; gap: 10px; }
.pv__l li {
  padding: 10px 18px;
  border-radius: var(--pill);
  box-shadow: inset 0 0 0 1px var(--line-d);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-d);
}

/* ------------------------------------------------------------------
   17 · CTA FINAL
   ------------------------------------------------------------------ */
.end {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 140px var(--gut);
  overflow: hidden;
  background: radial-gradient(75% 60% at 50% 44%, #101827 0%, #06080D 62%, #04050A 100%);
  text-align: center;
}
.end__halo {
  position: absolute; top: 42%; left: 50%;
  width: 60vw; height: 60vw; max-width: 820px; max-height: 820px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,102,230,.28) 0%, rgba(26,102,230,.06) 44%, transparent 68%);
  filter: blur(38px);
}
.end__stage {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
/* el producto queda detrás del titular: sólo se atenúa. Ya viene recortado,
   así que una máscara radial aquí le comería los bordes */
.end__prod {
  width: min(78vh, 700px); height: auto;
  opacity: .38;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.7));
}
.end__in { position: relative; z-index: 3; display: grid; justify-items: center; }
.end__h { margin-bottom: 26px; }
.end__lead { margin-bottom: 40px; max-width: 42ch; }

.lines .ln { display: block; overflow: hidden; }
.lines .ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform .9s var(--ease);
}
.lines.is-in .ln > span { transform: none; }
.lines.is-in .ln:nth-child(2) > span { transition-delay: .1s; }
.lines.is-in .ln:nth-child(3) > span { transition-delay: .2s; }
.no-js .lines .ln > span { transform: none; }

.end__form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; position: relative; }
.end__form input {
  width: min(340px, 74vw);
  padding: 15px 22px;
  border: 0; border-radius: var(--pill);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--line-d);
  color: #fff; font-family: var(--f-txt); font-size: 15px;
  transition: box-shadow .3s var(--ease);
}
.end__form input::placeholder { color: rgba(255,255,255,.46); }
.end__form input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--acc); }
.end__msg {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 12px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--acc-soft);
  min-height: 18px;
}
.end__msg.is-err { color: #FF7A7A; }

/* ------------------------------------------------------------------
   18 · FOOTER
   ------------------------------------------------------------------ */
.foot { background: #04050A; color: #fff; padding: 88px var(--gut) 40px; }
.foot__in {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 46px;
  max-width: 1320px; margin: 0 auto 70px;
}
.foot__word {
  display: block;
  height: clamp(26px, 3.4vw, 44px); width: auto;
  margin-bottom: 20px;
}
.foot__claim { color: var(--muted-d); font-size: 15px; max-width: 30ch; }
.foot__t { color: rgba(255,255,255,.4); margin-bottom: 18px; }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__col a {
  font-size: 14.5px; color: var(--muted-d);
  justify-self: start;
  transition: color .3s var(--ease);
}
.foot__col a:hover { color: #fff; }

.foot__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  max-width: 1320px; margin: 0 auto;
  padding-top: 26px;
  border-top: 1px solid var(--line-d);
  font-size: 13px; color: rgba(255,255,255,.55);
}
.foot__legal { display: flex; gap: 20px; }
.foot__legal a:hover { color: #fff; }
.foot__disc { margin-left: auto; max-width: 46ch; font-size: 11.5px; }

/* ------------------------------------------------------------------
   19 · Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .hero__video { object-position: 66% center; }
  .dv__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .specs { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1120px) {
  .hdr__side { gap: 18px; }
  .hdr__link { font-size: 14px; }
}

@media (max-width: 960px) {
  /* la marca sigue centrada: a su lado sólo queda la hamburguesa. El idioma
     se va al menú, o en 375 px el logotipo se le echa encima. */
  .hdr__side--l { display: none; }
  .hdr__side--r .drop,
  .hdr__side--r .lang { display: none; }
  .burger { display: block; }
  .btn--sm { display: none; }
  .menu__lang { display: flex; justify-content: center; gap: 8px; margin-top: 30px; font-size: 13px; }

  /* en vertical el producto va arriba y el texto abajo: el velo pasa de
     lateral a horizontal para no tapar las bandas */
  .hero { align-items: flex-end; padding-top: 120px; padding-bottom: 110px; }
  .hero__in { max-width: 640px; }
  .hero__h1 { max-width: 100%; }
  .hero__video { object-position: center 34%; }
  .hero__veil {
    background:
      linear-gradient(to bottom,
        rgba(6,8,13,.72) 0%,
        rgba(6,8,13,.34) 26%,
        rgba(6,8,13,.72) 52%,
        rgba(6,8,13,.95) 72%,
        var(--ink) 100%),
      radial-gradient(70% 40% at 50% 30%, rgba(26,102,230,.14) 0%, transparent 70%);
  }
  .hero__foot { display: none; }

  /* el mosaico pasa arriba y el texto debajo, a una columna */
  .appx__in { grid-template-columns: 1fr; gap: 48px; }
  .appx__mosaic { order: -1; gap: 14px; padding: 16px; border-radius: 24px; }
  .appx__col { gap: 14px; }
  .appx__row { gap: 14px; }
  .appx__tile--device { padding: 18px 18px 0; }
  .appx__act { max-width: 100%; justify-items: stretch; }
  .appx__more { justify-self: center; }

  .intro__cols { grid-template-columns: 1fr; gap: 22px; margin-left: 0; }

  .flow { grid-template-columns: 1fr; gap: 16px; }
  .flow__i:not(:last-child)::after { display: none; }

  .ft__track { height: auto; }
  .ft__sticky { position: static; height: auto; padding: var(--sec) 0; overflow: visible; }
  .ft__head { margin-bottom: 56px; }
  .ft__body { grid-template-columns: 1fr; align-items: start; }
  .ft__i { padding: 26px 4px; }
  .ft__panel { position: relative; top: 0; order: -1; height: auto; aspect-ratio: 4 / 4; margin-bottom: 40px; }
  .ft__i p { max-height: 120px; opacity: 1; margin-top: 12px; }
  .ft__i h3, .ft__i .ft__n { color: var(--text); }

  /* el producto pasa arriba y la lista debajo */
  .tb__track { height: auto; }
  .tb__sticky { position: static; height: auto; padding: var(--sec) 0; overflow: visible; }
  .tb__body { grid-template-columns: 1fr; gap: 34px; }
  .tb__stage { order: -1; max-width: 420px; margin: 0 auto; }
  .tb__i p { max-height: 190px; opacity: 1; margin-top: 12px; }
  .tb__i h3 { color: #fff; }
  .tb__i { border-color: var(--line-d); }

  .app__track { height: auto; }
  .app__sticky { position: static; height: auto; overflow: visible; }
  .app__in { grid-template-columns: 1fr; gap: 0; padding: var(--sec) var(--gut); }
  .app__phone { position: sticky; top: 0; height: 78svh; }
  .phone { width: clamp(230px, 46vw, 292px); }
  .app__txt { padding-top: 40px; padding-bottom: 0; }
  .app__steps { gap: 34px; }
  .app__s { opacity: 1; border-color: var(--line-d); }

  .eco__wires { display: none; }
  .eco__nodes { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .end__prod { width: min(62vh, 420px); }

  .foot__in { grid-template-columns: 1fr 1fr; gap: 40px; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__disc { margin-left: 0; }
}

/* Bajo 760px el JS suelta el recorrido horizontal (measure() en main.js).
   El CSS tiene que soltarlo también o las tarjetas se salen del recorte. */
@media (max-width: 760px) {
  /* A este ancho cada pieza del mosaico caería a ~145 px y las capturas dejan
     de leerse. Se pasa a una columna y se quedan sólo las tres que aguantan;
     enseñar seis ilegibles es peor que enseñar tres claras. */
  .appx__mosaic { grid-template-columns: 1fr; }
  .appx__tile--s-off { display: none; }
  .appx__device { width: min(100%, 210px); }

  .day { height: auto; }
  .day__sticky { position: static; height: auto; padding: 80px 0 90px; overflow: visible; }
  .day__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 14px;
  }
  .day__track::-webkit-scrollbar { display: none; }
  .day__c { scroll-snap-align: start; }
  /* sin pista larga no hay progreso que oscurezca: la noche llega por clase */
  .day__night { opacity: var(--p); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .dv__grid { grid-template-columns: 1fr; }
  .dv__i { padding: 30px 22px 26px; }
  .specs { grid-template-columns: 1fr; }
  .eco__nodes { grid-template-columns: 1fr; }
  .day__c { flex-basis: 76vw; }
  .end__form input { width: 100%; }
  .end__form .btn { width: 100%; justify-content: center; }
  .foot__bar { flex-direction: column; align-items: flex-start; }
}

/* pantallas bajas: que el hero quepa entero */
@media (max-height: 720px) and (min-width: 961px) {
  .hero__h1 { font-size: clamp(40px, 6.4vw, 82px); }
  .hero__lead { margin-bottom: 28px; }
}

/* ------------------------------------------------------------------
   20 · Reduced motion — la página sigue completa, sin movimiento
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ft__track { height: auto; }
  .ft__sticky { position: static; height: auto; padding: var(--sec) 0; overflow: visible; }
  .ft__head { margin-bottom: 78px; }
  .ft__i { padding: 26px 4px; }
  .ft__panel { position: sticky; top: 118px; height: auto; aspect-ratio: 4 / 4.6; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* el vídeo del hero lo pausa main.js; aquí se quita sólo su zoom */
  .hero__video { transform: none !important; }
  .appx__tile { opacity: 1 !important; transform: none !important; }
  .appx__col { transform: none !important; }
  .appx__mosaic::after { display: none; }
  .appx__device { animation: none !important; }
  .reveal, .words .w, .eco__n { opacity: 1 !important; transform: none !important; }
  .lines .ln > span { transform: none !important; }
  .day { height: auto; }
  .day__sticky { position: static; height: auto; }
  .day__track { flex-wrap: wrap; }
  .app__track { height: auto; }
  .app__sticky { position: static; height: auto; overflow: visible; }
  .app__in { padding: var(--sec) var(--gut); align-items: start; }
  .app__phone { position: static; height: auto; padding: 40px 0; }
  .phone { width: clamp(230px, 22vw, 292px); }
  .ecg, .curve, .wire, .dv__spark { stroke-dashoffset: 0 !important; }
  .bars i { height: var(--h); }
}