/* 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; --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);
	--display:'Chakra Petch','Arial Narrow',system-ui,sans-serif;
	--body:'Inter',system-ui,-apple-system,'Segoe 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.5;
	-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; }

.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(--display); font-variant-numeric:tabular-nums; font-weight:700; }
.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);
}

.cut { clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); }
.cut-s { clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); }
.card { background:var(--s1); border-radius:6px; }
.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; }

.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.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; border-radius:4px;
}
.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-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 {
	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;
}
.live-pill { padding:5px 10px; border-radius:3px; background:rgba(83,252,24,.1); border:1px solid rgba(83,252,24,.35); }

@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); }
}

/* 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; }
	.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; border-radius:3px;
	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); border-radius:4px;
	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:14px 20px; 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); }

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

.tbl { width:100%; border-collapse:collapse; font-size:15px; }
.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:0 14px 12px; border-bottom:1px solid var(--line);
}
.tbl td { padding:14px; border-bottom:1px solid var(--linea-suave); vertical-align:middle; }
.tbl tr.top td { background:rgba(240,180,60,.05); }

.tabla-scroll { overflow-x:auto; }

.form { display:flex; gap:4px; }
.form span {
	width:22px; height:22px; display:flex; align-items:center; justify-content:center;
	font-family:var(--display); font-weight:700; font-size:11px; border-radius:2px;
}
.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); }

.cambio { display:inline-flex; align-items:center; gap:2px; font-size:13px; }
.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; }

/* 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; border-radius:4px; 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:20;
}
.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:12px; color:var(--tx); }
.marca:hover { color:var(--tx); }
.marca-textos { display:flex; flex-direction:column; line-height:1; }
.marca-nombre { font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:.16em; }
.marca-bajada { font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.3em; color:var(--tx2); margin-top:4px; }

/* 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; }

.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                                                      */
/* ------------------------------------------------------------------ */

.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.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; 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; }
.hero-texto h1 { font-size:78px; 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 { display:flex; flex-direction:column; gap:10px; max-width:520px; margin-top:8px; }
.progreso-cabecera {
	display:flex; justify-content:space-between; gap:12px;
	font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.14em;
}
.progreso-barras { display:flex; gap:4px; }
.progreso-barras span { flex:1; height:6px; border-radius:1px; background:#2A3452; }
.progreso-barras .hecha { background:var(--season); }
.progreso-barras .media { background:linear-gradient(90deg,var(--season) 50%,#2A3452 50%); }

/* 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; }
.dos-columnas { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px; }

/* Tarjeta de stream en directo */
.tarjeta-directo { display:flex; flex-direction:column; overflow:hidden; color:var(--tx); }
.tarjeta-directo:hover { color:var(--tx); }
.tarjeta-directo:hover .tarjeta-directo-nick { color:var(--gold); }
.miniatura {
	position:relative; height:190px; background-color:#0D1222;
	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; }
.miniatura-directo { position:absolute; left:14px; top:14px; }
.miniatura-espectadores {
	position:absolute; right:14px; bottom:12px; display:inline-flex; align-items:center; gap:6px;
	font-size:13px; background:rgba(10,14,26,.8); padding:3px 8px; border-radius: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 */
.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; }
.tarjeta-enf-cuerpo { display:flex; align-items:center; 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; }
.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; }

/* 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:14px 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; }

.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:28px; }
.pagina-titulos { display:flex; flex-direction:column; gap:12px; }
.pagina-cabecera h1 { font-size:60px; }
.pagina-entradilla { font-size:17px; max-width:720px; }

.nota-pie { font-size:13px; margin-top:16px; }

/* ------------------------------------------------------------------ */
/* 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; }
.aug { position:relative; background:var(--s1); border-radius:6px; padding:22px; }
.aug::before {
	content:""; position:absolute; inset:0; border-radius:6px; padding:1px;
	background:var(--frame,var(--line));
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor; mask-composite:exclude; 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; padding-bottom:4px; margin-bottom:20px; }

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

.pie { margin-top:96px; background:var(--negro); border-top:1px solid var(--line); }
.pie .wrap { padding:48px 0 40px; display:flex; flex-direction:column; gap:40px; }
.pie-sponsors { display:flex; flex-direction:column; gap:16px; }
.pie-sponsors-rejilla { display:grid; grid-template-columns:2fr 2fr 1fr 1fr 1fr; gap:16px; }
.pie-sponsors-rejilla .slot { width:100%; height:96px; font-size:12px; }
.pie-sponsors-rejilla .slot.principal { font-size:14px; }
.pie-columnas { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-top:32px; border-top:1px solid var(--borde-negro); }
.pie-columna { display:flex; flex-direction:column; gap:10px; font-size:14px; }
.pie-columna .lista-menu { display:flex; flex-direction:column; gap:10px; }
.pie-columna a { color:var(--tx2); }
.pie-columna a:hover { color:var(--tx); }
.pie-marca { display:flex; flex-direction:column; gap:14px; }
.pie-marca p { max-width:340px; font-size:14px; }
.pie-legal { display:flex; justify-content:space-between; gap:24px; font-size:13px; padding-top:24px; border-top:1px solid var(--borde-negro); flex-wrap:wrap; }


/* ------------------------------------------------------------------ */
/* 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; }

/* Enfrentamiento */
.duelo { display:grid; grid-template-columns:1fr auto 1fr; gap:32px; align-items:center; padding-bottom:40px; }
.duelo-club { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.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; }

.resumen-partidas { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.resumen-partida { padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.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:24px 0 12px; display:flex; align-items:center; }

.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); border-radius:3px; overflow:hidden; }
.barra-relleno { width:100%; background:linear-gradient(180deg,var(--season),color-mix(in srgb,var(--season) 40%,transparent)); border-radius:3px 3px 0 0; 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; border-radius:2px;
	background:var(--s2); color:var(--tx2);
}
.posicion.buena { background:rgba(240,180,60,.16); color:var(--gold); }

/* Estadisticas */
.tarjeta-lider { padding:20px; 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); border-radius:2px; overflow:hidden; }
.barra-h-relleno { display:block; height:100%; background:var(--color-club,var(--season)); border-radius:2px; }
.barra-h-valor { text-align:right; font-size:16px; }

/* Clubes */
.tarjeta-club { padding:20px; display:flex; flex-direction:column; gap:18px; }
.tarjeta-club-cabecera { display:flex; align-items:center; gap:14px; }
.tarjeta-club-textos { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.tarjeta-club-plantilla { display:flex; gap:8px; flex-wrap:wrap; }

/* 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:10px; padding:14px 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; }
	.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 { grid-template-columns:1fr 1fr; gap:32px; }
	.pie-sponsors-rejilla { grid-template-columns:repeat(3,1fr); }
	.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); }
	.cabecera-interior { justify-content:flex-start; gap:12px; }
	.cabecera-estado { margin-left:auto; gap:8px; }
	.marca-nombre { font-size:17px; }
	.marca-bajada { font-size:9px; }
	.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; }
	.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; }

	.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; }
	.tabs a { padding:14px; font-size:14px; }

	/* 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); border-radius:6px; padding:14px; margin-bottom:10px; height:auto;
		display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; row-gap:6px;
	}
	.tabla-tarjetas tr.top { background:var(--s1); box-shadow:inset 3px 0 0 var(--gold); }
	.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; }
	.duelo-nombre { font-size:14px; }
	.duelo-puesto { display:none; }
	.duelo-marcador { font-size:34px; gap:8px; }
	.duelo-marcador .separador { font-size:20px; }
	.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. */
	.fila-enf {
		grid-template-columns:auto 1fr auto; grid-template-areas:
			"hora estado estado"
			"cluba marcador clubb"
			"accion accion accion";
		gap:12px; padding:14px;
	}
	.fila-enf-hora { grid-area:hora; }
	.fila-enf-estado { grid-area:estado; justify-self:end; }
	.fila-enf-club.derecha { grid-area:cluba; flex-direction:column; text-align:center; gap:6px; }
	.fila-enf-marcador { grid-area:marcador; font-size:22px; }
	.fila-enf-club:not(.derecha) { grid-area:clubb; flex-direction:column; text-align:center; gap:6px; }
	.fila-enf-club { font-size:13px; }
	.fila-enf-accion { grid-area:accion; justify-content:center; padding-top:6px; 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; }
	.tarjeta-club-plantilla .escudo-40 { width:34px; height:37px; }
	.tarjeta-club-plantilla .escudo-40 .escudo-dentro { width:30px; height:33px; font-size:11px; }

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

	.pie { margin-top:56px; }
	.pie .wrap { padding:32px 0 28px; gap:28px; }
	.pie-columnas { grid-template-columns:1fr 1fr; gap:24px; }
	.pie-sponsors-rejilla { grid-template-columns:1fr 1fr; }
	.pie-legal { flex-direction:column; gap:10px; }
}

/* ------------------------------------------------------------------ */
/* 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; }
.pts-destacados { font-size:20px; color:var(--gold); }

@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.65; }
.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;
}
.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:20px; width:auto; object-fit:contain; }
.sponsor-nombre {
	font-family:var(--display); font-weight:700; font-size:12px;
	letter-spacing:.12em; text-transform:uppercase;
}
.sponsor.grande { height:96px; border:1px solid var(--borde-negro); border-radius:4px; padding:14px; }
.sponsor.grande img { max-height:100%; max-width:100%; }
.sponsor.grande .sponsor-nombre { font-size:15px; }

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

.formulario { padding:32px; display:flex; flex-direction:column; gap:36px; max-width:900px; }
.formulario fieldset { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.formulario legend {
	font-family:var(--display); font-weight:700; font-size:20px;
	letter-spacing:.04em; text-transform:uppercase; padding:0 0 4px;
	border-bottom:2px solid var(--season); margin-bottom:4px;
}

.campos { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.campo { display:flex; flex-direction:column; gap:6px; 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); border-radius:4px;
	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);
}
.formulario input:invalid:not(:placeholder-shown) { border-color:var(--loss); }
.formulario textarea { resize:vertical; min-height:96px; }

.ayuda { font-size:12px; color:var(--tx3); }
.ayuda-bloque { font-size:14px; color:var(--tx2); margin-top:-6px; }

.jugador {
	border:1px solid var(--line); border-radius:6px; padding:18px;
	display:flex; flex-direction:column; gap:12px;
}
.jugador-etiqueta {
	font-family:var(--display); font-weight:700; font-size:12px;
	letter-spacing:.14em; text-transform:uppercase; color:var(--season);
}

.campo-acepta label {
	display:flex; gap:12px; align-items:flex-start;
	font-family:var(--body); font-size:14px; letter-spacing:0;
	text-transform:none; color:var(--tx2); line-height:1.55; cursor:pointer;
}
.campo-acepta input { margin-top:3px; flex:none; width:18px; height:18px; accent-color:var(--season); }

.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:760px) {
	.formulario { padding:20px; gap:28px; }
	.formulario legend { font-size:17px; }
	.campos { grid-template-columns:1fr; }
	.campo-corto { max-width:none; }
	.jugador { padding:14px; }
}