/* ==========================================================================
   El Camino DT — El mercado de pases
   --------------------------------------------------------------------------
   Cero tokens nuevos. La tabla ancha a la izquierda y el panel de decisión a
   la derecha. El panel no es un resumen de la tabla: es lo que hay que saber
   ANTES de mirarla, y por eso no scrollea con ella.
   ========================================================================== */

body {
  display: flex;
  flex-direction: column;
  /* `min-height` y no `height`: el porqué está en `plantel.css`. Resumen: con
     alto fijo, lo que no entra se sale de la caja y el documento rueda sólo
     hasta el borde del cuerpo, no hasta el final del contenido. */
  min-height: var(--alto-ventana);
  /* `auto` y no `hidden`: el porqué está en `copa.css`, donde se escribió
     entero. Resumen: `hidden` recorta lo que no entra y no hay forma de
     llegar; `auto` se comporta igual mientras entra y deja bajar cuando no. */
  overflow: auto;
}

/* Dos tarjetas con aire entre ellas: la superficie y el borde los pone
   `.tarjeta` (app.css). */
.mercado {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

.mercado__lista { gap: var(--sp-4); min-height: 0; }

/* EL RÓTULO DE ESTA CABECERA ES UNA FRASE, NO UNA MEDIDA, y por eso se dobla.

   `app.css` le pone `white-space: nowrap` al rótulo que acompaña al título de
   un panel, y con razón: ahí siempre van medidas cortas —«4-3-1-2», «10 DE
   11»— que partidas en dos renglones dejan de leerse. Estas dos no son
   medidas, son oraciones que crecen con el nombre de la liga y con cuántos
   hay: «Los 24 mejores que podés pagar en la Primera División, de 137 que sus
   clubes soltarían», y en Propuestas «Ninguno de los tuyos entra en lo que
   buscan los 8 clubes».

   Y NO SE PASABA SÓLO EN LA VENTANA CHICA. Un rótulo `nowrap` dentro de una
   caja de flex encoge la CAJA y deja la tinta afuera, así que el defecto
   estaba en todos los anchos y sólo se veía donde la ventana no lo tapaba.
   Medido con un `Range` sobre la tinta —la caja miente, justamente por esto—,
   en píxeles de maquetación y con las caras ya cargadas:

     ancho    sin doblar                          doblando
      800     60 px fuera de la tarjeta, y de     dentro, cabecera 47
              ahí 52 de página; cabecera 70
      900     dentro (una columna: la tarjeta     dentro, cabecera 47
              mide 833 y el rótulo 674)
     1024     184 px fuera de la tarjeta,         dentro, cabecera 47
              cortados a cuchillo; cabecera 70
     1280     dentro, cabecera 47                 dentro, cabecera 47
     1440     idéntico con y sin: un renglón, cabecera 23

   O sea que a 1024 —un portátil cualquiera— la frase se cortaba a mitad de
   palabra desde siempre, y el `overflow: hidden` del `body` lo tapaba.

   Y NO CUESTA ALTO: donde el rótulo dobla, la cabecera mide lo mismo o MENOS.
   A 800 y a 1024 baja de 70 a 47, porque meter el rótulo adentro le devuelve
   sitio al título, que estaba partido en tres renglones («Mercado / de /
   pases»). A 1280 el rótulo pasa a dos renglones y la cabecera sigue midiendo
   47, porque el que manda ahí es el título. De 1440 para arriba entra en un
   renglón y no cambia nada.

   Se dobla y no se recorta con puntos suspensivos: media frase no dice nada. */
.mercado__lista > .panel__head > .label { white-space: normal; text-align: right; }

/* La columna de la derecha no es una tarjeta: es la pila de las cuatro que
   lleva dentro, y lo que scrollea es la pila. */
.mercado__estado {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Una tarjeta dentro de un scroller no se encoge: se scrollea la pila. */
.mercado__estado > .tarjeta { flex: 0 0 auto; }
.mercado__lista .table-scroll { flex: 1 1 0; min-height: 0; overflow: auto; }

.mercado__barra { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); }
.mercado__barra .search--campo { width: 160px; }

/* La bandera al lado del escudo, en la columna del club. Con el mercado en un
   solo país sobraba; con diecinueve es el dato que dice si el que estás
   mirando juega a treinta kilómetros o a diez mil. Va antes del escudo porque
   lo que se pregunta primero es de dónde, no de quién. */
.club-de { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }

/* El nombre con su bandera, con la misma forma que el club con su escudo: la
   celda es la misma tabla y las dos cosas se leen igual.

   LA BANDERA VA AL FINAL porque esta columna está alineada a la derecha: el
   borde que comparten las veinticuatro filas es el de atrás, y es ahí donde las
   banderas forman la fila vertical que se barre de un vistazo cuando se buscan
   los argentinos de la lista. Delante del nombre caían cada una en su sitio
   —medido: entre 242 y 281 px— y dejaban de ser una columna. Es lo mismo que
   hace «NAC.» en el plantel. */
.quien-de { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }

/* Las operaciones de una fila. Desde que hay cuatro maneras de mover a un
   futbolista, una celda con un solo botón dejó de alcanzar: comprar y pedir
   prestado son dos decisiones distintas sobre el mismo nombre, y una de ellas
   se puede cuando la otra no.
   El guion del medio es un motivo que no se escribe: ocupa el sitio del botón
   que falta —así la columna no baila entre filas— y explica en el `title`. */
.ops { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.ops .veto { min-width: 1ch; text-align: center; }

.pos {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

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

/* `.data-table td.contrato--acaba` se mudó a `app.css`: desde que el plantel
   propio también tiene columna de contrato la miran dos pantallas, y esta hoja
   la carga una sola. */
.vacio-fila { padding: var(--sp-7) var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   CÓMO ESTÁS
   -------------------------------------------------------------------------- */

.resumen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  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);
}

.dato { display: grid; gap: var(--sp-1); }
.dato__valor { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.nota-mercado {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

/* La nota que avisa que la caja se va a perder. En ámbar y con un filo a la
   izquierda, que es el mismo tratamiento que el vencimiento de una oferta:
   las dos dicen lo mismo —esto tiene fecha y se te está por pasar— y no hay
   motivo para que se vean distinto. No lleva fondo: es una nota, no una
   alarma, y el panel entero ya es una superficie. */
.nota-mercado--aviso {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--warn);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   DÓNDE TE FALTA GENTE
   --------------------------------------------------------------------------
   El bloque que convierte la lista en una decisión. Cada línea dice cuántos
   tenés, cuántos hacen falta y quién es el más flojo de los que juegan: es la
   respuesta a «¿a quién estoy buscando?».
   -------------------------------------------------------------------------- */

.huecos { display: grid; gap: var(--sp-3); }

.hueco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--ink-950);
}

.hueco__n {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.hueco__pide { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }

.hueco__peor {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.hueco__peor strong { color: var(--text-secondary); }

/* Falta gente de verdad: es lo único de este panel que grita. */
.hueco__falta {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--warn);
}

.once-lista { display: grid; gap: 1px; }

.fila-once {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--sp-3);
  min-height: 22px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.fila-once__rol { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); color: var(--text-muted); }
.fila-once__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-once__nivel { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; }

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

@media (max-width: 900px) {
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  .mercado { grid-template-columns: 1fr; }
  .mercado__lista, .mercado__estado { overflow: visible; min-height: auto; }
  .mercado__lista .table-scroll { flex: 0 0 auto; }
  /* Primero lo que se decide, después la lista con la que se ejecuta. */
  .mercado__estado { order: -1; }
}

/* --------------------------------------------------------------------------
   LAS OFERTAS POR LOS TUYOS
   --------------------------------------------------------------------------
   La única pieza de todo el juego que PIDE una respuesta, así que es la única
   que se dibuja como una tarjeta con borde propio en vez de una fila más de
   una lista. El acento no es decoración: es lo que la separa del panel de
   información que tiene debajo.

   Cero tokens nuevos, como el resto de la pantalla.
   -------------------------------------------------------------------------- */

/* UNA COLUMNA EN EL PANEL, VARIAS EN UNA CARD. Es la tercera vez que aparece la
   misma propiedad del sistema Tile → Card: una pieza pensada para una columna
   de 320 px se estira cuando su contenido se muda a una card de 1.120. Con las
   otras dos alcanzó un techo de ancho; acá no, porque estas tarjetas están
   para compararse de un vistazo y un techo dejaría media card vacía con la
   lista rodando al lado. Se reparten en columnas, y entonces los ocho clubes
   entran juntos, que es exactamente lo que la card vino a arreglar.

   El `min()` no es adorno: con `minmax(20rem, 1fr)` a secas, un contenedor más
   angosto que 20rem se lleva una pista de 20rem igual y desborda — y el panel
   del mercado, que comparte esta clase, mide menos que eso. Con el `min()` la
   pista nunca pide más que el sitio que hay, así que allá sigue siendo una
   columna sola, como siempre. */
.ofertas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--sp-2);
  align-content: start;
}

.oferta {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
}

.oferta__cab {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Y PUEDE ENCOGERSE. Sin esto la cabecera pide siempre el ancho entero del
     nombre del club en versalitas más el monto —215 px— y ése pasa a ser el
     ancho mínimo de la tarjeta ENTERA: en una columna más angosta que eso, el
     panel abría una barra horizontal y cortaba las ocho tarjetas por la mitad,
     con el monto del lado de afuera. El `min-width: 0` de `.team` no alcanza:
     es el de adentro, y el que fija el piso es este renglón. Con el piso
     liberado, `.team__nombre` hace lo que sabe hacer —recortarse con puntos
     suspensivos— y no hay barra. Misma decisión que LA TABLA NO SE VA DE LA
     TARJETA en `inicio.css`. */
  min-width: 0;
}

/* El escudo y el nombre viven en el MISMO elemento —`escudo()` devuelve la
   imagen y el nombre va pegado detrás—, así que el `gap` de `.oferta__cab`
   cae entre el nombre y el monto y acá adentro no caía ninguno: el dibujo y
   la primera letra quedaban a cero píxeles, y en versalitas con tracking eso
   no se lee como «juntos», se lee como «encimados».

   La forma es la del resto del juego: `.team` pone el flex, el aire y el
   `min-width: 0`, y `.team__nombre` es el único que sabe recortarse — un texto
   suelto dentro de un flex es una caja anónima y `text-overflow` no le llega,
   que es la razón por la que ese span existe en `app.css`. Acá queda sólo lo
   que es de esta tarjeta: la tipografía. */
.oferta__club {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.oferta__club .crest { flex: none; }

/* QUÉ TE ESTÁN PROPONIENDO, en la cabecera y al lado del club. Desde que la
   estantería mezcla las dos clases —te lo compran o te lo piden prestado— el
   número de al lado significa dos cosas distintas: un pase o seis meses de
   alquiler. Sin este rótulo, US$ 643k por un titular se lee como una oferta
   ridícula en vez de como lo que es, el cargo de una cesión.

   LA COMPRA LLEVA EL ACENTO Y EL PRÉSTAMO NO, y ésa es toda la jerarquía que
   hace falta: una es definitiva y la otra vuelve en junio. El ámbar no se usa
   acá aunque estuviera libre — es el color del plazo, dos renglones más abajo,
   y repetirlo arriba haría que el plazo dejara de saltar. */
.oferta__tipo {
  flex: none;
  padding: 1px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.oferta__tipo[data-tipo='compra'] { background: var(--accent-wash); color: var(--accent-texto); }
.oferta__tipo[data-tipo='prestamo'] { background: var(--bg-hover); color: var(--text-secondary); }

/* El monto a la derecha y en acento: es el número por el que se abre la
   tarjeta, y tiene que poder leerse sin leer nada más. Eso estaba escrito acá
   desde el principio y el color decía lo contrario: en `--accent` daba 2,68:1
   sobre la tarjeta. Va en `--accent-texto`, que es el violeta que sí escribe. */
.oferta__monto {
  margin-left: auto;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent-texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.oferta__quien { display: grid; gap: 1px; }

.oferta__nota {
  margin: 0;
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

/* El plazo en su propia línea y en ámbar: es lo que convierte la tarjeta en
   una decisión con fecha y no en un aviso que espera. */
.oferta__plazo {
  display: block;
  margin-top: 2px;
  color: var(--warn);
}

/* El que vuelve a la carga. En cal y no en ámbar: el ámbar es del plazo, que
   te apura, y esto es lo contrario — una buena noticia con la que negociar.
   Va arriba del plazo porque es lo que cambió desde la última vez que miraste
   esta tarjeta. */
.oferta__insiste {
  display: block;
  margin-top: 2px;
  color: var(--good);
}

/* El pacto: el mercado está cerrado y esto no se cobra hoy. En violeta, que es
   el color de lo que responde al dedo, porque lo que dice es exactamente qué
   pasa si apretás. */
.oferta__pacto {
  display: block;
  margin-top: 2px;
  color: var(--accent);
}

.oferta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.oferta__acciones .action { flex: 1 1 auto; justify-content: center; }

/* ==========================================================================
   EL RESUMEN DE OFICINA
   --------------------------------------------------------------------------
   Cuatro cifras del mismo tamaño no dicen cuál importa. Acá importa una —la
   plata, que decide todo lo demás— así que se dice grande y una vez, y los
   otros tres datos pasan a ser el renglón que un secretario diría al
   entregarla. Es la misma voz de marcador que usa el resto del juego para el
   número que se lee de lejos.
   ========================================================================== */
.oficina {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-row);
  border-radius: var(--r-md);
}
.oficina__plata {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin: 0;
}
.oficina__cifra {
  font-size: var(--fs-2xl);
  font-weight: 800;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.oficina__linea {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.oficina__linea strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* LA BARRA DE GASTO, leída de la card de Contratación de FM26 —cada línea de
   presupuesto lleva a la derecha una barra sombreada con lo gastado sobre lo
   disponible—. Acá va debajo y no al costado: la cifra de la caja es la voz de
   marcador de esta tarjeta y una barra a su lado le pelea el renglón.

   Tres píxeles de alto y sin rótulo propio: no es un medidor que se consulta,
   es el trazo que dice de un vistazo si queda mucho o poco. El pie de abajo
   pone las dos cifras, que es donde se leen. */
.gasto { display: grid; gap: var(--sp-3); }
.gasto__barra {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  overflow: hidden;
}
/* NEUTRA, y esto es la Regla del Dedo. La primera versión salió en `--accent` y
   estaba mal: el violeta es de lo que responde al dedo y nada más, y una barra
   de gasto no se toca. Va en `--text-muted`, que es lo que usa `.barra--ancha`
   —la barra de cantidad del resto del juego— cuando el dato no tiene banda.

   Y NO SE PONE ÁMBAR AL LLENARSE, que fue lo siguiente que se pensó: gastar el
   presupuesto es lo que hay que hacer con el presupuesto. Teñir la barra al 80 %
   sería el juego opinando que gastar está mal, y no opina eso — la tarjeta de al
   lado avisa de lo contrario, de la caja que se pierde sin usar. */
.gasto__lleno {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-muted);
}
.gasto__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.gasto__pie strong { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   LA FILA DE UN CONTRATO QUE SE ACABA
   --------------------------------------------------------------------------
   Dos renglones: quién arriba, y debajo las cuatro cosas que se preguntan
   antes de sentarse —cuándo se le termina, cuánto pide, qué tolera y qué
   fracción de su propio precio cuesta conservarlo—. En un solo renglón no
   entran, y en una tabla de seis columnas se leerían de arriba abajo cuando lo
   que se compara es un futbolista contra el siguiente, no un dato contra otro.
   ========================================================================== */
.contrato {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .contrato:hover { background: var(--bg-hover); }
}
/* QUIÉN ES: el nombre y, debajo, la edad y el puesto escrito. Es el segundo
   renglón de las dos pastillas apiladas de FM26 sin las pastillas —catorce
   renglones con dos rellenos cada uno le ganarían al nivel y a la cifra, que es
   lo que se mira—. El sub va un escalón más abajo en tamaño y en tinta: quien
   barre la pila lee apellidos, y quien se detiene en uno lee la edad. */
.contrato__quien { display: grid; min-width: 0; gap: 1px; }
.contrato__nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.contrato__sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
/* El que se va en junio lleva la marca en el borde del renglón y no en el
   fondo: el fondo ya lo usa el hover, y dos capas de color en la misma caja se
   pelean. */
/* Y la de la palabra dada iba en `var(--amber)`, que NO EXISTE: la familia son
   `--amber-300/400/500` y el token con significado es `--warn`. Un `box-shadow`
   con una variable que no está es una declaración inválida y se descarta
   ENTERA, así que el renglón prometido no llevaba ninguna marca — y si además
   era urgente, se quedaba con la banda roja de arriba, que dice otra cosa. */
.contrato--urge { box-shadow: inset 2px 0 0 var(--danger); }
.contrato--prometida { box-shadow: inset 2px 0 0 var(--warn); }

.contrato__pie {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding-left: 2.6rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.contrato__pie strong { color: var(--text-secondary); }
.contrato__cuando[data-band='bad'] { color: var(--danger); }

/* EL RELOJ. DOS estados y no los tres que parecía: se va en junio, o le queda
   un año. El verde de FM26 —«le queda tiempo»— no puede ocurrir acá, porque la
   pila sólo trae contratos de un año o menos; está escrito en el guion, al lado
   de la marca. Se pinta el ICONO y no el texto:
   el texto ya dice la fecha y pintarlo entero de verde convertiría una fila
   tranquila en un aviso. La arcilla del urgente sigue viniendo de `data-band`,
   que además tiñe la palabra — ahí sí, porque ahí sí es un aviso. */
.contrato__cuando { display: inline-flex; align-items: center; gap: var(--sp-2); }
.contrato__cuando[data-reloj='uno'] .i { color: var(--warn); }
.contrato__cuando[data-reloj='ya'] .i { color: var(--danger); }
/* Lo que tolera, con la misma banda que la mesa: verde el que firma lo que le
   pongas, ámbar el que escucha con límites, arcilla el que no se deja
   encerrar. La palabra va siempre, que es la regla del número al lado. */
.contrato__pret[data-banda='si'] { color: var(--good); }
.contrato__pret[data-banda='quiza'] { color: var(--warn); }
.contrato__pret[data-banda='no'] { color: var(--danger); }
.contrato__razon[data-band='good'] { color: var(--good); }
.contrato__razon[data-band='ok'] { color: var(--warn); }
.contrato__razon[data-band='bad'] { color: var(--danger); }

/* --------------------------------------------------------------------------
   LOS PASES DEL MUNDO
   --------------------------------------------------------------------------
   La pantalla nueva del área —`pases.html`— y sus estilos viven acá y no en una
   hoja propia por lo mismo que el resto: ésta es la hoja del mercado y esa
   pantalla ya la carga. Son cuatro reglas; una hoja nueva para cuatro reglas es
   un archivo más que mantener y otra petición que el navegador hace.

   LOS DOS MANDOS SON UNA FILA Y SE PARTEN SOLOS. En la compu la ventana y el
   país entran al lado del otro; en un teléfono el desplegable de países pide su
   renglón —los nombres largos no entran en media fila— y `wrap` lo baja sin que
   nadie tenga que medir el corte.
   -------------------------------------------------------------------------- */

/* EL ALTO LO MANDA EL `body` DE ESTA HOJA, y eso no es gratis para una
   pantalla que no es el mercado. Arriba de todo, `mercado.css` le pone al
   `body` el alto de la ventana y `overflow: hidden` —lo necesita la rejilla de
   dos columnas, que no scrollea la página sino cada columna— y `pases.html`
   carga esta hoja, así que se lo come. Sin estas tres reglas, la tabla de
   ciento cuarenta y ocho pases se dibujaba entera y el que la mira no podía
   llegar a la fila veinte: no había scroll en ningún lado.

   Es la misma solución que usa `.mercado__lista`: la página no scrollea, el
   contenedor de la tabla sí. Ver `[[las-clases-de-otra-pantalla]]` — un `body`
   de otra pantalla es lo más caro que se puede heredar. */
/* DOS COLUMNAS IGUALES, y la placa cruzando las dos.
   --------------------------------------------------------------------------
   Empezó con la lista ancha y un costado de 340 —la forma del resto del área—
   y acá esa forma estaba mal por una razón que sólo se ve con el mercado
   todavía sin correr: la caja de la izquierda quedaba siendo un rectángulo
   VACÍO del alto de la pantalla con una cabecera de columnas arriba, y la
   derecha, que era la que tenía las cuarenta filas, apretaba su título en dos
   renglones y cortaba los nombres largos.

   Las dos mitades de esta pantalla no son una lista y su contexto: son dos
   listas —lo que pasó y lo que va a pasar— y pesan lo mismo. Con la mitad de
   1.440 cada una, la de la derecha deja de cortar nada y la de la izquierda
   deja de ser un vacío que domina la pantalla.

   La placa va en su propia fila y cruza las dos columnas: es la noticia de la
   pantalla y no de una de sus mitades. */
.pases {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  /* NO SON EXACTAMENTE IGUALES: la tabla pide seis columnas —dos de ellas con
     nombre de club— y la lista, cuatro. Medido a 1.440 con las dos al 50 %: la
     tabla necesitaba 1.022 px y tenía 631, así que «Llega a» quedaba cortada a
     mitad del nombre. Con 1,35 contra 1 la tabla respira y la lista sigue
     entrando sin partir una línea. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

/* CADA UNA EN SU FILA, DICHO A MANO, y no por el orden en que están escritas.
   La placa se ESCONDE cuando el mercado todavía no corrió —`hidden`— y un
   elemento escondido no genera caja: el acomodado automático del grid las
   corría a todas una fila para arriba, así que las dos tarjetas caían en la
   fila `auto` de la placa y se quedaban con 136 px de los 563 que tenían
   disponibles. Con la fila declarada, esconder la placa deja su fila en cero y
   las dos cajas siguen llevándose el alto. */
.pases > .placa { grid-column: 1 / -1; grid-row: 1; }
.pases__lista { grid-row: 2; }
.pases__lado { grid-row: 2; }

.pases__lista { min-height: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.pases .table-scroll { flex: 1 1 0; min-height: 0; overflow: auto; }

/* El costado es su tarjeta y lo que se desplaza es la lista de adentro: los
   clubes que salen al mercado son ciento cincuenta en un país grande. */
.pases__lado { min-height: 0; display: flex; }
.pases__resumen-caja { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
/* SIN SCROLLER PROPIO (21/9/2026). Tenía `flex: 1 1 0` con `overflow-y: auto`
   y `overscroll-behavior: contain`, y escondía el QUINTO de sus cinco
   rankings: medido, la caja en 833 px con 932 de contenido y «Dónde se movió
   más plata» entero afuera. Cinco bloques iguales y uno invisible salvo que
   descubras que esa caja rueda — y `contain` hacía además que la rueda no
   pasara a la página, o sea que encima de ese panel no se movía nada.

   Son noventa y nueve píxeles. No hay nada que ganar escondiéndolos: la
   página se baja desde hoy, y un resumen que oculta una de sus cinco partes no
   es un resumen. */
.pases__resumen-caja .resumen-mercado { flex: 0 0 auto; }

/* LA VENTANA, Y NADA MÁS. Acá había una pastilla con un desplegable de países
   —el mando de la pantalla— y se fue con él: lo que queda es el segmentado del
   sistema, que no se estira porque en una columna flex todo hijo se estira, y
   una cápsula de dos botones de novecientos píxeles de ancho no es un control,
   es una barra. */
.pases .segmented { align-self: flex-start; }

/* ══ EL RENGLÓN QUE PARTE LA TABLA EN DOS ══
   La tabla lleva lo hecho arriba y lo que se viene abajo, y entre los dos hace
   falta decir cuál es cuál. No es una cabecera de columnas —ésas ya están, y
   son las mismas para los dos bloques— sino el rótulo de una sección: va con el
   cuerpo y el tono de las etiquetas del sistema, pegajoso al desplazarse, para
   que el que baja por los mil cuatrocientos pases sepa siempre en cuál de los
   dos está parado. */
.pases__corte th {
  padding: var(--sp-6) var(--sp-3) var(--sp-2);
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* NO SE PEGA ARRIBA, aunque la tentación de un encabezado de sección es ésa: la
   cabecera de columnas de `.table-scroll` YA es `sticky` en `top: 0`, y dos
   pegajosos a la misma altura terminan uno tapando al otro —el de más abajo en
   el documento gana, así que el corte borraría los nombres de las columnas—.
   Lo que lo hace visible es el aire de arriba y la línea, que es como este
   juego separa sin gastar color. */
.pases__corte:not(:first-child) th { border-top: 1px solid var(--line); }

/* El rótulo y su cuenta, separados: qué bloque es, y cuántas filas tiene. */
.pases__corte th > span:first-child { margin-right: var(--sp-3); }
.pases__corte .label-frase { text-transform: none; letter-spacing: 0; color: var(--text-muted); }

/* ══ LA COLUMNA DE LA PLATA TIENE QUE ENTRAR ══
   La tabla se repartía sola y pedía 1.007 px en un hueco de 731: a 1.440 —el
   portátil más común— «Operación» quedaba ENTERA fuera de la caja, y con ella
   la única cifra por la que se lee un mercado. No se veía como un error sino
   como una tabla de cinco columnas, porque en un Mac la barra de desplazamiento
   horizontal no se dibuja hasta que alguien la empuja (ver `la-barra-oculta-es-de-mac`).

   Ensanchar la columna izquierda no alcanzaba: para los 1.007 px había que
   darle tres cuartos de la pantalla y dejar el resumen sin sitio para sus
   barras. Lo que sobra está adentro de la tabla: los dos nombres de club se
   llevaban 560 px entre los dos, pidiendo cada uno el ancho de «Borussia
   Mönchengladbach» aunque esa fila sea una de mil quinientas.

   Así que el reparto se declara en vez de negociarse. Las tres columnas de
   ancho fijo —puesto, nivel y operación— se quedan con lo suyo, y las tres de
   texto se reparten lo que sobra y cortan con puntos suspensivos, que es una
   verdad dicha a tiempo: «Borussia Mönchen…» se lee, y una columna que no está
   no se lee. */
.pases .data-table { table-layout: fixed; width: 100%; }
.pases .data-table thead th:nth-child(1) { width: 3.5rem; }
.pases .data-table thead th:nth-child(3) { width: 3.5rem; }
.pases .data-table thead th:nth-child(6) { width: 9.5rem; }

.pases .data-table td.u-txt,
.pases .team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El escudo pegado al nombre del club, como en toda celda que nombra a uno. El
   `min-width` es lo que deja que el nombre ceda: sin él, un `inline-flex` se
   planta en el ancho de su contenido y el recorte no llega nunca. */
.pases .team { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; max-width: 100%; }

/* TU CLUB EN LA TABLA DEL MUNDO. El naranja de pertenencia —el mismo con el que
   la tabla de posiciones y el sorteo dicen cuál de estas veinte filas sos vos—
   sobre las operaciones que hiciste. No es un estado ni un valor: dice de quién
   es la fila, que es la tercera clase de cosa que el color del sistema
   distingue. Y es lo que permite que tus pases convivan con los del resto en
   una sola lista en vez de tener tabla aparte. */
.pases tr[data-mio] td { color: var(--tuyo); }
.pases tr[data-mio] .team span { color: var(--tuyo); }

/* La operación, con la gramática de un portal de fichajes: el importe en cifra
   y lo que no es una compra dicho con su palabra, en cal. Un préstamo y un
   pase libre no son cifras cero: son otra clase de operación, y ponerles «US$
   0» los contaría como si algo hubiera costado nada. */
.u-operacion { white-space: nowrap; }
.op-monto { font-variant-numeric: tabular-nums; }
.op-tipo {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-tipo[data-op='libre'] { color: var(--warn); }
.u-cuando { color: var(--text-muted); white-space: nowrap; font-size: var(--fs-xs); }


/* --------------------------------------------------------------------------
   LA TIRA DE ARRIBA
   --------------------------------------------------------------------------
   Lo único de esta pantalla que no es una fila de lista, y por eso existe: un
   mercado tiene NOTICIAS y una tabla ordenada por precio las dice en sus
   primeras filas con el mismo cuerpo de letra que la número cuarenta. Eso no es
   jerarquía, es un listado.

   SON TRES Y NO UNA, desde el 13/9/2026. Con una sola pieza el ancho sobraba a
   ojo —un nombre, dos escudos y una cifra en 1.400 px— y lo que faltaba era
   justamente lo que un portal pone arriba de todo: la tira de rumores.

   Cada pieza va vestida con los colores del club que ficha, que es el recurso
   que la mesa de negociación y la bienvenida ya usan: `coloresDe()` deja
   `--club-fondo`, `--club-franja` y `--club-tinta` en el elemento, y la tinta
   viene como `var()` y no como hexadecimal, así que lo que pinta es literalmente
   el token.

   Y NO LLEVA DEGRADADO, aunque la tentación de un héroe es ésa. El sistema
   tiene UNO en todo el producto y es el botón que hace pasar el tiempo; un
   segundo lo dejaría de señalar. Lo que da la profundidad es el hairline del
   segundo color del club sobre el plano del primero — ver abajo.
   -------------------------------------------------------------------------- */

/* EL CONTENEDOR NO SE PINTA: sólo apila el rótulo y las tres piezas. El color
   es de cada pieza, porque cada una es de un club distinto. */
.placa { display: grid; gap: var(--sp-3); }

.placa__tira {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--sp-4);
}

.placa__pieza {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--club-fondo, var(--bg-raised));
  color: var(--club-tinta, var(--text-primary));
}

/* EL SEGUNDO COLOR DEL CLUB VA EN UN HAIRLINE, NO EN UNA FRANJA.
   --------------------------------------------------------------------------
   Acá había un `border-left: 4px` con el color de la franja, y estaba mal por
   dos reglas de este proyecto y no por gusto: «hairlines en vez de cajas y
   sombras, un solo píxel de línea», y sobre todo «el color se gasta en RELLENO
   pleno, no en línea ni en subrayado». El relleno ya lo hace el fondo del club,
   que es lo que dice de quién es la pieza; la franja de cuatro píxeles no
   agregaba identidad, agregaba un borde de color.

   Lo que hace falta de verdad es que Boca se vea azul Y ORO —el segundo color
   es la mitad de una identidad— y eso lo dice una línea de un píxel arriba, que
   es el grosor con el que este juego dibuja todo lo demás. */
.placa__pieza { border-top: 1px solid var(--club-franja, var(--line-strong)); }

/* El rótulo dice qué clase de noticia es y va UNA vez, afuera de las piezas:
   repetido en cada una sería el mismo renglón dicho tres veces. En cal del
   sistema —no del club— porque ya no vive sobre ningún color. */
.placa__rotulo {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.placa__quien { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }

/* El nombre es lo más grande de la pantalla después del título del panel: es la
   noticia. Va con el ancho estrecho de la cara de display —el mismo que el
   marcador y la portada— que es lo que hace que un nombre largo entre sin
   bajar de cuerpo. */
.placa__nombre {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.15;
  font-stretch: 88%;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SIN OPACIDAD, Y NO ES UNA PREFERENCIA: ACÁ NINGUNA ES SEGURA.
   --------------------------------------------------------------------------
   Este renglón vive dentro de `.placa__pieza`, que se viste del club —`color:
   var(--club-tinta)` sobre `background: var(--club-fondo)`—, y esa tinta la
   elige `legible()`, que devuelve EN CUANTO alcanza `CONTRASTE_MINIMO = 4.5`.
   Eso **no** quiere decir que todos los clubes queden al filo —Tigre da 8,89 y
   aguanta— pero sí que el PISO del sistema es 4,50:1 exacto, medido sobre los
   1.673: hay clubes sin un punto de margen, así que **no existe un alfa seguro**.
   Cuántos caen a cada uno ya no se lee del código y hay que correrlo.

   Medido con `herramientas/opacidad-sobre-club.mjs`, que es lo que hace que
   esto no sea una opinión:

       alfa    clubes bajo 4,5:1     (de 1.673, y a tinta plena son CERO)
       0,99      45
       0,95     277
       0,90     423
       0,85     503
       0,78     646   ← lo que había acá

   El peor era Defensores de Cambaceres: 3,07:1 con la opacidad puesta, 4,54 sin
   ella. No hay un alfa que se salve, así que la jerarquía la hacen el CUERPO y
   el peso —`--fs-xs` contra el `--fs-md` en 700 del nombre—, que no le deben
   nada al contraste. Lo encontró el barrido de contraste el día que aprendió a
   componer la opacidad: hasta entonces medía el color declarado y esta pantalla
   salía «limpia, cero hallazgos». */
.placa__sub { font-size: var(--fs-xs); white-space: nowrap; }

/* La cifra cierra la pieza por la derecha y no compite con el nombre: la
   noticia es QUIÉN, y cuánto sale es la consecuencia. */
.placa__cifra {
  flex: 0 0 auto;
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Los escudos de la tira son los grandes de la pantalla: un club se reconoce
   por su escudo antes que por su nombre, y acá hay sitio para que se vea. Con
   tres piezas en la misma fila bajan de 44 a 34, que es lo que deja entrar el
   nombre y la cifra sin recortar. */
.placa .crest { width: 34px; height: 34px; --halo: 0.61px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   EL MERCADO EN UNA VENTANA ANGOSTA
   --------------------------------------------------------------------------
   Debajo de 900 las dos columnas se sueltan en una, como el resto del área: la
   tabla de pases arriba y el resumen del mercado debajo, cada uno con su alto.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* La página vuelve a desplazarse: con una columna el alto de la ventana deja
     de alcanzar, y esconderlo escondería contenido. */
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  .pases {
    /* `minmax(0, 1fr)` Y NO `1fr`: un `1fr` pelado tiene mínimo `auto`, así que
       la columna crece hasta lo que mida la tabla —que en un teléfono pide
       novecientos y pico de píxeles— y la pantalla entera se va de ancho en vez
       de que se desplace la tabla adentro de su caja. El reventón se veía en la
       tira de arriba, que cruza las dos columnas y salía del doble de ancha que
       el teléfono. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  /* Y LAS DOS CAJAS VUELVEN A APILARSE, que con una sola columna no pasaba
     solo: las dos tienen `grid-row: 2` dicho a mano para la ventana ancha, y
     dos elementos en la MISMA fila de una rejilla de una columna no se
     superponen — el acomodado automático le inventa una segunda columna a la
     segunda. El resultado era un teléfono con la pantalla el doble de ancha
     que el teléfono y el resumen colgando afuera, a la derecha. */
  .pases__lista, .pases__lado { grid-row: auto; grid-column: 1; }

  .pases__lista, .pases__lado, .pases__resumen-caja { overflow: visible; min-height: auto; }
  .pases .table-scroll { flex: 0 0 auto; }

  /* EL REPARTO DECLARADO ES DE LA VENTANA ANCHA. En un teléfono, repartir
     seiscientos píxeles entre tres columnas de texto deja «Manchester Unit…»
     en «M…» y la tabla deja de decir nada. Acá la tabla vuelve a pedir lo que
     necesita y lo que se desplaza es ella, de costado, adentro de su caja:
     un nombre cortado en la primera letra no se arregla con un puntito. */
  .pases .data-table { table-layout: auto; width: auto; }
  .pases .data-table td.u-txt,
  .pases .team span { overflow: visible; text-overflow: clip; }
  /* Ya no hay scroller que apagar acá: la regla de arriba se lo sacó para
     todas las ventanas. Se deja la línea vacía fuera. */
}

/* --------------------------------------------------------------------------
   EL MERCADO EN NÚMEROS
   --------------------------------------------------------------------------
   La mitad derecha. Dos cifras arriba, un renglón que las desarma y dos
   rankings con su barra: cuánto se movió, quiénes gastaron y dónde.

   LAS CIFRAS SON EL CONTENIDO Y NO UN ADORNO, y por eso van grandes: esta
   tarjeta contesta una pregunta del CONJUNTO —qué tan grande fue este mercado—
   que la tabla de al lado no puede contestar, porque una lista ordenada por
   precio muestra sus filas de arriba y nunca el total. Es la única superficie
   del juego donde un número grande es el dato y no la decoración de un dato.
   -------------------------------------------------------------------------- */

.resumen-mercado { display: grid; gap: var(--sp-5); align-content: start; }

.cifras { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); }
.cifras__par { display: grid; gap: 1px; margin: 0; }
.cifras__n {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.1;
  font-stretch: 88%;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.ranking { display: grid; gap: var(--sp-2); }
.ranking__titulo { color: var(--text-muted); margin-bottom: var(--sp-1); }

/* Cuatro columnas: escudo, nombre, barra y monto. El nombre cede y la barra
   toma lo que sobra, que es lo que hace que las cinco barras se comparen entre
   sí y no cada una con su propio renglón. */
.ranking__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 9rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 26px;
}
.ranking__fila .crest { width: 20px; height: 20px; --halo: 0.36px; }

.ranking__quien {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La barra va contra el PRIMERO del ranking y no contra el total: lo que la
   lista contesta es quién gastó más que quién. Medida contra la suma de los
   sesenta países darían cinco barras de tres píxeles. */
.ranking__barra {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--ink-800);
  overflow: hidden;
  position: relative;
}
.ranking__barra::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--parte) * 1%);
  border-radius: var(--r-pill);
  background: var(--accent);
  opacity: 0.7;
}

.ranking__monto {
  font-size: var(--fs-xs);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ══ LA SILUETA DEL MERCADO, EN COLUMNAS ══
   El único gráfico del juego que no es una barra en un renglón, y existe porque
   la pregunta que contesta no cabe en una lista: cómo se REPARTEN las
   operaciones por tamaño. Mil quinientos pases de un palo y medio no son el
   mismo mercado que trescientos de veinte, y las dos cifras de arriba —cuánto y
   cuántos— dan el mismo número en los dos casos.

   Una serie sola. Ni leyenda ni color que identifique nada: el violeta es el
   mismo relleno de la barra del ranking, diciendo lo mismo que ahí —tamaño— y
   la cuenta va escrita ARRIBA de cada columna, que es lo que la deja leerse sin
   distinguir un tono.

   Las columnas se apoyan en una línea de base compartida y van redondeadas
   arriba nada más: una columna redondeada abajo flota, y lo que se está
   comparando es exactamente dónde empieza cada una. */
.columnas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-2);
}

.columnas__col { display: grid; gap: var(--sp-1); justify-items: center; }

.columnas__n {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* EL ALTO ES EL DATO. `--parte` llega en porcentaje del más alto y se lleva los
   76 px del riel; el mínimo de 3 px es para que la banda de dos operaciones
   siga siendo una columna y no un renglón vacío — una columna de cero píxeles
   se lee como una banda que no existe, y existe. */
.columnas__barra {
  width: 100%;
  height: max(3px, calc(var(--parte) * 0.76px));
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--accent);
  opacity: 0.7;
}

/* El rótulo de abajo es el eje: en cal, y más chico que la cifra, porque lo que
   se compara son las alturas y no las palabras. */
.columnas__rot {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  white-space: nowrap;
  margin-top: var(--sp-1);
}

/* UN RUMOR NO SE VE COMO UN HECHO. La fila de lo que todavía no pasó va en cal
   —el mismo tono con el que esta interfaz dice «esto es secundario»— y su
   operación lleva la palabra en vez de la cifra sola. Mezclar un pase cerrado y
   una intención con la misma tipografía sería la peor forma de llenar una
   pantalla: el DT tomaría por hecho algo que todavía se puede caer. */
.pases tr[data-futuro] td { color: var(--text-muted); }
.op-tipo[data-op='futuro'] { color: var(--text-secondary); text-transform: none; letter-spacing: 0; }

/* La fila que pide más pases. El botón va al PRINCIPIO y no al centro: en el
   teléfono la tabla mide 724 de ancho y rueda de costado, así que centrado
   quedaba fuera de la vista (medido: centrado caía en el píxel 362 de 375). */
.pases__mas td { padding: var(--sp-5) var(--sp-4); text-align: start; }
.pases__mas-boton { display: inline-flex; align-items: baseline; gap: var(--sp-3); }