/* ═══════════════════════════════════════════════════════════════
   Tipografías auto-hospedadas (DEPLOY-PREP §6-bis): cero peticiones
   a terceros. Las tres son SIL Open Font License 1.1, que permite el
   auto-hospedaje; el .txt de licencia viaja junto a cada .woff2.
   · Anton — display y dorsales (OFL). Sustituye a Tanker: su EULA de
     Fontshare (cláusula 02) prohíbe expresamente "transmit the Font
     Software over the Internet in font serving" sin consentimiento
     escrito, que es exactamente lo que hace un @font-face propio.
   · Barlow y Barlow Condensed — todo lo demás (OFL).
   Solo latin y latin-ext: el sitio es castellano con galego, el corte
   vietnamita de Google Fonts no se descarga.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/Anton-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  src: url('../fonts/Anton-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-600-latin-ext.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-600-latin-ext.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-700-latin.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-700-latin-ext.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════
   CD DÁRSENA — "Una retransmisión, no una web."
   Paleta, tipos, escala y motion según ART-DIRECTION.md.
   Una sola inclinación en todo el sitio: --skew: -4deg.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --amarelo: #FFD400;
  --negro:   #111113;
  --branco:  #F6F4EE;
  --gris-tv: #232326;

  --skew: -4deg;
  /* Desplazamiento horizontal de una línea a -4° a lo ancho del viewport:
     tan(4°) x 100vw = 6.99vw. Es el alto de las cuñas de corte entre secciones. */
  --cut: 6.99vw;

  --m: 5vw;
  --gap: 24px;
  --nav-h: 72px;
  --nav-h-min: 52px;

  --display: 'Anton', 'Arial Narrow Bold', 'Arial Black', Impact, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, Segoe UI, sans-serif;

  /* power3.out — equivalente CSS del ease de GSAP usado en los revelados */
  --ease-tv: cubic-bezier(0.215, 0.61, 0.355, 1);
  /* back.out(1.4) aproximado para transiciones CSS (hover del dorsal) */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Guarda heredada del taller: los sangrados de margen (el H1 del hero en
   móvil) pueden generar scroll horizontal si solo se contiene en body.
   `clip` en vez de `hidden` porque `hidden` convertiría html en contenedor
   de scroll y rompería el thead sticky de la clasificación. */
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--branco);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* §8 pide tabular-nums en todas las cifras. Declararlo en `body` se lo
   aplicaba a los ~430 nodos de texto de la página y disparaba el coste de
   style/layout (1325ms de recálculo en Lighthouse móvil); acotado a los
   bloques que llevan cifras da el mismo resultado tipográfico. */
.ticker, .taboa, .fila, .xor, .cifra, .abono__p, .contador,
.tarxeta__linea, .lt__txt, .dorsal, .pe__l {
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }

::selection { background: var(--amarelo); color: var(--negro); }

:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }
.sec--calendario :focus-visible,
.sec--taboa :focus-visible,
.grada__amarelo :focus-visible { outline-color: var(--negro); }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amarelo); color: var(--negro);
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  padding: .7em 1.2em; letter-spacing: .06em;
}
.saltar:focus { left: 0; }

/* ── Rejilla base: 12 columnas, márgenes 5vw ─────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gap);
  padding-inline: var(--m);
}

/* ── Escala tipográfica (6 niveles del §3) ───────────────────── */
.h2 {
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 112px);
  line-height: .88;
  text-transform: uppercase;
  color: var(--amarelo);
  letter-spacing: -.005em;
}
.h2--negro { color: var(--negro); }

.cuerpo { font-family: var(--body); font-size: clamp(16px, 1.15vw, 17px); line-height: 1.5; }

/* Rótulo lower-third: barra amarilla cortada a -4°, texto negro condensado. */
.lt { display: block; }
.lt__txt {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: .5em .95em .44em;
  color: var(--negro);
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lt__txt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--amarelo);
  transform: skewX(var(--skew));
}
.lt--mini .lt__txt { font-size: clamp(12px, 1vw, 15px); letter-spacing: .1em; }

/* ── Botones ─────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(14px, 1.05vw, 16px);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .78em 1.4em .7em;
  border: 2px solid currentColor;
  background: transparent;
  cursor: pointer;
}
.btn--linea:hover, .btn--linea:focus-visible { background: var(--amarelo); color: var(--negro); border-color: var(--amarelo); }
.btn--cheo {
  background: var(--negro); color: var(--amarelo); border-color: var(--negro);
  font-size: clamp(16px, 1.3vw, 20px);
}
.btn--cheo:hover:not([disabled]) { background: var(--branco); color: var(--negro); border-color: var(--negro); }
.btn[disabled] { opacity: .55; cursor: default; }

/* ── Nav sticky: 72 → 52px al hacer scroll ───────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--negro);
  transition: height 200ms var(--ease-tv);
}
.nav.is-scrolled { height: var(--nav-h-min); }
.nav__inner {
  height: 100%;
  padding-inline: var(--m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* El "escudo" es tipográfico: CDD en un rombo CSS con el corte -4°. */
.escudo {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: .34em .62em .28em;
  color: var(--negro);
  font-family: var(--display);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1;
  text-decoration: none;
}
.escudo::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--amarelo);
  transform: skewX(var(--skew));
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav__links a { text-decoration: none; }
.nav__links a:not(.nav__cta):hover { color: var(--amarelo); }
.nav__cta {
  border: 2px solid var(--amarelo);
  color: var(--amarelo);
  padding: .42em .9em .36em;
  font-weight: 700;
}
.nav.is-scrolled .nav__cta { background: var(--amarelo); color: var(--negro); }

/* ── Chip de página de ejemplo (DEPLOY-PREP §1) ──────────────── */
.chip {
  position: fixed;
  right: clamp(12px, 1.6vw, 22px);
  bottom: clamp(12px, 1.6vw, 22px);
  z-index: 60;
  color: var(--negro);
  text-decoration: none;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.chip__txt {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: .75em 1.05em .65em;
}
.chip__txt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--amarelo);
  /* El filete negro no es decoración: el chip es fijo y al abrir la
     página cae justo sobre la marquesina, que también es amarilla.
     Sin él, amarillo sobre amarillo. Solo usa colores de la paleta. */
  border: 2px solid var(--negro);
  transform: skewX(var(--skew));
}
.chip:hover .chip__txt::before { background: var(--branco); }
/* El foco no puede ir en amarillo: el chip flota sobre fondos negros,
   amarillos y branco. Anillo negro por dentro del propio chip. */
.chip:focus-visible { outline: none; }
.chip:focus-visible .chip__txt { outline: 3px solid var(--negro); outline-offset: -7px; }

/* ── Secciones y cortes diagonales ───────────────────────────── */
.sec { position: relative; overflow-x: clip; scroll-margin-top: 64px; }

/* La cuña: un triángulo del color de la sección que se apoya SOBRE la
   sección anterior. Sin márgenes negativos: no desplaza ninguna frontera,
   solo pinta encima del padding inferior de la sección de arriba. */
.sec--calendario::before,
.sec--taboa::before,
.sec--grada::before,
.grada__amarelo::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--cut));
  height: var(--cut);
  background: var(--corte);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

/* ═══ 01 SINAL ═══════════════════════════════════════════════ */
.sec--sinal {
  min-height: 100svh;
  background: var(--negro);
  display: flex;
  flex-direction: column;
}
.sinal__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto auto;
  gap: 0 var(--gap);
  padding: calc(var(--nav-h) + clamp(20px, 4vh, 44px)) var(--m) clamp(24px, 4vh, 44px);
}
.sinal__rotulo { grid-column: 1 / 8; grid-row: 1; align-self: start; }
.sinal__h1 {
  grid-column: 1 / 13;
  grid-row: 2;
  align-self: center;
  z-index: 1;
  font-family: var(--display);
  font-size: clamp(88px, 19.5vw, 280px);
  line-height: .8;
  /* Rangos corregidos por dirección tras el cambio de tipografía: Anton
     mide 3,31 x fs sin tracking, donde Tanker medía 5,28 x fs. La ley del
     ancho es fs x (3,31 + 7 x tracking) — 7 huecos entre 8 glifos.
     La tinta va fs x (3,307 + 6 x tracking) — 7 letras, 6 huecos; el rect
     del Range engaña porque incluye el espaciado tras el último glifo.
     19.5vw hace que el tope de 280px se aplique ya a 1440 (17vw solo lo
     alcanzaba desde 1647px). A 280px con .21em la tinta mide 1280px:
     llena las 12 columnas (1296) y asoma 94px tras el kit, que acaba
     en 1258. Medido a píxel, no con el rect. */
  letter-spacing: .21em;
  color: var(--amarelo);
  text-transform: uppercase;
}
.sinal__kit {
  grid-column: 7 / 12;
  grid-row: 1 / 5;
  z-index: 2;
  margin: 0;
  align-self: stretch;
  min-height: 0;
}
.sinal__claim {
  grid-column: 1 / 8;
  grid-row: 3;
  z-index: 3;
  align-self: end;
  margin-top: clamp(18px, 3vh, 34px);
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(19px, 1.6vw, 22px);
  letter-spacing: .02em;
  line-height: 1.25;
  color: var(--branco);
  max-width: 22ch;
}
.sinal__partido {
  grid-column: 1 / 9;
  grid-row: 4;
  z-index: 3;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: clamp(20px, 3.5vh, 40px);
}

/* Ticker: marquesina infinita de 60s, transform puro. */
.ticker {
  position: relative;
  z-index: 4;
  background: var(--amarelo);
  color: var(--negro);
  overflow: hidden;
  padding-block: .62em;
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 17px);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
}
.ticker__track { display: flex; width: max-content; animation: desprazar 60s linear infinite; }
@keyframes desprazar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ═══ 02 PLANTILLA ═══════════════════════════════════════════ */
.sec--plantilla {
  background: var(--negro);
  /* + var(--cut): reserva para la cuña amarilla de 03, que se apoya aquí. */
  padding-block: clamp(72px, 9vh, 120px) calc(clamp(88px, 11vh, 150px) + var(--cut));
}
.plantilla__cab { align-items: end; row-gap: 20px; }
.plantilla__cab .h2 { grid-column: 1 / 9; }
.plantilla__intro { grid-column: 9 / 13; max-width: 34ch; color: rgba(246, 244, 238, .82); }

.destacados { margin-top: clamp(48px, 7vh, 96px); row-gap: clamp(56px, 8vh, 110px); align-items: start; }
.tarxeta { position: relative; }
/* Cada tarjeta se coloca del lado que le pide su zona muerta: los dorsales
   sangran SIEMPRE hacia el margen exterior. Colocadas al revés (dorsal
   derecho en la columna izquierda) los números 4 y 1 se solapaban y se
   leían como "41". */
/* Fila explícita: con colocación automática, un ítem que empieza en la
   col 1 después de otro que ocupa la 7–13 nunca vuelve atrás y cae a la
   fila siguiente — las 4 tarjetas quedaban en 4 filas, no en 2. */
.tarxeta--a { grid-column: 7 / 13; grid-row: 1; }
.tarxeta--b { grid-column: 1 / 7;  grid-row: 1; margin-top: clamp(60px, 9vh, 140px); }
.tarxeta--c { grid-column: 7 / 13; grid-row: 2; }
.tarxeta--d { grid-column: 1 / 7;  grid-row: 2; margin-top: clamp(60px, 9vh, 140px); }

.tarxeta__media { position: relative; }
.tarxeta__foto,
.sinal__kit {
  position: relative;
  isolation: isolate;              /* confina el mix-blend-mode del duotono */
  overflow: hidden;
  background: var(--negro);
  margin: 0;
}
.tarxeta__foto { aspect-ratio: 4 / 5; }
.duo__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25); }
.duo__capa {
  position: absolute; inset: 0;
  background: var(--amarelo);
  mix-blend-mode: multiply;
  opacity: .55;
  pointer-events: none;
  transition: opacity 250ms var(--ease-tv);
}
.tarxeta:hover .duo__capa,
.tarxeta:focus-within .duo__capa { opacity: 1; }

/* Dorsal gráfico: sangra fuera de la tarjeta por el lado de la zona muerta. */
.dorsal {
  position: absolute;
  bottom: -.08em;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(160px, 30vw, 380px);
  line-height: .8;
  color: var(--amarelo);
  pointer-events: none;
  transition: transform 250ms var(--ease-back);
}
.tarxeta--dcha .dorsal { right: -.10em; }
.tarxeta--esq  .dorsal { left: -.10em; }
.tarxeta--dcha:hover .dorsal, .tarxeta--dcha:focus-within .dorsal { transform: translateX(12px); }
.tarxeta--esq:hover  .dorsal, .tarxeta--esq:focus-within  .dorsal { transform: translateX(-12px); }

.tarxeta__nome { margin-top: clamp(40px, 5vh, 56px); position: relative; z-index: 3; }
.tarxeta__linea { margin-top: 14px; max-width: 32ch; color: rgba(246, 244, 238, .82); position: relative; z-index: 3; }
.tarxeta__linea .cifra { color: var(--amarelo); font-weight: 600; }

/* Lista completa en filas lower-third compactas, agrupadas por línea. */
.listaxe { margin-top: clamp(72px, 10vh, 140px); align-items: start; row-gap: clamp(36px, 5vh, 64px); }
.listaxe__bloque:nth-child(1) { grid-column: 1 / 5;  grid-row: 1; }
.listaxe__bloque:nth-child(2) { grid-column: 5 / 9;  grid-row: 1 / 3; }
.listaxe__bloque:nth-child(3) { grid-column: 9 / 13; grid-row: 1 / 3; }
.listaxe__bloque:nth-child(4) { grid-column: 1 / 5;  grid-row: 2; }
/* El 12 cierra la columna de nombres, justo bajo los delanteros y encima
   del cuerpo técnico: es una fila más de la lista, no un bloque aparte. */
.listaxe__bloque:nth-child(5) { grid-column: 1 / 5;  grid-row: 3; }
.listaxe__bloque:nth-child(6) { grid-column: 1 / 5;  grid-row: 4; }

.listaxe__titulo {
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amarelo);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--amarelo);
  margin-bottom: 4px;
}
.fila {
  display: grid;
  grid-template-columns: 3.4ch minmax(0, 1fr) auto 3.2ch;
  gap: 0 14px;
  align-items: baseline;
  padding: .58em .55em;
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(14px, 1.05vw, 15px);
  letter-spacing: .025em;
  border-bottom: 1px solid rgba(246, 244, 238, .14);
}
.fila:hover { background: var(--amarelo); color: var(--negro); border-bottom-color: transparent; }
.fila__n { color: var(--amarelo); font-weight: 700; text-align: right; }
.fila:hover .fila__n { color: var(--negro); }
.fila__pos { font-size: .84em; letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 244, 238, .62); }
.fila:hover .fila__pos { color: rgba(17, 17, 19, .72); }
.fila__idade { min-width: 2.4ch; text-align: right; }
.fila--tec { grid-template-columns: minmax(0, 1fr) auto 3.2ch; }

/* O dorsal 12: la grada cierra la lista de nombres (C2 del REVIEW-01).
   Es la única fila que nace ya invertida — no es un jugador, es el club. */
.fila--doce, .fila--doce:hover {
  background: var(--amarelo);
  color: var(--negro);
  border-bottom: 0;
  padding: .85em .8em;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.fila--doce .fila__n { color: var(--negro); }
.fila--doce .fila__pos { color: rgba(17, 17, 19, .72); }

/* ═══ 03 CALENDARIO ══════════════════════════════════════════ */
.sec--calendario {
  --corte: var(--amarelo);
  background: var(--amarelo);
  color: var(--negro);
  padding-block: clamp(72px, 9vh, 120px) calc(120px + var(--cut));
}
.sec--calendario .h2 { grid-column: 1 / 9; }
.banda { margin: clamp(48px, 6vh, 84px) 0 clamp(48px, 6vh, 84px); position: relative; overflow: hidden; background: var(--negro); }
.banda img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1) contrast(1.2); }
.banda--grada { margin-top: 0; }

.xornadas { padding-inline: var(--m); }
.xor {
  display: grid;
  /* Pistas en px, no en `ch`: el `ch` se mide con la fuente del CONTENEDOR
     (17px), no con la del número de jornada (46px), y la pista quedaba a
     un tercio de lo necesario — "★ J26" se comía la fecha. */
  grid-template-columns: clamp(58px, 9.2vw, 132px) clamp(92px, 13.5vw, 194px) minmax(0, 1fr) auto;
  gap: 0 clamp(12px, 2vw, 32px);
  align-items: baseline;
  padding: clamp(14px, 1.7vh, 24px) clamp(10px, 1.4vw, 20px);
  border-top: 2px solid var(--negro);
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
}
.xor:last-child { border-bottom: 2px solid var(--negro); }
.xor:hover { background: var(--negro); color: var(--amarelo); }
.xor__j { font-size: clamp(26px, 3.2vw, 50px); line-height: 1; white-space: nowrap; }
.xor__data { font-size: clamp(13px, 1.15vw, 17px); letter-spacing: .05em; white-space: nowrap; }
.xor__rival { font-size: clamp(19px, 2.5vw, 38px); line-height: 1.04; }
.xor__sede { font-size: clamp(11px, .95vw, 14px); letter-spacing: .14em; }
.xor--estrela { background: var(--negro); color: var(--amarelo); border-top-color: var(--negro); }
.xor--estrela:hover { background: var(--negro); color: var(--amarelo); }
.estrela { color: var(--amarelo); }
.xor__grito {
  grid-column: 1 / -1;
  margin-top: .7em;
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(15px, 1.35vw, 19px);
  letter-spacing: .03em;
  line-height: 1.3;
  text-transform: none;
  max-width: 62ch;
}

/* ═══ 04 CLASIFICACIÓN ═══════════════════════════════════════ */
.sec--taboa {
  --corte: var(--branco);
  background: var(--branco);
  color: var(--negro);
  padding-block: clamp(72px, 9vh, 120px) calc(120px + var(--cut));
}
.sec--taboa .h2 { grid-column: 1 / 9; }
.taboa-wrap { margin: clamp(36px, 5vh, 64px) 0 clamp(24px, 3vh, 40px); padding-inline: var(--m); }
.taboa {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(13px, 1.05vw, 15px);
}
.taboa__caption {
  text-align: left;
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(12px, .95vw, 14px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--negro);
  padding-bottom: 12px;
}
.taboa th, .taboa td { padding: .68em .5em; text-align: right; border-bottom: 1px solid rgba(17, 17, 19, .18); }
.taboa .c-eq { text-align: left; font-weight: 700; }
.taboa .c-pos { text-align: left; width: 4ch; }
.taboa .c-pts { font-weight: 700; }
.taboa thead th {
  position: sticky;
  top: var(--nav-h-min);
  z-index: 2;
  background: var(--branco);
  font-weight: 700;
  font-size: clamp(11px, .9vw, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--negro);
}
.taboa thead abbr { text-decoration: none; }
.taboa tbody tr:nth-child(even) { background: rgba(35, 35, 38, .055); }
.taboa tbody tr:hover { background: var(--amarelo); color: var(--negro); }
/* Con `.fila-nos` a secas, `tbody tr:nth-child(even)` ganaba por
   especificidad y la fila del Dársena salía gris en vez de amarilla. */
.taboa tbody tr.fila-nos,
.taboa tbody tr.fila-nos:hover { background: var(--amarelo); font-weight: 700; }
.taboa__nota {
  grid-column: 1 / 9;
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: .02em;
  max-width: 46ch;
}

/* ═══ 05 A GRADA ═════════════════════════════════════════════ */
.sec--grada { --corte: var(--negro); background: var(--negro); }
.grada__cab { margin-top: clamp(56px, 8vh, 96px); row-gap: 22px; align-items: end; }
.grada__cab .h2 { grid-column: 1 / 9; }
.grada__intro { grid-column: 9 / 13; max-width: 32ch; color: rgba(246, 244, 238, .82); }
.contador { grid-column: 1 / 13; margin-top: clamp(24px, 4vh, 48px); display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); flex-wrap: wrap; }
.contador .cifra {
  font-family: var(--display);
  font-size: clamp(96px, 18vw, 260px);
  line-height: .8;
  color: var(--amarelo);
  font-weight: 400;
}
.contador__pe {
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, .82);
  padding-bottom: .8em;
}

.grada__amarelo {
  --corte: var(--amarelo);
  position: relative;
  background: var(--amarelo);
  color: var(--negro);
  margin-top: calc(clamp(140px, 18vh, 220px) + var(--cut));
  padding-block: clamp(72px, 10vh, 120px) 0;
}
.abonos { row-gap: 2px; column-gap: 2px; }
.abono {
  grid-column: span 3;
  background: var(--negro);
  color: var(--branco);
  padding: clamp(26px, 3vw, 42px) clamp(20px, 2vw, 30px) clamp(30px, 3.4vw, 46px);
}
.abono__t {
  font-family: var(--cond); font-weight: 700;
  font-size: clamp(15px, 1.2vw, 18px); letter-spacing: .16em; text-transform: uppercase;
  color: var(--amarelo);
}
.abono__p { font-family: var(--display); font-size: clamp(46px, 5vw, 78px); line-height: .9; margin-top: .18em; }
.abono__l { margin-top: 1em; font-size: 15px; line-height: 1.45; color: rgba(246, 244, 238, .84); max-width: 26ch; }

.grada__pe { margin-top: clamp(56px, 8vh, 100px); row-gap: clamp(32px, 5vh, 56px); align-items: start; }
.penas {
  grid-column: 1 / 6;
  font-family: var(--cond); font-weight: 700;
  font-size: clamp(17px, 1.7vw, 26px); letter-spacing: .03em; text-transform: uppercase;
  line-height: 1.25;
}
.alta { grid-column: 7 / 13; display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo label {
  font-family: var(--cond); font-weight: 700;
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
}
.campo input, .campo select {
  font-family: var(--cond); font-weight: 600; font-size: 17px;
  padding: .7em .8em;
  border: 2px solid var(--negro);
  background: var(--branco);
  color: var(--negro);
  border-radius: 0;
  width: 100%;
}
.alta .btn--cheo { justify-self: start; margin-top: 6px; }
.alta__estado {
  font-family: var(--cond); font-weight: 700;
  font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .1em; text-transform: uppercase;
  min-height: 1.4em;
}

.pe { margin-top: clamp(72px, 10vh, 130px); border-top: 2px solid var(--negro); padding-block: clamp(28px, 4vh, 46px); }
.pe__grid { row-gap: 8px; align-items: baseline; }
.pe__l {
  grid-column: span 4;
  font-family: var(--cond); font-weight: 600;
  font-size: clamp(13px, 1.05vw, 15px); letter-spacing: .09em; text-transform: uppercase;
}
.pe__l--fin { text-align: right; }
.pe__l a { text-decoration: none; border-bottom: 2px solid rgba(17, 17, 19, .3); }
.pe__l a:hover { border-bottom-color: var(--negro); }

/* ═══ Revelados: barrido diagonal a -4° ══════════════════════ */
/* La .js la pone un script inline en <head>: sin JS el contenido nunca
   queda oculto (y sin transición en seco: clip-path va en la transición). */
.js .wipe {
  clip-path: polygon(0% 0%, 0% 0%, calc(-1 * var(--wipe)) 100%, calc(-1 * var(--wipe)) 100%);
  transition: clip-path 450ms var(--ease-tv);
}
.js .wipe.is-revealed {
  clip-path: polygon(0% 0%, calc(100% + var(--wipe)) 0%, 100% 100%, calc(-1 * var(--wipe)) 100%);
}
/* --wipe = alto x tan(4°), expresado en % del ancho, para que el borde
   del barrido caiga exactamente a -4° según el formato de la imagen. */
.tarxeta__foto, .sinal__kit { --wipe: 9%; }   /* 4:5  → 1.25 x 6.99% ≈ 8.7% */
.banda { --wipe: 4%; }                        /* 16:9 → 0.5625 x 6.99% ≈ 3.9% */

.js [data-lt] { opacity: 0; }
.js [data-lt].is-in { opacity: 1; }

/* El hero entra por CSS, no por GSAP: esperando al CDN, la foto de portada
   no se pintaba hasta ~3s (render delay del LCP medido en Lighthouse).
   Como #sinal mide 100svh, "primer viewport" es exactamente #sinal — se
   resuelve por selector, sin medir nada en runtime. De ahí abajo sigue
   mandando ScrollTrigger. */
@keyframes lt-entra {
  from { opacity: 0; transform: translateX(-110px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wipe-entra {
  from { clip-path: polygon(0% 0%, 0% 0%, calc(-1 * var(--wipe)) 100%, calc(-1 * var(--wipe)) 100%); }
  to   { clip-path: polygon(0% 0%, calc(100% + var(--wipe)) 0%, 100% 100%, calc(-1 * var(--wipe)) 100%); }
}
/* var(--ease-back) es el equivalente CSS de back.out(1.4): sobrepasa ~7%
   del recorrido, que sobre 110px son los ~8px de overshoot del §5. */
.js #sinal [data-lt] { opacity: 1; animation: lt-entra 500ms var(--ease-back) both; }
.js #sinal .wipe { animation: wipe-entra 450ms var(--ease-tv) both; }

/* ═══ Responsive ═════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --gap: 16px; --m: 6vw; }
  body { font-size: 16px; }

  /* La nav sigue navegando en móvil: se aprieta, no se amputa. */
  .nav__inner { gap: 8px; }
  .escudo { font-size: 17px; padding: .3em .5em .24em; }
  .nav__links { gap: 8px; font-size: 12px; letter-spacing: .04em; }
  .nav__cta { padding: .4em .6em .34em; }

  .sinal__grid { grid-template-rows: auto auto auto auto auto; align-content: space-between; }
  .sinal__rotulo { grid-column: 1 / 13; }
  /* El sangrado a los bordes se puso porque Tanker a 72px medía 380px y
     no cabía entre márgenes. Anton mide 228px: ya no hace falta y deja la
     palabra ocupando solo el 58% del ancho. Se mantiene a la espera de la
     decisión sobre el H1 (ver devolución en NOTAS) para no tocar dos
     variables a la vez. */
  .sinal__h1 {
    grid-row: 2;
    margin-top: clamp(18px, 3vh, 30px);
    margin-inline: calc(-1 * var(--m));
    /* Con el mínimo nuevo (88px) y .14em la palabra mide 377px y llena los
       390px del sangrado; el -.02em anterior era para que Tanker cupiera. */
    letter-spacing: .15em;
  }
  /* En 390px no caben claim y kit en la misma fila sin que el texto claro
     caiga sobre la zona clara de la foto: el kit toma su propia fila. */
  .sinal__kit { grid-column: 3 / 13; grid-row: 3; align-self: start; margin-top: -3vh; }
  .sinal__claim { grid-column: 1 / 13; grid-row: 4; align-self: end; margin-top: clamp(20px, 3vh, 30px); max-width: 24ch; }
  .sinal__partido { grid-column: 1 / 13; grid-row: 5; margin-top: clamp(20px, 3vh, 34px); }

  .plantilla__cab .h2, .plantilla__intro,
  .grada__cab .h2, .grada__intro { grid-column: 1 / 13; }

  .tarxeta--a, .tarxeta--b, .tarxeta--c, .tarxeta--d { grid-column: 1 / 13; grid-row: auto; margin-top: 0; }
  .dorsal { font-size: clamp(140px, 34vw, 220px); }

  .listaxe__bloque { grid-column: 1 / 13 !important; grid-row: auto !important; }

  .xor { grid-template-columns: 4.6ch 1fr; row-gap: 4px; }
  .xor__data { grid-column: 2; }
  .xor__rival { grid-column: 2; }
  .xor__sede { grid-column: 2; }

  /* En móvil el chip se compacta a "Beispielseite · spAId" (§1). */
  .chip { font-size: 11px; letter-spacing: .08em; }
  .chip__larga { display: none; }

  .taboa-wrap { overflow-x: auto; }
  .taboa { min-width: 460px; }
  .taboa thead th { position: static; }
  .taboa__nota { grid-column: 1 / 13; }

  .abono { grid-column: span 6; }
  .penas, .alta { grid-column: 1 / 13; }
  .pe__l { grid-column: 1 / 13; }
  .pe__l--fin { text-align: left; }
}

@media (max-width: 420px) {
  .abono { grid-column: 1 / 13; }
}

/* ═══ prefers-reduced-motion ═════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; transform: none; }
  .js .wipe, .js .wipe.is-revealed, .js .wipe.entra-ya { clip-path: none; transition: none; animation: none; }
  .js [data-lt], .js [data-lt].entra-ya { opacity: 1; animation: none; transform: none; }
  .dorsal, .duo__capa, .nav { transition: none; }
  html { scroll-behavior: auto; }
}