:root {
  --bg: #1e2535;          /* charcoal de las cards */
  --bg-deep: #0f1622;     /* fondo de página */
  --gold: #c9973a;        /* borde dorado */
  --gold-bright: #e6a830; /* hora / acentos */
  --white: #ffffff;
  --muted: #9aa3b5;
  --line: rgba(201, 151, 58, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Montserrat", system-ui, sans-serif;
  background: var(--bg-deep);
  color: var(--white);
  min-height: 100vh;
  padding: 24px 20px 60px;
}

/* ---------- Controles (no se exportan) ---------- */
.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 620px;
  margin: 0 auto 24px;
  flex-wrap: wrap;
}
.controls__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: 3px; font-size: 14px;
}
.controls__brand .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-bright); box-shadow: 0 0 12px var(--gold-bright);
}
.controls__nav { display: flex; align-items: center; gap: 8px; }
.datelabel { font-size: 12px; letter-spacing: 2px; color: var(--muted); margin-left: 6px; }

.btn {
  font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 1px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.18); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn--gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #1a1205; }
.btn--gold:hover { filter: brightness(1.06); }

/* ---------- Escenario (escala el poster para previsualizar) ---------- */
.stage {
  width: min(630px, 100%);   /* responsivo: 1800 * 0.35 en escritorio, menos en móvil */
  aspect-ratio: 1 / 1;       /* cuadrado; la altura sigue al ancho */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.stage__scale {
  width: 1800px;
  height: 1800px;
  transform: scale(0.35);
  transform-origin: top left;
}

/* ---------- Poster 1800×1800 (lo exportado) ---------- */
.poster {
  position: relative;
  width: 1800px;
  height: 1800px;
  overflow: hidden;
  background: #0e3d20; /* respaldo si el fondo aún no carga */
}
.poster__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.poster__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding-top alto baja el bloque (logo+título+pleca+cards) para centrarlo más */
  padding: 151px 96px 77px;
}

.poster__logo {
  width: 276px;
  height: auto;
  margin-bottom: 29px;
}

.poster__title {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.98;
  max-width: 1608px;
}
/* inline-block + nowrap: cada línea ocupa SOLO una línea; app.js reduce el
   tamaño automáticamente si una frase fuera muy larga (nunca 3 líneas). */
.poster__title .t1 {
  display: inline-block;
  max-width: 1608px;
  white-space: nowrap;
  font-weight: 700;
  font-size: 98px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
}
.poster__title .t2 {
  display: inline-block;
  max-width: 1608px;
  white-space: nowrap;
  font-weight: 400;
  font-size: 65px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  margin-top: 10px;
}

.poster__pleca {
  width: 912px;
  height: auto;
  margin: 41px 0 115px;
}

/* ---------- Fila / grid de cards (centrado) ---------- */
.cards {
  display: flex;
  flex-wrap: wrap;
  /* row-gap amplio: los escudos sobresalen, así las 2 filas respiran */
  gap: 101px 36px;
  justify-content: center;
  align-content: center;
  /* max-width y tamaño (grande/pequeño) los fija app.js según los partidos */
}

.card {
  position: relative;
  width: 396px;
  background: linear-gradient(180deg, rgba(31,38,56,.96), rgba(20,27,42,.96));
  border: 2px solid var(--gold);
  border-radius: 26px;
  padding: 94px 29px 31px;
  text-align: center;
  box-shadow: 0 22px 48px rgba(0,0,0,.5);
}

.card__shields {
  position: absolute;
  top: -55px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 19px;
}
.shield {
  display: block;
  width: 101px; height: 115px;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.55));
}

.card__group {
  font-weight: 700; font-size: 17px; letter-spacing: 3px;
  color: var(--gold-bright); margin-bottom: 22px;
}
.card__teams { display: flex; flex-direction: column; gap: 7px; }
.card__team {
  font-weight: 700; font-size: 28px; letter-spacing: 1px;
  color: var(--white); text-transform: uppercase; line-height: 1.12;
}
.card__vs { font-weight: 400; font-size: 17px; letter-spacing: 3px; color: var(--muted); }
.card__time {
  font-weight: 700; font-size: 48px; letter-spacing: 2px;
  color: var(--gold-bright); margin: 22px 0 19px;
}
.card__sep {
  height: 1px; margin: 0 -10px 19px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.card__foot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 16px; letter-spacing: 1.5px; color: var(--muted);
}
.card__foot svg { flex: none; }

/* ---------- Variante GRANDE: cuando los partidos caben en una sola fila ----------
   (clase `is-big` en .poster__content). En una sola fila sobra espacio, así que
   el bloque baja y respira más; en 2 filas se mantiene compacto. */
.poster__content.is-big { padding-top: 161px; }   /* logo +10px */
.is-big .poster__logo { margin-bottom: 59px; }    /* título +30px */
.is-big .poster__pleca { margin: 81px 0 195px; }  /* pleca sube 10px; las cards quedan en su sitio */

.is-big .card {
  width: 500px;
  padding: 115px 36px 38px;
  border-radius: 31px;
}
.is-big .card__shields { top: -67px; gap: 22px; }
.is-big .shield { width: 122px; height: 139px; }
.is-big .card__group { font-size: 19px; margin-bottom: 26px; }
.is-big .card__team { font-size: 34px; }
.is-big .card__vs { font-size: 19px; }
.is-big .card__time { font-size: 60px; margin: 26px 0 22px; }
.is-big .card__foot { font-size: 18px; }

/* ---------- Estado vacío ---------- */
.empty {
  width: 100%; text-align: center; padding: 60px 0;
  color: rgba(255,255,255,.85); font-weight: 700; letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}