.race-card {
  isolation: isolate;
  overflow: hidden;
}

.race-card::before,
.race-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.race-card::before {
  z-index: -2;
  opacity: .94;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.race-card::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 56%, rgba(0,0,0,.58) 100%),
    linear-gradient(100deg, rgba(255,255,255,.22), transparent 62%);
}
.race-card.current::before { opacity: .98; }
.race-card.current::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 56%, rgba(0,0,0,.58) 100%),
    linear-gradient(100deg, rgba(255,255,255,.18), transparent 62%);
}
.race-card > * { position: relative; z-index: 1; }
.race-card,
.race-card.current { background: #fff; color: #111; border-color: #d5d3ce; }
.race-card.current { border-top-color: var(--red); }
.race-card .round { color: #111; background: rgba(255,255,255,.82); padding: 5px 7px; }
.race-card footer { color: #fff; text-shadow: 0 1px 5px #000; }
.race-card .race-line { margin-top: 158px; background: rgba(255,255,255,.55); box-shadow: 0 1px 5px #0005; }
.race-card .race-status { color: #111; background: rgba(255,255,255,.84); border-color: rgba(255,255,255,.92); }
.race-card.current .race-status { color: #fff; background: var(--red); border-color: var(--red); }

/* Septiembre: tricolor, papel picado y energía de las fiestas patrias. */
.race-theme-independencia::before {
  background-image: url("races/independencia.webp");
  background-position: 62% center;
}

/* Octubre: lucha libre, competencia y energía de arena. */
.race-theme-lucha::before {
  background-image: url("races/lucha-libre.webp");
  background-position: 68% center;
}

/* Noviembre: cempasúchil, noche y papel picado. */
.race-theme-muertos::before {
  background-image: url("races/dia-de-muertos.webp");
  background-position: 66% center;
}

/* Diciembre: pino, luces doradas y acentos de bastón navideño. */
.race-theme-navidad::before {
  background-image: url("races/navidad.webp");
  background-position: 64% center;
}

.race-card .race-month,
.race-card.current .race-month { color: rgba(255,255,255,.9); text-shadow: 0 2px 10px #000; }

@media (prefers-reduced-motion: no-preference) {
  .race-card::before { transition: transform .35s ease, opacity .35s ease; }
  .race-card:hover::before { transform: scale(1.04); opacity: 1; }
  .race-card.current:hover::before { opacity: 1; }
}