/* Smart Control IA — escenario negro cinematográfico.
   Lienzo de referencia 1487 × 1058: 1u = un píxel de diseño ligado al alto de la pantalla. */
:root {
  --ink: #fafafa;
  --muted: #a7a6a6;
  --nav: #b6b5b5;
  --strip: #8b8a8a;
  --pill: #ffffff;
  --pill-ink: #050505;
  --negro: #050505;
  --alterno: #0a0a0a;
  --linea: rgba(250, 250, 250, 0.09);
  --linea-fuerte: rgba(250, 250, 250, 0.18);
  --tenue: #858484; /* 5:1 sobre el negro: el mínimo para texto */

  --u: calc(100vh / 1058);
  --uw: calc(100vw / 1487);
  --h: clamp(var(--u), calc(var(--u) * .65 + var(--uw) * .35), calc(var(--u) * 1.16));
  --ease: cubic-bezier(.22, 1, .36, 1);

  --ancho: 1340px;
  --margen: clamp(20px, 5vw, 75px);
}
@supports (height: 100dvh) { :root { --u: calc(100dvh / 1058); } }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--negro);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--negro);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}
html.menu-abierto, html.menu-abierto body { overflow: hidden; }
img, svg, video { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

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

.saltar {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--pill); color: var(--pill-ink); padding: 10px 18px; border-radius: 999px; font-weight: 600;
}
.saltar:focus { top: 16px; }

/* ---------- Píldoras y enlaces fantasma ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pill); color: var(--pill-ink);
  border: 0; border-radius: 999px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.pill > span { display: block; transform: translateY(calc(1 * var(--u))); }
.pill:hover { background: #e9e9e9; }
.pill:active { transform: scale(.98); }
.ghost { color: #fff; font-weight: 500; white-space: nowrap; transition: opacity .25s var(--ease); }
.ghost:hover { opacity: .72; }

/* ---------- Barra superior (fija sobre el escenario) ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: calc(103 * var(--u));
  transition: background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.con-fondo {
  background: rgba(5, 5, 5, .72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: var(--linea);
}
.brand {
  position: absolute; left: calc(75 * var(--u)); top: calc(27 * var(--u));
  height: calc(48.5 * var(--u)); display: flex; align-items: center; gap: calc(15 * var(--u));
}
.brand svg { flex: none; width: calc(31.5 * var(--u)); height: calc(48.5 * var(--u)); }
/* Nombre de la marca: plateado, claro arriba y más oscuro abajo, como el símbolo */
.brand__nombre {
  white-space: nowrap; font-size: calc(25 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: -.025em;
  color: transparent;
  background: linear-gradient(180deg, #f5f5f5 0%, #d2d2d2 50%, #8e8e8e 100%);
  -webkit-background-clip: text; background-clip: text;
  padding-bottom: .08em;
}
.links {
  position: absolute; left: 50%; top: calc(51 * var(--u));
  transform: translate(-50%, -50%);
  display: flex; white-space: nowrap;
  font-size: calc(19 * var(--u)); font-weight: 400; line-height: 1.2; color: var(--nav);
}
.links a { transition: color .25s var(--ease); }
.links a:hover { color: var(--ink); }
.links a + a { margin-left: calc(24.5 * var(--u)); }
.links a:nth-child(3) { margin-left: calc(23.5 * var(--u)); }
.links a:nth-child(4) { margin-left: calc(26 * var(--u)); }
.pill-nav {
  position: absolute; right: calc(75.4 * var(--u)); top: calc(27 * var(--u));
  width: calc(175 * var(--u)); height: calc(49 * var(--u));
  font-size: calc(20.6 * var(--u));
}
.burger { display: none; }
.menu { display: none; }

/* ---------- Escenario ---------- */
.stage {
  position: relative;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--negro);
}
.plate { position: absolute; inset: 0; pointer-events: none; }
.plate-video {
  position: absolute;
  left: 50%; top: calc(1 * var(--u));
  width: calc(1492 * var(--u)); height: calc(1054 * var(--u));
  transform: translateX(calc(-50% - calc(0.5 * var(--u))));
  object-fit: cover;
  pointer-events: none;
}
.plate::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(5,5,5,0) 78.8%, rgba(5,5,5,.23) 79.6%, rgba(5,5,5,.45) 81.4%,
      rgba(5,5,5,.75) 83.3%, rgba(5,5,5,.84) 85.2%, rgba(5,5,5,.888) 88%,
      rgba(5,5,5,.905) 91%, rgba(5,5,5,.96) 95%, #050505 100%),
    linear-gradient(to right,
      #050505 calc(50% - 746 * var(--u)),
      transparent calc(50% - 676 * var(--u)),
      transparent calc(50% + 676 * var(--u)),
      #050505 calc(50% + 746 * var(--u)));
}

/* Titular en mayúsculas, algo más pequeño; subtítulo y botones suben lo mismo que se achica */
.headline {
  position: absolute; left: calc(75.5 * var(--u)); top: calc(230.5 * var(--u));
  font-size: calc(58 * var(--h)); line-height: calc(66 * var(--h));
  font-weight: 400; letter-spacing: calc(.6 * var(--h)); text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.headline span, .sub span { display: block; }
/* La palabra que rota en blanco puro con un brillo de luz; «bajo control.» en el plateado de la marca */
.headline .rotador b { color: #fff; text-shadow: 0 0 calc(26 * var(--h)) rgba(255, 255, 255, .45), 0 0 calc(4 * var(--h)) rgba(255, 255, 255, .35); }
.headline > span:last-child {
  color: transparent;
  background: linear-gradient(180deg, #dcdcdc 0%, #b4b4b4 55%, #8a8a8a 100%);
  -webkit-background-clip: text; background-clip: text;
}
.sub {
  position: absolute; left: calc(75.5 * var(--u));
  top: calc(230.5 * var(--u) + 160 * var(--h));
  font-size: calc(20.7 * var(--h)); line-height: calc(23.5 * var(--h));
  font-weight: 400; word-spacing: calc(1.8 * var(--h));
  color: var(--muted); white-space: nowrap;
}
.actions {
  position: absolute; left: calc(74.9 * var(--u));
  top: calc(230.5 * var(--u) + 235.5 * var(--h));
  display: flex; align-items: center; gap: calc(45 * var(--h));
}
.pill-cta {
  min-width: calc(175.6 * var(--h)); height: calc(50 * var(--h));
  padding: 0 calc(26 * var(--h));
  font-size: calc(20.6 * var(--h));
}
.actions .ghost { font-size: calc(20.6 * var(--h)); letter-spacing: calc(.12 * var(--h)); }

/* Franja inferior */
.logos {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: calc(741 * var(--u));
  transform: translateX(calc(-50% + 20 * var(--u)));
  color: var(--strip);
  pointer-events: none;
}
.lg { position: absolute; }
.lg svg { position: absolute; left: 0; top: 0; }
.lg .word {
  position: absolute; white-space: nowrap; line-height: 1;
  font-family: 'IpsumMark', 'Manrope', sans-serif; font-weight: 700; letter-spacing: -0.01em;
}
.lg1 { left: calc(-0.5 * var(--u)); top: calc(994.7 * var(--u)); }
.lg1 svg { width: calc(30.5 * var(--u)); height: calc(31 * var(--u)); }
.lg1 .word { left: calc(37 * var(--u)); top: calc(5.6 * var(--u)); font-size: calc(18.1 * var(--u)); }
.lg2 { left: calc(206.5 * var(--u)); top: calc(995.7 * var(--u)); }
.lg2 svg { width: calc(24.5 * var(--u)); height: calc(30 * var(--u)); }
.lg2 .word { left: calc(31 * var(--u)); top: calc(7.3 * var(--u)); font-size: calc(18.5 * var(--u)); }
.lg3 { left: calc(416.5 * var(--u)); top: calc(996.7 * var(--u)); }
.lg3 svg { width: calc(28.5 * var(--u)); height: calc(28 * var(--u)); }
.lg3 .word { left: calc(35 * var(--u)); top: calc(7.3 * var(--u)); font-size: calc(16.15 * var(--u)); }
.lg4 { left: calc(620.5 * var(--u)); top: calc(998.7 * var(--u)); }
.lg4 svg { width: calc(28.5 * var(--u)); height: calc(25.5 * var(--u)); }
.lg4 .word { left: calc(37 * var(--u)); top: calc(8.3 * var(--u)); font-size: calc(15.3 * var(--u)); }
.dot {
  display: inline-block; width: .09em; height: .09em; border-radius: 50%; background: currentColor;
  vertical-align: .62em; margin-left: .06em;
}

/* El escenario completo se mueve con el desplazamiento (--p: 0 arriba, 1 al salir) */
.hero { position: absolute; inset: 0; }
.camara { position: absolute; inset: 0; }
.franja { position: absolute; left: 0; right: 0; z-index: 3; height: 0; background: var(--negro); pointer-events: none; }
.franja--arriba { top: 0; }
.franja--abajo { bottom: 0; }

/* ---------- Portada: titular que rota, polvo en la luz, profundidad e indicador ---------- */
.headline .rotador { display: inline-grid; vertical-align: top; }
.rotador b {
  grid-area: 1 / 1; font-weight: inherit; white-space: nowrap;
  opacity: 0; transform: translateY(.32em); filter: blur(10px);
  transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease);
}
.rotador b.activa { opacity: 1; transform: none; filter: none; }
.rotador b.sale { opacity: 0; transform: translateY(-.32em); filter: blur(10px); }

.polvo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

.desliza {
  position: absolute; z-index: 2; right: calc(75.4 * var(--u)); bottom: calc(58 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: calc(13 * var(--u)); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--strip);
  opacity: calc(1 - var(--p, 0) * 3);
}
.desliza span { writing-mode: vertical-rl; }
.desliza i { position: relative; width: 1px; height: calc(64 * var(--u)); overflow: hidden; background: rgba(250, 250, 250, .16); }
.desliza i::after { content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: 18px; border-radius: 3px; background: #fff; box-shadow: 0 0 8px #fff; }
.desliza:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  /* Cámara que respira y se mueve con el ratón (propiedades sueltas: no chocan con las animaciones de transform) */
  .camara {
    translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -12px);
    transition: translate 1.4s cubic-bezier(.16, 1, .3, 1);
  }
  .headline { translate: calc(var(--mx, 0) * 12px) calc(var(--my, 0) * 7px); transition: translate 1.1s cubic-bezier(.16, 1, .3, 1); }
  .sub { translate: calc(var(--mx, 0) * 7px) calc(var(--my, 0) * 4px); transition: translate 1.1s cubic-bezier(.16, 1, .3, 1); }
  .actions { translate: calc(var(--mx, 0) * 4px) calc(var(--my, 0) * 3px); transition: translate 1.1s cubic-bezier(.16, 1, .3, 1); }
  .pill-cta { transition: background-color .25s var(--ease), translate .5s cubic-bezier(.16, 1, .3, 1); }

  .polvo { animation: fade 2.4s ease 1.4s both; }
  .desliza span, .desliza i { animation: fade 1.4s ease 2s both; }
  .desliza i::after { animation: gota 2.2s cubic-bezier(.65, 0, .35, 1) 2.4s infinite; }
}
@keyframes respirar { from { scale: 1; } to { scale: 1.06; } }
@keyframes gota { 0% { transform: translateY(-20px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(calc(64 * var(--u))); opacity: 0; } }

/* ---------- Capas de película: apertura, grano y avance ---------- */
.intro { display: none; }
.grano {
  position: fixed; inset: -120px; z-index: 80; pointer-events: none; opacity: .055;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 45; pointer-events: none; }
.progreso span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, rgba(250, 250, 250, .15), var(--ink));
}
.topbar { transition: transform .55s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease); }

/* Brillo que cruza las píldoras al pasar el cursor */
.pill { overflow: hidden; isolation: isolate; }
.pill-cta, .pill-menu, .pill-enviar { position: relative; } /* .pill-nav ya es absoluta */
.pill::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(5, 5, 5, .1) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.pill:hover::after { transform: translateX(120%); }
.ghost::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .5em;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: translateY(-.08em) rotate(45deg); transition: transform .35s var(--ease);
}
.ghost:hover::after { transform: translate(.25em, -.08em) rotate(45deg); }
.menu-foot .ghost::after { display: none; }

/* ---------- Entrada (solo con movimiento permitido) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(calc(14 * var(--u))); filter: blur(8px); } }
@keyframes riseNav {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14 * var(--u))); filter: blur(8px); }
  to { opacity: 1; transform: translate(-50%, -50%); filter: none; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes telonArriba { to { transform: translateY(-100%); } }
@keyframes telonAbajo { to { transform: translateY(100%); } }
@keyframes introMarca {
  0% { opacity: 0; transform: scale(.9); filter: blur(8px); }
  35% { opacity: 1; transform: none; filter: none; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.08); filter: blur(4px); }
}
@keyframes introFin { to { visibility: hidden; } }
@keyframes dolly { from { transform: scale(1.16); filter: brightness(.35); } }
@keyframes grano {
  0% { transform: translate(0, 0); } 20% { transform: translate(-45px, 25px); } 40% { transform: translate(30px, -40px); }
  60% { transform: translate(-25px, -15px); } 80% { transform: translate(40px, 30px); } 100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Apertura: el símbolo en negro y el telón que se abre en dos */
  .intro { display: block; position: fixed; inset: 0; z-index: 90; pointer-events: none; animation: introFin 0s linear 1.8s forwards; }
  .intro__barra { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--negro); }
  .intro__barra--arriba { top: 0; animation: telonArriba 1.15s cubic-bezier(.76, 0, .24, 1) .6s forwards; }
  .intro__barra--abajo { bottom: 0; animation: telonAbajo 1.15s cubic-bezier(.76, 0, .24, 1) .6s forwards; }
  .intro__marca {
    position: absolute; left: 50%; top: 50%; width: 42px; height: 65px; margin: -32.5px 0 0 -21px;
    animation: introMarca 1.2s var(--ease) both;
  }
  .camara { animation: dolly 3.6s cubic-bezier(.16, 1, .3, 1) .45s both, respirar 20s ease-in-out 4s infinite alternate; }
  .grano { animation: grano 1s steps(5) infinite; }

  .brand, .pill-nav { animation: rise .9s var(--ease) 1.05s both; }
  .links { animation: riseNav .9s var(--ease) 1.05s both; }
  .headline { animation: rise 1.1s var(--ease) 1.12s both; }
  .sub { animation: rise 1.1s var(--ease) 1.24s both; }
  .actions { animation: rise 1.1s var(--ease) 1.34s both; }
  .lg { animation: fade 1.4s ease 1.55s both; }

  /* Salida del escenario: franjas de cine, zoom lento y texto que se aleja */
  .plate { transform: scale(calc(1 + var(--p, 0) * .12)); transform-origin: 50% 62%; }
  .franja { height: calc(var(--p, 0) * 13vh); }
  .hero { transform: translate3d(0, calc(var(--p, 0) * -110px), 0); opacity: calc(1 - var(--p, 0) * 1.7); }
  .logos { opacity: calc(1 - var(--p, 0) * 2.4); }

  /* Revelados (las clases las agrega app.js: sin JS todo queda visible) */
  .revelar { opacity: 0; transform: translateY(20px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
  .revelar.visible { opacity: 1; transform: none; filter: none; }

  .titulo-partido .pal { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .1em; margin: -.12em 0 -.1em; }
  .titulo-partido .pal > span {
    display: inline-block; transform: translateY(110%) rotate(3deg); transform-origin: left bottom;
    transition: transform 1.15s var(--ease) calc(var(--i, 0) * 42ms);
  }
  .titulo-partido.visible .pal > span { transform: none; }

  .escalonado > * {
    --d: calc(var(--i, 0) * 95ms + .12s);
    opacity: 0; transform: translateY(28px);
    transition: opacity 1s var(--ease) var(--d), transform 1s var(--ease) var(--d), background-size 1.5s var(--ease) var(--d);
  }
  .escalonado.visible > * { opacity: 1; transform: none; background-size: 100% 1px; }
  .escalonado > .capacidad, .escalonado > .paso {
    border-top-color: transparent;
    background: linear-gradient(var(--linea-fuerte), var(--linea-fuerte)) no-repeat left top / 0 1px;
  }
  .caso__lista.escalonado > li {
    border-top-color: transparent;
    background: linear-gradient(var(--linea), var(--linea)) no-repeat left top / 0 1px;
  }
  .ficha.escalonado > .ficha__fila {
    border-bottom-color: transparent;
    background: linear-gradient(var(--linea), var(--linea)) no-repeat left bottom / 0 1px;
  }

  /* Íconos que se dibujan */
  .escalonado .capacidad svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.9s var(--ease) calc(var(--d) + .3s); }
  .escalonado.visible .capacidad svg * { stroke-dashoffset: 0; }
}

/* ---------- Manifiesto: escena en dos actos (caos → orden) ---------- */
.manifiesto { position: relative; border-top: 1px solid var(--linea); }
.manifiesto__fijo { position: relative; padding: clamp(110px, 14vw, 190px) var(--margen); }
.manifiesto__actos { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 1.2em; }
.acto {
  font-size: clamp(1.75rem, 3.7vw, 3.45rem); line-height: 1.24; font-weight: 400; letter-spacing: -.005em;
  max-width: 21.5em; color: var(--ink); text-wrap: pretty;
}
.acto--2 { font-size: clamp(2.1rem, 5.1vw, 4.9rem); line-height: 1.08; letter-spacing: -.015em; max-width: 15em; }
.acto__cierre { display: block; margin-top: .18em; }
.acto em { font-style: normal; position: relative; display: inline-block; }
.acto em::after {
  content: ""; position: absolute; left: 0; right: .2em; bottom: -.06em; height: 2px; background: var(--ink);
  transform: scaleX(var(--u, 1)); transform-origin: left;
}
.tachable { position: relative; }
.tachable::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; top: 56%; height: 2px; background: rgba(250, 250, 250, .85);
  transform: scaleX(var(--t, 0)); transform-origin: left; pointer-events: none;
}
.caos, .portal, .destello, .manifiesto__capitulo, .manifiesto__pista { display: none; }

.mov .manifiesto { height: 420vh; }
.mov .manifiesto__fijo {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: 0 var(--margen);
  display: flex; align-items: center;
}
.mov .manifiesto__actos { width: 100%; position: relative; z-index: 2; }
.mov .acto { grid-area: 1 / 1; align-self: center; will-change: transform, opacity; }
.mov .acto .pal { display: inline-block; }
.mov .acto--1 .pal { opacity: .12; }
.mov .acto--2 .pal { opacity: 0; }
.mov .acto em { --u: 0; }

/* Fragmentos del trabajo manual flotando en profundidad */
.mov .caos { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.frag {
  position: absolute; white-space: nowrap; opacity: 0; will-change: transform, opacity;
  font-size: clamp(.8rem, 1.05vw, 1.02rem); font-weight: 500; letter-spacing: .01em; color: #c9c8c8;
  padding: .6em 1em; border: 1px solid rgba(250, 250, 250, .2); border-radius: 10px; background: rgba(250, 250, 250, .04);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  font-variant-numeric: tabular-nums;
}
.frag--fuerte { color: var(--ink); border-color: rgba(250, 250, 250, .32); }

/* Portal de luz (la puerta del video) y destello de corte */
.mov .portal {
  display: block; position: absolute; left: 50%; top: 50%; z-index: 1; width: 2px; height: 46vh; margin: -23vh 0 0 -1px;
  background: linear-gradient(to bottom, transparent, #fff 18%, #fff 82%, transparent);
  box-shadow: 0 0 28px 6px rgba(255, 255, 255, .28), 0 0 90px 20px rgba(255, 255, 255, .1);
  transform: scaleY(0); opacity: 0; pointer-events: none;
}
.mov .destello { display: block; position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }

/* Orden: el mismo trabajo, resuelto y alineado */
.orden { display: none; }
.mov .acto--2 { max-width: 11.5em; }
.mov .orden {
  display: block; position: absolute; right: var(--margen); top: 50%; z-index: 2; transform: translateY(-50%);
  width: min(32vw, 440px); border-top: 1px solid var(--linea-fuerte);
}
.orden li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--linea); opacity: 0; will-change: transform, opacity;
}
.orden li span:first-child { display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--ink); }
.orden li span:first-child::before {
  content: ""; width: 9px; height: 5px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: translateY(-2px) rotate(-45deg); flex: none;
}
.orden li span:last-child { font-size: .85rem; color: var(--muted); text-align: right; }

/* Rótulo de capítulo que cambia con el acto */
.mov .manifiesto__capitulo {
  display: block; position: absolute; top: clamp(96px, 13vh, 140px); left: var(--margen); z-index: 2; margin: 0;
  font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--strip);
}
.manifiesto__capitulo span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.manifiesto__capitulo span::before {
  content: ""; display: inline-block; width: 22px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 12px;
}

.mov .manifiesto__pista {
  display: flex; align-items: center; gap: 14px; position: absolute; left: var(--margen); bottom: 44px; z-index: 2; margin: 0;
  font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--strip);
}
.mov .manifiesto__pista::before {
  content: ""; width: 1px; height: 38px; background: linear-gradient(transparent, var(--ink));
  animation: pista 2.2s var(--ease) infinite;
}
@keyframes pista {
  0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Cinta de integraciones ---------- */
.cinta { padding: clamp(80px, 10vw, 136px) 0; border-top: 1px solid var(--linea); overflow: hidden; }
.cinta__titulo {
  text-align: center; font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--strip); margin-bottom: clamp(32px, 4vw, 52px); padding: 0 var(--margen);
}
.cinta__pista {
  display: flex; width: max-content;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.cinta__lista { display: flex; flex: none; align-items: center; }
.cinta__lista li {
  display: flex; align-items: center; white-space: nowrap;
  font-size: clamp(2.4rem, 6.4vw, 6rem); font-weight: 300; line-height: 1.15; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(250, 250, 250, .34);
  transition: color .4s var(--ease), -webkit-text-stroke-color .4s var(--ease);
}
.cinta__lista li:nth-child(3n + 1) { color: var(--ink); -webkit-text-stroke: 0; }
.cinta__lista li::after {
  content: ""; width: .14em; height: .14em; border-radius: 50%; background: var(--strip); margin: 0 .55em; flex: none;
}
.cinta__lista li:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .cinta__pista { animation: cinta 46s linear infinite; }
  .cinta:hover .cinta__pista { animation-play-state: paused; }
}
@keyframes cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cinta__pista { width: auto; flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .cinta__lista { flex-wrap: wrap; justify-content: center; }
  .cinta__lista[aria-hidden="true"] { display: none; }
}

/* ================================================================
   Secciones de contenido (debajo del escenario)
   ================================================================ */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.seccion {
  padding: clamp(96px, 12vw, 168px) 0;
  border-top: 1px solid var(--linea);
  scroll-margin-top: 40px;
}
.seccion--alterna { background: var(--alterno); }

.eyebrow {
  font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--strip); margin-bottom: 22px;
}
h2 {
  font-size: clamp(2.1rem, 4.3vw, 3.65rem); line-height: 1.1; font-weight: 400;
  letter-spacing: .002em; color: var(--ink); text-wrap: balance;
}
h3 { font-size: 1.15rem; line-height: 1.35; font-weight: 500; color: var(--ink); }
.bajada { color: var(--muted); font-size: 1.125rem; line-height: 1.6; max-width: 38em; }

.seccion__cabeza { max-width: 860px; margin-bottom: clamp(48px, 6vw, 80px); }
.seccion__cabeza h2 { margin-bottom: 24px; }

.dividido {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 7vw, 120px); align-items: start;
}
.dividido > .seccion__cabeza { margin-bottom: 0; }
.seccion__cabeza--fija { position: sticky; top: 140px; }

/* ---------- Qué hacemos: cinco procesos, de «a mano» a «con la aplicación» ---------- */
/* Sin movimiento o sin JS: filas de antes y después */
.trans { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.trans__lateral, .viz { display: none; }
.esc { display: grid; grid-template-columns: minmax(160px, .65fr) 2fr; gap: 16px 48px; padding: 30px 0; border-bottom: 1px solid var(--linea); }
.esc:first-child { border-top: 1px solid var(--linea-fuerte); }
.esc__titulo { font-size: 1.2rem; font-weight: 500; }
.esc__textos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; }
.esc__etiqueta {
  display: block; margin-bottom: 8px; font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--strip);
}
.esc__antes { color: var(--tenue); }
.esc__despues { color: var(--ink); }

/* Con movimiento: escena fija que recorre los cinco procesos */
.mov .trans { max-width: none; padding: 0; height: 660vh; margin-top: clamp(16px, 3vw, 40px); }
.mov .trans__fijo {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  max-width: var(--ancho); margin: 0 auto; padding: 96px var(--margen) 48px;
  display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: center;
}
.mov .trans__lateral { display: block; }
.trans__contador { margin-bottom: 26px; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--strip); }
.trans__contador b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.trans__indice li {
  position: relative; padding: 14px 0; border-bottom: 1px solid var(--linea);
  font-size: .98rem; color: var(--tenue); transition: color .4s var(--ease);
}
.trans__indice li::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(var(--s, 0)); transform-origin: left;
}
.trans__indice li.activo { color: var(--ink); }

.mov .trans__escenas { position: relative; height: min(640px, calc(100svh - 150px)); }
.mov .esc {
  position: absolute; inset: 0; padding: 0; border: 0; opacity: 0; will-change: opacity, transform;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.4fr); grid-template-rows: 1fr auto auto 1fr; gap: 0 clamp(28px, 4vw, 64px);
}
.mov .esc__titulo {
  grid-column: 1; grid-row: 2; margin-bottom: 22px;
  font-size: clamp(2rem, 3.5vw, 3.3rem); font-weight: 400; line-height: 1.05; letter-spacing: -.012em;
}
.mov .esc__textos { grid-column: 1; grid-row: 3; grid-template-columns: minmax(0, 1fr); }
.mov .esc__antes, .mov .esc__despues { grid-area: 1 / 1; font-size: 1.15rem; line-height: 1.55; }
.mov .esc__antes {
  --o: clamp(0, calc(1 - var(--x, 0) * 1.7), 1);
  opacity: var(--o); transform: translateY(calc(var(--x, 0) * -18px)); color: var(--muted);
}
.mov .esc__despues {
  --o: clamp(0, calc(var(--x, 0) * 1.7 - .7), 1);
  opacity: var(--o); transform: translateY(calc((1 - var(--x, 0)) * 18px));
}

/* Pantalla: la capa «hoy» y la capa «con la aplicación», separadas por un corte de luz */
.mov .viz {
  display: block; grid-column: 2; grid-row: 1 / -1; align-self: center; position: relative; overflow: hidden;
  height: min(540px, calc(100svh - 200px)); border: 1px solid var(--linea-fuerte); border-radius: 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(250, 250, 250, .05), transparent 62%), #080808;
}
.viz__capa { position: absolute; inset: 0; padding: clamp(22px, 2.6vw, 38px); display: flex; flex-direction: column; justify-content: center; }
.viz__antes { opacity: calc(1 - var(--x, 0) * .7); filter: blur(calc(var(--x, 0) * 3px)); }
.viz__despues {
  clip-path: inset(0 calc((1 - var(--x, 0)) * 100%) 0 0);
  background: radial-gradient(ellipse at 50% 0%, rgba(250, 250, 250, .07), transparent 62%), #0b0b0b;
}
.viz__corte {
  position: absolute; top: 0; bottom: 0; left: calc(var(--x, 0) * 100%); width: 2px; margin-left: -1px; pointer-events: none;
  background: #fff; opacity: var(--c, 0);
  box-shadow: 0 0 22px 5px rgba(255, 255, 255, .35), 0 0 80px 16px rgba(255, 255, 255, .1);
}
.viz__pie { margin-top: 18px; font-size: .8rem; color: var(--muted); }

/* Elementos de la capa «con la aplicación» que se arman en orden (--b: 0 → 1) */
.aparece { --k: clamp(0, calc(var(--b, 0) * 6 - var(--n, 0)), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 14px)); }
.aparece:nth-child(2) { --n: .7; }
.aparece:nth-child(3) { --n: 1.4; }
.aparece:nth-child(4) { --n: 2.1; }
.aparece:nth-child(5) { --n: 2.8; }
.viz__pie.aparece { --n: 3.6; }

/* Restos sueltos de la capa «hoy» */
.nota {
  position: absolute; white-space: nowrap; font-size: .85rem; color: #c9c8c8;
  padding: .55em .95em; border: 1px solid rgba(250, 250, 250, .2); border-radius: 10px; background: rgba(250, 250, 250, .045);
  transform: translate(-50%, -50%) translateY(calc((var(--t, .5) - .5) * var(--v, 30px))) rotate(var(--r, 0deg));
}
.nota--mano { font-style: italic; border-style: dashed; color: var(--ink); }
.n1 { left: 28%; top: 22%; --r: -7deg; --v: -60px; }
.n2 { left: 70%; top: 30%; --r: 5deg; --v: 46px; }
.n3 { left: 33%; top: 62%; --r: 4deg; --v: 70px; }
.n4 { left: 70%; top: 74%; --r: -5deg; --v: -40px; }
.n5 { left: 54%; top: 47%; --r: -3deg; --v: 26px; }
.hoja ~ .nota { left: 76%; top: 12%; }

.cuenta { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 40px); }
.cuenta p { display: grid; gap: 6px; text-align: center; }
.cuenta span { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--strip); }
.cuenta b { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; }
.cuenta__dif { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 200; color: var(--muted); }
.cuenta__nota { margin-top: 24px; text-align: center; font-size: .9rem; font-style: italic; color: var(--muted); }

.chat { display: grid; gap: 10px; width: 100%; max-width: 400px; margin: 0 auto; }
.burbuja { justify-self: start; max-width: 82%; padding: 10px 15px; border-radius: 16px 16px 16px 4px; background: rgba(250, 250, 250, .07); font-size: .9rem; }
.burbuja--otra { justify-self: end; border-radius: 16px 16px 4px 16px; background: rgba(250, 250, 250, .16); }

.hoja {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: .8rem; transform: rotate(-1deg);
  border-top: 1px solid rgba(250, 250, 250, .14); border-left: 1px solid rgba(250, 250, 250, .14);
}
.hoja span {
  padding: 11px 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid rgba(250, 250, 250, .14); border-bottom: 1px solid rgba(250, 250, 250, .14);
}
.hoja span:nth-child(-n + 4) { color: var(--ink); font-weight: 600; background: rgba(250, 250, 250, .04); }

/* Visuales de la capa «con la aplicación» */
.tabla { display: grid; font-size: .85rem; font-variant-numeric: tabular-nums; }
.tabla__fila { display: grid; grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.tabla__cabeza { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--strip); }
.tabla__fila span:not(:first-child) { text-align: right; color: var(--muted); }
.tabla .mejor { justify-self: end; padding: 2px 10px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-weight: 600; }
.tabla i { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--linea-fuerte); border-radius: 999px; font-size: .68rem; font-style: normal; color: var(--ink); }

.oc { display: grid; gap: 10px; }
.oc__num { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 300; letter-spacing: -.01em; }
.oc__prov { font-size: .9rem; color: var(--muted); }
.oc__pasos { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 16px; padding-top: 26px; }
.oc__pasos::before, .oc__pasos::after { content: ""; position: absolute; top: 5px; left: 5px; width: 75%; height: 1px; background: var(--linea-fuerte); }
.oc__pasos::after { background: var(--ink); transform: scaleX(calc(clamp(0, var(--b, 0) * 1.6 - .3, 1) * .667)); transform-origin: left; }
.oc__pasos li { position: relative; font-size: .8rem; color: var(--muted); }
.oc__pasos li::before {
  content: ""; position: absolute; left: 0; top: -26px; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--linea-fuerte); background: #0b0b0b;
}
.oc__pasos li::after {
  content: ""; position: absolute; left: 0; top: -26px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink);
  opacity: clamp(0, calc(var(--b, 0) * 5 - var(--m, 9)), 1);
}
.oc__pasos li:nth-child(1)::after { --m: .4; }
.oc__pasos li:nth-child(2)::after { --m: 1.4; }
.oc__pasos li:nth-child(3)::after { --m: 2.4; }
.oc__pasos li:nth-child(3) { color: var(--ink); }
.oc__boton { justify-self: start; padding: 9px 16px; border: 1px solid var(--linea-fuerte); border-radius: 999px; font-size: .85rem; }

.stock { display: grid; }
.stock__fila { display: grid; grid-template-columns: 1.3fr 1.4fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: .88rem; }
.stock__fila span:last-child { min-width: 92px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.stock__barra { position: relative; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(250, 250, 250, .1); }
.stock__barra::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(calc(var(--k, 0) * var(--lleno, 1))); transform-origin: left; }
.b4 { --lleno: .55; }
.stock__fila--alerta span:last-child { justify-self: end; padding: 2px 10px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-weight: 600; }

.aprob { position: relative; display: grid; padding-left: 36px; }
.aprob::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: 24px; width: 1px; background: var(--linea-fuerte); }
.aprob li { position: relative; display: grid; gap: 2px; padding: 14px 0; }
.aprob li::before { content: ""; position: absolute; left: -36px; top: 17px; width: 21px; height: 21px; border-radius: 50%; background: var(--pill); }
.aprob li::after {
  content: ""; position: absolute; left: -29px; top: 23px; width: 8px; height: 4px;
  border-left: 1.6px solid var(--pill-ink); border-bottom: 1.6px solid var(--pill-ink); transform: rotate(-45deg);
}
.aprob b { font-size: 1.05rem; font-weight: 500; }
.aprob span { font-size: .88rem; color: var(--muted); }

.grafica { flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }
.grafica__dato { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.grafica__dato b { font-weight: 500; }
.grafica__dato span { font-size: .8rem; color: var(--muted); }
.grafica__barras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: end; border-bottom: 1px solid var(--linea-fuerte); }
.grafica__barras i {
  display: block; height: 100%; border-radius: 6px 6px 0 0; transform-origin: bottom;
  background: linear-gradient(to top, rgba(250, 250, 250, .18), rgba(250, 250, 250, .75));
  transform: scaleY(calc(clamp(0, var(--b, 0) * 1.7 - var(--n, 0), 1) * var(--alto, .5)));
}
.grafica__barras i:nth-child(1) { --alto: .42; --n: 0; }
.grafica__barras i:nth-child(2) { --alto: .55; --n: .1; }
.grafica__barras i:nth-child(3) { --alto: .48; --n: .2; }
.grafica__barras i:nth-child(4) { --alto: .7; --n: .3; }
.grafica__barras i:nth-child(5) { --alto: .62; --n: .4; }
.grafica__barras i:nth-child(6) { --alto: .88; --n: .5; background: var(--pill); }
.grafica__meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; text-align: center; font-size: .72rem; color: var(--strip); }

/* Bitácora */
.bitacora { border-top: 1px solid var(--linea-fuerte); }
.bitacora__cabeza {
  display: flex; justify-content: space-between; align-items: center; padding: 16px 0;
  font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--strip);
  border-bottom: 1px solid var(--linea);
}
.bitacora__estado { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.bitacora__reloj { font-variant-numeric: tabular-nums; }
.pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: pulso 2.4s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .25; } }
.bitacora__lista { height: 352px; overflow: hidden; position: relative; }
.bitacora__lista::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; pointer-events: none;
  background: linear-gradient(rgba(10,10,10,0), var(--alterno));
}
.bitacora__lista li {
  display: grid; grid-template-columns: 52px 96px 1fr; gap: 14px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--linea); font-size: .95rem; color: var(--ink);
}
.bitacora__lista time { color: var(--tenue); font-variant-numeric: tabular-nums; }
.bitacora__lista li.entra { animation: entra .7s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(-12px); } }
.tag {
  justify-self: start; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--nav); line-height: 1.5;
}
.tag--alerta { background: var(--pill); color: var(--pill-ink); border-color: var(--pill); }
.bitacora__pie { padding-top: 14px; font-size: .8125rem; color: var(--tenue); }

/* Capacidades */
.capacidades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; }
.capacidad { padding: 36px 0 44px; border-top: 1px solid var(--linea-fuerte); }
.capacidad svg {
  width: 34px; height: 34px; margin-bottom: 28px;
  fill: none; stroke: var(--nav); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.capacidad h3 { margin-bottom: 10px; }
.capacidad p { color: var(--muted); font-size: 1rem; }
.capacidad__ejemplos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.capacidad__ejemplos li {
  padding: 5px 12px; border: 1px solid var(--linea-fuerte); border-radius: 999px; font-size: .8rem; color: var(--nav);
}

/* ---------- Qué construimos: escena de ensamble ---------- */
/* Sin movimiento o sin JS: la cuadrícula de seis piezas */
.construir { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.construir__contador, .construir__final, .sistema { display: none; }

/* Con movimiento: panel a la izquierda, sistema a la derecha */
.mov .construir { max-width: none; padding: 0; height: 640vh; margin-top: clamp(16px, 3vw, 40px); }
.mov .construir__fijo {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  max-width: var(--ancho); margin: 0 auto; padding: 90px var(--margen) 40px;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 90px); align-items: center;
}
.mov .construir__panel { position: relative; height: min(500px, 64svh); }
.mov .construir__contador {
  display: block; position: absolute; top: 0; left: 0;
  font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--strip);
}
.construir__contador b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mov .capacidades { display: block; position: absolute; inset: 40px 0 0; }
.mov .capacidad {
  position: absolute; inset: 0; padding: 0; border: 0; background: none; opacity: 0; visibility: hidden;
  display: flex; flex-direction: column; justify-content: center; will-change: opacity, transform;
}
.mov .capacidad > svg { display: none; }
.mov .capacidad h3 { margin-bottom: 20px; font-size: clamp(2rem, 3.5vw, 3.3rem); font-weight: 400; line-height: 1.05; letter-spacing: -.012em; }
.mov .capacidad p { max-width: 30em; font-size: 1.15rem; line-height: 1.55; }
.mov .capacidad__ejemplos { margin-top: 28px; }
.mov .capacidad__ejemplos li { padding: 7px 15px; font-size: .88rem; }
.mov .capacidad__ejemplos li {
  --k: clamp(0, calc(var(--b, 0) * 4 - var(--n, 0)), 1);
  opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 12px));
}
.capacidad__ejemplos li:nth-child(2) { --n: .8; }
.capacidad__ejemplos li:nth-child(3) { --n: 1.6; }
.mov .construir__final {
  display: flex; flex-direction: column; justify-content: center; position: absolute; inset: 40px 0 0; opacity: 0; visibility: hidden;
  font-size: clamp(2rem, 3.5vw, 3.3rem); font-weight: 400; line-height: 1.08; letter-spacing: -.012em;
}
.construir__final span { display: block; margin-top: 22px; max-width: 24em; font-size: 1.15rem; line-height: 1.55; letter-spacing: 0; color: var(--muted); }

/* El sistema: núcleo, órbitas, enlaces y nodos (medidas relativas al cuadro con cqw) */
.mov .sistema {
  display: block; position: relative; justify-self: center; container-type: inline-size;
  width: min(100%, 640px, calc(100svh - 150px)); aspect-ratio: 1;
}
.sistema__lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbita {
  fill: none; stroke: rgba(250, 250, 250, .13); stroke-width: 1; stroke-dasharray: 2 9;
  transform-box: view-box; transform-origin: 50% 50%;
}
.orbita--interna { stroke: rgba(250, 250, 250, .06); stroke-dasharray: none; }
.enlace line { fill: none; stroke-linecap: round; }
.enlace__base { stroke: rgba(250, 250, 250, .1); stroke-width: 1; }
.enlace__luz { stroke: #fff; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k, 0)); }
.enlace__flujo { stroke: #fff; stroke-width: 2.4; stroke-dasharray: .035 .1; opacity: var(--f, 0); }
.sistema__nucleo {
  position: absolute; left: 50%; top: 50%; width: 18.6cqw; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(250, 250, 250, calc(.16 + var(--nivel, 0) * .6));
  background: radial-gradient(circle at 50% 40%, #191919, #070707 70%);
  box-shadow: 0 0 calc(var(--nivel, 0) * 70px) calc(var(--nivel, 0) * 10px) rgba(255, 255, 255, calc(var(--nivel, 0) * .16));
}
.sistema__nucleo svg { width: 28%; height: auto; }
.sistema__onda {
  position: absolute; left: 50%; top: 50%; width: 18.6cqw; aspect-ratio: 1; border-radius: 50%; border: 1px solid #fff;
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
}
.nodos { position: absolute; inset: 0; }
.nodo {
  position: absolute; width: 12cqw; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(250, 250, 250, .16); background: #0a0a0a;
  transform: translate(-50%, -50%) scale(var(--e, 1));
  transition: transform .6s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.nodo:nth-child(1) { left: 50%; top: 18.33%; }
.nodo:nth-child(2) { left: 77.42%; top: 34.17%; }
.nodo:nth-child(3) { left: 77.42%; top: 65.83%; }
.nodo:nth-child(4) { left: 50%; top: 81.67%; }
.nodo:nth-child(5) { left: 22.58%; top: 65.83%; }
.nodo:nth-child(6) { left: 22.58%; top: 34.17%; }
.nodo__icono { display: grid; place-items: center; width: 44%; }
.nodo__icono svg {
  width: 100%; height: auto; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: calc(.35 + var(--k, 0) * .65);
}
.nodo__icono svg * { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k, 0) * .999 - .001); }
.nodo__nombre {
  position: absolute; white-space: nowrap; font-size: clamp(.7rem, 2cqw, .92rem); color: var(--tenue);
  transition: color .5s var(--ease);
}
.nodo:nth-child(1) .nodo__nombre { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.nodo:nth-child(4) .nodo__nombre { top: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.nodo:nth-child(2) .nodo__nombre, .nodo:nth-child(3) .nodo__nombre { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
.nodo:nth-child(5) .nodo__nombre, .nodo:nth-child(6) .nodo__nombre { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
.nodo.conectado { border-color: rgba(250, 250, 250, .45); }
.nodo.conectado .nodo__nombre { color: var(--muted); }
.nodo.activo {
  --e: 1.14; border-color: #fff;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .05), 0 0 44px rgba(255, 255, 255, .2);
}
.nodo.activo .nodo__nombre { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .orbita { animation: girar 90s linear infinite; }
  .orbita--interna { animation: none; }
  .enlace__flujo { animation: flujo 1.4s linear infinite; }
  .sistema.completo .sistema__onda { animation: onda 3s var(--ease) infinite; }
  .sistema.completo .sistema__onda--2 { animation-delay: 1.5s; }
}
/* Áreas que aparecen alrededor del sistema al completar el ensamble */
.orbita--areas { stroke: rgba(250, 250, 250, .1); stroke-dasharray: 1 7; opacity: 0; transition: opacity 1.2s var(--ease); }
.sistema.completo .orbita--areas { opacity: 1; }
.areas-orbita { position: absolute; inset: 0; pointer-events: none; }
.areas-orbita span {
  position: absolute; transform: translate(-50%, -50%) scale(.9); white-space: nowrap; opacity: 0;
  padding: 4px 11px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: #070707;
  font-size: clamp(.62rem, 1.7cqw, .78rem); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--nav);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.areas-orbita span:nth-child(1) { left: 72%; top: 11.9%; }
.areas-orbita span:nth-child(2) { left: 94%; top: 50%; }
.areas-orbita span:nth-child(3) { left: 72%; top: 88.1%; }
.areas-orbita span:nth-child(4) { left: 28%; top: 88.1%; }
.areas-orbita span:nth-child(5) { left: 6%; top: 50%; }
.areas-orbita span:nth-child(6) { left: 28%; top: 11.9%; }
.sistema.completo .areas-orbita span { opacity: 1; transform: translate(-50%, -50%); }
.sistema.completo .areas-orbita span:nth-child(2) { transition-delay: .12s; }
.sistema.completo .areas-orbita span:nth-child(3) { transition-delay: .24s; }
.sistema.completo .areas-orbita span:nth-child(4) { transition-delay: .36s; }
.sistema.completo .areas-orbita span:nth-child(5) { transition-delay: .48s; }
.sistema.completo .areas-orbita span:nth-child(6) { transition-delay: .6s; }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes flujo { to { stroke-dashoffset: -.135; } }
@keyframes onda {
  0% { transform: translate(-50%, -50%) scale(1); opacity: .55; }
  100% { transform: translate(-50%, -50%) scale(4.4); opacity: 0; }
}

/* Áreas — sin movimiento o sin JS: cuadrícula de seis, con su ilustración quieta */
.areas-escena { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.areas-escena__barra { display: none; }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.area { display: flex; flex-direction: column; gap: 24px; }
.area .area__ilustracion { order: -1; }
.mov .area .area__ilustracion { order: 0; }
.area h3 { font-size: 1.35rem; font-weight: 400; padding-bottom: 18px; border-bottom: 1px solid var(--linea-fuerte); }
.area__desc { margin: 14px 0 6px; color: var(--muted); font-size: .98rem; }
.area li { padding: 13px 0; border-bottom: 1px solid var(--linea); color: var(--muted); font-size: .98rem; }

/* Ilustraciones de línea (se dibujan con --v: 0 → 1; sin --v quedan completas) */
.area__ilustracion {
  width: 100%; height: auto; overflow: visible;
  fill: none; stroke: #bdbcbc; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.area__ilustracion text {
  fill: var(--muted); stroke: none; font: 500 11px 'Manrope', sans-serif; letter-spacing: .02em; text-anchor: middle;
  opacity: var(--v, 1);
}
.area__ilustracion text.derecha { text-anchor: end; }
.area__ilustracion .cifra { fill: var(--ink); font-size: 13px; font-weight: 600; }
.area__ilustracion .tenue { stroke: rgba(250, 250, 250, .16); stroke-dasharray: 3 5; }
.area__ilustracion .traza { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--v, 1)); }
.area__ilustracion .traza--fuerte { stroke: #fff; stroke-width: 2; }
.area__ilustracion .hoja { fill: #0c0c0c; }
.area__ilustracion .paradas circle { fill: #0a0a0a; stroke: #fff; opacity: var(--v, 1); }
.area__ilustracion .movil { fill: #fff; stroke: none; opacity: var(--v, 1); filter: drop-shadow(0 0 5px rgba(255, 255, 255, .9)); }
.area__ilustracion .caja { fill: rgba(250, 250, 250, .08); stroke: rgba(250, 250, 250, .45); opacity: clamp(0, calc(var(--v, 1) * 2 - .7), 1); }
.area__ilustracion .escaner line { stroke: #fff; stroke-width: 1.6; opacity: calc(var(--v, 1) * .85); filter: drop-shadow(0 0 6px #fff); }
.area__ilustracion .aguja line { stroke: #fff; stroke-width: 2.2; opacity: var(--v, 1); }
.area__ilustracion .centro { fill: #fff; stroke: none; opacity: var(--v, 1); }
.area__ilustracion .dia { fill: rgba(250, 250, 250, .05); stroke: rgba(250, 250, 250, .18); stroke-width: 1; opacity: clamp(0, calc(var(--v, 1) * 2 - .6), 1); }
.area__ilustracion .dia--marcado { fill: #fff; stroke: none; }

/* Fotograma final: invitación a contar el proceso */
.area--cta { justify-content: center; }
.area--cta h3 { border-bottom: 0; }
.pill-area { position: relative; align-self: flex-start; height: 50px; margin-top: 18px; padding: 0 26px; font-size: 1rem; }
.pill-area > span { transform: none; }
.mov .area--cta { grid-template-columns: minmax(0, 1fr); }
.mov .area--cta h3 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); }

/* Con movimiento: cinta horizontal fija; el fotograma del centro se enciende */
.mov .areas-escena { max-width: none; padding: 0; height: 500vh; margin-top: clamp(8px, 2vw, 24px); }
.mov .areas-escena__fijo {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.mov .areas-escena__barra {
  display: flex; align-items: center; gap: 24px; width: 100%; max-width: var(--ancho); margin: 0 auto 5vh; padding: 0 var(--margen);
  font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--strip);
}
.areas-escena__nombre { min-width: 17em; color: var(--ink); }
.areas-escena__progreso { position: relative; flex: 1; height: 1px; background: var(--linea-fuerte); }
.areas-escena__progreso i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.mov .areas {
  --panel: min(66vw, 940px);
  position: relative; display: flex; gap: 0; width: max-content; will-change: transform;
  padding: 0 calc((100vw - var(--panel)) / 2);
}
.mov .area {
  flex: none; width: var(--panel); height: min(540px, 60svh); padding: 0 clamp(28px, 3.4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 3.4vw, 56px); align-items: center;
  border-left: 1px solid var(--linea);
  opacity: calc(.22 + var(--v, 0) * .78); transform: scale(calc(.9 + var(--v, 0) * .1));
}
.mov .area:last-child { border-right: 1px solid var(--linea); }
.mov .area h3 {
  margin: 0 0 18px; padding: 0; border: 0;
  font-size: clamp(2rem, 3.3vw, 3.2rem); line-height: 1.05; letter-spacing: -.012em;
  transform: translateX(calc(var(--d, 0) * -90px));
}
.mov .area__desc { margin: 0 0 22px; max-width: 24em; font-size: 1.08rem; line-height: 1.55; }
.mov .area li {
  --k: clamp(0, calc(var(--v, 0) * 4 - var(--n, 0)), 1);
  opacity: var(--k); transform: translateX(calc((1 - var(--k)) * -18px));
}
.area li:nth-child(2) { --n: .9; }
.area li:nth-child(3) { --n: 1.8; }
.mov .area__ilustracion { max-height: 100%; transform: translateX(calc(var(--d, 0) * 60px)); }

/* Caso real */
.caso__texto h2 { margin-bottom: 24px; }
.caso__texto .bajada { margin-bottom: 32px; }
.caso__lista li { padding: 16px 0; border-top: 1px solid var(--linea); color: var(--muted); }
.caso__lista strong { color: var(--ink); font-weight: 500; }

/* Sin movimiento o sin JS: texto y ventana con el primer módulo, quieta */
.caso-escena__fijo {
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 110px); align-items: start;
}
.pantalla { --b: 1; }
.pantalla + .pantalla { display: none; }

/* Ventana de la aplicación */
.app {
  position: relative; overflow: hidden; border: 1px solid var(--linea-fuerte); border-radius: 16px;
  background: radial-gradient(ellipse at 30% 0%, rgba(250, 250, 250, .05), transparent 60%), #090909;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(250, 250, 250, .02);
}
.app__barra {
  display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--linea);
  font-size: .78rem; color: var(--muted);
}
.app__puntos { display: flex; gap: 6px; }
.app__puntos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(250, 250, 250, .14); }
.app__titulo { flex: 1; text-align: center; margin-right: 43px; }
.app__cuerpo { display: grid; grid-template-columns: 136px minmax(0, 1fr); min-height: 380px; }
.app__menu { display: grid; align-content: start; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--linea); }
.app__menu span { padding: 8px 10px; border-radius: 8px; font-size: .78rem; color: var(--tenue); transition: background-color .4s var(--ease), color .4s var(--ease); }
.app__menu span:first-child, .app__menu span.activo { background: rgba(250, 250, 250, .07); color: var(--ink); }
.app__pantallas { position: relative; }
.pantalla { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.pantalla__cabeza {
  display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linea);
  font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--strip);
}
.pantalla__cabeza span:first-child { color: var(--ink); }
.pantalla__estado { display: grid; }
.pantalla__estado b { grid-area: 1 / 1; font-weight: 500; text-align: right; }
.pantalla__estado b:first-child { opacity: clamp(0, calc((.85 - var(--b)) * 8), 1); }
.pantalla__estado b:last-child { opacity: clamp(0, calc((var(--b) - .85) * 8), 1); color: var(--ink); }
.pantalla__pie { font-size: .78rem; color: var(--muted); }
.pantalla .pantalla__pie.aparece { --n: 3.4; }

/* 1 · Lector */
.lector { font-size: .82rem; font-variant-numeric: tabular-nums; }
.lector__cabeza, .lector__fila { display: grid; grid-template-columns: 1.6fr 1fr .8fr; gap: 10px; padding: 11px 0; }
.lector__cabeza { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); border-bottom: 1px solid var(--linea); }
.lector__filas { position: relative; overflow: hidden; }
.lector__fila { border-bottom: 1px solid var(--linea); }
.lector__fila span:last-child { color: var(--muted); }
.lector .ojo {
  justify-self: start; padding: 0 9px; border-radius: 999px; background: var(--pill); color: var(--pill-ink) !important; font-weight: 600;
  opacity: clamp(0, calc(var(--b) * 7 - 4.8), 1); transform: scale(calc(.6 + clamp(0, calc(var(--b) * 7 - 4.8), 1) * .4));
}
.lector__fila--ojo { background: rgba(250, 250, 250, calc(clamp(0, calc(var(--b) * 7 - 4.8), 1) * .05)); }
.lector__escaneo {
  position: absolute; left: 0; right: 0; height: 56px; margin-top: -56px; pointer-events: none;
  top: calc(min(var(--b) * 1.3, 1) * 100%);
  opacity: clamp(0, calc((.77 - var(--b)) * 8), 1);
  background: linear-gradient(to bottom, rgba(250, 250, 250, 0), rgba(250, 250, 250, .08) 70%, rgba(250, 250, 250, .6) 98%, rgba(250, 250, 250, 0));
}

/* 2 · Bandeja de solicitudes */
.solped { display: grid; font-size: .82rem; }
.solped__fila { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.solped__id { color: var(--muted); font-variant-numeric: tabular-nums; }
.solped__fila:nth-child(1) { --n: .4; }
.solped__fila:nth-child(2) { --n: 1.1; }
.solped__fila:nth-child(3) { --n: 1.8; }
.solped__fila:nth-child(4) { --n: 2.5; }
.chip-estado { display: grid; justify-items: end; }
.chip-estado b {
  grid-area: 1 / 1; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 500; white-space: nowrap;
  --k: clamp(0, calc(var(--b) * 5 - var(--n, 0)), 1);
}
.chip-estado b:first-child { border: 1px dashed var(--linea-fuerte); color: var(--muted); opacity: calc(1 - var(--k)); }
.chip-estado b:last-child { background: var(--pill); color: var(--pill-ink); opacity: var(--k); transform: scale(calc(.85 + var(--k) * .15)); }

/* 3 · Respuesta en Outlook */
.respuesta { display: grid; gap: 10px; font-size: .84rem; }
.respuesta__campo { display: flex; gap: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--linea); color: var(--ink); }
.respuesta__campo span { width: 34px; color: var(--tenue); }
.respuesta__cuerpo { display: grid; gap: 10px; padding-top: 4px; line-height: 1.55; color: var(--nav); }
.respuesta__cuerpo b { color: var(--ink); font-weight: 600; }
.respuesta__cuerpo .aparece:nth-child(1) { --n: 1.4; }
.respuesta__cuerpo .aparece:nth-child(2) { --n: 2.1; }
.respuesta__cuerpo .aparece:nth-child(3) { --n: 2.8; }
.respuesta__firma { padding-left: 12px; border-left: 2px solid var(--ink); color: var(--ink); font-weight: 500; }
.respuesta .respuesta__adjunto.aparece { --n: 3.6; }
.respuesta__adjunto {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px;
  border: 1px solid var(--linea-fuerte); border-radius: 10px; font-size: .78rem;
}
.respuesta__adjunto::before { content: "PDF"; padding: 2px 6px; border-radius: 4px; background: var(--pill); color: var(--pill-ink); font-size: .62rem; font-weight: 700; }

/* 4 · Historial de precios */
.historial { width: 100%; height: auto; overflow: visible; }
.historial__guia { fill: none; stroke: rgba(250, 250, 250, .08); stroke-dasharray: 3 5; }
.historial__linea {
  fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(var(--b) * 1.4, 1));
}
.historial__punto { fill: var(--pill); opacity: clamp(0, calc(var(--b) * 6 - 4), 1); }
.historial__pulso { fill: none; stroke: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.historial__dato { fill: var(--ink); font: 600 13px 'Manrope', sans-serif; text-anchor: end; opacity: clamp(0, calc(var(--b) * 6 - 4.2), 1); }
.alerta-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea-fuerte); border-radius: 10px; font-size: .84rem; }
.alerta-fila b { padding: 2px 9px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pantalla .alerta-fila.aparece { --n: 4.2; }

/* 5 · Auditoría */
.sesion { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--ink); }
.sesion::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--pill);
  box-shadow: inset 0 0 0 4px #090909;
}
.pantalla .sesion.aparece { --n: .2; }
.auditoria { display: grid; font-size: .82rem; }
.auditoria li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--linea); color: var(--nav); }
.auditoria time { color: var(--tenue); font-variant-numeric: tabular-nums; }
.auditoria .aparece:nth-child(1) { --n: 1; }
.auditoria .aparece:nth-child(2) { --n: 1.6; }
.auditoria .aparece:nth-child(3) { --n: 2.2; }
.auditoria .aparece:nth-child(4) { --n: 2.8; }
.respaldo { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--ink); }
.respaldo::before {
  content: ""; width: 9px; height: 5px; border-left: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink);
  transform: translateY(-2px) rotate(-45deg);
}
.pantalla .respaldo.aparece { --n: 3.8; }

@media (prefers-reduced-motion: no-preference) {
  .historial__pulso { animation: pulso-punto 2s var(--ease) infinite; }
}
@keyframes pulso-punto { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(4); opacity: 0; } }

/* Caso 2 · Alcaldía: consulta ciudadana, estados del expediente y requerimientos de la Gobernación */
.caso-escena + .caso-escena { margin-top: clamp(80px, 10vw, 140px); }
.consulta { display: grid; gap: 8px; }
.consulta__etiqueta { font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--strip); }
.consulta__campo {
  display: block; padding: 12px 14px; border: 1px solid var(--linea-fuerte); border-radius: 10px;
  font-size: 1.05rem; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.consulta__valor {
  display: inline-block; padding-right: 3px; border-right: 2px solid var(--ink);
  clip-path: inset(0 calc((1 - min(var(--b, 1) * 3, 1)) * 100%) 0 0);
}
.consulta__resultado { margin-top: 10px; }
.consulta__resultado .aparece:nth-child(1) { --n: 2; }
.consulta__resultado .aparece:nth-child(2) { --n: 2.6; }
.consulta__resultado .aparece:nth-child(3) { --n: 3.2; }
.consulta__resultado .aparece:nth-child(4) { --n: 3.8; }

.estados { position: relative; display: grid; padding-left: 30px; font-size: .84rem; }
.estados::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 16px; width: 1px; background: var(--linea-fuerte); }
.estados li { position: relative; display: grid; gap: 2px; padding: 9px 0; color: var(--muted); }
.estados li::before {
  content: ""; position: absolute; left: -30px; top: 13px; width: 13px; height: 13px; border-radius: 50%;
  border: 1px dashed var(--linea-fuerte); background: #090909;
}
.estados b { font-weight: 500; color: var(--nav); }
.estados__hecho b, .estados__actual b { color: var(--ink); }
.estados__hecho::before { background: var(--pill) !important; border: 0 !important; }
.estados__actual::before { border: 2px solid var(--ink) !important; box-shadow: 0 0 0 5px rgba(255, 255, 255, .08); }
.estados__actual span { color: var(--ink); }

.requisitos { display: grid; font-size: .84rem; }
.requisitos__fila { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linea); color: var(--nav); }
.requisitos__fila b { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-size: .72rem; font-weight: 600; }
.requisitos__fila--pendiente b { background: none; color: var(--ink); border: 1px dashed var(--linea-fuerte); }

@media (prefers-reduced-motion: no-preference) {
  .estados__actual::before { animation: pulso-estado 1.8s var(--ease) infinite; }
  .consulta__valor { animation: cursor-texto 1s steps(2) infinite; }
}
@keyframes pulso-estado { 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
@keyframes cursor-texto { 50% { border-right-color: transparent; } }

/* Con movimiento: escena fija; la ventana entra en perspectiva y recorre los módulos */
.mov .caso-escena { height: 560vh; }
.mov .caso-escena--corta { height: 460vh; }
.mov .caso-escena + .caso-escena { margin-top: 0; }
.mov .caso-escena__fijo {
  position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: 80px; padding-bottom: 32px; align-items: center;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); perspective: 1600px;
}
.mov .caso__texto h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); margin-bottom: 16px; }
.mov .caso__texto .bajada { font-size: 1rem; margin-bottom: 20px; }
.mov .caso__lista li {
  position: relative; padding: 12px 0; font-size: .92rem; line-height: 1.5; opacity: .45;
  transition: opacity .5s var(--ease);
}
.mov .caso__lista li.activo { opacity: 1; }
.mov .caso__lista li::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(var(--s, 0)); transform-origin: left;
}
.mov .app {
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--e, 1)) * 24deg)) translateY(calc((1 - var(--e, 1)) * 80px)) scale(calc(.84 + var(--e, 1) * .16));
  opacity: calc(.2 + var(--e, 1) * .8);
}
.mov .app__cuerpo { height: min(540px, calc(100svh - 190px)); }
.mov .app__menu span:first-child { background: none; color: var(--tenue); }
.mov .app__menu span.activo { background: rgba(250, 250, 250, .07); color: var(--ink); }
.mov .pantalla { position: absolute; inset: 0; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.mov .pantalla + .pantalla { display: flex; }

/* ---------- Cómo trabajamos: un camino que se dibuja con el desplazamiento ---------- */
.camino { position: relative; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.camino__svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.camino__guia { fill: none; stroke: rgba(250, 250, 250, .13); stroke-width: 1.5; stroke-dasharray: 4 8; }
.camino__trazo { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .55)); }
.camino__punto { fill: #fff; filter: drop-shadow(0 0 10px #fff); }
.camino__halo { fill: none; stroke: rgba(255, 255, 255, .4); transform-box: fill-box; transform-origin: center; }

.pasos { counter-reset: paso; }
.paso {
  counter-increment: paso; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center;
  padding: clamp(64px, 12vh, 130px) 0;
}
.paso__marca {
  grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--linea-fuerte); background: var(--alterno);
  transition: background-color .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.paso__texto { grid-column: 1; grid-row: 1; text-align: right; }
.paso__visual { grid-column: 3; grid-row: 1; justify-self: start; width: 100%; max-width: 400px; }
.paso:nth-child(even) .paso__texto { grid-column: 3; text-align: left; }
.paso:nth-child(even) .paso__visual { grid-column: 1; justify-self: end; }
.paso__texto::before {
  content: counter(paso, decimal-leading-zero); display: block; margin-bottom: 14px;
  font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 200; line-height: 1; color: var(--tenue); font-variant-numeric: tabular-nums;
  transition: color .8s var(--ease);
}
.paso h3 { margin-bottom: 12px; font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; }
.paso__texto p { max-width: 28em; color: var(--muted); font-size: 1.02rem; }
.paso__texto > * { margin-left: auto; }
.paso:nth-child(even) .paso__texto > * { margin-left: 0; }
.paso__texto .paso__entrega { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); color: var(--ink); font-size: .95rem; }
.paso__entrega span { display: block; margin-bottom: 4px; font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--strip); }
.paso.llegado .paso__marca {
  background: #fff; border-color: #fff;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .06), 0 0 34px rgba(255, 255, 255, .45);
}
.paso.llegado .paso__texto::before { color: var(--ink); }

/* Visuales de cada etapa (estado final por defecto; con movimiento se arman al llegar) */
.paso__visual > * { border: 1px solid var(--linea-fuerte); border-radius: 14px; padding: 20px; background: rgba(250, 250, 250, .02); }

.mapa { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; font-size: .8rem; }
.mapa span { padding: 7px 11px; border: 1px solid var(--linea-fuerte); border-radius: 8px; color: var(--nav); white-space: nowrap; }
.mapa i { flex: 1 0 14px; height: 1px; background: var(--linea-fuerte); transform-origin: left; }
.mapa .mapa__cuello { border-style: dashed; border-color: #fff; color: var(--ink); }
.mapa__nota { flex-basis: 100%; margin-top: 12px; font-size: .78rem; color: var(--muted); }
.mapa__nota::before { content: "↑ "; color: var(--ink); }

.boceto { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.boceto b { display: block; height: 14px; border-radius: 4px; background: rgba(250, 250, 250, .55); }
.boceto b:nth-child(1) { grid-row: span 4; height: auto; min-height: 110px; background: rgba(250, 250, 250, .12); }
.boceto b:nth-child(3) { width: 70%; }
.boceto b:nth-child(4) { height: 44px; background: rgba(250, 250, 250, .22); }
.boceto b:nth-child(5) { width: 45%; background: var(--pill); }

.entregas { display: grid; gap: 10px; font-size: .86rem; }
.entregas li { position: relative; display: flex; align-items: center; gap: 12px; color: var(--ink); }
.entregas li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--pill); }
.entregas li::after {
  content: ""; position: absolute; left: 6.5px; top: 50%; width: 7px; height: 4px; margin-top: -3px;
  border-left: 1.6px solid var(--pill-ink); border-bottom: 1.6px solid var(--pill-ink); transform: rotate(-45deg);
}
.entregas li:last-child { color: var(--muted); }
.entregas li:last-child::before { background: none; border: 1px dashed var(--linea-fuerte); }
.entregas li:last-child::after { display: none; }

.arranque { display: grid; gap: 14px; font-size: .84rem; }
.arranque p { display: grid; grid-template-columns: 1.1fr 1.2fr auto; gap: 12px; align-items: center; color: var(--nav); }
.arranque .barra { position: relative; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(250, 250, 250, .1); }
.arranque .barra i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; }
.arranque p:last-child .barra i { transform: scaleX(.45); }
.arranque b { min-width: 64px; text-align: right; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

.modulos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.modulos i { aspect-ratio: 1.6; border-radius: 8px; background: rgba(250, 250, 250, .1); border: 1px solid var(--linea-fuerte); }
.modulos i:nth-child(-n + 5) { background: rgba(250, 250, 250, .7); border-color: transparent; }
.modulos i:nth-child(n + 7) { background: none; border-style: dashed; }
.modulos__nota { grid-column: 1 / -1; margin-top: 4px; font-size: .78rem; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .camino__halo { animation: halo-camino 1.8s var(--ease) infinite; }
  .mov .paso .paso__texto, .mov .paso .paso__visual {
    opacity: .28; transform: translateY(34px); filter: blur(5px);
    transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease);
  }
  .mov .paso .paso__visual { transition-delay: .15s; transform: translateY(34px) scale(.96); }
  .mov .paso.llegado .paso__texto, .mov .paso.llegado .paso__visual { opacity: 1; transform: none; filter: none; }

  /* Cada visual se arma al llegar a su estación */
  .mov .paso .mapa i { transform: scaleX(0); transition: transform .7s var(--ease); }
  .mov .paso .mapa i:nth-of-type(2) { transition-delay: .25s; }
  .mov .paso .mapa i:nth-of-type(3) { transition-delay: .5s; }
  .mov .paso.llegado .mapa i { transform: none; }
  .mov .paso.llegado .mapa__cuello { animation: cuello 1.6s var(--ease) .9s 2; }

  .mov .paso .boceto b { opacity: .25; transform: scaleX(.3); transform-origin: left; transition: opacity .7s var(--ease), transform .8s var(--ease); }
  .mov .paso.llegado .boceto b { opacity: 1; transform: none; }
  .mov .paso.llegado .boceto b:nth-child(2) { transition-delay: .3s; }
  .mov .paso.llegado .boceto b:nth-child(3) { transition-delay: .45s; }
  .mov .paso.llegado .boceto b:nth-child(4) { transition-delay: .6s; }
  .mov .paso.llegado .boceto b:nth-child(5) { transition-delay: .8s; }

  .mov .paso .entregas li { opacity: 0; transform: translateX(-14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .mov .paso.llegado .entregas li { opacity: 1; transform: none; }
  .mov .paso.llegado .entregas li:nth-child(2) { transition-delay: .35s; }
  .mov .paso.llegado .entregas li:nth-child(3) { transition-delay: .7s; }
  .mov .paso.llegado .entregas li:nth-child(4) { transition-delay: 1.05s; }

  .mov .paso .arranque .barra i { transform: scaleX(0); transition: transform 1.4s var(--ease); }
  .mov .paso.llegado .arranque .barra i { transform: none; }
  .mov .paso.llegado .arranque p:nth-child(2) .barra i { transition-delay: .3s; }
  .mov .paso.llegado .arranque p:last-child .barra i { transform: scaleX(.45); transition-delay: .6s; }

  .mov .paso .modulos i { opacity: 0; transform: scale(.6); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.34, 1.56, .64, 1); }
  .mov .paso.llegado .modulos i { opacity: 1; transform: none; }
  .mov .paso.llegado .modulos i:nth-child(2) { transition-delay: .12s; }
  .mov .paso.llegado .modulos i:nth-child(3) { transition-delay: .24s; }
  .mov .paso.llegado .modulos i:nth-child(4) { transition-delay: .36s; }
  .mov .paso.llegado .modulos i:nth-child(5) { transition-delay: .48s; }
  .mov .paso.llegado .modulos i:nth-child(6) { transition-delay: .6s; }
  .mov .paso.llegado .modulos i:nth-child(7) { transition-delay: .72s; }
  .mov .paso.llegado .modulos i:nth-child(8) { transition-delay: .84s; }
}
@keyframes halo-camino { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes cuello { 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); } }

/* ---------- Infraestructura: consola de monitoreo ---------- */
.consola {
  position: relative; overflow: hidden; border: 1px solid var(--linea-fuerte); border-radius: 18px;
  background: radial-gradient(ellipse at 15% 0%, rgba(250, 250, 250, .05), transparent 55%), #070707;
}
.consola__barra { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--linea); }
.radar {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea-fuerte);
  background: conic-gradient(from 0deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 28%);
}
.radar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; }
.consola__estado { display: grid; gap: 2px; flex: 1; }
.consola__estado b { font-size: 1rem; font-weight: 500; color: var(--ink); }
.consola__estado span { font-size: .78rem; color: var(--muted); }
.consola__hora { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.garantias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.garantia {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; gap: 10px 16px;
  min-height: 250px; padding: 26px 24px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.garantia:nth-child(3n) { border-right: 0; }
.garantia:nth-last-child(-n + 3) { border-bottom: 0; }
.garantia dt { grid-column: 1; font-size: 1.2rem; font-weight: 500; color: var(--ink); }
.garantia dd { margin: 0; }
.garantia__estado { grid-column: 2; grid-row: 1; display: grid; align-self: start; justify-items: end; }
.garantia__estado span { grid-area: 1 / 1; white-space: nowrap; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.verificando { visibility: hidden; color: var(--muted); }
.ok { padding: 2px 10px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); }
.garantia__texto { grid-column: 1 / -1; color: var(--muted); font-size: .98rem; max-width: 30em; }
.garantia__visual { grid-column: 1 / -1; align-self: end; display: grid; gap: 10px; }
.garantia__nota { font-size: .78rem; color: var(--muted); }

.roles { display: flex; flex-wrap: wrap; gap: 8px; }
.roles span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--linea-fuerte); font-size: .8rem; color: var(--ink); }
.roles span::before { content: "✓ "; color: var(--ink); }
.roles .roles__no { border-style: dashed; color: var(--tenue); }
.roles .roles__no::before { content: "× "; color: var(--tenue); }

.ticker { position: relative; height: 84px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.ticker li { display: flex; gap: 12px; padding: 5px 0; font-size: .8rem; color: var(--nav); white-space: nowrap; }
.ticker time { color: var(--tenue); font-variant-numeric: tabular-nums; }

.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 46px; }
.semana i { display: block; height: 100%; border-radius: 4px; background: rgba(250, 250, 250, .55); transform-origin: bottom; }
.semana i:last-child { background: var(--pill); }

.pruebas { display: flex; align-items: center; gap: 14px; }
.pruebas__barra { position: relative; flex: 1; height: 5px; overflow: hidden; border-radius: 5px; background: rgba(250, 250, 250, .1); }
.pruebas__barra i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; }
.pruebas b { font-weight: 600; font-variant-numeric: tabular-nums; }

.latido { width: 100%; height: 50px; overflow: visible; }
.latido path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.latido__base { stroke: rgba(250, 250, 250, .16); stroke-width: 1.5; }
.latido__pulso { stroke: #fff; stroke-width: 2; stroke-dasharray: .14 .86; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); }

.exportar { display: flex; align-items: center; gap: 8px; }
.exportar span { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--linea-fuerte); font-size: .8rem; font-weight: 600; }
.exportar__flecha { position: relative; width: 22px; height: 22px; margin-left: 6px; }
.exportar__flecha::before { content: ""; position: absolute; left: 10px; top: 2px; width: 1.6px; height: 14px; background: var(--ink); }
.exportar__flecha::after {
  content: ""; position: absolute; left: 6px; top: 9px; width: 8px; height: 8px;
  border-right: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink); transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .radar { animation: girar 2.6s linear infinite; }
  .ticker ul { animation: ticker 9s linear infinite; }
  .latido__pulso { animation: latido 2.4s linear infinite; }
  .exportar__flecha { animation: bajar 1.6s var(--ease) infinite; }

  /* Arranque: las garantías empiezan sin verificar (clases que agrega app.js) */
  .mov .consola::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; pointer-events: none; opacity: 0;
    background: #fff; box-shadow: 0 0 24px 6px rgba(255, 255, 255, .35);
  }
  .mov .consola.arrancando::after { animation: barrido 1.4s cubic-bezier(.6, 0, .3, 1) both; }
  .mov .consola.preparada .garantia:not(.verificada) .verificando { visibility: visible; animation: titilar 1s steps(2) infinite; }
  .mov .consola.preparada .garantia:not(.verificada) .ok { opacity: 0; transform: scale(.5); }
  .mov .consola.preparada .garantia .ok { transition: opacity .4s var(--ease), transform .5s cubic-bezier(.34, 1.56, .64, 1); }
  .mov .consola.preparada .garantia:not(.verificada) dt,
  .mov .consola.preparada .garantia:not(.verificada) .garantia__texto { opacity: .35; }
  .mov .consola.preparada .garantia dt, .mov .consola.preparada .garantia__texto { transition: opacity .6s var(--ease); }
  .mov .consola.preparada .garantia__visual { transition: opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease); }
  .mov .consola.preparada .garantia:not(.verificada) .garantia__visual { opacity: .12; filter: blur(4px); transform: translateY(10px); }
  .mov .consola.preparada .garantia { position: relative; }
  .mov .consola.preparada .garantia:not(.verificada)::after {
    content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, #fff, transparent); animation: escanear 1.1s linear infinite;
  }
  .mov .consola.preparada .garantia:not(.verificada) .semana i { transform: scaleY(.08); }
  .mov .consola.preparada .semana i { transition: transform .6s var(--ease); }
  .mov .consola.preparada .garantia.verificada .semana i:nth-child(2) { transition-delay: .08s; }
  .mov .consola.preparada .garantia.verificada .semana i:nth-child(3) { transition-delay: .16s; }
  .mov .consola.preparada .garantia.verificada .semana i:nth-child(4) { transition-delay: .24s; }
  .mov .consola.preparada .garantia.verificada .semana i:nth-child(5) { transition-delay: .32s; }
  .mov .consola.preparada .garantia.verificada .semana i:nth-child(6) { transition-delay: .4s; }
  .mov .consola.preparada .garantia.verificada .semana i:nth-child(7) { transition-delay: .48s; }
  .mov .consola.preparada .garantia:not(.verificada) .pruebas__barra i { transform: scaleX(0); }
  .mov .consola.preparada .pruebas__barra i { transition: transform 1.2s var(--ease); }
}
@keyframes ticker { to { transform: translateY(-50%); } }
@keyframes latido { to { stroke-dashoffset: -1; } }
@keyframes bajar { 0%, 100% { transform: translateY(-3px); opacity: .6; } 50% { transform: translateY(3px); opacity: 1; } }
@keyframes barrido { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes titilar { 50% { opacity: .35; } }
@keyframes escanear { 0% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }

/* Contacto */
.seccion--contacto { background: var(--alterno); }
.contacto__texto h2 { margin-bottom: 24px; }
.contacto__correo { margin-top: 28px; color: var(--muted); }
.contacto__correo a { color: var(--ink); border-bottom: 1px solid var(--linea-fuerte); transition: border-color .25s; }
.contacto__correo a:hover { border-color: var(--ink); }

/* Canales directos: WhatsApp (principal), llamada y correo */
.canales { display: grid; gap: 10px; max-width: 470px; margin-top: 30px; }
.canal {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--ink);
  border: 1px solid var(--linea-fuerte); border-radius: 14px; background: rgba(250, 250, 250, .03);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
a.canal:hover { border-color: var(--ink); background: rgba(250, 250, 250, .07); transform: translateX(4px); }
.canal span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.canal b { font-size: 1rem; font-weight: 500; }
.canal small { font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
.canal small a { color: var(--ink); border-bottom: 1px solid var(--linea-fuerte); }
.canal__icono { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.canal--principal { background: var(--pill); border-color: var(--pill); color: var(--pill-ink); }
.canal--principal small { color: #4a4a4a; }
a.canal--principal:hover { background: #e9e9e9; border-color: #e9e9e9; }
.canal--correo .copiar { flex: none; margin-left: 0; }

/* WhatsApp flotante: aparece al salir de la portada y se esconde al llegar a contacto */
.flotante-wa {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 15px; border-radius: 999px;
  background: var(--pill); color: var(--pill-ink); font-size: .92rem; font-weight: 600;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .12);
  opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), background-color .25s;
}
.flotante-wa.visible { opacity: 1; transform: none; pointer-events: auto; }
.flotante-wa:hover { background: #e9e9e9; }
.flotante-wa svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flotante-wa::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .35);
}
.menu-abierto .flotante-wa { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .flotante-wa.visible::before { animation: llamar-atencion 2.6s var(--ease) 1s infinite; }
}
@keyframes llamar-atencion { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }

/* Escena final: el portal de la portada detrás del formulario */
.seccion--contacto { position: relative; overflow: hidden; isolation: isolate; }
.contacto__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.contacto__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: .5; }
.contacto__fondo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--alterno) 0%, rgba(10, 10, 10, .92) 32%, rgba(10, 10, 10, .55) 62%, rgba(10, 10, 10, .35) 100%),
    linear-gradient(to bottom, var(--alterno) 0%, rgba(10, 10, 10, 0) 22%, rgba(10, 10, 10, 0) 70%, var(--alterno) 100%);
}
.contacto__interior { position: relative; align-items: center; }
.contacto__panel {
  position: relative; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--linea-fuerte); border-radius: 20px;
  background: rgba(10, 10, 10, .62); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .9);
}

/* Ideas para empezar */
.sugerencias { margin-top: 32px; }
.sugerencias__titulo { margin-bottom: 12px; font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--strip); }
.sugerencias__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.sugerencia {
  padding: 9px 15px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: rgba(250, 250, 250, .03);
  font-size: .86rem; color: var(--nav); text-align: left; cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.sugerencia:hover { border-color: var(--ink); color: var(--ink); background: rgba(250, 250, 250, .07); transform: translateY(-2px); }
.sugerencia.elegida { border-color: var(--pill); background: var(--pill); color: var(--pill-ink); }

.copiar {
  margin-left: 8px; padding: 3px 10px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: none;
  font-size: .75rem; color: var(--muted); cursor: pointer; transition: color .3s, border-color .3s;
}
.copiar:hover { color: var(--ink); border-color: var(--ink); }
.copiar.copiado { color: var(--pill-ink); background: var(--pill); border-color: var(--pill); }

/* Campo activo: una línea de luz se dibuja debajo */
.campo { position: relative; }
.campo::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: scaleX(0); transition: transform .6s var(--ease);
}
.campo:focus-within::after { transform: scaleX(1); }
.campo--trampa::after, .formulario__pie::after { display: none; }

/* Confirmación de envío */
.enviado { display: grid; justify-items: start; gap: 12px; padding: 12px 0; outline: none; }
.enviado[hidden], .formulario[hidden] { display: none; }
.enviado__marca { width: 64px; height: 64px; margin-bottom: 8px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.enviado h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 400; }
.enviado p { color: var(--muted); }
.enviado__otro { margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  /* El portal vuelve desde negro con un leve acercamiento al llegar */
  .mov .contacto__video { opacity: 0; transform: scale(1.12); transition: opacity 2.2s var(--ease), transform 4s cubic-bezier(.16, 1, .3, 1); }
  .mov .contacto__fondo.visible .contacto__video { opacity: .5; transform: none; }
  .mov .contacto__panel { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity 1.2s var(--ease) .3s, transform 1.2s var(--ease) .3s; }
  .mov .contacto__fondo.visible ~ .contacto__interior .contacto__panel { opacity: 1; transform: none; }

  .campo.vibra { animation: vibrar .45s cubic-bezier(.36, .07, .19, .97); }
  .pill-enviar.cargando::after { transform: translateX(-120%); animation: cargar 1.1s linear infinite; }
  .enviado:not([hidden]) { animation: rise .8s var(--ease) both; }
  .enviado:not([hidden]) .enviado__marca circle { stroke-dasharray: 1; animation: trazar 1s var(--ease) both; }
  .enviado:not([hidden]) .enviado__marca path { stroke-dasharray: 1; animation: trazar .6s var(--ease) .7s both; }
}
@keyframes vibrar { 20%, 80% { transform: translateX(-3px); } 40%, 60% { transform: translateX(5px); } }
@keyframes cargar { to { transform: translateX(120%); } }
@keyframes trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 22px; }
.campo { display: grid; gap: 8px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: .875rem; font-weight: 500; color: var(--nav); }
.opcional { color: var(--tenue); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: 400 1rem/1.45 'Manrope', system-ui, sans-serif; color: var(--ink);
  background: rgba(250, 250, 250, .03); border: 1px solid var(--linea-fuerte); border-radius: 14px;
  padding: 14px 16px; transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--nav) 50%), linear-gradient(135deg, var(--nav) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.campo select option { background: #111; color: var(--ink); }
.campo textarea { resize: vertical; min-height: 140px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tenue); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: rgba(250, 250, 250, .3); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--ink); background-color: rgba(250, 250, 250, .05); }
.campo [aria-invalid="true"] { border-color: #ff8a7a; }
.campo__error { font-size: .85rem; color: #ff9b8c; }
.campo--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.pill-enviar { height: 50px; padding: 0 30px; font-size: 1rem; }
.pill-enviar > span { transform: none; }
.pill-enviar[disabled] { opacity: .6; cursor: progress; }
.formulario__estado { font-size: .95rem; color: var(--muted); }
.formulario__estado.es-ok { color: var(--ink); }
.formulario__estado.es-error { color: #ff9b8c; }
.formulario__estado a { color: var(--ink); border-bottom: 1px solid var(--linea-fuerte); }


/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 0 0 56px; color: var(--tenue); overflow: hidden; }
/* Créditos finales */
.pie__creditos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px;
  margin: 0 auto; padding-top: clamp(72px, 9vw, 120px);
}
.credito dt { margin-bottom: 10px; font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--strip); }
.credito dd { margin: 0; font-size: 1.05rem; line-height: 1.45; color: var(--ink); }
.credito a { border-bottom: 1px solid var(--linea-fuerte); transition: border-color .25s; }
.credito a:hover { border-color: var(--ink); }

/* Título final: contorno grabado y un reflector que lo ilumina (--fx, --fy) */
@property --fx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --fy { syntax: '<percentage>'; inherits: true; initial-value: 55%; }
.pie .pie__titulo {
  display: grid; margin: 0; padding: clamp(48px, 7vw, 96px) var(--margen) clamp(40px, 5vw, 64px);
  text-align: center; white-space: nowrap;
  font-size: clamp(2.5rem, 10.2vw, 11.5rem); font-weight: 500; line-height: .95; letter-spacing: -.04em;
}
.pie__titulo span { grid-area: 1 / 1; }
.pie__titulo-base { color: rgba(250, 250, 250, .03); -webkit-text-stroke: 1px rgba(250, 250, 250, .2); }
.pie__titulo-luz {
  color: #fafafa; text-shadow: 0 0 40px rgba(255, 255, 255, .35);
  -webkit-mask-image: radial-gradient(ellipse 24% 130% at var(--fx) var(--fy), #000 0%, rgba(0, 0, 0, .4) 45%, transparent 75%);
  mask-image: radial-gradient(ellipse 24% 130% at var(--fx) var(--fy), #000 0%, rgba(0, 0, 0, .4) 45%, transparent 75%);
}
@media (prefers-reduced-motion: no-preference) {
  .pie__titulo { animation: deriva 16s ease-in-out infinite; }
  .pie__titulo.siguiendo { animation: none; }
  .mov .pie .pie__titulo { opacity: 0; letter-spacing: .06em; filter: blur(10px); transition: opacity 1.8s var(--ease), letter-spacing 2.4s var(--ease), filter 1.8s var(--ease); }
  .mov .pie .pie__titulo.visible { opacity: 1; letter-spacing: -.04em; filter: none; }

  .mov .pie__creditos .credito { opacity: 0; transform: translateY(30px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
  .mov .pie__creditos.visible .credito { opacity: 1; transform: none; filter: none; }
  .mov .pie__creditos.visible .credito:nth-child(2) { transition-delay: .15s; }
  .mov .pie__creditos.visible .credito:nth-child(3) { transition-delay: .3s; }
  .mov .pie__creditos.visible .credito:nth-child(4) { transition-delay: .45s; }
}
@keyframes deriva {
  0% { --fx: 6%; --fy: 35%; } 50% { --fx: 94%; --fy: 70%; } 100% { --fx: 6%; --fy: 35%; }
}

.pie__interior { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.pie__marca { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); font-weight: 500; }
.pie__marca svg { width: 21px; height: 32px; }
.pie p { font-size: .9rem; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .9rem; }
.pie__nav a { color: var(--muted); transition: color .25s; }
.pie__nav a:hover { color: var(--ink); }
.pie__arriba {
  display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: .9rem; font-weight: 500; color: var(--ink);
}
.pie__arriba i {
  width: 30px; height: 30px; border: 1px solid var(--linea-fuerte); border-radius: 50%; position: relative;
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.pie__arriba i::after {
  content: ""; position: absolute; left: 50%; top: 55%; width: 7px; height: 7px; margin: -4px 0 0 -3.5px;
  border-left: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); transform: rotate(45deg);
}
.pie__arriba:hover i { border-color: var(--ink); transform: translateY(-3px); }

/* Corte a negro al volver al inicio */
.cortina { position: fixed; inset: 0; z-index: 95; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.cortina.activa { opacity: 1; pointer-events: auto; }

/* ================================================================
   Pantallas medianas en horizontal
   ================================================================ */
@media (max-width: 1100px) and (min-aspect-ratio: 11/10) {
  .capacidades, .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================
   Vertical / angosto: el escenario pasa a flujo
   ================================================================ */
@media (max-aspect-ratio: 11/10) {
  :root { --m: min(calc(100vw / 430), 1.34px); --u: var(--m); --h: var(--m); }

  .topbar {
    height: calc(84 * var(--m));
    padding-top: env(safe-area-inset-top);
  }
  .brand { left: calc(24 * var(--m)); top: calc(20 * var(--m)); height: calc(43 * var(--m)); gap: calc(11 * var(--m)); }
  .brand svg { width: calc(28 * var(--m)); height: calc(43 * var(--m)); }
  .brand__nombre { font-size: max(17px, calc(20 * var(--m))); }
  .links, .pill-nav { display: none; }

  .burger {
    display: block; position: absolute; right: calc(20 * var(--m)); top: calc(22 * var(--m));
    width: calc(58 * var(--m)); height: calc(40 * var(--m)); min-width: 48px; min-height: 40px;
    border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .burger i {
    position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; margin-left: -9px;
    background: var(--ink); border-radius: 2px;
    transition: transform .42s var(--ease);
  }
  .burger i:first-child { transform: translateY(calc(-4.3 * var(--m))); }
  .burger i:last-child { transform: translateY(calc(4.3 * var(--m))); }
  .menu-abierto .burger i:first-child { transform: rotate(45deg); }
  .menu-abierto .burger i:last-child { transform: rotate(-45deg); }

  .menu {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: linear-gradient(to bottom, rgba(5,5,5,.9), rgba(5,5,5,.97));
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden;
    transition: opacity .42s var(--ease), visibility .42s var(--ease);
  }
  .menu-abierto .menu { opacity: 1; visibility: visible; }
  .menu-inner {
    min-height: 100%; display: flex; flex-direction: column;
    padding: calc(120 * var(--m) + env(safe-area-inset-top)) calc(24 * var(--m)) calc(36 * var(--m) + env(safe-area-inset-bottom));
  }
  .menu-eyebrow { font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--strip); margin-bottom: calc(18 * var(--m)); }
  .menu-list li { border-bottom: 1px solid var(--linea); }
  .menu-list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(16 * var(--m)) 0; font-size: max(25px, calc(31 * var(--m))); font-weight: 400; line-height: 1.15; color: var(--ink);
  }
  .menu-list a::after {
    content: ""; width: 9px; height: 9px; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted);
    transform: rotate(45deg); margin-right: 6px;
  }
  .menu-foot { margin-top: auto; padding-top: calc(36 * var(--m)); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
  .pill-menu { height: 50px; padding: 0 26px; font-size: 1rem; }
  .pill-menu > span { transform: none; }
  .menu-foot .ghost { font-size: 1rem; }

  .menu-eyebrow, .menu-list li, .menu-foot {
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .menu-abierto .menu-eyebrow, .menu-abierto .menu-list li, .menu-abierto .menu-foot { opacity: 1; transform: none; }
  .menu-abierto .menu-eyebrow { transition-delay: .06s; }
  .menu-abierto .menu-list li:nth-child(1) { transition-delay: .10s; }
  .menu-abierto .menu-list li:nth-child(2) { transition-delay: .16s; }
  .menu-abierto .menu-list li:nth-child(3) { transition-delay: .22s; }
  .menu-abierto .menu-list li:nth-child(4) { transition-delay: .28s; }
  .menu-abierto .menu-foot { transition-delay: .34s; }

  .stage {
    height: auto; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: calc(140 * var(--m) + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .plate-video { inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; object-position: 43% center; }
  .plate::after {
    background:
      linear-gradient(to right, rgba(5,5,5,.86) 0%, rgba(5,5,5,.66) 42%, rgba(5,5,5,.20) 78%, rgba(5,5,5,.10) 100%),
      linear-gradient(to bottom, rgba(5,5,5,.72) 0%, rgba(5,5,5,.34) 24%, rgba(5,5,5,.34) 56%, rgba(5,5,5,.80) 82%, rgba(5,5,5,.97) 94%, #050505 100%);
  }

  .hero { position: relative; padding: 0 calc(24 * var(--m)); }
  .headline, .sub, .actions { position: static; }
  .headline {
    font-size: calc(37 * var(--m)); line-height: 1.1; letter-spacing: .01em; white-space: normal;
  }
  .headline span { display: block; } /* dos líneas fijas: la palabra que rota y «bajo control.» */
  .sub {
    margin-top: calc(20 * var(--m)); font-size: calc(17 * var(--m)); line-height: 1.5; word-spacing: 0;
    white-space: normal; max-width: 30em;
  }
  .sub span { display: inline; }
  .actions { margin-top: calc(32 * var(--m)); flex-wrap: wrap; gap: 16px calc(28 * var(--m)); }
  .pill-cta { height: 50px; min-width: 0; padding: 0 26px; font-size: 1rem; }
  .pill-cta > span { transform: none; }
  .actions .ghost { font-size: 1rem; letter-spacing: 0; }

  .logos {
    position: relative; inset: auto; left: auto; width: auto; transform: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: calc(22 * var(--m)) calc(16 * var(--m));
    padding: calc(52 * var(--m)) calc(24 * var(--m)) calc(36 * var(--m));
  }
  .lg { position: static; display: flex; align-items: center; gap: calc(10 * var(--m)); }
  .lg svg, .lg .word { position: static; }
  .lg svg { flex: none; width: calc(24 * var(--m)) !important; height: calc(24 * var(--m)) !important; }
  .lg .word { font-size: calc(16 * var(--m)) !important; }

  .dividido { grid-template-columns: minmax(0, 1fr); }
  .seccion__cabeza--fija, .lectura { position: static; }
  .capacidades, .areas { grid-template-columns: minmax(0, 1fr); gap: 0 40px; }
  .areas { gap: 44px; }
  /* Camino: la línea va a la izquierda y cada etapa en una columna */
  .paso { grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px; row-gap: 22px; align-items: start; padding: 48px 0; }
  .paso__marca { grid-column: 1; grid-row: 1; margin-top: 10px; }
  .paso__texto, .paso:nth-child(even) .paso__texto { grid-column: 2; grid-row: 1; text-align: left; }
  .paso__texto > * { margin-left: 0; }
  .paso__visual, .paso:nth-child(even) .paso__visual { grid-column: 2; grid-row: 2; justify-self: stretch; max-width: none; }
  .paso__texto::before { font-size: 2.6rem; margin-bottom: 8px; }
  .paso h3 { font-size: 1.6rem; }
  .contacto__fondo::after {
    background: linear-gradient(to bottom, var(--alterno) 0%, rgba(10, 10, 10, .78) 28%, rgba(10, 10, 10, .62) 70%, var(--alterno) 100%);
  }
  .contacto__video { object-position: 44% 50%; }
  .desliza { display: none; }
  /* En celular, sin desenfoques de vidrio sobre video y animaciones (caros en gama media): fondos casi opacos */
  .topbar.con-fondo { background: rgba(5, 5, 5, .93); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(5, 5, 5, .97) !important; }
  .contacto__panel { background: rgba(10, 10, 10, .9); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .canal--correo { flex-wrap: wrap; row-gap: 8px; }
  .canal--correo span { flex: 1 1 calc(100% - 40px); }
  .canal--correo small { white-space: nowrap; overflow-wrap: normal; }
  .canal--correo .copiar { margin-left: 40px; }
  .flotante-wa { right: 16px; width: 52px; padding: 0; justify-content: center; }
  .flotante-wa span { display: none; }
  .garantias { grid-template-columns: minmax(0, 1fr); }
  .garantia, .garantia:nth-child(3n) { min-height: 0; border-right: 0; border-bottom: 1px solid var(--linea); padding: 22px 18px; }
  .garantia:nth-last-child(-n + 3) { border-bottom: 1px solid var(--linea); }
  .garantia:last-child { border-bottom: 0; }
  .consola__barra { padding: 14px 18px; }
  .consola__hora { display: none; }
  .caso-escena__fijo { grid-template-columns: minmax(0, 1fr); }
  .mov .caso-escena { height: 520vh; }
  .mov .caso-escena--corta { height: 420vh; }
  .mov .caso-escena__fijo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 14px; padding: 72px 16px 16px; }
  .mov .caso__texto .bajada, .mov .caso__texto .eyebrow { display: none; }
  .mov .caso__texto h2 { font-size: 1.45rem; margin-bottom: 8px; }
  .mov .caso__lista li { display: none; padding: 8px 0 0; font-size: .86rem; border: 0; }
  .mov .caso__lista li.activo { display: block; }
  .mov .caso__lista li::after { display: none; }
  .mov .app { display: flex; flex-direction: column; }
  .mov .app__cuerpo { flex: 1; height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .app__menu { display: none; }
  .pantalla { padding: 14px; gap: 10px; }
  .lector, .solped, .auditoria { font-size: .74rem; }
  .solped__fila { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; }
  .chip-estado b { font-size: .64rem; padding: 2px 7px; }
  .respuesta { font-size: .76rem; }
  .mov .areas { --panel: 86vw; gap: 0; }
  .mov .area {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center;
    height: auto; max-height: 74svh; padding: 0 18px; gap: 16px;
  }
  .mov .area .area__ilustracion { order: -1; width: 100%; max-height: 26svh; }
  .mov .area h3 { margin-bottom: 10px; font-size: 1.6rem; }
  .mov .area__desc { margin-bottom: 10px; font-size: .95rem; }
  .mov .area li { padding: 9px 0; font-size: .9rem; }
  .mov .areas-escena__barra { margin-bottom: 3vh; padding: 0 20px; }
  .areas-escena__nombre { min-width: 0; }
  .mov .construir { height: 600vh; }
  .mov .construir__fijo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 76px 20px 20px; }
  .mov .sistema { order: -1; width: min(100%, 44svh); }
  .mov .construir__panel { height: 100%; }
  .mov .capacidades, .mov .construir__final { inset: 30px 0 0; }
  .mov .capacidad { justify-content: flex-start; }
  .mov .capacidad h3, .mov .construir__final { font-size: 1.7rem; margin-bottom: 10px; }
  .mov .capacidad p, .construir__final span { font-size: .98rem; }
  .mov .capacidad__ejemplos { margin-top: 14px; }
  .mov .capacidad__ejemplos li { padding: 5px 11px; font-size: .78rem; }
  .nodo__nombre { display: none; }
  .areas-orbita span { padding: 3px 8px; letter-spacing: .08em; }
  .areas-orbita span:nth-child(2) { left: 88%; }
  .areas-orbita span:nth-child(5) { left: 12%; }
  .esc, .esc__textos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mov .trans { height: 620vh; }
  .mov .trans__fijo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: 16px; padding: 84px 20px 22px; }
  .trans__contador { margin-bottom: 12px; }
  .trans__indice { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .trans__indice li { height: 2px; padding: 0; border: 0; font-size: 0; background: var(--linea-fuerte); }
  .trans__indice li::after { bottom: 0; height: 2px; }
  .mov .trans__escenas { height: calc(100svh - 160px); }
  .mov .esc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; align-content: stretch; }
  .mov .esc__titulo { grid-row: 1; margin-bottom: 0; font-size: 1.85rem; align-self: start; }
  .mov .esc__textos { grid-row: 2; }
  .mov .esc__antes, .mov .esc__despues { font-size: .98rem; }
  .mov .viz { grid-column: 1; grid-row: 3; height: auto; min-height: 0; align-self: stretch; }
  .viz__capa { padding: 18px; }
  .nota { font-size: .72rem; }
  .tabla { font-size: .72rem; }
  .tabla__fila { grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); gap: 6px; padding: 9px 0; }
  .tabla i { display: none; }
  .stock__fila { grid-template-columns: 1.2fr 1fr auto; gap: 10px; font-size: .78rem; }
  .stock__fila span:last-child { min-width: 0; }
  .cuenta b { font-size: 2.8rem; }
  .mov .manifiesto { height: 360vh; }
  .frag { font-size: .72rem; padding: 6px 10px; }
  /* En angosto: fuera los que tapan el texto (media altura) y el rótulo de capítulo */
  .frag:nth-child(n + 10), .frag:nth-child(1), .frag:nth-child(5), .frag:nth-child(7) { display: none; }
  .mov .orden { display: none; }
  .mov .acto--2 { max-width: 15em; }
  .mov .manifiesto__capitulo { top: 104px; }
  .franja { display: none; }
  .bitacora__lista li { grid-template-columns: 84px 1fr; }
  .bitacora__lista time { display: none; }
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .ficha__fila { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pie__interior { flex-direction: column; align-items: flex-start; }
  .pie__creditos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; }
  .credito dd { font-size: .95rem; overflow-wrap: anywhere; }
  .credito:last-child { grid-column: 1 / -1; }
}

/* Tableta vertical */
@media (min-width: 600px) and (max-aspect-ratio: 11/10) {
  :root { --m: min(calc(100vw / 860), calc(100vh / 760), 1.25px); }
  .plate-video { object-position: 44% center; }
  .plate::after {
    background:
      linear-gradient(to right, rgba(5,5,5,.84) 0%, rgba(5,5,5,.60) 42%, rgba(5,5,5,.16) 78%, rgba(5,5,5,.06) 100%),
      linear-gradient(to bottom, rgba(5,5,5,.66) 0%, rgba(5,5,5,.28) 24%, rgba(5,5,5,.30) 56%, rgba(5,5,5,.78) 82%, rgba(5,5,5,.96) 94%, #050505 100%);
  }
  .hero { padding: 0 calc(56 * var(--m)); }
  .headline { font-size: calc(58 * var(--m)); }
  .headline span { display: block; }
  .sub { font-size: calc(21 * var(--m)); }
  .logos { grid-template-columns: repeat(4, auto); justify-content: space-between; padding: calc(64 * var(--m)) calc(56 * var(--m)) calc(44 * var(--m)); }
  .capacidades, .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001s !important; transition-delay: 0s !important; }
}

/* ---------- Documentos (política de datos) ---------- */
.documento__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 820px; margin: 0 auto; padding: 28px 24px; border-bottom: 1px solid var(--linea);
}
.documento__marca { display: inline-flex; align-items: center; gap: 12px; }
.documento__marca svg { width: 22px; height: 34px; }
.documento__marca .brand__nombre { font-size: 1.15rem; }
.documento__barra .ghost { font-size: .92rem; }
.documento__cuerpo { max-width: 820px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) 24px 96px; }
.documento__cuerpo h1 { margin-bottom: 12px; font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 400; line-height: 1.1; }
.documento__cuerpo h2 { margin: 44px 0 14px; font-size: 1.3rem; font-weight: 500; line-height: 1.3; }
.documento__cuerpo p, .documento__cuerpo li { color: var(--nav); line-height: 1.7; }
.documento__cuerpo p + p { margin-top: 14px; }
.documento__cuerpo ul { display: grid; gap: 10px; margin: 14px 0; padding-left: 20px; list-style: disc; }
.documento__cuerpo a { color: var(--ink); border-bottom: 1px solid var(--linea-fuerte); }
.documento__cuerpo strong { color: var(--ink); font-weight: 500; }
.documento__fecha { margin-bottom: 32px; color: var(--muted) !important; font-size: .92rem; }
.documento__datos { display: grid; border-top: 1px solid var(--linea); }
.documento__datos div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.documento__datos dt { font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--strip); padding-top: 3px; }
.documento__datos dd { margin: 0; color: var(--ink); }
/* Datos legales aún por completar: imposibles de pasar por alto */
.pendiente { padding: 1px 6px; border-radius: 4px; background: #ffd84d; color: #050505; font-weight: 600; }

/* Autorización de datos en el formulario */
.campo--acepta { flex-direction: row; }
.acepta { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: .9rem; font-weight: 400 !important; color: var(--nav) !important; line-height: 1.5; }
.acepta input { flex: none; width: 18px !important; height: 18px; margin-top: 2px; padding: 0 !important; accent-color: #fafafa; cursor: pointer; }
.acepta a { color: var(--ink); border-bottom: 1px solid var(--linea-fuerte); }
.campo--acepta::after { display: none; }
.pie__politica { color: var(--muted); }
.pie__politica:hover { color: var(--ink); }

/* ---------- Página 404 ---------- */
.no-encontrada .stage { display: flex; align-items: center; }
.no-encontrada .hero { position: relative; padding: 0 var(--margen); }
.no-encontrada .headline, .no-encontrada .sub, .no-encontrada .actions { position: static; }
.no-encontrada .sub { margin: 28px 0 40px; }