/* ══════════════════════════════════════════════════════════════════
   COP · LA TARJETA DE COMPETENCIA — UN SOLO ARCHIVO (28/08/2026)

   Franco: *«no me gusta mucho el diseño actual de las tarjetas de
   arena, quiero que pruebes este… con el espacio vacío a la izquierda
   para reutilizar el contenido que ya tenemos, tanto en la página de
   arena como en la de Division League donde está como banner arriba…
   el mismo degradé de las tarjetas de picks con el color de la
   competencia, el recuadro de la derecha es el logo con su fondo que
   está en modos de juego, y después continuar a la izquierda simple con
   el degradé apenas del color de la competencia»*.

   ⚠⚠ REEMPLAZA A `cop-tarjeta-arena.css`, QUE SE FUE. Ese archivo tenía
   la misma responsabilidad —«la tarjeta ancha de un modo de juego»— pero
   resuelta con **un `.webp` por competencia con el nombre y la bajada
   DIBUJADOS adentro** (`arena-*.webp`, once archivos de 1024×338). El
   nombre viejo tampoco era cierto ya: la misma pieza es la tarjeta de la
   Arena, la cabecera de cinco pantallas y ahora el banner de las
   competencias.

   ⚠⚠ POR QUÉ IMPORTA QUE EL TEXTO SEA TEXTO. Con el nombre pintado
   adentro de la imagen: un lector de pantalla no lo lee, un buscador
   tampoco, no se puede traducir, cambiar una bajada obliga a
   re-exportar un archivo, y el mismo texto terminaba escrito DOS veces
   —una dibujada y otra escondida para accesibilidad— que es la forma
   más silenciosa que hay de que digan cosas distintas.

   ⚠ LA PIEZA SE ARMA CON LO QUE YA EXISTE:
     · el marco en degradé  → `cop-borde` con el color de la competencia
       y los mismos números de la tarjeta de pick;
     · el fondo del recuadro → `fondo-recuadro-<color>.webp`, el mismo
       del riel de ligas;
     · el emblema            → `logo-<competencia>.webp`, el mismo que ya
       está en la Arena y en el banner;
     · el lienzo de atrás    → `fondo-tarjeta-<color>.webp`, que dibujó
       Franco (celeste) y del que salen los otros seis.
   O sea: **ni un archivo nuevo por competencia**, y once `.webp` menos.

   ⚠ EL MARCADO ES DE DOS CAPAS Y NADA MÁS. El lienzo y el recuadro del
   arte son `::before` y `::after` de la propia tarjeta: quien la usa
   escribe el enlace, el título y la bajada, y nada de decoración.
   ══════════════════════════════════════════════════════════════════ */

/* ── LA CAJA ────────────────────────────────────────────────────────
   ⚠ `container-type:inline-size` + `cqw`: TODO adentro se mide contra el
   ancho de la tarjeta, no contra la ventana. Es lo que hace que la misma
   pieza sirva de banner a pantalla completa, de cabecera de pantalla y
   de tarjeta en una lista sin escribir tres juegos de tamaños.

   ⚠ LA PROPORCIÓN ES LA QUE YA TENÍA LA ARENA (1024/338 = 3,03), así
   que las once tarjetas no cambian de alto al cambiar de diseño. El
   ejemplo que mandó Franco mide 3,096: dos píxeles de diferencia en una
   tarjeta de 400 de ancho.

   ⚠ NINGÚN `background` ACÁ. `cop-borde` dibuja su marco con DOS capas
   de fondo (relleno + degradé): cualquier fondo propio en el mismo
   elemento las apaga. Por eso el lienzo va en `::before`. */
.cop-tc{
  position:relative;
  display:block;
  /* ⚠⚠ `border-box` ESCRITO ACÁ, Y NO ES RUIDO. Cinco de las siete
     pantallas que usan la tarjeta NO tienen el reset global de
     `box-sizing`, así que ahí `aspect-ratio` medía sobre la caja de
     CONTENIDO y el marco de 1,6 px se sumaba por fuera: la misma pieza
     salía 3,03 en la Arena y 2,999 en las cabeceras. Dos píxeles que
     nadie ve de a uno, pero que hacen que la pieza deje de ser la misma
     pieza. Lo cazó el control B4, comparando las seis pantallas entre
     sí. */
  box-sizing:border-box;
  aspect-ratio:1024/338;
  min-height:0;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  container-type:inline-size;

  /* los números del marco, para `cop-borde` */
  --borde-rgb:var(--tc-rgb, 255,255,255);
  --borde-radio:18px;
  --borde-grosor:1.6px;
  /* ⚠ FUERTE ABAJO Y APENAS ARRIBA: son los mismos números de la tarjeta
     de pick, que es lo que pidió Franco con «el mismo degradé de las
     tarjetas de picks». No es un degradé nuevo: es el mismo componente
     con otro color. */
  --borde-abajo:1;
  --borde-arriba:.12;
  --borde-fondo:var(--bg, #0b0e14);

  /* cuánto ocupa el recuadro del arte, a la derecha (medido en el
     ejemplo de Franco: 756 de 2000) */
  --tc-art:37%;
}

/* ── EL LIENZO DE ATRÁS ─────────────────────────────────────────────
   (Franco, 28/08/2026: *«tenés que aplicar en el espacio vacío esta
   imagen… es el mismo fondo del escudo pero adaptado a este tamaño y
   mejor, quiero que se ponga tal cual está»*).

   ⚠ CUBRE LA TARJETA ENTERA, no sólo la mitad izquierda: el recuadro del
   arte se apoya ENCIMA y tapa su derecha. Metido a la fuerza en el 63 %
   de la izquierda, la trama se aplastaría un 38 % y los triángulos
   dejarían de ser triángulos.

   ⚠ EL DEGRADÉ ES EL RESPALDO y no un segundo camino: va como valor por
   defecto de la MISMA variable —`var(--tc-lienzo, …)` admite comas en su
   respaldo—, así que una competencia sin lienzo dibujado se ve igual de
   terminada y no hay dos reglas que puedan separarse. */
.cop-tc::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--tc-lienzo,
    linear-gradient(90deg,
      rgba(var(--tc-rgb, 255,255,255), 0)    38%,
      rgba(var(--tc-rgb, 255,255,255), .07)  72%,
      rgba(var(--tc-rgb, 255,255,255), .16) 100%),
    radial-gradient(78% 130% at 42% 132%,
      rgba(var(--tc-rgb, 255,255,255), .30) 0%,
      rgba(var(--tc-rgb, 255,255,255), .10) 45%,
      transparent 72%));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ── EL RECUADRO DEL ARTE, A LA DERECHA ─────────────────────────────
   ⚠⚠ SE ARMA, NO SE RECORTA. La primera versión usaba el cuadrado de
   Modos de Juego (`modo-*.webp`) recortado al hueco, que es lo que pidió
   Franco al pie de la letra; pero ese arte trae el emblema pegado a los
   bordes y, en un hueco más ancho que alto, terminaba tocando los cuatro
   lados. Acá el fondo y el emblema van por separado —dos archivos que la
   app ya baja en otras pantallas— y el emblema entra al 72 % del ancho:
   le queda el aire que tiene en el ejemplo y no se recorta nunca, mida
   lo que mida el hueco.

   ⚠ EL ORDEN DE LAS DOS CAPAS IMPORTA: en `background` la PRIMERA es la
   de arriba. Emblema primero, fondo después. */
.cop-tc::after{
  content:''; position:absolute; top:0; right:0; bottom:0; z-index:1;
  width:var(--tc-art, 37%);
  pointer-events:none;
  /* ⚠ TRES CAPAS, Y EL ORDEN ES DE ARRIBA HACIA ABAJO: el emblema, la
     costura y el fondo. La costura es una LÍNEA DE LUZ que se apaga
     hacia arriba —el mismo gesto que el marco—; un `border-left` plano
     partía la tarjeta en dos rectángulos.
     ⚠ `none` de respaldo en las dos imágenes: sin eso, un `data-arte`
     que no esté en la tabla vuelve inválida la declaración entera y el
     recuadro desaparece sin dejar rastro. */
  background:
    var(--tc-logo, none) center / 72% auto no-repeat,
    linear-gradient(to top,
      rgba(var(--tc-rgb, 255,255,255), .95),
      rgba(var(--tc-rgb, 255,255,255), .06)) left / 1.5px 100% no-repeat,
    var(--tc-fondo, none) center / cover;
}

/* ── EL CONTENIDO, A LA IZQUIERDA ───────────────────────────────────
   ⚠ EL RELLENO DERECHO SALE DE `--tc-art`, no de un número escrito: si
   mañana el recuadro del arte crece, el texto se corre solo y nunca se
   le mete abajo. */
.cop-tc-txt{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
  gap:1.4cqw;
  padding:0 calc(var(--tc-art, 37%) + 3.2cqw) 0 4.6cqw;
  box-sizing:border-box;
}
/* ⚠⚠ EL VELO NO ES DECORACIÓN: ES LO QUE HACE LEGIBLE EL TEXTO. El
   lienzo tiene su resplandor abajo a la izquierda, justo donde va la
   bajada; en el plateado del Draft es casi blanco y se comía el renglón
   entero. Un velo oscuro que se apaga hacia la derecha resuelve los once
   colores de una vez, en lugar de retocar el arte que moleste (que
   además volvería a molestar en el próximo color).
   ⚠ Va adentro de `.cop-tc-txt` con `z-index:-1`: queda por encima del
   lienzo y por debajo del título, y se corta solo donde empieza el
   recuadro del arte — que no lleva velo porque ahí no hay texto. */
.cop-tc-txt::before{
  content:''; position:absolute; z-index:-1;
  left:0; top:0; bottom:0; right:var(--tc-art, 37%);
  background:linear-gradient(90deg,
    rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,0) 100%);
}

/* ⚠ UN RENGLÓN, Y ES LO QUE EMPAREJA LAS ONCE. Con dos permitidos,
   «Equipos Competitivos» medía el doble de alto que sus hermanas y la
   lista se leía torcida. El que no entra se achica un escalón —lo hace
   `cop-tarjeta-competencia.js`, midiendo— en vez de elegir un cuerpo
   chico para todos por culpa del más largo. */
.cop-tc-tit{
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:6.4cqw; line-height:1;
  letter-spacing:.5px; text-transform:uppercase;
  margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cop-tc-sub{
  font-family:'Inter',sans-serif;
  font-size:3.1cqw; line-height:1.25; font-weight:500;
  color:var(--text-dim, #9aa3b5);
  margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── DE CABECERA DE PÁGINA ──────────────────────────────────────────
   ⚠ EL AIRE ES EL MISMO QUE TENÍA LA PIEZA VIEJA (Franco, 27/08/2026:
   *«las tarjetas de banner tocan el borde de la pantalla… quiero
   agregarle los márgenes a los costados que tiene por ejemplo en la
   página de arena»*). Los costados los da el `padding` de la columna;
   acá va sólo el aire de arriba y abajo. */
/* ⚠⚠ SIN AIRE PROPIO ARRIBA (Franco, 05/09/2026): *«la posición de los
   banners dentro de las competencias está muy abajo, debe estar casi
   pegado a la topbar»*. La tapa es lo PRIMERO de su pantalla, así que su
   margen de arriba se sumaba al aire que ya reserva `.cop-main` y el
   banner terminaba a 30 px de la barra en vez de a 14.
   ⚠ El de abajo se queda: ahí sí separa de lo que sigue. */
/* ══ EL BOTÓN DE INFO, EN LA ESQUINA SUPERIOR DERECHA ══════════════
   Franco, 10/09/2026: *«el cartel con la info de alguna competencia o lo
   que sea tiene que estar en la esquina superior derecha de la página
   mostrado con el logo de i de información, esto aplica para todos los
   recuadros que dicen algo acerca de reglas, puntos, etc.»*.

   ⚠⚠ LA POSICIÓN VIVE ACÁ Y EL BOTÓN EN `cop-modo-info.css`, que es
   como ya funciona en Champions: el componente decide cómo se ve la
   «i» y el anfitrión dónde va. Esta regla es el anfitrión «tapa de
   competencia», así que la segunda pantalla que la use no escribe una
   línea. Escribir la posición adentro del `<style>` de cada página
   habría sido la copia de siempre.
   ⚠ EL AIRE ES DE 10 px Y NO DE 6: la tapa tiene `overflow:hidden` y un
   radio de 18, así que más cerca del vértice el círculo se come una
   esquina. Medido contra el radio, no estimado.
   ⚠ Y LLEVA SU PROPIO FONDO SEMITRANSPARENTE: la «i» va sobre el arte
   del modo, que en algunas tapas es claro. Sin fondo, el borde blanco
   al 28 % desaparece justo en las que más lo necesitan. */
.cop-tc > .cop-mi-i{
  position:absolute;top:10px;right:10px;z-index:3;
  background:rgba(10,13,20,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border-color:rgba(255,255,255,.45);color:#fff;
}
.cop-tc > .cop-mi-i:hover{ background:rgba(10,13,20,.8) }

.cop-tc--tapa{ margin:0 0 var(--gap-lg, 1rem) }
/* si alguna vez una tapa NO es el primer elemento, se le devuelve el
   aire con esta clase en vez de tocar la regla de arriba */
.cop-tc--tapa.cop-tc--con-aire{ margin-top:var(--cop-arte-aire, 1rem) }

/* ⚠ LA VARIANTE CON DATOS —la insignia de la división, los trofeos,
   cuándo termina, cuánta gente juega— NO vive acá: es de
   `modos-competitivos.html`, que es la única pantalla que tiene esos
   datos. Acá está lo que comparten las tres casas de la pieza (la caja,
   el marco, el lienzo, el recuadro del arte y el velo); lo que sólo
   pasa en una pantalla se queda en su pantalla. El banner mete su
   bloque adentro de `.cop-tc-txt` y lo maqueta con sus propias clases
   `.cb-*`, que además son las que su JS ya toca por nombre. */

/* ══ LA TABLA DE ARTES SE MUDÓ A `cop-arte-modos.css` (08/09/2026) ══
   Acá vivían los colores (`--tc-rgb`), los lienzos (`--tc-lienzo`), los
   mini recuadros (`--tc-fondo`) y los escudos (`--tc-logo`) de los
   catorce modos, todos bajo `.cop-tc[data-arte=…]`.

   ⚠⚠ SE MUDARON PORQUE UNA SEGUNDA PANTALLA LOS NECESITA. Franco pidió
   que el carrusel de «Modos de Juego» de la portada dejara de usar los
   `modo-*.webp` de colores y mostrara los mismos escudos celestes y
   violeta que la Arena, con su mismo fondo. Encerrados bajo `.cop-tc`,
   la portada no podía leerlos y la única salida era copiarlos — y una
   copia de esta tabla ya habría nacido desactualizada: el 08/09 se le
   agregaron Doble o Nada y Survival, y con dos copias esos dos modos
   aparecerían en la Arena y no en el inicio.

   ⚠ NO CAMBIA NADA PARA ESTA HOJA: sigue leyendo las mismas cuatro
   variables. Lo único que hace falta es que la página cargue
   `cop-arte-modos.css` ANTES que ésta — están las trece enlazadas.
   ⚠ SI UN RECUADRO SALE VACÍO, es que falta ese `<link>`: las variables
   caen a su `none` de respaldo y el arte desaparece sin dar error. */