/* La espera, versión clara (revisión de Roberto 14-oct b): tarjeta blanca sobre el hueso de la
   página, textos en azul marino y un solo acento amarillo. Tres variantes para escoger, que se
   ven con ?espera=a|b|c en la portada (la elegida se recuerda en este navegador):
     A «clara»: malla de hexágonos dibujada (líneas marino tenues) que se ilumina desde el pin.
     B «su calle de verdad»: el mapa real y claro de su dirección, que se acerca mientras se palomean los pasos.
     C «mezcla» (la de fábrica): el mapa real con la malla de hexágonos encima iluminándose en amarillo suave.
   B y C muestran la malla de A mientras aún no sabemos el punto (o si el mapa no carga).
   Los pasos son los del proceso real; el último nunca se palomea antes de que llegue la respuesta.
   Sin movimiento si la persona lo pidió (prefers-reduced-motion). */
.espera {
  --e-marino: #0D1537; --e-amarillo: #FFE800; --e-hueso: #F7F4EE; --e-gris: #555B72;
  --e-display: "Teko", "Arial Narrow", sans-serif; --e-texto: "Work Sans", "Segoe UI", system-ui, sans-serif;
  background: #fff; color: var(--e-marino); border-radius: 24px; overflow: hidden; font-family: var(--e-texto);
  box-shadow: 0 18px 44px rgba(13,21,55,.12), 0 0 0 1px rgba(13,21,55,.10);
  display: grid; min-width: 0; animation: e-entra .35s ease-out; scroll-margin: 90px; position: relative;
}
.espera-visual { position: relative; height: 170px; background: #EFEADF; overflow: hidden; border-bottom: 1px solid rgba(13,21,55,.08); }
.espera-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }
.espera .espera-mapa { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .8s ease; }
.espera .espera-mapa.listo { opacity: 1; }
.espera .espera-mapa .maplibregl-ctrl-attrib { font-size: 9px; line-height: 1.3; padding: 1px 5px; background: rgba(255,255,255,.85); border-radius: 6px 0 0 0; }
.espera .espera-mapa .maplibregl-ctrl-attrib a { color: #555B72; }
.espera-cuerpo { padding: 18px 20px 20px; display: grid; gap: 12px; }
.espera-kicker { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: #1C66B3; display: flex; align-items: center; gap: 8px; }
.espera-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--e-amarillo); box-shadow: 0 0 0 1.5px var(--e-marino); animation: e-latido 1.6s ease-out infinite; }
.espera-titulo { margin: 0; font-family: var(--e-display); font-weight: 500; font-size: 2.3rem; line-height: .9; color: var(--e-marino); text-wrap: balance; }
.espera-sub { margin: -4px 0 0; font-size: .9rem; color: var(--e-gris); line-height: 1.4; }

.espera-pasos { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 9px; }
.espera-pasos li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; font-size: .95rem; line-height: 1.3; color: rgba(13,21,55,.38); transition: color .3s; }
.espera-pasos li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; border: 2px solid rgba(13,21,55,.18); justify-self: center; }
.espera-pasos li.activo { color: var(--e-marino); font-weight: 600; }
.espera-pasos li.activo::before { border-color: rgba(13,21,55,.15); border-top-color: var(--e-marino); animation: e-gira .8s linear infinite; }
.espera-pasos li.hecho { color: rgba(13,21,55,.78); }
.espera-pasos li.hecho::before { border: 0; background: var(--e-amarillo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.4l3 3 6-6.4' fill='none' stroke='%230D1537' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: 0 0 0 1.5px var(--e-marino); animation: e-palomea .35s ease-out; }

.espera-barra { height: 6px; border-radius: 99px; background: rgba(13,21,55,.08); overflow: hidden; margin-top: 2px; }
.espera-barra i { display: block; height: 100%; width: 3%; border-radius: 99px; background: var(--e-marino); transition: width .6s ease-out; position: relative; overflow: hidden; }
.espera-barra i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,232,0,.85), transparent); transform: translateX(-100%); animation: e-brillo 1.5s ease-in-out infinite; }
.espera-pie { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: var(--e-gris); }
.espera-pie b { color: var(--e-marino); font-weight: 600; font-variant-numeric: tabular-nums; }
.espera-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Malla, calles, zona y pin (SVG que arma espera.js) */
.espera .hx { fill: var(--e-amarillo); fill-opacity: 0; stroke: rgba(13,21,55,.10); stroke-width: .8; animation: e-hex 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.espera .hx.quieto { animation: none; fill-opacity: calc(var(--o, .03) * 1.4); }
.espera .calle { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: e-dibuja 2.4s ease-out forwards; animation-delay: var(--d, 0s); }
.espera .calle.ancha { stroke-width: 6; }
.espera .zona { fill: rgba(255,232,0,.16); stroke: var(--e-marino); stroke-width: 1.4; stroke-dasharray: 5 6; transform-origin: center; transform-box: fill-box; animation: e-gira 22s linear infinite; }
.espera .onda { fill: none; stroke: var(--e-marino); stroke-width: 1.6; transform-origin: center; transform-box: fill-box; opacity: 0; animation: e-onda 2.4s ease-out infinite; }
.espera .onda.dos { animation-delay: 1.2s; }
.espera .pin-e { animation: e-flota 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }

/* B con mapa: solo el mapa, la zona y el pin (sin malla ni calles dibujadas). */
.espera.v-b.con-mapa .hx, .espera.v-b.con-mapa .calle { opacity: 0; transition: opacity .8s; }
/* C con mapa: la malla sobre el mapa de verdad; las calles dibujadas sobran. */
.espera.v-c.con-mapa .calle { opacity: 0; transition: opacity .8s; }
.espera.v-c.con-mapa .hx { stroke: rgba(13,21,55,.18); }
.espera.v-c.con-mapa .hx.quieto { fill-opacity: 0; }
.espera.con-mapa .zona { fill: rgba(255,232,0,.20); stroke-width: 2; }

@keyframes e-entra { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes e-gira { to { transform: rotate(360deg); } }
@keyframes e-latido { 0% { box-shadow: 0 0 0 1.5px var(--e-marino), 0 0 0 0 rgba(255,232,0,.9); } 100% { box-shadow: 0 0 0 1.5px var(--e-marino), 0 0 0 9px rgba(255,232,0,0); } }
@keyframes e-palomea { from { transform: scale(.4); } 70% { transform: scale(1.15); } to { transform: scale(1); } }
@keyframes e-brillo { to { transform: translateX(100%); } }
@keyframes e-hex { 0%, 100% { fill-opacity: 0; stroke: rgba(13,21,55,.10); } 45% { fill-opacity: .42; stroke: rgba(13,21,55,.35); } 65% { fill-opacity: .14; stroke: rgba(13,21,55,.16); } }
@keyframes e-dibuja { to { stroke-dashoffset: 0; } }
@keyframes e-onda { 0% { transform: scale(.3); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes e-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (min-width: 700px) {
  .espera-cuerpo { padding: 22px 26px 24px; }
  .espera-titulo { font-size: 2.6rem; }
}
/* En computadora la tarjeta va a lo ancho (visual a la izquierda) para que quepa entera en la pantalla. */
@media (min-width: 900px) {
  .espera { grid-template-columns: minmax(200px, 44%) minmax(0, 1fr); }
  .espera-visual { height: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid rgba(13,21,55,.08); }
}
@media (prefers-reduced-motion: reduce) {
  .espera, .espera *, .espera *::before, .espera *::after { animation: none !important; transition: none !important; }
  .espera .calle { stroke-dashoffset: 0; stroke-dasharray: none; }
  .espera .hx { fill-opacity: calc(var(--o, .03) * 1.4); }
  .espera .onda { display: none; }
  .espera-pasos li.activo::before { border-color: var(--e-marino); background: rgba(255,232,0,.5); }
}