/* ==========================================================================
   El Camino DT — Nueva carrera
   --------------------------------------------------------------------------
   Cero tokens nuevos. Son TRES PASOS en un solo documento y el atributo
   `data-paso` del `<main>` dice cuál está puesto: el mundo, la pirámide del
   país elegido, y la mesa de siempre —pirámide a la izquierda, repisa de
   cartas, expediente del club que estás mirando y, abajo a todo el ancho, lo
   que elegiste y el botón de empezar—.

   Es la única pantalla del juego que no es una tabla, y por eso es la única
   que pinta con el color de los clubes. Ese color es CONTENIDO: sale de
   `mundo.js`, no de acá.
   ========================================================================== */

/* La pantalla ocupa el alto de la ventana y no scrollea: lo que scrollea, si
   hace falta, es la grilla de cartas dentro de su columna. */
body {
  display: flex;
  flex-direction: column;
  height: var(--alto-ventana);
  overflow: hidden;
}

/* El lockup del juego —la pelota y el nombre— vive en `app.css`, y desde que
   la portada existe también vive allá su tamaño grande: son dos las pantallas
   que lo dibujan así, y un tamaño escrito acá sería la misma regla en dos
   hojas. Lo que queda en esta hoja es lo único que es de esta pantalla: cómo
   se compone su barra. */
/* La barra deja de ser una tira con el nombre a la izquierda y pasa a ser la
   portada: el lockup centrado y la temporada apartada al borde, sin empujarlo.
   Absoluta y no `flex` con espaciador, porque el centro tiene que ser el de la
   PANTALLA y no el del hueco que deje el texto de la derecha. */
.chrome--portada .chrome__row--primary {
  position: relative;
  justify-content: center;
  /* El alto del chrome es un TOKEN y vale para las veintiuna pantallas donde
     esta barra es navegación. Acá la barra es la portada y lo que manda es el
     lockup: con `--chrome-h` puesto, el renglón de arriba quedaba cortado por
     el borde. Es la única pantalla que se lo puede permitir porque es la única
     sin navegación adentro. */
  height: auto;
  padding: var(--sp-6) var(--sp-8);
}

.chrome__temporada {
  position: absolute;
  right: var(--sp-8);
  top: 50%;
  transform: translateY(-50%);
}

/* La vuelta a la portada, apartada al otro borde por el mismo motivo que la
   temporada: el centro de esta barra es el del LOCKUP, y tiene que seguir
   siendo el de la pantalla y no el del hueco que dejen los dos rótulos de los
   costados. Absoluta, entonces, y no un flex con espaciadores.

   LO QUE ESTA COMPOSICIÓN CUESTA, medido, para que el próximo no lo descubra
   creyendo que es un defecto nuevo: dos absolutos y un centrado no se enteran
   de que se están pisando. La temporada toca el lockup abajo de 570 px de
   ventana y el botón lo toca abajo de 490 — o sea que el borde derecho ya
   estaba así antes de que existiera el izquierdo, y el nuevo llega ochenta
   píxeles más tarde. No se arregla acá porque esta pantalla son tres columnas
   con 826 px fijos y deja de ser usable mucho antes: a 500 px de ancho lo que
   falta no es este renglón. Si algún día la pirámide y el expediente se
   apilan de verdad, la barra tiene que pasar a ser un flex de tres celdas y el
   lockup dejar de estar centrado en la PANTALLA. */
.chrome__volver {
  position: absolute;
  left: var(--sp-8);
  top: 50%;
  transform: translateY(-50%);
}

/* LA MESA. Tres columnas y un pie, y el reparto dice de qué se trata la
   pantalla: la pirámide a la izquierda porque se contesta una vez, la repisa
   en el medio y con todo el ancho que sobre porque elegir club es recorrer
   escudos, y el expediente a la derecha en una columna FIJA porque lo que
   dibuja también lo es.

   Los 336 de la pirámide son los de la columna de naciones de FM26 —algo menos
   de un cuarto de la pantalla— y se midieron con el nombre más largo: con 300,
   «Primera B Metropolitana» se cortaba con puntos suspensivos.

   Los 490 del expediente salen de su bloque más ancho: el max-content de la
   tabla del once, más el padding de la placa, sus bordes y la barra de scroll,
   más el aire para que la tabla no toque los cantos. Con eso las cifras caen
   en 2×2 y el ancho que sobra es de la repisa: en 2000, cinco columnas de
   carta.

   ESTE NÚMERO TIENE CUATRO DUEÑOS y hay que re-medirlo si se mueve cualquiera:
   la cara tipográfica, el acolchado de celda de `.data-table`, la cantidad de
   columnas de la tabla y —el que mordió— **el TEXTO de las cabeceras**, que
   ensancha sin agregar una sola columna: pasar «Pos» y «Ed» a «Posición» y
   «Edad» costó sesenta píxeles.

   Fue 440 y entraba por 0,4px. Con TikTok Sans, acolchado de 4 y las cabeceras
   largas, el once más ancho del juego —el de Belgrano— pide **438,4** de
   max-content, y en una columna de 440 le quedaban 406: la tabla no desbordaba
   porque `table-layout: auto` la comprime en vez de romperla, así que el
   síntoma no era un error sino treinta y dos píxeles de aire robados a los
   nombres. Los 490 de ahora le dan 456 al peor once, o sea 18 de margen de
   verdad, y no le cuestan una sola columna de carta a la repisa: en 2000 son
   cinco igual.

   Y OJO CON CÓMO SE MIDE, que acá se perdió media hora: `getBoundingClientRect()`
   de la tabla dibujada devuelve el ancho al que la comprimieron y no el que
   necesita, y un clon colgado del `<body>` hereda otra tipografía y miente para
   abajo. La medida buena es clonar la tabla con `width: max-content` y colgar
   el clon DENTRO del expediente:

     const t = document.querySelector('.exp__once'), c = t.cloneNode(true);
     c.style.cssText = 'width:max-content;position:absolute;left:-9999px';
     t.parentElement.appendChild(c); c.getBoundingClientRect().width;

   Bajar el acolchado NO es la salida cuando esto vuelva a apretar: ya se cobró
   una vez y compra cuatro píxeles por columna. Lo que se mueve es este número.

   EL PIE VA A LO ANCHO DE LAS TRES. Es la barra donde se firma y no la nota al
   pie de una columna: recortado bajo la repisa, el escudo del club elegido
   quedaba en el medio de la pantalla y el botón de empezar en el medio también,
   con 776px de placa vacía a los costados. */
.mesa {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 490px;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "repisa exp"
    "pie    pie";
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

/* `min-width: 0` no es adorno: sin él la repisa se ensancha hasta el
   min-content de su barra —rótulo, cuenta y buscador en un renglón— y se lleva
   puesta la columna del expediente. */
.repisa {
  grid-area: repisa;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 0;
  min-width: 0;
}

.exp    { grid-area: exp; min-height: 0; overflow: auto; scrollbar-width: thin;
          scrollbar-color: var(--ink-700) transparent; }
.mesa__pie { grid-area: pie; }

/* --------------------------------------------------------------------------
   0. LOS TRES PASOS
   --------------------------------------------------------------------------
   La misma mesa contestando de a una pregunta: dónde, en qué categoría, con
   quién. Las cinco zonas viven siempre en el documento —no se crean ni se
   destruyen— y lo único que cambia es cuál se muestra y con qué reparto. La
   marca la pone `nueva.js` en un atributo del `<main>`.

   POR QUÉ UNA SOLA HOJA Y UN SOLO DOCUMENTO Y NO TRES PANTALLAS: los tres
   pasos comparten el motor entero —los veinticinco archivos de planteles son
   2,5 MB— y hacerlos navegar sería volver a cargarlo dos veces para contestar
   dos preguntas de un clic. Además la fila de una categoría es la MISMA en el
   paso 2 y en la columna del paso 3, y en dos documentos serían dos.
   -------------------------------------------------------------------------- */

/* Lo que se ve en cada paso. Escrito por lo que se ESCONDE y no por lo que se
   muestra: así una zona nueva en la mesa no aparece por sorpresa en los dos
   primeros pasos el día que alguien la agregue. */
/* EL PASO 2 VIVE ADENTRO DEL PASO 1 desde el 22/8/2026: el mundo se muestra en
   los dos, y lo que cambia es la columna de la derecha. Por eso `division`
   esconde todo MENOS `.paso--mundo`, igual que `pais`. La sección
   `.paso--categorias` quedó vacía y sin uso — se deja en el HTML porque el
   `aria-labelledby` de la mesa la nombra, y sacarla es trabajo de otro día. */
.mesa[data-paso='pais'] > :not(.paso--mundo),
.mesa[data-paso='division'] > :not(.paso--mundo),
.mesa[data-paso='club'] > .paso { display: none; }

/* Los dos primeros pasos son UNA zona y ocupan la mesa entera. La regla pisa
   al reparto de tres columnas Y a los dos quiebres de abajo por especificidad
   —clase más atributo—, que es lo que hace que el mapa del mundo se vea igual
   en una ventana de 2000 y en una de 1280: no tiene columnas fijas que
   defender. */
.mesa[data-paso='pais'],
.mesa[data-paso='division'] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "paso";
}

/* LA TARJETA DEL PASO NO SE ESTIRA A LO ANCHO DE LA PANTALLA. Con 2000 px de
   ventana, una fila de categoría a todo el ancho es un logo de 44 px, un
   nombre y mil quinientos píxeles de vacío hasta la flecha; y los veintiún
   países entran en una sola fila de siete, que se lee como una tira y no como
   un mapa. Los 1180 son el ancho con el que el mundo cae en cuatro columnas de
   país y la fila de categoría mantiene el riesgo cerca de su nombre.

   `align-self: start` y no estirada: el paso de Bélgica tiene UNA fila, y una
   tarjeta de mil píxeles de alto con un renglón adentro es un cartel vacío. Lo
   que crece cuando hay mucho es el cuerpo, hasta el alto de la mesa. */
.paso {
  grid-area: paso;
  align-self: start;
  justify-self: center;
  width: min(100%, 1180px);
  max-height: 100%;
  min-height: 0;
}

/* EL MAPA DEL MUNDO SÍ USA EL ANCHO, y es la mitad que la regla de arriba no
   describe. Los 1180 se eligieron por la FILA DE CATEGORÍA del paso 2 —un logo
   de 44 px, un nombre y mil quinientos píxeles de vacío hasta la flecha— y esa
   razón sigue en pie: el paso 2 se queda en 1180.

   El paso 1 no es una lista de filas anchas: es una grilla de cartas que se
   reparten el ancho que haya. Con 32 países y el tope de 1180 caían cuatro
   columnas y nueve renglones, así que Europa había que buscarla con el scroll
   mientras a los costados quedaban cuatrocientos píxeles de placa vacía a cada
   lado en una ventana de 2000. Alberto lo pidió mirando esa pantalla el
   22/8/2026.

   1720 y no `100%`: pasado ese ancho las cartas dejan de crecer y empiezan a
   sumarse columnas, y una fila de ocho países se lee como una tira y no como un
   mapa — que es exactamente lo que este paso dejó de ser cuando se rediseñó. */
.paso--mundo { width: min(100%, 1720px); }

.paso__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex: none;
}

/* La bandera del país en la cabecera del paso 2, del mismo tamaño que la de
   las cartas del paso anterior: es la misma bandera que acabás de pulsar. */
.paso__bandera { width: 30px; height: 21px; }

/* El único que rueda. Es la regla de siempre de esta hoja: en la pantalla de
   alto fijo se desplaza la LISTA, nunca el panel. */
.paso__cuerpo {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
  scrollbar-gutter: stable;
}

/* --- Paso 1: los países --------------------------------------------------- */

/* --------------------------------------------------------------------------
   0.5 EL MUNDO: EL MAPA Y LA LISTA
   --------------------------------------------------------------------------
   Dos columnas que se hablan. El mapa manda visualmente y ocupa lo que sobra;
   la lista es angosta y fija, porque su ancho lo decide el nombre más largo que
   tiene que entrar —«Emiratos Árabes Unidos»— y no la ventana.

   EL MAPA NO ES CUADRADO NI CASI: 360×180 es 2:1 exacto, así que se le da el
   ancho y el alto sale solo. Fijarle un alto lo deformaría, y un planisferio
   deformado se ve mal antes de que uno sepa por qué.
   -------------------------------------------------------------------------- */
/* LA COLUMNA MIDE LO MISMO EN LOS DOS PASOS, Y ESO NO ES NEGOCIABLE.

   Estuvo en 320 para el mundo y 400 dentro de un país, con el argumento de que
   un renglón de categoría lleva más datos que uno de país. El argumento era
   cierto y la consecuencia, mala: al elegir, el mapa perdía OCHENTA PÍXELES de
   ancho, y como el cambio de paso pasa a los 200 ms, ese reencuadre caía justo
   en mitad del movimiento de cámara. Se veía como si el mapa se achicara de
   golpe mientras se acercaba — un salto de maqueta disfrazado de tirón.

   La regla que queda escrita, porque vale para cualquier pantalla que anime algo
   grande: **lo que se mueve no puede cambiar de tamaño mientras se mueve.** Un
   `transform` es barato porque no toca la maqueta; en cuanto la caja de al lado
   cambia de ancho, el navegador rehace la maqueta y la animación deja de ser una
   composición para pasar a ser un recálculo.

   Los 360 son el acuerdo: la categoría entra en dos renglones —que era lo que
   los 400 vinieron a comprar— y el mapa mide igual todo el tiempo. */
.mundo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-7);
  align-items: start;
}

.mundo__mapa {
  padding: var(--sp-5);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--ink-1000);
  /* El recorte del acercamiento vive acá y no en `.mapa`: un elemento no se
     recorta a sí mismo cuando es el que se transforma. */
  overflow: hidden;
}

/* La tierra y los puntos van APILADOS: la silueta es una imagen enmascarada y
   los puntos son SVG, así que uno no puede ser hijo del otro. El `aspect-ratio`
   es el del recorte —1484×757— y lo comparten los dos, que es lo que garantiza
   que un punto caiga sobre su país y no dos píxeles al lado. */
.mapa {
  aspect-ratio: 1484 / 757;
  /* LA CURVA Y LA DURACIÓN DE LA CÁMARA SON PROPIAS Y NO LAS DEL SISTEMA, y es
     la única vez que esta pantalla se sale de los tokens de movimiento.

     `--dur-escena` son 420 ms y sirve para lo que hace el juego habitualmente:
     una tarjeta que entra, un panel que cambia. Un movimiento de CÁMARA es otra
     cosa — tiene que sentir masa, y la masa se transmite con tiempo largo y una
     salida muy hundida. 680 ms con una exponencial profunda: sale rápido, cubre
     casi todo el recorrido en el primer tercio y después frena, que es lo que
     hace que parezca que algo pesado se detuvo solo.

     Eran 760 mientras la animación se abortaba a los 190 y nadie la veía entera;
     desde que corre completa, 680 es lo que dura sin que el gesto se haga
     esperar. El número se eligió con la animación funcionando, que es la única
     forma de elegirlo.

     Poner esto en `tokens.css` habría sido peor: no es un token del sistema, es
     el tiempo de UN gesto que existe en una sola pantalla. */
  transition: transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* `will-change` SÓLO MIENTRAS DURA EL MOVIMIENTO, y ésta es la otra mitad de por
   qué el acercamiento se veía burdo. Promover la capa hace que el navegador la
   rasterice UNA vez, al tamaño que tiene en ese momento, y después la escale como
   un bitmap: la tierra llegaba al final del acercamiento ampliada tres veces
   desde una imagen rasterizada a uno. Dejándolo puesto sólo durante la
   transición, el navegador vuelve a rasterizar al terminar y el estado final
   queda nítido. Lo pone y lo saca `acercarA()`. */
.mapa--moviendo { will-change: transform; }

/* Cuando el sistema pide quietud, no hay acercamiento: el paso cambia igual de
   rápido y el mapa no se mueve. */
@media (prefers-reduced-motion: reduce) {
  .mapa { transition: none; }
}

/* CONTRAESCALA AL ACERCARSE, y sin esto el acercamiento se ve amateur. Un
   `transform` sobre el padre agranda TODO por igual: a 3× los discos pasan de 9
   a 27 de radio y el rótulo del continente de 15 px a 45. La tierra sí tiene que
   crecer —es el mapa— pero los puntos y la tipografía son mobiliario, y el
   mobiliario de una cámara que se acerca no crece: se queda del tamaño que es.

   Los discos bajan a un tercio para quedar donde estaban, y el rótulo se va del
   todo: acercándose a Japón, la palabra «Asia» ocupando un cuarto de la caja no
   informa nada que el propio dibujo no diga. */
/* `transform-box: fill-box` + `transform-origin: center` es lo que hace que el
   grupo se encoja SOBRE SÍ MISMO en vez de moverse hacia el origen del lienzo.
   Sin las dos líneas, contraescalar mandaba los cincuenta y seis puntos hacia la
   esquina superior izquierda del SVG. */
.mapa__pais { transform-box: fill-box; transform-origin: center; }
.mapa--cerca .mapa__pais { transform: scale(0.2778); }   /* 1 / 3,6 */
.mapa--cerca .mapa__continente { opacity: 0; }
.mapa--cerca .mapa__malla { opacity: 0.18; }

.mapa__continente, .mapa__malla { transition: opacity var(--dur-escena) var(--ease-entrada); }
.mapa__svg { display: block; width: 100%; height: 100%; }

/* La tierra vuelve a salir del TOKEN, que es lo que se había perdido cuando el
   color estaba horneado en el PNG: el día que la paleta gire —y ya giró una vez,
   de lima a verde— el mapa gira con ella y no hay nada que regenerar.

   El trazo de la costa es el mismo hairline que ordena las tablas del juego. Y
   como ahora es un trazado, `vector-effect: non-scaling-stroke` lo mantiene de
   un píxel DE PANTALLA aunque el mapa se acerque: sin eso, al acercarse 2,4× la
   costa se dibujaría con una línea de dos píxeles y medio y el mapa se vería
   más pesado de cerca que de lejos. */
.mapa__tierra {
  fill: var(--bg-raised);
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* La malla cada 30°. Tan tenue que se lee como textura: si se nota, es una
   retícula y compite con los puntos, que son lo único que hay que mirar. */
.mapa__malla { stroke: var(--line); stroke-width: 1; opacity: 0.4; fill: none; }

.mapa__continente {
  fill: var(--text-disabled);
  font-size: var(--fs-sm); /* 15px: el paso que ya existía */
  font-weight: 700;
  letter-spacing: 1.2px;
  text-anchor: middle;
  opacity: 0.5;
  pointer-events: none;
}

/* EL PUNTO ES DEL MISMO TAMAÑO PARA TODOS. Se probó escalarlo por cantidad de
   clubes y está mal: Chipre tiene catorce y la Argentina 153, así que Chipre
   quedaba en un punto de dos píxeles. El mapa dice DÓNDE se puede jugar, no
   cuánto hay adentro — eso lo dice el expediente. */
/* LA TRANSICIÓN ES SÓLO DE COLOR, y el motivo es de rendimiento medido. Antes
   acá decía `fill, r`: `r` es una propiedad de GEOMETRÍA de SVG, así que
   animarla obliga a recalcular y repintar el dibujo en cada cuadro — cincuenta
   y seis círculos, al mismo tiempo que una capa del tamaño de la pantalla está
   escalando. El acercamiento se veía a tirones por eso.

   El tamaño del punto ahora lo cambia un `transform` sobre su grupo, que la
   compositora resuelve sin repintar nada. Ver `.mapa--cerca .mapa__pais`. */
.mapa__punto {
  fill: var(--vio-400);
  stroke: var(--ink-1000);
  stroke-width: 2;
  transition: fill var(--dur-fast) var(--ease);
}

.mapa__halo { fill: var(--accent); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.mapa__blanco { fill: transparent; cursor: pointer; }

/* El continente que NO se está listando baja de tono. No desaparece: que el
   mundo entero siga encendido es la mitad del mensaje de esta pantalla. */
.mapa__pais--fuera .mapa__punto { fill: var(--vio-700); }

.mapa__pais:hover .mapa__punto,
.mapa__pais--activo .mapa__punto { fill: var(--mag-400); r: 12; }
.mapa__pais:hover .mapa__halo,
.mapa__pais--activo .mapa__halo { opacity: 0.3; r: 26; }

/* EL PAÍS EN EL QUE ENTRASTE, en el paso 2. Va en NARANJA y no en el color de
   canal, que es la regla del sistema para «el tuyo»: el club dirigido se pinta
   naranja en la tabla, en el sorteo, en el recorrido y en el entorno, y el país
   que elegiste es lo mismo un piso más arriba. Así el acercamiento tiene a
   quién apuntar — sin esto el mapa se acercaba a Perú y Perú se veía igual que
   Bolivia.

   El halo queda encendido fijo y no sólo al pasar por encima: no es una
   respuesta al cursor, es un estado. */
.mapa__pais--elegido .mapa__punto { fill: var(--nar-400); r: 12; stroke-width: 1; }
.mapa__pais--elegido .mapa__halo { fill: var(--nar-500); opacity: 0.28; r: 26; }
/* El elegido se encoge un poco menos que el resto, así que al acercarse queda
   más grande que sus vecinos sin que ninguno anime su radio. */
.mapa--cerca .mapa__pais--elegido { transform: scale(0.35); }

/* --------------------------------------------------------------------------
   LA COLUMNA DE LA DERECHA
   -------------------------------------------------------------------------- */
.mundo__lista {
  display: grid;
  gap: var(--sp-5);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}

/* --------------------------------------------------------------------------
   TRES TIEMPOS Y NO UNO
   --------------------------------------------------------------------------
   Antes el acercamiento y el cambio de panel pasaban A LA VEZ, y por eso se
   sentía atropellado aunque cada pieza estuviera bien: dos cosas grandes
   moviéndose juntas compiten, y el ojo no sabe cuál mirar.

   Ahora son tres tiempos encadenados, que es lo que hace cualquier transición
   que se sienta cara:

     0 ms    la columna SE VA — y el punto del país se enciende, que es la
             respuesta inmediata al clic; algo tiene que contestar antes de los
             100 ms o el clic se siente muerto
     90 ms   arranca la CÁMARA, con la columna ya fuera de la vista
     520 ms  ENTRA lo nuevo, con la cámara todavía frenando

   El solape del final es deliberado: esperar a que la cámara termine del todo
   haría dos animaciones seguidas —una tras otra, 760 + 260— y eso sí se siente
   lento. Encabalgadas, el conjunto dura menos de lo que suma.
   -------------------------------------------------------------------------- */
/* LA SALIDA Y LA ENTRADA VAN EN EL MISMO SENTIDO, y eso es lo que hace que se
   lea como avanzar y no como parpadear: lo viejo se va hacia la izquierda —hacia
   donde quedó el mundo— y lo nuevo entra desde la derecha, que es hacia donde
   estás yendo. Con las dos hacia el mismo lado el ojo sigue una dirección; con
   las dos hacia el mismo punto, ve dos cosas apareciendo en el mismo sitio.

   Y el desplazamiento es CHICO —10 y 16 px— porque lo que viaja no es la
   columna: es el mapa. La columna sólo tiene que acompañar. */
.mundo__lista--sale { opacity: 0; transform: translateX(-10px); }

.mundo__lista--entra {
  animation: lista-entra 300ms var(--ease-entrada) both;
}

/* Y la vuelta entra desde el OTRO lado. Sin esto, ir y volver se ven idénticos y
   el gesto deja de decir de dónde venís: entrar viene de la derecha porque hacia
   allá vas, volver viene de la izquierda porque de allá vuelve el mundo. */
.mundo__lista--vuelve {
  animation: lista-vuelve 300ms var(--ease-entrada) both;
}

@keyframes lista-entra {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes lista-vuelve {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mundo__lista { transition: none; }
  .mundo__lista--sale { opacity: 1; transform: none; }
  .mundo__lista--entra, .mundo__lista--vuelve { animation: none; }
}

/* UNA SOLA LISTA CON TODOS, y las solapas se fueron. Eran un control más —seis
   pestañas en tres renglones— para resolver algo que la lista resuelve sola con
   un rótulo cada tanto: los 56 en orden de continente, y dentro alfabético.

   Se ganan dos cosas además de la simpleza. Una, que el mapa entero queda
   encendido: con solapas, el continente que no estabas listando bajaba de tono,
   así que el mensaje de la pantalla —cincuenta y seis países— se veía como diez.
   Y dos, que desaparece un estado entero del guion: ya no hay «qué continente
   estoy mirando», que era de donde salía el problema de que pasar el mouse te
   cambiara la lista debajo del cursor.

   La lista rueda ella y no la página: la pantalla de elegir club es de alto fijo
   en el resto del juego y ésta no puede ser la excepción. */
.mundo__paises {
  display: grid;
  gap: 1px;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
}

.nacion-fila {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-5);
  height: 34px;
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-secondary);
  text-align: left;
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nacion-fila:hover:not(:disabled),
.nacion-fila--mirando { background: var(--bg-hover); color: var(--text-primary); }
.nacion-fila:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nacion-fila:disabled { opacity: 0.5; cursor: default; }
.nacion-fila__bandera { width: 24px; height: 17px; }
.nacion-fila__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La cabecera de la columna cuando estás dentro de un país: el volver a la
   izquierda y la cuenta de categorías a la derecha, que es la misma forma que
   tenía la tarjeta vieja del paso 2. */
.mundo__cab { display: flex; align-items: center; gap: var(--sp-5); }
.mundo__cuenta { margin-left: auto; color: var(--text-muted); }

.mundo__pais-elegido { display: flex; align-items: center; gap: var(--sp-5); }

/* Las categorías respiran más que los países: son dos o cinco, no veinticinco,
   y cada una cuenta su formato en dos renglones. */
.mundo__divisiones { display: grid; gap: var(--sp-4); }

/* LA FILA DE LIGA, MAQUETADA PARA UNA COLUMNA Y NO PARA UNA TARJETA ANCHA.
   Los cuatro datos son los mismos —marca, nombre, escalón y clubes, formato del
   año, riesgo— y lo que cambia es cómo se reparten.

   En la tarjeta de 1180 px iban todos en UNA fila y el riesgo se iba al extremo
   derecho, a mil píxeles de la liga a la que pertenece. En 400 esa misma fila
   parte el texto en cuatro líneas y el riesgo le come el ancho: «Primera
   categoría · 18 clubes / Apertura y Clausura · 17 / fechas cada uno» era lo que
   salía. Acá van en DOS filas: arriba la identidad —marca, nombre y la flecha
   que dice que esto lleva a otro sitio—, abajo lo que hay que leer.

   Y EL RIESGO BAJA A CHAPA, que es lo que de verdad arregla el ancho: pasa de
   competir por la fila a colgar debajo del texto, junto al dato con el que se
   entiende. «Descienden 2» al lado de «18 clubes» dice algo; a cuatrocientos
   píxeles de distancia es un rótulo suelto. */
/* CON LAS DOS CLASES, Y NO ES ESTILO: ES LA CASCADA. Este bloque vivió como
   `.liga--columna` a secas y NUNCA SE APLICÓ: `.liga` —que está más abajo en
   esta misma hoja, línea ~800— pesa lo mismo y pone `display: flex` y `gap`
   después, así que la grilla de dos filas que este comentario describe se
   quedó en el papel y la carta siguió siendo la fila única de 400 px con el
   texto partido en cuatro líneas. Se encontró el 25/8/2026 midiendo el
   selector a 375: el defecto que este bloque decía arreglar seguía en la
   pantalla. Es el caso «dos reglas que se tapan» en su forma más silenciosa —
   la regla muerta está en la MISMA hoja que la que la mata. */
.liga.liga--columna {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas:
    "logo texto chev"
    "logo datos datos";
  align-items: center;
  column-gap: var(--sp-5);
  row-gap: var(--sp-3);
}
.liga--columna .liga__logo { grid-area: logo; align-self: start; }
.liga--columna .liga__texto { grid-area: texto; }
.liga--columna .liga__chev { grid-area: chev; align-self: start; }
.liga--columna .liga__costado { grid-area: datos; }

/* UN `grid-area` SÓLO MANDA SOBRE HIJOS DIRECTOS, y me costó una pasada:
   el primer intento le puso `grid-area: datos` a `.liga__escalon` y
   `.liga__formato`, que son NIETOS —viven dentro de `.liga__texto`—. En su
   contexto ese nombre de área no existe, así que los tres renglones cayeron en
   la misma celda y se imprimieron uno encima del otro: el nombre de la liga
   desapareció debajo del formato. No dio error: dio texto ilegible.

   La pila de tres renglones ya la arma `.liga__texto` sola; lo único que se
   reubica es el riesgo, que sí es hijo. */

/* La chapa del riesgo: el mismo `chip` del sistema, en el tono de aviso que ya
   usa el juego para lo que se pierde. */
.liga--columna .liga__costado:not(:empty) {
  justify-self: start;
  height: 22px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg-page);
  color: var(--clay-300);
  font-size: var(--fs-2xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.liga--columna .liga__costado:empty { display: none; }

/* El rótulo del continente dentro de la lista: hace el trabajo que hacían las
   seis solapas y no ocupa un control. Pegajoso, para que al rodar la lista se
   sepa siempre en qué continente vas. */
.paises__grupo {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-2);
  padding: var(--sp-2) 0;
  background: var(--bg-panel);
  color: var(--text-muted);
}
.paises__grupo:first-child { margin-top: 0; }
.paises__n { color: var(--text-disabled); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   EL EXPEDIENTE
   --------------------------------------------------------------------------
   Va arriba de todo, porque es lo que estás MIRANDO: la lista de abajo es la
   herramienta con la que elegís, y lo que se mira va antes que la herramienta.

   ALTO FIJO, Y NO ES CAPRICHO. Si creciera con el largo del nombre del país
   —«Emiratos Árabes Unidos» contra «Perú»— la lista de abajo se correría cada
   vez que el cursor cruza un renglón, y una lista que se mueve bajo el cursor es
   imposible de usar. Los 150 px son los que necesita el caso más alto: nombre
   largo, tres clubes y la línea de la copa.
   -------------------------------------------------------------------------- */
.exp-pais {
  position: relative;
  min-height: 150px;
  padding: var(--sp-6);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--ink-950);
  overflow: hidden;
}

/* LOS ESCUDOS DEL PAÍS, DETRÁS. Al 7 % y sangrados por la derecha: contestan
   «¿qué hay acá adentro?» sin robarle una línea al texto. Van sin `filter` y sin
   `mix-blend-mode`: los dos vuelven gris un escudo de colores, y el color del
   club es justamente lo que se reconoce.

   Y RECORTADOS A LA MITAD DERECHA de la carta, que es lo que «sangrados por la
   derecha» prometía y el `auto` no cumplía: anclada a la derecha con el ancho
   de su contenido, la tira de cinco escudos mide ~360px y la carta de la
   columna 330 — o sea que cubría la carta ENTERA y los cinco escudos pasaban
   por debajo del texto. Con el borde izquierdo en el 45 % y el desborde
   recortado, los escudos que entren se ven y el texto pisa fondo liso. */
.exp-pais__fondo {
  position: absolute;
  inset: 0 -12px 0 45%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
  opacity: 0.07;
  overflow: hidden;
  pointer-events: none;
}
.exp-pais__escudo { width: 58px; height: 58px; flex: none; }

.exp-pais__frente { position: relative; display: grid; gap: var(--sp-3); }
.exp-pais__cab { display: flex; align-items: center; gap: var(--sp-4); }
.exp-pais__bandera { width: 34px; height: 24px; flex: none; }
.exp-pais__nombre { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }

/* La chapa del sugerido: dice por qué ese país está ahí sin que nadie lo haya
   señalado, que si no se lee como un país elegido al azar. */
.exp-pais__sugerido {
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent-texto);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.exp-pais__dato { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }

/* LOS TRES CLUBES DE PUNTA, que es lo que el hover no daba y ahora sí. La marca
   de fondo dice «acá hay algo» y estos nombres dicen QUÉ: pasar por Marruecos y
   leer «Wydad · RS Berkane · MAS Fès» ubica muchísimo más que «16 clubes». */
.exp-pais__clubes {
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exp-pais__copa { margin: 0; font-size: var(--fs-2xs); color: var(--text-muted); }
.exp-pais__copa strong { color: var(--accent-texto); font-weight: 600; }

/* --------------------------------------------------------------------------
   LAS TRES MANERAS DE EMPEZAR
   --------------------------------------------------------------------------
   Ahora son PERMANENTES. Antes vivían dentro del expediente, así que aparecían
   con el cursor fuera de todo y desaparecían en cuanto lo movías: nadie llegaba
   a leerlas. Eran un estado pasajero del hueco de otra cosa.

   Como fila de chapas ocupan un renglón en vez de un bloque, y el texto largo
   que las explicaba se mudó al `title` — una recomendación necesita un motivo,
   pero el motivo no necesita estar siempre a la vista.
   -------------------------------------------------------------------------- */
.arranques { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.arranques__rotulo { color: var(--text-muted); width: 100%; }

.arranque {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: 26px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  background: var(--ink-950);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-2xs);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.arranque:hover { border-color: var(--line-strong); color: var(--text-primary); }
.arranque:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.arranque__bandera { width: 18px; height: 13px; flex: none; }

/* APILADO CUANDO NO ENTRAN LAS DOS COLUMNAS. El corte es 1020 y no 900: la
   lista pide 320 fijos y el mapa deja de leerse abajo de 640, así que 320 + 640
   + el hueco + el relleno de la tarjeta es donde de verdad se rompe. */
@media (max-width: 1020px) {
  .mundo { grid-template-columns: minmax(0, 1fr); }
  .mundo__paises { max-height: 260px; }
}

/* --------------------------------------------------------------------------
   1. LA PIRÁMIDE
   --------------------------------------------------------------------------
   Tres pisos y sólo el del medio se mueve: el título arriba, el país debajo y
   la pirámide rodando. Es la forma de FM26 —nación fija arriba, lista de ligas
   rodando— y además es la única que deja llegar a la Primera C sin perder de
   vista en qué país estás parado.
   -------------------------------------------------------------------------- */

/* ACÁ VIVÍAN `.ligas`, `.ligas__pais`, `.ligas__bandera`, `.ligas__select` y
   `.ligas__lista`: la columna de la izquierda del paso 3. Se fue el 22/8/2026
   con su marcado y su JS, y el porqué está escrito en `nueva.html`, donde
   estaba el `<aside>`. La fila de categoría —`.liga`, acá abajo— se quedó: es
   la del paso 2 y nunca fue del carril. */

.liga {
  display: flex;
  /* `width: 100%` NO es redundante con `display: flex`. Un `<button>` se sigue
     midiendo por su contenido aunque se le cambie el display —es un control, no
     una caja normal—, y las cinco filas de la Argentina salieron cada una de un
     ancho distinto, escalonadas como una escalera. En la columna de la
     izquierda no se notaba porque ahí el padre es una grilla y estira a sus
     hijos; en el paso 2 el padre es el cuerpo del paso, que es un bloque. */
  width: 100%;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--ink-950);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

/* El logo de la división acompaña al puntero, y es lo ÚNICO que se mueve de la
   fila. La fila no se desplaza: es una lista vertical de cinco, y cinco filas
   que se corren de a dos píxeles cada vez que el ratón las cruza al bajar es
   una columna temblando. Se mueve la marca de la liga —el objeto— y no su
   renglón, que es la misma distinción que el sistema ya hace entre la acción
   principal y su flecha. */
.liga__logo { transition: transform var(--dur-fast) var(--ease); }
.liga:hover:not(:disabled) .liga__logo,
.liga:focus-visible:not(:disabled) .liga__logo { transform: scale(1.08); }

.liga:hover:not(:disabled) { border-color: var(--line-strong); background: var(--bg-hover); }
.liga:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Las categorías que no se dirigen siguen a la vista y se leen como lo que
   son: parte de la pirámide, no una opción. */
.liga:disabled { opacity: 0.55; cursor: default; }

/* `flex: none` en el logo no es adorno: sin él una imagen de 36px se encoge
   cuando la fila aprieta, y el nombre se queda con el ancho que le sacó. */
.liga__logo { flex: none; width: 36px; height: 36px; object-fit: contain; }

/* El texto es el ÚNICO que crece, y `min-width: 0` es lo que lo deja encogerse
   por debajo de su contenido: sin eso el nombre en una sola línea sería un piso
   que la fila no puede bajar, y el que se saldría de la tarjeta sería el
   costado. */
.liga__texto { flex: 1 1 auto; display: grid; gap: 1px; min-width: 0; }

.liga__nombre {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liga__escalon { font-size: var(--fs-2xs); color: var(--text-muted); }

/* El costado sólo se ocupa cuando hay algo que decir. Ver el comentario de
   `pintarLigas()` sobre por qué acá NO va una rueda de reputación. */
.liga__cerrada {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
}

/* --- Paso 2: las categorías ----------------------------------------------- */

.liga--paso + .liga--paso { margin-top: var(--sp-3); }

/* La misma fila de la columna izquierda, con sitio para contarse entera: sólo
   cambia el aire —más relleno, más separación— y el tamaño del logo. La forma
   —flex, cada parte con su tamaño— la trae `.liga`, y trayéndola de ahí las dos
   se rompen y se arreglan juntas. */
.liga--paso {
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
}

.liga--paso .liga__logo { width: 44px; height: 44px; }

/* El riesgo no se encoge: la frase de la Primera C prefiere caer en dos
   renglones dentro de sus 220px antes que adelgazar hasta una palabra por
   línea. Quien cede es el texto de la izquierda, que para eso tiene
   `min-width: 0`. */
.liga--paso .liga__costado { flex: none; }

/* El tercer renglón, que en la columna de la izquierda no cabe: cómo se juega
   el año. Es el mismo texto que la cabecera de la liga muestra en el paso 3,
   y sale del mismo sitio. */
.liga__formato { font-size: var(--fs-2xs); color: var(--text-secondary); }

/* El costado dice el riesgo —«Descienden 2»— o «Todavía no». Cuando no hay
   ninguno de los dos queda vacío y no ocupa: es un hijo de un flex, no una
   columna. El `margin-left: auto` es lo que lo manda al otro extremo, que antes
   hacía la última columna de la grilla.

   NO VA EN VERSALITAS aunque parezca un rótulo, y lo decidió un caso: el
   riesgo de la Primera C no es una medida corta sino una frase —«El último de
   cada zona se juega la afiliación a AFA»—, y cincuenta caracteres en mayúscula
   espaciada son un cartel, no un dato al margen. El tope de ancho la deja caer
   en dos renglones en vez de comerle sitio al nombre de la categoría. */
.liga__costado {
  margin-left: auto;
  max-width: 220px;
  font-size: var(--fs-2xs);
  line-height: 1.35;
  color: var(--text-muted);
  text-align: right;
}

.liga__chev { flex: none; color: var(--icon-quiet); transition: transform var(--dur-fast) var(--ease); }
.liga--paso:hover:not(:disabled) .liga__chev,
.liga--paso:focus-visible .liga__chev { transform: translateX(2px); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   2. LA REPISA Y EL EXPEDIENTE
   -------------------------------------------------------------------------- */

/* Pastilla de dato: etiqueta arriba, valor abajo. La misma forma en el
   expediente y en el pie, que es lo que hace que los dos se lean como el mismo
   mueble. */
.dato { display: grid; gap: var(--sp-1); flex: none; }
.dato__valor { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.dato__sub { font-weight: 400; color: var(--text-muted); }

/* La barra que encabeza la repisa. El rótulo magenta con su icono es como FM26
   anuncia una sección —«Clubs» con el escudito delante— y acá ya existía el
   mueble: es el mismo `.panel__title` del resto del juego. */
/* LA CABECERA DE LA LIGA. Va dentro de la placa de la repisa y se distingue
   con su propio hairline y su fondo hundido, como el encabezado de la fuente.
   No lleva un fondo que dé por hecho que hay logo: hay divisiones sin marca
   propia y el `<img>` se borra a sí mismo cuando falta. */
.tablero__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex: none;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--ink-950);
}

.tablero__logo { width: 44px; height: 44px; object-fit: contain; flex: none; }
.tablero__id { display: grid; gap: var(--sp-1); min-width: 0; }
.tablero__nombre { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
.tablero__formato { font-size: var(--fs-xs); color: var(--text-muted); }

.tablero__barra { display: flex; align-items: center; gap: var(--sp-4); flex: none; }

.barra__rotulo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--label-color);
}

.search--campo { flex: 1 1 auto; min-width: 0; }

.search--campo input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
}

.search--campo input::placeholder { color: var(--text-muted); }
.search--campo input:focus { outline: none; }
.search--campo:focus-within { border-color: var(--accent); color: var(--text-secondary); }

/* El aspa nativa de `type=search` en WebKit no hereda color y aparece como una
   mancha clara sobre la pizarra. */
.search--campo input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* --------------------------------------------------------------------------
   3. LAS CARTAS
   --------------------------------------------------------------------------
   Tantas columnas como entren, con un mínimo por carta: el ancho manda y no
   hay un número de columnas escrito en ningún lado. El mínimo es un PISO PARA
   EL NOMBRE y no una proporción buscada —el escudo mide 56 en todas, así que
   una carta más ancha no se reconoce mejor, sólo trae más aire a los costados—:
   por eso conviene el piso más bajo que los 858 nombres del universo aguanten,
   que es el que deja más clubes a la vista de una sola pasada. En 2000, ocho
   columnas y el Brasileirão entero sin rodar.

   La grilla scrollea dentro de su columna, como en FM26. La página sigue sin
   scrollear: lo que se mueve es la repisa de clubes, no la pantalla.
   -------------------------------------------------------------------------- */

.grilla {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  /* 160 es el piso con el que se midieron los 858 nombres del universo, y con
     la repisa quedándose ahora con el ancho que sobra son ocho columnas en
     2000 y cinco en 1600. `auto-fill` y no un número de columnas: en el
     teléfono entran las que entren. */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-auto-rows: min-content;
  gap: var(--sp-4);
  align-content: start;
  overflow: auto;
  padding-bottom: var(--sp-3);
  /* La misma barra fina del resto del producto. Sin esto, la del sistema es
     una franja clara sobre la pizarra y es lo primero que se ve de la repisa. */
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
  /* EL CANAL DE LA BARRA, RESERVADO SIEMPRE, y esto no es prolijidad: sin él la
     repisa tiene DOS equilibrios y se queda en el que le toque. Con 1.342 de
     ancho entran ocho columnas (8×160 + 7×8 = 1.336) y los treinta clubes caen
     en cuatro filas sin scroll; pero si por lo que sea aparece la barra, quedan
     1.332 —cuatro píxeles menos que los 1.336— y se cae a SIETE columnas, que
     son cinco filas, que necesitan scroll, que mantiene la barra puesta. Los
     dos estados se sostienen solos y la pantalla se queda en el que agarró:
     una vez ocho columnas y treinta clubes a la vista, otra vez siete y
     veintiocho, con el mismo código y la misma ventana. Reservando el canal, el
     ancho es uno solo y el resultado también. */
  scrollbar-gutter: stable;
}

/* Las dos tintas que puede llevar una carta. Cuál de las dos le toca lo decide
   `nueva.js` midiendo el contraste contra el color del club; acá sólo están
   escritas las dos opciones, y son tokens del sistema, no dos grises nuevos. */
/* El color vivo de la carta se REGISTRA para que se pueda transicionar. Una
   custom property sin registrar es una cadena de texto para el motor, y una
   cadena no interpola: sin esto el encendido de la carta salta de golpe por
   más `transition` que se declare. `inherits: false` porque cada carta tiene
   el suyo, y el valor inicial es `transparent` y no un color del sistema
   —`initial-value` no acepta `var()`— pero no se ve nunca: `.carta` lo pisa
   con el color del club en la línea siguiente. */
@property --tinte-vivo {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

.carta[data-tinta='clara']  { --carta-tinta: var(--text-primary); }
.carta[data-tinta='oscura'] { --carta-tinta: var(--ink-1000); }

.carta {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-3);
  /* ALTO FIJO, no proporción. La carta llevaba `aspect-ratio: 8/5`, la de
     FM26, y eso ataba su alto al ANCHO de la columna: en una ventana ancha la
     carta se estiraba de más —treinta clubes no entraban y la repisa
     scrolleaba con media fila afuera— y en una angosta se quedaba corta y le
     comía el segundo renglón al nombre de Gimnasia y Esgrima de Mendoza.

     Los 122 píxeles son lo que la carta CONTIENE, sumado: 12 de aire arriba,
     56 de escudo —que es el tamaño en el que un escudo se reconoce y no se
     toca—, 6 de separación, dos renglones de nombre (36,4) y 8 abajo. Con eso
     las filas siguen midiendo todas lo mismo, que es lo único que la
     proporción estaba consiguiendo de verdad, y treinta clubes entran sin
     scroll en una ventana de escritorio. Si vuelve a hacer falta apretar,
     el orden es: el aire, la separación, y el escudo nunca. */
  height: 122px;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  /* El hairline sale del propio color de la carta y no de un token fijo: sobre
     la carta blanca del Fulham una línea oscura del sistema sería un marco, y
     sobre la azul del Boca no se vería. */
  border: 1px solid color-mix(in srgb, var(--carta-tinta) 16%, transparent);
  border-radius: var(--r-md);
  /* El color del club, hundido hacia sí mismo. NO hacia la pizarra: mezclarlo
     con el fondo del panel volvía negras las treinta cartas y borraba
     justamente los escudos oscuros. El segundo tono lo calcula `nueva.js`. */
  /* SE MUEVE LA ESQUINA DE ARRIBA DEL DEGRADADO, Y NADA MÁS.

     Ésa es toda la mecánica del movimiento de esta pantalla. En reposo la
     esquina de arriba es `--tinte` y la carta es exactamente la de siempre; al
     pasar el ratón esa esquina sube a `--tinte-alto` —el mismo color del club
     con 12 % de pizarra encima en vez de 42— y el pie se queda donde estaba. El
     club no cambia de color: sale de la pizarra por arriba.

     QUE EL PIE NO SE MUEVA ES LA MITAD DEL DISEÑO. El nombre se apoya al 78 %
     del alto y su tinta está elegida contra ese fondo hundido. Ver `ALTO` en
     `nueva.js` para los números: subiendo la carta entera, 258 de 876 clubes
     se quedaban con el nombre por debajo de 4,5:1.

     VA POR UNA PROPIEDAD REGISTRADA porque dos `linear-gradient` NO
     interpolan: cambiar el degradado entero salta de golpe por más transición
     que se le declare. Registrada como `<color>`, la que interpola es la
     variable, y el degradado se recalcula en cada fotograma con el color de
     ese instante. Sin `@property` —o en un navegador que no lo soporte— la
     variable sigue funcionando y el cambio ocurre seco: se pierde la
     transición, no el estado.

     Con `filter: brightness()` habría sido una línea y está mal: crea contexto
     de apilamiento y se compone con el `drop-shadow` del halo del escudo, así
     que el rescate del escudo se aclararía junto con la carta. */
  --tinte-vivo: var(--tinte);
  background: linear-gradient(148deg, var(--tinte-vivo) 0%, var(--tinte-hondo) 100%);
  color: var(--carta-tinta);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    --tinte-vivo var(--dur) var(--ease);
  /* Para que el rescate del escudo no se salga de la esquina redonda. */
  overflow: hidden;
}

/* AL PASAR: el club se enciende y la carta se despega dos píxeles. Los dos
   gestos dicen lo mismo con distinta materia, y por eso duran distinto: el
   movimiento es el acuse y va en 120ms, el color es el que hay que ver llegar
   y va en 180. Al revés —color rápido, movimiento lento— la carta parece que
   se enciende sola antes de que la toques. */
.carta:hover:not(:disabled),
.carta:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  --tinte-vivo: var(--tinte-alto, var(--tinte));
  border-color: color-mix(in srgb, var(--carta-tinta) 34%, transparent);
}

/* AL PULSAR: se apoya. Vuelve a su sitio y cede un 1,5 %, en la mitad del
   tiempo que tardó en levantarse — un acuse que llega tarde no es un acuse.
   No rebota: en este sistema nada rebota. */
.carta:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  transition-duration: 60ms;
}

/* Lo elegido se marca con un anillo INTERIOR y no con `outline`, que es el
   mismo recurso que usa el punto de radio de la izquierda. No es capricho:
   `outline` en la carta pisa al del sistema —`:focus-visible` tiene la misma
   especificidad y esta hoja carga después— y el anillo de foco desaparecía de
   las treinta cartas. Un estado no se marca robándole la seña a otro. */
/* EL ELEGIDO SE QUEDA ENCENDIDO. El anillo dice cuál es; el color dice que es
   TUYO. Es la misma ventana del degradado que abre el hover, pero sostenida:
   de treinta clubes apagados dentro de la pizarra, el que elegiste es el único
   que está a su color. Se ve desde el otro extremo de la grilla, que es lo que
   un anillo de 2px no consigue en una repisa de treinta bloques de color.

   Sin `transform`: la carta elegida no se queda flotando. Levantar es la
   respuesta al puntero y se acaba cuando el puntero se va; quedarse arriba
   convertiría el acuse en un estado, y entonces el hover ya no tendría nada
   que contestar sobre la que ya está elegida. */
.carta[aria-checked='true'] {
  box-shadow: inset 0 0 0 2px var(--accent);
  --tinte-vivo: var(--tinte-alto, var(--tinte));
  border-color: transparent;
}

.carta:disabled { cursor: default; opacity: 0.45; }

/* El punto de radio, arriba a la izquierda, como en FM26. La carta entera es
   el control, pero sin la seña de radio una grilla de treinta bloques de color
   no dice que se elige UNO. Se dibuja con la tinta de la carta, así que
   funciona igual sobre la blanca del Fulham y sobre la negra del Juventus. */
.carta__marca {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  width: 14px;
  height: 14px;
  border: 1.5px solid color-mix(in srgb, var(--carta-tinta) 60%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink-1000) 18%, transparent);
}

.carta[aria-checked='true'] .carta__marca {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--text-on-accent);
}

.carta__escudo {
  width: 56px;
  height: 56px;
  --halo: 1px;
  object-fit: contain;
}

/* Acá vivía `.carta__escudo--perfil`, el filete de dos pasadas de 1px con el
   que se rescataba a los 64 escudos que no se ven sobre ninguno de los dos
   colores de su club. Se fue, y con él la única pieza del sistema que resolvía
   este problema de una segunda manera.

   El filete abraza el alfa del dibujo, así que funciona cuando el dibujo TIENE
   silueta y falla justo con esta familia: los que son una mancha compacta de un
   solo tono. El contorno alrededor de la mancha negra del San Lorenzo sobre su
   carta oscura dibujaba el borde de la mancha y no la mancha. Ahora llevan la
   plata del resto del juego (`.marca-plata`, en `app.css`), que es opaca y por
   lo tanto vale lo mismo en las 64 cartas. */

/* DOS renglones, y el alto de la carta está calculado para que los dos se vean
   ENTEROS. El recorte es una red de seguridad, no el estado normal: medidos los
   858 nombres del universo contra el ancho de texto de la carta —192px en una
   ventana ancha, 172 en la columna mínima, y hasta 160 por las dudas— ninguno
   pide un tercer renglón. Si algún día entra un club que sí, lo que sube es el
   alto de la carta, no lo que se esconde. */
.carta__nombre {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  line-height: var(--lh-snug);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Acá estaba `.carta__nivel`, la pastilla de dificultad de la esquina derecha,
   con sus cinco tramos de la rampa de atributos. Se fue entera: treinta cifras
   en el margen de treinta escudos convertían la repisa en un ranking y le
   robaban la lectura al único dibujo que la carta tiene que dar. La dificultad
   la cuenta el pie —el puesto dentro de la división, con palabras— cuando ya
   hay un club elegido. */

.grilla__vacio {
  grid-column: 1 / -1;
  padding: var(--sp-7) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

/* Un botón que se lee como texto: la salida de un estado vacío no merece el
   peso de un control, pero tiene que ser pulsable de verdad. */
.enlace {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* EL HOVER SE ACLARA DENTRO DEL ACENTO, y hasta hoy no se aclaraba nada:
   apuntaba a `--cal-bright`, un token que la guía nombraba y `tokens.css` nunca
   definió, así que la declaración era inválida y el color no cambiaba. Se vio
   al girar la familia de la cal al verde — el renombrado dejó al descubierto la
   única referencia que no llevaba a ninguna parte.

   Y no vuelve como verde: `.enlace` es un enlace, o sea algo que responde al
   dedo, y el verde de este sistema es el del valor que se lee. Un enlace que se
   pone verde al pasarle el ratón es la Regla del Dedo al revés. */
.enlace:hover { color: var(--accent-strong); }

/* --------------------------------------------------------------------------
   3.5 EL EXPEDIENTE
   --------------------------------------------------------------------------
   Lo que le espera al DT en el club que está mirando. Tres piezas: la cabecera
   teñida con el color del club, cuatro cifras y el once que heredaría.

   La cabecera es la ÚNICA superficie de la pantalla, junto con la carta, que
   declara su propio fondo — y por eso el escudo le pide su marca a
   `marcaDeEscudo(id, ese fondo)` y no a la pizarra. Un escudo que se ve sobre
   la pizarra puede desaparecer sobre el rojo de su club.
   -------------------------------------------------------------------------- */

.exp { display: flex; flex-direction: column; gap: var(--sp-5); }

.exp__cab {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md);
  /* EL MISMO PUNTO DEL DEGRADADO EN EL QUE SE MIDIÓ LA TINTA, y no el tope de
     la carta. La cabecera arranca en el 78 % —donde se apoya el nombre de la
     carta y donde `tintaDe()` eligió entre clara y oscura— y se hunde hasta el
     88 %: así ningún punto de esta superficie es más claro que el que se midió.

     Con el tope de la carta (42 %) el texto quedaba en 2,25:1 sobre siete de
     los treinta clubes de Primera —Vélez, River, Huracán, Aldosivi—: la carta
     no lo sufre porque su nombre cae al 78 %, y ésta lo sufría por apoyarse
     arriba. Medido sobre los treinta, no mirado. */
  background: linear-gradient(160deg, var(--tinte) 0%, var(--tinte-hondo) 100%);
}

.exp__cab[data-tinta='clara']  { color: var(--text-primary); }
.exp__cab[data-tinta='oscura'] { color: var(--ink-1000); }

/* 84px de escudo: el tamaño en el que un escudo deja de ser un icono y pasa a
   ser el club. `--halo` va acá y no en `.marca-halo` —misma especificidad— y
   vale el 1,8 % del lado, como en los otros veinte tamaños del juego. */
.exp__escudo { width: 84px; height: 84px; --halo: 1.5px; object-fit: contain; flex: none; }

.exp__id { display: grid; gap: var(--sp-1); min-width: 0; }

/* UNA COLUMNA POR DATO, APILADOS. Eran tres números en un renglón y una frase
   ancha debajo; desde que la edad media se fue son tres cosas de las que UNA
   es una frase —«Pelear el título», «Terminar sin sobresaltos»—, y una frase no
   entra en una columna de 125 px sin partirse en cuatro renglones.

   Apilados, cada uno tiene el ancho del expediente entero y los tres se leen de
   arriba abajo en el orden en que importan: cuánto cobrás, con quién, qué te
   piden. */
.exp__cifras {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--ink-950);
}

/* La aspiración se separa de las dos cifras con un hairline: arriba está lo que
   recibís, abajo lo que te piden con eso. */
.exp__cifras .dato:last-child {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-hairline);
}

/* --------------------------------------------------------------------------
   LA EXCEPCIÓN A LA REGLA DE LA ETIQUETA, y va escrita porque es una excepción
   --------------------------------------------------------------------------
   `app.css` invierte el orden del DOM en todos los `.dato` del juego —`.label`
   con `order: 2`— y lo hace por la Regla de la Etiqueta, que está escrita ahí:
   «una etiqueta chica sobre un texto grande es un antetítulo, y un antetítulo
   es siempre ruido». Vale para las siete superficies donde un dato es una cifra
   más en una fila de siete.

   ACÁ NO SON SIETE CIFRAS EN FILA: son tres renglones aislados en una tarjeta,
   y el tercero no es una cifra sino una frase. Sin la etiqueta delante,
   «Terminar sin sobresaltos» no se lee como una aspiración —se lee como una
   afirmación sobre el club— y hay que bajar la vista al renglón siguiente para
   saber qué era. Con la etiqueta arriba, los tres se anuncian antes de
   decirse, que es lo que pidió Alberto el 22/8/2026 mirando esta pantalla.

   Se apaga con `order: 0` en los dos, y no borrando la regla de `app.css`:
   aquélla sigue gobernando las otras siete superficies. */
.exp__cifras .dato > .label,
.exp__cifras .dato > .dato__valor { order: 0; }

.exp__bloque { display: grid; gap: var(--sp-4); }
.exp__rotulo { display: flex; align-items: baseline; gap: var(--sp-4); }
.exp__rotulo .label { margin-left: auto; color: var(--text-muted); }

.exp__once td:nth-child(2) { text-align: left; color: var(--text-primary); }
.exp__once th:nth-child(2) { text-align: left; }

/* --- Sin club mirado: la categoría ---------------------------------------- */

/* El sitio no se queda vacío nunca. Antes de tocar un escudo cuenta dónde
   estás parado, que es la única respuesta honesta que la pantalla tiene en ese
   momento — y de paso enseña que el panel se llena solo. */
/* CENTRADA, y en el eje de la mitad que ocupa. Alineada a la izquierda contra
   el borde de una placa de novecientos píxeles, la portada se leía como una
   ficha a medio llenar; centrada es una portada, que es lo que es: el sitio
   está entero para ella hasta que alguien toca un escudo.

   El texto se corta en 46ch aunque haya sitio de sobra. Es la medida de lectura
   y no el ancho disponible lo que decide dónde termina un renglón. */
.exp__portada {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-8);
  text-align: center;
}

/* En la portada el logo es el sujeto de la pantalla y no una viñeta. Pasó por
   76, 120 y 168 mirándolo en la pantalla: a 76 era una viñeta al lado de un
   título y a 168 le ganaba al nombre del torneo, que es quien tiene que mandar.
   140 es donde se lee el dibujo entero sin robarle la escena. */
.exp__logo { width: 140px; height: 140px; object-fit: contain; margin-bottom: var(--sp-4); }
.exp__titulo {
  font-size: var(--fs-3xl);
  font-weight: 700;
  font-stretch: 88%;
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.exp__escalon {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-color);
}
.exp__formato { font-size: var(--fs-md); color: var(--text-secondary); max-width: 46ch; }
.exp__premio { font-size: var(--fs-sm); color: var(--text-muted); max-width: 46ch; }
/* El riesgo va con el premio y en ámbar: es la otra cara de la misma frase
   —lo que se gana y lo que se pierde— y separarlo en su propio renglón lo
   convertía en una advertencia que nadie pidió. */
/* Iba en `var(--amber)`, que no existe —la familia son `--amber-300/400/500` y
   el token con significado es `--warn`—, así que la regla era inválida y el
   riesgo se leía con el mismo gris del premio: la otra cara de la frase decía
   lo mismo que la primera. Hoy no se ve, y conviene que quede dicho: esta rama
   del expediente es la PORTADA del torneo, la que se pinta sin club elegido, y
   desde que la pantalla volvió a la Team Selection siempre hay uno. La regla
   se arregla igual — una regla muerta y equivocada es peor que una muerta y
   correcta, porque el día que la portada vuelva, vuelve mal. */
.exp__riesgo { color: var(--warn); }
.exp__ademas { font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   4. EL PIE
   -------------------------------------------------------------------------- */

.mesa__pie {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 46px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-hairline);
}

.pie__escudo { width: 38px; height: 38px; --halo: 0.68px; object-fit: contain; flex: none; }
.pie__id { display: grid; gap: 1px; min-width: 0; }
.pie__nombre { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.pie__nota { font-size: var(--fs-xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   5. CUANDO NO CABEN LAS DOS COLUMNAS
   -------------------------------------------------------------------------- */

/* PRIMER QUIEBRE: 1700, Y LO ENCONTRÓ UNA CAPTURA DE PRODUCCIÓN. Las dos
   columnas fijas de esta pantalla —336 la pirámide y 490 el expediente— suman
   826 y no se mueven, así que lo que se achica al angostar la ventana es
   siempre la repisa, que es lo único que necesita crecer. Medido: a 1440 la
   repisa queda en 459px, o sea DOS columnas de carta —exactamente el problema
   con el que empezó este rediseño— y a 1280 queda en 311: UNA. A 1280 no está
   apretada, está rota, y 1280 es la ventana de un portátil cualquiera.

   Así que abajo de 1700 el expediente deja de ser columna y pasa DEBAJO, a lo
   ancho de las dos que quedan. La pantalla se vuelve la Team Selection de FM26
   tal cual —pirámide y repisa, que es lo que la fuente tiene— y la repisa
   recupera el ancho. El expediente no se pierde: se lee entero debajo, y al
   elegir un club se lo trae a la vista.

   EL CORTE BAJÓ DE 1700 A 1360 EL 22/8/2026, y no por gusto: se fue el carril
   de 336 px de la izquierda, así que la repisa gana ese ancho más su gap y
   sigue dando cuatro columnas de carta mucho más abajo. **La regla que fija el
   número no cambió** —el corte está donde la repisa deja de dar CUATRO columnas
   con el expediente al lado—; lo que cambió es dónde cae.

   Y el número está MEDIDO y no restado, que es la diferencia que importa: 1700
   menos 336 daría 1364 y habría sido casualidad. Medido en iframes:

       1280  →  1 columna · repisa 1250 · 6 cartas
       1360  →  1 columna · repisa 1331 · 7 cartas
       1366  →  2 columnas · repisa  794 · 4 cartas   ← el portátil de 1366
       2000  →  2 columnas · repisa 1428 · 7 cartas

   A 1300 con dos columnas la repisa queda en 728 y da TRES, que es el estado
   que este corte existe para no dejar pasar. Por eso 1360 y no 1300.

   LAS CINCO REGLAS QUE SIGUEN SON TODAS LA MISMA, y conviene leerla una vez: un
   hijo con `flex: 1 1 0` o un contenedor con `min-height: 0` sólo saben crecer
   cuando su padre tiene un alto definido. Al lado, lo tiene —la ventana—; en
   una página suelta, no, y el que pedía llenar el hueco se queda en NADA: la
   grilla en 74px con las treinta cartas dibujándose por encima de lo de abajo,
   la pirámide aplastada hasta su título. Por eso viajan con el quiebre que
   SUELTA LA PÁGINA y no con el que apila las columnas, que fue el error que
   tuvo esta hoja durante meses: estaban escritas en el corte de 900 mientras la
   página se soltaba en 1080, y en esa banda la pantalla se rompía sola. */
@media (max-width: 1360px) {
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  .mesa {
    grid-template-columns: minmax(0, 1fr);
    /* LAS TRES FILAS EN `auto`, y es la misma regla de arriba con una cara más:
       `minmax(0, 1fr)` reparte el alto SOBRANTE, y en una página suelta no
       sobra ninguno. La fila de la repisa quedaba en cero, el expediente subía
       a dibujarse encima y la pantalla se veía como si tuviera dos capas
       superpuestas. Cuando el alto lo pone el contenido, las filas se piden en
       `auto`. */
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "repisa"
      "exp"
      "pie";
  }
  .exp { overflow: visible; min-height: auto; }
  .repisa { min-height: auto; }
  .grilla { flex: 0 0 auto; overflow: visible; }
}

/* EL SEGUNDO QUIEBRE SE FUE CON EL CARRIL. Era el de 1080 y existía para
   apilar la pirámide cuando ya no cabía al lado de la repisa. Sin pirámide, el
   quiebre de arriba ya deja una sola columna y no hay nada más que apilar. */

@media (max-width: 900px) {
  .exp__cab { flex-wrap: wrap; }
  .mesa__pie { flex-wrap: wrap; }
  .mesa__pie .action { width: 100%; justify-content: center; }

  /* El riesgo se calla en la fila del paso 2. En una fila de 340px el tope de
     220 del costado se lleva dos tercios del renglón y le parte el nombre de la
     categoría en «Primera B Metr…»; y no se pierde el dato, que se vuelve a
     decir en el pie en cuanto entrás a la categoría. */
  .liga--paso .liga__costado { display: none; }

  /* La barra se parte: el buscador de 220px no entra al lado del rótulo y
     empujaba la cuenta a un renglón propio partida en dos. */
  .tablero__barra { flex-wrap: wrap; }
  .search--campo { width: 100%; }
}

/* En un teléfono, el mínimo de escritorio deja UNA columna, y una carta
   apaisada a todo el ancho es media pantalla por club: dieciocho clubes serían
   dieciocho pantallas de scroll. Con el mínimo más chico entran dos columnas y
   la repisa vuelve a ser una repisa. El escudo baja con ella: a 44px se sigue
   reconociendo, que es todo lo que la carta tiene que lograr. */
@media (max-width: 560px) {
  .grilla { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--sp-4); }
  /* Su propio alto, por la misma cuenta que el de escritorio pero con los
     números del teléfono: 16 de aire, 44 de escudo, 6, TRES renglones de
     nombre a 13px (50,7) y 8 abajo. Tres y no dos: en una columna de 116px hay
     un club en 858 —Uruguay Montevideo Football Club— que no entra en dos, y
     acá el renglón de más es gratis porque la página ya scrollea. */
  .carta { height: 128px; padding: var(--sp-6) var(--sp-4) var(--sp-4); gap: var(--sp-3); }
  .carta__escudo { width: 44px; height: 44px; --halo: 0.79px; }
  .carta__nombre { font-size: var(--fs-xs); -webkit-line-clamp: 3; }
  .carta__marca { top: var(--sp-3); left: var(--sp-3); }
}

/* QUIEN PIDE QUIETO se queda sin los DESPLAZAMIENTOS y no sin las respuestas.
   El color de la carta sigue subiendo al pasar y al elegir —un cambio de color
   no es movimiento, y quitarlo dejaría la pantalla sin decir cuál es el tuyo
   entre treinta—; lo que se va es todo lo que se mueve de sitio. */
@media (prefers-reduced-motion: reduce) {
  .carta:hover,
  .carta:focus-visible,
  .carta:active { transform: none; }
}

/* --------------------------------------------------------------------------
   LA VENTANA DEL TELÉFONO
   --------------------------------------------------------------------------
   El clic de X llega desde un teléfono, y esta pantalla es la primera que ese
   visitante toca después de la portada. Hasta el 25/8/2026 el selector a 375
   tenía la barra pisada y dos cabeceras rotas; las cartas de club, en cambio,
   ya entraban solas — la grilla de mínimos hace su trabajo sin ayuda.

   LA BARRA PASA A SER UN FLEX DE TRES CELDAS, que es exactamente lo que el
   comentario de `.chrome__volver` dejó escrito como el arreglo pendiente: dos
   absolutos y un centrado no se enteran de que se están pisando, y acá abajo
   de 570 la temporada tocaba el lockup y abajo de 490 lo tocaba el botón. En
   tres celdas nadie se pisa; lo que se paga es que el lockup se centra en su
   celda y no en la pantalla, y a este ancho la diferencia son píxeles. */
@media (max-width: 640px) {
  .chrome--portada .chrome__row--primary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--sp-4);
  }
  .chrome__volver { position: static; transform: none; justify-self: start; }
  .chrome__temporada { position: static; transform: none; justify-self: end; }
  .chrome--portada .marca--grande { --marca-alto: 1.9rem; }

  /* Las cabeceras de los pasos SE PARTEN en vez de recortarse: el rótulo de
     la cuenta («5 categorías») se salía por la derecha, y en la del paso 3 la
     identidad de la liga quedaba aplastada a 4px de ancho con su texto
     pintado ENCIMA de los dos datos, que no ceden (`flex: none`). Con el
     wrap, la identidad se queda con la primera fila y los datos bajan. */
  .paso__head { flex-wrap: wrap; }
  .tablero__head { flex-wrap: wrap; }
  .tablero__id { flex: 1 1 calc(100% - 60px); }
}