/* zaxfun — la banda «Reto de hoy» de la portada.
   Hereda las variables de hub.css.

   Tiene que leerse como OTRA COSA que los estantes de abajo: aquellos son el
   catálogo, que está siempre; esto es lo de hoy y mañana ya no. De ahí el oro
   (el resto de la portada es cian y violeta), el fondo cálido y que las cartas
   no lleven miniatura: una tarjeta con dibujo se leería como un juguete más.

   Va ARRIBA de los estantes pero ocupa poco a propósito. Quien llega de Google
   buscando «test de reflejos» no sabe aún qué es un reto: si esto empujara el
   catálogo fuera de la primera pantalla, el escaparate le costaría al sitio la
   visita que sí venía a por algo. */

.hoy {
  margin: 0 0 clamp(2.4rem, 7vw, 3.6rem);
}

/* ---------- Cabecera ---------- */

.hoy-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
  margin-bottom: .95rem;
}

.hoy-titulo {
  font-family: var(--tipo-titulo);
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--oro);
}

/* Un punto dorado antes del título: el latido de «esto es de hoy», sin
   necesidad de escribir la palabra en ningún sitio. */
.hoy-titulo::before {
  content: '';
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 0 0 rgba(255, 212, 121, .55);
  animation: hoy-latido 2.8s ease-out infinite;
  vertical-align: middle;
}

@keyframes hoy-latido {
  0%   { box-shadow: 0 0 0 0 rgba(255, 212, 121, .5); }
  70%  { box-shadow: 0 0 0 .55rem rgba(255, 212, 121, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 212, 121, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hoy-titulo::before { animation: none; }
}

.hoy-nota {
  margin: 0;
  color: var(--texto-tenue);
  font-size: .88rem;
}

.hoy-reloj {
  margin: 0;
  margin-left: auto;
  font-size: .82rem;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.hoy-reloj b {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* ---------- Las cartas ---------- */

.hoy-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: clamp(.7rem, 2.5vw, 1rem);
}

/* EN EL MÓVIL, UN CARRIL QUE SE DESLIZA, no una carta encima de otra.
   Apiladas, dos retos ocupaban 400 px y empujaban los estantes fuera de la
   primera pantalla: quien llega buscando «test de reflejos» se encontraría
   primero con un escaparate de dos juegos que no conoce. Así la banda mide una
   carta de alto, y la siguiente ASOMA por el borde —el 82%— que es lo que dice
   «hay más, desliza» sin escribirlo. Con más arcades esto ya no crece. */
@media (max-width: 620px) {
  .hoy-fila {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* De borde a borde: la carta puede salirse del ancho del texto, que es lo
       que hace que se lea como un carril y no como una caja cortada. */
    margin-inline: calc(clamp(1rem, 4vw, 2rem) * -1);
    padding-inline: clamp(1rem, 4vw, 2rem);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hoy-fila::-webkit-scrollbar { display: none; }

  .hoy-carta {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
}

.hoy-carta {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 8.5rem;
  padding: 1rem 1.05rem;
  border-radius: var(--radio);
  /* Fondo propio y opaco, como las tarjetas de juguete: sobre el cielo
     estrellado un panel translúcido no separa nada. */
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(255, 212, 121, .11), transparent 60%),
    #0b0d1c;
  border: 1px solid rgba(255, 212, 121, .22);
  color: var(--texto);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
  .hoy-carta:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 212, 121, .45);
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .45);
  }
}

.hoy-carta:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}

.hoy-juego {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: 1.02rem;
}

.hoy-num {
  color: var(--oro);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.hoy-reglas {
  flex: 1;
  color: var(--texto-tenue);
  font-size: .85rem;
  line-height: 1.45;
}

/* El «botón». Es un <span> porque la carta entera ya es el enlace: dos zonas
   pulsables anidadas es lo que hace que en el móvil se toque la que no era. */
.hoy-accion {
  align-self: flex-start;
  padding: .42rem .85rem;
  border-radius: 999px;
  background: var(--oro);
  color: #191203;
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: .84rem;
}

/* ---------- Ya jugado ----------
   El premio de haber cerrado el día: se ve lo que hiciste, no otro botón. */

.hoy-carta.hoy-lista {
  border-color: rgba(111, 211, 255, .22);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(111, 211, 255, .1), transparent 60%),
    #0b0d1c;
}

.hoy-cuadros {
  flex: 1;
  font-size: 1.15rem;
  line-height: 1.5;
  letter-spacing: .06em;
  word-break: break-word;
}

.hoy-pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}

.hoy-titular {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: 1rem;
}

.hoy-sello {
  font-size: .8rem;
  color: var(--cian);
  white-space: nowrap;
}

/* La racha solo aparece cuando está viva (lo decide el JS). Nunca se avisa de
   una racha perdida: eso es reñir a alguien por no haber venido. */
.hoy-racha {
  font-size: .78rem;
  color: var(--texto-tenue);
}