/* ============================================================
   "De la caja al mapa en 4 pasos" — compra y activación
   Scroll narrativo (patrón aprobado, skill §5): el celular queda fijo y
   su pantalla cambia según el paso que cruza la línea de lectura. Cada
   pantalla "se usa sola" (toca botones, escribe, carga) cuando se activa.
   El celular se dibuja a 300 × 620 y se escala con --escala (pasos.js).
   ============================================================ */

.pasos-seccion { background: #fff; }
.pasos-seccion .section-head { margin-bottom: 8px; }
@media (min-width: 900px) {                          /* titular más grande en escritorio */
  .pasos-seccion .section-h2 { font-size: clamp(44px, 4.6vw, 58px); letter-spacing: -1.6px; line-height: 1.06; }
  .pasos-seccion .section-sub { font-size: 16.5px; max-width: 600px; }
}

.pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  max-width: 980px;
  margin: 0 auto;
}

/* ─── Celular fijo ──────────────────────────────────────────── */
.pasos-tel {
  grid-column: 2; grid-row: 1;
  position: sticky;
  top: max(calc(var(--nav) + 12px), calc(50vh - 320px));   /* debajo del encabezado fijo del sitio */
  align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-top: 24px;
}
.tel-marco {
  --alto: min(640px, calc(100vh - var(--nav) - 120px));
  position: relative;
  height: var(--alto);
  width: calc(var(--alto) / 2);
}
.tel {
  position: absolute; left: 10px; top: 10px;
  width: 300px; height: 620px;
  border-radius: 44px;
  background: #fff;
  box-shadow: 0 0 0 10px #0b1520, 0 0 0 11px #2a3442, 0 34px 70px #0a223b30;
  overflow: hidden;
  transform: scale(var(--escala, 1));
  transform-origin: -10px -10px;
  font-family: Inter, sans-serif;
  color: var(--ink);
}
.tel-isla { position: absolute; top: 11px; left: 50%; width: 92px; height: 27px; margin-left: -46px; border-radius: 20px; background: #0b1520; z-index: 5; }
.tel-barra {
  position: absolute; top: 0; left: 0; right: 0; height: 48px; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 28px 0 34px; font-size: 14px; font-weight: 600;
}
.tel-iconos { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.tel-iconos i { width: 3px; background: var(--ink); border-radius: 1px; }
.tel-iconos i:nth-child(1) { height: 5px; } .tel-iconos i:nth-child(2) { height: 8px; } .tel-iconos i:nth-child(3) { height: 11px; }
.tel-iconos b { width: 22px; height: 11px; margin-left: 6px; border: 1.5px solid var(--ink); border-radius: 3px; box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 9px var(--ink); }
.tel-url {
  position: absolute; top: 52px; left: 16px; right: 16px; height: 30px; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 10px; background: #f1f4f7; color: #4b5563; font-size: 12.5px; font-weight: 500;
}
.tel-url svg, .pt-seguro svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Pantallas y vistas (una pantalla por paso; algunas tienen varias vistas) */
.pant {
  position: absolute; top: 92px; left: 0; right: 0; bottom: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility 0s .35s;
}
.pant.is-activo { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out); }
.vista {
  position: absolute; inset: 0; padding: 14px 22px 0;
  opacity: 0; transform: translateX(22px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.vista.on { opacity: 1; transform: none; }
.vista.sale { opacity: 0; transform: translateX(-22px); }

.pt-kick { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.pt-h { margin: 4px 0 16px; font: 800 23px/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: -.4px; color: var(--ink); }
.pt-p { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin: -8px 0 6px; }
.pt-centro { text-align: center; }
.pt-lbl { margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: #374151; }
.pt-campo {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px;
  border: 1.5px solid #dfe5ec; border-radius: 12px;
  font-size: 15px; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.pt-campo.foco { border-color: var(--blue); box-shadow: 0 0 0 4px #006aca1f; }
.escribe.cursor::after { content: ""; display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; vertical-align: -3px; background: var(--blue); }
.pt-tarjeta i { width: 30px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #1a3a8f, #3f6fe0); flex: none; }

.pt-btn {
  position: absolute; left: 22px; right: 22px; bottom: 26px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--blue); color: #fff;
  font-size: 15.5px; font-weight: 700;
  transition: transform .15s var(--ease-out), filter .15s;
}
.pt-btn.pres { transform: scale(.96); filter: brightness(.9); }
.pt-giro { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #ffffff59; border-top-color: #fff; animation: pt-giro .7s linear infinite; }
.pt-btn.cargando .pt-btn-t { display: none; }
.pt-btn.cargando .pt-giro { display: block; }
@keyframes pt-giro { to { transform: rotate(360deg); } }

/* Compra */
.pt-seg { display: flex; padding: 4px; border-radius: 12px; background: #eef1f5; }
.pt-seg span { flex: 1; padding: 9px 0; border-radius: 9px; text-align: center; font-size: 13.5px; font-weight: 600; color: #6b7280; }
.pt-seg span.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px #0000001a; }
.pt-seg em { font-style: normal; font-size: 11px; color: #0f9d5b; }
.pt-filas { margin-top: 10px; }
.pt-filas p {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid #eef1f5; font-size: 14px; color: #4b5563;
  opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .4s var(--ease-out);
}
.pt-filas p.on { opacity: 1; transform: none; }
.pt-filas b { color: var(--ink); font-weight: 700; }
.pt-filas .pt-verde b { color: #0f9d5b; }
.pt-filas .pt-total { border-bottom: 0; padding-top: 14px; }
.pt-filas .pt-total span { font-weight: 700; color: var(--ink); }
.pt-filas .pt-total b { font: 800 24px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.5px; }
.pt-seguro { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.pt-ok {
  display: grid; place-items: center; width: 84px; height: 84px; margin: 104px auto 20px;
  border-radius: 50%; background: #18b26b; box-shadow: 0 0 0 10px #18b26b1f;
  transform: scale(.4); opacity: 0; transition: transform .5s var(--ease-pop), opacity .2s;
}
.v-listo.on .pt-ok { transform: none; opacity: 1; }
.pt-ok svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s .2s var(--ease-out); }
.v-listo.on .pt-ok svg { stroke-dashoffset: 0; }

/* Aviso que baja desde arriba (guía de envío, alerta de geocerca) */
.pt-aviso {
  position: absolute; top: 8px; left: 12px; right: 12px; z-index: 3;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: 18px;
  background: #fff; box-shadow: 0 10px 30px #0a223b26, 0 0 0 1px #e8edf2;
  transform: translateY(-140%); opacity: 0;
  transition: transform .55s var(--ease-pop), opacity .25s;
}
.pt-aviso.on { transform: none; opacity: 1; }
.pt-aviso-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--sky); }
.pt-aviso-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pt-aviso b { display: block; font-size: 13.5px; }
.pt-aviso p span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }   /* no al recuadro del ícono */

/* Conecta */
.pt-bat { display: block; width: 100%; margin: 4px 0 6px; }
.b-cuerpo { fill: #222a35; } .b-tapa { fill: #2c3644; } .b-perno { fill: #c7d0da; }
.b-pos { fill: #e5484d; } .b-neg { fill: #3a4554; }
.b-signo { fill: #fff; font: 800 16px 'Plus Jakarta Sans', sans-serif; text-anchor: middle; }
.b-gps { fill: #1d232c; }
.b-logo { fill: #6fcbfb; font: 800 11px 'Plus Jakarta Sans', sans-serif; text-anchor: middle; letter-spacing: -.03em; }
.b-cable { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out); }
.b-rojo { stroke: #e5484d; } .b-negro { stroke: #1f2730; }
.v-conecta.rojo .b-rojo, .v-conecta.negro .b-negro { stroke-dashoffset: 0; }
.pt-cables p {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-top: 8px; border-radius: 12px; background: #f6f8fa;
  font-size: 13.5px; color: #374151;
}
.pt-cables b { color: var(--ink); }
.pt-cables i { flex: none; width: 14px; height: 14px; border-radius: 50%; }
.c-rojo i { background: #e5484d; } .c-negro i { background: #1f2730; }
.pt-cables em {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #18b26b;
  transform: scale(0); transition: transform .4s var(--ease-pop);
  position: relative;
}
.pt-cables em::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.v-conecta.ok-rojo .c-rojo em, .v-conecta.ok-negro .c-negro em { transform: none; }
.pt-chip {
  margin-top: 14px; padding: 9px 12px; border-radius: 999px; text-align: center;
  background: #e9f9f1; color: #0f6b44; font-size: 12.5px; font-weight: 600;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease-out);
}
.v-conecta.listo .pt-chip { opacity: 1; transform: none; }

/* Activa: entra con su correo y el GPS queda en línea */
.pt-logo { margin: 30px 0 4px; text-align: center; font: 800 24px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.6px; color: var(--ink); }
.pt-logo::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--blue); vertical-align: 3px; }
.pt-disp {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 1px solid #e5e9ee; border-radius: 16px;
}
.pt-disp-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--sky); }
.pt-disp-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pt-disp b { display: block; font-size: 16px; }
.pt-disp-est { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; color: var(--muted); }
.pt-disp-est i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #f5a524; }
.pt-disp-est i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: carril-ping 1.6s ease-out infinite; }
.pt-disp-est em { font-style: normal; }
.e-linea { display: none; color: #0f9d5b; font-weight: 600; }
.v-estado.linea .e-busca { display: none; }
.v-estado.linea .e-linea { display: inline; }
.v-estado.linea .pt-disp-est i { background: #18b26b; }
.pt-senal { display: flex; align-items: flex-end; justify-content: center; gap: 7px; height: 64px; margin: 34px 0 18px; }
.pt-senal i { width: 14px; border-radius: 4px; background: #e3eaf1; transition: background .3s; }
.pt-senal i:nth-child(1) { height: 16px; } .pt-senal i:nth-child(2) { height: 30px; }
.pt-senal i:nth-child(3) { height: 46px; } .pt-senal i:nth-child(4) { height: 62px; }
.v-estado.s1 .pt-senal i:nth-child(1), .v-estado.s2 .pt-senal i:nth-child(2),
.v-estado.s3 .pt-senal i:nth-child(3), .v-estado.s4 .pt-senal i:nth-child(4) { background: var(--blue); }
.v-estado.linea .pt-senal i { background: #18b26b; }
.pt-listo-txt { opacity: 0; transition: opacity .4s; margin-top: 0; }
.v-estado.linea .pt-listo-txt { opacity: 1; }

/* Vigila: mapa */
.pt-mapa { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-cuadras rect { fill: #dde9f3; }
.m-cerca { fill: #006aca12; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 4; }
.m-cerca-t { fill: var(--blue); font: 700 11px Inter, sans-serif; text-anchor: middle; }
.m-ruta-base { fill: none; stroke: #fff; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.m-ruta { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; opacity: .55; }
.m-auto-pulso { fill: var(--blue); }
.m-auto-punto { fill: var(--blue); stroke: #fff; stroke-width: 3.5; }
.pt-ficha {
  position: absolute; left: 12px; right: 12px; bottom: 16px;
  padding: 12px 15px; border-radius: 18px; background: #fff;
  box-shadow: 0 10px 30px #0a223b1f, 0 0 0 1px #e8edf2;
}
.pt-ficha p { display: flex; align-items: center; gap: 8px; }
.pt-ficha i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #18b26b; }
.pt-ficha i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: carril-ping 1.6s ease-out infinite; }
.pt-ficha b { font-size: 16px; }
.pt-vel { margin-left: auto; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.pt-ficha > span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
@keyframes carril-ping { to { transform: scale(2.8); opacity: 0; } }

.pasos-puntos { display: flex; gap: 6px; }
.pasos-puntos span { width: 8px; height: 4px; border-radius: 2px; background: #c6d9e8; transition: width .35s var(--ease-out), background-color .35s; }
.pasos-puntos span.is-activo { width: 28px; background: var(--blue); }
.pasos-nota { font-size: 12px; color: #9ca3af; }

/* ─── Pasos (texto) ─────────────────────────────────────────── */
.pasos-lista {
  --avance: 0;
  grid-column: 1; grid-row: 1;
  position: relative; list-style: none;
}
.pasos-lista::before, .pasos-lista::after {          /* riel 01 → 04 que se llena */
  content: ""; position: absolute; left: 21px; width: 3px; border-radius: 3px;
  top: var(--riel-ini, 0px); height: var(--riel-largo, 0px);
}
.pasos-lista::before { background: #e2ebf2; }
.pasos-lista::after { background: var(--blue); transform-origin: top; transform: scaleY(var(--avance)); }
.paso { position: relative; min-height: 68vh; padding: 22vh 0 0 70px; opacity: .3; transition: opacity .45s var(--ease-out); }
.paso:first-child { padding-top: 6vh; min-height: 56vh; }
.paso:last-child { min-height: 80vh; }      /* el celular sigue fijo mientras se ve el mapa */
.paso.is-activo { opacity: 1; }
.paso-num {
  position: absolute; left: 0; top: calc(22vh - 10px); z-index: 1;
  display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%;
  border: 3px solid #d6e8f5; background: #fff; color: #9cb6c7;
  font: 800 16px 'Plus Jakarta Sans', sans-serif;
  transition: background .35s, border-color .35s, color .35s, transform .45s var(--ease-pop);
}
.paso:first-child .paso-num { top: calc(6vh - 10px); }
.paso.is-hecho .paso-num, .paso.is-activo .paso-num { background: var(--blue); border-color: var(--blue); color: #fff; }
.paso.is-activo .paso-num { transform: scale(1.1); }
.paso-cuando { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.paso-titulo { margin: 8px 0 10px; font: 800 27px/1.18 'Plus Jakarta Sans', sans-serif; letter-spacing: -.6px; color: var(--ink); }
.paso-texto { max-width: 420px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.paso-datos { list-style: none; margin-top: 12px; display: grid; gap: 6px; max-width: 420px; }
/* Lista: mismo tamaño, interlineado y color que el párrafo; punto azul en vez de palomita */
.paso-datos li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.paso-datos li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: calc(.8em - 3.5px); border-radius: 50%; background: var(--blue); }

/* ─── Móvil: el celular fijo arriba, los pasos pasan por debajo ─ */
@media (max-width: 720px) {
  .pasos { display: block; }
  .pasos-tel {
    top: var(--nav); z-index: 2; gap: 8px;
    height: 52svh; padding: 10px 0 24px;
    background: linear-gradient(to bottom, #fff 0, #fff calc(100% - 24px), #fff0 100%);
  }
  .tel-marco { --alto: calc(52svh - 62px); }
  .pasos-nota { display: none; }
  .pasos-lista { position: relative; z-index: 1; }
  .pasos-lista::before, .pasos-lista::after { left: 16px; }
  .paso, .paso:first-child, .paso:last-child { min-height: 0; padding: 22px 0 70px 54px; opacity: .25; }
  .paso:last-child { padding-bottom: 28px; }
  .paso.is-activo { opacity: 1; }
  .paso-num, .paso:first-child .paso-num { top: 16px; width: 35px; height: 35px; font-size: 14px; border-width: 2.5px; }
  .paso-titulo { font-size: 22px; margin: 6px 0 8px; }
  .paso-texto, .paso-datos li { font-size: 15px; line-height: 1.55; }
  .paso-datos li::before { margin-top: calc(.775em - 3.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .pasos-seccion *, .pasos-seccion *::before, .pasos-seccion *::after { transition: none !important; animation: none !important; }
}