/* Marcador — pensado para leerse bajo el sol, detrás de una caja transparente y de costado.
   Reglas que siguen todos los estilos de aquí:
   · Todo lo que hay que leer es blanco puro o un color muy luminoso; nada importante en gris.
   · Letra gruesa (700–900): los trazos finos se pierden con reflejos y a 14 m.
   · Bloques sólidos y grandes en vez de líneas finas o matices: de costado, una pantalla
     pierde contraste y los colores suaves desaparecen.
   · Fondo negro: la caja transparente refleja el cielo; con números blancos enormes encima
     se siguen leyendo, y el negro no calienta ni encandila de noche.
   Todo se dibuja en un lienzo fijo de 1920 × 1080 que se escala a la pantalla del TV. */

@font-face {
  font-family: 'Inter';
  src: url('fuentes/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: block;
}

:root {
  --tinta: #ffffff;
  --gris: #b4b4ba;        /* lo más oscuro que se usa para texto */
  --pareja0: #ff9f0a;     /* naranja */
  --pareja1: #2ec5ff;     /* celeste: un azul luminoso, el azul oscuro se pierde con sol */
  --pelota: #d9f74a;
  --resorte: cubic-bezier(.2, .8, .2, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  /* Columnas: lado · pelota · nombres · set 1 · set 2 · set 3 · aire · puntos */
  --columnas: 84px 96px 1fr 200px 200px 200px 36px 420px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; cursor: none; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--tinta);
  font-optical-sizing: auto;
  font-feature-settings: 'tnum' 1, 'cv11' 1;   /* números de igual ancho: no bailan al cambiar */
  -webkit-font-smoothing: antialiased;
}

#escenario { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden; background: #000; }

/* ---------- Arriba: letrero, firma y hora ---------- */
#arriba { position: absolute; z-index: 6; left: 0; top: 0; width: 1920px; height: 110px; padding: 0 64px;
  display: flex; align-items: center; justify-content: flex-end; }
.terminado #reglas { opacity: 0; }
#hora { font-size: 86px; font-weight: 900; letter-spacing: -0.03em; }

#letrero { position: absolute; left: 960px; top: 56px; transform: translate(-50%, -50%) translateY(-16px);
  display: flex; align-items: center; gap: 20px; padding: 14px 40px; border-radius: 999px;
  background: #fff; color: #000; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .35s, transform .5s var(--rebote); }
#letrero.visible { opacity: 1; transform: translate(-50%, -50%); }
#letrero b { font-size: 50px; font-weight: 900; letter-spacing: -0.01em; white-space: nowrap; }
#letrero .flechas { display: none; position: relative; width: 58px; height: 58px; font-size: 46px; font-weight: 900; line-height: 1; }
#letrero.cambio .flechas { display: block; }
#letrero .flechas i { position: absolute; left: 4px; font-style: normal; }
#letrero .flechas i:first-child { top: -4px; color: #e07b00; animation: va 1.4s var(--resorte) infinite alternate; }
#letrero .flechas i:last-child { top: 24px; color: #0096d6; animation: viene 1.4s var(--resorte) infinite alternate; }
#letrero .flechas i:first-child::before { content: '→'; }
#letrero .flechas i:last-child::before { content: '←'; }
/* Firma: chica a propósito, que no compita con el puntaje. Placa blanca con el positivo del
   manual (letras tinta, chip dorado), recortado sin aire; la misma forma que el letrero y la nota. */
#firma { position: absolute; left: 64px; top: 56px; transform: translateY(-50%);
  display: flex; align-items: center; gap: 16px; padding: 12px 30px 12px 28px; border-radius: 999px;
  background: #fff; transition: opacity .35s; }
#firma span { font-size: 26px; font-weight: 700; letter-spacing: .01em; color: #6e6e73; white-space: nowrap; }
#firma img { display: block; height: 36px; width: auto; }
#letrero.visible ~ #firma, .con-nota #firma { opacity: 0; }

@keyframes va { from { transform: translateX(-6px); } to { transform: translateX(8px); } }
@keyframes viene { from { transform: translateX(8px); } to { transform: translateX(-6px); } }

/* ---------- El tablero ---------- */
#tablero { position: absolute; z-index: 1; left: 0; top: 110px; width: 1920px; height: 670px; transition: opacity .6s; }
.terminado #tablero { opacity: 0; }

#cabecera, .fila { position: absolute; left: 0; width: 1920px; padding: 0 64px;
  display: grid; grid-template-columns: var(--columnas); align-items: center; }
.s1 { grid-column: 4; } .s2 { grid-column: 5; } .s3 { grid-column: 6; }
.col-puntos { grid-column: 8; }

#cabecera { top: 0; height: 60px; }
#cabecera .col-set { text-align: center; font-size: 40px; font-weight: 900; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap; color: #8e8e93; }
#cabecera .col-set.actual { color: var(--tinta); }
#cabecera .col-puntos { text-align: center; }
#etiquetaPuntos:not(:empty) { justify-self: center; font-size: 36px; font-weight: 900; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap; color: #000; background: var(--pelota); padding: 6px 22px; border-radius: 999px; }

.fila { height: 275px; }
#f0 { top: 60px; --color: var(--pareja0); }
#f1 { top: 350px; --color: var(--pareja1); }

/* El lado: un bloque del color de la pareja con una flecha hacia su mitad de la cancha.
   Esa pareja usa el botón de ese lado. Al cambiar de lado, la flecha da la vuelta. */
.lado { grid-column: 1; width: 84px; height: 232px; border-radius: 26px; background: var(--color);
  display: flex; align-items: center; justify-content: center; }
.lado b { font-size: 80px; font-weight: 900; color: #000; line-height: 1; display: block;
  transition: transform .9s var(--rebote); }
.lado.der b { transform: rotate(180deg); }
.lado.gira { animation: late .9s var(--resorte); }
@keyframes late { 30% { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(255, 255, 255, .25); } }

.nombres { grid-column: 3; display: flex; flex-direction: column; min-width: 0; padding-left: 8px; }
.nombres span { font-size: 76px; font-weight: 800; line-height: 1.06; letter-spacing: -0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nombres span:empty { display: none; }

.fila .chapa { position: absolute; left: 252px; bottom: 2px; font-style: normal; font-size: 34px; font-weight: 900;
  letter-spacing: .02em; text-transform: uppercase; color: #000; background: var(--color);
  padding: 6px 20px; border-radius: 999px; display: none; }
.fila .chapa.visible { display: block; animation: entra .45s var(--resorte); }

/* El set que se juega, enorme; los cerrados, más chicos */
.fila .col-set { text-align: center; font-size: 196px; font-weight: 800; line-height: 1; letter-spacing: -0.045em; }
.fila .col-set.cerrado { font-size: 140px; font-weight: 800; color: #8e8e93; }
.fila .col-set.cerrado.gano { color: var(--tinta); }
.fila .col-set.sube { animation: sube .7s var(--resorte); }
@keyframes sube { 40% { transform: scale(1.22); color: var(--color); } }

.caja { height: 244px; border-radius: 42px; background: var(--tinta); display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 10px var(--color); }
.caja b { font-size: 226px; font-weight: 900; line-height: 1; letter-spacing: -0.05em; color: #000; }
.caja.palabra b { font-size: 90px; letter-spacing: -0.04em; }   /* «Ventaja» entera en la caja */
.caja.entra { animation: golpe .5s var(--resorte); }
@keyframes golpe { 0% { transform: scale(.94); box-shadow: inset 0 0 0 24px var(--color); } }
@keyframes entra { from { transform: translateY(10px) scale(.97); opacity: .3; } }

#divisor { position: absolute; left: 64px; top: 340px; width: 1792px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .28); }

/* Qué pasa en el 40-40: una cápsula gris al centro de la línea, con un aro negro para que la línea no la toque.
   Antes del primer punto se aparta: ahí mismo sale la pista de quién saca. */
#reglas { position: absolute; left: 50%; top: 2px; transform: translate(-50%, -50%); padding: 10px 36px;
  border-radius: 999px; background: #1c1c1e; box-shadow: 0 0 0 12px #000;
  font-size: 38px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; color: #fff; transition: opacity .4s; }
#aviso.pista ~ #reglas { opacity: 0; }

/* Aviso del juego: sobre las cajas. Empate en blanco, ventaja del color de la pareja,
   punto de oro / estrella en verde pelota. La pista de inicio va al centro. */
#aviso { position: absolute; right: 0; top: 2px; transform: translateY(-50%) scale(.9); transform-origin: right center;
  font-size: 50px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  color: #000; background: var(--tinta); padding: 10px 36px; border-radius: 999px;
  box-shadow: 0 0 0 10px #000; opacity: 0; transition: opacity .3s, transform .45s var(--rebote); }
#aviso.visible { opacity: 1; transform: translateY(-50%) scale(1); }
#aviso.decisivo { background: var(--pelota); }
#aviso.ventaja0 { background: var(--pareja0); }
#aviso.ventaja1 { background: var(--pareja1); }
#aviso.pista { right: auto; left: 896px; transform-origin: center; transform: translate(-50%, -50%) scale(.9); font-size: 40px; font-weight: 800; letter-spacing: 0; text-transform: none;
  color: #000; background: var(--pelota); }

/* ---------- La pelota de saque ---------- */
#pelota { position: absolute; left: 161px; top: 0; width: 70px; height: 70px; opacity: 0;
  transition: top .9s var(--rebote), opacity .4s; }
#pelota.visible { opacity: 1; }
#pelota.viaja { animation: gira .9s var(--resorte); }
@keyframes gira { from { transform: rotate(-220deg) scale(.75); } }

/* ---------- Mantener un botón: una barra grande sobre la fila, que se llena en 3 s ---------- */
#sostener { position: absolute; z-index: 3; left: 244px; width: 1192px; height: 170px; border-radius: 40px; overflow: hidden;
  background: #fff; color: #000; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 10px #000, 0 20px 60px rgba(0, 0, 0, .6);
  opacity: 0; transform: scale(.94); pointer-events: none; transition: opacity .2s, transform .3s var(--resorte); }
#sostener.en0 { top: 112px; }
#sostener.en1 { top: 402px; }
#sostener .barra { position: absolute; inset: 0; }
#sostener .barra i { display: block; height: 100%; background: var(--pelota); transform-origin: 0 0; transform: scaleX(0); }
#sostener p { position: relative; font-size: 66px; font-weight: 900; letter-spacing: -0.03em; white-space: nowrap; }
#sostener.activo { opacity: 1; transform: none; transition: opacity .25s .25s, transform .4s var(--rebote) .25s; }
#sostener.activo .barra i { transform: scaleX(1); transition: transform 3s linear; }

/* ---------- Tarjeta de partido nuevo ---------- */
.tarjeta { position: absolute; z-index: 4; left: 960px; top: 335px; width: 760px; padding: 44px 40px 42px;
  transform: translate(-50%, -50%) scale(.94); text-align: center; color: #000;
  background: #fff; border-radius: 40px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  opacity: 0; pointer-events: none; transition: opacity .35s, transform .5s var(--resorte); }
.tarjeta.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tarjeta h2 { font-size: 72px; font-weight: 900; letter-spacing: -0.02em; margin: 22px 0 10px; }
.tarjeta .suave { font-size: 34px; font-weight: 700; color: #3a3a3c; }
.reloj-anillo { position: relative; width: 170px; height: 170px; margin: 0 auto; }
.anillo { width: 170px; height: 170px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 14; }
.anillo .pista { stroke: rgba(0, 0, 0, .1); }
.anillo .avance { stroke: #000; stroke-linecap: round; stroke-dasharray: 552.92; stroke-dashoffset: 552.92; transition: none; }
#ambos.visible .avance { stroke-dashoffset: 0; transition: stroke-dashoffset 3s linear; }

/* ---------- Ganadores ---------- */
#fin { position: absolute; z-index: 0; left: 0; top: 0; width: 1920px; height: 780px; overflow: hidden;
  opacity: 0; transition: opacity .8s; --color: var(--tinta); }
.terminado #fin { z-index: 4; opacity: 1; }
#fin.gana0 { --color: var(--pareja0); }
#fin.gana1 { --color: var(--pareja1); }
#confeti { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#fin .halo { position: absolute; left: 50%; top: 52%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px;
  border-radius: 50%; background: radial-gradient(circle, var(--color) 0%, transparent 62%); opacity: .3;
  animation: respira 5s ease-in-out infinite; }
@keyframes respira { 50% { transform: scale(1.08); opacity: .4; } }
#fin .contenido { position: absolute; inset: 0 480px 0 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 30px 0 0 60px; }
#fin .nuevo { position: absolute; z-index: 3; right: 72px; top: 50%; width: 440px; transform: translateY(-46%);
  padding: 32px 34px 28px; border-radius: 40px; background: #fff; color: #000; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.terminado #fin .nuevo { animation: aparece .9s var(--rebote) both 1.6s; }
#fin .nuevo b { display: block; white-space: nowrap; font-size: 46px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 20px; }
#finQR svg { display: block; width: 372px; height: 372px; }
#finQR svg path, #finQR svg rect[fill="black"], #finQR svg rect:not([fill="white"]) { fill: #000; }
#fin .nuevo .tiempo { height: 10px; border-radius: 5px; background: rgba(0, 0, 0, .1); overflow: hidden; margin-top: 22px; }
#fin .nuevo .tiempo i { display: block; height: 100%; background: #000; transform-origin: 0 0; transition: transform 1s linear; }
#fin .nuevo .cuenta { margin-top: 14px; font-size: 28px; font-weight: 700; color: #3a3a3c; white-space: nowrap; }
#fin .nuevo .cuenta span { font-weight: 900; color: #000; }
#fin .copa { width: 100px; height: 100px; fill: var(--pelota); stroke: var(--pelota); stroke-width: 6;
  stroke-linejoin: round; stroke-linecap: round; }
#fin .sobre { font-size: 44px; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; margin-top: 10px; }
#fin h1 span { display: block; }
#fin h1 { font-size: 170px; font-weight: 900; letter-spacing: -0.045em; line-height: .95; margin: 10px 0 26px; white-space: nowrap;
  color: var(--color); text-shadow: 0 6px 40px rgba(0, 0, 0, .5); }
#finSets { display: flex; gap: 22px; }
#finSets span { display: block; min-width: 240px; padding: 18px 34px; border-radius: 34px;
  background: rgba(255, 255, 255, .14); font-size: 104px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
#finSets span i { font-style: normal; color: #8e8e93; }
#finDatos { font-size: 42px; font-weight: 800; color: var(--gris); margin-top: 26px; }
/* Entrada escalonada */
.terminado #fin .copa { animation: aparece .9s var(--rebote) both .2s; }
.terminado #fin .sobre { animation: aparece .8s var(--resorte) both .4s; }
.terminado #fin h1 { animation: crece 1s var(--rebote) both .55s; }
.terminado #finSets span { animation: aparece .7s var(--rebote) both; }
.terminado #finSets span:nth-child(1) { animation-delay: .9s; }
.terminado #finSets span:nth-child(2) { animation-delay: 1.05s; }
.terminado #finSets span:nth-child(3) { animation-delay: 1.2s; }
.terminado #finDatos { animation: aparece .8s var(--resorte) both 1.4s; }
@keyframes aparece { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@keyframes crece { from { opacity: 0; transform: scale(.6); letter-spacing: .05em; } }

/* ---------- Pantalla de inicio ---------- */
#inicio { position: absolute; z-index: 0; left: 0; top: 0; width: 1920px; height: 780px; opacity: 0;
  pointer-events: none; transition: opacity .6s; }
.en-inicio #inicio { z-index: 4; opacity: 1; }
.en-inicio #tablero, .en-inicio #reglas { opacity: 0; }
#inicio .qr { position: absolute; left: 64px; top: 120px; width: 540px; height: 620px; border-radius: 48px;
  background: #fff; color: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
#inicioQR svg { display: block; width: 452px; height: 452px; }
#inicio .qr b { font-size: 64px; font-weight: 900; letter-spacing: -0.03em; }
#inicio .textos { position: absolute; left: 660px; top: 150px; width: 520px; }
#inicio h1 { font-size: 104px; font-weight: 900; letter-spacing: -0.045em; line-height: .95; }
#inicio .textos p { font-size: 44px; font-weight: 700; line-height: 1.15; color: #d1d1d6; margin-top: 26px; }
#inicio .sin-datos { margin-top: 40px; font-size: 34px; font-weight: 700; line-height: 1.2; color: var(--gris); }
#inicio .sin-datos span { display: block; color: var(--pelota); font-weight: 900; }
#inicio .desconectado { display: none; margin-top: 28px; font-size: 34px; font-weight: 900; color: #000;
  background: var(--pareja0); padding: 12px 24px; border-radius: 20px; }
.sin-internet #inicio .desconectado { display: inline-block; }
.sin-internet #inicio .sin-datos { display: none; }
#inicio .anuncio-grande { position: absolute; right: 64px; top: 120px; width: 640px; height: 620px;
  border-radius: 48px; overflow: hidden; background: #1c1c1e; }
.en-inicio #inicio .qr { animation: aparece .9s var(--rebote) both .1s; }
.en-inicio #inicio .textos { animation: aparece .9s var(--resorte) both .3s; }
.en-inicio #inicio .anuncio-grande { animation: aparece .9s var(--resorte) both .5s; }

/* El anuncio grande del inicio usa los mismos anuncios, en formato cuadro */
.cuadro .anuncio.disponible { flex-direction: column; align-items: flex-start; justify-content: center; gap: 36px; padding: 0 56px; border-top: 0; }
.cuadro .disponible h3 { font-size: 80px; line-height: .98; }
.cuadro .disponible .tel { text-align: left; }
.cuadro .disponible .tel b { font-size: 76px; }
.cuadro .anuncio.texto { padding: 0 56px; }
.cuadro .anuncio.texto h3 { font-size: 80px; line-height: 1; }

/* ---------- Nota corta ---------- */
#nota { position: absolute; z-index: 5; left: 960px; top: -55px; transform: translate(-50%, -50%) translateY(-12px);
  font-size: 46px; font-weight: 800; white-space: nowrap; color: #000; background: #fff;
  padding: 14px 32px; border-radius: 999px; opacity: 0; transition: opacity .3s, transform .4s var(--resorte); }
#nota.visible { opacity: 1; transform: translate(-50%, -50%); }

/* ---------- Franja de anuncios: abajo, 300 px (28 % de la pantalla) ---------- */
#franja { position: absolute; z-index: 1; left: 0; top: 780px; width: 1920px; height: 300px; overflow: hidden; background: #0b0b0c; }
.anuncio { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.anuncio.visible { opacity: 1; }
.anuncio img, .anuncio video { width: 100%; height: 100%; object-fit: cover; display: block; }

.anuncio.disponible { display: flex; align-items: center; justify-content: space-between; padding: 0 110px;
  background: #fff; color: #000; }
.disponible small { display: block; font-size: 26px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #6e6e73; margin-bottom: 10px; }
.disponible h3 { font-size: 96px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.disponible .tel { text-align: right; }
.disponible .tel b { display: block; font-size: 96px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }

.anuncio.texto { display: flex; flex-direction: column; justify-content: center; padding: 0 110px;
  background: var(--fondo, #1c1c1e); color: var(--tinta-anuncio, #fff); }
.anuncio.texto h3 { font-size: 92px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.anuncio.texto p { font-size: 38px; font-weight: 600; opacity: .85; margin-top: 18px; }

/* Primer dibujo: sin animaciones */
.quieto *, .quieto *::before { transition: none !important; }

/* En un navegador se marca tocando la pantalla: sin zoom de doble toque ni selección de texto */
html, body { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }