/* ══════════════════════════════════════════════════════════════════
   COP · HEADER DE COMPETENCIA (02/09/2026, Franco)

   Reemplaza la tarjeta de color celeste del carrusel de modos
   competitivos por un HEADER apoyado directo sobre el fondo de la
   página: emblema del modo + título + trofeos arriba; hexágono de
   división + 5 datos abajo. Los tres modos (Champions, División League,
   Torneos) quedan del MISMO tamaño para que el carrusel no salte al
   deslizar.

   ⚠ El carrusel, el loop infinito y el cambio de competencia al
   deslizar NO cambian: cada diapositiva sigue siendo el `.comp-banner`
   de siempre (mismo ancho de slide, mismo `data-comp`). Lo único nuevo
   es lo que va ADENTRO: se le sacó el marco de tarjeta y se puso este
   header. Amistosos queda con su tarjeta vieja (vive fuera del carrusel).

   ⚠ Escala en `cqw` sobre `.ch` (container-query): el mismo porcentaje a
   cualquier ancho. `.ch` se limita al ancho de contenido de la app
   (`--cop-ancho`) y se centra, así en escritorio ancho no se agranda de
   más y respeta los márgenes de contenido. La escala está afinada para
   que el modo más ancho (Torneos: "División N" + "N COBROS") llene justo
   el ancho disponible sin desbordar. */

/* ── la diapositiva del carrusel: sin marco de tarjeta ──
   Los `.comp-banner--hdr` NO llevan las clases `cop-tc cop-borde…`, así
   que no traen fondo/borde/aspecto de tarjeta. Quedan transparentes y su
   alto lo da el header. */
.comp-banner--hdr{
  background:none; border:0; aspect-ratio:auto;
  display:flex; align-items:center;
  min-height:0; overflow:visible;
  padding-block:.2rem;
}
.comp-banner--hdr .cop-fundido-cap{ display:none; }

.ch{
  container-type:inline-size;
  width:100%; max-width:var(--cop-ancho, 1500px);
  margin-inline:auto;
  display:flex; flex-direction:column; gap:2.08cqw;
  font-family:'Inter',system-ui,sans-serif; color:var(--text);
}
.ch-row{ display:flex; align-items:center; gap:2.19cqw; }
.ch-emb{ width:13.71cqw; flex:0 0 13.71cqw; display:flex; align-items:center; justify-content:center; }
.ch-emb img{ width:100%; object-fit:contain; }
.ch-emb--hex img{ width:82%; }
.ch-emb--hex img[hidden]{ display:none; }
.ch-content{ flex:1; min-width:0; }

/* fila 1: título + trofeos */
.ch-top{ display:flex; align-items:center; gap:2.41cqw; }
/* ⚠ `cmh-title`, NO `ch-title`: `ch-` es el namespace del modal "Desafiá
   a un amigo" (challenge), que ya define `.ch-title{Inter 1.3rem}` en el
   <style> de la página y, al cargar después, le ganaba a este. */
.cmh-title{ font-family:'Anton',sans-serif; font-weight:400; margin:0;
  font-size:7.66cqw; line-height:.92; letter-spacing:.005em; white-space:nowrap; color:var(--text); }
.ch-trophy{ display:flex; align-items:center; gap:.76cqw; }
.ch-trophy svg{ width:4.82cqw; height:4.82cqw; color:var(--gold); }
.ch-trophy b{ font-family:'Anton',sans-serif; font-weight:400; font-size:5.47cqw; color:var(--text); }

/* fila 2: los 5 datos, columnas al ancho de su contenido */
.ch-stats{ display:flex; align-items:center; }
.ch-stat{ flex:0 0 auto; padding:0 2.52cqw;
  border-left:1px solid rgba(255,255,255,.13); text-align:center; }
.ch-stat:first-child{ border-left:none; padding-left:0; text-align:left; }
.ch-k{ color:var(--text-dim); font-size:2.08cqw; font-weight:600; margin-bottom:.60cqw; white-space:nowrap; }
.ch-v{ font-family:'Anton',sans-serif; font-weight:400; font-size:3.18cqw; line-height:1;
  white-space:nowrap; display:flex; align-items:center; gap:.66cqw; color:var(--text); }
.ch-stat:not(:first-child) .ch-v{ justify-content:center; }
.ch-v svg{ width:2.74cqw; height:2.74cqw; }
/* ── CUATRO DATOS, MÁS GRANDES (Franco, 23/09/2026) ──────────────────
   *«eliminá (…) la sección de recompensas (…) y agrandá el contenido de
   las otras 4 cosas que se muestran para que se vean y lean mejor»*.
   Champions y División League pasaron de cinco datos a cuatro, y el
   ancho que dejó «Ver Detalle» se reparte entre los que quedan.
   ⚠ `space-between` Y NO UN PADDING MÁS GRANDE: la fila tiene que
   terminar justo en el borde del banner en cualquier teléfono. Con
   columnas al ancho de su contenido y el sobrante repartido en los
   huecos, el último dato queda contra el borde derecho y las líneas
   divisorias caen a la misma distancia de sus dos vecinos.
   ⚠ SIGUE SIENDO `cqw` como todo este header: el tamaño escala con el
   ancho del banner, así que lo que entra a 390 px entra a 360 y a 430.
   Medido con Inter y Anton de verdad (`_banner-comp.mjs`, A2/A3). */
.ch-stats--4{ justify-content:space-between; }
.ch-stats--4 .ch-stat{ flex:0 1 auto; min-width:0; padding:0 1.6cqw; }
.ch-stats--4 .ch-stat:first-child{ padding-left:0; }
.ch-stats--4 .ch-stat:last-child{ padding-right:0; }
.ch-stats--4 .ch-k{ font-size:2.6cqw; margin-bottom:.8cqw; }
.ch-stats--4 .ch-v{ font-size:4.3cqw; gap:.8cqw; }
.ch-stats--4 .ch-v svg{ width:3.6cqw; height:3.6cqw; }
/* Torneos (Franco, 13/10/2026): «jugados, cobros y jugando alineados a la
   izquierda y no tan espaciados: no deben cubrir todo sí o sí» */
.ch-stats--izq{ justify-content:flex-start; }
.ch-stats--izq .ch-stat{ padding:0 4cqw; }
.ch-stats--izq .ch-stat:first-child{ padding-left:0; }

/* "Ver Detalle" es un acceso: se ve accionable sin gritar */
.ch-recomp{ cursor:pointer; color:var(--primary); }
.comp-banner--hdr[data-comp="rivals"] .ch-recomp{ color:var(--purple); }
.comp-banner--hdr[data-comp="torneos"] .ch-recomp{ color:var(--torneo); }
.ch-recomp:hover{ filter:brightness(1.15); }

/* ══════════════════════════════════════════════════════════════════
   EL BOTÓN «i» DEL MODO  (07/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«los modos de juego tienen que tener un botón con la i de
   información donde se abra un menú… que explica de qué se trata el
   modo y todo»*.

   ⚠⚠ VA ABSOLUTO EN LA ESQUINA Y NO ADENTRO DE `.ch-top`. Todo este
   header escala en `cqw` para que el modo más ancho —Torneos— llene
   justo el ancho disponible sin desbordar, y el título es `nowrap`:
   un botón de 28 px FIJOS metido en esa fila no puede achicarse con el
   resto, así que a 320 px empujaría el título fuera de la tarjeta. Fuera
   del flujo no empuja nada y la escala del header queda intacta.

   ⚠ EL BOTÓN ES `.cop-mi-i` DE `cop-modo-info.css`, no una pieza nueva:
   acá va SÓLO dónde se apoya.
   ══════════════════════════════════════════════════════════════════ */
.ch{ position:relative }
.ch > .cop-mi-i{
  position:absolute;
  top:0; right:0;
  z-index:2;
}

/* ══════════════════════════════════════════════════════════════════
   EL TROFEO DE TORNEOS ES EL TOURNAMENT POINT  (07/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«los Tournament Points son los puntos de recompensa que
   vienen a cumplir la misma función que los trofeos en las competencias
   de División League y Champions Clash, así que es el trofeo de la
   vertical del camino de puntos de torneos»*.

   ⚠⚠ NO ES UNA MONEDA NUEVA: es el MISMO concepto que el trofeo, con el
   arte de su vertical. Por eso reemplaza al dibujo y no al número — el
   número sigue saliendo de los trofeos de la competencia, como antes.
   Y por eso está acotado a `--tp`: en Champions y en División el trofeo
   dorado se queda como está.

   ⚠ EL TAMAÑO SALE DE `cqw` COMO TODO ESTE HEADER, que escala con el
   ancho de la diapositiva: un ícono en px se rompería en uno de los dos
   tamaños. El `4.82cqw` es el mismo que tenía el SVG del trofeo, así que
   el emblema pesa lo mismo que pesaba el dibujo que reemplaza.
   ══════════════════════════════════════════════════════════════════ */
.ch-trophy--tp .cop-ico{
  /* ⚠ SE PISA `--cop-ico` Y NO EL ANCHO: el ícono del sistema calcula su
     lado con `--cop-ico × --cop-ico-x`, así que tocar `width` acá lo
     dejaría con el alto de antes y el punto saldría ovalado. */
  --cop-ico:4.82cqw;
  flex:0 0 auto;
}