/* ═══════════════════════════════════════════════════════════════
   muxta · la capa de medición
   ---------------------------------------------------------------
   CINE OSCURO, calcado del patrón que pidió JuanDa (CONSTRUX) y
   adaptado a nosotros. Los dos movimientos que definen ese estilo:

   1 · HERO EN CAPAS. Video de fondo → una PALABRA GIGANTE encima →
       y sobre ella el panel de vidrio con el contenido. La palabra
       queda atrapada entre el video y el objeto, que es lo que da
       la sensación de profundidad. Sin blend-modes: no falla nunca.

   2 · LÍNEA DE TIEMPO RASCADA POR EL SCROLL. Una pista larga
       (200vh por etapa); dentro, una escena pegada donde el video
       NO se reproduce: se le mueve el tiempo con el scroll. Abajo,
       una barra segmentada que se va llenando etapa por etapa.

   Los colores son los de la aplicación (PALETA.md). Sobre negro se
   usan en su versión viva. El acento es el pico #F16935.
   ═══════════════════════════════════════════════════════════════ */

@property --sol-x   { syntax:"<percentage>"; inherits:true; initial-value:50% }
@property --sol-y   { syntax:"<percentage>"; inherits:true; initial-value:14% }
@property --sol-alt { syntax:"<number>";     inherits:true; initial-value:.8 }

:root{
  --negro:#04070D;
  --negro-2:#080C15;
  --humo:#0D1420;
  --borde:rgba(255,255,255,.10);
  --borde-2:rgba(255,255,255,.22);

  --blanco:#FFFFFF;
  --texto:#C9D5E6;
  --texto-2:#8B99AF;

  --az-900:#072045; --az-800:#063069; --az-700:#0B4EA2; --az-600:#1D5FBC;
  --az-500:#4D86D9; --az-400:#86B0ED; --az-300:#C2D9FC; --az-200:#E7F1FF;

  --c-hvac:#2F86FF; --c-tomas:#34D6C8; --c-luces:#FFC738;
  --c-ups:#A98BFF;  --c-otros:#9AA6BD;

  --oro:#FFD34D; --pico:#F16935; --verde:#4AB67F;

  /* La misma voz que la aplicación: la tipografía del sistema. En un Mac
     eso es SF Pro, que es la cara con la que está dibujada la interfaz
     que hay alrededor — de ahí que el texto se sienta "de la casa". */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
         "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* ── EL RITMO ────────────────────────────────────────────────
     Antes había once espaciados y siete radios sueltos, que es lo
     contrario de un sistema. Cuatro radios y la progresión
     8 · 12 · 16 · 24 · 32 · 40, y nada fuera de ella. Es la misma
     corrección que hizo falta en la app para que se sintiera Apple. */
  --e1:.5rem; --e2:.75rem; --e3:1rem; --e4:1.5rem; --e5:2rem; --e6:2.5rem;
  --r1:10px; --r2:16px; --r3:22px; --r9:999px;

  /* la curva de Apple: sale rápido y frena largo */
  --sale:cubic-bezier(.23,1,.32,1);

  --medida:36rem; --ancho:78rem;

  transition:--sol-x 60s linear, --sol-y 60s linear, --sol-alt 60s linear;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--negro)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
body{margin:0;background:var(--negro);color:var(--texto);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

.wrap{max-width:var(--ancho);margin:0 auto;padding:0 clamp(1.15rem,4vw,3rem)}
.col{max-width:var(--medida)}
a{color:var(--az-400)}
h1,h2,h3{margin:0;text-wrap:balance;color:var(--blanco)}
p{margin:0 0 1.05rem} p:last-child{margin-bottom:0}
strong{font-weight:660;color:var(--blanco)}
img{max-width:100%;height:auto;display:block}

/* ── barra superior ─────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:90;
  background:linear-gradient(180deg,rgba(4,7,13,.9),rgba(4,7,13,0));backdrop-filter:blur(10px)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.marca{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.marca svg{display:block;width:24px;height:24px;flex:none}
.marca b{font-size:1.25rem;font-weight:800;letter-spacing:-.05em;color:var(--blanco);line-height:1}
.marca b i{font-style:normal;color:var(--az-500)}
.nav{display:flex;gap:var(--e1);align-items:center}
/* Los enlaces son ZONAS, no palabras sueltas: 44 px de alto, que es el
   mínimo que Apple da a cualquier cosa que se toque con el dedo. */
.nav a:not(.cta){display:inline-flex;align-items:center;min-height:40px;
  padding:0 var(--e2);border-radius:var(--r1);
  font-size:.9rem;color:var(--texto);text-decoration:none;font-weight:500;
  letter-spacing:-.008em;transition:background .2s var(--sale),color .2s var(--sale)}
.nav a:not(.cta):hover{color:var(--blanco);background:rgba(255,255,255,.07)}
/* En el teléfono NO desaparecen: la fila rueda de lado. Esconder la
   navegación entera para ahorrar sitio deja al visitante sin mapa. */
@media(max-width:58rem){
  .topbar .wrap{gap:var(--e2)}
  .nav{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a:not(.cta){flex:none;font-size:.84rem;padding:0 .55rem}
}
@media(max-width:34rem){ .nav a:not(.cta){display:none} }

/* ── EL BOTÓN ───────────────────────────────────────────────────
   El patrón que aprobó JuanDa (texto + cuadrito naranja con flecha),
   con el trato de Apple: 44 px de alto real, esquina blanda, y se
   HUNDE al pulsar en vez de solo cambiar de color. */
.cta,.boton{display:inline-flex;align-items:center;gap:var(--e2);text-decoration:none;
  min-height:44px;font-size:.95rem;font-weight:590;letter-spacing:-.012em;color:var(--blanco);
  background:rgba(255,255,255,.07);border:1px solid var(--borde-2);
  padding:.35rem .35rem .35rem var(--e3);border-radius:var(--r1);backdrop-filter:blur(10px);
  transition:background .25s var(--sale),transform .18s var(--sale),
             border-color .25s var(--sale),box-shadow .25s var(--sale)}
.cta:hover,.boton:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);
  transform:translateY(-1px)}
.cta:active,.boton:active{transform:scale(.975);transition-duration:.06s}
.cta i,.boton i{width:34px;height:34px;flex:none;background:var(--pico);border-radius:7px;
  display:grid;place-items:center;color:#140800;
  transition:transform .3s var(--sale)}
.cta:hover i,.boton:hover i{transform:translateX(2px)}
.cta i svg,.boton i svg{display:block}
.boton.fuerte{background:var(--pico);border-color:var(--pico);color:#120701;
  padding-left:var(--e4);box-shadow:0 8px 26px -10px rgba(241,105,53,.85)}
.boton.fuerte i{background:rgba(0,0,0,.22);color:#fff}
.boton.fuerte:hover{background:#FF7C46;border-color:#FF7C46;
  box-shadow:0 12px 34px -10px rgba(241,105,53,.95)}

/* UN solo anillo de foco para todo lo que se puede enfocar. Antes el
   foco solo cambiaba el fondo, que con el teclado no se ve. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--pico);outline-offset:3px;border-radius:var(--r1)}

/* ══ HERO EN CAPAS ══════════════════════════════════════════ */
/* columna: la palabra ocupa el hueco de arriba y el texto va abajo.
   Así NUNCA se pisan — antes la palabra iba en absoluto y se comía
   el texto, que es justo el error que no se puede repetir. */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;background:var(--negro)}
.hero__centro{position:relative;z-index:3;flex:1 1 auto;display:grid;place-items:center;
  padding-top:64px;min-height:0}
.hero__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.85}
.hero__sol{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(44vmax 36vmax at var(--sol-x) var(--sol-y),
    rgb(255 231 168 / calc(.22 * var(--sol-alt) + .04)), transparent 64%)}
.hero__velo{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,13,.62) 0%,rgba(4,7,13,.18) 30%,
             rgba(4,7,13,.55) 70%,rgba(4,7,13,.96) 100%)}
/* LA PALABRA: atrapada entre el video y el panel */
.palabra{text-align:center;pointer-events:none;width:100%;
  font-size:clamp(2.6rem,12.5vw,10rem);line-height:.8;font-weight:900;letter-spacing:-.055em;
  color:rgba(233,240,250,.94);text-shadow:0 20px 90px rgba(0,0,0,.75)}
.palabra span{color:var(--pico)}
.palabra small{display:block;font-size:clamp(.74rem,1.1vw,.84rem);
  letter-spacing:.16em;font-weight:400;color:var(--texto-2);margin-top:1.4rem;
  text-shadow:none}

/* ── EL ENUNCIADO: la frase que define la marca ──────────────
   Es la pieza más importante de la página según JuanDa, así que
   tiene sección propia y el tamaño de un titular. */
.enunciado{position:relative;overflow:hidden;isolation:isolate;background:var(--negro);
  padding:clamp(5rem,11vw,9rem) 0}
.enunciado__velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,7,13,.88),rgba(4,7,13,.55) 45%,rgba(4,7,13,.92))}
.enunciado .wrap{position:relative;z-index:2}
.enunciado__q{font-size:clamp(1.3rem,3.4vw,2.2rem);line-height:1.2;letter-spacing:-.03em;
  font-weight:700;color:var(--texto-2);max-width:24ch;margin-bottom:clamp(2rem,5vw,3.2rem)}
.enunciado__q em{font-style:normal;color:var(--blanco)}
.enunciado__frase{font-size:clamp(1.5rem,3.5vw,2.6rem);line-height:1.1;letter-spacing:-.038em;
  font-weight:800;color:var(--blanco);max-width:26ch}
.enunciado__frase b{color:var(--pico);font-weight:800}
.enunciado__reparto{display:grid;gap:1px;background:var(--borde);border:1px solid var(--borde);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));margin-top:clamp(2.4rem,5vw,3.4rem)}
.enunciado__reparto div{background:rgba(8,12,21,.72);backdrop-filter:blur(12px);
  padding:1.6rem 1.7rem}
.enunciado__reparto .q{font-size:.77rem;letter-spacing:.09em;
  color:var(--texto-2);margin-bottom:.8rem}
.enunciado__reparto p{font-size:1.06rem;line-height:1.35;color:var(--texto);margin:0}
.enunciado__reparto .nos{background:rgba(241,105,53,.10)}
.enunciado__reparto .nos .q{color:var(--pico)}
.enunciado__reparto .nos p{color:var(--blanco);font-weight:640}
.hero__txt{position:relative;z-index:4;width:100%;padding-top:0;
  padding-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.hero__fila{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.hero__pie{font-size:.78rem;letter-spacing:.1em;color:var(--texto-2);
  text-align:right;line-height:1.7}
.hero__pie b{color:var(--blanco);display:block;font-size:.88rem;letter-spacing:.01em}

.ojo{display:inline-flex;align-items:center;gap:.6rem;font-size:.79rem;
  letter-spacing:.11em;color:var(--pico);margin-bottom:1.2rem}
.ojo::before{content:"";width:24px;height:1px;background:var(--pico);display:block}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--texto);line-height:1.5;max-width:32rem}
.lede b{color:var(--blanco);font-weight:640}
.acciones{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}

.solchip{position:absolute;top:calc(64px + 1rem);right:clamp(1.15rem,4vw,3rem);z-index:5;
  display:flex;align-items:center;gap:.5rem;font-size:.76rem;
  letter-spacing:.06em;color:var(--texto);background:rgba(4,7,13,.55);
  border:1px solid var(--borde);backdrop-filter:blur(8px);padding:.42rem .8rem;border-radius:var(--r9)}
.solchip i{width:7px;height:7px;border-radius:50%;background:var(--oro);display:block;
  box-shadow:0 0 12px var(--oro)}
:root[data-cielo="noche"] .solchip i{background:var(--az-400);box-shadow:0 0 12px var(--az-400)}

/* ══ LA LÍNEA DE TIEMPO RASCADA POR EL SCROLL ══════════════ */
.linea{position:relative;background:var(--negro)}      /* la altura la pone el JS */
.linea__fijo{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end}
.linea__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.linea__velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,13,.55) 0%,rgba(4,7,13,.12) 34%,
             rgba(4,7,13,.72) 78%,rgba(4,7,13,.97) 100%)}
.linea__rotulo{position:absolute;top:calc(64px + 2.2rem);right:clamp(1.15rem,4vw,3rem);z-index:3;
  font-size:.78rem;letter-spacing:.1em;color:var(--texto-2);
  text-align:right;line-height:1.6}
.linea__txt{position:relative;z-index:3;width:100%;padding-bottom:clamp(5rem,10vw,7rem)}
.linea__num{font-size:.82rem;letter-spacing:.12em;color:var(--pico);
  margin-bottom:.9rem;text-shadow:0 1px 12px rgba(4,7,13,.95),0 0 3px rgba(4,7,13,.9)}
.linea__tit{font-size:clamp(2.1rem,6vw,4.4rem);line-height:.98;letter-spacing:-.04em;
  font-weight:800;color:var(--blanco);max-width:16ch;text-shadow:0 4px 50px rgba(4,7,13,.7)}
.linea__dur{font-size:.82rem;letter-spacing:.1em;color:var(--texto);
  margin-top:1.1rem;text-shadow:0 1px 12px rgba(4,7,13,.95)}
.linea__desc{margin-top:1.1rem;max-width:32rem;color:var(--texto);font-size:1rem;
  text-shadow:0 1px 14px rgba(4,7,13,.9)}
/* la barra segmentada, abajo del todo */
.linea__barra{position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:grid;gap:0;padding:0 clamp(1.15rem,4vw,3rem) clamp(1.6rem,3vw,2.2rem)}
.seg{position:relative;height:34px;border-top:1px solid var(--borde-2);
  display:flex;align-items:center;padding-top:.4rem}
.seg__n{font-size:.78rem;letter-spacing:.08em;color:var(--texto-2);
  position:relative;z-index:2}
.seg.activo .seg__n,.seg.hecho .seg__n{color:var(--blanco)}
.seg__relleno{position:absolute;left:0;top:-1px;height:3px;background:var(--pico);width:0%;
  transition:width .1s linear}

/* ══ BLOQUES NORMALES ═══════════════════════════════════════ */
section.bloque{padding:clamp(4rem,9vw,7rem) 0;position:relative}
.bloque.conmarco{border-top:1px solid var(--borde)}
.etiqueta{font-size:.79rem;letter-spacing:.11em;color:var(--texto-2);
  display:flex;align-items:center;gap:.75rem;margin-bottom:1.6rem}
.etiqueta::after{content:"";flex:1;height:1px;background:var(--borde)}
h2{font-size:clamp(2rem,5.4vw,3.7rem);line-height:.99;letter-spacing:-.042em;font-weight:800;
  margin-bottom:1.1rem}
h3{font-size:1.06rem;line-height:1.28;letter-spacing:-.012em;font-weight:700;margin-bottom:.45rem}

/* la fila de cifras del patrón: sin cajas, sólo líneas */
.fila-cifras{display:grid;gap:1px;background:var(--borde);border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde);grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  margin-top:2.4rem}
.fc{background:var(--negro);padding:var(--e4)}
.fc .k{font-size:.76rem;letter-spacing:.08em;color:var(--texto-2)}
.fc .n{font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,4vw,2.7rem);line-height:1;font-weight:650;letter-spacing:-.04em;
  color:var(--blanco);margin-top:.7rem}
.fc .n.pico{color:var(--pico)}
.fc .d{font-size:.88rem;color:var(--texto-2);margin-top:.7rem;line-height:1.45}

.vidrio{background:rgba(9,14,24,.66);border:1px solid var(--borde);
  backdrop-filter:blur(20px) saturate(1.3);border-radius:var(--r2);
  padding:clamp(1.4rem,3vw,2rem);box-shadow:0 30px 80px rgba(0,0,0,.55)}

/* ══ EL PANEL DE CONTROL, EMBEBIDO Y VIVO ═══════════════════
   Es la aplicación de producción dentro de un iframe. Nítida
   siempre —no es una imagen— y tocable de verdad.

   Lo que hubo antes aquí fue un gráfico de barras DIBUJADO por mí
   sobre fondo negro, y JuanDa lo cazó a la primera: el panel real
   es CLARO, con una cifra gigante, una curva suave y cuatro
   indicadores en fila. No se parecía en nada. La lección: cuando
   la app existe, se enseña la app. */
.panel{margin:var(--e6) 0 0}
.panel__cabeza{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--e3);flex-wrap:wrap;margin-bottom:var(--e3)}
.panel__tit{font-size:1rem;font-weight:620;color:var(--blanco);letter-spacing:-.014em}
.panel__cabeza .vivo{display:flex;align-items:center;gap:.5rem;color:var(--verde);
  font-size:.82rem;font-weight:500}
.punto{width:7px;height:7px;border-radius:50%;background:var(--verde);display:inline-block;
  box-shadow:0 0 10px var(--verde);animation:latir 2.4s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.25}}

.panel__marco{border-radius:var(--r2);overflow:hidden;background:#0A0F18;
  border:1px solid var(--borde-2);
  box-shadow:0 40px 110px rgba(0,0,0,.8),0 0 90px rgba(77,134,217,.16)}
.panel__barra{display:flex;align-items:center;gap:var(--e2);padding:.6rem .9rem;
  background:#0D1420;border-bottom:1px solid var(--borde)}
.panel__barra .bolas{display:flex;gap:5px}
.panel__barra .bolas i{width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.16);display:block}
.panel__barra .ruta{font-size:.78rem;color:var(--texto-2);letter-spacing:.01em}
.panel__abrir{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;
  min-height:32px;padding:0 .7rem;font-size:.82rem;font-weight:560;color:var(--texto);
  text-decoration:none;border:1px solid var(--borde-2);border-radius:var(--r9);
  transition:background .2s var(--sale),color .2s var(--sale)}
.panel__abrir:hover{background:rgba(255,255,255,.10);color:#fff}
.panel__abrir i{display:grid;place-items:center;color:var(--pico)}
/* alto generoso: el panel tiene resumen ARRIBA y tarjetas debajo, y
   cortarlo por la mitad lo hace parecer una captura otra vez */
.panel__vista{display:block;width:100%;height:min(86svh,52rem);border:0;background:#FDFCF7}
@media(max-width:44rem){.panel__vista{height:min(74svh,38rem)}}
.panel__nota{margin:var(--e3) 0 0;font-size:.88rem;color:var(--texto-2);max-width:46rem}
.panel__nota b{color:var(--texto);font-weight:600}

/* el producto */
.escaparate{perspective:1800px;perspective-origin:50% 40%}
.marco{position:relative;border-radius:var(--r2);overflow:hidden;background:#0A0F18;
  border:1px solid var(--borde-2);
  box-shadow:0 40px 110px rgba(0,0,0,.8),0 0 90px rgba(77,134,217,.16);
  transform:rotateX(7deg) rotateY(-5deg) translateY(var(--py,0px));
  transform-style:preserve-3d;will-change:transform;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.marco:hover{transform:rotateX(1deg) rotateY(-1deg) translateY(var(--py,0px)) scale(1.014)}
.marco__barra{display:flex;align-items:center;gap:.55rem;padding:.6rem .95rem;
  background:#0D1420;border-bottom:1px solid var(--borde)}
.marco__barra .bolas{display:flex;gap:5px}
.marco__barra .bolas i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);display:block}
.marco__barra .ruta{font-size:.76rem;color:var(--texto-2);letter-spacing:.02em}
.marco img{width:100%;display:block}
.marco__brillo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.12) 48%,transparent 60%)}
.pie-marco{font-size:.78rem;letter-spacing:.04em;color:var(--texto-2);
  margin-top:1rem}

/* dos tarjetas grandes, como el patrón */
.dos-tarjetas{display:grid;gap:1px;background:var(--borde);border:1px solid var(--borde);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));margin-top:2.4rem}
.tarjeta{background:var(--negro-2);padding:1.8rem 1.8rem 1.9rem;
  transition:background .18s}
.tarjeta:hover{background:var(--humo)}
.tarjeta .ico{font-size:.77rem;letter-spacing:.09em;color:var(--pico);
  margin-bottom:1rem}
.tarjeta .grande{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:650;letter-spacing:-.04em;
  color:var(--blanco);display:block;margin-bottom:.5rem;line-height:1}
.tarjeta p{font-size:.95rem;color:var(--texto-2);line-height:1.55}

.tres{display:grid;gap:1px;background:var(--borde);border:1px solid var(--borde);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));margin-top:2.2rem}
.ficha{background:var(--negro-2);padding:1.7rem 1.7rem 1.8rem;transition:background .18s}
.ficha:hover{background:var(--humo)}
.ficha .ico{font-size:.77rem;letter-spacing:.09em;color:var(--pico);
  margin-bottom:.9rem}
.ficha .grande{font-variant-numeric:tabular-nums;font-size:1.7rem;font-weight:650;letter-spacing:-.04em;
  color:var(--blanco);display:block;margin-bottom:.45rem;line-height:1}
.ficha p{font-size:.95rem;color:var(--texto-2);line-height:1.55}

.cargas{display:flex;height:12px;overflow:hidden;margin:1.2rem 0 .85rem;border:1px solid var(--borde)}
.cargas i{display:block;height:100%}
.cargas-ley{display:flex;gap:1rem;flex-wrap:wrap;font-size:.77rem;
  letter-spacing:.02em;color:var(--texto-2)}
.cargas-ley span{display:flex;align-items:center;gap:.4rem}
.cargas-ley b{color:var(--blanco);font-weight:650}

.envuelve{overflow-x:auto;border:1px solid var(--borde);margin-top:2.2rem;background:var(--negro-2)}
.tabla{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.96rem;min-width:34rem}
.tabla th{font-size:.76rem;letter-spacing:.08em;color:var(--texto-2);
  font-weight:400;text-align:left;padding:var(--e3) var(--e4);border-bottom:1px solid var(--borde-2)}
.tabla th.nos{color:var(--pico)}
.tabla td{padding:var(--e2) var(--e4);border-bottom:1px solid var(--borde);color:var(--texto-2);
  vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla td.nos{color:var(--blanco)}

.franja{border-left:3px solid var(--pico);background:rgba(241,105,53,.08);
  padding:var(--e4);margin:var(--e5) 0;border-radius:0 var(--r1) var(--r1) 0}
.franja p{font-size:1rem;color:var(--texto)}

footer{border-top:1px solid var(--borde);padding:2.8rem 0 3.5rem;font-size:.9rem;
  color:var(--texto-2);line-height:1.6}
footer .fila{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:flex-end}
footer .marca{margin-bottom:.7rem}

/* Ningún contenido arranca oculto. Si el JS no carga, la línea de
   tiempo se ve igual: el video queda en su primer cuadro y todas las
   etapas siguen escritas en el HTML. */


/* ── EL CIERRE: una tarjeta, como en la referencia ──────────── */
.cierre{padding:clamp(4rem,9vw,7rem) 0 clamp(5rem,10vw,8rem);border-top:1px solid var(--borde)}
.tarjeta-cierre{background:var(--negro-2);border:1px solid var(--borde);
  padding:clamp(2rem,5vw,3.4rem);position:relative;overflow:hidden;
  border-radius:var(--r3)}
.tarjeta-cierre::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:56px 56px}
.tarjeta-cierre > *{position:relative;z-index:1}
.tc__marca{display:flex;align-items:center;gap:.6rem;margin-bottom:1.8rem}
.tc__marca b{font-size:1.35rem;font-weight:800;letter-spacing:-.05em;color:var(--blanco);line-height:1}
.tc__marca b i{font-style:normal;color:var(--az-500)}
.tarjeta-cierre h2{max-width:19ch;margin-bottom:1.1rem}
.tarjeta-cierre p{max-width:36rem;color:var(--texto-2)}
/* la línea que quita el miedo a pulsar: va DEBAJO del botón, pequeña */
.tc__pie{margin-top:var(--e3)!important;font-size:.86rem;color:var(--texto-2);opacity:.85}

/* El marco se limita a 980 px: las capturas de la app miden ~2515 px de
   ancho, así que mostradas aquí dan MÁS de 2×, que es lo que hace falta
   para que se vean nítidas en una pantalla retina. Más grandes, se
   ablandan — y eso es justo lo que JuanDa venía viendo. */
.escaparate{max-width:980px;margin-inline:auto}

/* ═══════════════════════════════════════════════════════════════
   LA APP, EMBEBIDA Y VIVA
   ---------------------------------------------------------------
   Antes esto eran capturas: se veían blandas en retina y no se
   podían tocar. Ahora es la aplicación de verdad dentro de un
   iframe — nítida siempre, porque no es una imagen, y tocable.
   ═══════════════════════════════════════════════════════════════ */
.app-viva{margin-top:2.6rem;border-radius:var(--r2);overflow:hidden;background:#0A0F18;
  border:1px solid var(--borde-2);
  box-shadow:0 40px 110px rgba(0,0,0,.8),0 0 90px rgba(77,134,217,.16)}
.app-viva__barra{display:flex;align-items:center;gap:.6rem;padding:.62rem .95rem;
  background:#0D1420;border-bottom:1px solid var(--borde)}
.app-viva__barra .bolas{display:flex;gap:5px}
.app-viva__barra .bolas i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);display:block}
.app-viva__barra .ruta{font-size:.76rem;color:var(--texto-2);letter-spacing:.02em}
.app-viva__abrir{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.82rem;font-weight:590;color:var(--texto);text-decoration:none;
  border:1px solid var(--borde-2);border-radius:var(--r9);padding:.4rem .8rem;
  transition:background .15s,color .15s}
.app-viva__abrir:hover,.app-viva__abrir:focus-visible{background:rgba(255,255,255,.10);
  color:#fff;outline:none}
.app-viva__abrir i{display:grid;place-items:center;color:var(--pico)}
.app-viva__marco{display:block;width:100%;height:min(80svh,44rem);border:0;background:#FDFCF7}
@media(max-width:44rem){.app-viva__marco{height:min(70svh,34rem)}}

/* la frase que más convence, con el tamaño que merece */
.prueba{background:rgba(241,105,53,.09);border-left:3px solid var(--pico);
  padding:var(--e4);margin:var(--e5) 0 0;border-radius:0 var(--r1) var(--r1) 0}
.prueba p{font-size:clamp(1.05rem,2.1vw,1.35rem);line-height:1.35;color:var(--blanco);
  font-weight:640;margin:0 0 .8rem}
.prueba span{font-size:.81rem;letter-spacing:.04em;color:var(--texto-2);
  line-height:1.7;display:block}
.prueba span b{color:var(--pico)}
/* la pregunta del cliente, presentada como cita */
.enunciado__pre{font-size:.8rem;letter-spacing:.1em;
  color:var(--pico);margin-bottom:1.1rem}