/* ==========================================================================
   IP10 · Spain Union Multisport
   Identidad del escudo: balón rojo con la franja amarilla. Tipografías Archivo e Inter.
   Movimiento: curvas propias, solo transform y opacity, y todo con prefers-reduced-motion.
   ========================================================================== */

:root {
	/* Color */
	--rojo: #cb0e10;
	--rojo-oscuro: #a20a0c;
	--rojo-suave: #fdeeee;
	--amarillo: #ffbc07;
	--amarillo-oscuro: #e3a400;
	--amarillo-suave: #fff6dd;
	--tinta: #121417;
	--tinta-2: #262a31;
	--tinta-media: #4a505b;
	--tinta-suave: #6a707b;
	--papel: #ffffff;
	--papel-hueso: #f6f4f0;
	--papel-gris: #ecebe6;
	--linea: #e3e0d9;
	--linea-fuerte: #cdc8bd;
	--noche: #0f1114;
	--noche-2: #181b20;
	--noche-linea: rgba(255, 255, 255, 0.12);
	--noche-texto: #b9bec8;

	/* Tipografía */
	--fuente-titular: "Archivo", "Arial Narrow", system-ui, sans-serif;
	--fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--t-xs: 0.8125rem;
	--t-s: 0.9375rem;
	--t-base: 1.0625rem;
	--t-m: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
	--t-l: clamp(1.3rem, 0.9vw + 1.08rem, 1.625rem);
	--t-xl: clamp(1.75rem, 1.8vw + 1.25rem, 2.625rem);
	--t-2xl: clamp(2.25rem, 3.2vw + 1.3rem, 3.75rem);
	--t-3xl: clamp(2.625rem, 5vw + 1.2rem, 5.25rem);

	/* Espacio y forma */
	--e1: 0.5rem;
	--e2: 1rem;
	--e3: 1.5rem;
	--e4: 2.5rem;
	--e5: clamp(3.5rem, 6vw, 5rem);
	--e6: clamp(4.5rem, 9vw, 7.5rem);
	--ancho: 1180px;
	--ancho-texto: 68ch;
	--radio: 14px;
	--radio-s: 8px;
	--radio-xs: 6px;

	/* Movimiento: las curvas de serie no tienen fuerza */
	--sale: cubic-bezier(0.23, 1, 0.32, 1);
	--entra-sale: cubic-bezier(0.77, 0, 0.175, 1);
	--cajon: cubic-bezier(0.32, 0.72, 0, 1);
	--rapido: 160ms;
	--medio: 240ms;

	/* Sombras */
	--sombra-1: 0 1px 2px rgba(18, 20, 23, 0.06), 0 2px 8px rgba(18, 20, 23, 0.04);
	--sombra-2: 0 2px 4px rgba(18, 20, 23, 0.06), 0 14px 32px rgba(18, 20, 23, 0.1);
	--sombra-3: 0 4px 10px rgba(18, 20, 23, 0.08), 0 28px 60px rgba(18, 20, 23, 0.16);

	interpolate-size: allow-keywords;
}

/* ---------- Transiciones entre páginas: fundido corto, la cabecera no se mueve ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--sale); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html:has(dialog[open]) { overflow: hidden; }

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--fuente-texto);
	font-size: var(--t-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4 {
	font-family: var(--fuente-titular);
	font-weight: 800;
	font-stretch: 110%;
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0 0 var(--e2);
	text-wrap: balance;
	color: inherit;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); font-weight: 700; letter-spacing: -0.012em; line-height: 1.15; }
h4 { font-size: var(--t-m); font-weight: 700; letter-spacing: -0.005em; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--e3); }
p { text-wrap: pretty; }
strong, b { font-weight: 650; }
small { font-size: 0.8em; }

a { color: var(--rojo); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--rapido) ease; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--rojo-oscuro); } }

:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 4px; }

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

.icono { width: 1.25em; height: 1.25em; flex: none; }
.icono-pequeno { width: 1em; height: 1em; }
.icono-girado { transform: rotate(180deg); }

.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; width: 1px; white-space: nowrap;
}

::selection { background: var(--amarillo); color: var(--tinta); }

/* ---------- Estructura ---------- */
.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.contenedor-estrecho { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.seccion { padding-block: var(--e6); position: relative; }
.seccion-hueso { background: var(--papel-hueso); }
.seccion:not(.seccion-hueso) + .seccion:not(.seccion-hueso):not(.seccion-cambio) { padding-top: 0; }
.seccion-hueso + .seccion-hueso { padding-top: 0; }

.rejilla-2 { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.rejilla-centrada { align-items: center; }

.cabecera-seccion {
	display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
	gap: var(--e3) var(--e4); margin-bottom: var(--e4);
}
.cabecera-seccion .titulo-seccion { margin-bottom: 0; }

.titulo-seccion { max-width: 720px; margin-bottom: var(--e4); }
.titulo-seccion h2 { margin-bottom: var(--e1); }
.entradilla { font-size: var(--t-m); color: var(--tinta-media); line-height: 1.55; max-width: 62ch; }
.titulo-seccion .entradilla { margin: var(--e2) 0 0; }

.saltar {
	position: absolute; left: 1rem; top: -100px; z-index: 100;
	background: var(--tinta); color: #fff; padding: 0.7rem 1rem; border-radius: var(--radio-s);
	font-weight: 600; text-decoration: none; transition: top var(--medio) var(--sale);
}
.saltar:focus { top: 1rem; color: #fff; }

/* ---------- Rótulo (antetítulo) con su raya ---------- */
.rotulo {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-family: var(--fuente-titular); font-size: var(--t-xs); font-weight: 700; font-stretch: 112%;
	text-transform: uppercase; letter-spacing: 0.14em; color: var(--rojo);
	margin-bottom: var(--e2);
}
.rotulo::before {
	content: ""; width: 28px; height: 3px; border-radius: 2px; background: currentColor;
	transform-origin: left center;
}
.js [data-revelar] .rotulo::before, .js .titulo-seccion[data-revelar] .rotulo::before { transform: scaleX(0); }
.js .visto .rotulo::before, .js .titulo-seccion.visto .rotulo::before {
	transform: scaleX(1); transition: transform 700ms var(--sale) 150ms;
}

/* ---------- Botones ---------- */
.boton {
	--fondo: var(--rojo); --texto: #fff; --borde: transparent;
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
	min-height: 48px; padding: 0.75rem 1.35rem;
	border: 1.5px solid var(--borde); border-radius: 999px;
	background: var(--fondo); color: var(--texto);
	font: 600 var(--t-s)/1.2 var(--fuente-texto); letter-spacing: 0.005em;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: transform 120ms var(--sale), background-color var(--rapido) ease, border-color var(--rapido) ease, color var(--rapido) ease, box-shadow var(--medio) var(--sale);
	-webkit-tap-highlight-color: transparent;
}
.boton .icono { width: 1.1em; height: 1.1em; }
.boton .icono-despues { transition: transform var(--medio) var(--sale); }
.boton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
	.boton:hover { --fondo: var(--rojo-oscuro); color: var(--texto); box-shadow: 0 8px 20px -8px rgba(203, 14, 16, 0.55); }
	.boton:hover .icono-despues { transform: translateX(3px); }
}
.boton-pequeno { min-height: 40px; padding: 0.5rem 1rem; font-size: var(--t-xs); gap: 0.4rem; }
.boton-oscuro { --fondo: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .boton-oscuro:hover { --fondo: #000; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5); } }
.boton-amarillo { --fondo: var(--amarillo); --texto: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .boton-amarillo:hover { --fondo: #ffcd3d; box-shadow: 0 8px 22px -8px rgba(255, 188, 7, 0.6); } }
.boton-contorno { --fondo: transparent; --texto: var(--tinta); --borde: var(--linea-fuerte); }
@media (hover: hover) and (pointer: fine) { .boton-contorno:hover { --fondo: var(--tinta); --texto: #fff; --borde: var(--tinta); box-shadow: none; } }
.boton-contorno-claro { --fondo: transparent; --texto: #fff; --borde: rgba(255, 255, 255, 0.35); }
@media (hover: hover) and (pointer: fine) { .boton-contorno-claro:hover { --fondo: #fff; --texto: var(--tinta); --borde: #fff; box-shadow: none; } }

.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.acciones--centro { justify-content: center; margin-top: var(--e4); }

.enlace-flecha {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-weight: 600; text-decoration: none; color: var(--rojo);
}
.enlace-flecha .icono { width: 1.1em; height: 1.1em; transition: transform var(--medio) var(--sale); }
@media (hover: hover) and (pointer: fine) { .enlace-flecha:hover .icono { transform: translateX(3px); } }
.enlace-flecha--claro { color: #fff; }
@media (hover: hover) and (pointer: fine) { .enlace-flecha--claro:hover { color: var(--amarillo); } }

/* ---------- Cabecera del sitio ---------- */
.cabecera {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	backdrop-filter: saturate(1.6) blur(14px);
	view-transition-name: cabecera;
}
.cabecera::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--linea);
	box-shadow: 0 10px 30px -12px rgba(18, 20, 23, 0.18);
	opacity: 0; transition: opacity var(--medio) ease;
}
.cabecera[data-scroll="si"]::after { opacity: 1; }
.cabecera-fila { display: flex; align-items: center; gap: var(--e3); min-height: 76px; }

.marca { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--tinta); flex: none; }
.marca-balon { width: 46px; height: auto; transition: transform 500ms var(--sale); }
@media (hover: hover) and (pointer: fine) { .marca:hover .marca-balon { transform: rotate(-10deg) scale(1.04); } }
.marca-texto { display: grid; line-height: 1.05; }
.marca-nombre { font-family: var(--fuente-titular); font-weight: 800; font-stretch: 118%; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; }
.marca-liga { font-size: var(--t-xs); color: var(--tinta-media); letter-spacing: 0.02em; margin-top: 3px; }

.menu-principal { margin-left: auto; }
.menu-principal ul { list-style: none; display: flex; align-items: center; gap: 0.1rem; margin: 0; padding: 0; }
.menu-principal a {
	position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.7rem;
	color: var(--tinta); text-decoration: none; font-weight: 550; font-size: var(--t-s);
}
.menu-principal a::after {
	content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 8px; height: 2px; border-radius: 2px;
	background: var(--rojo); transform: scaleX(0); transform-origin: left center;
	transition: transform var(--medio) var(--sale);
}
@media (hover: hover) and (pointer: fine) { .menu-principal a:hover { color: var(--tinta); } .menu-principal a:hover::after { transform: scaleX(1); } }
.menu-principal .current-menu-item > a, .menu-principal .current_page_item > a, .menu-principal .current-page-ancestor > a, .menu-principal .current_page_parent > a, .menu-principal .current-menu-ancestor > a, .menu-principal .current-menu-parent > a { color: var(--rojo); }
.menu-principal .current-menu-item > a::after, .menu-principal .current_page_item > a::after, .menu-principal .current-page-ancestor > a::after, .menu-principal .current_page_parent > a::after, .menu-principal .current-menu-ancestor > a::after, .menu-principal .current-menu-parent > a::after { transform: scaleX(1); }

/* Submenús: el enlace lleva a la página del apartado y el botón de la flecha abre el panel.
   El panel crece desde su enlace (origen arriba a la izquierda), entra con ease-out y sale
   más rápido de lo que entra. Con ratón se abre al pasar, con un respiro para no abrirlo
   por error al cruzar la cabecera. */
.menu-principal li { position: relative; }
.menu-principal .menu-item-has-children { display: flex; align-items: center; }
.menu-principal .menu-item-has-children > a { padding-right: 0.3rem; }
.menu-principal .menu-item-has-children > a::after { right: 0.3rem; }
.submenu-boton {
	display: inline-grid; place-items: center; width: 26px; height: 32px; margin: 0 0.3rem 0 0; padding: 0;
	border: 0; border-radius: 8px; background: none; color: var(--tinta-suave); cursor: pointer;
	transition: color var(--rapido) ease, background-color var(--rapido) ease, transform 120ms var(--sale);
}
.submenu-boton:active { transform: scale(0.92); }
.submenu-boton .icono { width: 15px; height: 15px; transition: transform 240ms var(--sale); }
.menu-item-has-children[data-abierto] > .submenu-boton { color: var(--tinta); }
.menu-item-has-children[data-abierto] > .submenu-boton .icono { transform: rotate(180deg); }

.menu-principal .sub-menu {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
	display: grid; align-items: stretch; gap: 2px; width: max-content; min-width: 280px; max-width: 400px; padding: 0.4rem;
	background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-3);
	opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0) scale(0.97); transform-origin: 1.5rem 0;
	transition: opacity 140ms ease, transform 140ms var(--sale), visibility 0s linear 140ms;
}
/* Puente invisible entre el enlace y el panel: el ratón baja sin que el panel se cierre. */
.menu-principal .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.menu-principal .menu-item-has-children[data-abierto] > .sub-menu {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity 200ms var(--sale), transform 220ms var(--sale), visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
	.submenu-boton:hover { background: var(--papel-gris); color: var(--tinta); }
	.menu-principal .menu-item-has-children:hover > .submenu-boton .icono { transform: rotate(180deg); }
	.menu-principal .menu-item-has-children:hover > .sub-menu {
		opacity: 1; visibility: visible; transform: none;
		transition: opacity 200ms var(--sale) 70ms, transform 220ms var(--sale) 70ms, visibility 0s 70ms;
	}
}
.menu-principal .sub-menu a {
	display: grid; gap: 0.15rem; justify-items: start; min-height: 0; padding: 0.65rem 0.8rem; border-radius: 11px;
	font-size: var(--t-s); font-weight: 600; line-height: 1.3; white-space: normal;
	transition: background-color var(--rapido) ease, transform 120ms var(--sale);
}
.menu-principal .sub-menu a::after { display: none; }
.menu-principal .sub-menu a:active { transform: scale(0.98); }
.submenu-descripcion { font-weight: 400; font-size: var(--t-xs); line-height: 1.35; color: var(--tinta-suave); }
@media (hover: hover) and (pointer: fine) { .menu-principal .sub-menu a:hover { background: var(--papel-hueso); } }
.menu-principal .sub-menu .current-menu-item > a, .menu-principal .sub-menu .current-page-ancestor > a { background: var(--papel-hueso); color: var(--rojo); }

.cabecera-acciones { display: flex; align-items: center; gap: 0.6rem; }

.menu-boton {
	display: none; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 0.95rem;
	border: 1.5px solid var(--linea); border-radius: 999px; background: var(--papel); color: var(--tinta);
	font: 600 var(--t-s)/1 var(--fuente-texto); cursor: pointer;
	transition: transform 120ms var(--sale), border-color var(--rapido) ease;
}
.menu-boton:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .menu-boton:hover { border-color: var(--tinta); } }

/* Selector de idioma: dos opciones, la actual rellena */
.idiomas ul { list-style: none; display: flex; margin: 0; padding: 3px; gap: 2px; background: var(--papel-gris); border-radius: 999px; }
.idiomas a {
	display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 34px; padding: 0 0.55rem;
	border-radius: 999px; color: var(--tinta-media); text-decoration: none;
	font: 700 var(--t-xs)/1 var(--fuente-titular); letter-spacing: 0.06em;
	transition: background-color var(--rapido) ease, color var(--rapido) ease, transform 120ms var(--sale);
}
.idiomas a:active { transform: scale(0.94); }
.idiomas a[aria-current="true"] { background: var(--tinta); color: #fff; }
@media (hover: hover) and (pointer: fine) { .idiomas a:not([aria-current="true"]):hover { background: var(--papel); color: var(--tinta); } }

/* Cajón del menú en móvil: dialog nativo, entra desde la derecha y sale más rápido */
.cajon {
	position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0;
	width: min(420px, 100vw); max-width: none; height: 100dvh; max-height: none;
	border: 0; background: var(--papel); color: var(--tinta);
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform 260ms var(--sale), display 260ms allow-discrete, overlay 260ms allow-discrete;
	box-shadow: var(--sombra-3);
}
.cajon:not([open]) { display: none; }
.cajon[open] { transform: none; transition: transform 460ms var(--cajon), display 460ms allow-discrete, overlay 460ms allow-discrete; }
@starting-style { .cajon[open] { transform: translateX(100%); } }
.cajon::backdrop {
	background: rgba(12, 13, 16, 0);
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	transition: background-color 260ms ease, backdrop-filter 260ms ease, display 260ms allow-discrete, overlay 260ms allow-discrete;
}
.cajon[open]::backdrop { background: rgba(12, 13, 16, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@starting-style { .cajon[open]::backdrop { background: rgba(12, 13, 16, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }

.cajon-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--linea); }
.cajon-titulo { font: 700 var(--t-xs)/1 var(--fuente-titular); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.cajon-cerrar {
	display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
	border: 1.5px solid var(--linea); background: none; color: var(--tinta); cursor: pointer;
	transition: transform 120ms var(--sale), border-color var(--rapido) ease;
}
.cajon-cerrar:active { transform: scale(0.94); }
.cajon-menu { padding: 0.75rem 1.25rem; overflow-y: auto; flex: 1; }
.cajon-menu ul { list-style: none; margin: 0; padding: 0; }
.cajon-menu li { border-bottom: 1px solid var(--linea); }
.cajon-menu a {
	display: flex; align-items: center; justify-content: space-between; min-height: 58px;
	font-family: var(--fuente-titular); font-weight: 700; font-stretch: 110%; font-size: 1.35rem; letter-spacing: -0.01em;
	color: var(--tinta); text-decoration: none;
}
.cajon-menu .current-menu-item > a, .cajon-menu .current_page_item > a { color: var(--rojo); }
/* En el cajón los submenús van siempre abiertos, sangrados bajo su apartado */
.cajon-menu .submenu-boton, .cajon-menu .submenu-descripcion { display: none; }
.cajon-menu .sub-menu { padding: 0 0 0.75rem 1rem; margin-top: -0.4rem; }
.cajon-menu .sub-menu li { border-bottom: 0; }
.cajon-menu .sub-menu a { min-height: 42px; font-family: var(--fuente-texto); font-weight: 550; font-stretch: 100%; font-size: 1.05rem; letter-spacing: 0; color: var(--tinta-media); }
.cajon-menu .sub-menu .current-menu-item > a { color: var(--rojo); }
.cajon[open] .cajon-menu li { animation: sube-corto 420ms var(--sale) both; animation-delay: calc(90ms + var(--i, 0) * 40ms); }
.cajon-pie { padding: 1.25rem; display: grid; gap: 1rem; border-top: 1px solid var(--linea); background: var(--papel-hueso); }
.cajon-pie .boton { width: 100%; }
.cajon-pie .idiomas ul { width: max-content; }
.cajon-contacto { display: grid; gap: 0.35rem; margin: 0; font-size: var(--t-s); }
.cajon-contacto a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tinta-media); text-decoration: none; min-height: 36px; }

@keyframes sube-corto { from { opacity: 0; transform: translate3d(12px, 0, 0); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
	.menu-principal, .idiomas--cabecera { display: none; }
	.menu-boton { display: inline-flex; }
	.cabecera-acciones { margin-left: auto; }
}
@media (max-width: 560px) {
	.cabecera-fila { min-height: 66px; gap: 0.75rem; }
	.marca-balon { width: 40px; }
	.marca-nombre { font-size: 0.86rem; }
	.marca-liga { font-size: 0.72rem; }
	.cabecera-socio { display: none; }
}
@media (max-width: 430px) {
	.marca { gap: 0.5rem; }
	.marca-nombre { font-size: 0.8rem; font-stretch: 106%; letter-spacing: 0.01em; }
	.menu-boton { padding: 0 0.75rem; }
	.menu-boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Franjas de la bandera (decoración de cabeceras y pie) ---------- */
.franjas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.franja { position: absolute; top: -30%; bottom: -30%; transform: skewX(-14deg); }
.franja-roja { right: clamp(70px, 12vw, 230px); width: clamp(56px, 8vw, 150px); background: var(--rojo); }
.franja-amarilla { right: clamp(36px, 8vw, 160px); width: clamp(16px, 2.2vw, 40px); background: var(--amarillo); }

/* Entrada: las franjas suben con una cortinilla diagonal */
.cabecera-pagina .franja, .banda-cta .franja, .error404-hero .franja, .hero-franja {
	animation: franja-entra 1100ms var(--entra-sale) both;
}
.cabecera-pagina .franja-amarilla, .banda-cta .franja-amarilla, .error404-hero .franja-amarilla, .hero-franja-amarilla { animation-delay: 120ms; }
@keyframes franja-entra { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Entrada escalonada de las cabeceras (sin JS, solo CSS) ---------- */
.entra > * { animation: entra 900ms var(--sale) both; animation-delay: calc(80ms + var(--i, 0) * 75ms); }
@keyframes entra {
	/* 0.01 y no 0: el título ya cuenta como pintado desde el primer fotograma (LCP), sin que se vea. */
	from { opacity: 0.01; transform: translate3d(0, 22px, 0); filter: blur(6px); }
	to { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- Portada: hero ---------- */
.hero {
	position: relative; overflow: hidden; isolation: isolate;
	background: radial-gradient(1100px 620px at 78% 30%, #23262d 0%, var(--noche) 64%);
	color: #fff;
	padding-top: clamp(4rem, 9vw, 8.5rem);
}
.hero-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-franja { position: absolute; top: -20%; bottom: -20%; transform: skewX(-14deg); }
.hero-franja-roja { right: clamp(-28px, -1vw, 0px); width: clamp(56px, 7.5vw, 116px); background: var(--rojo); }
.hero-franja-amarilla { right: clamp(72px, 10vw, 156px); width: clamp(14px, 1.7vw, 26px); background: var(--amarillo); }
.hero-balon {
	position: absolute; right: clamp(120px, 15.5vw, 260px); top: 45%; width: clamp(280px, 34vw, 500px);
	transform: translateY(-50%) rotate(-8deg);
	filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
	animation: balon-entra 1400ms var(--sale) 250ms both;
}
@keyframes balon-entra {
	from { opacity: 0; transform: translateY(-46%) rotate(-22deg) scale(0.9); }
	to { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(1); }
}
.hero-rejilla { position: relative; }
.hero-texto { max-width: 640px; padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero .rotulo { color: var(--amarillo); }
.hero h1 { font-size: var(--t-3xl); line-height: 0.98; letter-spacing: -0.03em; font-stretch: 112%; margin-bottom: var(--e3); }
.hero .entradilla { color: var(--noche-texto); margin-bottom: var(--e4); max-width: 52ch; }
.hero .entradilla strong { color: #fff; }
.hero-cifras { position: relative; border-top: 1px solid var(--noche-linea); padding-block: clamp(1.75rem, 3vw, 2.5rem); }
/* En pantallas estrechas las franjas pasan por detrás de las cifras: la banda de cifras va en oscuro. */
@media (max-width: 900px) { .hero-cifras { background: var(--noche); } }
@media (min-width: 901px) { .hero-cifras .cifras { padding-right: clamp(0px, 14vw, 220px); } }

@media (max-width: 1200px) and (min-width: 901px) {
	.hero-balon { right: -10vw; width: 44vw; }
}
@media (max-width: 900px) {
	.hero-balon { width: 260px; right: -60px; top: 20%; opacity: 0.2; filter: none; }
	.hero-franja-roja { right: -30px; width: 64px; }
	.hero-franja-amarilla { right: 52px; width: 12px; }
}

/* ---------- Cifras con contador ---------- */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--e3); margin: 0; }
.cifra { display: grid; gap: 0.35rem; }
.cifra strong {
	font-family: var(--fuente-titular); font-weight: 800; font-stretch: 118%;
	font-size: clamp(2.25rem, 3vw + 1rem, 3.25rem); line-height: 1; letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums; color: var(--rojo);
}
.cifra strong small { font-size: 0.5em; margin-left: 0.15em; }
.cifra > span { font-size: var(--t-s); color: var(--tinta-media); line-height: 1.35; }
.cifras--hero .cifra strong { color: #fff; }
.cifras--hero .cifra > span { color: var(--noche-texto); }
.cifras--hero .cifra { padding-left: 1rem; border-left: 2px solid var(--amarillo); }
.cifras--apiladas { grid-template-columns: 1fr; gap: 1.1rem; }
.cifras--apiladas .cifra { grid-template-columns: auto 1fr; align-items: baseline; gap: 0.9rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--noche-linea); }
.cifras--apiladas .cifra:last-child { border-bottom: 0; padding-bottom: 0; }
.cifras--apiladas .cifra strong { color: #fff; font-size: clamp(2.25rem, 2vw + 1.5rem, 3rem); }
.cifras--apiladas .cifra > span { color: var(--noche-texto); }
.cifras--tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e4); box-shadow: var(--sombra-1); }
.cifras--tres { margin-bottom: var(--e4); }

/* ---------- Cabecera de página ---------- */
.cabecera-pagina { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem); }
.cabecera-pagina--oscura { background: radial-gradient(900px 520px at 85% 20%, #22252c 0%, var(--noche) 62%); color: #fff; }
.cabecera-pagina--oscura .rotulo { color: var(--amarillo); }
.cabecera-pagina--oscura .entradilla { color: var(--noche-texto); }
.cabecera-pagina--oscura .entradilla strong { color: #fff; }
.cabecera-pagina--clara { background: var(--papel-hueso); }
.cabecera-pagina--clara .franja { opacity: 0.95; }
.cabecera-pagina .franjas { z-index: -1; }
.cabecera-pagina-rejilla { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 960px) { .cabecera-pagina-rejilla:has(.cabecera-pagina-extra) { grid-template-columns: minmax(0, 1fr) 340px; } }
.cabecera-pagina-texto { max-width: 780px; }
.cabecera-pagina h1 { font-size: var(--t-2xl); margin-bottom: var(--e2); }
.cabecera-pagina .entradilla { margin-bottom: var(--e3); }
.cabecera-pagina .acciones { margin-top: var(--e1); }
.cabecera-pagina-extra > div {
	/* Fondo casi opaco: las cifras y los textos pequeños no pueden quedar encima de las franjas. */
	background: rgba(24, 26, 31, 0.94); border: 1px solid var(--noche-linea); border-radius: var(--radio);
	padding: var(--e3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cabecera-pagina--clara .cabecera-pagina-extra > div { background: var(--papel); border-color: var(--linea); box-shadow: var(--sombra-1); }
@media (max-width: 959px) { .cabecera-pagina .franjas { opacity: 0.35; } }

/* ---------- Migas ---------- */
.migas { margin-bottom: var(--e3); font-size: var(--t-xs); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.migas li { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--tinta-suave); }
.migas li + li::before { content: "/"; opacity: 0.5; }
.migas a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .migas a:hover { color: var(--rojo); text-decoration: underline; } }
.migas [aria-current] { color: var(--tinta); }
.cabecera-pagina--oscura .migas li, .entrada-cabecera .migas li { color: var(--noche-texto); }
.cabecera-pagina--oscura .migas [aria-current] { color: #fff; }
.entrada-cabecera .migas li { color: var(--tinta-suave); }
.entrada-cabecera .migas [aria-current] { color: var(--tinta); }

/* ---------- Tarjetas de noticia ---------- */
.noticias { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tarjeta {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
	transition: transform 380ms var(--sale), box-shadow 380ms var(--sale), border-color var(--medio) ease;
}
.tarjeta-imagen { aspect-ratio: 16 / 9; overflow: hidden; background: var(--noche); }
.tarjeta-imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--sale); }
.tarjeta-cuerpo { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.25rem 1.35rem 1.4rem; flex: 1; }
.tarjeta-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0; font-size: var(--t-xs); color: var(--tinta-suave); }
.tarjeta-titulo { margin: 0; font-size: 1.14rem; line-height: 1.22; font-stretch: 104%; }
.tarjeta-titulo a { color: var(--tinta); text-decoration: none; }
.tarjeta-titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tarjeta-titulo a:focus-visible { outline: none; }
.tarjeta:has(.tarjeta-titulo a:focus-visible) { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.tarjeta-resumen { margin: 0; color: var(--tinta-media); font-size: var(--t-s); line-height: 1.55; }
.tarjeta-mas { margin-top: auto; padding-top: 0.35rem; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--rojo); font-weight: 600; font-size: var(--t-s); }
.tarjeta-mas .icono { width: 1.1em; height: 1.1em; transition: transform var(--medio) var(--sale); }
.tarjeta:has(.tarjeta-titulo a:active) { transform: scale(0.99); transition-duration: 120ms; }
@media (hover: hover) and (pointer: fine) {
	.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: transparent; }
	.tarjeta:hover .tarjeta-imagen img { transform: scale(1.04); }
	.tarjeta:hover .tarjeta-mas .icono { transform: translateX(3px); }
}
.etiqueta {
	display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; border-radius: 999px;
	background: var(--rojo-suave); color: var(--rojo-oscuro);
	font: 700 0.72rem/1 var(--fuente-titular); letter-spacing: 0.08em; text-transform: uppercase;
}
@media (min-width: 900px) {
	.noticias--portada .tarjeta--destacada, .noticias--listado .tarjeta--destacada { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; }
	.tarjeta--destacada .tarjeta-imagen { aspect-ratio: auto; min-height: 340px; }
	.tarjeta--destacada .tarjeta-cuerpo { padding: clamp(1.75rem, 3vw, 2.75rem); justify-content: center; gap: 1rem; }
	.tarjeta--destacada .tarjeta-titulo { font-size: var(--t-xl); line-height: 1.08; }
	.tarjeta--destacada .tarjeta-resumen { font-size: var(--t-base); }
	.tarjeta--destacada .tarjeta-mas { margin-top: 0.5rem; }
}

/* ---------- Nuevo nombre: LAR da paso a LIR ---------- */
.seccion-cambio { padding-block: var(--e5); }
.cambio-nombre {
	position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
	padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radio);
	background: var(--noche); color: #fff; box-shadow: var(--sombra-2); overflow: hidden;
}
.cambio-nombre > div { display: grid; gap: 0.35rem; }
.cambio-siglas { font-family: var(--fuente-titular); font-weight: 800; font-stretch: 120%; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 0.95; letter-spacing: -0.02em; }
.cambio-nombre-texto { font-weight: 600; font-size: var(--t-s); }
.cambio-fechas { font-size: var(--t-xs); color: var(--noche-texto); }
.cambio-nombre-viejo .cambio-siglas { color: rgba(255, 255, 255, 0.5); }
.cambio-nombre-viejo .cambio-nombre-texto { color: var(--noche-texto); text-decoration: line-through; text-decoration-color: var(--rojo); text-decoration-thickness: 2px; }
.cambio-nombre-nuevo .cambio-siglas { color: var(--amarillo); }
.cambio-flecha { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--rojo); color: #fff; }
.cambio-flecha .icono { width: 20px; height: 20px; }
.js .cambio-nombre .cambio-nombre-nuevo { opacity: 0; transform: translate3d(-10px, 0, 0); filter: blur(6px); }
.js .cambio-nombre .cambio-flecha { transform: scale(0.8); opacity: 0; }
.js .cambio-nombre .cambio-nombre-viejo .cambio-nombre-texto { text-decoration-color: transparent; }
.js .cambio-nombre.visto .cambio-nombre-nuevo { opacity: 1; transform: none; filter: blur(0); transition: opacity 700ms var(--sale) 450ms, transform 700ms var(--sale) 450ms, filter 700ms var(--sale) 450ms; }
.js .cambio-nombre.visto .cambio-flecha { transform: none; opacity: 1; transition: transform 500ms var(--sale) 250ms, opacity 300ms ease 250ms; }
.js .cambio-nombre.visto .cambio-nombre-viejo .cambio-nombre-texto { text-decoration-color: var(--rojo); transition: text-decoration-color 400ms ease 200ms; }
@media (max-width: 520px) {
	.cambio-nombre { grid-template-columns: 1fr; text-align: left; }
	.cambio-flecha { transform: rotate(90deg); }
	.js .cambio-nombre.visto .cambio-flecha { transform: rotate(90deg); }
}

/* ---------- Clubes ---------- */
.clubes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.club {
	display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem;
	background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
	transition: transform 380ms var(--sale), box-shadow 380ms var(--sale), border-color var(--medio) ease;
}
@media (hover: hover) and (pointer: fine) { .club:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: transparent; } }
.club-codigo {
	position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; overflow: hidden;
	background: var(--noche); color: #fff; font: 800 0.9rem/1 var(--fuente-titular); font-stretch: 112%; letter-spacing: 0.03em; padding-bottom: 3px;
}
.club-codigo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--rojo) 0 64%, var(--amarillo) 64%); }
.club-datos { display: grid; gap: 0.15rem; min-width: 0; flex: 1; }
.club-nombre { font-weight: 650; line-height: 1.25; }
.club-lugar { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--t-xs); color: var(--tinta-suave); }
.pais { flex: none; width: 26px; height: 18px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.pais-ES { background: linear-gradient(#c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75%); }
.pais-GI { background: linear-gradient(#ffffff 0 64%, #da000c 64%); }
.clubes--compacta { margin-bottom: var(--e3); }

/* ---------- Palmarés ---------- */
.palmares { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.palmares-temporada a {
	position: relative; display: grid; gap: 0.35rem; padding: 1.5rem 1.5rem 1.35rem; height: 100%;
	border-radius: var(--radio); background: var(--noche); color: #fff; text-decoration: none; overflow: hidden;
	transition: transform 380ms var(--sale), box-shadow 380ms var(--sale);
}
.palmares-temporada a:active { transform: scale(0.98); transition-duration: 120ms; }
@media (hover: hover) and (pointer: fine) { .palmares-temporada a:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); color: #fff; } .palmares-temporada a:hover .palmares-icono { transform: rotate(-10deg) scale(1.08); } }
.palmares-anio { font: 800 var(--t-l)/1 var(--fuente-titular); font-stretch: 118%; color: var(--amarillo); }
.palmares-equipo { font-weight: 650; font-size: var(--t-m); line-height: 1.25; padding-right: 3rem; }
.palmares-competicion { font-size: var(--t-xs); color: var(--noche-texto); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.palmares-icono { position: absolute; right: 1.25rem; top: 1.25rem; width: 36px; height: 36px; color: var(--amarillo); transition: transform 500ms var(--sale); }

.palmares-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.palmares-mini li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.6rem; }
.palmares-mini .icono { color: var(--amarillo); width: 20px; height: 20px; }
.palmares-mini-anio { font: 800 var(--t-s)/1 var(--fuente-titular); font-stretch: 115%; color: var(--amarillo); }
.palmares-mini-equipo { font-weight: 600; color: #fff; font-size: var(--t-s); }

/* ---------- Tareas, pilares, funciones, opciones y categorías ---------- */
.tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.tarea { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); }
.seccion:not(.seccion-hueso) .tarea { background: var(--papel-hueso); border-color: transparent; }
.tarea h3 { font-size: 1.06rem; margin: 0 0 0.2rem; font-stretch: 104%; }
.tarea p { margin: 0; font-size: var(--t-s); color: var(--tinta-media); }
.tarea-icono { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--rojo); color: #fff; stroke-width: 2; }

.pilares { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.pilar { padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radio); background: var(--papel-hueso); }
.pilar-numero { display: block; font: 800 var(--t-xl)/1 var(--fuente-titular); font-stretch: 120%; color: var(--rojo); margin-bottom: 1rem; }
.pilar h3 { margin-bottom: 0.5rem; }
.pilar p { margin: 0; color: var(--tinta-media); }

.funciones { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.funcion { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); }
.funcion h3 { display: flex; align-items: center; gap: 0.6rem; }
.funcion h3 .icono { color: var(--rojo); width: 28px; height: 28px; }
.funcion--club { background: var(--noche); color: #fff; border-color: transparent; }
.funcion--club h3 .icono { color: var(--amarillo); }
.funcion--club .lista-check li { color: var(--noche-texto); }
.funcion--club .lista-check li::before { background-color: var(--amarillo); }

.opciones, .categorias { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.opcion, .categoria {
	padding: 1.5rem; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea);
	transition: transform 380ms var(--sale), box-shadow 380ms var(--sale), border-color var(--medio) ease;
}
@media (hover: hover) and (pointer: fine) { .opcion:hover, .categoria:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: transparent; } }
.opcion h3, .categoria h3 { font-size: 1.15rem; margin: 0.9rem 0 0.5rem; }
.opcion p { margin: 0; color: var(--tinta-media); font-size: var(--t-s); }
.opcion-icono, .categoria-icono { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--amarillo-suave); color: var(--rojo); }

/* Listas con marca de verificación */
.lista-check { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: 0.7rem; }
.lista-check li { position: relative; padding-left: 1.9rem; line-height: 1.5; }
.lista-check li::before {
	content: ""; position: absolute; left: 0; top: 0.15em; width: 1.2rem; height: 1.2rem; border-radius: 999px;
	background: var(--rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8.5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
.lista-check--compacta { gap: 0.5rem; font-size: var(--t-s); }
.lista-check--compacta li::before { top: 0.1em; }

/* ---------- Cronología ---------- */
.cronologia { position: relative; padding: 0 0 0 2.25rem; }
.cronologia-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.cronologia::before, .cronologia-linea { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; }
.cronologia::before { background: var(--linea); }
.cronologia-linea { background: linear-gradient(var(--rojo), var(--rojo) 80%, var(--amarillo)); transform-origin: top center; }
.js .cronologia-linea { transform: scaleY(0); }
@supports (animation-timeline: view()) {
	.js .cronologia-linea { animation: linea-crece linear both; animation-timeline: view(); animation-range: entry 25% cover 55%; }
}
@supports not (animation-timeline: view()) {
	.js .cronologia.visto .cronologia-linea { transform: scaleY(1); transition: transform 1600ms var(--entra-sale); }
}
@keyframes linea-crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hito { position: relative; }
.hito-punto { position: absolute; left: -2.25rem; top: 0.2rem; width: 24px; height: 24px; border-radius: 999px; background: var(--papel); border: 2px solid var(--linea-fuerte); display: grid; place-items: center; transition: border-color var(--medio) ease, background-color var(--medio) ease; }
.hito-punto::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--linea-fuerte); transition: background-color var(--medio) ease, transform 500ms var(--sale); }
.hito.visto .hito-punto, html:not(.js) .hito-punto { border-color: var(--rojo); }
.hito.visto .hito-punto::after, html:not(.js) .hito-punto::after { background: var(--rojo); }
.hito--destacado .hito-punto { background: var(--amarillo); border-color: var(--amarillo); }
.hito--destacado.visto .hito-punto::after { background: var(--tinta); transform: scale(1.1); }
.hito-fecha { margin: 0 0 0.2rem; font: 800 var(--t-s)/1.2 var(--fuente-titular); font-stretch: 115%; color: var(--rojo); letter-spacing: 0.02em; }
.hito h3 { font-size: 1.2rem; margin: 0 0 0.35rem; }
.hito p:last-child { margin: 0; color: var(--tinta-media); }
.seccion-hueso .hito-punto { background: var(--papel-hueso); }
.historia-cabecera { position: sticky; top: 110px; }
.historia-cabecera .cambio-nombre { margin-top: var(--e3); }
@media (max-width: 880px) { .historia-cabecera { position: static; } }

/* ---------- Avisos ---------- */
.aviso {
	display: flex; gap: 1rem; align-items: flex-start;
	padding: 1.25rem 1.4rem; margin: 0 0 var(--e3);
	border-radius: var(--radio); background: var(--papel-hueso); border: 1px solid var(--linea);
	border-left: 4px solid var(--rojo);
}
.aviso p { margin: 0; font-size: var(--t-s); color: var(--tinta-media); }
.aviso .aviso-titulo { font-family: var(--fuente-titular); font-weight: 700; font-stretch: 105%; font-size: 1.08rem; color: var(--tinta); margin-bottom: 0.35rem; }
.aviso-icono { width: 28px; height: 28px; color: var(--rojo); margin-top: 2px; }
.aviso--grande { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--noche); border-color: transparent; border-left-color: var(--amarillo); }
.aviso--grande .aviso-titulo { color: #fff; font-size: var(--t-l); line-height: 1.15; }
.aviso--grande p { color: var(--noche-texto); font-size: var(--t-base); }
.aviso--grande .aviso-icono { color: var(--amarillo); width: 34px; height: 34px; }
.aviso--publicidad { background: var(--amarillo-suave); border-color: #f3e2ad; border-left-color: var(--amarillo); margin-bottom: var(--e5); }
.seccion--aviso { padding-block: var(--e4); }
.seccion--aviso .aviso { margin: 0; }
.aviso--publicidad .aviso-icono { color: var(--amarillo-oscuro); }

/* ---------- Pasos ---------- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: paso; }
.paso { position: relative; padding: 1.5rem; border-radius: var(--radio); background: var(--papel-hueso); }
.paso-numero { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tinta); color: #fff; font: 800 1rem/1 var(--fuente-titular); font-stretch: 115%; margin-bottom: 1rem; }
.paso:last-child .paso-numero { background: var(--rojo); }
.paso h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.paso p { margin: 0; font-size: var(--t-s); color: var(--tinta-media); }

/* ---------- Preguntas frecuentes (acordeón nativo) ---------- */
.preguntas { display: grid; gap: 0.6rem; }
.pregunta { border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); transition: border-color var(--medio) ease, box-shadow var(--medio) ease; }
.pregunta[open] { border-color: var(--linea-fuerte); box-shadow: var(--sombra-1); }
.pregunta summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.1rem 1.25rem; cursor: pointer; list-style: none;
	font-family: var(--fuente-titular); font-weight: 700; font-stretch: 104%; font-size: 1.06rem; line-height: 1.3;
	border-radius: inherit;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta-icono { width: 22px; height: 22px; flex: none; color: var(--rojo); transition: transform var(--medio) var(--entra-sale); }
.pregunta[open] .pregunta-icono { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .pregunta summary:hover { color: var(--rojo); } }
.pregunta-cuerpo { padding: 0 1.25rem 1.2rem; color: var(--tinta-media); }
.pregunta-cuerpo p { margin: 0; }
.pregunta::details-content { block-size: 0; overflow-y: clip; transition: block-size 300ms var(--entra-sale), content-visibility 300ms allow-discrete; }
.pregunta[open]::details-content { block-size: auto; }
.pregunta[open] .pregunta-cuerpo { opacity: 1; transform: none; transition: opacity 260ms ease 60ms, transform 300ms var(--sale) 60ms; }
@starting-style { .pregunta[open] .pregunta-cuerpo { opacity: 0; transform: translate3d(0, -4px, 0); } }

/* ---------- Pestañas de temporadas: la pastilla activa se desliza con clip-path ---------- */
.pestanas-barra { position: relative; display: inline-flex; max-width: 100%; margin-bottom: var(--e4); }
.pestanas-lista {
	display: flex; gap: 2px; padding: 4px; margin: 0;
	background: var(--papel-gris); border-radius: 999px; overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.pestanas-lista::-webkit-scrollbar { display: none; }
.pestana {
	display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1.1rem;
	border-radius: 999px; white-space: nowrap; text-decoration: none; color: var(--tinta-media);
	font: 700 var(--t-s)/1 var(--fuente-titular); font-stretch: 108%;
	transition: color var(--rapido) ease;
}
.pestana-sigla { font-size: 0.7rem; letter-spacing: 0.08em; padding: 0.2rem 0.4rem; border-radius: 4px; background: rgba(18, 20, 23, 0.08); }
@media (hover: hover) and (pointer: fine) { .pestanas-lista:not(.pestanas-lista--activa) .pestana:hover { color: var(--tinta); } }
.pestanas-lista--activa { display: none; }
.js .pestanas-lista--activa {
	display: flex; position: absolute; inset: 0; pointer-events: none; background: var(--tinta);
	clip-path: inset(0 100% 0 0 round 999px);
	transition: clip-path 320ms var(--entra-sale);
}
.js .pestanas-lista--activa.instantaneo { transition: none; }
.pestanas-lista--activa .pestana { color: #fff; }
.pestanas-lista--activa .pestana-sigla { background: var(--amarillo); color: var(--tinta); }
.js [data-pestanas] .temporada { display: none; }
.js [data-pestanas] .temporada.activa { display: block; animation: panel-entra 360ms var(--sale); }
@keyframes panel-entra { from { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
html:not(.js) .temporada + .temporada { margin-top: var(--e6); padding-top: var(--e5); border-top: 1px solid var(--linea); }

.temporada { outline: none; }
.temporada-cabecera { max-width: 780px; margin-bottom: var(--e4); }
.temporada-cabecera h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.sigla { font: 700 var(--t-xs)/1 var(--fuente-titular); letter-spacing: 0.06em; padding: 0.4rem 0.65rem; border-radius: 999px; background: var(--papel-gris); color: var(--tinta-media); text-transform: uppercase; }
.sigla--lir { background: var(--amarillo); color: var(--tinta); }
.temporada-datos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--t-s); color: var(--tinta-media); }
.temporada-datos > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.temporada-resumen { font-size: var(--t-m); color: var(--tinta-media); line-height: 1.55; }
.temporada-subtitulo { font-size: var(--t-l); margin: var(--e5) 0 var(--e3); }
.temporada-nota { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-s); color: var(--tinta-suave); }
.temporada-enlaces { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: var(--e4); }
.estado { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.estado--vivo { color: var(--rojo); }
.estado--vivo::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--rojo); box-shadow: 0 0 0 0 rgba(203, 14, 16, 0.5); animation: latido 1800ms ease-out infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(203, 14, 16, 0.45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(203, 14, 16, 0); } }

/* ---------- Podio ---------- */
.podio { list-style: none; margin: 0 0 var(--e5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: end; max-width: 820px; }
.podio-puesto {
	position: relative; display: grid; gap: 0.4rem; align-content: end; padding: 1.25rem 1.25rem 1.4rem;
	border-radius: var(--radio) var(--radio) 6px 6px; background: var(--papel-hueso); border: 1px solid var(--linea); min-height: 150px;
}
.podio-puesto-1 { order: 2; min-height: 200px; background: var(--noche); color: #fff; border-color: transparent; box-shadow: var(--sombra-2); }
.podio-puesto-2 { order: 1; }
.podio-puesto-3 { order: 3; min-height: 128px; }
.podio-medalla { font: 700 0.72rem/1 var(--fuente-titular); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.podio-puesto-1 .podio-medalla { color: var(--amarillo); }
.podio-equipo { font-family: var(--fuente-titular); font-weight: 800; font-stretch: 106%; font-size: clamp(1rem, 1.4vw + 0.6rem, 1.35rem); line-height: 1.15; }
.podio-icono { width: 38px; height: 38px; color: var(--amarillo); margin-bottom: 0.4rem; }
.podio-puesto::before { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: #c9ccd3; }
.podio-puesto-1::before { background: var(--amarillo); }
.podio-puesto-3::before { background: #c68a52; }
@media (max-width: 640px) {
	.podio { grid-template-columns: 1fr; }
	.podio-puesto { min-height: 0; border-radius: var(--radio); }
	.podio-puesto-1 { order: 0; }
	.podio-puesto-2 { order: 1; }
}

/* ---------- Tablas de clasificación ---------- */
.tablas { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); }
.tabla-bloque { min-width: 0; }
@media (min-width: 1040px) { .tablas--dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tabla-envoltorio {
	overflow-x: auto; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel);
	/* Sombras que avisan de que hay más tabla a la derecha */
	background-image: linear-gradient(to right, var(--papel), var(--papel)), linear-gradient(to right, var(--papel), var(--papel)),
		linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent), linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
	background-attachment: local, local, scroll, scroll;
}
.tabla-envoltorio:focus-visible { outline-offset: 2px; }
/* El recorte de pintura evita que el navegador del móvil tenga en cuenta la tabla ancha al ajustar el zoom de la página. */
.tabla-envoltorio { contain: paint; }
.clasificacion { width: 100%; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; margin: 0; }
.clasificacion caption { text-align: left; padding: 1rem 1.1rem 0.75rem; font: 800 1.05rem/1.2 var(--fuente-titular); font-stretch: 108%; color: var(--tinta); }
.clasificacion th, .clasificacion td { padding: 0.7rem 0.6rem; text-align: center; border-top: 1px solid var(--linea); white-space: nowrap; }
.clasificacion thead th { background: var(--noche); color: #fff; font: 700 0.72rem/1 var(--fuente-titular); letter-spacing: 0.08em; text-transform: uppercase; border-top: 0; }
.clasificacion abbr { text-decoration: none; cursor: help; }
.clasificacion .col-pos { width: 3rem; font-family: var(--fuente-titular); font-weight: 800; color: var(--tinta-suave); }
.clasificacion .col-equipo { text-align: left; font-weight: 600; min-width: 11rem; }
.clasificacion .col-pts { font-family: var(--fuente-titular); font-weight: 800; font-size: 1rem; color: var(--tinta); }
.clasificacion thead .col-pts { color: var(--amarillo); }
.clasificacion tbody tr { transition: background-color var(--rapido) ease; }
@media (hover: hover) and (pointer: fine) { .clasificacion tbody tr:hover { background: var(--papel-hueso); } }
.clasificacion tbody tr.puesto-1 { background: linear-gradient(to right, var(--amarillo-suave), transparent 70%); }
.clasificacion tbody tr.puesto-1 .col-pos { color: var(--amarillo-oscuro); box-shadow: inset 4px 0 0 var(--amarillo); }
.clasificacion tbody tr.puesto-2 .col-pos, .clasificacion tbody tr.puesto-3 .col-pos { color: var(--tinta); }

/* ---------- Cruces de la fase final ---------- */
.cruces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; max-width: 820px; }
.cruce {
	display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.9rem;
	padding: 0.9rem 1.1rem; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea);
}
.cruce-ronda { font: 700 0.72rem/1.2 var(--fuente-titular); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rojo); }
.cruce-equipo { color: var(--tinta-suave); font-weight: 500; }
.cruce-equipo--visitante { text-align: right; }
.cruce-equipo--gana { color: var(--tinta); font-weight: 700; }
.cruce-marcador { font: 800 1rem/1 var(--fuente-titular); font-stretch: 110%; padding: 0.45rem 0.7rem; border-radius: 8px; background: var(--noche); color: #fff; min-width: 3.4rem; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
	.cruce { grid-template-columns: 1fr auto; grid-template-areas: "ronda ronda" "local marcador" "visitante marcador"; row-gap: 0.35rem; }
	.cruce-ronda { grid-area: ronda; }
	.cruce-equipo { grid-area: local; }
	.cruce-equipo--visitante { grid-area: visitante; text-align: left; }
	.cruce-marcador { grid-area: marcador; }
}

/* ---------- Planes (seguro y socios) ---------- */
.planes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; }
.planes--dos { max-width: 900px; }
.plan {
	display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea);
	transition: transform 380ms var(--sale), box-shadow 380ms var(--sale), border-color var(--medio) ease;
}
@media (hover: hover) and (pointer: fine) { .plan:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: transparent; } }
.plan-nombre, .plan-etiqueta { font: 700 var(--t-xs)/1.2 var(--fuente-titular); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rojo); margin: 0 0 0.9rem; }
.plan-precio { display: flex; align-items: baseline; gap: 0.2rem; margin: 0 0 1.25rem; }
.plan-importe { font: 800 clamp(2.75rem, 3vw + 1.6rem, 3.75rem)/1 var(--fuente-titular); font-stretch: 118%; letter-spacing: -0.03em; }
.plan-moneda { font: 800 1.5rem/1 var(--fuente-titular); }
.plan-periodo { margin-left: 0.4rem; color: var(--tinta-suave); font-size: var(--t-s); }
.plan-precio--texto { align-items: center; gap: 0.7rem; font: 800 var(--t-l)/1.2 var(--fuente-titular); font-stretch: 106%; }
.plan-icono { width: 38px; height: 38px; color: var(--rojo); }
.plan .lista-check { flex: 1; }
.plan .boton { align-self: flex-start; }
.plan-nota { margin: 0.9rem 0 0; font-size: var(--t-xs); color: var(--tinta-suave); }
.plan--destacado { background: var(--noche); color: #fff; border-color: transparent; box-shadow: var(--sombra-2); }
.plan--destacado .plan-etiqueta { color: var(--amarillo); }
.plan--destacado .plan-periodo, .plan--destacado .plan-nota { color: var(--noche-texto); }
.plan--destacado .lista-check li { color: #e3e6ec; }
.plan--destacado .lista-check li::before { background-color: var(--amarillo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121417' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8.5'/%3E%3C/svg%3E"); }
.plan--destacado .boton { --fondo: var(--amarillo); --texto: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .plan--destacado .boton:hover { --fondo: #ffcd3d; box-shadow: 0 8px 22px -8px rgba(255, 188, 7, 0.6); } }
.nota-pie { margin-top: var(--e3); font-size: var(--t-s); color: var(--tinta-suave); max-width: 70ch; }
.plan-resumen { margin: -0.5rem 0 1.1rem; color: var(--tinta-media); font-size: var(--t-s); }
.plan .lista-check--compacta { margin-bottom: 1.5rem; }
.planes--inscripcion { margin-bottom: var(--e4); max-width: 760px; }
.planes--inscripcion .plan-resumen { margin: 0; }

/* ---------- Comparativa de pólizas ---------- */
.comparativa-titulo { margin: var(--e5) 0 var(--e3); font-size: var(--t-l); }
.comparativa { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; margin: 0; }
.comparativa th, .comparativa td { padding: 0.7rem 1rem; border-top: 1px solid var(--linea); text-align: center; vertical-align: middle; }
.comparativa thead th { border-top: 0; padding-block: 1.15rem 0.95rem; }
.comparativa-plan { display: grid; justify-items: center; gap: 0.35rem; font: 700 var(--t-xs)/1.2 var(--fuente-titular); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rojo); }
.comparativa-prima { font: 800 1.3rem/1 var(--fuente-titular); font-stretch: 112%; letter-spacing: -0.01em; text-transform: none; color: var(--tinta); }
.comparativa-grupo th { text-align: left; background: var(--papel-hueso); font: 700 0.72rem/1.2 var(--fuente-titular); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta); padding-block: 0.6rem; }
.comparativa th[scope="row"] { text-align: left; font-weight: 500; color: var(--tinta-media); }
.comparativa td strong { font-weight: 700; color: var(--tinta); }
/* En el móvil la tabla se desplaza y la columna de las coberturas se queda quieta. */
.comparativa th[scope="row"], .comparativa thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--papel); }
.comparativa tbody tr { transition: background-color var(--rapido) ease; }
@media (hover: hover) and (pointer: fine) {
	.comparativa tbody tr:not(.comparativa-grupo):hover, .comparativa tbody tr:not(.comparativa-grupo):hover th[scope="row"] { background: var(--papel-hueso); }
}
.cobertura-si { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--tinta); }
.cobertura-si .icono { width: 1.15rem; height: 1.15rem; padding: 3px; border-radius: 999px; background: var(--rojo); color: #fff; stroke-width: 3.2; }
.cobertura-no { font-weight: 700; color: var(--linea-fuerte); }

/* ---------- Persona de contacto del seguro ---------- */
.tarjeta-persona {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3);
	padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--radio); background: var(--papel-hueso);
	border-left: 4px solid var(--rojo);
}
.tarjeta-persona-texto { max-width: 560px; }
.tarjeta-persona h2 { font-size: var(--t-xl); margin-bottom: 0.5rem; }
.tarjeta-persona p:last-child { margin: 0; color: var(--tinta-media); }

/* ---------- Contacto ---------- */
.contactos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.contacto {
	position: relative; display: grid; align-content: start; gap: 0.35rem; padding: 1.75rem;
	border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none;
	transition: transform 380ms var(--sale), box-shadow 380ms var(--sale), border-color var(--medio) ease;
}
a.contacto:active { transform: scale(0.985); transition-duration: 120ms; }
@media (hover: hover) and (pointer: fine) { a.contacto:hover, .contacto--correo:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: transparent; color: var(--tinta); } }
.contacto-icono { width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: var(--papel-hueso); color: var(--tinta); margin-bottom: 0.85rem; }
.contacto--whatsapp { background: var(--noche); color: #fff; border-color: transparent; }
.contacto--whatsapp .contacto-icono { background: #25d366; color: #fff; }
@media (hover: hover) and (pointer: fine) { a.contacto--whatsapp:hover { color: #fff; } }
.contacto-tipo { font: 700 var(--t-xs)/1.2 var(--fuente-titular); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.contacto--whatsapp .contacto-tipo, .contacto--whatsapp .contacto-nota { color: var(--noche-texto); }
.contacto-dato { font: 800 var(--t-l)/1.2 var(--fuente-titular); font-stretch: 104%; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.contacto-nota { font-size: var(--t-s); color: var(--tinta-suave); }
.contacto--correo .contacto-dato { font-size: clamp(1.05rem, 1vw + 0.8rem, 1.3rem); }

/* Botón de copiar: el texto se funde con un desenfoque al cambiar de estado */
.copiar {
	justify-self: start; display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem;
	min-height: 38px; padding: 0 0.85rem; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--papel);
	font: 600 var(--t-xs)/1 var(--fuente-texto); color: var(--tinta); cursor: pointer;
	transition: transform 120ms var(--sale), border-color var(--rapido) ease;
}
.copiar:active { transform: scale(0.96); }
.copiar .icono { width: 16px; height: 16px; }
.copiar-texto, .copiar-icono, .copiar-hecho { transition: opacity 200ms ease, filter 200ms ease, transform 200ms var(--sale); }
.copiar-hecho { display: none; color: #198754; }
.copiar[data-estado="hecho"] { border-color: #198754; }
.copiar[data-estado="hecho"] .copiar-icono { display: none; }
.copiar[data-estado="hecho"] .copiar-hecho { display: block; }
.copiar.cambiando .copiar-texto { opacity: 0.4; filter: blur(2px); }
.compartir .copiar { margin-top: 0; }

.temas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.tema {
	position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 0.2rem; align-items: start;
	padding: 1.25rem 3rem 1.25rem 1.25rem; height: 100%; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea);
	color: var(--tinta); text-decoration: none; transition: transform 380ms var(--sale), box-shadow 380ms var(--sale), border-color var(--medio) ease;
}
.tema:active { transform: scale(0.985); transition-duration: 120ms; }
@media (hover: hover) and (pointer: fine) { .tema:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: transparent; color: var(--tinta); } .tema:hover .tema-flecha { transform: translateX(3px); color: var(--rojo); } }
.tema-icono { grid-row: span 2; width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--rojo-suave); color: var(--rojo); }
.tema-titulo { font-family: var(--fuente-titular); font-weight: 700; font-size: 1.08rem; }
.tema-texto { font-size: var(--t-s); color: var(--tinta-media); line-height: 1.45; }
.tema-flecha { position: absolute; right: 1.1rem; top: 1.3rem; color: var(--tinta-suave); transition: transform var(--medio) var(--sale), color var(--rapido) ease; }

/* Ficha de datos */
.ficha { margin: 0; display: grid; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); overflow: hidden; }
.ficha > div { display: grid; grid-template-columns: minmax(8rem, 35%) 1fr; gap: 1rem; padding: 0.95rem 1.25rem; }
.ficha > div + div { border-top: 1px solid var(--linea); }
.ficha dt { font-size: var(--t-xs); color: var(--tinta-suave); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding-top: 0.2rem; }
.ficha dd { margin: 0; font-weight: 550; }
.seccion-hueso .ficha { background: var(--papel); }

/* ---------- Patrocinio ---------- */
.patrocinador {
	display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
	padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra-1);
}
.patrocinador-logo { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: calc(var(--radio) - 4px); background: var(--papel-hueso); padding: 2rem; }
.patrocinador-logo img { width: min(100%, 240px); }
.patrocinador h2 { margin-bottom: 0.75rem; }
.patrocinador-texto > p:not(.rotulo) { color: var(--tinta-media); }
@media (max-width: 720px) { .patrocinador { grid-template-columns: 1fr; } }

.franja-patrocinio { padding-block: var(--e4); border-top: 1px solid var(--linea); }
.franja-patrocinio--borde { border-bottom: 1px solid var(--linea); }
.franja-patrocinio-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.5rem; }
.franja-patrocinio-texto { margin: 0; font: 700 var(--t-xs)/1 var(--fuente-titular); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); }
.franja-patrocinio-logo { display: block; padding: 0.35rem; border-radius: var(--radio-s); transition: transform 380ms var(--sale), opacity var(--medio) ease; }
.franja-patrocinio-logo img { width: 110px; height: auto; }
@media (hover: hover) and (pointer: fine) { .franja-patrocinio-logo:hover { transform: scale(1.04); } }

/* ---------- Banda final de llamada a la acción ---------- */
.banda-cta { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(900px 480px at 20% 0%, #252932 0%, var(--noche-2) 70%); color: #fff; padding-block: clamp(3.5rem, 7vw, 6rem); }
.banda-cta .franjas { z-index: -1; }
.banda-cta-rejilla { display: grid; justify-items: start; gap: var(--e3); }
.banda-cta-rejilla > div:first-child { max-width: 680px; }
.banda-cta .rotulo { color: var(--amarillo); }
.banda-cta h2 { margin-bottom: 0.6rem; }
.banda-cta p:last-child { margin: 0; color: var(--noche-texto); font-size: var(--t-m); }
@media (max-width: 900px) { .banda-cta .franjas { opacity: 0.3; } }

/* ---------- Documento: páginas y entradas, con índice lateral ---------- */
.documento { display: grid; gap: var(--e4); }
@media (min-width: 1040px) {
	.documento--con-indice { grid-template-columns: 240px minmax(0, 1fr); gap: var(--e5); align-items: start; }
	.documento--con-indice .indice { position: sticky; top: 110px; }
}
.documento:not(.documento--con-indice) .contenido { margin-inline: auto; }
.indice { font-size: var(--t-s); }
.indice-titulo { font: 700 var(--t-xs)/1 var(--fuente-titular); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 0.9rem; }
.indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; border-left: 2px solid var(--linea); }
.indice a { display: block; padding: 0.35rem 0 0.35rem 0.9rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--tinta-media); text-decoration: none; line-height: 1.35; transition: color var(--rapido) ease, border-color var(--rapido) ease; }
.indice a[aria-current="true"] { color: var(--rojo); border-left-color: var(--rojo); }
@media (hover: hover) and (pointer: fine) { .indice a:hover { color: var(--tinta); } }
@media (max-width: 1039px) {
	.indice { padding: 1.1rem 1.25rem; border-radius: var(--radio); background: var(--papel-hueso); }
	.indice ol { border-left: 0; }
	.indice a { padding-left: 0; border-left: 0; }
}

/* Texto largo */
.contenido { max-width: var(--ancho-texto); font-size: 1.08rem; line-height: 1.75; }
.contenido > *:first-child { margin-top: 0; }
.contenido h2 { font-size: var(--t-xl); margin-top: var(--e5); scroll-margin-top: 100px; }
.contenido h3 { font-size: var(--t-l); margin-top: var(--e4); scroll-margin-top: 100px; }
.contenido h4 { margin-top: var(--e3); }
.contenido a { font-weight: 550; }
.contenido img { border-radius: var(--radio); margin-block: var(--e3); }
.contenido figure { margin-block: var(--e4); }
.contenido figcaption { font-size: var(--t-s); color: var(--tinta-suave); margin-top: 0.6rem; }
.contenido ul, .contenido ol { padding-left: 1.4rem; }
.contenido li { margin-bottom: 0.45rem; }
.contenido li::marker { color: var(--rojo); }
.contenido blockquote { margin: var(--e4) 0; padding: 0.5rem 0 0.5rem 1.5rem; border-left: 4px solid var(--amarillo); font-size: var(--t-m); color: var(--tinta-2); }
.contenido hr { border: 0; height: 1px; background: var(--linea); margin: var(--e5) 0; }
.contenido table { width: 100%; border-collapse: collapse; font-size: var(--t-s); margin: 0; }
.contenido th, .contenido td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.contenido thead th { background: var(--noche); color: #fff; font: 700 0.75rem/1.2 var(--fuente-titular); letter-spacing: 0.06em; text-transform: uppercase; }
.contenido .tabla-envoltorio { margin-block: var(--e4); }
.contenido iframe { max-width: 100%; border-radius: var(--radio); }
.contenido .wp-block-image img { margin: 0; }
.contenido .alignwide { max-width: none; }

/* ---------- Entrada ---------- */
.progreso { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 3px; background: var(--rojo); transform-origin: 0 50%; transform: scaleX(0); display: none; }
@supports (animation-timeline: scroll()) {
	.progreso { display: block; animation: progreso linear both; animation-timeline: scroll(root); }
}
@keyframes progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.entrada-cabecera { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.entrada-cabecera h1 { font-size: clamp(2rem, 2.6vw + 1.3rem, 3.4rem); line-height: 1.05; }
.entrada-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: var(--t-s); color: var(--tinta-suave); margin-bottom: var(--e2); }
.entrada-lectura { display: inline-flex; align-items: center; gap: 0.35rem; }
.entrada-imagen { width: min(100% - 2.5rem, 980px); margin: 0 auto var(--e4); }
.entrada-imagen img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio); }
.entrada .documento { padding-bottom: var(--e6); }
.compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid var(--linea); }
.compartir-titulo { margin: 0 0.5rem 0 0; font: 700 var(--t-xs)/1 var(--fuente-titular); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); width: 100%; }

/* ---------- Listados ---------- */
.buscador { position: relative; display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.buscador-icono { position: absolute; left: 1rem; width: 20px; height: 20px; color: var(--tinta-suave); pointer-events: none; }
.buscador input[type="search"] {
	flex: 1; min-width: 0; min-height: 48px; padding: 0 1rem 0 2.8rem;
	border: 1.5px solid var(--linea-fuerte); border-radius: 999px; background: var(--papel);
	font: 500 1rem/1 var(--fuente-texto); color: var(--tinta);
	transition: border-color var(--rapido) ease, box-shadow var(--medio) ease;
}
.buscador input[type="search"]:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(255, 188, 7, 0.45); }
.buscador .boton { min-height: 48px; }
.buscador-cabecera { min-width: min(100%, 340px); }
.cabecera-pagina-extra .buscador-cabecera { min-width: 0; }

.paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: var(--e5); }
.paginacion .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 0.8rem;
	border-radius: 999px; border: 1.5px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 600;
	transition: background-color var(--rapido) ease, border-color var(--rapido) ease, color var(--rapido) ease, transform 120ms var(--sale);
}
.paginacion a.page-numbers:active { transform: scale(0.94); }
.paginacion .current { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.paginacion .dots { border: 0; min-width: 24px; }
@media (hover: hover) and (pointer: fine) { .paginacion a.page-numbers:hover { border-color: var(--tinta); } }

.vacio { max-width: 560px; margin-inline: auto; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.vacio-icono { width: 56px; height: 56px; color: var(--tinta-suave); }
.vacio .buscador { width: 100%; }

/* ---------- 404 ---------- */
.error404-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(3rem, 8vw, 6.5rem); background: var(--papel-hueso); text-align: center; }
.error404-hero .franjas { z-index: -1; }
.error404-codigo { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 1rem; font: 800 clamp(5rem, 14vw, 9rem)/1 var(--fuente-titular); font-stretch: 120%; letter-spacing: -0.04em; }
.error404-codigo img { width: clamp(90px, 16vw, 150px); animation: rebote 2200ms var(--entra-sale) 900ms both; }
@keyframes rebote { 0% { transform: rotate(-20deg) translateY(-12px); } 40% { transform: rotate(8deg) translateY(4px); } 70% { transform: rotate(-4deg); } 100% { transform: rotate(-8deg); } }
.error404-hero .entradilla { margin-inline: auto; }
.error404-hero .buscador { max-width: 520px; margin: var(--e3) auto; }
.atajos { list-style: none; margin: var(--e4) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.atajos a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: var(--papel); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: var(--t-s); transition: transform 120ms var(--sale), border-color var(--rapido) ease; }
.atajos a:active { transform: scale(0.96); }
.atajos .icono { width: 16px; height: 16px; color: var(--rojo); transition: transform var(--medio) var(--sale); }
@media (hover: hover) and (pointer: fine) { .atajos a:hover { border-color: var(--tinta); color: var(--tinta); } .atajos a:hover .icono { transform: translateX(3px); } }

/* ---------- Pie ---------- */
.pie { position: relative; overflow: hidden; isolation: isolate; background: var(--noche); color: var(--noche-texto); border-top: 1px solid var(--noche-linea); padding-block: clamp(3.5rem, 7vw, 5.5rem) 1.75rem; font-size: var(--t-s); }
.pie a { color: #fff; text-decoration: none; transition: color var(--rapido) ease; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { color: var(--amarillo); } }
.pie-rejilla { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (min-width: 1000px) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 1.15fr 1fr; } }
.pie-logo { display: inline-block; margin-bottom: 1.25rem; }
.pie-logo img { width: 124px; }
.pie-marca p { max-width: 34ch; }
.pie-titulo { font: 700 var(--t-xs)/1 var(--fuente-titular); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin: 0.4rem 0 1.25rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.pie-contacto { margin-top: 1.25rem !important; }
.pie-contacto a { display: inline-flex; align-items: center; gap: 0.55rem; }
.pie-contacto .icono { width: 18px; height: 18px; color: var(--amarillo); }
.pie-datos li { line-height: 1.45; }
.pie-patrocinador { display: inline-block; margin-bottom: 1rem; opacity: 0.92; transition: opacity var(--rapido) ease, transform 380ms var(--sale); }
.pie-patrocinador img { width: 96px; }
@media (hover: hover) and (pointer: fine) { .pie-patrocinador:hover { opacity: 1; transform: translateY(-2px); } }
.pie-legal {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--noche-linea);
	font-size: var(--t-xs); color: #8e949f;
}
.pie-legal p { margin: 0; }
.pie-legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.pie-legal a { color: #c3c7cf; }
.pie-firma a { font-weight: 700; letter-spacing: 0.02em; }

/* ---------- Calendario ---------- */
.contenedor-medio { width: min(100% - 2.5rem, 940px); margin-inline: auto; }

/* Clubes enlazados a su calendario, con su grupo */
.club { position: relative; }
.club-nombre { color: var(--tinta); text-decoration: none; }
.club-nombre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.club-nombre:focus-visible { outline: none; }
.club:has(.club-nombre:focus-visible) { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.club:has(.club-nombre:active) { transform: scale(0.985); transition-duration: 120ms; }
.club-lado { display: grid; justify-items: end; gap: 0.35rem; flex: none; }
.club-grupo { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--papel-gris); color: var(--tinta-media); font: 800 0.7rem/1 var(--fuente-titular); }
@media (hover: hover) and (pointer: fine) { .club:hover .club-nombre { color: var(--rojo); } }

/* Selector de equipos */
.selector-equipos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.selector-grupo { padding: 1.25rem; border-radius: var(--radio); background: var(--papel-hueso); }
.seccion-hueso .selector-grupo { background: var(--papel); border: 1px solid var(--linea); }
.selector-grupo-titulo { margin: 0 0 0.9rem; font: 700 var(--t-xs)/1 var(--fuente-titular); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rojo); }
.selector-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.chip-equipo {
	display: flex; align-items: center; gap: 0.75rem; min-height: 52px; padding: 0.4rem 1rem 0.4rem 0.45rem;
	border-radius: 12px; background: var(--papel); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 600;
	transition: transform 300ms var(--sale), box-shadow 300ms var(--sale), border-color var(--rapido) ease, background-color var(--rapido) ease;
}
.chip-equipo:active { transform: scale(0.985); transition-duration: 120ms; }
.chip-equipo .equipo-codigo { width: 40px; height: 40px; font-size: 0.78rem; }
.chip-equipo-flecha { margin-left: auto; width: 18px; height: 18px; color: var(--tinta-suave); transition: transform var(--medio) var(--sale), color var(--rapido) ease; }
@media (hover: hover) and (pointer: fine) {
	.chip-equipo:hover { transform: translateX(3px); box-shadow: var(--sombra-1); border-color: var(--linea-fuerte); color: var(--tinta); }
	.chip-equipo:hover .chip-equipo-flecha { transform: translateX(3px); color: var(--rojo); }
}
.chip-equipo--actual { background: var(--noche); border-color: transparent; color: #fff; }
.chip-equipo--actual .chip-equipo-flecha { display: none; }
@media (hover: hover) and (pointer: fine) { .chip-equipo--actual:hover { color: #fff; } }

/* Código de equipo (también en partidos y filas) */
.equipo { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--tinta); text-decoration: none; font-weight: 600; min-width: 0; }
.equipo-codigo {
	position: relative; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; overflow: hidden;
	background: var(--noche); color: #fff; font: 800 0.68rem/1 var(--fuente-titular); font-stretch: 110%; letter-spacing: 0.03em; padding-bottom: 2px;
}
.equipo-codigo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--rojo) 0 64%, var(--amarillo) 64%); }
.equipo-nombre { overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) { a.equipo:hover { color: var(--rojo); } }

/* Calendario general: fines de semana */
.findes { display: grid; gap: 0.9rem; }
.finde {
	display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start;
	padding: clamp(1rem, 2.5vw, 1.5rem); border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea);
	scroll-margin-top: 100px;
}
.finde-fecha { display: grid; justify-items: center; gap: 0.2rem; padding: 0.9rem 0.4rem; border-radius: 12px; background: var(--noche); color: #fff; text-align: center; }
.finde-dias { font: 800 1.55rem/1 var(--fuente-titular); font-stretch: 112%; letter-spacing: -0.02em; }
.finde-mes { font: 700 0.8rem/1 var(--fuente-titular); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amarillo); }
.finde-anio { font-size: 0.72rem; color: var(--noche-texto); }
.finde-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; font-size: 1.05rem; margin: 0.35rem 0 0.9rem; font-stretch: 104%; }
.finde--proxima { border-color: var(--amarillo); box-shadow: 0 0 0 3px var(--amarillo-suave), var(--sombra-2); }
.finde--proxima .finde-fecha { background: var(--rojo); }
.finde--proxima .finde-mes, .finde--proxima .finde-anio { color: #fff; }
.finde--proxima .finde-mes { color: #fff; }
.finde-descansos { margin: 0.75rem 0 0; font-size: var(--t-s); color: var(--tinta-suave); }
.findes-pausa { display: flex; align-items: center; gap: 1rem; margin: 0.6rem 0; color: var(--tinta-suave); font: 700 var(--t-xs)/1 var(--fuente-titular); letter-spacing: 0.14em; text-transform: uppercase; }
.findes-pausa::before, .findes-pausa::after { content: ""; flex: 1; height: 1px; background: var(--linea-fuerte); }

.partidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.partido {
	display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem;
	padding: 0.55rem 0.75rem; border-radius: 12px; background: var(--papel-hueso);
}
.partido-grupo { display: inline-grid; place-items: center; height: 26px; border-radius: 7px; background: var(--papel); border: 1px solid var(--linea); font: 800 0.72rem/1 var(--fuente-titular); color: var(--tinta-media); cursor: help; }
.partido-local { justify-self: end; text-align: right; min-width: 0; }
.partido-local .equipo { flex-direction: row-reverse; }
.partido-visitante { min-width: 0; }
.partido-vs { font: 800 0.72rem/1 var(--fuente-titular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); padding: 0.35rem 0.5rem; border-radius: 6px; background: var(--papel); }
@media (max-width: 640px) {
	.finde { grid-template-columns: 1fr; }
	.finde-fecha { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 0.5rem; padding: 0.6rem 0.9rem; }
	.finde-titulo { margin-top: 0; }
	.partido { grid-template-columns: 2.4rem minmax(0, 1fr); grid-template-areas: "grupo local" "grupo visitante"; row-gap: 0.4rem; }
	.partido-grupo { grid-area: grupo; align-self: center; }
	.partido-local { grid-area: local; justify-self: start; text-align: left; }
	.partido-local .equipo { flex-direction: row; }
	.partido-visitante { grid-area: visitante; }
	.partido-vs { display: none; }
}

/* Calendario de un club: jornada a jornada */
.fixture { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: 0.5rem; }
.fixture-fila {
	display: grid; grid-template-columns: 3rem 7.5rem 5.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.9rem;
	min-height: 64px; padding: 0.6rem 1rem; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea);
}
.fixture-jornada { font: 800 1rem/1 var(--fuente-titular); font-stretch: 112%; color: var(--rojo); }
.fixture-fecha { display: grid; gap: 0.25rem; font-weight: 600; font-size: var(--t-s); }
.fixture-fecha .estado { font-size: 0.72rem; }
.fixture-condicion { justify-self: start; padding: 0.3rem 0.6rem; border-radius: 999px; font: 700 0.72rem/1 var(--fuente-titular); letter-spacing: 0.06em; text-transform: uppercase; }
.fixture-condicion--casa { background: var(--noche); color: #fff; }
.fixture-condicion--fuera { background: var(--papel-gris); color: var(--tinta-media); }
.fixture-rival { min-width: 0; }
.fixture-km { font-size: var(--t-s); color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fixture-fila--descanso { background: transparent; border-style: dashed; }
.fixture-rival--descanso { grid-column: 3 / -1; color: var(--tinta-suave); font-weight: 600; }
.fixture-fila--proxima { border-color: var(--amarillo); box-shadow: 0 0 0 3px var(--amarillo-suave); }
@media (max-width: 640px) {
	.fixture-fila { grid-template-columns: 2.4rem 1fr auto; grid-template-areas: "jornada fecha condicion" "jornada rival km"; row-gap: 0.45rem; }
	.fixture-jornada { grid-area: jornada; }
	.fixture-fecha { grid-area: fecha; }
	.fixture-condicion { grid-area: condicion; justify-self: end; }
	.fixture-rival { grid-area: rival; }
	.fixture-km { grid-area: km; }
	.fixture-rival--descanso { grid-area: rival; grid-column: auto; }
}

/* Fase final */
.rondas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ronda { padding: 1.5rem; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); }
.seccion:not(.seccion-hueso) .ronda { background: var(--papel-hueso); border-color: transparent; }
/* La final va en oscuro en cualquier fondo (la regla de arriba pesa más que :last-child sola). */
.ronda:last-child, .seccion:not(.seccion-hueso) .ronda:last-child { background: var(--noche); color: #fff; border-color: transparent; }
.ronda:last-child p:last-child { color: var(--noche-texto); }
.ronda-fecha { margin: 0 0 0.5rem; font: 700 var(--t-xs)/1.3 var(--fuente-titular); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rojo); }
.ronda:last-child .ronda-fecha { color: var(--amarillo); }
.ronda h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.ronda p:last-child { margin: 0; color: var(--tinta-media); font-size: var(--t-s); }

/* Próxima jornada en la cabecera */
.proxima-mini { display: grid; gap: 0.4rem; }
.proxima-mini-titulo { margin: 0; font: 700 var(--t-xs)/1 var(--fuente-titular); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amarillo); }
.proxima-mini-fecha { margin: 0; font: 800 var(--t-l)/1.15 var(--fuente-titular); font-stretch: 106%; color: #fff; }
.proxima-mini-datos { margin: 0 0 0.4rem; color: var(--noche-texto); font-size: var(--t-s); }

/* ==========================================================================
   Aparición al bajar: solo con JavaScript (clase .js en <html>), así que sin él, y para
   cualquier rastreador, todo se ve desde el principio.
   ========================================================================== */
.js [data-revelar]:not(.visto) { opacity: 0; transform: translate3d(0, 24px, 0); }
.js [data-revelar] { transition: opacity 800ms var(--sale), transform 900ms var(--sale); transition-delay: calc(var(--i, 0) * 70ms); }
/* La cortinilla va en la imagen, no en su contenedor: un elemento recortado entero no lo detecta
   IntersectionObserver y se quedaría oculto para siempre. */
.js [data-revelar="imagen"]:not(.visto) { opacity: 1; transform: none; }
.js [data-revelar="imagen"] { overflow: hidden; border-radius: var(--radio); }
.js [data-revelar="imagen"] img { transition: clip-path 1100ms var(--entra-sale), transform 1500ms var(--sale); }
.js [data-revelar="imagen"]:not(.visto) img { clip-path: inset(0 0 100% 0); transform: scale(1.08); }
.js [data-revelar="cronologia"]:not(.visto), .js [data-revelar="cambio"]:not(.visto) { opacity: 1; transform: none; }

/* ==========================================================================
   Movimiento reducido: sin desplazamientos ni cortinillas; quedan fundidos breves.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.js [data-revelar]:not(.visto), .js [data-revelar="imagen"]:not(.visto) { transform: none; clip-path: none; }
	.js [data-revelar] { transition: opacity 300ms ease; transition-delay: 0ms; }
	.js [data-revelar="imagen"]:not(.visto) img { transform: none; clip-path: none; }
	.entra > *, .cabecera-pagina .franja, .banda-cta .franja, .error404-hero .franja, .hero-franja, .hero-balon,
	.cajon[open] .cajon-menu li, .error404-codigo img, [data-pestanas] .temporada.activa { animation: none !important; }
	.menu-principal .sub-menu, .submenu-boton .icono { transition: none !important; }
	.hero-balon { opacity: 1; }
	.js .cronologia-linea { transform: none !important; animation: none !important; }
	.js .cambio-nombre .cambio-nombre-nuevo, .js .cambio-nombre .cambio-flecha { transform: none; filter: none; }
	.estado--vivo::before { animation: none; }
	.progreso { display: none; }
	.tarjeta, .club, .plan, .opcion, .categoria, .contacto, .tema, .palmares-temporada a { transition: box-shadow var(--medio) ease, border-color var(--medio) ease; }
	.tarjeta:hover, .club:hover, .plan:hover, .opcion:hover, .categoria:hover, a.contacto:hover, .tema:hover, .palmares-temporada a:hover { transform: none; }
	.tarjeta:hover .tarjeta-imagen img { transform: none; }
}

/* ---------- Impresión ---------- */
@media print {
	.cabecera, .cajon, .pie, .banda-cta, .franjas, .hero-fondo, .compartir, .progreso, .franja-patrocinio { display: none !important; }
	.js [data-revelar] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	body { font-size: 11pt; }
}