/* =============================================================================
   RECORRIDO — mapa, cámara, instituciones, moto, keyframes
   -----------------------------------------------------------------------------
   Modelo de escena (ETAPA 6):
     .recorrido  pista de scroll alta (define cuánto se puede scrollear).
     .camara     ventana fija de una pantalla; recorta lo que sobra.
     .mundo      mapa + instituciones; JS lo desplaza en Y según el scroll.
     .moto       vive en la cámara; JS le fija X y rotación desde el camino.
   Las posiciones usan % y variables CSS para no depender de píxeles fijos.
   ========================================================================== */

:root {
  /* Alto total del scroll (coincide con RECORRIDO.alturaScrollVh en config.js).
     Define cuánto scroll hay para recorrer el camino. Más alto = más largo. */
  --altura-scroll-vh: 340;

  /* Zoom del mapa dentro de la cámara. >1 amplía y recorta los laterales;
     cuanto más alto, más "de cerca" y más largo se siente el tramo, pero
     menos ancho del mapa entra en pantalla (las escuelas tienen que estar
     cerca del camino). */
  --mapa-zoom: 1.5;

  /* Desplazamiento vertical del mapa (cámara que sigue a la moto).
     Lo actualiza recorrido.js; se suma al centrado. */
  --mundo-y: 0px;

  /* Estado de la moto (px dentro de la cámara). Lo actualiza recorrido.js. */
  --moto-x: 50vw;
  --moto-y: 42vh;
  --moto-rot: 0deg;

  /* Tamaños de los sprites (viewport units, con tope). Carteles más chicos
     y escuelas/moto un poco más grandes por el zoom. */
  --sprite-escuela: clamp(154px, 42vw, 226px);
  --sprite-cartel:  clamp(64px, 19vw, 104px);
  --sprite-moto:    clamp(122px, 40vw, 205px);
}

/* ---------- Pista de scroll ---------- */
.recorrido {
  position: relative;
  z-index: var(--z-mundo);
  height: calc(var(--altura-scroll-vh) * 1vh);
  background: var(--color-tierra);
}

/* ---------- Cámara: ventana fija de una pantalla ---------- */
.camara {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;            /* evita el salto por la barra del navegador móvil */
  overflow: hidden;
  touch-action: pan-y;       /* solo scroll vertical: no se puede "irse" a los lados */
  /* Ambiente detrás de la franja libre arriba/abajo del mapa.
     Termina en --color-tierra (no verde) para empalmar sin corte con la
     sección Recuerdos, que arranca con ese mismo color. */
  background:
    linear-gradient(180deg,
      var(--color-cielo) 0%,
      var(--color-tierra) 20%,
      var(--color-tierra) 100%);
}

/* Franja de desvanecido al pie de la cámara: refuerza el empalme con
   Recuerdos aunque el celular tenga otra proporción de pantalla. Queda por
   debajo de la moto (z 5), que nunca baja tanto. */
.camara::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  background: linear-gradient(to bottom, transparent, var(--color-tierra));
  pointer-events: none;
  z-index: 2;
}

/* ---------- Mundo: mapa + instituciones ----------
   El mapa se centra en la cámara y queda fijo; el viaje lo hace la moto.
   --mundo-y permite un paneo sutil opcional (ETAPA 6). */
.mundo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(min(100vw, var(--ancho-maximo)) * var(--mapa-zoom));
  aspect-ratio: 941 / 1672;
  transform: translate(-50%, calc(-50% + var(--mundo-y)));
  will-change: transform;
}

.mundo__mapa {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  /* Bordes del mapa desvanecidos: nunca se ve un corte duro contra el fondo,
     ni al principio (arriba) ni al final del viaje (abajo). Se disuelve en el
     color de ambiente y de ahí empalma con Recuerdos. */
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, #000 4%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom,
      transparent 0, #000 4%, #000 82%, transparent 100%);
}

/* Trayectoria de la moto: oculta salvo en modo depuración */
.mundo__camino {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.mundo__camino path {
  fill: none;
  stroke: #ff2d55;
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---------- Instituciones (checkpoints) ----------
   .punto se ancla a un punto del mapa con --x / --y (% del mapa).
   El cartel se ubica respecto de la escuela con --cartel-x / --cartel-y
   (% de la caja de la escuela; >100% lo saca hacia el costado) y
   --cartel-escala. Todos esos valores se fijan por checkpoint en el HTML. */
.punto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--sprite-escuela);
  transform: translate(-50%, -50%);
}

.punto__escuela {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform var(--dur-corta) ease, filter var(--dur-corta) ease;
}
.punto__escuela img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3));
  -webkit-user-drag: none;
}
.punto__escuela:hover { transform: scale(1.03); }

.punto__cartel {
  position: absolute;
  left: var(--cartel-x, 96%);
  top: var(--cartel-y, 34%);
  width: var(--sprite-cartel);
  transform: translate(-50%, -50%) scale(var(--cartel-escala, 1));
  transform-origin: bottom center;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35));
  -webkit-user-drag: none;
}

/* Estado "la moto está pasando por este punto" (lo activa interacciones.js) */
.punto.esta-activo .punto__escuela { animation: pulso 1.6s ease-in-out infinite; }
.punto.esta-activo .punto__escuela img {
  filter: drop-shadow(0 0 14px #ffd76a) drop-shadow(0 6px 10px rgba(0, 0, 0, .3));
}

/* Estado persistente "ya visitada": glow tenue para ubicar dónde estuviste */
.punto.visitado .punto__escuela img {
  filter: drop-shadow(0 0 7px rgba(255, 215, 106, .7)) drop-shadow(0 6px 10px rgba(0, 0, 0, .3));
}

/* ---------- Moto ----------
   Se posiciona solo con transform (sin tocar left/top) para que el
   movimiento sea fluido (solo trabajo de composición). */
.moto {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sprite-moto);
  transform:
    translate(var(--moto-x), var(--moto-y))
    translate(-50%, -50%)
    rotate(var(--moto-rot));
  z-index: var(--z-moto);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35));
  will-change: transform;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---------- Al llegar: pastilla "tocá acá" (temporal) ----------
   Mismo estilo que la pista de scroll. Es hija de .punto, así que se
   mueve con la escuela cuando la cámara desplaza el mapa. */
.punto__tap {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: var(--z-mano);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(58, 47, 34, .74);
  color: #fff;
  font: 700 .76rem var(--tipo-texto);
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity .3s ease, transform .3s ease;
}
.punto__tap.esta-visible { opacity: 1; transform: translate(-50%, 0); }
.punto__tap-mano { font-size: 1rem; animation: tap-mano 1s ease-in-out infinite; }

@keyframes tap-mano {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ---------- Al llegar: bandera de logro (se queda) ---------- */
.punto__logro {
  position: absolute;
  top: -6%;
  right: -6%;
  z-index: var(--z-mano);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-content: center;
  font-size: 1.05rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  pointer-events: none;
  transform: scale(0);
}
.punto__logro.aparece {
  animation: logro-pop .45s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

@keyframes logro-pop {
  0%   { transform: scale(0) rotate(-25deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- Pista "deslizá para viajar" ---------- */
.pista-scroll {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: var(--z-ui);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 14px;
  border-radius: 999px;
  background: rgba(58, 47, 34, .82);
  color: #fff;
  font: 600 .82rem var(--tipo-texto);
  letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease, transform .4s ease;
}
.pista-scroll.esta-visible { opacity: 1; }

.pista-scroll__flecha {
  width: 11px;
  height: 11px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  animation: pista-rebote 1.4s ease-in-out infinite;
}

@keyframes pista-rebote {
  0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: .5; }
  50%      { transform: rotate(45deg) translate(2px, 2px);  opacity: 1; }
}

/* ---------- Barra de progreso del viaje ---------- */
.progreso-viaje {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: rgba(58, 47, 34, .2);
  z-index: var(--z-progreso);
}
.progreso-viaje__relleno {
  height: 100%;
  width: 0%;
  background: var(--color-acento);
  transition: width .1s linear;
}

/* =============================================================================
   MODO DEPURACIÓN
   Para calibrar posiciones: agregar la clase "depurar" al <body>.
   Despliega el mapa completo (sin recortar), con una grilla cada 10 %,
   la trayectoria de la moto y una etiqueta por checkpoint.
   ========================================================================== */
.depurar .intro { display: none; }
.depurar .camara {
  position: static;
  height: auto;
  overflow: visible;
}
.depurar .mundo {
  position: relative;
  left: 0;
  transform: none;
  margin-inline: auto;
  /* Sin zoom: el mapa entero entra en pantalla para leer los % reales */
  width: min(100vw, var(--ancho-maximo));
}
.depurar .moto { display: none; }

.depurar .mundo__camino { opacity: .9; }

/* Grilla de porcentajes sobre el mapa */
.depurar .mundo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  rgba(0,80,255,.35) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(to bottom, rgba(0,80,255,.35) 0 1px, transparent 1px 10%);
}

.depurar .punto { outline: 2px dashed #ff2d55; }
.depurar .punto::after {
  content: attr(data-id) " · " attr(style);
  position: absolute;
  left: 50%; top: -1.4em;
  transform: translateX(-50%);
  font: 700 .6rem var(--tipo-texto);
  color: #fff;
  background: #ff2d55;
  padding: .1em .4em;
  border-radius: 4px;
  white-space: nowrap;
}
.depurar .punto__escuela img { filter: none; opacity: .78; }

/* =============================================================================
   KEYFRAMES  (todas se neutralizan con prefers-reduced-motion desde estilos.css)
   ========================================================================== */
@keyframes pulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}