/* Ruidario · su andén. El nombre de la app conserva sus letras de arcoíris;
   todo lo demás es la señalética de Laciro con el rosado del andén 1. */

@font-face { font-family: "Fredoka"; src: url("/fuentes/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

/* ---------- Cabeza del andén ---------- */

.salida-app { display: grid; gap: 40px; padding-top: 8px; }
@media (min-width: 960px) { .salida-app { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 56px; } }
.salida-app .cartel { margin-bottom: 26px; }
.ruidario { margin: 0; font: 700 clamp(64px, 12vw, 128px)/1 "Fredoka", var(--senal); letter-spacing: -.02em; }
.ruidario span:nth-child(1) { color: #1ec0cc; }
.ruidario span:nth-child(2) { color: #4fbcfb; }
.ruidario span:nth-child(3) { color: #e1a516; }
.ruidario span:nth-child(4) { color: #fd8a89; }
.ruidario span:nth-child(5) { color: #fc7fc9; }
.ruidario span:nth-child(6) { color: #17c8d2; }
.ruidario span:nth-child(7) { color: #e1a516; }
.ruidario span:nth-child(8) { color: #20cf99; }
.lema { margin: 12px 0 14px; font: 800 clamp(28px, 3.4vw, 40px)/1 var(--senal); }
.salida-app p.bajada { max-width: 32em; color: #c9ccd3; font-size: 19px; }

/* Una fila del tablero solo para Ruidario. */
.tablero-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 26px 0 28px; padding: 14px 16px; border-radius: 10px; background: var(--tablero); box-shadow: inset 0 0 0 1px #262a33; }
.tablero-fila .anden-num { margin-inline: 4px; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.nota-tienda { margin: 14px 0 0; color: var(--suave); font-size: 16px; }

.vista-telefono { justify-self: center; width: min(320px, 78%); padding: 12px; border-radius: 34px; background: #000; box-shadow: 0 0 0 2px var(--borde), 0 40px 80px rgb(0 0 0 / .45); }
.vista-telefono img { border-radius: 24px; }

/* ---------- Capturas ---------- */

.capturas-seccion { padding-top: 100px; }
.capturas {
  list-style: none; margin: 0 -16px; padding: 4px 16px 14px;
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: thin;
}
.capturas li { flex: 0 0 min(62%, 240px); scroll-snap-align: start; }
.capturas img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px var(--borde); }
@media (min-width: 700px) { .capturas { margin-inline: -32px; padding-inline: 32px; scroll-padding-inline: 32px; } }
@media (min-width: 1000px) { .capturas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; } }

/* ---------- Recorrido: lo que haces en la app, parada por parada ---------- */

.recorrido-seccion { padding-top: 110px; }
.recorrido { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.recorrido::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 8px; border-radius: 4px; background: var(--linea-1); }
.parada { position: relative; padding-left: 56px; }
.parada::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--noche); border: 7px solid var(--linea-1); }
.parada h3 { margin-bottom: 8px; font-size: 32px; }
.parada p { max-width: 24em; margin: 0; color: #c9ccd3; }
@media (min-width: 900px) {
  .recorrido { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .recorrido::before { left: 14px; right: 14px; top: 13px; bottom: auto; width: auto; height: 8px; }
  .parada { padding: 60px 0 0; }
}

/* Un tren pasa por las paradas y las va encendiendo (estacion.js agrega .llego). */
@media (prefers-reduced-motion: no-preference) {
  .movimiento-listo .recorrido.llego .parada::before { animation: encender .35s ease forwards; }
  .movimiento-listo .recorrido.llego .parada:nth-child(2)::before { animation-delay: .4s; }
  .movimiento-listo .recorrido.llego .parada:nth-child(3)::before { animation-delay: .8s; }
  .movimiento-listo .recorrido.llego .parada:nth-child(4)::before { animation-delay: 1.2s; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .recorrido::after {
    content: ""; position: absolute; top: 6px; left: -6px; width: 46px; height: 22px; border-radius: 7px 12px 12px 7px; opacity: 0;
    background: linear-gradient(90deg, transparent 0 9px, var(--noche) 9px 16px, transparent 16px 20px, var(--noche) 20px 27px, transparent 27px 31px, var(--noche) 31px 38px, transparent 38px) 0 5px / 100% 7px no-repeat, #fff;
    box-shadow: 0 0 0 3px var(--noche);
  }
  .movimiento-listo .recorrido.llego::after { animation: viaje 4.2s cubic-bezier(.45, 0, .55, 1) forwards; }
  .movimiento-listo .recorrido.llego .parada:nth-child(1)::before { animation-delay: .3s; }
  .movimiento-listo .recorrido.llego .parada:nth-child(2)::before { animation-delay: 1.35s; }
  .movimiento-listo .recorrido.llego .parada:nth-child(3)::before { animation-delay: 2.45s; }
  .movimiento-listo .recorrido.llego .parada:nth-child(4)::before { animation-delay: 3.6s; }
}
@keyframes encender { to { background: var(--linea-1); } }
@keyframes viaje {
  0% { opacity: 0; left: -6px; }
  6%, 14% { opacity: 1; left: -6px; }
  32%, 40% { left: calc(25% + 1px); }
  58%, 66% { left: calc(50% + 8px); }
  86%, 100% { opacity: 1; left: calc(75% + 15px); }
}

.transbordos { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 800px) { .transbordos { grid-template-columns: 1fr 1fr; } }
.transbordo { padding: 24px 26px; border-radius: 10px; background: var(--anden); }
.transbordo h3 { margin-bottom: 8px; font-size: 30px; }
.transbordo p { margin-bottom: 12px; color: #c9ccd3; }
.transbordo p:last-child { margin-bottom: 0; }

/* ---------- Boleto ---------- */

.probar { padding-top: 120px; }
.probar .boleto { margin-top: 40px; }