/* Web pública de los torneos. Oscura y de la liga: el acento (--liga) lo inyecta cada página
   con los colores que el organizador cargó. Pensada para el teléfono primero: casi todo el
   tráfico llega de un link pegado en un grupo de WhatsApp. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg: #0a0a0a;
  --bg-2: #121212;
  --card: #161616;
  --card-2: #1c1c1c;
  --linea: rgba(255,255,255,0.09);
  --txt: #f4f4f4;
  --txt-2: #a0a0a0;
  --txt-3: #6e6e6e;
  --ok: #3ddc84;
  --no: #ff6b6b;
  --emp: #ffcc4d;
  --r: 14px;
  --r-lg: 20px;
  /* Alto del encabezado pegajoso, para que las solapas sepan dónde pegarse. Es estable: lo
     manda el botón "Entrar" (40) contra el escudo (38) y el nombre de la liga + el del torneo
     (33, con line-height fijo y nowrap), más 20 de padding y 1 de borde. Si alguna de esas
     tres cosas cambia de alto, este número cambia con ella o asoma contenido por arriba de
     las solapas. */
  --head-h: 61px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* El recuadro gris que dibujan Safari y Chrome de Android al tocar un link. Se apaga porque
     abajo cada cosa tocable tiene su propio :active, que se ve mejor y es igual en los dos. */
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

/* ---------------------------------------------------------------- Encabezado */

.tw-head {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.tw-head-in {
  max-width: 940px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.tw-liga { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.tw-liga-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tw-liga-txt strong {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-liga-txt small {
  font-size: 12.5px; color: var(--txt-2); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-entrar {
  flex-shrink: 0; font-size: 13.5px; font-weight: 600; padding: 7px 15px;
  border: 1px solid var(--linea); border-radius: 999px; color: var(--txt-2);
  transition: border-color .15s, color .15s;
  display: inline-flex; align-items: center; min-height: 40px;
}

/* ---------------------------------------------------------------- Escudos */

.escudo {
  width: 34px; height: 34px; border-radius: 10px; object-fit: cover;
  background: var(--card-2); flex-shrink: 0; display: block;
}
.escudo-letra {
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: var(--liga-txt);
  background: linear-gradient(135deg, var(--liga) 0%, var(--liga-2) 100%);
  color: #fff;
}
.escudo-liga { width: 38px; height: 38px; border-radius: 11px; }
.escudo-sm { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.escudo-lg { width: 76px; height: 76px; border-radius: 20px; font-size: 32px; }

/* ---------------------------------------------------------------- Estructura */

.tw-main { max-width: 940px; margin: 0 auto; padding: 18px 16px 60px; }
.tw-vacio { text-align: center; padding: 70px 20px; color: var(--txt-2); }
.tw-vacio h1 { font-size: 30px; margin: 0 0 8px; color: var(--txt); }

.tw-btn {
  display: inline-block; margin-top: 14px; padding: 11px 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--liga), var(--liga-2));
}

/* ---------------------------------------------------------------- Portada del torneo */

.tw-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: 22px 20px;
  background: var(--card); border: 1px solid var(--linea);
  margin-bottom: 18px;
}
.tw-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 0% 0%, var(--liga) 0%, transparent 62%);
  opacity: .17; pointer-events: none;
}
.tw-hero-in { position: relative; display: flex; gap: 16px; align-items: center; }
.tw-hero h1 {
  margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
.tw-hero-meta {
  margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 6px;
}
.tw-chip {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.07); color: var(--txt-2);
}
.tw-chip-vivo { background: color-mix(in srgb, var(--liga) 22%, transparent); color: var(--liga-txt); }
.tw-hero-desc { position: relative; margin: 14px 0 0; color: var(--txt-2); font-size: 14.5px; }

/* ---------------------------------------------------------------- Solapas */

/* Las solapas y las zonas viajan juntas y quedan pegadas abajo del encabezado. En un fixture
   de diez fechas, cambiar de zona o ir a Goleadores obligaba a volver hasta arriba de todo.
   El padding de arriba lo compensa el margen negativo: el dibujo no se mueve, pero cuando se
   pega hay fondo opaco arriba y abajo y no se ve pasar el contenido por el costado. */
.tw-barra-nav {
  position: sticky; top: var(--head-h); z-index: 20;
  background: var(--bg); padding: 12px 0 14px; margin-top: -12px;
}
.tw-barra-nav .tw-tabs  { margin-bottom: 14px; }
.tw-barra-nav .tw-tabs:last-child,
.tw-barra-nav .tw-zonas { margin-bottom: 0; }

.tw-tabs {
  display: flex; gap: 5px; overflow-x: auto; margin-bottom: 14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tw-tabs::-webkit-scrollbar { display: none; }

/* El aviso de que hay más para el costado. Sin esto, en un teléfono de 360 la cuarta solapa
   quedaba cortada sin ninguna señal de que se pudiera deslizar, y nadie llegaba a Noticias.
   Es el ::after del scroller —o sea, un item flex más— pegado al borde de lo que se ve con
   `sticky`; el margen negativo hace que no ocupe lugar propio.
   Sólo se enciende cuando QUEDA algo a la derecha, y lo prende el script del pie
   (`data-mas`). Apagado por defecto: con las cuatro solapas justas, un degradado fijo le
   comía el final a "Noticias", que es lo contrario de lo que vino a resolver. Y sin script
   —o con JavaScript apagado— no se ve nada raro: queda como estaba. */
.tw-tabs::after, .tw-zonas::after {
  content: ''; position: sticky; right: 0; flex: 0 0 26px; margin-left: -26px;
  align-self: stretch; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bg));
  opacity: 0; transition: opacity .18s;
}
.tw-tabs[data-mas]::after, .tw-zonas[data-mas]::after { opacity: 1; }
.tw-tab {
  flex-shrink: 0; padding: 9px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  color: var(--txt-2); background: var(--card); border: 1px solid var(--linea);
  transition: all .15s;
  display: inline-flex; align-items: center; min-height: 42px;
}
.tw-tab.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--liga), var(--liga-2));
}

/* ---------------------------------------------------------------- Selector de zona */

/* Una tira que se desliza y no un bloque que envuelve: con ocho zonas eran cuatro filas de
   chips y la tabla arrancaba abajo del pliegue. */
.tw-zonas {
  display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tw-zonas::-webkit-scrollbar { display: none; }
.tw-zona {
  flex-shrink: 0; padding: 6px 13px; border-radius: 9px; font-size: 13px; font-weight: 600;
  background: var(--card); border: 1px solid var(--linea); color: var(--txt-2);
  display: inline-flex; align-items: center; min-height: 40px;
}
.tw-zona.on { color: var(--liga-txt); border-color: var(--liga-txt); }

/* ---------------------------------------------------------------- Bloques */

.tw-bloque {
  background: var(--card); border: 1px solid var(--linea);
  border-radius: var(--r); overflow: hidden; margin-bottom: 16px;
}
.tw-bloque-tit {
  padding: 13px 16px 11px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--txt-3);
  border-bottom: 1px solid var(--linea);
}

/* ---------------------------------------------------------------- Tabla de posiciones */

.tw-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tw-tabla th {
  padding: 9px 4px; font-size: 11px; font-weight: 700; color: var(--txt-3);
  text-transform: uppercase; letter-spacing: .05em; text-align: center;
  border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.tw-tabla th:nth-child(2) { text-align: left; padding-left: 0; }
.tw-tabla td { padding: 10px 4px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tw-tabla tr:last-child td { border-bottom: none; }
.tw-pos {
  width: 34px; font-weight: 700; font-size: 13px; color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}
/* La celda del equipo se queda con TODO el sobrante y el nombre se recorta solo. Antes el
   nombre tenía un `max-width` en vw, que recortaba "CLUB ATLÉTICO INDEPENDIENTE" dejando 34px
   de aire al lado: el ancho lo decidía la pantalla y no lo que había libre en la fila. */
.tw-eq { text-align: left !important; width: 100%; padding: 0 4px 0 0 !important; }
/* El link llena la celda entera. Era un blanco de 26px de alto —el escudo— adentro de una fila
   de 46, y es el toque principal de la página: de acá se entra al equipo. */
.tw-eq a, .tw-eq span.tw-eq-in {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 0;
}
.tw-eq-nom {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.tw-tabla .tw-pts { font-weight: 800; color: var(--liga-txt); font-variant-numeric: tabular-nums; }
.tw-tabla .num { color: var(--txt-2); font-variant-numeric: tabular-nums; }
/* Un respiro entre las columnas de números. Ahora que el nombre del equipo se queda con todo
   el sobrante, los números se apiñaban contra el borde derecho y "1 +1 3" se leía como uno
   solo. Los 6px salen del nombre, que igual ganó 66. */
.tw-tabla th:nth-child(n+3), .tw-tabla td.num, .tw-tabla td.tw-pts { padding-left: 7px; padding-right: 7px; }
.tw-fila-clasifica { background: color-mix(in srgb, var(--liga) 9%, transparent); }
.tw-fila-clasifica .tw-pos { color: var(--liga-txt); }
.tw-abandono { opacity: .45; }
.tw-abandono .tw-eq-nom { text-decoration: line-through; }
.tw-corte td { border-bottom: 1px solid var(--liga-txt) !important; }
.tw-tabla-pie {
  padding: 9px 16px; font-size: 11.5px; color: var(--txt-3);
  border-top: 1px solid var(--linea);
}

/* En pantallas chicas se esconden las columnas de relleno: quedan PJ, DG y PTS. */
@media (max-width: 560px) {
  .tw-tabla .op { display: none; }
}

/* ---------------------------------------------------------------- Partidos */

.tw-jornada {
  padding: 12px 16px 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--txt-3);
}
.tw-part {
  display: block; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background .12s;
}
.tw-part:last-child { border-bottom: none; }
.tw-part-cuando {
  font-size: 11.5px; color: var(--txt-3); margin-bottom: 7px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.tw-part-lado { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.tw-part-lado .nom {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-part-lado .gol {
  font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; min-width: 22px;
  text-align: right;
}
.tw-gana .nom, .tw-gana .gol { color: #fff; }
/* Pádel y tenis: games por set al lado del nombre (lib/torneos_sets.php). */
.tw-games { display: inline-flex; gap: 10px; margin-left: auto; margin-right: 14px; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--txt-3); }
.tw-game { min-width: 12px; text-align: center; }
.tw-game-gana { color: var(--txt-1, #fff); font-weight: 600; }
.tw-marcador-sets { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--txt-3); margin-top: 6px; white-space: nowrap; }
.tw-pierde .nom, .tw-pierde .gol { color: var(--txt-3); }
.tw-pierde .escudo { opacity: .55; }
.tw-part-pend .gol { color: var(--txt-3); font-size: 14px; font-weight: 600; }
.tw-eti {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2.5px 8px; border-radius: 999px;
}
.tw-eti-fin { background: rgba(255,255,255,0.08); color: var(--txt-2); }
.tw-eti-wo  { background: rgba(255,107,107,0.16); color: var(--no); }
.tw-eti-sus { background: rgba(255,204,77,0.16); color: var(--emp); }
.tw-eti-prog{ background: color-mix(in srgb, var(--liga) 20%, transparent); color: var(--liga-txt); }

/* ---------------------------------------------------------------- Goleadores */

.tw-gol-fila {
  display: flex; align-items: center; gap: 11px; padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tw-gol-fila:last-child { border-bottom: none; }
.tw-gol-pos {
  width: 24px; font-weight: 800; font-size: 13px; color: var(--txt-3);
  font-variant-numeric: tabular-nums; text-align: center; flex-shrink: 0;
}
.tw-gol-fila:nth-child(1) .tw-gol-pos, .tw-gol-fila:nth-child(2) .tw-gol-pos,
.tw-gol-fila:nth-child(3) .tw-gol-pos { color: var(--liga-txt); }
.tw-gol-datos { flex: 1; min-width: 0; }
.tw-gol-nom {
  font-weight: 600; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-gol-eq { font-size: 12.5px; color: var(--txt-3); }
.tw-gol-n {
  font-weight: 800; font-size: 19px; color: var(--liga-txt);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.tw-gol-n small { font-size: 11px; font-weight: 600; color: var(--txt-3); margin-left: 2px; }

/* ---------------------------------------------------------------- Noticias */

.tw-noti { padding: 15px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tw-noti:last-child { border-bottom: none; }
.tw-noti h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.tw-noti-cuando { font-size: 11.5px; color: var(--txt-3); margin-bottom: 8px; }
.tw-noti p { margin: 0; color: var(--txt-2); font-size: 14.5px; white-space: pre-line; }
.tw-noti img { border-radius: 11px; margin-top: 11px; display: block; }
.tw-fijada {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--liga-txt); margin-bottom: 3px;
}

/* ---------------------------------------------------------------- Plantel */

.tw-plantel { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px;
  background: rgba(255,255,255,0.05); }
.tw-jug {
  display: flex; align-items: center; gap: 11px; padding: 11px 16px; background: var(--card);
  /* La fila con ficha libre es un <button> (ver "Soy yo"): sin esto traería el borde, la fuente
     y el centrado del navegador y la lista se vería de dos formas distintas. */
  width: 100%; border: 0; margin: 0; text-align: left;
  font-family: inherit; font-size: inherit; color: inherit;
}
.tw-jug-n {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--card-2); font-weight: 800; font-size: 13px; color: var(--txt-2);
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.tw-jug-datos { min-width: 0; flex: 1; }
.tw-jug-nom { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-jug-pos { font-size: 12px; color: var(--txt-3); }
.tw-jug-goles { font-size: 12.5px; font-weight: 700; color: var(--liga-txt); flex-shrink: 0; }

/* ---------------------------------------------------------------- Listas de tarjetas */

.tw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tw-tarj {
  display: flex; align-items: center; gap: 13px; padding: 15px;
  background: var(--card); border: 1px solid var(--linea); border-radius: var(--r);
  transition: border-color .15s, transform .15s;
}
.tw-tarj-datos { min-width: 0; flex: 1; }
.tw-tarj-nom { font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; }
.tw-tarj-sub { font-size: 13px; color: var(--txt-3); margin-top: 1px; }

/* ---------------------------------------------------------------- Ficha del partido */

.tw-marcador {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 26px 16px 22px;
}
.tw-marcador-eq { text-align: center; min-width: 0; }
.tw-marcador-eq .escudo { margin: 0 auto 9px; }
.tw-marcador-eq .nom {
  font-weight: 700; font-size: 15px; line-height: 1.25;
  overflow-wrap: anywhere;
}
.tw-marcador-num {
  font-size: 40px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tw-marcador-vs { font-size: 15px; font-weight: 700; color: var(--txt-3); }
.tw-ev { display: flex; gap: 8px; padding: 9px 16px; font-size: 14px; align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,0.05); }
.tw-ev:last-child { border-bottom: none; }
.tw-ev-min { width: 40px; color: var(--txt-3); font-size: 12.5px; flex-shrink: 0;
  font-variant-numeric: tabular-nums; }
.tw-ev-eq { color: var(--txt-3); font-size: 12.5px; }
.tw-amarilla, .tw-roja {
  display: inline-block; width: 9px; height: 13px; border-radius: 2px; vertical-align: -1px;
  margin-right: 5px;
}
.tw-amarilla { background: var(--emp); }
.tw-roja { background: var(--no); }

/* ---------------------------------------------------------------- Pie */

.tw-pie { border-top: 1px solid var(--linea); margin-top: 30px; padding: 22px 16px 34px; }
.tw-pie-in {
  max-width: 940px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--txt-3);
}
.tw-pie a { color: var(--txt-2); font-weight: 600; }
.tw-pie-app {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea);
  display: inline-flex; align-items: center; min-height: 40px;
}

/* ---------------------------------------------------------------- Migas */

.tw-migas { font-size: 13px; color: var(--txt-3); margin-bottom: 12px; }
.tw-migas a { color: var(--txt-2); display: inline-block; padding: 6px 0; }

/* ---------------------------------------------------------------- Aviso */

.tw-aviso {
  padding: 15px 17px; border-radius: var(--r); font-size: 14.5px; color: var(--txt-2);
  background: var(--card); border: 1px solid var(--linea); margin-bottom: 16px;
}
.tw-aviso strong { color: var(--txt); }

/* ---------------------------------------------------------------- "Soy yo"

   El único bloque de la web pública que escribe algo en vez de sólo mostrar. Los nombres van
   como botones de 46px y no como una lista con un link chiquito al lado: esto se toca con el
   pulgar, parado al costado de la cancha. Por eso también está a la vista y no plegado. */

.tw-soy-baja {
  margin: 0; padding: 13px 16px 0;
  color: var(--txt-2); font-size: 14px; line-height: 1.5;
}
.tw-jug-libre { cursor: pointer; min-height: 52px; transition: background .15s; }
/* El "Soy yo" de la derecha es lo único que distingue una fila que se puede tocar de una que
   no. Va tenue: la lista se lee como plantel, no como una botonera. */
.tw-jug-soy {
  flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--linea); color: var(--txt-3);
}
.tw-jug-libre .tw-jug-soy { color: var(--liga-txt); border-color: color-mix(in srgb, var(--liga) 35%, transparent); }
.tw-jug-pedida { opacity: .6; }
.tw-soy-msg {
  margin: 0; padding: 0 16px 16px;
  color: var(--txt-2); font-size: 14px; line-height: 1.5;
}
.tw-soy-bien { color: var(--ok); }
.tw-soy-mal  { color: var(--no); }

/* ---------------------------------------------------------------- Toque y mouse

   Todo lo de arriba se dibuja igual en el teléfono y en la compu; lo que cambia es cómo
   responde. El `:hover` se queda PEGADO después de tocar en un teléfono —no hay nada que
   saque el puntero de encima—, así que va encerrado en una consulta que pregunta si hay
   mouse de verdad. Y lo que sí tiene que haber en el teléfono es `:active`: sin eso, tocar
   una fila de partido no devuelve nada hasta que carga la página siguiente. */

@media (hover: hover) and (pointer: fine) {
  .tw-entrar:hover  { border-color: var(--liga-txt); color: var(--liga-txt); }
  .tw-tab:hover     { color: var(--txt); }
  .tw-part:hover    { background: var(--card-2); }
  .tw-tarj:hover    { border-color: var(--liga-txt); transform: translateY(-1px); }
  .tw-pie-app:hover { border-color: var(--liga-txt); color: var(--liga-txt) !important; }
  .tw-migas a:hover { color: var(--liga-txt); }
  .tw-eq a:hover    { color: var(--liga-txt); }
  .tw-jug-libre:hover { background: var(--card-2); }
}

.tw-part:active        { background: var(--card-2); }
.tw-tarj:active        { background: var(--card-2); border-color: var(--liga-txt); }
.tw-tab:active         { background: var(--card-2); }
.tw-tab.on:active      { opacity: .85; }
.tw-zona:active        { background: var(--card-2); }
.tw-eq a:active        { color: var(--liga-txt); }
.tw-entrar:active      { border-color: var(--liga-txt); color: var(--liga-txt); }
.tw-pie-app:active     { border-color: var(--liga-txt); color: var(--liga-txt); }
.tw-migas a:active     { color: var(--liga-txt); }
.tw-btn:active         { opacity: .85; }
.tw-jug-libre:active   { background: var(--card-2); }
.tw-marcador-eq:active { opacity: .65; }

/* ---------------------------------------------------------------- Teléfono angosto */

/* Con el escudo de 76px al lado, el título del torneo se partía en dos líneas. */
@media (max-width: 400px) {
  .tw-hero .escudo-lg { width: 62px; height: 62px; border-radius: 17px; font-size: 26px; }
  .tw-hero h1 { font-size: 23px; }
  .tw-hero-in { gap: 13px; }
}

@media (min-width: 640px) {
  .tw-hero { padding: 28px 26px; }
  .tw-hero h1 { font-size: 31px; }
  .tw-main { padding: 24px 20px 70px; }
  .tw-marcador-num { font-size: 52px; }
  .tw-marcador-eq .nom { font-size: 17px; }
}