/* Laciro Estudios · portada: tablero de próximas salidas y los tres andenes. */

/* ---------- Portada ---------- */

.portada { padding-block: 32px 28px; }
.portada h1 { max-width: 9em; font-size: clamp(64px, 12vw, 172px); font-weight: 900; }
.portada__bajada { max-width: 36em; margin-top: 22px; color: var(--suave); font-size: clamp(18px, 1.8vw, 21px); }

/* ---------- Tablero de salidas ---------- */

.tablero { margin-top: 44px; padding: 22px 22px 18px; border-radius: 10px; background: var(--tablero); box-shadow: inset 0 0 0 1px #262a33, 0 30px 60px rgb(0 0 0 / .35); }
.tablero__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tablero__cabeza h2 { color: var(--ambar); font-size: 30px; letter-spacing: .04em; }
.tablero__hora { color: var(--suave); font: 700 22px/1 var(--senal); letter-spacing: .06em; }
.fila-titulos, .salida { display: grid; grid-template-columns: calc(12 * 25px) calc(14 * 25px) 40px 1fr; gap: 12px; align-items: center; }
.fila-titulos { padding: 0 6px 8px; color: var(--suave); font: 600 14px/1 var(--letra); }
.salida { padding: 10px 6px; border-top: 1px solid #22262e; border-radius: 6px; text-decoration: none; }
.salida:hover, .salida:focus-visible { background: #1d2129; }
.tablero__nota { margin: 12px 6px 0; color: var(--suave); font-size: 15px; }

/* Hasta que caben las cuatro columnas, cada salida ocupa tres filas. */
@media (max-width: 1179px) {
  .fila-titulos { display: none; }
  .salida { grid-template-columns: 1fr auto; grid-template-areas: "proyecto anden" "destino destino" "estado estado"; gap: 6px 10px; padding: 14px 4px; }
  .salida > :nth-child(1) { grid-area: proyecto; }
  .salida > :nth-child(2) { grid-area: destino; }
  .salida > :nth-child(3) { grid-area: anden; }
  .salida > :nth-child(4) { grid-area: estado; }
  .tablero { padding: 16px 12px 12px; }
}

/* ---------- Andenes ---------- */

.andenes { padding-top: 110px; }
.anden {
  position: relative; display: grid; gap: 28px; margin-top: 28px; padding: 28px 24px; border-radius: 10px; background: var(--anden); scroll-margin-top: 16px;
  /* Inclinación hacia el puntero (estacion.js pone --rx, --ry y la posición del brillo --bx, --by). */
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.anden.inclinado { transition: transform .12s linear; }
/* Al inclinarse, el texto y la captura se separan del fondo. */
.anden > div:first-child { transform: translateZ(18px); }
.anden > .vista { transform: translateZ(44px); }
.anden::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(560px circle at var(--bx, 50%) var(--by, 50%), rgb(255 255 255 / .08), transparent 45%);
}
.anden.inclinado::after { opacity: 1; }
@media (min-width: 900px) { .anden { grid-template-columns: 1fr 1.1fr; align-items: center; padding: 40px; } }
.anden .cartel { margin-bottom: 22px; }
.proyecto { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; }
.proyecto img { grid-row: span 2; width: 64px; height: 64px; border-radius: 16px; }
.proyecto h3, .anden__titulo { font-size: 34px; }
.anden p { max-width: 32em; margin-top: 16px; color: #c9ccd3; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.vista { overflow: hidden; border-radius: 12px; background: #0b0d11; }
.vista--telefono { justify-self: center; width: min(260px, 70%); padding: 10px; border-radius: 28px; background: #000; box-shadow: 0 0 0 2px var(--borde); }
.vista--telefono img { border-radius: 20px; }
.vista--auto { padding: 10px; background: #000; box-shadow: 0 0 0 2px var(--borde); }
.vista--auto img { border-radius: 6px; }
.vista--vacia { display: grid; place-items: center; min-height: 240px; padding: 24px; border: 2px dashed #34405a; background: transparent; color: var(--suave); text-align: center; font: 800 30px/1.1 var(--senal); letter-spacing: .03em; }

/* Cada andén llega desde la derecha y frena, como un tren (estacion.js agrega .llego). */
@media (prefers-reduced-motion: no-preference) {
  .movimiento-listo .anden { opacity: 0; translate: 72px 0; transition: translate 1s cubic-bezier(.16, .84, .24, 1), opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
  .movimiento-listo .anden.llego { opacity: 1; translate: none; }
  .movimiento-listo .anden.inclinado { transition: translate 1s cubic-bezier(.16, .84, .24, 1), opacity .5s ease, transform .12s linear; }
  .movimiento-listo .anden .cartel__num { transform: scale(.3); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .6s; }
  .movimiento-listo .anden.llego .cartel__num { transform: none; }
}

/* ---------- Probar ---------- */

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