:root {
  --bg: #000;
  --fg: #fff;
  --accent: #c8f546;

  /* Baseline 1920x1080: escalado controlado (con límites) */
  --panel-pad: clamp(10px, 1.2vw, 18px);
  --gap: clamp(8px, 1vw, 16px);
  --radius: clamp(8px, 1vmin, 14px);

  --btn-py: clamp(10px, 0.75vw, 14px);
  --btn-px: clamp(14px, 1.6vw, 26px);
  --btn-font: clamp(13px, 1.05vw, 18px);

  --title-font: clamp(12px, 0.95vw, 16px);
  --label-font: clamp(11px, 0.85vw, 14px);
  --count-value-font: clamp(28px, 3.2vw, 52px);

  /* Estimación de “chrome” vertical a reservar en derecha (botones + gaps + padding) */
  --languages-est-h: clamp(46px, 7vh, 86px);
  --btn-min-h: clamp(40px, 5.2vh, 54px);
  --btn-text-nudge-y: 0.6px;
}

/* Base */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'seat_bcnregular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Evitar scroll: el layout debe entrar en el viewport */
body {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* Layout principal */
#container {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;

  /* En layout horizontal NO centramos verticalmente el conjunto:
     el panel izquierdo debe arrancar arriba (logo alineado con el iframe). */
  align-items: stretch;
}

/* Columna izquierda */
#esquerra {
  width: 29%;
  box-sizing: border-box;
  padding: var(--panel-pad);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap);
}

/* Columna derecha */
#dreta {
  width: 71%;
  box-sizing: border-box;
  padding: var(--panel-pad);

  display: flex;

  /* El vídeo sí puede centrarse verticalmente en horizontal */
  align-items: center;
  justify-content: flex-start;
}

/* Mantener heurística original por aspect-ratio (como tu versión previa) */
@media screen and (min-aspect-ratio: 22/9) {
  #esquerra { width: 35%; }
  #dreta { width: 65%; }
}

@media screen and (max-aspect-ratio: 19/9) {
  #esquerra { width: 24%; }
  #dreta { width: 76%; }
}

@media (max-width: 900px) and (min-aspect-ratio: 6/5) {
  /* Evita que el panel izquierdo se quede demasiado estrecho en horizontales “bajas”,
     especialmente cuando entra/sale el breakpoint de 19/9 por 1px */
  #esquerra { width: 32%; }
  #dreta { width: 68%; }

  /* Countdown más compacto y robusto (2x2) */
  :root {
    --count-value-font: clamp(20px, 3.6vw, 34px);
    --title-font: clamp(11px, 1.6vw, 14px);
    --label-font: clamp(10px, 1.2vw, 12px);
  }

  .countdown__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(6px, 0.8vw, 10px);
  }
}

@media (max-width: 660px) and (min-aspect-ratio: 6/5) {
  /* Horizontales muy estrechos: aún más compacto */
  :root {
    --count-value-font: clamp(18px, 3.1vw, 28px);
    --title-font: clamp(11px, 2.0vw, 13px);
    --label-font: clamp(10px, 1.8vw, 11px);
    --btn-font: clamp(12px, 2.2vw, 15px);
  }

  .countdown__grid {
    gap: 8px;
  }
}

/* Logo */
.logo {
  width: clamp(120px, 43%, 220px);
  height: auto;
  display: block;
  margin-top: 0;
}

/* Countdown */
.countdown {
  width: 100%;
  max-width: 34rem;
  text-align: center;
}

.countdown__title {
  font-size: var(--title-font);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-top: calc(var(--gap) * 0.5);
  margin-bottom: var(--gap);
}

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 0.6vw, 12px);
  align-items: end;
}

.countdown__unit {
  text-align: center;
}

.countdown__value {
  font-family: 'seat_bcnblack', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  color: var(--accent);
  font-size: var(--count-value-font);
  line-height: 1;
}

.countdown__label {
  font-size: var(--label-font);
  opacity: 0.9;
  margin-top: 0.35rem;
}

.countdown__date {
  font-size: var(--label-font);
  opacity: 0.9;
  margin-top: calc(var(--gap) * 0.75);
}

.countdown__date .date__suffix {
  font-size: 0.65em;
  line-height: 0;
  vertical-align: super;

  /* ajuste óptico fino (si lo ves demasiado alto/bajo, cambia este valor) */
  position: relative;
  top: -0.1em;
}

/* Estado idioma (solo en LIVE) */
.language-status {
  width: 100%;
  text-align: center;
  font-size: var(--title-font);
  margin-top: calc(var(--gap) * 0.5);
}

#selectedLanguage {
  color: var(--accent);
  font-family: 'seat_bcnblack', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
}

/* Stage (derecha): ancho limitado por altura del viewport para evitar overflow en pantallas “bajas” */
.stage {
  width: 100%;
  margin: 0 auto;

  /* Evita que el 16:9 supere la altura útil del viewport (sin scroll) */
  width: min(100%, calc((100svh - (var(--panel-pad) * 2) - var(--languages-est-h)) * 16 / 9));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

/* Embed responsive (ratio 16:9 por padding-bottom: máxima compatibilidad) */
.embed-container {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
}

.embed-container img,
.embed-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Botonera idiomas */
.languages {
  display: none;
  width: 100%;
  justify-content: center;
  gap: var(--gap);
  flex-wrap: wrap;
}

button {
  appearance: none;
  -webkit-appearance: none;

  background: whitesmoke;
  color: #000;

  cursor: pointer;
  border: 0;
  border-radius: var(--radius);

  /* En vez de depender de padding vertical (sub-pixel), fijamos altura mínima */
  min-height: var(--btn-min-h);
  padding: 0 var(--btn-px);

  font-size: var(--btn-font);
  font-weight: 700;

  font-family: 'seat_bcnregular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Centramos caja de texto */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Evita que la altura de línea “empuje” el centro */
  line-height: 1;
  text-align: center;

  /* Corrección óptica: ajusta el texto 0.6px hacia abajo */
  transform: translateY(var(--btn-text-nudge-y));

  touch-action: manipulation;
}

button:hover {
  background-color: var(--accent);
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =========================================================
   Rango “semi-cuadrado” (ej: 920x650 => 1.415)
   - Centramos el conjunto verticalmente para evitar:
     - panel izquierdo demasiado arriba
     - iframe centrado pero logo no
   - Mantiene top alineado entre logo e iframe
   ========================================================= */
@media (min-aspect-ratio: 6/5) and (max-aspect-ratio: 13/8) {
  /* Centrado vertical del conjunto (ambas columnas) */
  #container {
    align-items: center;
  }

  /* En este rango, NO centramos solo la derecha. */
  #dreta {
    align-items: flex-start;
  }
}

/* =========================================================
   ✅ SALTO “ANTES” POR ASPECT-RATIO (w/h <= 1.2)
   ========================================================= */
@media (max-aspect-ratio: 6/5) {
  #container {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

  #dreta { order: 1; width: 100%; align-items: center; justify-content: flex-start; }
  #esquerra { order: 2; width: 100%; }

  .stage { width: 100%; }

  :root {
    --count-value-font: clamp(22px, 6.2vw, 44px);
    --btn-font: clamp(12px, 3.6vw, 16px);
    --languages-est-h: clamp(44px, 9vh, 92px);
  }

  .logo {
    width: clamp(110px, 28vw, 170px);
  }
}

/* Extra: pantallas muy estrechas (<= 360px) */
@media (max-width: 360px) {
  :root {
    --panel-pad: 10px;
    --gap: 8px;
    --btn-px: 14px;
  }

  .logo {
    width: 110px;
  }
}