/* =========================================================================
   CD TERUEL — Previa de partido (con cuenta atrás sobre foto del estadio)
   ========================================================================= */
.previa {
  position: relative; min-height: clamp(560px, 82vh, 760px);
  display: flex; align-items: center; overflow: hidden; background: var(--marino);
  color: #fff;
}
.previa__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.previa__scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(16,18,32,.55) 0%, rgba(16,18,32,.35) 45%, rgba(16,18,32,.8) 100%),
  radial-gradient(120% 90% at 50% 40%, rgba(16,18,32,.15), rgba(16,18,32,.7)); }
.previa__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(2.5rem, 6vw, 5rem); text-align: center; }
.previa__loading { color: rgba(255,255,255,.85); font-size: 1.1rem; padding: 4rem 0; }

/* Cabecera: competición / jornada */
.previa__top { margin-bottom: clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.previa__comp { font-family: "Barlow", sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.previa__complogo { height: clamp(72px, 10vw, 110px); width: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.previa__jornada { font-family: "Cinzel", sans-serif; text-transform: uppercase; font-weight: 600; letter-spacing: .12em; font-size: .78rem; color: rgba(255,255,255,.75); }

/* Enfrentamiento: local — cuenta atrás — visitante */
.previa__match {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem); max-width: 1100px; margin: 0 auto;
}
.previa__team { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.6rem); }
.previa__team--home { justify-content: flex-end; }
.previa__team--away { justify-content: flex-start; }
.previa__crest { width: clamp(72px, 10vw, 110px); height: clamp(72px, 10vw, 110px); object-fit: contain; flex: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.previa__name {
  font-family: "Cinzel", sans-serif; text-transform: uppercase; font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 2.6rem); line-height: 1.05; color: #fff;
  text-shadow: 0 3px 18px rgba(0,0,0,.5);
}
.previa__team--home .previa__name { text-align: right; }
.previa__team--away .previa__name { text-align: left; }

/* Cuenta atrás */
.previa__count {
  display: flex; gap: clamp(.4rem, 1vw, .9rem);
  background: rgba(16,18,32,.55); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: clamp(.8rem, 1.6vw, 1.2rem) clamp(1rem, 2vw, 1.6rem);
  backdrop-filter: blur(6px);
}
.previa__seg { display: flex; flex-direction: column; align-items: center; min-width: clamp(42px, 6vw, 62px); }
.previa__seg .n { font-family: "Cinzel", sans-serif; font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.previa__seg .l { font-family: "Barlow", sans-serif; font-weight: 700; font-size: .62rem; letter-spacing: .14em; color: rgba(255,255,255,.6); margin-top: .4rem; }
.previa__jugando { font-family: "Cinzel", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 1rem; padding: .5rem 1rem; color: var(--rojo-300); }

/* Pie: fecha · hora + estadio */
.previa__foot { margin-top: clamp(1.8rem, 4vw, 3rem); }
.previa__when { font-family: "Cinzel", sans-serif; text-transform: uppercase; font-weight: 700; letter-spacing: .06em; font-size: clamp(.9rem, 2vw, 1.15rem); color: #fff; }
.previa__place { font-family: "Cinzel", sans-serif; text-transform: uppercase; font-weight: 600; letter-spacing: .06em; font-size: .82rem; color: rgba(255,255,255,.7); margin-top: .4rem; }

/* Móvil: apilar equipos y cuenta atrás en vertical */
@media (max-width: 720px) {
  .previa__match { grid-template-columns: 1fr; gap: 1.4rem; }
  .previa__team { flex-direction: column; gap: .7rem; justify-content: center; order: 0; }
  .previa__team--home .previa__name, .previa__team--away .previa__name { text-align: center; }
  .previa__count { order: 1; justify-self: center; }
  /* orden visual: local arriba, cuenta atrás medio, visitante abajo */
  .previa__team--home { order: 0; }
  .previa__count { order: 1; }
  .previa__team--away { order: 2; }
}