/* ══════════════════════════════════════════════════════════════════
   COP · EL BANNER DE CABECERA — UNA SOLA VEZ (14/08/2026)
   ------------------------------------------------------------------
   La imagen de arriba de Misiones, Divisiones, Rankings, Ruleta,
   Explorar y Tienda. Antes cada una tenía su propia copia del mismo
   CSS —seis copias con nombres distintos: `.page-hero`, `.rank-hero`,
   `.shop-banner`— y una foto de Unsplash distinta bajada de internet
   en cada carga.

   ⚠ EL ALTO NO CAMBIA Y SALE DE DONDE SALÍA: la misma fórmula que ya
   compartían las seis, `(ancho − 2 × el recorte) × 7/16`, que también
   usan los banners de publicidad del inicio. Acá solo se le pone
   nombre (`--cop-bn-h`) para poder derivar de ella el tamaño del
   texto — que es lo que hace que el título se vea igual en cualquier
   teléfono sin una sola medida escrita a mano.

   ⚠ LA POSICIÓN Y EL TAMAÑO DEL TÍTULO ESTÁN MEDIDOS, NO ELEGIDOS.
   Salen de la imagen de referencia que armó Franco (1600×900), medida
   por TINTA —píxeles encendidos— y no por la caja del texto:
       borde izquierdo del texto  12,8 % del ancho
       ancho de "MISIONES"        67,2 % del ancho
       alto de la MAYÚSCULA       37,0 % del alto  (= 20,8 % del ancho)
       base del texto             22,0 % desde abajo
   Los números de abajo salen de ahí. El porqué de cada uno está en su
   línea; lo que no se puede dejar de leer es que **la referencia NO
   está escrita en Anton**: su tipografía es más angosta, así que con
   Anton no se pueden respetar el ancho y el alto a la vez.
   ══════════════════════════════════════════════════════════════════ */

.cop-banner{
  /* ⚠ `container-type` para poder medir el texto contra el ANCHO de
     ESTE banner (`cqw`) y no contra el de la ventana: en escritorio la
     página tiene barra lateral y `vw` daría un texto gigante. */
  container-type: inline-size;

  /* ⚠⚠ EL ALTO SALE DEL TOKEN, NO DE UNA CUENTA PROPIA (26/08/2026).
     Era `calc((100vw - 2 * var(--bn-inset,28px)) * 7/16)`: le restaba el
     recorte del carrusel del inicio a un banner que ocupa todo el ancho,
     así que el alto correspondía a un banner 56 px más angosto y la
     proporción real nunca era 16:7. Ahora es `--cop-bn-alto`, que vive
     en `cop-ui-tokens.css` y lo usan también las páginas con banner
     propio. Un número, un lugar. */
  --cop-bn-h: var(--cop-bn-alto);

  /* ⚠ LA INTENSIDAD DEL FONDO SE CAMBIA ACÁ Y EN NINGÚN OTRO LADO.
     Franco eligió "atenuada" para arrancar: `.55`, que es como venían
     los banners viejos. Para pasarla a "fuerte" —la imagen a pleno,
     como su referencia— es poner 1 en esta línea y nada más. */
  --cop-bn-op: .55;

  position:relative; overflow:hidden;
  height: var(--cop-bn-h);

  /* ⚠⚠ EL BANNER ES OPACO (26/08/2026). La imagen de fondo va al 55 %
     de opacidad, así que sin un color propio detrás el banner deja ver
     lo que haya abajo. Mientras estuvo POR DEBAJO de la topbar no se
     notaba —abajo sólo estaba el fondo de la página—, pero al pasar
     las cuatro páginas completas POR ENCIMA de la barra, el logo y los
     botones «Iniciar sesión / Registrarse» se transparentaban a través
     del banner. Se ve en la foto y no en ninguna medida: el control de
     `elementFromPoint` daba verde igual, porque quién recibe el click y
     qué se ve son dos preguntas distintas.
     ⚠ `--bg` es el mismo color con el que termina el degradé de abajo
     (`.page-hero::after`), o sea que en el resto de las pantallas esto
     no cambia un solo píxel: sólo hace explícito lo que ya se suponía
     detrás. */
  background: var(--bg);
  display:flex; align-items:flex-start; justify-content:flex-start;

  /* ⚠⚠ TODO EL ANCHO DE LA PANTALLA, SIEMPRE (Franco, 26/08/2026):
     *«los banners siempre tienen que ocupar todo el ancho de la
     pantalla, no deben tener espacio ni márgenes a los costados»*.
     Cada página lo resolvía con un `margin:0 -1rem`, que sirve sólo
     mientras el contenedor mida exactamente el ancho de la ventana: en
     cuanto la página tiene un `max-width` (todas lo tienen: 640, 720,
     820) el banner se quedaba adentro de la columna con aire a los
     costados. `100vw` + el margen negativo de media pantalla lo saca de
     la columna sin importar qué columna sea.
     ⚠ `!important` porque la regla que hay que ganarle es el margen
     lateral que cada página le puso a su propio banner, escrito
     DESPUÉS en el `<style>` de la página. */
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  max-width:none !important;
}

.cop-banner .cop-banner-fondo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity: var(--cop-bn-op);
}

/* el degradé que funde el banner con la página.
   ⚠ Abajo NO es decoración: sin ese tramo se ve el corte contra el
   fondo. Arriba es lo que garantiza que el texto blanco se lea aunque
   la imagen se ponga en "fuerte". */
.cop-banner::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.75) 85%, var(--bg) 100%);
}

/* ══ EL FUNDIDO DE ARRIBA (Franco, 24/08/2026) ═════════════════════
   *"los banners tienen que tener fondo difuminado arriba y abajo para
   que no choque directamente con la topbar el color del banner"*.

   Abajo ya estaba, en el `::after` de arriba. **Arriba faltaba en los
   cinco banners de la app** —medido: `ranking`, `misiones`, Clash Draft,
   Draft Doble y Spin & Go daban «fundido arriba: NO»—, así que el color
   del banner arrancaba a pleno pegado al borde de la topbar.

   ⚠ VA EN SU PROPIO `::before` Y NO SUMADO AL `::after`. Ese degradé ya
   hace dos trabajos (oscurecer para que el título blanco se lea, y
   fundir el pie): meterle un tercer tramo obligaría a recalcular sus
   cuatro puntos cada vez que se toque cualquiera de los dos.

   ⚠ `.cop-fundido` ES PARA LOS BANNERS QUE NO SON `.cop-banner`. Clash
   Draft, Draft Doble y Spin & Go tienen su propio banner escrito en la
   página. En vez de copiar el degradé tres veces —que es el error que
   este archivo vino a arreglar en 2026-08-14— se les pone esta clase y
   cargan este archivo. Un degradé, un lugar. */
/* ⚠ EL DEGRADÉ SE DECLARA UNA SOLA VEZ, en una variable, porque tiene
   DOS formas de engancharse (ver `.cop-fundido-cap` acá abajo), y dos
   copias del mismo degradé es justo lo que este archivo vino a evitar. */
:root{
  --cop-bn-degrade-arriba:linear-gradient(180deg,
    var(--bg, #0b0e14) 0%,
    rgba(15,15,15,.70) 34%,
    rgba(15,15,15,0) 100%);
}
.cop-banner::before,
.cop-fundido::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:var(--cop-bn-fade, 42%);
  z-index:1; pointer-events:none;
  background:var(--cop-bn-degrade-arriba);
}
/* el banner propio puede no estar posicionado: sin esto el ::before se
   iría a buscar al primer ancestro con position */
.cop-fundido{ position:relative }

/* ══ EL MISMO FUNDIDO, CUANDO EL `::before` YA ESTÁ OCUPADO ═════════
   (Franco, 26/08/2026: *«difuminado arriba en los banners que todavía
   no lo tienen»*.)

   `modos-competitivos.html` y `ligas.html` dibujan su banner con
   `.comp-banner`, y ESE elemento ya usa su `::before` para el degradé
   de color de la competencia. Ponerles `.cop-fundido` no habría hecho
   nada visible —es el MISMO pseudo-elemento y gana el `<style>` de la
   página, que va después— y habría sido un arreglo que se declara y no
   pasa: la peor clase de arreglo.
   Por eso el fundido también existe como ELEMENTO: se le mete un
   `<i class="cop-fundido-cap">` adentro al banner y listo. El degradé
   es el mismo de arriba, por la variable — un degradé, un lugar. */
.cop-fundido-cap{
  position:absolute; left:0; right:0; top:0;
  height:var(--cop-bn-fade, 42%);
  z-index:1; pointer-events:none;
  background:var(--cop-bn-degrade-arriba);
}

/* ══ Y MENOS AIRE CON EL CONTENIDO ════════════════════════════════
   *"tiene que achicar la distancia con el contenido de abajo ya que el
   espaciado es muy grande y el efecto de difuminado ya da su propio
   espacio de diferenciación dentro del banner"*.

   Medido antes de tocar, con la página a 390 px: `ranking` 0 px,
   `misiones` 22,39 · Draft Doble 12,8 · Spin & Go 14,39. Cuatro
   páginas, cuatro números, ninguno elegido. Ahora sale de una variable
   y es el mismo en todas.

   ⚠ VA CON `!important` A PROPÓSITO, igual que `.cop-bajo-tabs` en
   `cop-ui-base.css`: cada página le pone su propio margen al primer
   bloque después del banner, y esta regla existe justamente para
   ganarles a todas. Sin `!important` normalizaría solo donde la página
   no dijo nada, que es donde no hacía falta. */
/* ⚠⚠ Y EL `margin-bottom:0` DEL BANNER NO ES DE ADORNO — sin él la
   regla de abajo no hace NADA en tres de las cuatro páginas. Dos
   hermanos en flujo normal COLAPSAN sus márgenes verticales: vale el
   MAYOR de los dos. Con el banner declarando .8rem y esta regla
   pidiendo .5rem, gana el .8rem del banner y el aire queda igual que
   antes. Medido: puesto solo el `margin-top`, `misiones` seguía en
   22,39 px y Draft Doble en 12,8. Se anula el de arriba y manda uno
   solo, que es el que se puede cambiar desde acá. */
.cop-banner,
.cop-fundido{ margin-bottom:0 !important }

.cop-banner + *,
.cop-fundido + *{ margin-top: var(--cop-bn-gap, .5rem) !important }

/* ── EL TÍTULO ─────────────────────────────────────────────────────
   Va posicionado y NO en el flujo: así queda clavado donde lo puso
   Franco sin depender de qué más haya adentro del banner (el botón de
   cerrar de Divisiones, por ejemplo). */
.cop-banner .cop-banner-titulo{
  position:absolute; z-index:2;
  /* ⚠⚠ EL TAMAÑO SE ANCLA AL ANCHO Y SE IGUALA EL ANCHO DEL TEXTO, NO
     SU ALTURA. Es la decisión de la que cuelga todo lo demás.
     La imagen de Franco es 16:9 y el banner de la app es más ancho y
     más bajo. Con `object-fit:cover` el recorte se come el alto y NO
     toca el ancho, así que las proporciones que sobreviven son las
     horizontales — por eso la medida se toma del ancho.
     Y hay una segunda razón, medida: **la referencia no está escrita
     en Anton**. Su tipografía es más angosta (relación ancho/mayúscula
     3,23 contra 4,00 de Anton), así que con Anton NO se pueden
     respetar el ancho y el alto de la referencia a la vez. Se eligió
     el ANCHO, y no por gusto: igualando la MAYÚSCULA, "DIVISIONES"
     pediría el 94 % del banner y quedaría cortada. Con el ancho:
       "MISIONES"   mide 3,477 em en Anton → 67,2 % / 3,477 = 19,3 %
       "DIVISIONES" mide 3,92 em → 75,6 %, y termina en el 88 %,
       o sea con el mismo aire a la derecha que el borde de la
       izquierda. Entran las seis sin recortar ninguna. */
  font-size: 19.3cqw;

  /* ⚠ 12,2 y no 12,8: la referencia se midió por TINTA y la caja del
     texto arranca 0,03 em antes que la primera letra (el margen propio
     de la "M" de Anton). Restarlo es lo que hace que la tinta caiga
     exactamente donde Franco la puso. */
  left: 12.2%;
  /* ⚠ LA BASE NO SE COPIA DEL 22 %, SE TRADUCE. Ese 22 % es de una
     imagen 16:9 y el banner recorta arriba y abajo (`cover`), así que
     el mismo punto de la CANCHA cae mucho más abajo en pantalla:
     (22 − 16,65) / 66,7 = 8,0 % del alto del banner. Copiar el 22 %
     tal cual dejaría el texto flotando en el medio, despegado del
     lugar donde lo apoyó Franco. El 4 % es la CAJA; la tinta —que es lo
     único que se ve— cae en el 8,2 %, medido sobre el bitmap. Entre la
     caja y la tinta hay 4 puntos de diferencia porque la caja reserva
     el hueco del descendente aunque el texto sea todo mayúsculas. */
  bottom: 4%;
  margin:0; padding:0; background:none; border:none;
  font-family:'Anton', sans-serif;
  line-height:1;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:-.01em;
  text-shadow:0 4px 22px rgba(0,0,0,.55);
  white-space:nowrap;
  /* ⚠ RED DE SEGURIDAD, NO EL PLAN: los seis nombres entran holgados
     (el más largo llega al 88 %). Esto existe para el día que alguien
     agregue una pantalla con un nombre largo: ahí el título se corta
     contra el borde del banner en vez de salirse por arriba de la
     página. Si algún nombre nuevo llega hasta acá, el arreglo es
     acortar el nombre, no bajar el tamaño de las otras cinco. */
  max-width: calc(100% - 12.2% - 4%);
  overflow:hidden; text-overflow:clip;
}

/* ══════════════════════════════════════════════════════════════════
   EL BANNER DE ARTE — cuando la imagen YA ES el banner (tanda W)
   ------------------------------------------------------------------
   Franco, 28/08/2026: *«te cargo los banners para las páginas de
   misiones, rankings, rangos y explorar, todos en el mismo tamaño y que
   deben suplantar los que dicen el nombre de la competencia solo con un
   fondo azul de cancha, van ahí arriba cada uno en su página»*.

   Los cuatro son ARTE TERMINADO: traen el logo, el título dibujado
   («MISIONES DIARIAS», «DOMINA EL RANKINGS», «RANGOS COMPETITIVOS»,
   «EXPLORAR») y una escena propia. O sea que el banner acá no tiene que
   COMPONER nada: tiene que mostrar la imagen y no estorbarla.

   Por eso la variante deshace las tres cosas que el banner normal hace
   para poder escribir un título encima de una foto genérica:

   ⚠⚠ 1 · LA IMAGEN VA A PLENO (`--cop-bn-op:1`). El `.55` del banner
   normal existe para que un título blanco se lea sobre una foto de
   cancha. Acá el título ES la imagen: atenuarla al 55 % apaga el título
   junto con todo lo demás.

   ⚠⚠ 2 · SIN LA CORTINA OSCURA DEL `::after`. Ese degradé
   (`rgba(0,0,0,.25)` arriba, `.75` abajo) es el otro lado de lo mismo.
   Queda SÓLO la última franja, que es la que funde el borde de abajo
   con la página: sin ella se ve la línea de corte, sobre todo en Rangos
   —donde el arte termina en los jugadores, no en negro—.
   ⚠ ARRANCA EN 92 % Y NO ANTES: la tinta más baja de los cuatro artes
   está en el 90,5 % (medido sobre los `.png`, fila por fila). Un
   degradé que empiece antes se come los rótulos de Explorar.

   ⚠⚠ 3 · EL ALTO SALE DE LA IMAGEN, NO DE LA FÓRMULA 16:7. Los cuatro
   son 1280×400 (3,2:1) y el banner normal es 16:7 (2,29:1). Con el alto
   viejo, `object-fit:cover` recorta lo que sobra POR LOS COSTADOS: se
   perdería el 20 % de cada lado, o sea el título de la izquierda y la
   escena de la derecha. Con `aspect-ratio` el banner se adapta al arte
   y no se recorta un píxel.
   ⚠ `box-sizing` declarado: hay páginas sin el reseteo global, y ahí
   `aspect-ratio` mide la caja de CONTENIDO y la proporción sale mal
   (la misma trampa de la tanda T).

   ⚠⚠ 4 · SIN NINGÚN SOMBREADO, NI ARRIBA NI ABAJO (Franco, 29/08/2026):
   *«las tarjetas de banners de estas 4 páginas no tienen que tener
   ningún sombreado arriba ni abajo extra, tiene que ser la imagen vista
   100 % nítida y en su máximo tamaño»*.

   Quedaban dos degradés: el fundido de arriba (6 %, del 24/08, para que
   el banner no chocara con la topbar) y la última franja del `::after`
   (del 92 % al 100 %, para que el pie no cortara seco contra la página).
   Los dos se sacan. Sobre estos cuatro artes ninguno de los dos motivos
   se sostiene: **el arte ya trae su propia franja oscura arriba y
   abajo** —hasta el 9,2 % arriba y con el fondo cerrando abajo—, así que
   el degradé estaba oscureciendo una zona que ya venía oscura del
   dibujo. Se veía como un velo, que es exactamente lo que Franco pide
   sacar.

   ⚠ SE SACAN CON `content:none`, no bajando la opacidad ni poniendo el
   degradé en transparente: un pseudo-elemento vacío pero presente sigue
   apilándose sobre la imagen y sigue siendo una capa que alguien puede
   volver a pintar sin darse cuenta.

   ⚠⚠ 5 · SIN ESQUINAS REDONDEADAS (mismo pedido): *«tenés que eliminar
   ese redondeado de las esquinas que se ven, tienen que tapar el 100 %
   del ancho que ocupan. La de explorar tiene las esquinas redondeadas y
   la de misiones también»*.

   El radio NO lo ponía este archivo: lo pone `.cop-banner` en
   `cop-ui-base.css` (`border-radius:var(--r-card)`, 14 px) para los
   banners de tarjeta. Por eso **Rangos no lo tenía y las otras tres
   sí**: Rangos es la única de las cuatro que no carga `cop-ui-base.css`.
   O sea que no era un descuido de dos páginas — eran tres, y la que se
   veía bien lo estaba por casualidad.
   ⚠ SE ARREGLA EN LA VARIANTE Y NO EN LAS PÁGINAS: el radio le sirve a
   los banners que SÍ son una tarjeta; lo que no lleva radio es el arte
   a pantalla completa. Escrito en las tres páginas serían tres copias
   de la misma corrección y la cuarta seguiría dependiendo de no cargar
   una hoja.
   ══════════════════════════════════════════════════════════════════ */
.cop-banner--arte{
  box-sizing:border-box;
  --cop-bn-op:1;
  height:auto;
  aspect-ratio:1280/400;
  /* de borde a borde, sin esquinas: le gana a `.cop-banner` de
     `cop-ui-base.css` porque esta hoja se carga después */
  border-radius:0;
}
.cop-banner--arte::before,
.cop-banner--arte::after{ content:none }

/* ⚠⚠ LA X DE CERRAR NECESITA UN DISCO DETRÁS, y sólo acá. El botón es
   una X blanca sin fondo: sobre el banner normal —una foto atenuada al
   55 % y con una cortina oscura encima— se lee siempre. Sobre el arte a
   pleno, no: en Rangos cae justo arriba del rombo azul con el logo CP y
   queda como un rayón sobre el ícono, no como un botón. Se ve en la
   captura y en ninguna medida: el botón está, tiene su tamaño y recibe
   el click.
   ⚠ DOS CLASES EN EL MISMO ELEMENTO (`.cop-banner.cop-banner--arte`) A
   PROPÓSITO: la regla a la que hay que ganarle es `.page-hero
   .hero-close{background:transparent}`, escrita en el `<style>` de cada
   página —o sea DESPUÉS de esta hoja— y con la misma fuerza. Repetir la
   clase sube la especificidad sin un `!important`, que es lo que habría
   que usar si no.
   ⚠ Y VA EN EL COMPONENTE Y NO EN LAS PÁGINAS: el problema no es de
   Rangos, es de cualquier banner de arte. El día que Franco mande otro,
   el botón ya se lee. */
.cop-banner.cop-banner--arte .hero-close{
  background:rgba(8,12,20,.55);
  backdrop-filter:blur(2px);
  color:#fff;
}
/* ⚠ En pantalla ancha el `--cop-bn-h:260px` de más abajo no aplica acá
   —el alto sale de la proporción— y no hace falta ningún techo: el
   banner vive adentro de una columna de 640..820 px, así que como mucho
   llega a 256 px de alto, que es lo mismo que ese techo. */

/* ⚠ En pantalla ancha el banner deja de crecer con `100vw` porque la
   página tiene barra lateral: el alto se calcula igual pero el texto
   quedaría enorme al lado de un contenido angosto. Se le pone techo. */
@media(min-width:900px){
  .cop-banner{ --cop-bn-h: 260px; }
}
/* ⚠ En escritorio la app tiene barra lateral: `100vw` incluye ese ancho
   y el banner se metería debajo de ella. Ahí vuelve a ser el ancho de su
   columna, que es lo que se ve. */
@media(min-width:761px){
  .cop-banner{
    width:auto !important;
    margin-left:0 !important; margin-right:0 !important;
  }
}
/* Respaldo para navegadores sin unidades de contenedor. El alto del
   banner es el MISMO en las seis páginas, así que de ahí se puede
   derivar el mismo tamaño: 19,3 % del ancho de la ventana equivale a
   51,5 % de ese alto (el alto es 7/16 del ancho útil). */
@supports not (width: 1cqw){
  .cop-banner .cop-banner-titulo{ font-size: calc(var(--cop-bn-h) * 0.515); }
}

/* ══════════════════════════════════════════════════════════════════
   LA PÁGINA COMPLETA VA POR ENCIMA DE LA TOPBAR (Franco, 26/08/2026)
   ------------------------------------------------------------------
   *«no solamente que se ve la topbar, sino que se demostró que está
   adelante porque tapa la parte de arriba del banner y no me deja ni
   cerrar porque no veo la X. Esas páginas completas tienen que estar
   por encima de todo, no pueden estar detrás en ninguna parte de la
   topbar»*.

   ⚠⚠ EL COMENTARIO QUE ESTO CORRIGE ERA MÍO Y ERA FALSO. El 26/08
   escribí, al sacarles el `padding-top`, que «la topbar es
   semitransparente con desenfoque, así que el banner se ve a través de
   ella y la pantalla se lee entera». No: es `rgba(15,15,15,.92)` —92 %
   de opacidad—, opaca a todos los efectos. Subir el contenido sin
   tocar el orden de pintado dejó el banner DEBAJO de una barra sólida,
   y con él su botón de cerrar (`.hero-close`, a 13 px del techo), que
   además dejó de recibir el click: `elementFromPoint` en ese píxel
   devolvía `<a class="tb-auth-solid">`, un botón de la topbar.

   ⚠ NO SE BORRA LA TOPBAR, SE LA DEJA ATRÁS. 41 le gana a su
   `z-index:40` y pierde contra la barra inferior (50), que sí tiene que
   seguir adelante. La barra sigue en el marcado y su JS sigue corriendo:
   si algún día estas páginas la quieren mostrar, se saca esta clase.

   ⚠ HACE FALTA `position:relative`: un `z-index` sobre un elemento
   `static` no hace absolutamente nada, y el síntoma sería idéntico al
   de no haber escrito la regla.
   ══════════════════════════════════════════════════════════════════ */
.cop-tapa-todo{ position:relative; z-index:41 }