/* Landing de PagoLink VE. Usa los tokens de estilos.css. Sin estilos en línea: la CSP (style-src 'self') los bloquea.
   El 3D es CSS (perspectiva + canto con sombras sólidas). El movimiento al recorrer usa animation-timeline y solo existe
   si el navegador lo soporta y la persona no pidió reducir movimiento: sin eso, todo se ve igual pero quieto. */

html { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.landing { background: var(--fondo); overflow-x: clip; }
.contenedor { width: min(1200px, 100% - 40px); margin-inline: auto; }
.icono { width: 22px; height: 22px; }

.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--radio-sm); background: var(--accion); color: var(--sobre); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 12px; }

/* Cabecera: material translúcido sobre el contenido */
.cabecera { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); background: rgb(8 13 18 / 0.72); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid rgb(188 230 242 / 0.08); }
@media (prefers-reduced-transparency: reduce) { .cabecera { background: var(--fondo); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.cabecera-fila { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.cabecera .marca-producto { min-height: 44px; color: var(--tinta); text-decoration: none; font-size: 19px; white-space: nowrap; }
.ve { font: 500 11px var(--mono); letter-spacing: 0.06em; color: var(--tinta-2); transform: translateY(-7px); margin-left: -4px; }
.menu { display: none; gap: 4px; margin-left: 12px; }
.menu a, .menu-movil nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--tinta-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.cabecera-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.boton.corto { width: auto; min-height: 44px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
@media (max-width: 400px) { .cabecera-fila { gap: 12px; } .boton.corto { padding: 0 14px; font-size: 14px; } }
/* Pantallas muy estrechas: el botón de la cabecera pasa al menú para que nada se corte. */
@media (max-width: 359px) { .cabecera .boton.corto { display: none; } }
.cabecera .entrar { display: none; text-decoration: none; }
.menu-movil { position: relative; }
.menu-movil summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linea-fuerte); cursor: pointer; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil nav { position: absolute; right: 0; top: calc(100% + 10px); display: grid; min-width: 220px; padding: 8px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-alta); }
@media (min-width: 980px) {
  .menu { display: flex; }
  .cabecera .entrar { display: inline-flex; }
  .menu-movil { display: none; }
}

/* Tipografía de sección */
.seccion { position: relative; padding: 88px 0; }
.etiqueta { font: 500 13px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accion); }
.landing h1 { margin-top: 18px; font-size: clamp(3rem, 8.5vw, 6.4rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.96; }
.landing h2 { margin-top: 16px; font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.04; }
.landing h1 em, .landing h2 em { font-style: normal; color: var(--accion); }
.landing h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.bajada { margin-top: 22px; font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.55; color: var(--tinta-2); max-width: 36em; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.acciones .boton { width: auto; padding: 0 26px; }
.cabeza-seccion { max-width: 720px; }

/* Losa 3D: tarjeta con canto (capas de sombra sólida) */
.losa { --c: #0b2530; position: relative; list-style: none; border-radius: 24px; padding: 28px 26px 30px; background: linear-gradient(160deg, #1d3140, var(--superficie) 70%); border: 1px solid rgb(188 230 242 / 0.14);
  box-shadow: 2px 2px 0 var(--c), 4px 4px 0 var(--c), 6px 6px 0 var(--c), 8px 8px 0 var(--c), 10px 10px 0 var(--c), 12px 12px 0 var(--c), 30px 40px 60px rgb(0 0 0 / 0.5); }
.losa.acento { --c: #0c2f3a; background: linear-gradient(160deg, #21677c, var(--petroleo, #174958) 75%); border-color: rgb(188 230 242 / 0.3); }
.losa p { margin-top: 10px; color: var(--tinta-2); line-height: 1.5; }
.losa.acento p { color: #d6ecf3; }
.rotulo { font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accion); margin: 0 0 12px !important; }
.losa > .icono { width: 30px; height: 30px; color: var(--accion); margin-bottom: 14px; }

/* ---------- Inicio ---------- */
/* Retícula de plano técnico y miras en las esquinas: detalle de instrumento, nunca protagonista. */
.portada { padding-top: 48px; padding-bottom: 0; overflow: hidden; }
.portada::before { content: ''; position: absolute; inset: -20% -10% auto; height: 110%; background: radial-gradient(45% 50% at 72% 42%, rgb(48 92 114 / 0.7), transparent 70%); pointer-events: none; }
.reticula { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgb(188 230 242 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(188 230 242 / 0.06) 1px, transparent 1px); background-size: 72px 72px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 60% at 70% 40%, #000, transparent); mask-image: radial-gradient(70% 60% at 70% 40%, #000, transparent); }
.portada-rejilla { position: relative; display: grid; gap: 24px; }

.escena { position: relative; height: 470px; perspective: 1600px; }
.plano { position: absolute; inset: 0; --d: 12; transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.plano-tel { --d: 30; } .plano-piezas { --d: 48; pointer-events: none; }
/* El vidrio: sin marco, la máscara deja solo la pieza y «lighten» lo funde con el fondo oscuro. */
.vidrio { position: relative; aspect-ratio: 1 / 1; }
.vidrio img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(90deg, transparent 17%, #000 24%, #000 78%, transparent 86%), linear-gradient(180deg, transparent 12%, #000 21%, #000 72%, transparent 85%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 17%, #000 24%, #000 78%, transparent 86%), linear-gradient(180deg, transparent 12%, #000 21%, #000 72%, transparent 85%); mask-composite: intersect; }
.vidrio::before { content: ''; position: absolute; inset: 18% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgb(48 92 114 / 0.6), transparent); filter: blur(20px); }
/* Reflejo que sigue al puntero sobre la cara del vidrio */
.vidrio::after { content: ''; position: absolute; inset: 16% 23% 23% 21%; border-radius: 12%; pointer-events: none; mix-blend-mode: overlay;
  background: radial-gradient(40% 40% at calc(30% + var(--mx, 0) * 40%) calc(25% + var(--my, 0) * 40%), rgb(255 255 255 / 0.55), transparent 70%); }
.plano-vidrio .flota { position: absolute; left: -6%; top: -2%; width: min(92%, 420px); }
.tel { position: absolute; width: 230px; aspect-ratio: 380 / 780; padding: 9px; border-radius: 42px; background: linear-gradient(145deg, #3a5a69, #0a1218 42%, #02060a); overflow: hidden;
  box-shadow: 0 0 0 1.5px rgb(188 230 242 / 0.4), -3px 3px 0 #0e2a35, -6px 6px 0 #0c242e, -9px 9px 0 #0a1f28, -45px 70px 90px rgb(0 0 0 / 0.75); }
.tel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 33px; }
.tel::after { content: ''; position: absolute; inset: 9px; border-radius: 33px; background: linear-gradient(115deg, rgb(255 255 255 / 0.16), transparent 32%); pointer-events: none; }
.tel-frente { right: 0; bottom: 0; width: 150px; border-radius: 30px; padding: 7px; transform: rotateY(-22deg) rotateX(6deg) rotateZ(7deg);
  box-shadow: 0 0 0 1.5px rgb(188 230 242 / 0.45), 3px 3px 0 #0e2a35, 6px 6px 0 #0c242e, 9px 9px 0 #0a1f28, 45px 70px 90px rgb(0 0 0 / 0.75), 0 0 120px rgb(188 230 242 / 0.14); }
.tel-frente img, .tel-frente::after { border-radius: 24px; } .tel-frente::after { inset: 7px; }
.pieza { position: absolute; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 20px; --c: #0c2f3a; color: var(--tinta);
  background: linear-gradient(140deg, #2f8aa5, #174958); box-shadow: inset 0 2px 0 rgb(188 230 242 / 0.5), 2px 3px 0 var(--c), 4px 6px 0 var(--c), 6px 9px 0 var(--c), 18px 28px 32px rgb(0 0 0 / 0.55); }
.pieza.clara { --c: #6ea6ba; color: var(--fondo); background: linear-gradient(140deg, #f2f5fc, #bce6f2); box-shadow: inset 0 2px 0 #fff, 2px 3px 0 var(--c), 4px 6px 0 var(--c), 6px 9px 0 var(--c), 18px 28px 32px rgb(0 0 0 / 0.55); }
.pieza .icono { width: 32px; height: 32px; }
.plano-piezas .pieza { width: 54px; height: 54px; border-radius: 16px; } .plano-piezas .pieza .icono { width: 26px; height: 26px; }
.p-link { right: 8%; top: 4%; transform: rotate(12deg); }
.p-whatsapp { left: 44%; bottom: 6%; transform: rotate(-9deg); }
.sello { position: absolute; left: 4%; bottom: 20%; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 12px; border-radius: 999px; background: var(--accion); color: var(--sobre); font: 500 13px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 4px 0 #5d97ab, 0 18px 30px rgb(0 0 0 / 0.6); transform: rotate(-4deg); }
.sello .icono { width: 18px; height: 18px; stroke-width: 3; }
.mira-esquina { position: absolute; width: 14px; height: 14px; border: 0 solid rgb(188 230 242 / 0.45); }
.e1 { left: 0; top: 0; border-width: 1px 0 0 1px; } .e2 { right: 0; top: 0; border-width: 1px 1px 0 0; } .e3 { left: 0; bottom: 0; border-width: 0 0 1px 1px; } .e4 { right: 0; bottom: 0; border-width: 0 1px 1px 0; }

/* Telemetría: celdas separadas por líneas de 1px (gap sobre fondo de línea), esquinas rectas como un instrumento. */
.telemetria { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 40px; margin-bottom: 0; background: var(--linea); border: 1px solid var(--linea); }
.telemetria > div { padding: 18px 16px 20px; background: var(--fondo); }
.telemetria dt { font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3); }
.telemetria dd { margin: 10px 0 0; color: var(--tinta-2); font-size: 14px; line-height: 1.45; }
.telemetria b { display: block; margin-bottom: 4px; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--tinta); }
.telemetria > div:first-child b { color: var(--accion); }

@media (min-width: 980px) {
  .portada { padding-top: 64px; }
  .portada-rejilla { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 24px; }
  .escena { height: 640px; }
  .plano-vidrio .flota { left: -4%; top: 2%; width: 600px; }
  .tel-frente { width: 220px; border-radius: 40px; padding: 9px; } .tel-frente img, .tel-frente::after { border-radius: 32px; } .tel-frente::after { inset: 9px; }
  .plano-piezas .pieza { width: 70px; height: 70px; border-radius: 20px; } .plano-piezas .pieza .icono { width: 32px; height: 32px; }
  .telemetria { grid-template-columns: repeat(4, 1fr); margin-top: 56px; }
  .telemetria > div { padding: 24px 24px 28px; }
}

/* ---------- El link ---------- */
/* Escena de los eslabones. En escritorio las etiquetas señalan cada eslabón con una mira; en el teléfono van debajo. */
.puente { position: relative; padding: 40px 0 72px; }
.puente-escenario { position: relative; display: grid; gap: 24px; overflow: hidden; }
.puente-cabeza { width: min(1200px, 100% - 40px); margin-inline: auto; position: relative; z-index: 1; }
.puente h2 { font-size: clamp(3rem, 9vw, 8.5rem); letter-spacing: -0.055em; line-height: 0.9; }
.eslabones { position: relative; width: 180%; margin-left: -76%; }
.eslabones-foto { position: relative; isolation: isolate; aspect-ratio: 1672 / 941; overflow: hidden; }
.eslabones-foto img { display: block; width: 100%; height: 100%; }
.eslabones-foto::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--fondo), transparent 14%, transparent 80%, var(--fondo)); }
.lados { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }
.lado .dato { font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accion); }
.lado p { margin-top: 8px; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.45; color: var(--tinta); }
@media (max-width: 899px) {
  .lados { position: relative; width: calc(100% / 1.8 - 40px); margin: 8px 0 0 calc(76% / 1.8 + 20px); display: grid; gap: 22px; }
}
@media (min-width: 900px) {
  .puente-escenario { min-height: 640px; align-content: center; }
  .puente-cabeza { position: absolute; left: 0; right: 0; top: 12%; }
  .eslabones { width: min(1400px, 82%); margin: 0 0 0 auto; }
  .eslabones-foto::after { background: linear-gradient(90deg, var(--fondo), transparent 30%), linear-gradient(180deg, var(--fondo), transparent 16%, transparent 76%, var(--fondo)); }
  /* Cada etiqueta vive en el punto del eslabón que señala: mira en el punto, línea y texto a la izquierda. */
  .lados { position: absolute; inset: 0; }
  .lado { position: absolute; width: 0; height: 0; }
  .lado::before { content: ''; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--accion); box-shadow: 0 0 0 6px rgb(188 230 242 / 0.12), 0 0 24px rgb(188 230 242 / 0.5); }
  .lado::after { content: ''; position: absolute; right: 16px; top: 0; width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--accion)); }
  .lado .dato, .lado p { position: absolute; right: 100px; width: 330px; text-align: right; }
  .lado .dato { bottom: 6px; } .lado p { top: 4px; margin: 0; }
  .l-cliente { left: 41%; top: 56%; }
  .l-negocio { left: 79%; top: 9%; }
}

/* ---------- Quiénes somos ---------- */
.quienes-rejilla { display: grid; gap: 48px; align-items: center; }
.firma { margin-top: 30px; font-size: 18px; font-weight: 600; }
.firma small { display: block; margin-top: 4px; font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
/* Ficha de la empresa: tabla de instrumento, líneas de 1px y esquinas rectas. */
.ficha { border: 1px solid var(--linea-fuerte); background: var(--fondo); }
.ficha-cabeza { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--linea-fuerte); font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accion); }
.ficha dl { margin: 0; display: grid; gap: 1px; background: var(--linea); }
.ficha dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 18px; background: var(--fondo); }
.ficha dt { font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3); }
.ficha dd { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-align: right; }
.valores { margin: 64px 0 0; padding: 0; display: grid; gap: 28px; }
.nunca { margin-top: 56px; padding: 28px; border-radius: 24px; border: 1px dashed var(--linea-fuerte); }
.chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 9px 16px; border-radius: 999px; background: rgb(188 230 242 / 0.08); border: 1px solid rgb(188 230 242 / 0.3); color: var(--tinta); font-size: 15px; }
@media (min-width: 900px) {
  .quienes-rejilla { grid-template-columns: 1.3fr 1fr; }
  .valores { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .valores .losa:nth-child(2) { margin-top: 28px; }
  .valores .losa:nth-child(3) { margin-top: 56px; }
}

/* ---------- Cómo funcionamos ---------- */
/* Historia al estilo Apple. Sin JavaScript (o antes de que cargue) es una lista con un teléfono quieto.
   Con JavaScript (html.historia-viva) el escenario queda fijo mientras la sección recorre 5 pantallas de alto:
   --p (0 a 1) mueve el teléfono de forma continua y data-paso elige la pantalla y el texto. */
.historia { position: relative; margin-top: 44px; }
.escenario { display: grid; gap: 40px; align-items: center; }
.capitulos { margin: 0; padding: 0; list-style: none; display: grid; gap: 28px; }
.cap .num { display: block; font: 500 15px var(--mono); letter-spacing: 0.1em; color: var(--accion); }
.cap h3 { margin-top: 10px; font-size: clamp(1.8rem, 4.2vw, 3.2rem); letter-spacing: -0.04em; line-height: 1.05; }
.cap p { margin-top: 14px; max-width: 30em; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.55; color: var(--tinta-2); }
.dispositivo { position: relative; justify-self: center; perspective: 1600px; }
.brillo { position: absolute; inset: -12% -30%; background: radial-gradient(closest-side, rgb(48 92 114 / 0.75), transparent); pointer-events: none; }
.tel-grande { position: relative; width: min(300px, 70vw); aspect-ratio: 760 / 1535; padding: 11px; border-radius: 50px; background: linear-gradient(145deg, #3a5a69, #0a1218 42%, #02060a);
  box-shadow: 0 0 0 1.5px rgb(188 230 242 / 0.45), 3px 3px 0 #0e2a35, 6px 6px 0 #0c242e, 9px 9px 0 #0a1f28, 12px 12px 0 #081a22, 50px 80px 100px rgb(0 0 0 / 0.75), 0 0 140px rgb(188 230 242 / 0.14); }
.pantallas { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: var(--fondo); }
.pantallas::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgb(255 255 255 / 0.14), transparent 30%); pointer-events: none; }
.pantallas > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; }
.pantallas > .s2 { opacity: 1; }
/* Pantalla 2: el mensaje de WhatsApp, en colores de la marca */
.chat { display: grid; align-content: start; gap: 12px; padding: 18px 14px; background: linear-gradient(#0f1a21, #0a1218); font-size: 13px; }
.chat-cabeza { display: flex; align-items: center; gap: 10px; padding: 6px 4px 14px; border-bottom: 1px solid var(--linea); font-weight: 600; }
.chat-cabeza i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--elevado); font-style: normal; font-size: 12px; }
.chat-cabeza small { display: block; font-weight: 400; color: var(--tinta-3); font-size: 11px; }
.burbuja-chat { max-width: 86%; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: var(--elevado); line-height: 1.4; }
.burbuja-chat.mia { justify-self: end; border-radius: 16px 16px 4px 16px; background: #174958; }
.tarjeta-link { display: grid; gap: 3px; background: var(--superficie); border: 1px solid rgb(188 230 242 / 0.3); }
.tl-marca { display: flex; align-items: center; gap: 6px; font: 500 10px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accion); margin-bottom: 4px; }
.tl-marca img { width: 18px; height: 18px; }
.tarjeta-link span:not(.tl-marca) { color: var(--tinta-2); }
.tarjeta-link u { color: var(--accion); text-underline-offset: 3px; font-size: 12px; }
/* Pantalla 4: pago confirmado a pantalla completa, como el cierre de una app */
.exito { display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; background: var(--accion); color: var(--sobre); }
.exito .icono { width: 72px; height: 72px; stroke-width: 2.4; margin-bottom: 8px; }
.exito strong { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; }
.exito span { font: 500 13px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.exito small { margin-top: 10px; font: 500 12px var(--mono); opacity: 0.75; }
/* En el teléfono las fichas son más chicas y quedan en el borde para no tapar la pantalla. */
.dispositivo .pieza { width: 50px; height: 50px; border-radius: 15px; } .dispositivo .pieza .icono { width: 24px; height: 24px; }
.h-link { left: -30px; top: 8%; transform: rotate(-12deg); }
.h-whatsapp { right: -34px; top: 30%; transform: rotate(10deg); }
.h-escudo { left: -30px; bottom: 6%; transform: rotate(8deg); }
@media (min-width: 900px) { .dispositivo .pieza { width: 70px; height: 70px; border-radius: 20px; } .dispositivo .pieza .icono { width: 32px; height: 32px; } .h-link { left: -60px; } .h-whatsapp { right: -70px; } .h-escudo { left: -50px; } }
.progreso { display: none; }

html.historia-viva .historia { height: 520vh; }
html.historia-viva .escenario { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 84px 0 24px; grid-template-rows: auto 1fr auto; gap: 12px; }
html.historia-viva .capitulos { position: relative; min-height: 190px; }
html.historia-viva .cap { position: absolute; inset: 0 0 auto; opacity: 0; transition: opacity 220ms ease-out, translate 220ms ease-out; }
html.historia-viva .tel-grande { width: min(300px, 25svh, 70vw); }
html.historia-viva .pantallas > * { transition: opacity 260ms ease-out, scale 260ms ease-out; }
html.historia-viva .pantallas > .s2 { opacity: 0; }
.historia[data-paso="0"] .cap:nth-child(1), .historia[data-paso="1"] .cap:nth-child(2), .historia[data-paso="2"] .cap:nth-child(3), .historia[data-paso="3"] .cap:nth-child(4), .historia[data-paso="4"] .cap:nth-child(5) { opacity: 1; transition-duration: 520ms; }
html.historia-viva .historia[data-paso="0"] .s0, html.historia-viva .historia[data-paso="1"] .s1, html.historia-viva .historia[data-paso="2"] .s2, html.historia-viva .historia[data-paso="3"] .s3, html.historia-viva .historia[data-paso="4"] .s4 { opacity: 1; transition-duration: 480ms; }
html.historia-viva .progreso { display: flex; gap: 8px; justify-content: center; margin: 0; padding: 0; list-style: none; }
html.historia-viva .progreso li { width: 8px; height: 8px; border-radius: 50%; background: rgb(188 230 242 / 0.25); transition: background-color 300ms, scale 300ms; }
.historia[data-paso="0"] .progreso li:nth-child(1), .historia[data-paso="1"] .progreso li:nth-child(2), .historia[data-paso="2"] .progreso li:nth-child(3), .historia[data-paso="3"] .progreso li:nth-child(4), .historia[data-paso="4"] .progreso li:nth-child(5) { background: var(--accion); scale: 1.4; }
@media (min-width: 900px) {
  .escenario { grid-template-columns: 1fr 1fr; }
  html.historia-viva .escenario { grid-template-rows: 1fr auto; padding-top: 68px; }
  html.historia-viva .capitulos { min-height: 260px; }
  html.historia-viva .cap { inset: 50% 0 auto; translate: 0 -50%; }
  html.historia-viva .tel-grande { width: min(330px, 34svh); }
  html.historia-viva .progreso { grid-column: 1 / -1; }
}

/* Movimiento: solo si nadie pidió reducirlo. Con movimiento reducido la historia cambia con fundidos, sin girar. */
@media (prefers-reduced-motion: no-preference) {
  html.historia-viva .cap { translate: 0 28px; }
  .historia[data-paso="0"] .cap:nth-child(1), .historia[data-paso="1"] .cap:nth-child(2), .historia[data-paso="2"] .cap:nth-child(3), .historia[data-paso="3"] .cap:nth-child(4), .historia[data-paso="4"] .cap:nth-child(5) { translate: 0 0; }
  html.historia-viva .pantallas > * { scale: 1.04; }
  html.historia-viva .historia[data-paso="0"] .s0, html.historia-viva .historia[data-paso="1"] .s1, html.historia-viva .historia[data-paso="2"] .s2, html.historia-viva .historia[data-paso="3"] .s3, html.historia-viva .historia[data-paso="4"] .s4 { scale: 1; }
  /* El teléfono entra de lado, se endereza a mitad de la historia y termina girando hacia el otro lado. */
  html.historia-viva .tel-grande { transform: rotateY(calc(26deg - var(--p, 0) * 52deg)) rotateX(calc(10deg - var(--p, 0) * 8deg)) rotateZ(calc(-5deg + var(--p, 0) * 9deg)) scale(calc(0.9 + var(--p, 0) * 0.1)); will-change: transform; }
  html.historia-viva .h-link { translate: 0 calc(var(--p, 0) * -140px); }
  html.historia-viva .h-whatsapp { translate: 0 calc(var(--p, 0) * 110px); }
  html.historia-viva .h-escudo { translate: 0 calc(var(--p, 0) * -80px); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  html.historia-viva .cap { translate: 0 calc(-50% + 28px); }
  .historia[data-paso="0"] .cap:nth-child(1), .historia[data-paso="1"] .cap:nth-child(2), .historia[data-paso="2"] .cap:nth-child(3), .historia[data-paso="3"] .cap:nth-child(4), .historia[data-paso="4"] .cap:nth-child(5) { translate: 0 -50%; }
}

.metodos { margin-top: 64px; }
.metodos-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.metodos-lista li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--linea); }
.metodos-lista .icono { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--accion-suave); color: var(--accion); }
.metodos-lista b { display: block; font-weight: 600; } .metodos-lista small { color: var(--tinta-2); font-size: 14px; }
.insignia { padding: 4px 12px; border-radius: 999px; background: var(--aviso); color: var(--aviso-tinta); font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.modelo { margin-top: 56px; display: grid; gap: 12px; align-items: center; }
.cero { margin: 0 !important; font-size: clamp(4.5rem, 12vw, 8rem); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--accion) !important;
  text-shadow: 1px 2px 0 #7fb6c9, 2px 4px 0 #5d97ab, 3px 6px 0 #3b798d, 4px 8px 0 #215b6d, 5px 10px 0 #174958, 18px 30px 30px rgb(0 0 0 / 0.6); }
@media (min-width: 900px) {
  .metodos-lista { grid-template-columns: repeat(3, 1fr); }
  .modelo { grid-template-columns: auto 1fr; gap: 40px; padding: 36px 44px; }
}

/* ---------- Dónde operamos ---------- */
.donde::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 30%, rgb(23 73 88 / 0.5), transparent 70%); pointer-events: none; }
.donde-rejilla { position: relative; display: grid; gap: 40px; align-items: center; }
.pin-escena { position: relative; justify-self: center; width: 280px; height: 260px; perspective: 1200px; }
.base-ve { position: absolute; left: 20px; right: 20px; bottom: 10px; height: 150px; display: grid; place-items: end center; padding-bottom: 22px; border-radius: 34px; font: 600 64px var(--sans); letter-spacing: -0.04em; color: var(--tinta);
  background: linear-gradient(135deg, #2a7f98, #174958 70%); --c: #0c2f3a; transform: rotateX(58deg) rotateZ(-8deg);
  box-shadow: 2px 3px 0 var(--c), 4px 6px 0 var(--c), 6px 9px 0 var(--c), 8px 12px 0 var(--c), 10px 15px 0 var(--c), 12px 18px 0 var(--c), 0 60px 60px rgb(0 0 0 / 0.6); }
.pin { position: absolute; left: 50%; top: 0; z-index: 1; width: 120px; height: 120px; margin-left: -60px; display: grid; place-items: center; border-radius: 34px; color: var(--fondo); --c: #6ea6ba;
  background: linear-gradient(140deg, #f2f5fc, #bce6f2); box-shadow: inset 0 2px 0 #fff, 2px 3px 0 var(--c), 4px 6px 0 var(--c), 6px 9px 0 var(--c), 8px 12px 0 var(--c), 24px 40px 40px rgb(0 0 0 / 0.55); transform: rotate(-6deg); }
.pin .icono { width: 58px; height: 58px; stroke-width: 2; }
.lugares { position: relative; margin: 52px 0 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 900px) {
  .donde-rejilla { grid-template-columns: 1.4fr 1fr; }
  .lugares { grid-template-columns: repeat(4, 1fr); align-items: start; }
  .lugares .losa:nth-child(even) { margin-top: 32px; }
}

/* ---------- Preguntas ---------- */
.preguntas-rejilla { display: grid; gap: 36px; }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; font-size: 18px; font-weight: 600; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linea-fuerte); color: var(--accion); font-weight: 400; }
.preguntas details[open] summary::after { content: '−'; }
.preguntas details p { padding: 0 0 20px; color: var(--tinta-2); line-height: 1.6; max-width: 60ch; }
.preguntas details b { color: var(--tinta); font-family: var(--mono); font-weight: 500; }
@media (min-width: 900px) { .preguntas-rejilla { grid-template-columns: 0.8fr 1.2fr; } }

/* ---------- Cierre ---------- */
/* El vidrio vuelve al final, centrado, como la última foto de producto; el texto va debajo sobre fondo liso. */
.cierre { padding: 24px 0 96px; overflow: hidden; text-align: center; }
.cierre-foto { width: min(460px, 86%); margin: 0 auto -40px; perspective: 1200px; }
.cierre-texto .bajada { margin-inline: auto; }
.cierre-texto .acciones { justify-content: center; }

/* ---------- Pie ---------- */
.pie { padding: 56px 0 max(40px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
.pie-rejilla { display: grid; gap: 28px; }
.pie .lema { margin-top: 8px; color: var(--tinta-2); }
.pie nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pie nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta-2); text-decoration: none; }
.aviso { font-size: 13px; line-height: 1.6; color: var(--tinta-3); max-width: 70ch; }
@media (min-width: 900px) { .pie-rejilla { grid-template-columns: 1fr 2fr; } .aviso { grid-column: 1 / -1; } }

/* Hover solo con puntero fino */
@media (hover: hover) and (pointer: fine) {
  .menu a:hover, .menu-movil nav a:hover { color: var(--tinta); background: var(--hover); }
  .pie nav a:hover { color: var(--tinta); }
  .preguntas summary:hover::after { background: var(--hover); }
}

/* El link con JavaScript: escenario fijo; paso 0 solo la foto, paso 1 el cliente, paso 2 el negocio. */
html.historia-viva .puente-pista { height: 300vh; }
html.historia-viva .puente-escenario { position: sticky; top: 0; height: 100vh; height: 100svh; align-content: center; }
html.historia-viva .lado { opacity: 0; transition: opacity 260ms ease-out; }
html.historia-viva .puente-pista[data-paso="1"] .l-cliente, html.historia-viva .puente-pista[data-paso="2"] .l-negocio { opacity: 1; transition-duration: 520ms; }
@media (max-width: 899px) {
  html.historia-viva .lados { min-height: 110px; }
  html.historia-viva .lado { position: absolute; inset: 0 0 auto; }
}
@media (min-width: 900px) { html.historia-viva .puente-pista[data-paso="2"] .l-cliente { opacity: 0.6; } }

/* «Lo que viene»: dos teléfonos que se abren como un libro al pasar (--p lo pone landing.js). */
.viene { position: relative; display: grid; gap: 36px; align-items: center; margin-top: 72px; padding: 36px 24px; border-radius: 32px; border: 1px dashed var(--linea-fuerte); overflow: hidden; }
.viene-texto h3 { margin-top: 14px; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; }
.viene-texto p { margin-top: 14px; color: var(--tinta-2); line-height: 1.6; max-width: 34em; }
.viene-tels { position: relative; height: 440px; perspective: 1500px; }
.viene-tels .tel { width: 190px; }
.viene-tels .v1 { left: 6%; top: 20px; transform: rotateY(24deg) rotateZ(-6deg); }
.viene-tels .v2 { right: 6%; top: 40px; transform: rotateY(-24deg) rotateZ(6deg); }
@media (min-width: 900px) { .viene { grid-template-columns: 1fr 1fr; padding: 48px 56px; } .viene-tels { height: 500px; } .viene-tels .tel { width: 220px; } }

/* Movimiento al recorrer: aparece al entrar en pantalla y el 3D de la portada acompaña el scroll. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .revela { animation: revela linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes revela { from { opacity: 0; translate: 0 36px; } }
    /* Al bajar, el vidrio se aleja y se recuesta; el teléfono sube por delante. */
    .plano-vidrio .vidrio { animation: aleja linear both; animation-timeline: scroll(root); animation-range: 0 800px; }
    @keyframes aleja { to { scale: 0.82; rotate: x 18deg; translate: 0 60px; opacity: 0.5; } }
    .tel-frente { animation: alza linear both; animation-timeline: scroll(root); animation-range: 0 800px; }
    @keyframes alza { to { translate: 0 -90px; } }
  }
  .boton:active { transform: scale(0.97); }
  .viene-tels .v1 { transform: translateY(calc(50px - var(--p, 0.5) * 100px)) rotateY(calc(34deg - var(--p, 0.5) * 24deg)) rotateZ(-6deg); }
  .viene-tels .v2 { transform: translateY(calc(-30px + var(--p, 0.5) * 80px)) rotateY(calc(-34deg + var(--p, 0.5) * 24deg)) rotateZ(6deg); }
  /* El vidrio del cierre sube y se endereza mientras aparece. */
  /* El cierre está al final de la página y --p no pasa de ~0,5: se acelera para que el giro termine a tiempo. */
  .cierre-foto { --q: min(1, calc(var(--p, 1) * 2.4)); }
  .cierre-foto .vidrio { transform: translateY(calc((1 - var(--q)) * 120px)) rotateX(calc((1 - var(--q)) * 50deg)) scale(calc(0.8 + var(--q) * 0.2)); }

  /* Entrada del inicio: el vidrio aparece desde el desenfoque y luego flota; el titular sube línea por línea. */
  .flota { animation: entra 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) both, flotar 7s ease-in-out 1100ms infinite; }
  @keyframes entra { from { opacity: 0; translate: 0 40px; filter: blur(14px); scale: 0.94; } }
  @keyframes flotar { 50% { translate: 0 -12px; } }
  .plano-tel { animation: sube 900ms 250ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .plano-piezas { animation: sube 900ms 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes sube { from { opacity: 0; translate: 0 60px; } }
  .portada h1 > span, .portada h1 > em { display: inline-block; animation: sube 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .portada h1 > em { animation-delay: 90ms; }
  /* Puntero (landing.js escribe --mx y --my de -1 a 1): cada plano gira y se desplaza según su profundidad --d. */
  .plano { transform: rotateY(calc(var(--mx, 0) * 7deg)) rotateX(calc(var(--my, 0) * -7deg)) translate(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px)); }

  /* El link: los eslabones empiezan cerca y de lado y se asientan; un destello de luz los recorre. */
  html.historia-viva .eslabones-foto img { transform: scale(calc(1.35 - var(--p, 0) * 0.35)) rotate(calc(4deg - var(--p, 0) * 4deg)); transform-origin: 72% 45%; }
  html.historia-viva .eslabones-foto::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(105deg, transparent 42%, rgb(188 230 242 / 0.22) 50%, transparent 58%); transform: translateX(calc(-60% + var(--p, 0) * 120%)); }
  html.historia-viva .puente-cabeza { translate: 0 calc(var(--p, 0) * -40px); }
}

/* Cuentas personales (en desarrollo): aviso breve entre «Lo que viene» y el modelo de precio. */
.personas-viene { margin-top: 56px; display: grid; justify-items: start; gap: 4px; }
.personas-viene h3 { margin-top: 14px; }
.personas-viene p { max-width: 46em; }

/* En el teléfono la historia pedía unas 8 pantallas de scroll: con menos recorrido se lee igual y no cansa. */
@media (max-width: 899px) {
  html.historia-viva .historia { height: 340vh; }
}