/* ══════════════════════════════════════════════════════════════════
   COP · LA TARJETA DE VIDRIERA  (mudada el 24/08/2026)
   ------------------------------------------------------------------
   Nació en `grupos.html` como la tarjeta de un grupo de amigos. Franco,
   24/08/2026: *«en Spin & Go las tarjetas de juego tienen que tener el
   mismo diseño que tienen las tarjetas de grupos en la competencia de
   grupo de amigos, manteniendo el contenido y funcionalidad de los
   spins»*.

   ⚠⚠ SE MUDÓ, NO SE COPIÓ. Es la regla que más caro salió en este
   proyecto: la semana pasada hubo que unificar CUATRO tarjetas de
   historial que habían nacido copiando una, y cada una se había ido
   desviando por su lado — Franco pidió un cambio y solo apareció en una
   de las cuatro. Si Spin & Go tuviera su propia copia de este archivo,
   dentro de dos semanas serían dos tarjetas parecidas y no la misma.
   Ahora las dos pantallas leen ESTO, y un cambio acá se ve en las dos.

   ⚠ LO QUE NO SE MUDÓ, A PROPÓSITO: `.gr-main`, `.gr-h1`, `.gr-buscar`,
   `.gr-acciones`, `.gr-mios` y `.gr-fila` siguen en `grupos.html`. Son
   la PANTALLA de grupos, no la tarjeta. Traerlos también habría hecho
   que Spin & Go cargara el diseño de un buscador que no tiene.

   ⚠ QUIÉN LO CARGA: `grupos.html`, `equipos.html` y `spin.html`. Si lo
   carga una pantalla más, subile el `?v=` en TODAS. Un archivo, una URL.

   ⚠⚠ `equipos.html` SE SUMÓ EL 27/08/2026, Y NO PORQUE FALTARA: tenía
   una COPIA de este archivo pegada adentro de su `<style>` —3.713
   caracteres idénticos, con los mismos comentarios, cambiando sólo la
   palabra «grupos» por «equipos»—. La copia se borró y la pantalla pasó
   a enlazar esto. Era la misma trampa de las cuatro tarjetas de
   historial: mientras nadie pide un cambio parecen la misma pieza.
   ══════════════════════════════════════════════════════════════════ */

/* ⚠⚠ LA GRILLA PASÓ DE DOS COLUMNAS A UNA (Franco, 01/09/2026, tanda
   BF: *«una tarjeta por fila, a lo ancho»*): la tarjeta nueva es
   HORIZONTAL —camiseta · nombre · trofeos— y dos por fila la
   aplastarían de vuelta. `align-items:stretch` se queda: sigue
   igualando las filas. */
.gr-grid{
  display:grid;grid-template-columns:1fr;gap:.7rem;
  align-items:stretch;
}

.gr-card{
  background:var(--s2, #161b25);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-card, 14px);
  overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
  transition:border-color .2s,transform .15s;
  height:100%;
  /* ⚠ La tarjeta puede ser un <article> (grupos) o un <button>
     (Spin & Go). Estas tres líneas son las que hacen que un <button> no
     traiga su propio tipo de letra, su centrado ni su alineación del
     texto — sin ellas, la misma tarjeta se veía distinta en cada
     pantalla y no era el CSS de la tarjeta, era el del navegador. */
  font:inherit;text-align:left;color:inherit;
}
.gr-card:hover{border-color:rgba(255,255,255,.16)}
.gr-card:active{transform:scale(.99)}

/* la banda de arriba: el color del club (o el del grupo) con su camiseta */
.gr-band{position:relative;height:96px;display:grid;place-items:center;
  background:var(--gc,#1b1b1b) center/cover no-repeat}

/* ── LA FOTO DE CANCHA (Franco, 28/08/2026) ──────────────────────────
   *«en donde dice novatos, sala pro, etc tiene que tener imágenes de
   fútbol random»*. Los grupos temáticos no tienen club, así que hasta
   hoy su banda era un rectángulo de color liso.

   ⚠⚠ LA FOTO Y EL VELO VAN EN LA MISMA DECLARACIÓN, no en un
   `::after`. `background-image` acepta capas: arriba el degradé negro
   —que es el velo— y debajo la foto. Con un pseudo-elemento habría que
   ordenarlo además contra la camiseta y las iniciales, que ya viven
   adentro de la banda.
   ⚠ EL VELO NO ES DECORACIÓN: encima va texto blanco. Sobre una tribuna
   iluminada, las iniciales desaparecen.
   ⚠⚠ Y SI LA FOTO NO CARGA —404, red caída, un archivo que alguien
   borró— queda el `background-color`, o sea el color del grupo: la
   tarjeta no se rompe, se pone lisa. Por eso el color se sigue
   declarando siempre en vez de reemplazarlo por la foto.
   ⚠ CUÁL FOTO LE TOCA A CADA GRUPO NO SE DECIDE ACÁ: sale de
   `cop-foto-grupo.js`, el único lugar con la lista de archivos. Esta
   hoja recibe la que sea en `--gf` y no sabe cuántas hay. */
.gr-band.foto{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.62) 100%),
    var(--gf);
}
/* la camiseta, por encima de la foto */
.gr-band > *{position:relative;z-index:1}
/* ⚠ `contain` Y SIN CAJA: la camiseta es una figura con hombros y
   mangas; recortada en un círculo queda una mancha de color que no se
   reconoce. Es la misma decisión que en `.mc-crest` y en `.rk-mini`. */
.gr-band img{width:62px;height:62px;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
/* ⚠ ACÁ VIVÍA `.gr-ini`, las dos iniciales sobre el banner («FU» para
   Fútbol Argentino). Se fueron el 31/08/2026 a pedido de Franco, y la
   regla se va con ellas: una clase que ya no dibuja nada es una
   invitación a volver a usarla sin saber por qué se sacó. El nombre
   completo del grupo se lee entero, dos renglones más abajo, en
   `.gr-nom`. */

.gr-cuerpo{padding:var(--gap-md, .7rem) var(--gap-md, .7rem) var(--gap-md, .7rem);display:flex;flex-direction:column;gap:.15rem;flex:1}

/* ⚠⚠ TODAS LAS TARJETAS TERMINAN A LA MISMA ALTURA (Franco, 23/08/2026):
   *«las tarjetas de grupos deben tener todas la misma alineación y
   tamaño… si un grupo tiene una línea menos de contenido en la
   descripción, se deje ese espacio y se alineen los botones de
   unirse/entrar siempre a la misma altura»*.

   Se resuelve con TRES piezas que trabajan juntas — y las tres hacen
   falta, sacando cualquiera se desalinea de nuevo:

     1. cada bloque de texto tiene un ALTO FIJO en líneas
        (`min-height` = líneas × interlineado), así el hueco queda
        reservado aunque el texto no llegue;
     2. lo que sobra se recorta con puntos suspensivos
        (`-webkit-line-clamp`), así un nombre largo no empuja;
     3. el botón se pega abajo con `margin-top:auto`, que es lo que lo
        ancla al piso de la tarjeta en vez de dejarlo colgando del
        último renglón de texto.

   ⚠ EL `min-height` SE ESCRIBE CON LAS MISMAS VARIABLES QUE EL
   `line-height`. Poner «34px» funcionaría hoy y se rompería el día que
   alguien toque el tamaño de letra, sin que nadie lo relacione. */
/* ⚠⚠ CENTRADO (Franco, 30/08/2026): *«poner el contenido de la info
   centrado: nombre del grupo centrado, cantidad de miembros centrado,
   abajo de eso posición del usuario en el grupo centrado»*.
   El centrado va en el CUERPO y no en cada renglón: escrito renglón por
   renglón, el que se agregue mañana nace desalineado y nadie lo
   relaciona con esta regla. */
.gr-cuerpo{text-align:center}
.gr-nom{
  font-weight:700;font-size:var(--fs-base, 1rem);color:var(--primary,#0c95eb);
  --gn-lh:1.2;line-height:var(--gn-lh);
  min-height:calc(2 * var(--gn-lh) * .95rem);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.gr-meta{font-size:var(--fs-sm, .8rem);color:var(--text-dim,#8b93a7);font-weight:600;line-height:1.3}

/* ⚠ ACÁ VIVÍA `.gr-pos` DE LA TARJETA VERTICAL (un renglón reservado
   para el puesto) Y SE BORRÓ EL 25/09/2026: la tarjeta vertical ya no lo
   dibujaba. El nombre lo toma la columna nueva de la tarjeta horizontal,
   abajo, junto a `.gr-trof`. */
.gr-desc{
  font-size:var(--fs-xs, .72rem);color:var(--text-faint,#6b7180);margin-top:.15rem;
  --gd-lh:1.35;line-height:var(--gd-lh);
  min-height:calc(2 * var(--gd-lh) * .75rem);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

/* el botón del pie de la tarjeta */
/* ⚠⚠ EL BOTÓN LLEVA EL BORDE DEGRADADO (Franco, 28/08/2026): *«los
   botones de unirme al grupo tienen que ser violeta y tener el mismo
   diseño que los de jugar ahora, el del degradé»*.
   El color NO se escribe acá: sale de `--gr-rgb`, que cada pantalla
   declara —violeta en Liga de Amigos, dorado en Equipos Competitivos—.
   Esta hoja la comparten las dos y Spin & Go: un color fijo acá habría
   obligado a una tercera copia.
   ⚠ SE FUERON `background`, `border` y el `:hover` que aclaraba el
   fondo: los tres le ganaban al degradé o quedaban muertos debajo. */
.gr-btn:active{transform:scale(.98)}
/* ⚠ `margin-top:auto` Y NO UN MARGEN FIJO: el botón se va al piso de la
   tarjeta. Con `.7rem` quedaba pegado al último renglón de texto, así
   que una descripción de una línea lo subía 16 px respecto del de al
   lado. */
/* ⚠⚠ ACÁ EL BOTÓN DE «ENTRAR» SE PONÍA VERDE Y SE FUE (Franco,
   30/08/2026): *«todos los botones de unirme o entrar tienen que estar
   en violeta, no en verde, ya que el color de la competencia es el
   violeta… el mismo cambio para equipos competitivos, pero con su color
   característico, el dorado»*.
   Era un `34,197,94` escrito a mano —ni siquiera el token `--ok`— que
   le ganaba a `--gr-rgb` y hacía que la mitad de las tarjetas de «mis
   grupos» se vieran de otro color que la competencia.
   ⚠ SE BORRA LA REGLA ENTERA en vez de pisarla con el violeta: una
   regla que pone un color y otra que lo saca es la forma de que el
   verde vuelva solo el día que alguien reordene la hoja. La clase
   `dentro` SIGUE EXISTIENDO —la pone la tarjeta y cambia el texto a
   «Entrar»—, lo que ya no hace es cambiar el color.
   */

/* ⚠ EL BOTÓN DE ADENTRO DE UNA TARJETA QUE YA ES UN BOTÓN. En Spin & Go
   la tarjeta entera es el objetivo del toque, así que el pie no puede
   ser otro `<button>` (un botón dentro de otro es HTML inválido y el
   navegador desarma el marcado). Va como `<span>` con el mismo diseño:
   se ve igual y el toque lo cobra la tarjeta. */
.gr-card span.gr-btn{pointer-events:none}

/* ── «MIS GRUPOS», UNO POR FILA ──────────────────────────────────────
   ⚠⚠ ACÁ VIVÍA EL CARRUSEL HORIZONTAL del 28/08/2026 y SE FUE con el
   rediseño de la tanda BF (Franco, 01/09/2026: *«una tarjeta por fila,
   a lo ancho»*): una tarjeta horizontal de ancho completo no puede
   deslizarse de costado — el carrusel era la forma de apilar tarjetas
   VERTICALES angostas, y esas ya no existen en la vidriera. La clase se
   conserva porque el marcado de las dos pantallas la usa; ahora apila. */
.gr-carrusel{display:flex;flex-direction:column;gap:.7rem}

/* ══ LA TARJETA HORIZONTAL (Franco, 01/09/2026, tanda BF) ═══════════
   La captura de referencia (la lista de clubes de tenis): la camiseta a
   la IZQUIERDA con el recorte diagonal, dos renglones a la altura de la
   camiseta —nombre, y tipo · miembros— y los trofeos acumulados a la
   derecha. `.gr-hor` es un MODIFICADOR sobre `.gr-card`: la base
   vertical sigue viva porque el historial de Mega Spin la usa tal cual
   (dos por fila, banda arriba).
   ⚠ EL RECORTE ES `clip-path`, NO UNA IMAGEN ROTADA: corta la columna
   del arte en diagonal (borde derecho inclinado) y el fondo que asoma
   es el de la tarjeta — el recorte se ve igual con camiseta, con foto o
   con color liso.
   ⚠ LA ALTURA LA PONE `min-height` y la columna del arte se ESTIRA
   (align-items:stretch): «dos líneas de la altura de la camiseta» es la
   promesa — la info se centra verticalmente contra esa columna. */
.gr-hor{flex-direction:row;align-items:stretch;height:auto;min-height:76px;
  gap:var(--gap-lg, 1rem);padding-right:var(--gap-lg, 1rem);
  /* ⚠⚠ SIN CAJA (Franco, 02/09/2026, tercera corrección de la vidriera:
     *«las tarjetas no tienen que tener ni ese borde ni ese color de
     fondo: eliminá el borde y poné el color de fondo de la página… esto
     da una sensación de tarjeta pero sin bordes ni color diferente»* —
     lo pidió para Mega Spin, Equipos, hinchadas y las dos tabs de
     Grupos, o sea TODA `.gr-hor`): el fondo var(--s2, #161b25) y el borde de la
     base `.gr-card` se ANULAN acá — la fila apoya directo sobre el
     fondo de la página y lo que «hace tarjeta» es el bloque del arte a
     la izquierda (en Mega Spin, el color del nivel, que queda ALINEADO
     con el contenido de la página porque sin borde ya no hay ningún
     corrimiento). La base vertical (historial de Mega Spin) conserva su
     caja. `transparent` y no un color fijo: cada página pinta su fondo. */
  background:transparent;border:none}
/* ⚠ SIN COLOR DE FONDO (Franco, 01/09/2026, segunda corrección de la
   tanda BF: *«sacando el fondo del color de la izquierda… sin ese color
   verde ahí»*): el respaldo es TRANSPARENTE — la camiseta se apoya en
   la caja de la tarjeta. `--gc` queda como perilla porque el lobby de
   Mega Spin SÍ pinta su color de nivel (lo pasa inline y Franco lo
   aprobó); las vidrieras de grupos/equipos ya no lo emiten. */
/* ⚠⚠ LA CAMISETA SE APOYA EN EL MARGEN IZQUIERDO (Franco, 21/09/2026):
   *«las camisetas de los grupos alineadas con el borde izquierdo: la
   parte izquierda de la camiseta tiene que estar en el borde izquierdo,
   bajo la alineación con sus márgenes fijos»*.
   Medido en el sitio publicado, a 375 px: la fila arranca en 16 —el
   margen de la app— y el HUECO de la camiseta también, pero el dibujo
   quedaba centrado adentro de sus 92 px y empezaba en 35. O sea 19 px
   de sangría que ninguna otra pieza de la app tiene.
   ⚠ SE MUEVE EL DIBUJO, NO EL HUECO: el hueco mide 92 porque de eso
   depende dónde arranca el nombre, y correrlo movería la fila entera. */
.gr-cam{position:relative;flex:0 0 92px;min-width:0;display:grid;place-items:center start;
  background:var(--gc,transparent) center/cover no-repeat;
  clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%)}
/* ⚠⚠ ACÁ VIVÍA `.gr-cam.foto`, LA FOTO DE CANCHA, Y SE BORRÓ
   (12/09/2026). Era el respaldo cuando el grupo no tiene club, y es la
   «imagen azul abstracta» que Franco mandó sacar: desde hoy el respaldo
   es SIEMPRE una camiseta asignada del catálogo, así que ningún
   llamador puede pedir esta clase. Se borra la regla, no se deja
   dormida: una regla que dibuja algo que ya nadie pide son diez líneas
   que el próximo lector tiene que descartar. La receta sigue viva en
   `.gr-band.foto`, que la usa el historial de Mega Spin. */
.gr-cam img{width:54px;height:54px;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
/* el logo Clash Coin del lobby de Mega Spin, en la misma columna */
.gr-cam .cop-ico{width:38px;height:38px;filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
.gr-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
  gap:.22rem;padding:.5rem 0;text-align:left}

/* ══ LOS TROFEOS, RENGLÓN A RENGLÓN CON EL TEXTO (Franco, 12/09/2026)
   *«alineá los trofeos y su cantidad con el bloque de texto del nombre,
   público-privado y miembros»*.

   ⚠⚠ DOS COLUMNAS SE ALINEAN DÁNDOLES LA MISMA GRILLA DE FILAS, NO
   CENTRANDO CADA UNA POR SU LADO. Es la lección de `cop-fila-sala.css`
   (08/09): el bloque de texto medía ~44 px y el de trofeos ~50 —el
   trofeo es un dibujo de 19 px y el número tiene otro cuerpo que el
   nombre—, y con las dos centradas verticalmente el logo del trofeo
   caía ENTRE los dos renglones. La intención del 01/09 ya era «el logo
   en el renglón del nombre y la cantidad en el de tipo·miembros»; lo
   que faltaba era imponerlo.

   Ahora las dos columnas son la MISMA grilla de dos filas, con el mismo
   `row-gap` que el aire de la info: cada celda centra lo suyo, así que
   el trofeo cae sobre el renglón del nombre y el número sobre el de
   tipo·miembros por construcción. Si mañana cambia el cuerpo del
   nombre, se mueven los dos lados juntos.
   ⚠ SÓLO EN `.gr-hor`: la tarjeta VERTICAL (historial de Mega Spin)
   tiene otro reparto y no la pidió nadie.
   ⚠ `align-content:center` mantiene el bloque centrado en la fila
   cuando la fila es más alta que sus dos renglones. */
.gr-hor{--gr-fila:1.35rem;--gr-gap:.22rem}
.gr-hor > .gr-info,
.gr-hor > .gr-trof{
  display:grid;
  grid-template-rows:var(--gr-fila) var(--gr-fila);
  row-gap:var(--gr-gap);
  align-content:center;
}
.gr-hor > .gr-info{grid-template-columns:minmax(0,1fr)}
.gr-hor > .gr-info > *{align-self:center}
.gr-hor > .gr-trof > *{align-self:center;justify-self:center}
/* ⚠ un renglón cada uno, con puntos suspensivos: en horizontal el
   nombre no puede empujar a los trofeos fuera de la fila. El
   `min-height` de dos renglones de la tarjeta vertical acá se ANULA:
   era el que igualaba los botones que ya no existen. */
.gr-hor .gr-nom{color:#fff;font-size:var(--fs-base, 1rem);min-height:0;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-hor .gr-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ⚠ EN DOS FILAS (Franco, 01/09/2026, segunda corrección: *«los
   trofeos arriba de su cantidad, la continuación de las dos filas: la
   del nombre con el logo del trofeo, y la de abajo con público/privado
   y miembros más la cantidad»*): el logo arriba y el número abajo,
   centrados en su columna, con el mismo aire que separa los dos
   renglones de la info. Iban lado a lado. */
/* ⚠⚠ Y EL TROFEO LLEGA AL MARGEN DERECHO (Franco, mismo día: *«abrí
   apenas más los indicadores de miembros y ganados, que están más
   cerrados que el límite que respetamos»*). Medido: el bloque terminaba
   en 344 sobre una fila que termina en 359 — 15 px que la app no le saca
   a ningún otro contenido. El `padding-right` de la fila era el que los
   comía. */
.gr-hor{padding-right:0}
/* ══ MI PUESTO, A LA IZQUIERDA DE LOS TROFEOS (Franco, 25/09/2026) ═══
   La misma grilla de dos renglones que `.gr-trof`: el rótulo «Pos» cae
   en el renglón del nombre (donde está el trofeo) y el número en el de
   tipo·miembros (donde está la cantidad). Así los dos números se leen
   como un par. Sin caja: se apoya sobre el fondo, como todo en la fila.
   ⚠ `min-width` fijo: «3º» y «11º» ocupan lo mismo y los trofeos no
   bailan de una tarjeta a otra. */
.gr-hor > .gr-pos{
  display:grid;grid-template-rows:var(--gr-fila) var(--gr-fila);row-gap:var(--gr-gap);
  align-content:center;justify-items:center;flex:0 0 auto;min-width:2.3rem}
.gr-hor > .gr-pos > *{align-self:center}
.gr-pos small{font:800 .6rem/1 'Inter',sans-serif;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text-faint,#5a6275)}
.gr-pos b{font:800 .92rem/1 'Inter',sans-serif;color:#fff;font-variant-numeric:tabular-nums}
/* ⚠ CON EL PUESTO AL LADO, LA COLUMNA DE TROFEOS TIENE PISO DE ANCHO: si
   no, «900» y «12.850» corren el puesto de una tarjeta a otra y la
   columna del «Pos» baila en el carrusel (lo vio la captura). Sólo
   cuando hay puesto: sin él, los trofeos siguen pegados al margen. */
.gr-hor > .gr-pos + .gr-trof{min-width:3.4rem}
/* ⚠ A 320 (iPhone SE) CON EL PUESTO, EL NOMBRE SE QUEDABA CON 64 px: se
   aprieta el aire entre columnas y los pisos de ancho, que es lo que
   cede sin tocar la camiseta ni los números. */
@media (max-width:359px){
  .gr-hor:has(> .gr-pos){gap:var(--gap-sm, .5rem)}
  .gr-hor > .gr-pos{min-width:1.9rem}
  .gr-hor > .gr-pos + .gr-trof{min-width:3.4rem}
}
.gr-trof{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.28rem;color:var(--gold,#ffc233)}
.gr-trof svg{width:19px;height:19px;display:block}
.gr-trof b{color:#fff;font-weight:800;font-size:var(--fs-md, .88rem);line-height:1;
  font-variant-numeric:tabular-nums}
/* el «Jugar» del lobby de Mega Spin, pegado a la derecha de SU fila */
/* ⚠ mientras el toque de «Unirme» viaja al servidor, la tarjeta se
   apaga y no acepta otro toque: es el `disabled` que tenía el botón,
   ahora sobre la tarjeta entera (el escucha pone y saca la clase) */
/* ⚠⚠ ACÁ VIVÍA `.gr-der` —la columna que ponía el botón de info ARRIBA
   de los trofeos— Y SE BORRÓ (12/09/2026). La «i» pasó a la fila del
   botón de volver por ley fija (`.cop-fila-volver` en `cop-ui-main.css`),
   así que la opción `extra` de la tarjeta ya no tiene llamador y se fue
   con su columna. Dejarla dormida era dejar abierta la puerta por la que
   el botón vuelve adentro de la tarjeta. */
/* ⚠⚠ LA CABECERA DE ADENTRO DEL GRUPO NO ES UN BOTÓN (Franco,
   09/09/2026). Es la misma tarjeta, pero ya estás adentro: el cursor de
   mano y el hundido al apretar prometen un salto que no existe. */
.gr-hor--fijo{cursor:default}
.gr-hor--fijo:active{transform:none}
.gr-hor--fijo:hover{border-color:transparent}

.gr-card.entrando{opacity:.55;pointer-events:none}

/* ══ GRUPOS Y EQUIPOS: NOMBRE PEGADO A LA CAMISETA Y LÍNEAS ENTRE FILAS
   (Franco, 08/10/2026): *«en las tarjetas de los menús principales de grupos
   de amigos y de equipos competitivos tenés que poner las líneas divisorias
   entre uno y otro de arriba y abajo, y además el nombre del grupo o equipo
   debe estar más cerca de la camiseta, como en las tarjetas de partidos (…)
   lo mismo tiene que acercarse dentro del grupo en el banner»*.
   ⚠ `gr-hor--club` la pone `COPTarjetaGrupo.html()` (vidrieras y cabecera
   del grupo); el lobby de Mega Spin arma su propia fila y no cambia.
   ⚠ La columna del arte mide lo que la camiseta: con 92 px quedaban 38 px
   de aire entre la camiseta y el nombre. */
.gr-hor--club{gap:var(--gap-md, .7rem)}
.gr-hor--club > .gr-cam{flex:0 0 54px;clip-path:none;place-items:center}
.gr-grid:has(> .gr-hor--club),.gr-mios:has(> .gr-hor--club){gap:0}
:is(.gr-grid,.gr-mios) > .gr-hor--club{border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;
  padding-top:var(--gap-sm, .45rem);padding-bottom:var(--gap-sm, .45rem)}
/* 16/10/2026 · Franco: «el primero abajo del título no debe tener línea gris
   divisoria con el título, va limpio directo y empieza la distancia donde
   está la línea gris, así que subí el contenido» (Grupos y Equipos, también
   debajo de las tabs). Sin línea arriba y sin aire arriba del primero. */
:is(.gr-grid,.gr-mios) > .gr-hor--club:first-child{border-top:0;padding-top:0}