/* Infraestructura: botones de lugares + mapa general animado (colores del Programa: azul, ocre y crema) */
.im { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1.4rem; align-items: stretch; margin-top: 1.4rem; }
.im-lista { display: flex; flex-direction: column; gap: .7rem; }
.im-btn { display: grid; grid-template-columns: 44px 1fr auto; gap: .9rem; align-items: center; text-align: left; width: 100%; padding: .95rem 1.05rem; border-radius: 16px; border: 1px solid var(--c-linea); background: #fff; color: var(--c-azul); font: inherit; cursor: pointer; position: relative; overflow: hidden; transition: transform .35s var(--salida), box-shadow .35s, border-color .3s, background .35s, color .3s; }
.im-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--c-azul) 0%, var(--c-azul-2) 100%); transform: translateX(-101%); transition: transform .5s var(--salida); z-index: 0; }
.im-btn > * { position: relative; z-index: 1; }
.im-btn:hover { transform: translateX(4px); border-color: var(--c-ocre); box-shadow: 0 14px 30px rgba(15, 42, 92, .14); }
.im-btn.sel { color: #fff; border-color: var(--c-azul); box-shadow: 0 16px 34px rgba(15, 42, 92, .28); }
.im-btn.sel::before { transform: none; }
.im-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-crema); color: var(--c-ocre-osc); font-weight: 700; font-size: 1.05rem; border: 1.5px solid var(--c-ocre); transition: background .3s, color .3s, transform .5s var(--salida); }
.im-btn.sel .im-n { background: var(--c-ocre); color: #fff; border-color: var(--c-ocre-claro); transform: rotate(360deg) scale(1.06); }
.im-btn b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.im-btn small { display: block; margin-top: .2rem; font-size: 12.5px; color: #6a7088; transition: color .3s; }
.im-btn.sel small { color: rgba(255, 255, 255, .78); }
.im-btn > i { font-size: 1.2rem; color: var(--c-ocre); transition: transform .4s var(--salida); }
.im-btn:hover > i, .im-btn.sel > i { transform: translateX(4px); }
.im-btn.sel > i { color: var(--c-ocre-claro); }
.im-extra { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.im-mini { display: inline-flex; align-items: center; gap: .5rem; padding: .62rem 1rem; border-radius: 999px; border: 1px solid var(--c-linea); background: var(--c-crema); color: var(--c-azul); font: 600 12.5px/1.2 var(--f); cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s var(--salida); }
.im-mini:hover { border-color: var(--c-ocre); transform: translateY(-2px); }
.im-mini.sel { background: var(--c-azul); color: #fff; border-color: var(--c-azul); }
.im-mini i { color: var(--c-ocre); }
.im-mini.sel i { color: var(--c-ocre-claro); }
.im-nota { margin: .2rem 0 0; font-size: 12.5px; color: #6a7088; }

/* mapa */
.im-mapa-caja { position: relative; }
.im-mapa { width: 100%; height: clamp(380px, 62vh, 600px); border-radius: 22px; overflow: hidden; background: #0f2a5c; border: 3px solid var(--c-azul); box-shadow: 0 24px 50px rgba(15, 42, 92, .28); font-family: var(--f); z-index: 1; }
.im-mapa::after { content: ""; position: absolute; inset: 0; border-radius: 19px; box-shadow: inset 0 0 70px rgba(10, 19, 48, .45); pointer-events: none; z-index: 500; opacity: 1; transition: opacity 1.2s ease; }
.im-mapa.listo::after { opacity: .55; }
.im-mapa.calles::after { box-shadow: inset 0 0 40px rgba(10, 19, 48, .25); }
/* sin filtros sobre las losetas: repintarlas en cada cuadro del zoom era lo que hacía saltar la cámara */
.im-mapa .leaflet-tile-pane { will-change: transform; }
.im-mapa .leaflet-control-zoom { border: 0; box-shadow: 0 8px 22px rgba(3, 8, 24, .35); border-radius: 14px; overflow: hidden; }
.im-mapa .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; background: rgba(15, 42, 92, .92); color: #fff; border: 0; font-size: 20px; transition: background .25s; }
.im-mapa .leaflet-control-zoom a:hover { background: var(--c-ocre); color: #fff; }
.im-mapa .leaflet-control-attribution { background: rgba(10, 19, 48, .68); color: rgba(255, 255, 255, .78); font-size: 10px; border-radius: 8px 0 0 0; }
.im-mapa .leaflet-control-attribution a { color: var(--c-ocre-claro); }

/* pines */
.im-pin-caja { background: none; border: 0; }
.im-pin { position: relative; display: grid; place-items: center; width: 46px; height: 46px; animation: im-cae .9s var(--salida) both; animation-delay: var(--d, 0s); }
.im-pin i { position: relative; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f1d28f, var(--c-ocre) 60%, #8a6120); color: var(--c-azul); font: 700 15px/1 var(--f); font-style: normal; border: 2.5px solid #fff; box-shadow: 0 6px 16px rgba(3, 8, 24, .55); transition: transform .35s var(--salida); }
.im-pin-caja:hover .im-pin i, .im-pin-caja.leaflet-marker-icon:focus .im-pin i { transform: scale(1.18); }
.im-onda { position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--c-ocre-claro); opacity: 0; animation: im-onda 2.6s ease-out infinite; animation-delay: calc(var(--d, 0s) + .9s); }
.im-onda2 { animation-delay: calc(var(--d, 0s) + 2.2s); }
@keyframes im-onda { 0% { transform: scale(.7); opacity: .85; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes im-cae { 0% { transform: translateY(-46px) scale(.4); opacity: 0; } 60% { transform: translateY(4px) scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ruta y distancias */
.im-ruta { animation: im-fluye 1.4s linear infinite; }
@keyframes im-fluye { to { stroke-dashoffset: -20; } }
.im-ruta-brillo { stroke-linejoin: round; }
.im-viajero { stroke-opacity: .95; }
.im-mapa.viajando .im-ruta, .im-mapa.viajando .im-onda, .im-mapa-caja:has(.viajando)::before { animation-play-state: paused; }
.im-dist-caja { background: none; border: 0; }
.im-dist { display: block; width: 60px; padding: 3px 0; border-radius: 999px; background: rgba(10, 19, 48, .82); color: var(--c-ocre-claro); font: 600 11px/1.2 var(--f); text-align: center; border: 1px solid rgba(226, 183, 101, .55); animation: im-aparece .6s var(--salida) both; }
@keyframes im-aparece { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ventana de cada punto */
.im-popup .leaflet-popup-content-wrapper { background: #fff; border-radius: 16px; padding: 0; box-shadow: 0 18px 40px rgba(3, 8, 24, .45); border-top: 3px solid var(--c-ocre); animation: im-aparece .45s var(--salida) both; transform-origin: 50% 100%; }
.im-popup .leaflet-popup-content { margin: 0; }
.im-popup .leaflet-popup-tip { background: #fff; }
.im-pop { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem .9rem 3.2rem; font-family: var(--f); }
.im-pop-n { position: absolute; left: .85rem; top: .85rem; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-ocre); color: #fff; font-weight: 700; font-size: 13px; }
.im-pop b { color: var(--c-azul); font-size: 14px; font-weight: 600; line-height: 1.3; }
.im-pop small { color: #6a7088; font-size: 12px; }
.im-pop a { margin-top: .45rem; align-self: flex-start; color: var(--c-azul); font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--c-ocre); padding-bottom: 1px; }
.im-pop a:hover { color: var(--c-ocre-osc); }

@media (max-width: 960px) {
  .im { grid-template-columns: 1fr; }
  .im-lista { order: 1; }
  .im-mapa-caja { order: 2; }
  .im-mapa { height: 420px; }
}
@media (prefers-reduced-motion: reduce) { .im-pin, .im-onda, .im-ruta, .im-dist { animation: none; } .im-btn, .im-btn::before { transition: none; } }

/* ===== Rediseño: botones arriba en fila y el mapa completo debajo, con más movimiento ===== */
.im { display: block; margin-top: 1.6rem; }
.im-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; order: 0; }
.im-mapa-caja { order: 0; margin-top: 1.6rem; }
.im-mapa { height: clamp(460px, 72vh, 700px); }
.im-btn { position: relative; overflow: visible; grid-template-columns: 52px 1fr auto; gap: 1rem; padding: 1.15rem 1.2rem; border-radius: 20px; border: 1.5px solid var(--c-linea); background: #fff linear-gradient(100deg, var(--c-azul) 0%, var(--c-azul-2) 100%) no-repeat; background-size: 0% 100%; box-shadow: 0 8px 22px rgba(15, 42, 92, .07); animation: im-sube .7s var(--salida) both; animation-delay: calc(var(--i, 0) * .12s + .15s); transition: transform .4s var(--salida), box-shadow .4s, border-color .3s, color .3s, background-size .6s var(--salida); }
.im-btn::before { display: none; }
.im-btn:nth-of-type(1) { --i: 0; } .im-btn:nth-of-type(2) { --i: 1; } .im-btn:nth-of-type(3) { --i: 2; }
.im-btn:hover { transform: translateY(-6px); box-shadow: 0 20px 38px rgba(15, 42, 92, .18); }
.im-btn.sel { background-size: 100% 100%; transform: translateY(-4px); box-shadow: 0 22px 42px rgba(15, 42, 92, .3); }
.im-btn.sel::before { display: none; }
.im-n { width: 52px; height: 52px; font-size: 1.2rem; animation: im-bota 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
.im-btn.sel .im-n { animation: none; }
.im-btn b { font-size: 16px; }
.im-btn > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c-crema); font-size: 1.1rem; transition: transform .5s var(--salida), background .3s; }
.im-btn:hover > i { transform: rotate(-12deg) scale(1.12); }
.im-btn.sel > i { background: rgba(255, 255, 255, .16); transform: scale(1.1); }
/* camino entre una tarjeta y la siguiente */
.im-btn:not(:last-of-type)::after { content: ""; position: absolute; top: 50%; right: -1.4rem; width: 1.4rem; height: 0; border-top: 3px dotted var(--c-ocre); animation: im-camino 1.1s linear infinite; z-index: 2; }
@keyframes im-camino { from { opacity: .4; } 50% { opacity: 1; } to { opacity: .4; } }
@keyframes im-sube { from { opacity: 0; transform: translateY(34px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes im-bota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.im-btn.sel::after { border-top-color: var(--c-ocre-claro); }
/* aviso amable y botones extra */
.im-guia { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; margin: 0; font-weight: 600; color: var(--c-azul); font-size: 14px; }
.im-guia i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-ocre); color: #fff; animation: im-toca 1.8s ease-in-out infinite; }
@keyframes im-toca { 0%, 100% { transform: scale(1) rotate(0); } 40% { transform: scale(1.18) rotate(-14deg); box-shadow: 0 0 0 10px rgba(179, 129, 47, .18); } }
.im-extra { grid-column: 1 / -1; margin: 0; }
.im-nota { grid-column: 1 / -1; margin: 0; }
.im-mini { animation: im-sube .6s var(--salida) .6s both; }
.im-mini:nth-child(2) { animation-delay: .72s; }
.im-mapa-caja::before { content: ""; position: absolute; inset: -10px; border-radius: 30px; background: linear-gradient(120deg, rgba(179, 129, 47, .35), rgba(15, 42, 92, .25), rgba(179, 129, 47, .35)); background-size: 200% 100%; animation: im-brilla 6s linear infinite; z-index: 0; opacity: .4; }
@keyframes im-brilla { to { background-position: 200% 0; } }
.im-mapa { position: relative; z-index: 1; }
@media (max-width: 960px) {
  .im-lista { grid-template-columns: 1fr; gap: 1rem; }
  .im-btn:not(:last-of-type)::after { display: none; }
  .im-mapa { height: 440px; }
}
@media (prefers-reduced-motion: reduce) { .im-btn, .im-n, .im-guia i, .im-mini, .im-mapa-caja::before, .im-btn::after { animation: none !important; } }