/* SEASONS — hoja de estilos del tema.
 *
 * Parte de los tokens y las clases base de 03-diseno/dist/liga-base.css y
 * anade los componentes que en el diseno venian como estilos en linea, porque
 * aquel HTML lo generaba un script y aqui las plantillas se escriben a mano.
 * Los valores (tamanos, colores, espaciados) son los mismos del diseno.
 *
 * Orden: tokens · base · maquetacion · componentes · movil.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

:root {
	--bg:#0A0E1A; --s1:#121829; --s2:#1A2238; --s3:#222B45; --line:#2A3452;
	--tx:#F2F4F8; --tx2:#9AA3B8; --tx3:#6B7590;
	--gold:#F0B43C; --marca:#F2784B; --season:#F2784B; --kick:#53FC18; --win:#4ADE80; --loss:#F87171;
	--silver:#C9D1DC; --bronze:#CD8B5A; --teal:#5EEAD4;
	--linea-suave:#1C2338;
	--negro:#070A13;
	--borde-negro:#151B2E;
	--prism: linear-gradient(90deg,#5EEAD4,#A78BFA,#F472B6);
	/* Chakra Petch en toda la web: titulares y texto corrido. */
	--display:'Chakra Petch',system-ui,-apple-system,'Segoe UI',sans-serif;
	--body:'Chakra Petch',system-ui,-apple-system,'Segoe UI',sans-serif;
	/* Las cifras son la unica excepcion, y por un motivo concreto: en una tabla
	   de clasificacion los numeros tienen que ocupar todos lo mismo o las
	   columnas bailan al cambiar de fila. Inter trae cifras tabulares de serie;
	   una tipografia de display no tiene por que traerlas. */
	--cifras:'Inter',system-ui,sans-serif;
	--ancho:1200px;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

* { box-sizing:border-box; }

/* El atributo hidden lo pone el navegador como display:none en su hoja de
   estilos, que pierde contra cualquier clase nuestra. Sin este !important, un
   .live oculto seguiria viendose y todos los jugadores aparecerian siempre
   "en directo". */
[hidden] { display:none !important; }

body {
	margin:0; background:var(--bg); color:var(--tx);
	font-family:var(--body); font-size:15px; line-height:1.58;
	font-weight:400; letter-spacing:.005em;
	-webkit-font-smoothing:antialiased;
}

a { color:var(--gold); text-decoration:none; }
a:hover { color:#FFD27A; }

h1,h2,h3,h4 {
	margin:0; font-family:var(--display); font-weight:700;
	text-transform:uppercase; letter-spacing:.04em; line-height:1.05;
}

p { margin:0; }
img { max-width:100%; height:auto; }

/* El foco tiene que verse siempre: es la unica pista de donde esta quien
   navega con el teclado. */
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

.salto-contenido {
	position:absolute; left:-9999px; top:0; z-index:100;
	background:var(--gold); color:#1A1204; padding:12px 20px;
	font-family:var(--display); font-weight:700; text-transform:uppercase;
}
.salto-contenido:focus { left:0; color:#1A1204; }

/* Cualquier salto a un ancla (#articulo) deja sitio a la cabecera fija. */
html { scroll-padding-top:100px; }

.solo-lectores {
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------------ */
/* Maquetacion                                                         */
/* ------------------------------------------------------------------ */

.wrap { width:var(--ancho); max-width:calc(100% - 32px); margin:0 auto; }

.hexbg {
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'56'%20height%3D'97'%20viewBox%3D'0%200%2056%2097'%3E%3Cpath%20d%3D'M28%200%20L56%2016%20L56%2048%20L28%2064%20L0%2048%20L0%2016%20Z%20M28%2064%20L28%2097%20M0%2081%20L28%2097%20L56%2081'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-opacity%3D'0.045'%20stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E");
	background-size:56px 97px;
}

.num { font-family:var(--cifras); font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; font-weight:700; letter-spacing:-.01em; }
.muted { color:var(--tx2); }
.dim { color:var(--tx3); }

.eyebrow {
	font-family:var(--display); font-size:13px; font-weight:600;
	letter-spacing:.18em; text-transform:uppercase; color:var(--season);
}

/* Forma unica de toda la web: rectangulo con la esquina superior derecha y la
   inferior izquierda cortadas a bisel, y ninguna esquina redondeada. Las
   superficies grandes llevan bisel de 16px y las compactas de 10px. Los
   controles (botones, pildoras, campos) van a 90 grados y con trazo; las
   superficies, con relleno y sin trazo. */
.cut, .card,
.tarjeta-club, .ficha-jugador, .clave, .panel-formato,
.premio-total, .premio-bonus, .jugador { clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); }
/* Contorno de una caja biselada. Ni `border` ni `box-shadow` sirven: los dos
   dibujan el rectangulo entero y el clip-path se los come justo en las dos
   esquinas cortadas, asi que el trazo se queda abierto y parece un fallo.
   `drop-shadow` se aplica despues del recorte y sigue la silueta de verdad,
   de modo que cuatro sombras de 1px en cruz dibujan un contorno completo que
   respeta el bisel. */
.contorno {
	filter:
		drop-shadow(1px 0 0 var(--contorno,var(--line)))
		drop-shadow(-1px 0 0 var(--contorno,var(--line)))
		drop-shadow(0 1px 0 var(--contorno,var(--line)))
		drop-shadow(0 -1px 0 var(--contorno,var(--line)));
}

.cut-s,
.tarjeta-estadistica, .tira-ronda, .participante, .sponsor.grande, .faq, .pie-estado { clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); }

.card { background:var(--s1); }
.hex { clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }

.r { text-align:right !important; }
.c { text-align:center !important; }

.seccion { padding-top:72px; }
.seccion-primera { padding-top:64px; }

/* Relleno de las superficies: tres medidas y ninguna suelta por ahi. Antes
   cada plantilla ponia el suyo a ojo y dos tarjetas iguales respiraban
   distinto segun la pagina. */
.relleno { padding:28px; }
.relleno-m { padding:20px; }
.relleno-p { padding:16px; }
.separado { margin-bottom:32px; }
/* Las tablas van pegadas al borde de su caja, con un respiro arriba. */
.caja-tabla { padding:8px 16px 0; }

/* Filas de datos dentro de una tarjeta. */
.fila-datos { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.fila-canal { display:flex; align-items:center; gap:12px; }
.columna-datos { display:flex; flex-direction:column; gap:8px; }

.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.sec-head h2 { font-size:28px; }
.sec-titulo { display:flex; flex-direction:column; gap:8px; }

.more {
	font-family:var(--display); font-weight:600; font-size:14px;
	letter-spacing:.12em; text-transform:uppercase;
	display:inline-flex; align-items:center; gap:8px;
}

/* ------------------------------------------------------------------ */
/* Botones, etiquetas y estado de directo                              */
/* ------------------------------------------------------------------ */

.btn {
	display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 22px;
	font-family:var(--display); font-weight:700; font-size:15px;
	letter-spacing:.1em; text-transform:uppercase;
}
.btn-gold { background:var(--gold); color:#1A1204; }
.btn-gold:hover { color:#1A1204; background:#FFC65A; }
.btn-line { border:1px solid var(--line); color:var(--tx); }
.btn-line:hover { color:var(--tx); border-color:var(--tx2); }
.btn-kick { background:var(--kick); color:#07130A; }
.btn-kick:hover { color:#07130A; }
.btn-twitch { background:#A970FF; color:#0C0A16; }
.btn-twitch:hover { color:#0C0A16; }
.btn-discord { background:#5865F2; color:#fff; }
.btn-discord:hover { color:#fff; background:#6D78F5; }
.btn-discord svg { fill:currentColor; }
.btn-sm { height:36px; padding:0 14px; font-size:13px; }

/* El verde de Kick nunca va solo: siempre acompanado del texto, porque el
   color por si mismo no es un indicador accesible. */
.live {
	white-space:nowrap; display:inline-flex; align-items:center; gap:7px;
	font-family:var(--display); font-weight:700; font-size:12px;
	letter-spacing:.14em; color:var(--kick); text-transform:uppercase;
}
.live i {
	flex:none; width:8px; height:8px; border-radius:50%; background:var(--kick);
	box-shadow:0 0 0 0 rgba(83,252,24,.6); animation:pulso 1.6s infinite;
	/* Centrado con la caja de la linea queda medio pixel por debajo del centro
	   de las mayusculas de Chakra Petch, y al redondear a pixel se nota. Se sube
	   en em para que valga en todos los tamanos de la etiqueta. */
	translate:0 -.07em;
}
.live-pill { padding:5px 10px; background:rgba(83,252,24,.1); border:1px solid rgba(83,252,24,.35); }
a.live-pill { color:var(--kick); transition:background .18s ease, border-color .18s ease; }
a.live-pill:hover { color:var(--kick); background:rgba(83,252,24,.2); border-color:rgba(83,252,24,.6); }

@keyframes pulso {
	0% { box-shadow:0 0 0 0 rgba(83,252,24,.55); }
	70% { box-shadow:0 0 0 8px rgba(83,252,24,0); }
	100% { box-shadow:0 0 0 0 rgba(83,252,24,0); }
}

/* Aparicion al entrar en pantalla. La clase la pone el JavaScript en el <html>
   y las cajas se marcan tambien desde ahi: sin JavaScript no hay nada oculto,
   la pagina llega con todo en su sitio. Se anima `translate` y no `transform`
   para no pisar los desplazamientos que algunas tarjetas hacen al pasar el
   raton. */
.con-animaciones .aparece { opacity:0; translate:0 12px; }
.con-animaciones .aparece.a-la-vista {
	opacity:1; translate:0 0;
	transition:opacity .55s ease, translate .55s cubic-bezier(.22,.61,.36,1);
}
.con-animaciones .barra-h-relleno { transition:width .9s cubic-bezier(.22,.61,.36,1); }
.con-animaciones .barra-relleno { transition:height .9s cubic-bezier(.22,.61,.36,1); }

/* Los tramos de la barra de rondas se llenan de izquierda a derecha. */
.con-animaciones .crece-x { transform:scaleX(0); transform-origin:left; }
.con-animaciones .crece-x.a-la-vista { transform:scaleX(1); transition:transform .5s cubic-bezier(.22,.61,.36,1); }

/* Las filas de una tabla y las lineas de un titular entran mas rapido: son
   muchas y con el tiempo de una tarjeta se harian pesadas. */
.con-animaciones .hero-texto > .aparece,
.con-animaciones .pagina-titulos > .aparece,
.con-animaciones .club-hero-textos > .aparece { translate:0 8px; }
.con-animaciones .hero-texto > .aparece.a-la-vista,
.con-animaciones .pagina-titulos > .aparece.a-la-vista,
.con-animaciones .club-hero-textos > .aparece.a-la-vista {
	translate:0 0; transition:opacity .38s ease, translate .38s cubic-bezier(.22,.61,.36,1);
}

/* El contador de directos avisa cuando cambia: alguien acaba de ponerse o de
   quitarse, y es lo unico de la pagina que cambia solo. */
@keyframes latido-cifra {
	0% { transform:scale(1); }
	35% { transform:scale(1.18); }
	100% { transform:scale(1); }
}
.cifra-cambiada { display:inline-block; animation:latido-cifra .5s ease; }

/* Quien haya pedido menos animacion en su sistema no quiere un punto
   latiendo en cada fila de la tabla. */
@media (prefers-reduced-motion:reduce) {
	.live i { animation:none; }
	.ronda-relleno { transition:none; animation:none; }
	.menu-principal a, .menu-principal a::after { transition:none; }
	* { scroll-behavior:auto !important; }
}

.tag {
	display:inline-flex; align-items:center; height:24px; padding:0 9px;
	font-family:var(--display); font-weight:600; font-size:12px;
	letter-spacing:.1em; text-transform:uppercase; background:var(--s2); color:var(--tx2);
}

.pill {
	white-space:nowrap; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px;
	border:1px solid var(--line);
	font-family:var(--display); font-weight:600; font-size:13px;
	letter-spacing:.1em; text-transform:uppercase; color:var(--tx2);
}
.pill.on { background:var(--s2); color:var(--tx); border-color:var(--season); }

.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }
.tabs a {
	padding:16px 20px 18px; font-family:var(--display); font-weight:600; font-size:15px;
	letter-spacing:.1em; text-transform:uppercase; color:var(--tx2);
	border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs a.on { color:var(--tx); border-color:var(--season); }
/* Las pestañas de partida guardan con la tabla la misma distancia que las
   pestañas de la cabecera de pagina guardan con su contenido, que es el paso
   de seccion de toda la web. Pegadas, ademas, la primera fila parece formar
   parte de la pestaña. */
.tabs-partidas { margin:48px 0 64px; }

/* ------------------------------------------------------------------ */
/* Tablas                                                              */
/* ------------------------------------------------------------------ */

.tbl { width:100%; border-collapse:collapse; font-size:15px; }
/* Las cabeceras y las filas respiran por encima y por debajo de su línea:
   pegadas al borde, la tabla se lee como un bloque macizo. */
.tbl th {
	text-align:left; font-family:var(--display); font-weight:600; font-size:12px;
	letter-spacing:.14em; text-transform:uppercase; color:var(--tx3);
	padding:6px 14px 16px; border-bottom:1px solid var(--line);
}
.tbl td { padding:18px 14px; border-bottom:1px solid var(--linea-suave); vertical-align:middle; }
.tbl tr.top td { background:rgba(240,180,60,.05); }

/* La caja de la tabla solo se desplaza a lo ancho, y solo si hace falta. En
   vertical se recorta: si no, cualquier cosa que asome un pixel por abajo —una
   fila que entra animada, un globo— saca una barra de desplazamiento de la
   nada en una tabla que cabe entera. */
.tabla-scroll { overflow-x:auto; overflow-y:hidden; }

/* Cuando de verdad hace falta desplazar algo a lo ancho, la barra va fina y
   del color de la casa, no la barra gorda gris del sistema. */
.tabla-scroll, .filtros, .filtros-grupo, .tabs {
	scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.tabla-scroll::-webkit-scrollbar, .filtros::-webkit-scrollbar,
.filtros-grupo::-webkit-scrollbar, .tabs::-webkit-scrollbar { height:6px; width:6px; }
.tabla-scroll::-webkit-scrollbar-thumb, .filtros::-webkit-scrollbar-thumb,
.filtros-grupo::-webkit-scrollbar-thumb, .tabs::-webkit-scrollbar-thumb { background:var(--line); }
.tabla-scroll::-webkit-scrollbar-track, .filtros::-webkit-scrollbar-track,
.filtros-grupo::-webkit-scrollbar-track, .tabs::-webkit-scrollbar-track { background:transparent; }

/* inline-flex y no flex: en bloque ocupaba toda la celda y las marcas se
   pegaban a la izquierda aunque la columna estuviera alineada a la derecha,
   asi que la columna «Resultado» parecia vacia. */
.form { display:inline-flex; gap:4px; vertical-align:middle; }
/* Solo las casillas, no todo lo que haya dentro: con «.form span» el globo
   heredaba 22px de ancho y el texto se salia de su propia caja. */
.form > span, .form > a {
	width:22px; height:22px; display:flex; align-items:center; justify-content:center;
	font-family:var(--display); font-weight:700; font-size:11px;
}
.form > a { transition:filter .18s ease; }
.form > a:hover { filter:brightness(1.35); }
.fv { background:rgba(74,222,128,.15); color:var(--win); }
.fd { background:rgba(248,113,113,.14); color:var(--loss); }
.fe { background:var(--s2); color:var(--tx3); }

/* Suba, baje o se mantenga, el indicador ocupa lo mismo y va centrado en su
   columna: si no, la flecha con su cifra desplazaba la fila respecto a las que
   solo llevan un guion. */
/* Un «3-0» no se parte en dos lineas. */
.celda-vd { white-space:nowrap; }

.celda-cambio { text-align:center; }
.cambio, .celda-cambio > .dim {
	display:inline-flex; align-items:center; justify-content:center; gap:2px;
	min-width:34px; font-size:13px; font-variant-numeric:tabular-nums;
}
.cambio-sube { color:var(--win); }
.cambio-baja { color:var(--loss); }

/* ------------------------------------------------------------------ */
/* Escudo hexagonal de club y avatar de jugador                        */
/* ------------------------------------------------------------------ */

.escudo {
	display:flex; align-items:center; justify-content:center; flex:none;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:var(--color-club,var(--gold));
}
.escudo-dentro {
	display:flex; align-items:center; justify-content:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:linear-gradient(160deg,color-mix(in srgb,var(--color-club,var(--gold)) 33%,transparent),#0A0E1A 70%);
	font-family:var(--display); font-weight:700; letter-spacing:.04em; color:#fff;
	overflow:hidden;
}
.escudo-dentro img { width:100%; height:100%; object-fit:cover; }

/* Los clubes no llevan marco: se ve su logotipo tal cual. Un logo cuadrado
   dentro de un hexagono perderia las cuatro esquinas, y ademas el escudo es
   suyo, no nuestro. El hexagono se queda para los jugadores. */
.escudo-club, .escudo-club .escudo-dentro { clip-path:none; background:none; }
.escudo-club .escudo-dentro { width:100%; height:100%; }
.escudo-club .escudo-dentro img { object-fit:contain; }

/* Mientras un club no manda su logotipo, una chapa con sus iniciales: el
   mismo bisel que el resto de las superficies de la web. */
.escudo-club.sin-logo .escudo-dentro {
	background:linear-gradient(160deg,color-mix(in srgb,var(--color-club) 88%,#fff 12%),color-mix(in srgb,var(--color-club) 46%,var(--bg)));
	clip-path:polygon(0 0,calc(100% - 22%) 0,100% 22%,100% 100%,22% 100%,0 calc(100% - 22%));
	color:#0A0E1A;
}

/* Tamanos que usa el diseno, cada uno con su medida interior y su tipo. */
.escudo-30 { width:30px; height:33px; } .escudo-30 .escudo-dentro { width:26px; height:29px; font-size:9px; }
.escudo-40 { width:40px; height:44px; } .escudo-40 .escudo-dentro { width:36px; height:40px; font-size:12px; }
.escudo-48 { width:48px; height:53px; } .escudo-48 .escudo-dentro { width:44px; height:49px; font-size:14px; }
.escudo-64 { width:64px; height:70px; } .escudo-64 .escudo-dentro { width:60px; height:66px; font-size:19px; }
.escudo-72 { width:72px; height:79px; } .escudo-72 .escudo-dentro { width:68px; height:75px; font-size:24px; }

/* El avatar del jugador usa el mismo hexagono pero con el fondo al reves:
   oscuro dentro y las iniciales en el color del club. */
.avatar .escudo-dentro {
	background:linear-gradient(200deg,#2A3452,#121829);
	color:var(--color-club,var(--gold));
}

/* ------------------------------------------------------------------ */
/* Cabecera                                                            */
/* ------------------------------------------------------------------ */

.barra-sponsors {
	background:var(--negro); border-bottom:1px solid var(--borde-negro); min-height:34px;
	display:flex; align-items:center; justify-content:center; gap:14px;
	font-size:12px; color:var(--tx3); letter-spacing:.06em; padding:6px 16px;
	flex-wrap:wrap; text-align:center;
}

.slot {
	display:flex; align-items:center; justify-content:center;
	border:1px dashed #3A4566; color:var(--tx3);
	font-family:var(--display); font-weight:600; letter-spacing:.12em;
	text-transform:uppercase; text-align:center;
}
.barra-sponsors .slot { height:20px; padding:0 10px; font-size:10px; }

.cabecera {
	height:76px; display:flex; align-items:center;
	background:rgba(18,24,41,.96); border-bottom:1px solid var(--line);
	position:sticky; top:0; z-index:30;
}
.cabecera-interior {
	width:1320px; max-width:calc(100% - 32px); margin:0 auto;
	display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.marca { display:flex; align-items:center; gap:16px; color:var(--tx); }
.marca:hover { color:var(--tx); }
/* Marca LECTFT: las barras siempre en su naranja (no cambia con la estacion de
   la temporada); las letras toman el color del texto. */
.logo { display:block; flex:none; }
.logo-barras { fill:var(--marca); }
.logo-letras { fill:currentColor; }
/* En la barra de navegacion el logo va entero en blanco. */
.cabecera .logo-barras { fill:currentColor; }
.logo-claro { fill:currentColor; }
.logo-acento { fill:var(--marca); }
.marca-bajada {
	font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.08em; line-height:1.3;
	color:var(--tx2); white-space:nowrap; padding-left:16px; border-left:1px solid var(--line);
}
/* En la barra, el logo lleva las letras abajo: la linea separadora ocupa todo
   el alto del logo y el texto se apoya abajo, con su ultima linea sobre la
   misma base que «LECTFT». */
.cabecera .marca { align-items:stretch; }
.cabecera .marca-bajada {
	display:flex; flex-direction:column; justify-content:flex-end; line-height:1.25;
	/* El texto baja 3 px para que su base coincida con la del logo; la linea se
	   dibuja con un fondo 3 px mas corto para que no sobresalga por abajo. */
	margin-bottom:-3px; border-left:0;
	background:linear-gradient(var(--line),var(--line)) left top / 1px calc(100% - 3px) no-repeat;
}
/* «Liga Hispana de Clubes de TFT» ocupa el doble que el subtitulo anterior. En
   la cabecera solo cabe con ventana ancha: por debajo, el menu queda apretado
   y basta con el nombre. En el pie siempre cabe. */
@media (max-width:1279px) {
	.cabecera .marca-bajada { display:none; }
}

/* Todas las listas de navegacion pierden sus puntos y su sangria: son listas
   por semantica, no por aspecto. */
.lista-menu { list-style:none; margin:0; padding:0; }
.lista-menu li { list-style:none; }

.menu-principal { display:flex; }
.menu-principal .lista-menu { display:flex; gap:4px; align-items:stretch; }
.menu-principal li { display:flex; }
.menu-principal a {
	/* El subrayado se dibuja con ::after y no con box-shadow para poder
	   meterlo dentro del relleno: con box-shadow ocupaba todo el <a> y
	   sobresalia por los lados del texto. */
	--sangria-linea:9px;
	position:relative; display:flex; align-items:center; padding:0 var(--sangria-linea);
	font-family:var(--display); font-weight:600; font-size:13px; white-space:nowrap;
	letter-spacing:.06em; text-transform:uppercase; color:var(--tx2);
	transition:color .2s ease;
}
.menu-principal a:hover { color:var(--tx); }

.menu-principal a::after {
	content:""; position:absolute; bottom:0;
	left:var(--sangria-linea); right:var(--sangria-linea); height:2px;
	background:var(--season);
	/* Entra creciendo desde la izquierda y sale retirandose por la derecha:
	   el origen cambia con el hover, asi que la linea siempre viaja en el
	   mismo sentido en vez de deshacer el camino. */
	transform:scaleX(0); transform-origin:right center;
	transition:transform .26s cubic-bezier(.22,.61,.36,1);
	pointer-events:none;
}
.menu-principal a:hover::after,
.menu-principal a:focus-visible::after { transform:scaleX(1); transform-origin:left center; }

/* El apartado en el que estas ya lleva su linea puesta: no se anima al pasar
   por encima porque no hay nada que anunciar, ya estas ahi. */
.menu-principal .current-menu-item > a,
.menu-principal .current_page_item > a,
.menu-principal a[aria-current="page"] { color:var(--tx); }
.menu-principal .current-menu-item > a::after,
.menu-principal .current_page_item > a::after,
.menu-principal a[aria-current="page"]::after { transform:scaleX(1); transition:none; }

.cabecera-estado { display:flex; align-items:center; gap:12px; }
/* Las dos pastillas de la cabecera miden lo mismo: una sale de .pill y la
   otra de .live-pill, que se dimensiona con relleno porque en las miniaturas
   tiene que ser diminuta. Aqui se igualan a la altura de .pill. */
.cabecera-estado .live-pill { height:36px; padding:0 13px; }

.abrir-menu { display:none; width:44px; height:44px; align-items:center; justify-content:center; color:var(--tx); background:none; border:0; cursor:pointer; }
/* El foco lo recibe la casilla, que esta oculta: se pinta sobre el boton. */
.conmutador-menu:focus-visible ~ .cabecera-estado + .abrir-menu,
.conmutador-menu:focus-visible + .menu-principal ~ .abrir-menu { outline:2px solid var(--gold); outline-offset:-2px; }

/* ------------------------------------------------------------------ */
/* Portada · hero                                                      */
/* ------------------------------------------------------------------ */

/* `isolation` encierra el apilado del hero: con el tablero en 3D y una capa
   propia de composicion, sin esto hay navegadores que lo pintan por encima de
   la cabecera pegajosa y la cabecera desaparece. */
.hero { position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line); }
/* El fondo del hero es una imagen: un suelo de hexagonos en perspectiva, con
   los dos degradados que hacen falta para que el texto se lea encima. Es solo
   una imagen de fondo, sin capas ni transformaciones, asi que no puede volver
   a ponerse por delante de la cabecera como hacia el tablero dibujado. */
.hero {
	/* Fondo anterior, por si hay que volver: ../img/arena-hexagonal.webp (y -1200 en movil). */
	/* El nombre lleva el año a proposito: al cambiar la ilustracion hay que
	   cambiar el nombre, o los navegadores siguen enseñando la vieja durante
	   los 30 dias que nginx le pone de cache. */
	--arena:url('../img/arena-lectft-2026.webp');
	background-color:var(--bg);
	background-image:
		linear-gradient(100deg,rgba(10,14,26,.9) 0 24%,rgba(10,14,26,.55) 50%,rgba(10,14,26,.08) 82%),
		linear-gradient(to bottom,rgba(10,14,26,.35),rgba(10,14,26,0) 40%,rgba(10,14,26,.55)),
		var(--arena);
	background-size:cover;
	/* Este fondo es oscuro de por si: el velo es mas ligero que con el anterior
	   para que se vean el podio y los estandartes de la derecha. */
	background-position:center,center,center 35%;
	background-repeat:no-repeat;
}
.hero-halo {
	position:absolute; right:-180px; top:-260px; width:760px; height:760px;
	background:radial-gradient(circle,color-mix(in oklab,var(--season) 20%,transparent),transparent 62%);
	pointer-events:none;
}
.hero-interior {
	position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 440px;
	gap:64px; padding:72px 0 80px; align-items:center;
}
.hero-texto { display:flex; flex-direction:column; gap:28px; }
/* Una frase por linea. La mas larga, «Un club ganador», mide 681 px a 71 px
   de cuerpo y la columna del titular tiene 696: por encima de eso salta. Entre
   1101 y 1232 px de ventana la columna encoge, y el cuerpo encoge con ella. */
.hero-texto h1 { font-size:clamp(56px, calc(10.3vw - 57px), 69px); letter-spacing:.02em; }
.hero-texto h1 .destacado { color:var(--gold); }
.hero-entradilla { font-size:18px; max-width:520px; }
.hero-botones { display:flex; gap:12px; flex-wrap:wrap; }

/* Progreso de la temporada.
   Cada ronda es un tramo con su número debajo: se ve de un vistazo cuántas
   van, en cuál estamos y cuántas quedan. Una barra lisa solo daba un
   porcentaje, que aquí no dice nada. */
.progreso { display:flex; flex-direction:column; gap:14px; max-width:520px; margin-top:12px; }

.progreso-cabecera { display:flex; align-items:baseline; gap:8px; }
.progreso-titulo {
	font-family:var(--display); font-weight:700; font-size:16px;
	letter-spacing:.1em; text-transform:uppercase;
}
.progreso-total { font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.1em; }
.progreso-restantes {
	margin-left:auto; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
	font-family:var(--display); font-weight:600; color:var(--tx3);
}

.progreso-rondas { list-style:none; margin:0; padding:0; display:flex; gap:6px; }
.ronda-tramo { flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; }
.ronda-marca {
	width:100%; height:5px; background:var(--s3);
	transition:background .2s ease, box-shadow .2s ease;
}
.ronda-numero { font-size:11px; color:var(--tx3); letter-spacing:.04em; }

.ronda-hecha .ronda-marca { background:color-mix(in srgb,var(--season) 62%,transparent); }
.ronda-hecha .ronda-numero { color:var(--tx2); }

/* La ronda en curso: más alta, a todo color y con un halo que la separa de
   las ya jugadas sin necesidad de leer el número. */
.ronda-actual .ronda-marca {
	height:7px; margin-top:-1px; background:var(--s3);
	box-shadow:0 0 0 3px color-mix(in srgb,var(--season) 18%,transparent);
	overflow:hidden;
}
.ronda-actual .ronda-numero { color:var(--tx); font-weight:700; }

/* La jornada que viene se va llenando con lo que falta para empezar: el tramo
   es el camino de una jornada a la siguiente, no un adorno. */
.ronda-relleno {
	display:block; height:100%; width:0; background:var(--season);
	transition:width 1s linear;
}
/* Mientras se juega, el tramo esta lleno y respira. Nada de parpadeos: solo
   un halo que entra y sale, que la portada se queda abierta horas. */
.ronda-jugando .ronda-relleno { width:100% !important; animation:destello-jornada 2.6s ease-in-out infinite; }
@keyframes destello-jornada {
	0%, 100% { box-shadow:0 0 0 0 color-mix(in srgb,var(--season) 45%,transparent); filter:brightness(1); }
	50% { box-shadow:0 0 12px 2px color-mix(in srgb,var(--season) 55%,transparent); filter:brightness(1.18); }
}

/* Por jornadas el tramo lleva mas letra debajo: el numero, el dia y las rondas
   que se juegan esa tarde. Son cuatro tramos, no siete, asi que hay sitio. */
.progreso-jornadas { gap:10px; }
.progreso-jornadas .ronda-tramo { gap:9px; }
/* Cada tramo lleva a su jornada en el calendario. */
.tramo-enlace {
	display:flex; flex-direction:column; align-items:center; gap:9px; width:100%;
	color:inherit; transition:opacity .18s ease;
}
.tramo-enlace:hover, .tramo-enlace:focus-visible { color:inherit; opacity:.75; }
.tramo-enlace:focus-visible { outline:2px solid var(--season); outline-offset:4px; }
.tramo-jornada { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; min-width:0; }
.tramo-jornada .ronda-numero { font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.1em; }
.tramo-dia { font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.tramo-rondas { font-size:11px; letter-spacing:.04em; }
.ronda-hecha .tramo-dia, .ronda-actual .tramo-dia { color:var(--tx2); }
/* Lo que falta para la siguiente jornada, en el color de la liga. */
.progreso-restantes[data-cuenta-atras], .progreso-ahora { color:var(--season); }

/* Tarjeta de la próxima jornada.
   Sustituye al marcador en vivo que habia aqui: los resultados se meten al
   terminar la jornada, no partida a partida, asi que un marcador «en directo»
   en portada estaria mintiendo casi siempre. Lo que si es cierto a todas horas
   es que se juega y cuando. */
.jornada { padding:0; display:flex; flex-direction:column; overflow:hidden; }
.jornada-cabecera {
	display:flex; align-items:baseline; justify-content:space-between; gap:16px;
	padding:22px 24px 20px; border-bottom:1px solid var(--line);
}
.jornada-fecha { display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--tx2); }
.jornada-ronda {
	font-family:var(--display); font-weight:700; font-size:14px;
	letter-spacing:.1em; text-transform:uppercase; color:var(--tx2);
}
/* Cada enfrentamiento lleva su dia y su hora en la misma linea: con una
   cabecera aparte por cada tarde, la tarjeta se iba de alto. */
.jornada-cuando {
	display:flex; align-items:center; gap:7px; white-space:nowrap;
	font-family:var(--display); font-weight:600; font-size:11.5px;
	letter-spacing:.12em; text-transform:uppercase; color:var(--tx3);
}
.jornada-hoy { height:20px; font-size:10.5px; background:var(--s3); color:var(--tx); }
.jornada-pronto { background:var(--s2); color:var(--tx3); }
/* Un enfrentamiento que se esta jugando: naranja de la liga, sin verde de Kick. */
.tag-jugando { background:color-mix(in srgb,var(--season) 18%,transparent); color:var(--season); white-space:nowrap; }
/* El icono acompana a la fecha, nunca va solo: es una pista, no un boton. */
.icono-calendario { flex:none; color:var(--season); opacity:.9; }

.jornada-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
/* Cada tanda abre su grupo: la ronda, la hora a la que empieza y en que
   estado esta. Los cuatro enfrentamientos de debajo son suyos. */
.jornada-tanda {
	display:flex; align-items:center; gap:10px;
	padding:12px 24px 10px; border-top:1px solid var(--line); background:var(--s2);
}
.jornada-tanda:first-child { border-top:none; }
.jornada-tanda-titulo {
	font-family:var(--display); font-weight:700; font-size:12.5px;
	letter-spacing:.12em; text-transform:uppercase; color:var(--tx2);
}
.jornada-tanda + .jornada-duelo { border-top:none; }
.jornada-duelo + .jornada-duelo { border-top:1px solid var(--linea-suave); }
/* Tres lineas por enfrentamiento: cuando y en que estado, el duelo, y los
   nombres completos. Todas las filas tienen la misma forma, hayan jugado ya o
   esten por jugar. */
.jornada-duelo a {
	display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px;
	padding:11px 24px; color:var(--tx); align-items:center;
	transition:background .18s ease;
}
.jornada-duelo a:hover { background:var(--s2); color:var(--tx); }
.jornada-hora { font-size:14px; color:var(--season); letter-spacing:0; }
.jornada-marca { justify-self:end; display:flex; align-items:center; min-height:20px; }
.jornada-marca .live { font-size:11.5px; letter-spacing:.12em; }

.jornada-clubes { display:flex; align-items:center; gap:14px; }
.jornada-club { display:flex; align-items:center; gap:10px; flex:1; }
.jornada-club:last-child { justify-content:flex-end; }
.jornada-abr { font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.06em; }
.jornada-vs { font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.14em; color:var(--tx3); text-transform:uppercase; }
.jornada-marcador { font-size:19px; display:flex; gap:7px; align-items:center; white-space:nowrap; }
.jornada-marcador .gana { color:var(--gold); }

.jornada-clubes { grid-column:1 / -1; }
.jornada-nombres {
	grid-column:1 / -1; text-align:center; font-size:12px;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.jornada-pie { justify-content:center; padding:20px 16px; border-top:1px solid var(--line); font-size:13px; }

@media (max-width:760px) {
	/* La primera linea es «dia · hora» y el estado: si se le da una columna
	   estrecha, la fecha se parte en tres renglones habiendo sitio de sobra. */
	.jornada-duelo a { grid-template-columns:minmax(0,1fr) auto; padding:14px 16px; gap:7px 10px; }
	.jornada-cuando { gap:6px; font-size:10.5px; letter-spacing:.08em; }
	.jornada-marca .tag, .jornada-marca .live { font-size:10px; letter-spacing:.08em; }
	.jornada-marca .tag { height:20px; padding:0 7px; }
	.jornada-hora { font-size:13px; }
	.jornada-abr { font-size:15px; }
	.jornada-clubes { gap:10px; }
	.jornada-cabecera { padding:16px 16px 12px; }
	.jornada-tanda { padding:10px 16px 8px; }
	.jornada .escudo-30 { width:26px; height:29px; }
	.jornada .escudo-30 .escudo-dentro { width:22px; height:25px; font-size:9px; }
}

/* Marcador del enfrentamiento en directo */
.marcador-directo {
	padding:24px; display:flex; flex-direction:column; gap:20px;
	box-shadow:inset 0 2px 0 var(--kick);
}
.marcador-cabecera { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.marcador-cuerpo { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.marcador-club { display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; }
.marcador-club-nombre { font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.08em; text-align:center; line-height:1.15; }
.marcador-puntos { font-size:48px; display:flex; gap:12px; align-items:center; }
.marcador-puntos .gana { color:var(--gold); }
.marcador-puntos .separador { font-size:26px; }

/* ------------------------------------------------------------------ */
/* Portada · rejillas                                                  */
/* ------------------------------------------------------------------ */

.rejilla-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.rejilla-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
/* Clubes manda un poco sobre jugadores a lo ancho: su tabla tiene cinco
   columnas y la otra es una lista. A lo alto, en cambio, las dos cajas acaban
   a la misma altura: son dos bloques en paralelo y con distinto fondo se ve
   enseguida que uno queda corto. */
.dos-columnas { display:grid; grid-template-columns:minmax(0,12fr) minmax(0,8fr); gap:32px; }
.dos-columnas > div { display:flex; flex-direction:column; }
.dos-columnas > div > .card { flex:1; }

/* Tarjeta de stream en directo.
   Al pasar por encima se enciende una linea verde abajo, igual que los
   apartados del menu: entra creciendo desde la izquierda y sale por la
   derecha. Empieza a 16 px del borde porque ahi es donde empieza de verdad
   el lado inferior de la tarjeta, que tiene la esquina cortada. */
.tarjeta-directo {
	display:flex; flex-direction:column; overflow:hidden; color:var(--tx);
	position:relative;
}
.tarjeta-directo::after {
	content:""; position:absolute; left:16px; right:0; bottom:0; height:2px;
	background:var(--kick);
	transform:scaleX(0); transform-origin:right center;
	transition:transform .26s cubic-bezier(.22,.61,.36,1);
	pointer-events:none;
}
.tarjeta-directo:hover::after,
.tarjeta-directo:focus-visible::after { transform:scaleX(1); transform-origin:left center; }

.tarjeta-directo:hover, .tarjeta-directo:focus-visible { color:var(--tx); }
.tarjeta-directo:hover .tarjeta-directo-nick,
.tarjeta-directo:focus-visible .tarjeta-directo-nick { color:var(--kick); }

/* El acercamiento va en la imagen y no en la tarjeta: escalar la tarjeta
   entera emborrona el texto, y ademas la miniatura recorta el desbordamiento,
   asi que el encuadre se mueve dentro de su marco sin empujar nada. */
.tarjeta-directo .miniatura img { transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.tarjeta-directo:hover .miniatura img,
.tarjeta-directo:focus-visible .miniatura img { transform:scale(1.05); }

@media (prefers-reduced-motion:reduce) {
	.tarjeta-directo::after,
	.tarjeta-directo .miniatura img { transition:none; }
	.tarjeta-directo:hover .miniatura img { transform:none; }
}
.miniatura {
	position:relative; height:190px; background-color:#0D1222; overflow:hidden;
	display:flex; align-items:center; justify-content:center;
}
.miniatura-tinte { position:absolute; inset:0; background:linear-gradient(135deg,color-mix(in srgb,var(--color-club,var(--gold)) 25%,transparent),transparent 60%); }
.miniatura-vacia { position:relative; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.14em; color:var(--tx3); }
.miniatura img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Las miniaturas son capturas del juego: hay partidas muy claras sobre las que
   el badge verde se perdia. Dos velos en degradado, arriba y abajo, le dan
   suelo sin taparlas. */
.miniatura::before, .miniatura::after {
	content:""; position:absolute; left:0; right:0; height:78px; pointer-events:none; z-index:1;
}
.miniatura::before { top:0; background:linear-gradient(180deg,rgba(6,9,17,.72),rgba(6,9,17,0)); }
.miniatura::after { bottom:0; background:linear-gradient(0deg,rgba(6,9,17,.72),rgba(6,9,17,0)); }

.miniatura-directo { position:absolute; left:14px; top:14px; z-index:2; }
.miniatura-espectadores {
	position:absolute; right:14px; bottom:12px; z-index:2;
	display:inline-flex; align-items:center; gap:6px;
	font-size:13px; background:rgba(10,14,26,.72); padding:3px 8px;
	backdrop-filter:blur(3px);
}
.tarjeta-directo-pie { display:flex; gap:12px; align-items:center; padding:16px; min-width:0; }
.tarjeta-directo-textos { display:flex; flex-direction:column; min-width:0; }
.tarjeta-directo-nick { font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.06em; }
.tarjeta-directo-titulo { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Tarjeta de enfrentamiento */
/* Cada jornada lleva dos rondas a horas distintas: un rotulo antes de cada
   grupo de tarjetas dice cual es cual, con una linea que las separa. */
.bloque-ronda { margin:52px 0 18px; padding-top:26px; border-top:1px solid var(--linea-suave); }
.bloque-ronda-primera { margin-top:0; padding-top:0; border-top:0; }
.bloque-ronda-rotulo {
	display:flex; align-items:baseline; gap:12px; margin:0;
	font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.14em; text-transform:uppercase;
}
.bloque-ronda-hora { font-size:15px; color:var(--season); letter-spacing:.06em; }
@media (max-width:760px) {
	.bloque-ronda { margin:34px 0 14px; padding-top:20px; }
}

.tarjeta-enf { background:var(--s1); padding:20px; display:flex; flex-direction:column; gap:18px; }
.tarjeta-enf.es-directo { background:linear-gradient(180deg,rgba(83,252,24,.07),var(--s1) 45%); box-shadow:inset 0 2px 0 var(--kick); }
.tarjeta-enf-cabecera { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.tarjeta-enf-fecha { font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.12em; white-space:nowrap; }
/* Arriba y no al centro: si un nombre parte en dos lineas los escudos siguen a la
   misma altura. El marcador ocupa lo mismo que el escudo (53 px) para quedar a su nivel. */
.tarjeta-enf-cuerpo { display:flex; align-items:flex-start; gap:10px; }
.tarjeta-enf-club { display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; }
.tarjeta-enf-club.pierde { opacity:.5; }
.tarjeta-enf-nombre { font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.08em; text-align:center; line-height:1.15; }
.tarjeta-enf-marcador { font-size:34px; display:flex; gap:10px; align-items:center; height:53px; }
.tarjeta-enf-marcador .gana { color:var(--gold); }
.tarjeta-enf-marcador .separador { font-size:20px; }
.tarjeta-enf-vacio { font-family:var(--display); font-weight:700; font-size:20px; color:var(--tx3); letter-spacing:.08em; height:53px; display:flex; align-items:center; }

/* Lista de jugadores de la portada */
.lista-jugadores { padding:8px 20px; }

/* Rejilla y no flex: con flex, los puntos se descolgaban a una segunda linea
   en cuanto el nombre del club era largo. Con cuatro columnas fijas, el numero
   se queda pegado a la derecha pase lo que pase. */
.fila-jugador {
	display:grid; grid-template-columns:22px auto minmax(0,1fr) auto;
	align-items:center; gap:4px 14px;
	padding:17px 0; border-bottom:1px solid var(--linea-suave); color:var(--tx);
}
.fila-jugador:last-child { border-bottom:none; }
.fila-jugador:hover { color:var(--tx); }
.fila-jugador:hover .fila-jugador-nick { color:var(--gold); }
.fila-jugador-pos { font-size:18px; color:var(--tx2); text-align:center; }
.fila-jugador-pos.primero { color:var(--gold); }
.fila-jugador-textos { display:flex; flex-direction:column; gap:2px; min-width:0; }
.fila-jugador-nick { font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.05em;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fila-jugador-club { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fila-jugador-estado { font-size:12px; line-height:1.2; }
.fila-jugador-estado .live { font-size:11px; letter-spacing:.1em; }
.fila-jugador-pts { font-size:22px; color:var(--gold); text-align:right; white-space:nowrap; }

/* Twitch: mismo badge que Kick pero en morado, y el enlace al canal siempre
   visible cuando emite en las dos (manda Kick, pero Twitch no se esconde). */
.estado-directo { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Los canales en reposo se apilan: Kick arriba y Twitch debajo. Las dos lineas
   empiezan a la misma altura para que las dos marcas queden en columna; el
   bloque entero es el que se va a la derecha de la celda. */
.estado-reposo { display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; }
.enlace-twitch-texto { font-size:13px; display:inline-flex; align-items:center; gap:6px; color:var(--tx3); }
.enlace-twitch-texto svg { flex:none; fill:currentColor; }
.enlace-twitch-texto:hover { color:#C9A6FF; }

/* En la tabla del ranking los directos van seguidos en una linea, con la marca
   en vez de la palabra: Kick primero si emite alli, y Twitch detras. */
.estado-directo-iconos { gap:12px; }
/* En la tabla el bloque va pegado a la derecha de la celda. */
.tbl .estado-directo-iconos { justify-content:flex-end; }
/* En retransmisiones los dos canales caben en la misma linea. */
.canal-jugador .estado-reposo, .canales-club-textos .estado-reposo { flex-direction:row; flex-wrap:wrap; gap:4px 12px; }
.estado-directo-iconos .live { gap:6px; }
.estado-directo-iconos .live svg { fill:currentColor; }
.live-twitch { color:#A970FF; }
.live-pill.live-twitch { background:rgba(169,112,255,.12); border-color:rgba(169,112,255,.4); }
.tarjeta-directo.es-twitch .miniatura-vacia { color:#A970FF; }
/* Quien solo emite en Twitch lleva el morado tambien al pasar por encima. */
.tarjeta-directo.es-twitch::after { background:#A970FF; }
.tarjeta-directo.es-twitch:hover .tarjeta-directo-nick,
.tarjeta-directo.es-twitch:focus-visible .tarjeta-directo-nick { color:#A970FF; }
.live-twitch i { background:#A970FF; box-shadow:0 0 0 0 rgba(169,112,255,.6); animation-name:pulso-twitch; }

/* El mismo latido que el de Kick, en morado: con el verde parecia de Kick. */
@keyframes pulso-twitch {
	0% { box-shadow:0 0 0 0 rgba(169,112,255,.55); }
	70% { box-shadow:0 0 0 8px rgba(169,112,255,0); }
	100% { box-shadow:0 0 0 0 rgba(169,112,255,0); }
}
.enlace-twitch { display:inline-flex; align-items:center; color:#A970FF; }
.enlace-twitch svg { fill:currentColor; }
.enlace-twitch:hover { color:#C9A6FF; }

.estado-offline { font-family:var(--display); font-weight:600; font-size:11px;
	letter-spacing:.1em; text-transform:uppercase; }

/* ------------------------------------------------------------------ */
/* Cabecera de pagina interior                                         */
/* ------------------------------------------------------------------ */

.pagina-cabecera { border-bottom:1px solid var(--line); }
.pagina-cabecera .wrap { padding:56px 0 0; display:flex; flex-direction:column; gap:32px; }
.pagina-titulos { display:flex; flex-direction:column; gap:12px; }
.pagina-cabecera h1 { font-size:60px; }
.pagina-entradilla { font-size:17px; max-width:720px; }
/* Sin pestanas debajo, la cabecera necesita su propio aire por abajo. */
.pagina-cabecera.sin-pestanas .wrap { padding-bottom:52px; }

.nota-pie { font-size:13px; margin-top:22px; }
.nota-encima { font-size:13px; margin-bottom:14px; }

/* ------------------------------------------------------------------ */
/* Clasificacion                                                       */
/* ------------------------------------------------------------------ */

.tabla-clasificacion tr { height:76px; }
.celda-club { display:flex; align-items:center; gap:16px; }
.celda-club-nombre { font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.05em; }
.pos-grande { font-size:22px; color:var(--tx2); }
.pos-grande.primero { color:var(--gold); }
.pts-liga { font-size:26px; }
.pts-liga.primero { color:var(--gold); }

.podio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
/* El degradado que antes rodeaba la tarjeta pasa a ser un filo superior: con
   el bisel, el marco quedaba abierto en las dos esquinas cortadas. */
.aug { position:relative; background:var(--s1); padding:22px; clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); }
.aug::before {
	content:""; position:absolute; left:0; right:0; top:0; height:3px;
	background:var(--frame,var(--line)); pointer-events:none;
}
.f-silver { --frame:linear-gradient(135deg,#E6EBF2,#7E8898); }
.f-gold { --frame:linear-gradient(135deg,#FFE29A,#B7791F); }
.f-prism { --frame:linear-gradient(135deg,#5EEAD4,#A78BFA,#F472B6); }
.gem { width:14px; height:16px; display:inline-block; }

.podio-tarjeta { display:flex; align-items:center; gap:16px; color:var(--tx); }
.podio-tarjeta:hover { color:var(--tx); }
.podio-textos { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.podio-marca { display:flex; align-items:center; gap:6px; }
.podio-nick { font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:.05em; line-height:1; }
.podio-club { font-size:12px; }
.podio-pts { font-size:36px; color:var(--gold); }

.filtros { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; margin-bottom:20px; }

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

.pie { margin-top:96px; background:var(--negro); border-top:1px solid var(--line); }

/* Los patrocinadores abren el pie en su propia banda, con la trama hexagonal
   detras y todo centrado: pagan por estar ahi y antes quedaban arrinconados a
   la izquierda de una rejilla con huecos vacios. */
.pie-patrocinio { background:var(--bg); border-bottom:1px solid var(--borde-negro); }
.pie-patrocinio .wrap { padding:44px 0 40px; display:flex; flex-direction:column; align-items:center; gap:26px; }

.pie-rotulo {
	display:flex; align-items:center; gap:20px; width:100%; max-width:680px; margin:0;
	font-family:var(--display); font-weight:600; font-size:11.5px;
	letter-spacing:.24em; text-transform:uppercase; color:var(--tx3);
}
.pie-rotulo::before, .pie-rotulo::after { content:""; flex:1; height:1px; }
.pie-rotulo::before { background:linear-gradient(90deg,transparent,var(--line)); }
.pie-rotulo::after { background:linear-gradient(90deg,var(--line),transparent); }

.pie-sponsors-rejilla { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; width:100%; }
.pie-sponsor { display:flex; flex-direction:column; align-items:center; gap:10px; flex:0 1 264px; }
.pie-sponsor .sponsor.grande {
	width:100%; height:120px; padding:26px 30px;
	transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}
.pie-sponsor .sponsor.grande:hover {
	transform:translateY(-3px); --contorno:var(--line);
	filter:
		drop-shadow(1px 0 0 var(--contorno))
		drop-shadow(-1px 0 0 var(--contorno))
		drop-shadow(0 1px 0 var(--contorno))
		drop-shadow(0 -1px 0 var(--contorno));
}
/* Los logos se limitan tambien a lo ancho: sin el tope, un logotipo apaisado
   como el de Kick llena la caja de lado a lado y pesa el doble que uno mas
   cuadrado a la misma altura. */
.pie-sponsor .sponsor.grande img { max-height:54px; max-width:168px; }
.pie-sponsor-nivel {
	font-family:var(--display); font-weight:600; font-size:10.5px;
	letter-spacing:.16em; text-transform:uppercase; color:var(--tx3);
}

/* Reglamento: indice fijo a la izquierda y el texto oficial a la derecha, con
   la numeracion generada al mostrarlo. Lo pendiente de confirmar se resalta
   solo mientras la pagina esta marcada como borrador. */
.regla-acciones { margin-top:8px; }
.regla-acciones .btn { background:transparent; cursor:pointer; }
.regla-aviso-borrador { max-width:none; margin-bottom:32px; box-shadow:inset 4px 0 0 var(--gold); }
.regla-cuerpo { display:grid; grid-template-columns:260px minmax(0,1fr); gap:56px; align-items:start; }
/* La cabecera de la web va fija arriba (76 px): el indice se pega por debajo de ella. */
.regla-indice { position:sticky; top:100px; max-height:calc(100vh - 124px); overflow-y:auto; }
.regla-indice summary { list-style:none; cursor:default; margin-bottom:14px; }
.regla-indice summary::-webkit-details-marker { display:none; }
.regla-indice ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line); }
.regla-indice a {
	display:flex; gap:10px; padding:7px 0 7px 16px; margin-left:-1px; border-left:2px solid transparent;
	color:var(--tx2); font-size:14px; line-height:1.35;
}
.regla-indice a:hover { color:var(--tx); }
.regla-indice a.activo { color:var(--tx); border-left-color:var(--season); }
.regla-indice-numero { font-family:var(--cifras); color:var(--tx3); min-width:18px; font-variant-numeric:tabular-nums; }
.regla-indice a.activo .regla-indice-numero { color:var(--season); }

.regla-texto-oficial { max-width:780px; }
.regla-texto-oficial h2.regla-titulo {
	margin-top:56px; padding-top:28px; border-top:1px solid var(--line);
	display:flex; align-items:baseline; gap:14px; font-size:26px;
}
.regla-texto-oficial > h2.regla-titulo:first-child { margin-top:0; padding-top:0; border-top:0; }
.regla-texto-oficial h3.regla-titulo { display:flex; align-items:baseline; gap:12px; margin-top:30px; font-size:17px; }
.regla-numero { font-family:var(--cifras); font-weight:700; color:var(--season); font-variant-numeric:tabular-nums; flex:none; }
h3 .regla-numero { color:var(--tx3); font-size:15px; min-width:32px; }
.regla-enlace {
	opacity:0; margin-left:4px; color:var(--tx3) !important; text-decoration:none !important;
	font-family:var(--cifras); font-weight:400; transition:opacity .15s ease;
}
.regla-titulo:hover .regla-enlace, .regla-enlace:focus-visible { opacity:1; }
.regla-enlace.copiado { opacity:1; color:var(--win) !important; }
.regla-enlace.copiado::after { content:" " attr(data-aviso); font-family:var(--body); font-size:12px; letter-spacing:.04em; }
.regla-texto-oficial h3 + p, .regla-texto-oficial h3 + ul, .regla-texto-oficial h3 + ol { margin-top:10px; }
.regla-texto-oficial h3 ~ p, .regla-texto-oficial h3 ~ ul, .regla-texto-oficial h3 ~ ol, .regla-texto-oficial h3 ~ .tabla-scroll { padding-left:44px; }
.regla-tabla { width:auto; min-width:100%; }
.regla-tabla th, .regla-tabla td { padding:10px 12px; }
/* !important porque «Resaltar» en el editor escribe el color en linea. */
.regla-texto-oficial mark { background:none !important; color:inherit !important; }
.es-borrador .regla-texto-oficial mark { background:color-mix(in srgb,var(--gold) 26%,transparent) !important; color:var(--tx) !important; padding:1px 3px; }
.regla-aviso-borrador mark { background:color-mix(in srgb,var(--gold) 26%,transparent); color:var(--tx); padding:1px 3px; }

@media (max-width:900px) {
	.regla-cuerpo { grid-template-columns:minmax(0,1fr); gap:24px; }
	.regla-indice { position:static; max-height:none; background:var(--s1); padding:14px 18px; }
	.regla-indice summary { cursor:pointer; margin-bottom:0; display:flex; justify-content:space-between; }
	.regla-indice summary::after { content:"+"; font-family:var(--cifras); color:var(--tx2); }
	.regla-indice details[open] summary { margin-bottom:12px; }
	.regla-indice details[open] summary::after { content:"−"; }
}
@media (max-width:760px) {
	.reglamento .regla-texto-oficial { padding:0 !important; }
	.regla-texto-oficial h2.regla-titulo { font-size:21px; margin-top:40px; padding-top:22px; }
	.regla-texto-oficial h3 ~ p, .regla-texto-oficial h3 ~ ul, .regla-texto-oficial h3 ~ ol, .regla-texto-oficial h3 ~ .tabla-scroll { padding-left:0; }
	h3 .regla-numero { min-width:0; }
}

/* Imprimir o guardar en PDF: solo el texto, en negro sobre blanco. */
@media print {
	.barra-sponsors, .cabecera, .pie, .tabs, .regla-indice, .regla-acciones, .regla-enlace, .regla-aviso-borrador { display:none !important; }
	body, .hexbg, .pagina-cabecera { background:#fff !important; color:#000 !important; }
	.pagina-cabecera { border:0 !important; }
	.pagina-cabecera .wrap { padding-bottom:12px !important; }
	.regla-cuerpo { display:block; }
	.regla-texto-oficial, .regla-texto-oficial p, .regla-texto-oficial li, .regla-texto-oficial strong, .pagina-titulos h1, .muted { color:#000 !important; }
	.regla-numero, .eyebrow { color:#000 !important; }
	.regla-texto-oficial h2.regla-titulo { break-after:avoid; border-color:#999; }
	.regla-texto-oficial h3.regla-titulo { break-after:avoid; }
	.regla-tabla th, .regla-tabla td { border:1px solid #999; color:#000 !important; }
	.es-borrador .regla-texto-oficial mark { background:none !important; color:#000 !important; padding:0; }
	.seccion-primera { padding-top:0 !important; }
}

/* Pagina 404: texto y botones a la izquierda, el 404 grande a la derecha con
   el simbolo de la liga, y accesos a lo que la gente suele buscar. */
.pagina-cabecera .error-404-interior { flex-direction:row; align-items:center; justify-content:space-between; gap:40px; }
.error-404-botones { margin-top:12px; }
.error-404-numero { display:flex; align-items:flex-end; gap:18px; flex:none; }
.error-404-numero .num {
	font-family:var(--display); font-weight:700; font-size:168px; line-height:.8; letter-spacing:.02em;
	color:transparent; -webkit-text-stroke:2px var(--line);
}
.error-404-numero .logo { width:64px; height:auto; margin-bottom:4px; }
.error-404-acceso { display:flex; flex-direction:column; gap:10px; padding:24px; color:var(--tx); transition:transform .2s cubic-bezier(.22,.61,.36,1); }
.error-404-acceso:hover { color:var(--tx); transform:translateY(-3px); }
.error-404-acceso-titulo { font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.04em; }
.error-404-acceso .muted { font-size:14px; line-height:1.55; flex:1; }
@media (max-width:900px) {
	.error-404-numero .num { font-size:110px; }
}
@media (max-width:760px) {
	.pagina-cabecera .error-404-interior { flex-direction:column; align-items:flex-start; gap:24px; }
	.error-404-numero { gap:12px; }
	.error-404-numero .num { font-size:84px; -webkit-text-stroke-width:1.5px; }
	.error-404-numero .logo { width:40px; }
}

/* Pagina de overlays para jugadores: opciones e instrucciones arriba, buscador
   y la lista por club. Los radios van ocultos dentro de pastillas. */
.overlays-pagina { display:flex; flex-direction:column; gap:24px; }
.overlays-arriba { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:20px; }
.overlays-opciones { display:flex; flex-direction:column; gap:20px; padding:24px 26px; margin:0; }
.overlays-grupo { border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:10px; }
.overlays-grupo legend { padding:0; margin-bottom:10px; }
.overlays-grupo[disabled] { opacity:.4; }
.overlays-pills { display:flex; flex-wrap:wrap; gap:8px; }
.overlays-pill { cursor:pointer; }
.overlays-pill:has(input:checked) { background:var(--s2); color:var(--tx); border-color:var(--season); }
.overlays-pill:has(input:focus-visible) { outline:2px solid var(--season); outline-offset:2px; }
.overlays-grupo[disabled] .overlays-pill { cursor:not-allowed; }
.overlays-obs { padding:24px 26px; display:flex; flex-direction:column; gap:12px; }
.overlays-obs h2 { margin:0; }
.overlays-obs ol { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; color:var(--tx2); font-size:15px; line-height:1.5; }
.overlays-obs strong { color:var(--tx); }
.overlays-obs p { margin:0; font-size:13.5px; line-height:1.55; }
.overlays-buscar { max-width:420px; }
.overlays-buscar input {
	width:100%; height:46px; padding:0 14px; background:var(--s2); color:var(--tx);
	border:1px solid var(--line); font-family:var(--body); font-size:15px;
}
.overlays-buscar input:focus { outline:none; border-color:var(--season); box-shadow:0 0 0 3px color-mix(in srgb,var(--season) 22%,transparent); }
.overlays-clubes { display:flex; flex-direction:column; gap:16px; }
.overlays-club { padding:0; overflow:hidden; }
.overlays-club-cabecera {
	display:flex; align-items:center; gap:12px; margin:0; padding:14px 22px;
	font-size:18px; text-transform:none; letter-spacing:.04em;
	background:linear-gradient(90deg,color-mix(in srgb,var(--color-club) 16%,transparent),transparent 70%);
	border-bottom:1px solid var(--linea-suave);
}
.overlays-lista { list-style:none; margin:0; padding:4px 22px 8px; }
.overlays-jugador {
	display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto; align-items:center; gap:16px;
	padding:12px 0;
}
.overlays-jugador + .overlays-jugador { border-top:1px solid var(--linea-suave); }
.overlays-quien { display:flex; align-items:center; gap:12px; min-width:0; }
.overlays-nick { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.05em; }
.overlays-enlace {
	width:100%; height:36px; padding:0 12px; background:var(--bg); color:var(--tx2);
	border:1px solid var(--line); font-family:var(--cifras); font-size:12.5px;
}
.overlays-enlace:focus { outline:none; border-color:var(--season); color:var(--tx); }
.overlays-acciones { display:flex; gap:8px; }
.overlays-acciones .btn { justify-content:center; }
.overlays-acciones .copiado { background:var(--win); color:#06210F; }
.overlays-nadie { margin:0; }

@media (max-width:900px) {
	.overlays-arriba { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
	.overlays-opciones, .overlays-obs { padding:20px; }
	.overlays-lista { padding:2px 16px 6px; }
	.overlays-club-cabecera { padding:12px 16px; font-size:16px; }
	.overlays-jugador { grid-template-columns:minmax(0,1fr); gap:10px; padding:14px 0; }
	.overlays-acciones .btn { flex:1; }
	.overlays-buscar { max-width:none; }
}

/* Pagina de patrocinadores: los principales a dos columnas, cada uno con su
   logo arriba en una banda oscura y la presentacion debajo. */
.patrocinadores-principales { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; }
.patrocinador { padding:0; display:flex; flex-direction:column; overflow:hidden; }
.patrocinador-logo {
	position:relative; display:flex; align-items:center; justify-content:center;
	height:180px; padding:44px 40px 30px; background:var(--negro); border-bottom:1px solid var(--linea-suave);
}
/* Tope a lo ancho y a lo alto a la vez: asi un logo apaisado y macizo como el de
   Kick no pesa mas que uno con aire como el de MejorIA. */
.patrocinador-logo img { max-height:66px; max-width:214px; width:auto; height:auto; object-fit:contain; }
.patrocinador-rotulo {
	position:absolute; top:18px; left:0; right:0; text-align:center;
	font-family:var(--display); font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx3);
}
.patrocinador-cuerpo { display:flex; flex-direction:column; gap:24px; padding:30px 34px 34px; flex:1; }
/* El nombre va tal cual lo escribe la marca: en mayusculas «MejorIA» perderia el «IA». */
.patrocinador-cabecera h2 { font-size:30px; text-transform:none; letter-spacing:.02em; }
.patrocinador-lema { margin:8px 0 0; color:var(--tx2); font-size:16px; line-height:1.5; }
.patrocinador-bloque { display:flex; flex-direction:column; gap:10px; }
.patrocinador-bloque h3 { margin:0; }
.patrocinador-bloque p { margin:0; color:var(--tx2); font-size:15px; line-height:1.7; }
.patrocinador-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.patrocinador-lista li { position:relative; padding-left:20px; color:var(--tx2); font-size:15px; line-height:1.55; }
.patrocinador-lista li::before {
	content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--season,var(--gold));
	clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.patrocinador-papel { padding:18px 20px; background:var(--s2); clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); }
.patrocinador-web { align-self:flex-start; margin-top:auto; gap:10px; }
.patrocinadores-resto { justify-content:flex-start; }
.pagina-entradilla p { margin:0; }

@media (max-width:900px) {
	.patrocinadores-principales { grid-template-columns:minmax(0,1fr); gap:16px; }
}
@media (max-width:760px) {
	.patrocinador-logo { height:140px; padding:38px 24px 22px; }
	.patrocinador-logo img { max-height:54px; max-width:180px; }
	.patrocinador-cuerpo { padding:22px 20px 24px; gap:20px; }
	.patrocinador-cabecera h2 { font-size:24px; }
}

.pie-cuerpo { padding:48px 0 44px; }
/* La marca ocupa una columna doble y los menus se reparten el resto a partes
   iguales, sean dos o cuatro: asi el pie queda equilibrado de lado a lado en
   vez de amontonarse a la izquierda. */
.pie-columnas {
	display:grid; grid-template-columns:minmax(0,2fr);
	grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:40px; align-items:start;
}

.pie-marca { display:flex; flex-direction:column; gap:16px; max-width:420px; }
.pie-marca p { max-width:36ch; font-size:14px; }

/* Por donde va la competicion, en voz baja. */
.pie-estado {
	display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
	padding:9px 14px; background:var(--s1); color:var(--tx2);
	font-family:var(--display); font-weight:600; font-size:11.5px;
	letter-spacing:.1em; text-transform:uppercase;
	transition:background .18s ease, color .18s ease;
}
.pie-estado:hover { background:var(--s2); color:var(--tx); }
.pie-estado-hex {
	width:9px; height:10px; flex:none; background:var(--season);
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.pie-estado-set { color:var(--season); }
.pie-estado-ronda { color:var(--tx); }
.pie-estado .num { font-size:12.5px; }

.pie-columna { display:flex; flex-direction:column; gap:12px; font-size:14px; }
.pie-columna-titulo {
	font-family:var(--display); font-weight:600; font-size:11px;
	letter-spacing:.18em; text-transform:uppercase; color:var(--tx3);
}
.pie-columna .lista-menu { display:flex; flex-direction:column; gap:11px; }
/* El mismo subrayado que crece en el menu de arriba. */
.pie-columna a { position:relative; color:var(--tx2); align-self:flex-start; }
.pie-columna a::after {
	content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
	background:var(--gold); transform:scaleX(0); transform-origin:left;
	transition:transform .18s ease;
}
.pie-columna a:hover { color:var(--tx); }
.pie-columna a:hover::after { transform:scaleX(1); }

.pie-base { background:var(--bg); border-top:1px solid var(--borde-negro); }
.pie-legal {
	display:flex; justify-content:space-between; align-items:center; gap:16px 24px;
	flex-wrap:wrap; font-size:12.5px; padding:20px 0;
}


/* ------------------------------------------------------------------ */
/* Fichas, calendario y estadisticas                                   */
/* ------------------------------------------------------------------ */

.miga { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--tx2); flex-wrap:wrap; }
.miga a { color:var(--tx2); }
.miga a:hover { color:var(--gold); }

.ficha-cabecera { display:flex; align-items:center; gap:24px; }

.datos-fila { display:flex; gap:40px; flex-wrap:wrap; }
.dato { display:flex; flex-direction:column; gap:4px; font-size:14px; }
.dato .num { font-size:24px; }

.redes { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-bottom:28px; }

/* Redes sociales como iconos. En reposo todos grises; al pasar por encima cada
   uno toma el color de su red. */
.redes-iconos { list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; }
.red-icono {
	--red:var(--tx);
	display:flex; align-items:center; justify-content:center; width:40px; height:40px;
	background:var(--s2); color:var(--tx2);
	clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
	transition:color .18s ease, background .18s ease;
}
.red-icono svg { fill:currentColor; }
.red-icono:hover, .red-icono:focus-visible { color:var(--red); background:color-mix(in srgb,var(--red) 14%,var(--s2)); }
.red-twitch { --red:#A970FF; }
.red-x { --red:var(--tx); }
.red-youtube { --red:#FF0033; }
.red-instagram { --red:#E1306C; }
.red-tiktok { --red:#25F4EE; }
/* En el pie los iconos van en la linea del logotipo, algo mas pequeños. */
.pie-marca-linea { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.redes-pie .red-icono { width:34px; height:34px; }
/* Punto rojo sobre el icono de Twitch mientras emite ahi. */
.red-icono { position:relative; }
.red-emitiendo { color:var(--red); background:color-mix(in srgb,var(--red) 14%,var(--s2)); }
.punto-directo {
	position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
	background:#F04747; box-shadow:0 0 0 2px var(--s2);
}
.red-youtube { --red:#FF4E45; }
.red-instagram { --red:#F0568A; }
.red-tiktok { --red:#25F4EE; }
.red-x { --red:#FFFFFF; }
.red-web { --red:var(--season); }

/* Enfrentamiento */
.duelo { display:grid; grid-template-columns:1fr auto 1fr; gap:32px; align-items:center; padding-bottom:40px; }
.duelo-club { display:flex; align-items:center; gap:22px; min-width:0; }
.duelo-club-a { justify-content:flex-end; text-align:right; }
.duelo-club-b { justify-content:flex-start; text-align:left; }
.duelo-club .escudo { flex:none; }
.duelo-textos { display:flex; flex-direction:column; gap:6px; min-width:0; }
.duelo-club-a .duelo-textos { align-items:flex-end; }
.duelo-nombre { font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:.04em; text-transform:uppercase; color:var(--tx); }
.duelo-puesto { font-size:13px; }
.duelo-centro { display:flex; flex-direction:column; align-items:center; gap:10px; }
.duelo-marcador { font-size:56px; display:flex; gap:14px; align-items:center; }
.duelo-marcador .gana { color:var(--gold); }
.duelo-marcador .separador { font-size:30px; }
.duelo-cuando { font-size:14px; text-align:center; }

/* Retransmisiones del enfrentamiento: una tarjeta por club con su canal y el
   de cada jugador. El color del club solo marca la cabecera; el verde queda
   reservado para quien esta en directo. */
.retransmisiones { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.canales-club { padding:0; overflow:hidden; }
.canales-club-cabecera {
	display:flex; align-items:center; gap:14px; padding:18px 22px;
	background:linear-gradient(90deg,color-mix(in srgb,var(--color-club) 16%,transparent),transparent 70%);
	border-bottom:1px solid var(--linea-suave);
}
.canales-club-textos, .canal-jugador-textos { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.canales-club-nombre { font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.05em; color:var(--tx); }
.canales-sin { font-size:13px; }
.canales-lista { list-style:none; margin:0; padding:6px 22px 10px; }
.canal-jugador { display:flex; align-items:center; gap:12px; padding:11px 0; }
.canal-jugador + .canal-jugador { border-top:1px solid var(--linea-suave); }
.canal-jugador-nick { font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.05em; color:var(--tx);
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.canal-jugador .live { font-size:11px; letter-spacing:.1em; }
.canal-jugador .enlace-kick { font-size:12.5px; max-width:100%; }
.canal-jugador-rol { flex:none; }
.fila-vod { margin-top:20px; max-width:420px; }

/* Retransmisiones: una franja por club con su canal y una rejilla de fichas
   pequeñas, una por jugador. Distinto a proposito de las alineaciones, que
   van en tarjeta con lista. */
.emisiones { display:grid; gap:30px; }
.emisiones-cabecera {
	display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap;
	padding:0 0 12px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
.emisiones-club-nombre { display:flex; align-items:center; gap:12px; color:var(--tx); min-width:0;
	font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.05em; }
.emisiones-club-nombre:hover { color:var(--color-club); }
.emisiones-canal-club { margin-left:auto; font-size:13px; }
.emisiones-canal-club .estado-reposo { flex-direction:row; flex-wrap:wrap; gap:4px 14px; }
.emisiones-rejilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.emision { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--s1); min-width:0;
	box-shadow:inset 3px 0 0 var(--color-club); }
.emision-sin { background:transparent; box-shadow:inset 3px 0 0 var(--linea-suave); }
/* Todas las fichas miden lo mismo que una con Kick y Twitch (nick + dos
   lineas de canal: 20 + 4 + 18 + 2 + 18), con el texto centrado en vertical,
   para que las filas no queden descompensadas. */
.emision-textos { display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; flex:1; min-height:62px; }
.emision-nick { line-height:20px; }
.emision .enlace-kick, .emision .enlace-twitch-texto { line-height:18px; }
.emision-arriba { display:flex; align-items:baseline; gap:8px; min-width:0; }
.emision-nick { font-family:var(--display); font-weight:700; font-size:14.5px; letter-spacing:.05em; color:var(--tx);
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emision-rol { flex:none; font-family:var(--display); font-weight:600; font-size:10.5px; letter-spacing:.1em;
	text-transform:uppercase; color:var(--tx3); }
.emision .estado-reposo { flex-direction:column; gap:2px; min-width:0; }
.emision .enlace-kick, .emision .enlace-twitch-texto { font-size:12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emision .live { font-size:11px; letter-spacing:.1em; }
.emision .avatar { flex:none; }

.resumen-partidas { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.resumen-partida { padding:22px; display:flex; flex-direction:column; gap:12px; }
.resumen-marcador { font-size:26px; display:flex; align-items:center; gap:8px; }
.resumen-marcador .gana { color:var(--gold); }

/* Calendario */
.ronda { margin-bottom:56px; }
.ronda-cabecera { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.ronda-cabecera h2 { font-size:26px; }
.ronda-semana { font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.dia { font-size:15px; color:var(--tx2); margin:32px 0 14px; display:flex; align-items:center; gap:9px; }
/* La fecha acompaña al titulo de la jornada, con su iconito de calendario. */
.ronda-fecha { display:inline-flex; align-items:center; gap:8px; letter-spacing:.08em; }
/* Dentro de la jornada, cada ronda abre con su hora. */
.dia { font-family:var(--display); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.dia-hora { color:var(--season); letter-spacing:0; }

.fila-enf {
	display:grid; grid-template-columns:64px 110px 1fr auto 1fr 130px;
	align-items:center; gap:16px; padding:16px 20px; margin-bottom:10px;
}
.fila-enf.es-directo { background:linear-gradient(90deg,rgba(83,252,24,.07),var(--s1) 40%); box-shadow:inset 3px 0 0 var(--kick); }
.fila-enf-hora { font-size:17px; }
.fila-enf-club { display:flex; align-items:center; gap:12px; min-width:0; font-weight:600; }
.fila-enf-club.derecha { justify-content:flex-end; text-align:right; }
.fila-enf-club.pierde { opacity:.5; }
.fila-enf-marcador { font-size:24px; display:flex; gap:8px; align-items:center; white-space:nowrap; }
.fila-enf-marcador .gana { color:var(--gold); }
.fila-enf-accion { display:flex; justify-content:flex-end; }

/* Jugador: distribucion de posiciones */
.barras { display:flex; align-items:flex-end; gap:10px; height:160px; }
.barra { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; }
.barra-valor { font-size:14px; color:var(--tx2); }
.barra-carril { flex:1; width:100%; display:flex; align-items:flex-end; background:var(--s2); overflow:hidden; }
.barra-relleno { width:100%; background:linear-gradient(180deg,var(--season),color-mix(in srgb,var(--season) 40%,transparent)); min-height:2px; }
.barra-etiqueta { font-family:var(--display); font-weight:600; font-size:12px; }

.posiciones { display:inline-flex; gap:4px; }
.posicion {
	width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
	font-family:var(--display); font-weight:700; font-size:12px;
	background:var(--s2); color:var(--tx2);
}
.posicion.buena { background:rgba(240,180,60,.16); color:var(--gold); }

/* Estadisticas */
.tarjeta-lider { padding:22px; display:flex; flex-direction:column; gap:14px; }
.tarjeta-record { padding:22px; display:flex; flex-direction:column; gap:8px; color:var(--tx); }
.tarjeta-record:hover { color:var(--tx); }
.tarjeta-record:hover .num { color:#FFD27A; }

.barra-h { display:grid; grid-template-columns:200px 1fr 70px; align-items:center; gap:16px; padding:8px 0; }
.barra-h-club { display:flex; align-items:center; gap:10px; min-width:0; }
.barra-h-carril { height:10px; background:var(--s2); overflow:hidden; }
.barra-h-relleno { display:block; height:100%; background:var(--color-club,var(--season)); }
.barra-h-valor { text-align:right; font-size:16px; }

/* Clubes.
   Cuatro por fila: con ocho clubes salen dos filas llenas. Nunca tres, que
   dejaría una fila huérfana de dos. */
.rejilla-clubes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }

.tarjeta-club {
	display:flex; flex-direction:column; overflow:hidden; background:var(--s1);
	transition:transform .2s cubic-bezier(.22,.61,.36,1);
}
/* Solo el movimiento: el contorno alrededor de la tarjeta quedaba fatal. */
.tarjeta-club:hover { transform:translateY(-3px); }

/* Banda superior con la isla de fondo, tenida del color del club. El color va
   en multiply para que se lleve la textura de la imagen en vez de taparla, y
   el degradado oscuro de abajo es para que el logotipo del club se lea sobre
   cualquier parte del dibujo. */
.tarjeta-club-banda {
	position:relative; height:84px; display:flex; align-items:flex-end; padding:0 20px;
	background-color:color-mix(in srgb,var(--color-club) 60%,var(--bg));
	background-image:
		linear-gradient(to bottom,transparent 42%,rgba(10,14,26,.62)),
		linear-gradient(135deg,var(--color-club),color-mix(in srgb,var(--color-club) 62%,#fff 38%)),
		url('../img/banda-club.webp');
	background-blend-mode:normal,multiply,normal;
	background-size:cover;
	background-position:center 58%;
	background-repeat:no-repeat;
}
.tarjeta-club-banda .escudo { transform:translateY(50%); box-shadow:0 8px 18px -8px rgba(0,0,0,.7); }

.tarjeta-club-cuerpo { display:flex; flex-direction:column; gap:16px; padding:44px 20px 20px; }
.tarjeta-club-nombre {
	font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.03em;
	color:var(--tx); line-height:1.2;
}
.tarjeta-club:hover .tarjeta-club-nombre { color:var(--color-club,var(--gold)); }

/* Puesto y puntos en cifras grandes: es lo que se viene a mirar. */
.tarjeta-club-datos {
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; margin:0;
	background:var(--line); overflow:hidden;
}
.dato-club {
	display:flex; flex-direction:column; align-items:center; gap:2px;
	padding:10px 6px; background:var(--s2);
}
.dato-club dd { margin:0; font-size:21px; line-height:1.1; color:var(--tx); }
.dato-club dt {
	font-family:var(--display); font-weight:600; font-size:9.5px;
	letter-spacing:.14em; text-transform:uppercase; color:var(--tx3);
}
.dato-club.destacado dd { color:var(--gold); }
.dato-club.lider dd { color:var(--gold); }

.tarjeta-club-plantilla { display:flex; gap:7px; flex-wrap:wrap; }
.tarjeta-club-enlace { font-size:12.5px; }

/* Temporadas */
.rejilla-temporadas { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; }
.tarjeta-temporada { padding:24px; display:flex; flex-direction:column; gap:14px; border-top:3px solid var(--season); }
.tarjeta-temporada-cabecera { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tarjeta-temporada-datos { display:flex; flex-direction:column; gap:12px; padding:20px 0; border-top:1px solid var(--linea-suave); border-bottom:1px solid var(--linea-suave); }
.tarjeta-temporada-datos .dato { flex-direction:row; justify-content:space-between; align-items:center; gap:12px; }
.tarjeta-temporada-datos .num { font-size:16px; }

/* ------------------------------------------------------------------ */
/* Movil                                                               */
/* ------------------------------------------------------------------ */

@media (max-width:1000px) {
	.hero-interior { grid-template-columns:minmax(0,1fr); gap:32px; padding:40px 0 48px; }
	/* Con la tarjeta debajo, el titular tiene todo el ancho. */
	.hero-texto h1 { font-size:clamp(44px, 9.4vw, 78px); }
	.rejilla-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.rejilla-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.dos-columnas { grid-template-columns:minmax(0,1fr); gap:48px; }
	.pie-columnas { gap:32px 40px; }
	.menu-principal a { padding:0 7px; font-size:12px; }
}

@media (max-width:760px) {
	body { font-size:15px; }

	.wrap { max-width:calc(100% - 32px); }

	.barra-sponsors { min-height:30px; font-size:11px; gap:8px; }
	/* En 390 px solo cabe el patrocinador principal, como en el diseño móvil. */
	.oculto-movil { display:none; }

	.cabecera { height:60px; background:var(--s1); }
	html { scroll-padding-top:80px; }
	.cabecera-interior { justify-content:flex-start; gap:12px; }
	.cabecera-estado { margin-left:auto; gap:8px; }
	.cabecera .logo-horizontal { width:auto; height:28px; }
	.abrir-menu { display:flex; flex:none; margin-right:-10px; }

	/* El menu se despliega bajo la cabecera. Funciona con una casilla oculta,
	   asi que no depende de JavaScript: si el JS falla, el menu sigue abriendo. */
	.menu-principal {
		display:none; position:absolute; left:0; right:0; top:100%;
		background:var(--s1); border-bottom:1px solid var(--line); padding:8px 0;
		max-height:calc(100vh - 90px); overflow-y:auto;
	}
	.menu-principal .lista-menu { flex-direction:column; gap:0; width:100%; }
	.menu-principal li { display:block; }
	.menu-principal a { --sangria-linea:16px; padding:14px 16px; font-size:15px; }
	.conmutador-menu:checked ~ .menu-principal { display:block; }

	.seccion, .seccion-primera { padding-top:48px; }
	.sec-head { flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:20px; }
	.sec-head h2 { font-size:22px; }

	.hero { padding:0; --arena:url('../img/arena-lectft-2026-1200.webp'); background-position:center,center,72% 30%; }
	.hero-interior { padding:32px 0 28px; gap:20px; }
	.hero-texto { gap:20px; }
	.hero-texto h1 { font-size:44px; }
	.hero-entradilla { font-size:16px; }
	.hero-botones { flex-direction:column; }
	.hero-botones .btn { justify-content:center; }
	.hero-halo { right:-160px; top:-160px; width:400px; height:400px; }

	.pagina-cabecera .wrap { padding:32px 0 0; gap:20px; }
	.pagina-cabecera h1 { font-size:38px; }
	.pagina-entradilla { font-size:15px; }
	.pagina-cabecera.sin-pestanas .wrap { padding-bottom:32px; }

	.rejilla-3, .rejilla-4 { grid-template-columns:minmax(0,1fr); gap:12px; }
	.podio { grid-template-columns:minmax(0,1fr); gap:10px; }

	.marcador-puntos { font-size:38px; }

	.tabs { overflow-x:auto; overflow-y:hidden; }
	/* El mismo paso que las secciones en movil. */
	.tabs-partidas { margin:36px 0 48px; }
	.tabs a { padding:14px; font-size:14px; }
	/* Tres pestañas largas («Reglamento», «Temporadas») caben en 390 px sin cortarse. */
	.pagina-cabecera .tabs { gap:0; }
	.pagina-cabecera .tabs a { padding:14px 11px; letter-spacing:.08em; }

	/* Las tablas se convierten en filas-tarjeta, como en los previews moviles:
	   una tabla de nueve columnas no cabe en 390 px de ninguna manera digna. */
	/* Cada fila se convierte en una tarjeta: arriba puesto, club y dato
	   principal; debajo, el resto de columnas en linea con su etiqueta. */
	.tabla-tarjetas thead { display:none; }
	.tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas td { display:block; width:100%; }
	.tabla-tarjetas tr {
		background:var(--s1); clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); padding:14px; margin-bottom:10px; height:auto;
		display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; row-gap:6px;
	}
	/* En escritorio el lider se destaca tinendo sus celdas, que ahi forman una
	   fila continua. En movil cada celda es un bloque suelto dentro de la
	   tarjeta, asi que ese tinte dibujaba un recuadro flotando detras del
	   nombre. La tarjeta entera se destaca con su franja dorada y las celdas
	   vuelven a ser transparentes. */
	.tabla-tarjetas tr.top { background:var(--s1); box-shadow:inset 3px 0 0 var(--gold); }
	.tabla-tarjetas tr.top td { background:none; }
	.tabla-tarjetas td { border:none; padding:0; width:auto; }

	.tabla-tarjetas td[data-etiqueta]::before {
		content:attr(data-etiqueta) " ";
		font-family:var(--display); font-weight:600; font-size:11px;
		letter-spacing:.12em; text-transform:uppercase; color:var(--tx3);
		margin-right:5px;
	}

	.tabla-tarjetas .celda-pos { order:1; min-width:22px; }
	.tabla-tarjetas .celda-cambio { order:2; }
	.tabla-tarjetas .celda-nombre { order:3; flex:1 1 auto; min-width:0; }
	.tabla-tarjetas .celda-principal { order:4; margin-left:auto; text-align:right; }

	/* Separador de ancho completo: obliga a las celdas secundarias a bajar de
	   linea sin tener que envolverlas en un contenedor que <table> no permite. */
	.tabla-tarjetas tr::before {
		content:""; order:5; flex:0 0 100%; height:0;
		border-top:1px solid var(--linea-suave); margin-top:4px;
	}
	.tabla-tarjetas .celda-secundaria {
		order:6; font-size:13px; text-align:left !important;
		display:inline-flex; align-items:center; white-space:nowrap;
	}
	.tabla-tarjetas .celda-oculta { display:none; }

	/* Una fila sin celdas secundarias no necesita separador. */
	.tabla-tarjetas.sin-secundarias tr::before { display:none; }

	.celda-club-nombre { font-size:16px; }
	.celda-jugador-nick { font-size:16px; }
	.tabla-tarjetas .pts-liga, .tabla-tarjetas .pts-destacados { font-size:22px; }

	/* La caja que envuelve la tabla pierde su relleno: el relleno lo pone ya
	   cada tarjeta, y sumados dejaban las tarjetas demasiado estrechas. */
	.caja-tabla { background:none; padding:0 !important; }


	/* Fichas y calendario en 390 px */
	.ficha-cabecera { gap:16px; }
	.ficha-cabecera .escudo-84 { width:56px; height:61px; }
	.ficha-cabecera .escudo-84 .escudo-dentro { width:52px; height:57px; font-size:19px; }

	.datos-fila { gap:20px; }
	.dato .num { font-size:19px; }

	.duelo { grid-template-columns:1fr auto 1fr; gap:10px; padding-bottom:28px; align-items:start; }
	.duelo-club { flex-direction:column; gap:10px; text-align:center; }
	/* Los escudos a la misma altura aunque un nombre ocupe dos lineas, y el
	   marcador a su nivel: mide lo mismo que el escudo en movil (53 px). */
	.duelo-centro .duelo-marcador { height:53px; }
	/* La fecha en una sola linea ensanchaba la columna central y apretaba los nombres. */
	.duelo-cuando { font-size:12px; line-height:1.4; max-width:118px; }
	.duelo-club-a .escudo { order:-1; }
	.duelo-club-a .duelo-textos { align-items:center; }
	.duelo-nombre { font-size:14px; }
	.duelo-puesto { display:none; }
	.duelo-marcador { font-size:34px; gap:8px; }
	.duelo-marcador .separador { font-size:20px; }
	.retransmisiones { grid-template-columns:minmax(0,1fr); gap:12px; }
	.emisiones-rejilla { grid-template-columns:minmax(0,1fr); gap:8px; }
	.emisiones-canal-club { margin-left:0; width:100%; }
	.canales-club-cabecera { padding:14px 16px; }
	.canales-lista { padding:4px 16px 8px; }
	.duelo .escudo-72 { width:48px; height:53px; }
	.duelo .escudo-72 .escudo-dentro { width:44px; height:49px; font-size:14px; }

	.resumen-partidas { grid-template-columns:1fr; gap:10px; }

	/* La fila del calendario se apila: seis columnas no caben en 390 px.
	   Los tres bloques de abajo van centrados en su columna, que antes el
	   marcador se quedaba pegado a la izquierda de la suya. */
	.fila-enf {
		grid-template-columns:1fr auto 1fr; grid-template-areas:
			"hora estado estado"
			"cluba marcador clubb"
			"accion accion accion";
		gap:14px 10px; padding:16px 14px; align-items:center;
	}
	.fila-enf-hora { grid-area:hora; justify-self:start; }
	.fila-enf-estado { grid-area:estado; grid-column:2 / -1; justify-self:end; }

	/* En toda la web el escudo va arriba y el nombre debajo, en los dos lados.
	   El club de la izquierda lleva el nombre primero en el HTML (en escritorio
	   van en fila, en espejo), asi que aqui se reordena. Los dos se alinean
	   arriba para que los escudos queden a la misma altura aunque un nombre
	   ocupe dos lineas, y el marcador se centra con los escudos. */
	.fila-enf-club { font-size:13px; flex-direction:column; text-align:center; gap:8px; justify-content:flex-start; align-self:start; }
	.fila-enf-club .escudo { order:-1; }
	.fila-enf-club.derecha { grid-area:cluba; }
	.fila-enf-club:not(.derecha) { grid-area:clubb; }

	.fila-enf-marcador { grid-area:marcador; font-size:24px; justify-content:center; justify-self:center; align-self:start; height:44px; }

	.fila-enf-accion { grid-area:accion; justify-content:center; padding-top:12px; margin-top:2px;
		border-top:1px solid var(--linea-suave); }

	.barras { height:120px; gap:5px; }
	.barra-valor { font-size:12px; }

	.barra-h { grid-template-columns:1fr 60px; grid-template-areas:"club valor" "carril carril"; gap:6px 12px; }
	.barra-h-club { grid-area:club; }
	.barra-h-valor { grid-area:valor; }
	.barra-h-carril { grid-area:carril; }

	.rejilla-temporadas { grid-template-columns:1fr; }
	.rejilla-clubes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
	.tarjeta-club-banda { height:64px; padding:0 14px; }
	.tarjeta-club-banda .escudo-64 { width:48px; height:53px; }
	.tarjeta-club-banda .escudo-64 .escudo-dentro { width:44px; height:49px; font-size:15px; }
	.tarjeta-club-cuerpo { padding:34px 14px 16px; gap:12px; }
	.tarjeta-club-nombre { font-size:15px; }
	.dato-club { padding:8px 4px; }
	.dato-club dd { font-size:17px; }
	.dato-club dt { font-size:9px; letter-spacing:.1em; }
	.tarjeta-club-plantilla { gap:5px; }

	.redes { gap:8px; padding-bottom:20px; }
	.miga { font-size:12px; gap:6px; }

	/* Pie en móvil.
	   La rejilla de cuatro columnas dejaba listas de dos palabras en columnas
	   de un dedo de ancho. Aquí la marca va arriba centrada, los patrocinadores
	   en una fila que se envuelve, y los tres menús se convierten en una sola
	   lista de enlaces separados por puntos: ocupan tres líneas en vez de
	   quince y se pulsan mejor. */
	.pie { margin-top:56px; }
	.pie-patrocinio .wrap { padding:32px 0 30px; gap:20px; }
	.pie-rotulo { gap:14px; font-size:10.5px; }
	.pie-sponsors-rejilla { gap:12px; }
	.pie-sponsor { flex:1 1 150px; max-width:230px; }
	.pie-sponsor .sponsor.grande { height:86px; padding:16px 18px; }
	.pie-sponsor .sponsor.grande img { max-height:42px; max-width:124px; }
	.pie-sponsor .sponsor.grande .sponsor-nombre { font-size:12px; }

	.pie-cuerpo { padding:34px 0 28px; }
	/* stretch: el align-items:start de escritorio encogia el bloque de la marca
	   a su contenido y lo dejaba pegado a la izquierda. */
	.pie-columnas { display:flex; flex-direction:column; align-items:stretch; gap:28px; text-align:center; }

	.pie-marca { align-items:center; gap:16px; max-width:none; }
	/* La pastilla del pie ocupa casi todo el ancho en un movil, asi que su
	   contenido tiene que ir centrado dentro de ella y poder partirse en dos
	   lineas: centrar la caja no basta cuando la caja llena la columna. */
	.pie-estado {
		align-self:center; margin-inline:auto; justify-content:center; flex-wrap:wrap;
		gap:6px 9px; padding:10px 14px; max-width:100%; text-align:center;
		font-size:10.5px; letter-spacing:.07em;
	}
	.pie-marca .marca { justify-content:center; }
	.pie-marca p { max-width:38ch; margin:0 auto; font-size:14px; }

	.pie-columna { gap:14px; }
	.pie-columna .lista-menu {
		flex-direction:row; flex-wrap:wrap; justify-content:center;
		gap:10px 18px; row-gap:12px;
	}
	.pie-columna .lista-menu li { position:relative; }
	/* Punto de separación entre enlaces, salvo tras el último de cada fila. */
	.pie-columna .lista-menu li:not(:last-child)::after {
		content:"·"; position:absolute; right:-11px; top:0; color:var(--tx3);
	}
	.pie-columna a { font-size:15px; padding:2px 0; }

	.pie-legal { flex-direction:column; gap:10px; text-align:center; padding:16px 0; }
}

/* ------------------------------------------------------------------ */
/* Ranking individual                                                  */
/* ------------------------------------------------------------------ */

.podio-columna { display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 24px; text-align:center; }
.podio-columna .podio-nick { font-size:24px; }
.podio-columna .podio-pts { font-size:42px; line-height:1; }
.podio-columna .podio-pts .dim { font-size:16px; }
.podio-club-linea { font-size:14px; display:inline-flex; gap:8px; align-items:center; justify-content:center; }
.podio-datos { display:flex; gap:20px; font-size:13px; flex-wrap:wrap; justify-content:center; }
.podio-datos b { color:var(--tx); }
.f-bronce { --frame:linear-gradient(135deg,#E9B38A,#8A5530); }

.celda-jugador { display:flex; align-items:center; gap:14px; }
.celda-jugador-textos { display:flex; flex-direction:column; line-height:1.3; }
.celda-jugador-nick { font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.05em; }
.celda-club-chica { display:flex; align-items:center; gap:8px; }
.escudo-24 { width:24px; height:26px; } .escudo-24 .escudo-dentro { width:20px; height:22px; font-size:8px; }
.escudo-84 { width:84px; height:92px; } .escudo-84 .escudo-dentro { width:80px; height:88px; font-size:29px; }
.enlace-kick { font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.enlace-kick svg { flex:none; fill:currentColor; }
.club-kick { display:inline-flex; align-items:center; gap:8px; }
.club-kick svg { flex:none; fill:currentColor; }
.enlace-kick:hover { color:var(--kick); }
.pts-destacados { font-size:20px; color:var(--gold); }
/* Media sin el minimo de partidas: se enseña, pero no compite. */
.media-sin-minimo { color:var(--tx3) !important; }

@media (max-width:760px) {
	.podio-columna { flex-direction:row; text-align:left; padding:18px; gap:16px; }
	.podio-columna .podio-textos { align-items:flex-start; }
	.podio-columna .podio-datos { justify-content:flex-start; }
	.podio-columna .podio-nick { font-size:20px; }
	.podio-columna .podio-pts { font-size:30px; }
}

/* ------------------------------------------------------------------ */
/* Contenido escrito en Gutenberg                                      */
/* ------------------------------------------------------------------ */

/* Las paginas de texto (formato, como participar, legales) las escribe la
   organizacion en el editor. Aqui solo se les da el ritmo de lectura del
   resto de la web. */
.texto { max-width:760px; }
.texto > * + * { margin-top:20px; }
.texto h2 { font-size:24px; margin-top:36px; }
.texto h3 { font-size:18px; margin-top:28px; }
.texto p, .texto li { color:var(--tx2); font-size:16px; line-height:1.72; }
.texto strong { color:var(--tx); }
.texto ul, .texto ol { padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.texto a { text-decoration:underline; text-underline-offset:3px; }
.texto blockquote {
	border-left:3px solid var(--season); padding-left:20px; margin-left:0;
	color:var(--tx2); font-style:normal;
}

.lista-ordenada { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:10px; color:var(--tx2); }
.lista-ordenada li::marker { color:var(--season); font-family:var(--display); font-weight:700; }

@media (max-width:760px) {
	.texto { padding:22px !important; }
	.texto h2 { font-size:20px; }
	.texto p, .texto li { font-size:15px; }
}

/* ------------------------------------------------------------------ */
/* Reproductor de Kick bajo demanda                                    */
/* ------------------------------------------------------------------ */

.reproductor { margin-bottom:40px; overflow:hidden; }

.reproductor-portada {
	display:block; width:100%; padding:0; border:0; background:none;
	color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.reproductor-portada .miniatura { height:auto; aspect-ratio:16/9; }
.reproductor-portada .miniatura img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.reproductor-play {
	position:relative; z-index:1;
	width:84px; height:84px; display:flex; align-items:center; justify-content:center;
	border-radius:50%; background:var(--kick); color:#07130A;
	box-shadow:0 8px 30px rgba(0,0,0,.45);
	transition:transform .18s ease;
}
/* En Twitch, el boton toma su morado. */
.reproductor.es-twitch .reproductor-play { background:#A970FF; color:#12061F; }
/* Sin miniatura, el rotulo de reserva quedaba pegado al boton de play: en el
   reproductor grande sobra, porque el badge morado ya dice que hay directo. */
.reproductor .miniatura-vacia { display:none; }
.reproductor-portada:hover .reproductor-play { transform:scale(1.08); }
.reproductor-portada:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }

.reproductor-pie { display:flex; align-items:center; gap:16px; padding:16px 20px; flex-wrap:wrap; }
.reproductor-textos { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.reproductor-titulo { font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.04em; }
.reproductor-aviso { font-size:12px; }

.reproductor-marco { display:block; width:100%; aspect-ratio:16/9; border:0; background:#000; }
.reproductor.reproduciendo .reproductor-alternativa { border-top:1px solid var(--linea-suave); }

.reproductor-alternativa { padding:14px 20px; }

@media (max-width:760px) {
	.reproductor-play { width:60px; height:60px; }
	.reproductor-pie { padding:14px; gap:10px; }
	.reproductor-titulo { font-size:15px; }
}

/* ------------------------------------------------------------------ */
/* Patrocinadores                                                      */
/* ------------------------------------------------------------------ */

.sponsor { display:inline-flex; align-items:center; justify-content:center; color:var(--tx2); }
.sponsor:hover { color:var(--tx); }
.sponsor img { display:block; max-height:22px; width:auto; object-fit:contain; }
/* En la barra de arriba los logos van pequenos: es una linea de 34px de alto
   y el logotipo no puede pesar mas que el propio menu. */
.barra-sponsors .sponsor img { max-height:16px; max-width:64px; }
.sponsor-nombre {
	font-family:var(--display); font-weight:700; font-size:12px;
	letter-spacing:.12em; text-transform:uppercase;
}
.sponsor.grande { height:96px; background:var(--s1); padding:14px; }
.sponsor.grande img { max-height:100%; max-width:100%; }
.sponsor.grande .sponsor-nombre { font-size:15px; }

/* ------------------------------------------------------------------ */
/* Formularios públicos                                                */
/* ------------------------------------------------------------------ */

.formulario { padding:36px 32px; display:flex; flex-direction:column; gap:44px; max-width:960px; }
.formulario fieldset { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; }
/* La linea del titulo cruza el ancho del bloque y deja aire antes del primer
   campo: pegada al texto de abajo, chocaba con la ayuda y con las etiquetas. */
.formulario legend {
	display:block; width:100%;
	font-family:var(--display); font-weight:700; font-size:20px;
	letter-spacing:.04em; text-transform:uppercase; padding:0 0 12px;
	border-bottom:2px solid var(--season); margin:0 0 20px;
}

/* Tres columnas fijas: con auto-fit cada bloque partia por un sitio y las
   filas quedaban descuadradas entre si. */
.campos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 20px; align-items:start; }
.campo { display:flex; flex-direction:column; gap:7px; margin:0; }
.campo-corto { max-width:200px; }
.campo label { font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx2); }
.req { color:var(--season); }

.formulario input[type="text"], .formulario input[type="email"],
.formulario input[type="url"], .formulario textarea {
	width:100%; padding:11px 14px;
	background:var(--s2); color:var(--tx);
	border:1px solid var(--line);
	font-family:var(--body); font-size:15px;
}
.formulario input:focus, .formulario textarea:focus {
	outline:none; border-color:var(--season);
	box-shadow:0 0 0 3px color-mix(in srgb,var(--season) 22%,transparent);
}
/* En rojo solo lo que el usuario ya ha tocado y ha dejado mal: con :invalid
   salian en rojo al cargar los campos obligatorios sin texto de ejemplo. */
.formulario input:user-invalid, .formulario textarea:user-invalid { border-color:var(--loss); }
.formulario textarea { resize:vertical; min-height:96px; }

.ayuda { font-size:12px; color:var(--tx3); line-height:1.5; }
.ayuda-bloque { font-size:14px; color:var(--tx2); margin:0 0 4px; max-width:78ch; line-height:1.6; }

.jugador {
	background:var(--s2); padding:22px;
	display:flex; flex-direction:column; gap:16px;
}
.jugador + .jugador { margin-top:-4px; }
.jugador-etiqueta {
	font-family:var(--display); font-weight:700; font-size:12px;
	letter-spacing:.14em; text-transform:uppercase; color:var(--season);
}
/* Los suplentes se pueden dejar en blanco y conviene que se vea de un vistazo. */
.jugador-opcional {
	margin-left:8px; color:var(--tx3); font-weight:600; letter-spacing:.1em;
}

/* Rejilla y no flex: con flex, cada trozo de texto y cada enlace del aviso se
   convertian en elementos independientes y el parrafo se partia en columnas
   estrechas. Con grid, la casilla ocupa su columna y el texto fluye entero. */
.campo-acepta label {
	display:grid; grid-template-columns:18px minmax(0,1fr); gap:12px; align-items:start;
	font-family:var(--body); font-size:14px; letter-spacing:0;
	text-transform:none; color:var(--tx2); line-height:1.6; cursor:pointer;
}
.campo-acepta input { margin:3px 0 0; width:18px; height:18px; accent-color:var(--season); }
.campo-acepta .texto-acepta { display:block; }

.formulario-envio { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

/* El campo trampa tiene que estar en el HTML pero fuera de la vista y del
   recorrido del teclado: si un lector de pantalla lo leyera, alguien podria
   rellenarlo de buena fe y quedarse fuera. */
.trampa { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.aviso { padding:28px; display:flex; flex-direction:column; gap:10px; max-width:760px; }
.aviso h2 { font-size:22px; }
.aviso-bien { box-shadow:inset 4px 0 0 var(--win); }
.aviso-mal { box-shadow:inset 4px 0 0 var(--loss); }

@media (max-width:980px) {
	.campos { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
	.formulario { padding:22px 20px; gap:32px; }
	.formulario legend { font-size:17px; padding-bottom:10px; margin-bottom:16px; }
	.campos { grid-template-columns:1fr; gap:18px; }
	.campo-corto { max-width:none; }
	.jugador { padding:16px; }
}

/* Pestaña de una partida sin resultados: se puede abrir igual, solo va algo
   más apagada y dice por qué está vacía. */
.tabs a.tab-sin-datos { color:var(--tx3); }
.tabs a.tab-sin-datos:hover { color:var(--tx2); }
.tabs a .dim { font-size:11px; letter-spacing:.08em; margin-left:6px; }

.nota-partida { font-size:13px; margin:20px 0 -4px; }

/* Fila sin resultado todavía: se lee que está ahí pero que no cuenta aún. */
.fila-sin-datos td { opacity:.62; }
.fila-sin-datos:hover td { opacity:1; }

/* Campos de fichero: el control nativo del navegador es feo pero es el que
   todo el mundo reconoce y el único que funciona sin JavaScript. Se le da el
   aspecto de la web sin sustituirlo. */
.campo-imagen input[type="file"] {
	width:100%; padding:10px 12px;
	background:var(--s2); color:var(--tx2);
	border:1px dashed var(--line);
	font-family:var(--body); font-size:13px; cursor:pointer;
}
.campo-imagen input[type="file"]:hover { border-color:var(--season); color:var(--tx); }
.campo-imagen input[type="file"]:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.campo-imagen input[type="file"]::file-selector-button {
	margin-right:12px; padding:6px 12px;
	background:var(--s3); color:var(--tx); border:0;
	font-family:var(--display); font-weight:600; font-size:12px;
	letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
}
.campo-imagen input[type="file"]::file-selector-button:hover { background:var(--line); }
/* Lo que inscripcion.js cuenta de cada imagen al elegirla. */
.estado-imagen { display:block; margin-top:6px; color:var(--tx2); }
.estado-imagen.es-error { color:var(--loss); }

/* ------------------------------------------------------------------ */
/* Globo de ayuda                                                      */
/* ------------------------------------------------------------------ */

.pastilla-set { position:relative; color:var(--tx2); transition:color .18s ease, border-color .18s ease; }
.pastilla-set:hover, .pastilla-set:focus-visible { color:var(--tx); border-color:var(--season); }
.pastilla-punto {
	width:8px; height:8px; border-radius:50%; background:var(--season); flex:none;
	transition:box-shadow .25s ease;
}
.pastilla-set:hover .pastilla-punto { box-shadow:0 0 0 4px color-mix(in srgb,var(--season) 22%,transparent); }

/* El globo sustituye al title del navegador: aquel tarda casi un segundo en
   aparecer, sale donde el sistema quiere y no se puede pintar. */
.globo {
	position:absolute; top:calc(100% + 11px); left:50%;
	transform:translate(-50%,-5px) scale(.97);
	background:var(--s2); color:var(--tx);
	border:1px solid var(--line);
	padding:8px 13px; white-space:nowrap;
	font-family:var(--body); font-weight:500; font-size:12.5px;
	letter-spacing:.01em; text-transform:none; line-height:1;
	box-shadow:0 14px 30px -12px rgba(0,0,0,.8);
	opacity:0; pointer-events:none; z-index:40;
	transition:opacity .17s ease, transform .17s cubic-bezier(.22,.61,.36,1);
}

/* Dos triangulos superpuestos: el de abajo hace de borde y el de arriba tapa
   su interior, que es como se dibuja una punta con borde sin usar imagenes. */
.globo::before, .globo::after {
	content:""; position:absolute; bottom:100%; left:50%;
	border:6px solid transparent;
}
.globo::before { transform:translateX(-50%); border-bottom-color:var(--line); }
.globo::after { transform:translateX(-50%) translateY(1.5px); border-width:5px; border-bottom-color:var(--s2); }

.pastilla-set:hover .globo,
.pastilla-set:focus-visible .globo,
.con-globo:hover .globo,
.con-globo:focus-visible .globo,
.con-globo:focus-within .globo {
	opacity:1; transform:translate(-50%,0) scale(1);
}

/* Cualquier elemento puede llevar un globo. En una cabecera de tabla sirve
   para explicar qué mide esa columna sin gastar una línea de texto debajo. */
.con-globo { position:relative; cursor:help; border-bottom:1px dotted var(--tx3); }
/* Las casillas de resultado por jornada tambien llevan globo, pero sin el
   subrayado de puntos: ahi el globo se descubre pasando por encima. */
.form .con-globo { border-bottom:0; }
.form a { color:inherit; }

/* El globo de las casillas sale al lado, no debajo. Debajo se salia de la
   tarjeta en la ultima fila y, al estar la tabla en una caja con scroll,
   aparecia una barra de desplazamiento vertical de la nada. Al lado cabe
   dentro de la propia fila y no desborda nada. */
.form .globo {
	top:50%; left:auto; right:calc(100% + 11px);
	transform:translate(5px,-50%) scale(.97);
	white-space:nowrap; text-align:left; line-height:1.5; font-size:12px; padding:7px 11px;
}
.form .con-globo:hover .globo,
.form .con-globo:focus-visible .globo,
.form .con-globo:focus-within .globo { transform:translate(0,-50%) scale(1); }
.form .globo::before, .form .globo::after {
	bottom:auto; top:50%; left:100%; transform:translateY(-50%);
	border-bottom-color:transparent;
}
.form .globo::before { border-left-color:var(--line); }
.form .globo::after { left:100%; right:auto; transform:translateY(-50%) translateX(-1.5px); border-left-color:var(--s2); }

.con-globo .globo { white-space:normal; width:max-content; max-width:260px; line-height:1.5; text-align:left; }
.tbl th .globo { text-transform:none; letter-spacing:.01em; font-weight:400; }

/* En la primera y la última columna el globo se saldría de la tabla. */
.tbl th:last-child .globo { left:auto; right:0; transform:translate(0,-5px) scale(.97); }
.tbl th:last-child .globo::before,
.tbl th:last-child .globo::after { left:auto; right:18px; }
.tbl th:last-child.con-globo:hover .globo,
.tbl th:last-child.con-globo:focus-within .globo { transform:translate(0,0) scale(1); }

@media (prefers-reduced-motion:reduce) {
	.globo { transition:opacity .01s linear; transform:translate(-50%,0) scale(1); }
	.pastilla-set, .pastilla-punto { transition:none; }
}

/* ------------------------------------------------------------------ */
/* Los tres primeros del ranking                                       */
/* ------------------------------------------------------------------ */

/* Se marcan dentro de la propia lista, con su metal, en vez de sacarlos a un
   podio aparte: así se comparan con el cuarto de un vistazo y en el móvil no
   hay que pasar por encima de tres tarjetas para llegar a la tabla. */
.podio-fila { --metal:var(--tx2); }
.podio-oro { --metal:#F0B43C; }
.podio-plata { --metal:#C9D1DC; }
.podio-bronce { --metal:#CD8B5A; }

.podio-fila td { background:color-mix(in srgb,var(--metal) 6%,transparent); }
.podio-fila td:first-child { box-shadow:inset 3px 0 0 var(--metal); }
/* Quien aun no ha jugado sale en la tabla para que la lista cuadre con la
   plantilla, pero apagado: no esta clasificado. */
.fila-sin-jugar { color:var(--tx3); }
.fila-sin-jugar .celda-jugador-nick, .fila-sin-jugar .muted { color:var(--tx2); }
.podio-fila .pos-numero { color:var(--metal); font-size:20px; }
.podio-fila .celda-jugador-nick { color:var(--tx); }

.celda-pos .medalla { color:var(--metal); display:inline-flex; vertical-align:middle; margin-right:7px; }
.celda-pos .medalla .gem { width:13px; height:15px; }
.pos-numero { font-variant-numeric:tabular-nums; }

@media (max-width:760px) {
	.tabla-tarjetas tr.podio-fila { background:var(--s1); box-shadow:inset 3px 0 0 var(--metal); }
	.tabla-tarjetas tr.podio-fila td { background:none; box-shadow:none; }
	.podio-fila .pos-numero { font-size:18px; }
	.celda-pos .medalla { margin-right:4px; }
}

/* ------------------------------------------------------------------ */
/* Listado de jugadores                                                */
/* ------------------------------------------------------------------ */

/* Cinco por fila en escritorio: una plantilla entera por línea, que es como
   se piensa en un club. Al estrecharse baja a tres y luego a dos, nunca a un
   listado de una columna con el que hay que rodar media pantalla por club. */
.bloque-club { margin-bottom:44px; }
.bloque-club:last-child { margin-bottom:0; }

.bloque-club-cabecera {
	display:flex; align-items:center; gap:14px; flex-wrap:wrap;
	padding:0 0 16px; margin-bottom:18px;
	border-bottom:1px solid var(--line);
}
.bloque-club-titulo { display:flex; align-items:center; gap:12px; color:var(--tx); min-width:0; }
.bloque-club-titulo:hover { color:var(--tx); }
.bloque-club-titulo:hover h2 { color:var(--color-club,var(--gold)); }
.bloque-club-cabecera h2 { font-size:19px; transition:color .18s ease; }
.bloque-club-puesto {
	margin-left:auto; font-family:var(--display); font-weight:600; font-size:12px;
	letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}

.rejilla-plantilla { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }

.ficha-jugador {
	position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px;
	min-height:126px; padding:17px 18px; background:var(--s1);
	color:var(--tx); transition:background .18s ease;
}
/* El hover es el mismo gesto que en el menu: una linea que crece abajo. Nada
   de contornos alrededor de la tarjeta; sobre un fondo con transparencia la
   sombra se colaba por dentro y tenia la tarjeta entera del color del filo. */
.ficha-jugador::after, .ficha-plantilla::after {
	content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
	background:var(--color-club,var(--gold));
	transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.ficha-jugador:hover::after, .ficha-plantilla:hover::after { transform:scaleX(1); }
.ficha-jugador.emitiendo::after, .ficha-plantilla.emitiendo::after { background:var(--kick); }
/* Lo mismo en morado para quien solo emite en Twitch. */
.ficha-jugador.emitiendo-twitch::after, .ficha-plantilla.emitiendo-twitch::after { background:#A970FF; }
.ficha-jugador.emitiendo-twitch { background:linear-gradient(180deg,color-mix(in srgb,#A970FF 10%,var(--s1)),var(--s1) 45%); }
.ficha-jugador.emitiendo-twitch::before {
	content:""; position:absolute; left:0; right:0; top:0; height:2px; background:#A970FF;
}

.ficha-jugador:not(.emitiendo):not(.emitiendo-twitch):hover { background:var(--s2); }
.ficha-jugador:hover { color:var(--tx); }
.ficha-jugador:hover .ficha-jugador-nick { color:var(--color-club,var(--gold)); }

/* Quien está emitiendo lleva un filo verde arriba: se localiza de un vistazo
   en una parrilla de cuarenta tarjetas sin tener que leer ninguna. El verde
   del fondo va mezclado con el panel, no superpuesto en transparente. */
.ficha-jugador.emitiendo { background:linear-gradient(180deg,color-mix(in srgb,var(--kick) 8%,var(--s1)),var(--s1) 45%); }
.ficha-jugador.emitiendo::before {
	content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--kick);
}

.ficha-jugador-cabecera { display:flex; align-items:center; gap:11px; min-width:0; }
.ficha-jugador-textos { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ficha-jugador-nick {
	font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.04em;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .18s ease;
}
.ficha-jugador-rol { font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ficha-jugador-pie { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.ficha-jugador-pts { display:flex; align-items:baseline; gap:4px; }
.ficha-jugador-pts .num { font-size:21px; color:var(--gold); }
.ficha-jugador-pts .dim { font-family:var(--display); font-weight:600; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.ficha-jugador-pie .live { font-size:10px; letter-spacing:.08em; }
.ficha-jugador-pie .estado-offline { font-size:10px; }

/* Punto del color del club en su píldora de filtro. */
.pill-punto { width:7px; height:8px; flex:none; background:var(--color-club,var(--tx3));
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.pill.on .pill-punto { background:var(--color-club,var(--season)); }

@media (max-width:1180px) { .rejilla-plantilla { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
	.rejilla-plantilla { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
	.ficha-jugador { min-height:0; padding:13px; gap:14px; }
	.ficha-jugador-nick { font-size:14px; }
	.ficha-jugador-pts .num { font-size:19px; }
	.bloque-club { margin-bottom:34px; }
	.bloque-club-cabecera { padding-bottom:12px; margin-bottom:14px; gap:10px; }
	.bloque-club-cabecera h2 { font-size:16px; }
	.bloque-club-puesto { font-size:11px; }
}
@media (max-width:400px) { .rejilla-plantilla { grid-template-columns:minmax(0,1fr); } }

/* Entre 1100 y 760 px caben dos por fila; tres dejaría la fila huérfana que
   precisamente se quería evitar. */
@media (max-width:1100px) and (min-width:761px) {
	.rejilla-clubes { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:430px) {
	.rejilla-clubes { grid-template-columns:minmax(0,1fr); }
}

/* ------------------------------------------------------------------ */
/* Ficha de club                                                       */
/* ------------------------------------------------------------------ */

.club-hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
/* El color del club tiñe la cabecera sin llegar a inundarla: suficiente para
   reconocerlo de un vistazo, poco para que el texto pierda contraste. */
.club-hero-tinte {
	position:absolute; inset:0; pointer-events:none;
	background:
		radial-gradient(90% 180% at 12% 0%, color-mix(in srgb,var(--color-club) 52%,transparent), transparent 62%),
		linear-gradient(180deg, color-mix(in srgb,var(--color-club) 16%,transparent), transparent 70%);
}
.club-hero::after {
	content:""; position:absolute; inset:0; pointer-events:none;
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'56'%20height%3D'97'%20viewBox%3D'0%200%2056%2097'%3E%3Cpath%20d%3D'M28%200%20L56%2016%20L56%2048%20L28%2064%20L0%2048%20L0%2016%20Z%20M28%2064%20L28%2097%20M0%2081%20L28%2097%20L56%2081'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-opacity%3D'0.05'%20stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E");
	background-size:56px 97px;
}

.club-hero-interior {
	position:relative; z-index:1;
	display:flex; align-items:center; gap:28px; flex-wrap:wrap;
	padding:48px 0 44px;
}
.club-hero-textos { display:flex; flex-direction:column; gap:12px; min-width:0; flex:1; }
.club-hero-textos h1 { font-size:clamp(30px,4.4vw,46px); }

.club-datos { display:flex; gap:40px; flex-wrap:wrap; margin:8px 0 0; }
.club-datos .dato-club { align-items:flex-start; padding:0; background:none; gap:4px; }
.club-datos dt {
	font-family:var(--display); font-weight:600; font-size:10.5px;
	letter-spacing:.16em; text-transform:uppercase; color:var(--tx3); order:0;
}
.club-datos dd { margin:0; font-size:30px; line-height:1; order:1; }
.club-datos .destacado dd, .club-datos .lider dd { color:var(--gold); }

.club-hero-enlaces { display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.club-kick { height:42px; font-size:13px; text-transform:none; letter-spacing:.04em; }
.club-hero-enlaces .redes-iconos { justify-content:flex-end; }

/* Plantilla: cinco fichas en fila, una por jugador. */
.rejilla-plantilla-club { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }

/* Mismo esqueleto que las tarjetas de enfrentamiento de la portada: cabecera
   con el rol y el estado, cuerpo centrado y un enlace al pie. */
.ficha-plantilla {
	position:relative; display:flex; flex-direction:column; gap:16px; padding:18px;
	background:var(--s1);
}
.ficha-plantilla.emitiendo {
	background:linear-gradient(180deg,color-mix(in srgb,var(--kick) 8%,var(--s1)),var(--s1) 45%);
	box-shadow:inset 0 2px 0 var(--kick);
}
/* Emitiendo solo en Twitch: lo mismo en morado. */
.ficha-plantilla.emitiendo-twitch {
	background:linear-gradient(180deg,color-mix(in srgb,#A970FF 10%,var(--s1)),var(--s1) 45%);
	box-shadow:inset 0 2px 0 #A970FF;
}
.ficha-plantilla.emitiendo-twitch::after { background:#A970FF; }

.ficha-plantilla-cabecera { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:18px; }
.ficha-plantilla-rol {
	font-family:var(--display); font-weight:600; font-size:11px;
	letter-spacing:.12em; text-transform:uppercase;
}
.ficha-plantilla .live { font-size:11px; letter-spacing:.1em; gap:6px; }
.ficha-plantilla .live i { width:7px; height:7px; }
/* La ficha es estrecha: el numero de espectadores no cabe al lado del rol. */
.ficha-plantilla .live .muted { display:none; }

.ficha-plantilla-cuerpo {
	display:flex; flex-direction:column; align-items:center; gap:10px;
	text-align:center; color:var(--tx);
}
.ficha-plantilla-cuerpo:hover { color:var(--tx); }
.ficha-plantilla-cuerpo:hover .ficha-plantilla-nick { color:var(--color-club,var(--gold)); }
.ficha-plantilla-nick { font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.04em; line-height:1.15; }
.ficha-plantilla-pts { font-size:30px; line-height:1; color:var(--gold); }
.ficha-plantilla-pts .dim { font-size:11px; font-family:var(--display); font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.ficha-plantilla-puesto {
	font-family:var(--display); font-weight:600; font-size:11px;
	letter-spacing:.08em; text-transform:uppercase;
}
.ficha-plantilla-pie { display:flex; justify-content:center; margin-top:auto; font-size:12.5px; letter-spacing:.1em; }
.ficha-plantilla-pie.en-kick { color:var(--kick); }
.ficha-plantilla-pie.en-kick:hover { color:#7BFF52; }
.ficha-plantilla-pie.en-twitch { color:#A970FF; }
.ficha-plantilla-pie.en-twitch:hover { color:#C9A6FF; }

/* Resultados y estadísticas, lado a lado. */
.club-dos-columnas { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:32px; margin-top:56px; }
.club-fecha { font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--season); white-space:nowrap; }

.rejilla-estadisticas { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
/* El enlace cierra la columna, debajo de las cuatro cajas. */
.enlace-bajo { justify-content:center; margin-top:18px; font-size:13px; }
.tarjeta-estadistica {
	display:flex; flex-direction:column; gap:14px;
	padding:20px; background:var(--s1);
}
.tarjeta-estadistica-rotulo {
	display:flex; align-items:center; gap:8px;
	font-family:var(--display); font-weight:600; font-size:10.5px;
	letter-spacing:.14em; text-transform:uppercase; color:var(--tx3);
}
.punto-estadistica {
	width:9px; height:10px; flex:none; background:var(--color-club,var(--season));
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.tarjeta-estadistica-valor { font-size:32px; line-height:1; }

@media (max-width:1100px) {
	.rejilla-plantilla-club { grid-template-columns:repeat(3,minmax(0,1fr)); }
	.club-dos-columnas { grid-template-columns:minmax(0,1fr); gap:48px; }
	.rejilla-estadisticas { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
	.club-hero-interior { padding:32px 0 28px; gap:18px; }
	.club-hero-interior .escudo-84 { width:56px; height:61px; }
	.club-hero-interior .escudo-84 .escudo-dentro { width:52px; height:57px; font-size:19px; }
	.club-datos { gap:22px 26px; }
	.club-datos dd { font-size:22px; }
	.club-hero-enlaces { align-items:stretch; width:100%; }
	.club-hero-enlaces .redes-iconos { justify-content:flex-start; }

	.rejilla-plantilla-club { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
	.ficha-plantilla { padding:14px 12px 12px; gap:12px; }
	.ficha-plantilla .escudo-48 { width:42px; height:46px; }
	.ficha-plantilla .escudo-48 .escudo-dentro { width:38px; height:42px; font-size:13px; }
	.ficha-plantilla-nick { font-size:14px; }
	.ficha-plantilla-pts { font-size:24px; }
	.ficha-plantilla-pie { font-size:11.5px; }
	.ficha-plantilla-cabecera { flex-wrap:wrap; row-gap:4px; }
	.ficha-plantilla-rol, .ficha-plantilla .live { font-size:10px; letter-spacing:.08em; }

	.club-dos-columnas { margin-top:40px; }
	.rejilla-estadisticas { gap:10px; }
	.tarjeta-estadistica { padding:15px; gap:10px; }
	.tarjeta-estadistica-valor { font-size:25px; }
}

/* Fila de filtros con dos grupos: las píldoras a la izquierda y el desplegable
   de club a la derecha. */
.filtros-ranking { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.filtros-grupo { display:flex; gap:6px; flex-wrap:wrap; }
.filtro-club { display:flex; align-items:center; gap:8px; }

.select-pill {
	appearance:none; -webkit-appearance:none;
	background:var(--s1); color:var(--tx2);
	padding-right:34px; cursor:pointer; max-width:100%;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239AA3B8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 12px center;
}
.select-pill:hover { color:var(--tx); border-color:var(--tx2); }
.select-pill option { background:var(--s1); color:var(--tx); }

@media (max-width:760px) {
	.filtros-ranking { flex-direction:column; align-items:stretch; gap:12px; }
	.filtros-grupo { overflow-x:auto; overflow-y:hidden; padding-bottom:2px; }
	.filtro-club, .select-pill { width:100%; }
}

/* ------------------------------------------------------------------ */
/* Página de formato                                                   */
/* ------------------------------------------------------------------ */

/* Las cuatro ideas base. El número sí es una secuencia real: hay que
   entenderlas en ese orden para que la siguiente tenga sentido. */
.claves { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.clave {
	display:flex; flex-direction:column; gap:10px; padding:22px 20px;
	background:var(--s1);
}
.clave-numero { font-size:30px; color:var(--season); line-height:1; }
.clave-titulo { font-size:15px; letter-spacing:.06em; }
.clave-texto { font-size:13.5px; line-height:1.6; }

.formato-dos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:24px; }

.panel-formato {
	display:flex; flex-direction:column; gap:12px; padding:28px;
	background:var(--s1);
}
.panel-formato h2 { font-size:24px; }
.panel-formato > .muted { font-size:14.5px; line-height:1.6; }

/* El lobby dibujado: ocho sitios alternando club, que es lo que cuesta
   explicar con palabras y se entiende de un vistazo. */
.lobby { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:10px; }
.lobby-sitio { display:flex; align-items:center; justify-content:center; }
.lobby-hex {
	width:100%; max-width:78px; aspect-ratio:1/1.1;
	display:flex; align-items:center; justify-content:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:linear-gradient(160deg, var(--color-club), color-mix(in srgb,var(--color-club) 42%, var(--bg)));
	font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.05em; color:#fff;
}
.lobby-leyenda { display:flex; gap:20px; flex-wrap:wrap; margin-top:6px; font-size:13px; color:var(--tx2); }
.lobby-leyenda-club { display:inline-flex; align-items:center; gap:8px; }
.lobby-punto {
	width:9px; height:10px; background:var(--color-club);
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* Puntos por posición, en dos columnas. */
.tabla-posiciones {
	list-style:none; margin:8px 0 0; padding:0;
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px;
}
.posicion-fila {
	display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px;
	padding:9px 12px; background:var(--s2);
}
.posicion-chapa {
	width:22px; height:22px; display:flex; align-items:center; justify-content:center;
	background:var(--s3); color:var(--tx2); font-size:11px;
}
.posicion-texto { font-size:13px; color:var(--tx2); }
.posicion-puntos { font-size:17px; color:var(--tx); }
/* Los puestos que entran en el corte llevan el dorado de la liga. */
.en-top .posicion-chapa { background:var(--gold); color:#1A1204; }
.en-top .posicion-puntos { color:var(--gold); }

/* Tira de rondas. */
.tira-rondas { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.tira-ronda {
	display:flex; flex-direction:column; gap:6px; padding:17px 16px;
	background:var(--s1);
}
.tira-ronda-numero {
	font-family:var(--display); font-weight:600; font-size:10.5px;
	letter-spacing:.14em; text-transform:uppercase; color:var(--tx3);
}
.tira-ronda-fecha { font-size:15px; }
.tira-ronda-estado { font-size:11.5px; }
.tira-ronda.ronda-hecha { opacity:.62; }
.tira-ronda.ronda-actual { box-shadow:inset 0 2px 0 var(--season); }
.tira-ronda.ronda-actual .tira-ronda-estado { color:var(--season); }

/* Premios. */
/* Una sola caja mientras no haya mas que el prize pool; si vuelve a haber dos
   bloques, se reparten como antes. */
.premios { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; max-width:520px; }
.premios:has(.premio-bonus) { grid-template-columns:minmax(0,7fr) minmax(0,5fr); max-width:none; }
/* Con los premios individuales al lado, la bolsa deja de ir sola. */
.premios:has(.premio-objetivos-mini) { grid-template-columns:minmax(0,6fr) minmax(0,6fr); max-width:none; }
.premio-objetivos-mini { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.premio-mini {
	display:flex; flex-direction:column; gap:4px; padding:18px; background:var(--s1); color:var(--tx);
	clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
	transition:background .18s ease;
}
.premio-mini:hover { background:var(--s2); color:var(--tx); }
.premio-mini-importe { font-size:24px; color:var(--gold); line-height:1; }
.premio-mini-nombre { font-family:var(--display); font-weight:700; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; }
.premio-mini-pie { font-size:11.5px; }

@media (max-width:760px) {
	.premios:has(.premio-objetivos-mini) { grid-template-columns:minmax(0,1fr); }
}
.premio-total {
	display:flex; flex-direction:column; gap:10px; padding:28px;
	background:linear-gradient(135deg, color-mix(in srgb,var(--gold) 12%,var(--s1)), var(--s1) 65%);
	box-shadow:inset 0 2px 0 var(--gold);
}
.premio-cifra { font-size:clamp(34px,5vw,52px); color:var(--gold); line-height:1; }
.premio-bonus {
	display:flex; flex-direction:column; gap:10px; padding:24px;
	background:var(--s1); box-shadow:inset 0 2px 0 var(--kick);
}
.premio-bonus .muted { font-size:14px; line-height:1.6; }

/* Clubes participantes. */
.rejilla-participantes { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:14px; }
.participante {
	display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 10px;
	color:var(--tx2); text-align:center;
	transition:background .18s ease, color .18s ease, transform .18s cubic-bezier(.22,.61,.36,1);
}
/* Aqui no va contorno: en reposo la caja es transparente, asi que mientras el
   fondo entra la sombra sigue la silueta del escudo y del texto en vez de la
   de la caja, y se ve un destello de color. Basta con que entre el fondo. */
.participante:hover { background:var(--s1); color:var(--tx); transform:translateY(-2px); }
.participante-nombre { font-size:12px; line-height:1.3; }

/* Preguntas frecuentes. Con <details> se abren sin JavaScript. */
.faqs { display:flex; flex-direction:column; gap:8px; margin-top:6px; }

/* «Cómo participar»: a la izquierda lo que es la liga, fijo mientras se lee, y
   a la derecha las preguntas, que son lo que se despliega. */
.participar { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; align-items:start; }
.participar-intro { position:sticky; top:100px; }
.participar-intro .texto p { font-size:15.5px; }
.participar-preguntas .faqs { margin-top:0; }
@media (max-width:900px) {
	.participar { grid-template-columns:minmax(0,1fr); gap:22px; }
	.participar-intro { position:static; }
}
.faq { background:var(--s2); overflow:hidden; }
.faq summary {
	display:flex; align-items:center; justify-content:space-between; gap:14px;
	padding:15px 18px; cursor:pointer; list-style:none;
	font-size:14.5px; font-weight:600; color:var(--tx);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--gold); }
.faq-cuerpo { display:flex; flex-direction:column; gap:10px; padding:0 18px 17px; }
.faq-cuerpo p { margin:0; font-size:14px; line-height:1.65; }
.faq-lista { margin:0; padding-left:19px; display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:1.6; }
.faq-lista li::marker { color:var(--tx3); }
.faq-lista strong { color:var(--tx); font-weight:600; }

/* El panel de «Cómo participar» ocupa todo el ancho del contenido. */
.panel-ancho .texto { max-width:none; }

/* El signo se dibuja con dos trazos: el vertical desaparece al abrirse. */
.faq-signo { position:relative; width:13px; height:13px; flex:none; }
.faq-signo::before, .faq-signo::after {
	content:""; position:absolute; background:var(--tx3); transition:transform .2s ease, opacity .2s ease;
}
.faq-signo::before { left:0; right:0; top:6px; height:1.5px; }
.faq-signo::after { top:0; bottom:0; left:6px; width:1.5px; }
.faq[open] .faq-signo::after { transform:scaleY(0); opacity:0; }

.texto-ancho { max-width:none; }
.texto-ancho > *:first-child { margin-top:0; }

@media (prefers-reduced-motion:reduce) {
	.faq-signo::before, .faq-signo::after { transition:none; }
}

@media (max-width:1100px) {
	.claves { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.formato-dos { grid-template-columns:minmax(0,1fr); }
	.tira-rondas { grid-template-columns:repeat(4,minmax(0,1fr)); }
	.premios { grid-template-columns:minmax(0,1fr); }
	.rejilla-participantes { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:760px) {
	.claves { grid-template-columns:minmax(0,1fr); gap:10px; }
	.clave { padding:16px; gap:8px; }
	.clave-numero { font-size:24px; }
	.panel-formato { padding:20px; }
	.panel-formato h2 { font-size:20px; }
	.lobby { gap:10px; }
	.lobby-hex { max-width:62px; font-size:12px; }
	.tabla-posiciones { grid-template-columns:minmax(0,1fr); gap:6px; }
	.tira-rondas { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.premio-total { padding:20px; }
	.rejilla-participantes { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.faq summary { padding:13px 15px; font-size:14px; }
	.faq p { padding:0 15px 15px; }
}

/* ------------------------------------------------------------------ */
/* Página de premios                                                   */
/* ------------------------------------------------------------------ */

.premios-provisional { align-self:flex-start; width:max-content; margin-top:14px; background:color-mix(in srgb,var(--season) 16%,transparent); color:var(--season); }

/* La bolsa: la cifra grande a la izquierda y quien la pone a la derecha. */
.premio-bolsa {
	display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
	padding:32px 36px;
	background:linear-gradient(135deg, color-mix(in srgb,var(--gold) 14%,var(--s1)), var(--s1) 60%);
	box-shadow:inset 0 2px 0 var(--gold);
}
.premio-bolsa-cifra { display:flex; flex-direction:column; gap:12px; max-width:560px; }
.premio-bolsa .premio-cifra { font-size:clamp(48px,8vw,84px); }
.premio-bolsa-cifra .muted { font-size:15px; line-height:1.6; }
.premio-bolsa-sponsor { display:flex; flex-direction:column; align-items:center; gap:12px; }
.premio-patrocina { font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; }
.premio-sponsor-logo { display:flex; align-items:center; justify-content:center; width:220px; height:90px; }
.premio-sponsor-logo img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }

/* Podio: el 1º en medio y mas alto, el 2º a la izquierda y el 3º a la
   derecha. En el HTML van en orden; esto solo los coloca. */
.premio-podio {
	list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:end;
}
.premio-puesto {
	display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
	padding:26px 18px 22px; background:var(--s1);
}
.premio-puesto-1 { order:2; padding-top:40px; padding-bottom:30px; background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 16%,var(--s1)),var(--s1) 70%); box-shadow:inset 0 2px 0 var(--gold); }
.premio-puesto-2 { order:1; box-shadow:inset 0 2px 0 #C9D1E6; }
.premio-puesto-3 { order:3; box-shadow:inset 0 2px 0 #D08A4E; }
.premio-puesto-numero { font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.12em; color:var(--tx2); }
.premio-puesto-importe { font-size:clamp(26px,3.4vw,38px); color:var(--tx); line-height:1; }
.premio-puesto-1 .premio-puesto-importe { font-size:clamp(32px,4.4vw,50px); color:var(--gold); }

/* Quien ocupa ahora cada puesto: pista, no ganador. */
.premio-ahora { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--tx2); }
.premio-ahora .dim { font-family:var(--display); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; }
.premio-ahora:hover { color:var(--tx); }

.premio-resto { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.premio-resto-fila { display:flex; align-items:center; gap:18px; padding:14px 22px; background:var(--s1); }
.premio-resto-puesto { font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.1em; color:var(--tx2); width:36px; }
.premio-resto-importe { margin-left:auto; font-size:20px; }

/* Premios por objetivos. */
/* Dos columnas: con cuatro premios, tres por fila dejaban uno solo abajo. */
.rejilla-premios { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.premio-objetivo { display:flex; flex-direction:column; gap:12px; padding:22px; background:var(--s1); }
.premio-objetivo.es-otorgado { box-shadow:inset 0 2px 0 var(--gold); }
.premio-objetivo-cabecera { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.premio-en-juego { background:color-mix(in srgb,var(--season) 16%,transparent); color:var(--season); }
.premio-objetivo-para { font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.premio-objetivo-nombre { font-size:20px; }
.premio-objetivo-texto { font-size:14px; line-height:1.6; margin:0; }
/* Quien va ganando cada premio, o la interrogacion de los que se votan. */
.premio-objetivo-lider { display:flex; flex-direction:column; gap:4px; }
.premio-objetivo-rotulo { font-family:var(--display); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; }
.premio-ganador { color:var(--gold); font-weight:600; }
.premio-ganador:hover { color:var(--tx); }
.premio-incognita {
	font-family:var(--display); font-weight:700; font-size:26px; line-height:1; color:var(--tx3);
}
.premio-objetivo-pie { margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--linea-suave); }
.premio-objetivo-importe { font-size:26px; color:var(--gold); }
.premio-objetivo-sponsor { display:flex; align-items:center; justify-content:flex-end; width:96px; height:34px; }
.premio-objetivo-sponsor img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }

.premios-bases { margin-top:48px; padding:26px 28px; background:var(--s1); display:flex; flex-direction:column; gap:14px; }
.premios-bases-titulo { font-size:18px; }
.premios-bases-lista { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:14.5px; line-height:1.6; color:var(--tx2); }
.premios-bases-lista strong { color:var(--tx); }
.premios-bases .more { align-self:flex-start; }

@media (max-width:900px) {
	.rejilla-premios { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
	.premio-bolsa { padding:24px 20px; }
	.premio-bolsa-sponsor { align-items:flex-start; }
	.premio-podio { grid-template-columns:minmax(0,1fr); }
	.premio-puesto-1, .premio-puesto-2, .premio-puesto-3 { order:0; }
	.premio-resto-fila { padding:12px 16px; gap:12px; }
}

/* ------------------------------------------------------------------ */
/* Calendario de publicaciones                                         */
/* ------------------------------------------------------------------ */

.calendario-meses { display:flex; gap:10px; }

.calendario-rejilla { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.calendario-cabecera {
	font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.14em;
	text-transform:uppercase; color:var(--tx3); padding:0 4px 4px;
}
.calendario-celda {
	min-height:120px; padding:10px; background:var(--s1); display:flex; flex-direction:column; gap:8px;
	clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.calendario-vacia { background:transparent; clip-path:none; min-height:0; }
.calendario-celda.con-publicaciones { background:var(--s2); }
.calendario-celda.es-hoy { box-shadow:inset 0 2px 0 var(--season); }
.calendario-numero { font-size:15px; color:var(--tx3); }
.calendario-celda.es-hoy .calendario-numero { color:var(--season); font-weight:700; }

/* Cada publicacion, dentro de su dia. */
.publicacion {
	display:flex; flex-direction:column; gap:6px; padding:10px;
	background:var(--s1); box-shadow:inset 2px 0 0 var(--tx3);
}
.calendario-celda.con-publicaciones .publicacion { background:var(--bg); }
.publicacion-cabecera { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.publicacion-hora { font-size:14px; color:var(--tx); }
.publicacion-estado { font-size:10px; letter-spacing:.1em; }
.publicacion-tipo {
	font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.1em;
	text-transform:uppercase; color:var(--tx2);
}
.publicacion-titulo { margin:0; font-size:14px; line-height:1.35; }
.publicacion-creatividad { width:100%; height:auto; display:block; }
.publicacion-acciones { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.publicacion-mas {
	background:none; border:0; padding:0; cursor:pointer;
	font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.1em;
	text-transform:uppercase; color:var(--gold);
}
.publicacion-mas:hover { color:var(--tx); }
.publicacion-enlace { font-size:12px; white-space:nowrap; }

/* Ficha completa de una publicacion. */
.ficha-publicacion {
	width:min(560px,calc(100vw - 32px)); padding:0; border:0; color:var(--tx);
	background:var(--s1); box-shadow:0 30px 80px rgba(0,0,0,.6);
	clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.ficha-publicacion::backdrop { background:rgba(4,6,12,.78); }
.ficha-publicacion-cuerpo { display:flex; flex-direction:column; gap:14px; padding:26px 28px 28px; }
.ficha-publicacion-cabecera { display:flex; align-items:center; gap:12px; }
.ficha-publicacion-cerrar {
	margin-left:auto; width:32px; height:32px; line-height:1; border:0; cursor:pointer;
	background:var(--s2); color:var(--tx2); font-size:22px;
}
.ficha-publicacion-cerrar:hover { color:var(--tx); background:var(--s3); }
.ficha-publicacion-titulo { margin:0; font-size:22px; }
.ficha-publicacion-cuando { margin:0; font-size:13px; }
.ficha-publicacion-texto {
	margin:0; padding:16px 18px; background:var(--bg);
	font-size:15px; line-height:1.65; color:var(--tx); white-space:pre-line;
}
.ficha-publicacion-imagen { width:100%; height:auto; display:block; }
.ficha-publicacion-enlace { align-self:flex-start; }

/* Un color por estado, el mismo en la leyenda y en la tarjeta. */
.estado-idea .publicacion-estado, .tag.estado-idea { background:var(--s3); color:var(--tx3); }
.estado-borrador .publicacion-estado, .tag.estado-borrador { background:color-mix(in srgb,var(--gold) 16%,transparent); color:var(--gold); }
.estado-listo .publicacion-estado, .tag.estado-listo { background:color-mix(in srgb,var(--season) 18%,transparent); color:var(--season); }
.estado-programado .publicacion-estado, .tag.estado-programado { background:rgba(169,112,255,.16); color:#A970FF; }
.estado-publicado .publicacion-estado, .tag.estado-publicado { background:rgba(83,252,24,.12); color:var(--kick); }

.publicacion.estado-borrador { box-shadow:inset 2px 0 0 var(--gold); }
.publicacion.estado-listo { box-shadow:inset 2px 0 0 var(--season); }
.publicacion.estado-programado { box-shadow:inset 2px 0 0 #A970FF; }
.publicacion.estado-publicado { box-shadow:inset 2px 0 0 var(--kick); }

.calendario-leyenda { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:24px; font-size:12px; }

@media (max-width:900px) {
	/* En movil la rejilla de siete columnas no cabe: los dias van en lista y
	   solo salen los que tienen algo. */
	.calendario-rejilla { grid-template-columns:minmax(0,1fr); }
	.calendario-cabecera, .calendario-vacia { display:none; }
	.calendario-celda:not(.con-publicaciones) { min-height:0; padding:8px 10px; }
	.calendario-celda:not(.con-publicaciones) .calendario-numero { font-size:13px; }
}

/* Riot ID: se copian a mano, asi que en monoespaciada y con aire. */
.riot-id { font-family:var(--num); font-size:15px; letter-spacing:.02em; color:var(--tx); }

/* Alineaciones del enfrentamiento: mismas tarjetas que las retransmisiones,
   con el Riot ID debajo del nick y un boton para copiarlo. */
.alineaciones { margin-top:4px; }
.alineacion-estado { font-size:13px; }
.alineacion-confirmada { color:var(--win); }
.alineacion-riot { font-size:14px; overflow-wrap:anywhere; }
.alineacion-vacia { margin:0; padding:16px 22px; }
.copiar-riot {
	flex:none; height:30px; padding:0 12px; background:transparent; color:var(--tx2); cursor:pointer;
	border:1px solid var(--line); font-family:var(--display); font-weight:600; font-size:12px;
	letter-spacing:.08em; text-transform:uppercase; transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.copiar-riot:hover, .copiar-riot:focus-visible { color:var(--tx); border-color:var(--tx2); }
.copiar-riot.copiado { background:var(--win); border-color:var(--win); color:#06210F; }

/* Ronda que no se jugo porque un club no se presento. */
.incomparecencia { display:grid; gap:10px; justify-items:start; }
.incomparecencia-titulo { margin:0; font-size:22px; }
.incomparecencia .muted { margin:0; max-width:64ch; }

/* ------------------------------------------------------------------ */
/* Presentación · la página pública previa al lanzamiento              */
/* ------------------------------------------------------------------ */

.presentacion-cabecera .marca { cursor:default; }
.presentacion-redes { margin-left:auto; display:flex; align-items:center; gap:10px; }
.presentacion-redes .btn { gap:8px; }
.presentacion-seguir { gap:8px; }
.presentacion-seguir svg, .presentacion-cierre .btn svg { fill:currentColor; }

/*
 * Primera pantalla: el hero y la franja de cifras ocupan juntos lo que mide la
 * ventana, sin contar la cabecera (76 px y su linea). Esta pagina no lleva la
 * barra de patrocinadores. Se usa svh y no vh porque en el movil vh cuenta
 * tambien el alto que tapan las barras del navegador, y la franja de cifras
 * quedaria siempre por debajo del borde.
 */
.presentacion-portada { display:flex; flex-direction:column; min-height:calc(100vh - 77px); }

@supports (height:100svh) {
	.presentacion-portada { min-height:calc(100svh - 77px); }
}

.presentacion-hero { flex:1; display:flex; align-items:center; }
/* Menos relleno propio que en la portada de la web: aqui el aire lo reparte
   la propia pantalla, y con el relleno de siempre las cifras no cabian en un
   portatil de 800 px de alto. */
.presentacion-hero .hero-interior { padding:48px 0 56px; }

/* El hero lleva a la derecha el plazo de fichajes en vez de la jornada. */
.presentacion-hero .hero-texto h1 { font-size:clamp(44px, 6.2vw, 72px); }
.presentacion-fichajes {
	display:flex; flex-direction:column; gap:16px; padding:30px 28px;
	background:rgba(18,24,41,.92);
	box-shadow:inset 0 3px 0 var(--gold);
}
.presentacion-fichajes h2 { font-size:28px; }
.presentacion-fichajes p { margin:0; }
.presentacion-plazos { margin:4px 0 0; display:flex; flex-direction:column; gap:0; }
.presentacion-plazos > div {
	display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:center;
	padding:12px 0; border-top:1px solid var(--line);
}
.presentacion-plazos dt { font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.presentacion-plazos dd { margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:600; }
.presentacion-abierto { background:rgba(74,222,128,.14); color:var(--win); }
/* Discord es la accion principal; los clubes quedan como enlace, para que la
   ficha no crezca y la franja de cifras siga cabiendo en la primera pantalla. */
.presentacion-fichajes-botones { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.presentacion-explorar { font-size:13px; }
.presentacion-fichajes-botones .btn, .presentacion-cierre-botones .btn { gap:10px; }
.presentacion-cierre-botones { display:flex; flex-wrap:nowrap; gap:12px; flex:none; }

/* Los anclajes no pueden quedar tapados por la cabecera pegajosa. */
.pagina-presentacion #clubes, .pagina-presentacion #premios { scroll-margin-top:96px; }

/* Las cifras, en una franja entre el hero y el resto. */
.presentacion-cifras { border-bottom:1px solid var(--line); background:var(--s1); }
.presentacion-cifras ul {
	list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.presentacion-cifras li { display:flex; flex-direction:column; gap:4px; padding:26px 24px; }
.presentacion-cifras li + li { border-left:1px solid var(--line); }
.presentacion-cifras .num { font-size:34px; color:var(--tx); line-height:1.1; }
.presentacion-cifras li:last-child .num { color:var(--gold); }
.presentacion-cifras .dim { font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }

/* Clubes: los confirmados con su escudo; los que faltan, con interrogacion. */
.presentacion-clubes {
	list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
}
.presentacion-club {
	display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
	padding:32px 20px 26px; background:var(--s1);
	box-shadow:inset 0 -3px 0 var(--color-club,var(--line));
}
.presentacion-club-nombre { font-size:17px; letter-spacing:.05em; min-height:2.1em; display:flex; align-items:center; }
.presentacion-club-x {
	display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
	color:var(--tx2);
}
.presentacion-club-x svg { fill:currentColor; }
a.presentacion-club-x:hover { color:var(--tx); }
/* El hueco se apaga por dentro y no con la opacidad de la tarjeta: esa la
   controla la animacion de entrada, y con una propia el hueco ya se veia
   antes de empezar mientras sus vecinas de fila seguian ocultas. */
.presentacion-club-pendiente { box-shadow:none; }
.presentacion-club-pendiente > * { opacity:.6; }
.presentacion-interrogante {
	width:84px; height:92px; display:grid; place-items:center;
	font-family:var(--display); font-weight:700; font-size:44px; color:var(--tx3);
	background:var(--s2);
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.presentacion-club-pendiente .presentacion-club-nombre { color:var(--tx2); }

/* Calendario: cuatro jueves. */
.presentacion-jornadas {
	list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
}
.presentacion-jornada { display:flex; flex-direction:column; gap:10px; padding:24px 22px; background:var(--s1); }
.presentacion-jornada-fecha {
	display:flex; align-items:baseline; gap:10px;
	font-family:var(--display); font-weight:700; font-size:18px; text-transform:uppercase; letter-spacing:.06em;
}
.presentacion-jornada-fecha .num { font-size:44px; line-height:1; color:var(--tx); }

/* Premios: la bolsa a la izquierda y los premios individuales a la derecha,
   las dos columnas del mismo ancho y del mismo alto, cada una con su rotulo
   por fuera de la caja. */
.presentacion-premios { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; }
.presentacion-premios-columna { display:flex; flex-direction:column; gap:14px; }
.presentacion-bolsa {
	flex:1; display:flex; flex-direction:column; gap:14px; padding:32px 30px;
	background:var(--s1); box-shadow:inset 0 3px 0 var(--gold);
}
.presentacion-bolsa p { margin:0; max-width:46ch; }
.presentacion-bolsa-cifra { font-size:clamp(52px, 7vw, 76px); line-height:1; color:var(--gold); }
.presentacion-podio {
	list-style:none; margin:auto 0 0; padding:12px 0 0;
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
.presentacion-puesto {
	display:flex; flex-direction:column; gap:4px; padding:16px;
	background:var(--s2); border-top:2px solid var(--line);
}
.presentacion-puesto-1 { border-top-color:var(--gold); }
.presentacion-puesto-2 { border-top-color:var(--silver); }
.presentacion-puesto-3 { border-top-color:var(--bronze); }
.presentacion-puesto-numero { font-size:14px; color:var(--tx2); }
.presentacion-puesto-importe { font-size:24px; }

.presentacion-meritos ul {
	flex:1; list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:12px;
}
.presentacion-merito {
	display:flex; flex-direction:column; justify-content:center; gap:10px;
	padding:24px 22px; background:var(--s1); box-shadow:inset 3px 0 0 var(--gold);
}
.presentacion-merito h3 { font-size:17px; letter-spacing:.05em; }
.presentacion-merito-importe { font-size:30px; line-height:1; color:var(--gold); }

/* Cierre con la llamada a seguir la cuenta de X. */
.presentacion-cierre {
	display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap;
	padding:36px 32px; background:var(--s1); margin-bottom:72px;
}
.presentacion-cierre > div:first-child { display:flex; flex-direction:column; gap:10px; max-width:640px; }
.presentacion-cierre h2 { font-size:26px; }
.presentacion-cierre p { margin:0; }

.presentacion-legal { display:flex; gap:20px; flex-wrap:wrap; }
.presentacion-legal a { color:var(--tx2); }
.presentacion-legal a:hover { color:var(--tx); }

/* En pantallas bajas (portatiles de 768 px) se aprieta el relleno para que la
   franja de cifras siga entrando entera. Van despues de las reglas de cada
   pieza: con la misma especificidad, gana la que va detras. */
@media (min-width:761px) and (max-height:830px) {
	.presentacion-hero .hero-interior { padding:32px 0 36px; }
	.presentacion-cifras li { padding:18px 24px; }
	.presentacion-cifras .num { font-size:30px; }
}

/* Y en ventanas aun mas bajas se aprieta tambien la ficha de fichajes, que es
   lo mas alto de esta pantalla. */
@media (min-width:761px) and (max-height:740px) {
	.presentacion-hero .hero-interior { padding:24px 0 28px; }
	.presentacion-fichajes { padding:22px 24px; gap:12px; }
	.presentacion-fichajes h2 { font-size:24px; }
	.presentacion-plazos > div { padding:9px 0; }
	.presentacion-cifras li { padding:14px 24px; }
}

@media (max-width:1100px) {
	.presentacion-clubes, .presentacion-jornadas { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.presentacion-premios { grid-template-columns:minmax(0,1fr); }
	.presentacion-cifras ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.presentacion-cifras li:nth-child(3) { border-left:0; }
	.presentacion-cifras li:nth-child(n+3) { border-top:1px solid var(--line); }
}

@media (max-width:340px) {
	.presentacion-red-texto { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
	.presentacion-redes .btn { width:40px; padding:0; justify-content:center; }
}

@media (max-width:760px) {
	/* En movil la cabecera mide 60 px, mas su linea. */
	.presentacion-portada { min-height:calc(100vh - 61px); }

	@supports (height:100svh) {
		.presentacion-portada { min-height:calc(100svh - 61px); }
	}

	/* «de Clubes de TFT» tiene que caber en una linea: partido, el TFT
	   quedaba solo en la de abajo. */
	.presentacion-hero .hero-texto h1 { font-size:clamp(28px, 8.4vw, 44px); }
	.presentacion-fichajes { padding:24px 20px; }
	.presentacion-plazos > div { grid-template-columns:minmax(0,1fr); gap:4px; }
	.presentacion-cifras li { padding:18px 16px; }
	.presentacion-cifras .num { font-size:26px; }
	.presentacion-clubes { gap:12px; }
	.presentacion-club { padding:24px 12px 20px; gap:10px; }
	.presentacion-club .escudo-84, .presentacion-interrogante { width:60px; height:66px; }
	.presentacion-club .escudo-84 .escudo-dentro { width:60px; height:66px; }
	.presentacion-interrogante { font-size:32px; }
	.presentacion-club-nombre { font-size:14px; }
	.presentacion-club-x { font-size:12px; }
	.presentacion-jornadas { grid-template-columns:minmax(0,1fr); }
	.presentacion-podio { gap:8px; }
	.presentacion-puesto { padding:12px 10px; }
	.presentacion-puesto-importe { font-size:18px; }
	.presentacion-merito { padding:18px 16px; }
	.presentacion-merito h3 { font-size:14px; }
	.presentacion-merito-importe { font-size:24px; }
	.presentacion-cierre { padding:26px 20px; margin-bottom:48px; }
	.presentacion-cierre-botones { width:100%; flex-direction:column; }
	.presentacion-fichajes-botones { width:100%; align-items:stretch; }
	.presentacion-explorar { align-self:center; }
	.presentacion-cierre .btn, .presentacion-fichajes-botones .btn { width:100%; justify-content:center; }
}
.sin-cortes { white-space:nowrap; }


/* Texto legal en ventana (popover nativo), p. ej. la politica de privacidad
   dentro del formulario de inscripcion. */
.enlace-boton {
	background:none; border:0; padding:0; font:inherit; letter-spacing:inherit;
	color:var(--gold); cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.enlace-boton:hover { color:#FFD27A; }
.ventana-texto {
	width:min(760px, calc(100vw - 32px)); max-height:min(80vh, 900px); margin:auto; padding:0;
	background:var(--s1); color:var(--tx); border:1px solid var(--line);
	box-shadow:0 24px 80px rgba(0,0,0,.6); overflow:hidden;
}
.ventana-texto:popover-open { display:flex; flex-direction:column; }
.ventana-texto::backdrop { background:rgba(7,10,19,.72); }
.ventana-texto-cabecera {
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:20px 28px; border-bottom:1px solid var(--line); background:var(--s2);
}
.ventana-texto-cabecera h2 { font-size:20px; }
.ventana-texto-cerrar {
	flex:none; width:36px; height:36px; display:grid; place-items:center;
	background:none; border:1px solid var(--line); color:var(--tx2); font-size:16px; cursor:pointer;
}
.ventana-texto-cerrar:hover { color:var(--tx); border-color:var(--tx2); }
.ventana-texto-cuerpo { max-width:none; padding:8px 28px 32px; overflow:auto; }
@media (max-width:760px) {
	.ventana-texto-cabecera { padding:16px 18px; }
	.ventana-texto-cuerpo { padding:4px 18px 24px; }
}

/* ------------------------------------------------------------------ */
/* Tier list de clubes                                                 */
/* ------------------------------------------------------------------ */

.tierlist-s { --nivel:#F0B43C; }
.tierlist-a { --nivel:#F2784B; }
.tierlist-b { --nivel:#A78BFA; }
.tierlist-c { --nivel:#5EEAD4; }
.tierlist-d { --nivel:#6B7590; }

.tierlist-ayuda { margin:0 0 20px; }
.solo-tactil { display:none; }
@media (hover:none) {
	.solo-raton { display:none; }
	.solo-tactil { display:inline; }
}

.tierlist-tabla { display:flex; flex-direction:column; gap:6px; }
.tierlist-fila {
	display:flex; min-height:96px; background:var(--s1);
	clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
	transition:background .15s;
}
.tierlist-etiqueta {
	flex:0 0 96px; display:flex; align-items:center; justify-content:center;
	background:var(--nivel); color:var(--bg);
	font-family:var(--display); font-weight:700; font-size:40px; line-height:1;
}
.tierlist-hueco {
	flex:1; display:flex; flex-wrap:wrap; align-content:center; align-items:center;
	gap:8px; padding:10px 14px; min-height:96px;
}

/* Con un escudo elegido (o arrastrandolo), las filas dicen que se puede soltar. */
.tierlist-editor.eligiendo [data-nivel],
.tierlist-editor.eligiendo .tierlist-banquillo { cursor:pointer; }
.tierlist-editor.eligiendo [data-nivel]:hover,
.tierlist-fila.encima { background:var(--s2); }

.tierlist-banquillo {
	margin-top:20px; padding:16px 16px 6px; background:var(--negro);
	border:1px dashed var(--line); transition:border-color .15s;
}
.tierlist-banquillo .tierlist-hueco { padding:10px 0; min-height:0; }
.tierlist-banquillo.encima,
.tierlist-editor.eligiendo .tierlist-banquillo:hover { border-color:var(--tx3); }
.tierlist-editor.banquillo-vacio .tierlist-banquillo .eyebrow::after {
	content:' · todos colocados'; color:var(--tx3);
}

.tierlist-club {
	position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
	width:84px; height:88px; padding:6px 4px 4px;
	background:none; border:1px solid transparent; color:var(--tx2);
	font:inherit; cursor:grab; touch-action:manipulation; -webkit-user-select:none; user-select:none;
	transition:border-color .15s, background .15s, opacity .15s;
}
.tierlist-club img { width:58px; height:58px; object-fit:contain; pointer-events:none; }
.tierlist-club > span:not([class]) {
	display:flex; align-items:center; justify-content:center; width:58px; height:58px;
	background:var(--color-club,var(--s3)); color:#fff;
	font-family:var(--display); font-weight:700; font-size:14px;
}
.tierlist-club-nombre {
	font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.08em; line-height:1;
}
button.tierlist-club:hover { border-color:var(--line); background:var(--s2); }
.tierlist-club.elegido { border-color:var(--gold); background:var(--s2); color:var(--tx); }
.tierlist-club.arrastrando { opacity:.35; cursor:grabbing; }
.tierlist-club.es-fijo { cursor:default; height:auto; padding-bottom:6px; }
.tierlist-media { font-size:12px; color:var(--tx); }

.tierlist-acciones { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; }
/* Son <button>: sin esto el navegador les pone su fondo y su borde. */
.tierlist-acciones .btn-gold { border:0; }
.tierlist-acciones .btn-line { background:none; cursor:pointer; }
.tierlist-acciones .btn:disabled { opacity:.6; cursor:wait; }
.tierlist-reiniciar { margin-left:auto; background:none; border:0; padding:8px 0; color:var(--tx3); cursor:pointer; font-size:13px; }
.tierlist-reiniciar:hover { color:var(--tx2); }
.tierlist-estado { min-height:1.6em; margin:14px 0 0; color:var(--tx2); }
.tierlist-estado.es-ok { color:var(--win); }
.tierlist-estado.es-error { color:var(--loss); }
.tierlist-nota { margin:14px 0 0; font-size:13px; }

/* La tier list suelta (programa en directo): en una pantalla de 1080 de alto
   cabe entera, del titulo a los botones, sin tener que desplazarse. */
@media (min-width:1100px) {
	.pagina-tierlist-suelta .pagina-cabecera .wrap { padding:22px 0 20px; }
	.pagina-tierlist-suelta .pagina-titulos { gap:6px; }
	.pagina-tierlist-suelta .pagina-cabecera h1 { font-size:40px; }
	.pagina-tierlist-suelta .pagina-entradilla { font-size:15px; }
	.pagina-tierlist-suelta .seccion-primera { padding-top:24px; }
	.pagina-tierlist-suelta .tierlist-ayuda { margin-bottom:12px; font-size:14px; }
	.pagina-tierlist-suelta .tierlist-banquillo { margin-top:12px; }
	.pagina-tierlist-suelta .tierlist-fila { min-height:88px; }
	.pagina-tierlist-suelta .tierlist-hueco { min-height:88px; padding:6px 14px; }
	.pagina-tierlist-suelta .tierlist-banquillo .tierlist-hueco { min-height:0; padding:6px 0; }
	.pagina-tierlist-suelta .tierlist-etiqueta { flex-basis:88px; }
	.pagina-tierlist-suelta .tierlist-club { width:78px; height:76px; }
	.pagina-tierlist-suelta .tierlist-club img,
	.pagina-tierlist-suelta .tierlist-club > span:not([class]) { width:48px; height:48px; }
	.pagina-tierlist-suelta .tierlist-acciones { margin-top:16px; }
}

@media (max-width:760px) {
	.tierlist-fila, .tierlist-hueco { min-height:72px; }
	.tierlist-etiqueta { flex-basis:52px; font-size:28px; }
	.tierlist-hueco { gap:4px; padding:8px; }
	.tierlist-club { width:58px; height:62px; padding:4px 2px; }
	.tierlist-club img, .tierlist-club > span:not([class]) { width:38px; height:38px; }
	.tierlist-club-nombre { font-size:10px; }
	.tierlist-acciones .btn { flex:1 1 100%; justify-content:center; }
	.tierlist-reiniciar { margin:0 auto; }
}

/* ------------------------------------------------------------------ */
/* Bot de la liga                                                      */
/* ------------------------------------------------------------------ */

.bot-liga {
	position:fixed; right:24px; bottom:24px; z-index:60;
	display:flex; flex-direction:column; align-items:flex-end; gap:12px;
	pointer-events:none;
	/* Contorno que sigue el bisel del bocadillo y el hexagono (ver .contorno). */
	--contorno:#3A4668;
	filter:
		drop-shadow(1px 0 0 var(--contorno)) drop-shadow(-1px 0 0 var(--contorno))
		drop-shadow(0 1px 0 var(--contorno)) drop-shadow(0 -1px 0 var(--contorno))
		drop-shadow(0 14px 28px rgba(0,0,0,.5));
}
.bot-liga > * { pointer-events:auto; }

.bot-liga-avatar {
	position:relative; display:flex; align-items:center; justify-content:center;
	width:56px; height:56px; padding:0; border:0; cursor:pointer;
	background:var(--s2);
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	transition:background .15s, transform .15s;
}
.bot-liga-avatar:hover { background:var(--s3); transform:translateY(-2px); }
.bot-liga-avatar .logo-barras { fill:var(--marca); }
.bot-liga-aviso {
	position:absolute; top:9px; right:11px; width:10px; height:10px;
	background:var(--gold); border-radius:50%;
	box-shadow:0 0 0 3px var(--s2);
	animation:bot-liga-latido 1.6s ease-in-out infinite;
}
@keyframes bot-liga-latido { 50% { transform:scale(.7); opacity:.6; } }

.bot-liga-bocadillo {
	position:relative; width:260px; padding:18px 20px 20px;
	background:var(--s2); color:var(--tx);
	clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
	opacity:0; transform:translateY(8px);
	transition:opacity .25s, transform .25s;
}
.bot-liga.abierto .bot-liga-bocadillo { opacity:1; transform:none; }
.bot-liga-bocadillo p {
	margin:6px 0 16px; font-family:var(--display); font-weight:700; font-size:19px; line-height:1.25;
}
.bot-liga-nombre {
	font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.18em;
	text-transform:uppercase; color:var(--season);
}
.bot-liga-cerrar {
	position:absolute; top:10px; right:18px; display:flex; padding:6px;
	background:none; border:0; color:var(--tx3); cursor:pointer;
}
.bot-liga-cerrar:hover { color:var(--tx); }

@media (max-width:760px) {
	.bot-liga { right:16px; bottom:16px; }
	.bot-liga-avatar { width:50px; height:50px; }
	.bot-liga-bocadillo { width:min(260px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion:reduce) {
	.bot-liga-aviso { animation:none; }
	.bot-liga-bocadillo { transition:none; }
}

/* ------------------------------------------------------------------ */
/* Aumentos                                                            */
/* ------------------------------------------------------------------ */

.aumentos-aviso { margin:0 0 14px; padding:10px 14px; background:var(--s1); border-left:3px solid var(--gold); color:var(--tx2); font-size:14px; }
.aumentos-cifras { list-style:none; margin:0 0 28px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.aumentos-cifras li { display:flex; flex-direction:column; gap:6px; padding:18px 20px; background:var(--s1); }
.aumentos-cifras .num { font-size:30px; line-height:1; }
.aumentos-cifras .dim { font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

.aumentos-filtros { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.aumentos-buscar input {
	width:260px; height:42px; padding:0 14px; background:var(--s1); color:var(--tx);
	border:1px solid var(--line); font-family:var(--body); font-size:15px;
}
.aumentos-buscar input:focus { outline:none; border-color:var(--gold); }
.aumentos-rarezas { display:flex; gap:6px; }
.aumentos-casilla { display:flex; align-items:center; gap:8px; height:42px; padding:0 14px; background:var(--s1); cursor:pointer; font-size:14px; color:var(--tx2); border-bottom:2px solid var(--rareza); }
.aumentos-casilla input { accent-color:var(--gold); }
.aumentos-minimo { display:flex; align-items:center; gap:10px; margin-left:auto; font-size:13px; color:var(--tx3); letter-spacing:.08em; text-transform:uppercase; }
.aumentos-minimo select { height:42px; padding:0 10px; background:var(--s1); color:var(--tx); border:1px solid var(--line); font-family:var(--body); font-size:14px; }

/* El color de cada nivel de aumento: en el anillo del icono y en su casilla. */
.rareza-plata { --rareza:#A9B4C2; }
.rareza-oro { --rareza:var(--gold); }
.rareza-prismatico { --rareza:#C98CF2; }
.rareza-sin { --rareza:var(--line); }

.tabla-aumentos td, .tabla-aumentos tbody th { padding:10px 14px; white-space:nowrap; }
.tabla-aumentos tbody th, .tabla-aumentos tfoot th {
	font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:0; text-transform:none; color:var(--tx);
	border-bottom:1px solid var(--linea-suave);
}
.tabla-aumentos tfoot th, .tabla-aumentos tfoot td { padding:14px; border-bottom:0; border-top:1px solid var(--line); font-weight:700; }
.aumento-nombre { display:flex; align-items:center; gap:12px; }
.aumento-icono {
	flex:none; display:flex; align-items:center; justify-content:center; width:32px; height:32px;
	background:var(--s2); border:2px solid var(--rareza); border-radius:6px; overflow:hidden; color:var(--tx3); font-weight:700; font-size:14px;
}
.aumento-icono img { display:block; width:28px; height:28px; }
.aumento-delta { display:inline-block; min-width:58px; padding:3px 8px; text-align:right; }
.aumento-delta.es-bueno { color:var(--win); background:rgba(74,222,128,.1); }
.aumento-delta.es-malo { color:var(--loss); background:rgba(248,113,113,.1); }
.aumento-delta.es-neutro { color:var(--tx3); background:var(--s2); }
.aumento-ronda .dim { font-weight:400; font-size:13px; margin-left:4px; }
/* Con una o dos partidas no hay conclusion posible: la fila se apaga. */
.tabla-aumentos tr.poca-muestra td, .tabla-aumentos tr.poca-muestra th { opacity:.5; }
.tabla-aumentos tr[hidden] { display:none; }

.aumentos-ordenar { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.aumentos-ordenar:hover { color:var(--tx); }
.aumentos-ordenar:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.tabla-aumentos.se-ordena th[aria-sort] .aumentos-ordenar { color:var(--gold); }
.tabla-aumentos.se-ordena th[aria-sort="ascending"] .aumentos-ordenar::after { content:'▲'; font-size:9px; }
.tabla-aumentos.se-ordena th[aria-sort="descending"] .aumentos-ordenar::after { content:'▼'; font-size:9px; }
.aumentos-vacio { margin:0; padding:24px 14px; }

@media (max-width:900px) {
	.aumentos-cifras { grid-template-columns:repeat(2,1fr); }
	.aumentos-buscar, .aumentos-buscar input { width:100%; }
	.aumentos-minimo { margin-left:0; }
	.tabla-aumentos { min-width:820px; }
}