/* «Vuestro día, hora a hora» (dia.js). Sin JS, o con movimiento reducido, es una lista de tarjetas;
   con JS (.vivo) la escena se queda fija y las tarjetas pasan por encima mientras el reloj avanza. */
.dia { padding: var(--e-4) 0 0; border-bottom: 1px solid var(--linea); }
.dia-cabeza h2 { max-width: 26ch; text-wrap: balance; }
.dia-cabeza .peq { max-width: 56ch; color: var(--tinta-2); }
.dia-pasos { list-style: none; margin: var(--e-3) auto var(--e-4); padding: 0; width: min(100% - 2 * var(--lat), var(--ancho));
  display: grid; gap: .8rem; counter-reset: none; }
.dia-tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 1.1rem 1.25rem 1.2rem; max-width: 30rem; }
.dia-tarjeta h3 { font-family: var(--display); font-weight: 650; font-size: var(--t-l); margin: .15rem 0 .4rem; }
.dia-tarjeta p { margin: 0; color: var(--tinta-2); font-size: var(--t-s); text-wrap: pretty; }
.dia-tarjeta .dia-hora { font-family: var(--display); font-weight: 650; font-size: var(--t-xl); color: var(--ambar-texto);
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.dia-tarjeta a { white-space: nowrap; }
.dia-escena { display: none; }

/* ---- con JS: escena fija + tarjetas que pasan */
.dia.vivo .dia-pista { position: relative; }
.dia.vivo .dia-escena { display: block; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.dia.vivo .dia-pasos { position: relative; margin: -100vh auto 0; margin-top: -100svh; display: block; width: auto; }
.dia.vivo .dia-paso { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end;
  padding: 0 var(--lat) calc(clamp(1.5rem, 6vh, 3.5rem) + 4.5rem); pointer-events: none; }   /* + la barra «Pedir información» */
.dia.vivo .dia-paso:last-child { min-height: 110svh; }
.dia.vivo .dia-tarjeta { pointer-events: auto; box-shadow: 0 10px 30px rgba(20, 24, 31, .14); border: 0; width: 100%; }
@media (min-width: 900px) {
  .dia.vivo .dia-paso { align-items: center; padding-bottom: 0; padding-left: max(var(--lat), calc((100vw - var(--ancho)) / 2)); }
  .dia.vivo .dia-tarjeta { width: 26rem; }
}
.dia-escena svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dia-reloj { position: absolute; top: calc(var(--dia-arriba, 0px) + clamp(.8rem, 3vh, 2rem)); right: clamp(1rem, 4vw, 3rem); text-align: right;
  font-family: var(--display); font-weight: 650; line-height: 1; transition: color .4s; pointer-events: none; }
.dia-reloj b { display: block; font-size: clamp(2.6rem, 9vw, 5.5rem); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dia-reloj span { display: block; margin-top: .45rem; font-family: var(--sans); font-weight: 600; font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; opacity: .8; }

/* ---- movimiento reducido: una sola imagen quieta (la hora dorada) sobre la lista */
.dia.quieto .dia-escena { display: block; position: relative; height: 56vh; margin-top: var(--e-3); }