/* ════════════════════════════════════════════════════════════════════
   COP CARTA DE JUGADOR — la carta del perfil, la tienda y el inventario
   ────────────────────────────────────────────────────────────────────
   Franco, 28/08/2026: *«quiero que cambiemos las tarjetas de jugadores
   de la tienda y del inventario, que al final son la tarjeta de perfil
   del usuario. Te dejo el diseño de cómo se debería ver con contenido y
   la imagen sola. A la camiseta le tenés que agregar la luz atrás»*.

   ⚠⚠ EL MARCO ES SUYO Y ES UNA SOLA IMAGEN: `marco-carta.webp`, el
   contorno de neón con su fondo negro y la línea divisoria ya dibujada.
   Va DEBAJO del contenido (el archivo es opaco en el medio) y el
   contenido se apoya encima, colocado en PORCENTAJES DE LA CARTA.

   ⚠⚠ LAS POSICIONES ESTÁN MEDIDAS SOBRE SU MAQUETA, no elegidas a ojo.
   Del PNG con contenido que mandó (941×1672, marco de 714×1096):

       logo CP        x 11,2..30,0 %   ·  y 16,7..24,8 %
       insignia       x 12,3..28,7 %   ·  y 28,7..43,4 %
       bandera        x 10,9..30,4 %   ·  y 47,6..55,6 %
       camiseta       x ~44..86 %      ·  y ~12..62 %
       divisoria      y 63,1 %  (viene dibujada en el marco)
       nombre         altura de mayúscula 8,1 % ·  y 68,2..76,3 %
       club           altura de mayúscula 8,1 % ·  y 79,9..88,0 %

   ⚠ TODAS LAS MEDIDAS SON % O `cqw`, ninguna en px: la misma pieza se
   dibuja a ~150 px en el carrusel de la tienda y a ~300 px en la página
   de la carta. Con medidas fijas, una de las dos queda rota.

   ⚠⚠ EL PREFIJO ES `cjc-`, NO `cj-`. `cj-` ya es de
   `cop-camiseta-jugador.css` (`.cj-camiseta`, `.cj-nom`, `.cj-num`), que
   además es el componente que esta carta usa ADENTRO: con las dos
   familias bajo el mismo prefijo, `.cj-nom` (el nombre en la espalda de
   la camiseta) y `.cj-nombre` (el nombre de la carta) quedaban a una
   letra de distancia en el mismo árbol.
   ════════════════════════════════════════════════════════════════════ */

/* ⚠⚠ LA PROPORCIÓN VIVE ACÁ Y EN NINGÚN OTRO LADO (31/08/2026).
   El marco nuevo de Franco es 1130 × 1392 —casi 4:5— y el anterior era
   903 × 1459, mucho más alto y angosto. Ese número estaba ESCRITO A MANO
   en tres archivos además de éste (`carta.html` dos veces y
   `revelar-cartas.html`), así que cambiar el arte y no cambiarlos dejaba
   la carta estirada en dos de las nueve pantallas.
   Ahora sale de estas variables y las tres pantallas las leen. El día que
   Franco mande otro arte se tocan estos tres números. */
:root{
  /* ⚠ MARCO NUEVO 2:3 (carta-fondo-celeste, 03/09/2026). Divisores del
     arte: vertical 28,2% · horizontal 61,2% · bordes 3,2/8,9/95,5/86,1. */
  --cjc-ancho:1024;
  --cjc-alto:1536;
  --cjc-prop:1024 / 1536;
}
.cjc{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:var(--cjc-prop);
  container-type:inline-size;
  user-select:none;
}

/* ⚠ EL MARCO VA DEBAJO: el archivo es opaco en el medio (su negro ES el
   fondo de la carta). Puesto encima tapa la camiseta y el nombre y queda
   una carta impecable y vacía. */
.cjc-marco{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
}

/* ── LA COLUMNA DE LA IZQUIERDA: logo · insignia · bandera ───────────
   ⚠ LOS TRES CENTRADOS EN LA MISMA COLUMNA. En la maqueta los tres
   comparten el eje horizontal (~20,4 % del ancho); si cada uno se
   alineara a su izquierda, el logo —que es más ancho— dejaría a la
   insignia y a la bandera corridas. */
/* ⚠⚠ REMEDIDA CONTRA EL ARTE NUEVO (31/08/2026). Los porcentajes de
   abajo salen de la maqueta con contenido que mandó Franco, medida
   pixel a pixel: el logo en 8,1..16,8 % de alto, la insignia en
   21,5..37,4 y la bandera en 42,7..51,1, las tres alineadas por su
   izquierda en 12,8..14,1 %.
   ⚠ Y ES POR IZQUIERDA, NO CENTRADAS: en el arte anterior los tres
   compartían eje central; en éste están claramente alineados a la
   izquierda —la insignia y la bandera arrancan casi en la misma
   vertical—. Centrarlos dejaría la insignia corrida respecto de la
   bandera, que es justo lo que se ve en la maqueta que NO pasa. */
.cjc-col{
  /* ⚠ CENTRADA en la columna del marco nuevo (borde 3,2% → divisor
     28,2%, centro 15,7%). Los tres íconos centrados en ese eje. */
  position:absolute;
  left:5.5%; width:20.4%;
  top:12%; height:47%;
  z-index:2;
}
/* ⚠⚠ CADA UNO EN SU LUGAR, NO REPARTIDOS. Esto era un `flex` con
   `space-between` y los tres se acomodaban entre sí: en una carta sin
   país —que es un caso legítimo, el dato puede faltar— la insignia se
   iba de 28,7 % a 35,4 % y la carta se veía distinta por un dato que no
   está. Un dato que falta no puede mover a los que sí están.
   ⚠ Lo destapó el arnés corriendo sobre una copia donde la bandera no
   cargaba: la insignia apareció 7 puntos más abajo.
   ⚠ El alto sale del ANCHO de cada imagen (las tres tienen proporción
   propia), así que sólo se fija dónde empieza cada una. */
.cjc-col > *{position:absolute; left:50%; transform:translateX(-50%)}
/* los `top` son % del ALTO de la columna (43 % de la carta), y los
   anchos % de su ancho (20,1 %). Cada uno mantiene su proporción. */
/* ⚠ EL LOGO SE MIDE POR EL ALTO Y NO POR EL ANCHO. `logo-icon.png` es
   más cuadrado que el logo de la maqueta, así que pidiéndole el ancho de
   la maqueta (20,1 %) sobresalía 2,5 puntos por abajo y se acercaba a la
   insignia. Con el alto fijo y `width:auto` cada archivo mantiene su
   proporción y ninguno invade al de abajo. */
/* ⚠ EL CP AL MISMO TAMAÑO Y ALTURA QUE EN LA TARJETA DE PICK (Franco
   03/09): medido, el CP del pick está en top 14,34% y alto 8,41% de la
   carta. La columna acá va de 12% a 59% (alto 47%), así que 8,41/47 =
   18% de alto y (14,34−12)/47 = 5% de top. */
/* ⚠ CP, división y bandera TODOS centrados en el mismo eje (15,7%: entre
   el borde izquierdo 3,2% y el divisor vertical 28,2%). El CP al tamaño
   del pick; la división más grande (Franco 03/09), sin tocar el divisor. */
.cjc-cp  {top:5%;  height:18%;  width:auto; display:block}
.cjc-div {top:32%; width:108%;  height:auto; display:block}   /* división más grande, con margen al divisor */
.cjc-pais{top:77%; width:82%;   height:auto; display:block;
          border-radius:1cqw; box-shadow:0 0 0 .3cqw rgba(255,255,255,.22)}
.cjc-div[hidden], .cjc-pais[hidden]{display:none}

/* ── LA CAMISETA, CON SU LUZ ATRÁS ───────────────────────────────────
   Franco, 28/08/2026: *«a la camiseta le tenés que agregar la luz atrás
   de la misma»*.

   ⚠⚠ LA LUZ SALE DEL COLOR DEL CLUB, y del MISMO lugar que la de la
   tarjeta de pick: `COPTarjeta.luzDe(club)`. No es un degradé nuevo ni
   un color elegido acá — si lo fuera, el mismo club tendría dos luces
   distintas según la pantalla, y ésa es exactamente la clase de
   diferencia que nadie nota hasta que ve las dos juntas.
   ⚠ VA DETRÁS DE LA CAMISETA Y ENCERRADA EN SU CAJA: sin el `z-index`
   entre medio, el resplandor pasa por encima del dibujo y lo lava. */

/* ⚠⚠ LA VENTANA ES EXACTAMENTE EL CUADRADO DE LA CAMISETA, y ése es el
   arreglo de la tanda W. Franco, 28/08/2026: *«algunas tarjetas se salen
   de la tarjeta, tenés que evitar que toque el borde de la tarjeta la
   camiseta»*.

   Antes la ventana era una caja aparte (`left:42%;right:5%` = 53 % de
   ancho) y la camiseta se pedía de 70cqw ADENTRO. Una pieza de 70 dentro
   de una caja de 53 no se centra: la grilla usa alineación «segura» y la
   apoya contra el borde izquierdo, así que la camiseta arrancaba en 42 %
   y terminaba en **112 %** — doce puntos FUERA de la carta. Medido, no
   deducido: el arnés lo imprime.
   Y arrastraba dos defectos más, porque el `<span>` que la envuelve es
   el que lleva encima el dorsal: el número quedaba centrado en 77 % (el
   centro del span desbordado) en vez de en el pecho, y la luz —centrada
   en la ventana— caía 8,5 puntos a la izquierda de la camiseta.

   Con la ventana y la camiseta del MISMO tamaño no hay nada que centrar:
   las tres cosas comparten una sola caja.

   ⚠ EL TAMAÑO LO ESCRIBE EL JS (`--cjc-cam`, de `TAM_CAMISETA`), porque
   el JS lo necesita igual para el `<span>`. Escrito en los dos lados, el
   día que uno cambie vuelve el desborde exacto que estamos arreglando.
   ⚠ DÓNDE VA: la tela ocupa 15,9..83,9 % del cuadrado, así que con el
   cuadrado en 34,5..95,5 % la prenda cae en 44,2..85,7 % — el lugar de
   tu maqueta. El borde interior del marco está en 2,44..97,67 %
   (medido sobre el `.webp`), o sea 12 puntos de aire a la derecha.
   ⚠ EL ALTO: el eje de la camiseta queda a 36,2 %, el mismo eje que la
   columna de la izquierda (16,7..55,6 %), y el cuadrado termina en
   55 % — la divisoria del marco está en 62,4 %. */
/* ⚠⚠ REMEDIDA CONTRA EL ARTE NUEVO (31/08/2026), y la cuenta queda
   escrita porque es la que hay que rehacer si cambia el arte:
   en la maqueta de Franco la TELA ocupa 42,4..89,0 % de ancho y
   8,5..55,9 % de alto. La tela mide el 68 % del cuadrado de la ventana,
   así que el cuadrado es 46,6 ÷ 0,68 = 68,6 % del ancho de la carta; y
   como la carta es 1130 × 1392, ese cuadrado mide 55,7 % de su ALTO.
   El centro vertical de la tela cae en 32,2 %, y dentro del cuadrado la
   tela está centrada, así que el cuadrado arranca en 32,2 − 27,8 = 4,5 %.
   ⚠ El cuadrado y la camiseta siguen siendo LA MISMA CAJA: es lo que
   pone el dorsal en el pecho y la luz en el medio sin centrar nada. */
.cjc-ventana{
  /* ⚠ ventana cuadrada apoyada abajo en el divisor horizontal (61,2%),
     centrada en la sección de la camiseta (28,2%→95,5%). Con 66cqw de
     lado el cuadrado mide 44% del alto → arranca en 17,2%. */
  position:absolute;
  box-sizing:border-box;
  left:28.85%;
  width:var(--cjc-cam, 66cqw);
  top:17.2%;
  aspect-ratio:1;
  z-index:1;
}
/* ⚠⚠ LA LUZ NO TIENE CAJA PROPIA: ES LA CAJA DE LA CAMISETA (`inset:0`).
   Franco, 28/08/2026: *«la luz va centrada justo al medio de ella»*. Con
   una caja propia hay que acertarle al centro, y acertarle es algo que
   se puede errar —ya se erró: la luz estaba 8,5 puntos corrida—. Con la
   misma caja el centro no se calcula, se hereda.
   ⚠ Y funciona porque la tela está centrada DENTRO del cuadrado: ocupa
   15,9..83,9 % a lo ancho y 3,8..95,9 % a lo alto, o sea que el centro
   del cuadrado ES el centro de la prenda.
   ⚠⚠ Y ES TAMBIÉN LO QUE GARANTIZA QUE EL RESPLANDOR NO PISE EL MARCO
   — no los radios del degradé. Un degradé se pinta ADENTRO de su
   elemento y no puede salirse: agrandar los radios llena más la caja,
   nunca la pasa. Mientras la luz sea `inset:0` sobre el cuadrado de la
   camiseta (34,5..95,5 %), no hay forma de que llegue al 2,44..97,67 %
   del marco. Lo que sí lo rompe es darle una caja propia más grande.
   ⚠ ESTO LO DESTAPÓ UN SABOTAJE QUE NO GRITÓ: agrandé el radio al 140 %
   esperando que el resplandor se derramara sobre el neón y el arnés
   siguió en verde — con razón, porque el derrame es imposible. Lo que
   había escrito acá decía lo contrario, o sea que explicaba mal por qué
   funciona algo que sí funciona. El sabotaje quedó apuntando a la CAJA,
   que es lo único que puede salirse.
   ⚠ Los radios (64 %/62 %) son, entonces, una decisión de ASPECTO: con
   ellos el halo se apaga un poco antes del borde del cuadrado y no queda
   un corte visible. */
/* ⚠ SIN LUZ DETRÁS DE LA CAMISETA (Franco 03/09: «jamás pedí luces»). El
   fondo del marco ya trae sus líneas; la camiseta va limpia. */
.cjc-luz{ display:none !important; }
.cjc-luz--off{
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  /* ⚠⚠ LOS RADIOS BAJARON DE 64/62 A 58/56 CON EL ARTE NUEVO
     (31/08/2026), y esto lo cazó el arnés, no el ojo. La ventana creció
     de 61 a 68,6cqw y el resplandor crece con ella: medido sobre la
     captura, llegaba al 99,3 % del ancho de la carta cuando el borde
     interior del marco está en 97,67 % — o sea, se derramaba sobre el
     neón. Con 58 el halo se apaga en 96,8 % y queda adentro.
     ⚠ La cuenta, para la próxima: el degradé se apaga en 0,78 × radio,
     así que el radio máximo es (borde interior − izquierda de la
     ventana) ÷ ancho de la ventana ÷ 0,78. */
  background:radial-gradient(58% 56% at 50% 50%,
    var(--cjc-luz, #31b6ff) 0%,
    color-mix(in srgb, var(--cjc-luz, #31b6ff) 55%, transparent) 45%,
    transparent 78%);
  opacity:.85; filter:saturate(1.3);
}
.cjc-arte{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
}
/* ⚠ `>` — SÓLO EL HIJO DIRECTO, que es el retrato del creador (`foto`).
   Sin el `>` esta regla también agarraba el `<img>` de adentro de la
   camiseta y le ponía un `max-width` que se resuelve contra OTRA caja
   que la que le da el tamaño: el dibujo salía de un tamaño y el `<span>`
   que lleva el dorsal encima, de otro. */
.cjc-arte > img{max-width:100%;max-height:100%;object-fit:contain;display:block}
/* ⚠ sin club: gris y desaturada, NO una camiseta de color. `cop-camisetas.js`
   devuelve su dibujo por defecto coloreado y se leería como la camiseta de
   ALGÚN club real: el caso honesto («no sé de qué club es») terminaría
   mintiendo igual, sólo que más barato.
   ⚠ Y sin club tampoco hay luz de club: se apaga, no se inventa un color. */
.cjc-arte.sin-club{filter:grayscale(1) brightness(2.1);opacity:.55}
.cjc-ventana:has(.sin-club) .cjc-luz{opacity:.25;filter:saturate(0)}

/* ── EL PIE: el nombre y, abajo, el club ─────────────────────────────
   ⚠ LOS DOS AL MISMO CUERPO, medido de la maqueta: altura de mayúscula
   8,1 % del alto de la carta. Anton tiene mayúscula de 0,859 em y la
   carta mide 1/0,6189 de alto por cada ancho, así que el cuerpo sale
   0,081 ÷ 0,859 × (1 ÷ 0,6189) = 15,2cqw. */
/* ⚠⚠ LA CAJA OSCURA DEL PIE ES DEL DISEÑO NUEVO (31/08/2026) y va
   DEBAJO del texto pero ENCIMA del arte. En la maqueta arranca en
   68,8 % y termina en 92,3 % del alto, de borde a borde menos un
   respiro de 3,6 %.
   ⚠⚠ Y EL NOMBRE LA PISA A PROPÓSITO: en la maqueta «FRANDRAGOTTO»
   cruza el filo de arriba de la caja. No es un descuido del render —se
   ve claramente que el trazo blanco pasa por delante— y es lo que ata
   las dos líneas en un solo bloque. Por eso el nombre NO va adentro de
   la caja: va en el pie, que la solapa. */
/* ⚠ El marco nuevo ya trae su propio panel celeste en la franja de
   abajo, así que la caja oscura del diseño viejo NO va (Franco 03/09). */
.cjc-caja{ display:none; }
/* ⚠⚠ LAS TRES LÍNEAS VAN COLOCADAS UNA POR UNA, NO APILADAS CON `gap`
   (31/08/2026). Con la pila, mover el nombre movía al club y al «FAN», y
   el alto de cada renglón depende de la fuente —que llega por la red—:
   el resultado era que las tres caían donde salieran. En la maqueta cada
   una tiene su lugar: el nombre a 61,9 %, el club a 75,4 % y el «FAN» a
   88,5 % del alto. Colocadas, ahí caen, y el día que una cambie de
   cuerpo las otras dos no se mueven. */
/* ⚠ LA FRANJA DE ABAJO CON SIMETRÍA (Franco 03/09): la franja va EXACTO
   del divisor horizontal (61,2%) al borde inferior interno (86,1%), y
   `space-evenly` reparte las CUATRO distancias iguales: divisor→nombre,
   nombre→club, club→FAN y FAN→borde. Los tres textos son hijos flex. */
.cjc-pie{
  position:absolute;
  left:6%; right:6%;
  top:61.9%; bottom:13.9%;   /* ⚠ un toque más abajo: la 1ª línea despega del divisor (Franco 03/09) */
  z-index:2;
  display:flex; flex-direction:column;
  justify-content:space-evenly; align-items:center;
  text-align:center;
  font-family:'Anton','Arial Narrow',Impact,sans-serif;
  font-weight:400;
  color:#fff;
  line-height:1;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.75);
}
/* ⚠⚠ CENTRADO CON FLEX, NO CON `text-align` — la misma lección que la
   tarjeta de pick (tanda U): un texto centrado con `text-align` que NO
   ENTRA se desborda sólo hacia la derecha, así que su centro se corre y
   el `scaleX` que lo condensa gira alrededor de ese centro corrido. Con
   flex, lo que no entra se desborda por los dos lados y el centro se
   queda donde tiene que estar. */
/* ⚠ EL CUERPO SALE DE LA MAQUETA Y NO DE UN NÚMERO ELEGIDO: la altura
   de mayúscula del nombre mide 8,6 % del alto de la carta. Anton tiene
   mayúscula de 0,859 em y la carta mide 1,232 de alto por cada ancho,
   así que el cuerpo es 0,086 ÷ 0,859 × 1,232 = 12,3cqw.
   ⚠ Bajó de 15,2 porque la carta se ensanchó: el mismo `cqw` sobre una
   carta más ancha da una letra más grande. Copiar el número viejo la
   habría dejado un 24 % más grande que en tu diseño. */
.cjc-nombre, .cjc-club{
  position:static;
  display:flex; justify-content:center; align-items:center;
  width:100%;
  font-size:9.6cqw;
  line-height:1;
  white-space:nowrap;
  /* ⚠ SIN `overflow:hidden`: recorta callado y en la captura la carta
     dice otro nombre. El ancho lo resuelve `ajustar()`, midiendo. */
}
.cjc-nombre > b, .cjc-club > b{
  display:inline-block;font-weight:inherit;transform-origin:50% 50%;
}
/* los `top` son los de la maqueta menos lo que la caja de la letra
   sobresale por arriba de la mayúscula en Anton (~9 % del cuerpo) */
/* ⚠ NOMBRE Y CLUB AL MISMO TAMAÑO (Franco 03/09); el reparto vertical lo
   hace el `space-evenly` del pie, no un `top` por cada uno. */
.cjc-club{ color:rgba(255,255,255,.94) }
.cjc-club[hidden]{display:none}

/* ── LA TERCERA LÍNEA: qué es esa persona para ese club ──────────────
   En la maqueta dice «FAN», debajo del club y mucho más chica.
   ⚠⚠ NO ES UN DATO INVENTADO: la carta ya se define como «el club del
   que es hincha» —está en la firma del componente desde el 15/08—, así
   que esta línea es la PALABRA que nombra esa relación, no información
   nueva sobre la persona. Por eso tiene un valor por defecto y no un
   hueco: sin ella el club queda suelto y no se sabe qué significa.
   ⚠ Y es un parámetro (`tipo`), no un texto fijo: el día que haya
   cartas de otra relación —jugador, socio, campeón— cambia el que la
   pinta y no este archivo.
   ⚠ VA EN INTER Y NO EN ANTON: en la maqueta es una letra normal, no
   condensada. Con Anton se leería como un tercer nombre. */
.cjc-tipo{
  position:static;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:800;
  font-size:4.4cqw;
  line-height:1;
  /* ⚠ .06 Y NO .12: con el espaciado grande «FAN» se lee «F A N», tres
     letras sueltas. En la maqueta las tres están juntas. */
  letter-spacing:.06em;
  color:rgba(255,255,255,.62);
  text-shadow:none;
}
.cjc-tipo[hidden]{display:none}

/* ══ LA CARTA v2 (Franco, 07/10/2026) ═════════════════════════════════
   El arte de Franco por rareza (marca/cartas/v2/marco-<rareza>.webp, de
   1052×1328) y todo lo demás encima, medido sobre su maqueta: cada
   posición es su píxel ÷ 1052 (ancho) o ÷ 1328 (alto), y cada letra en
   `cqw` (px ÷ 10,52), así la carta se ve igual en la grilla de la tienda
   y en grande. Tipografía: Inter 800 (la que ya carga la app; es la más
   parecida a la de la maqueta). */
.cjc--v2{ --cjc-prop:1052 / 1328; aspect-ratio:1052 / 1328; font-family:'Inter', system-ui, sans-serif; }
.cjc--v2 > *{ position:absolute; margin:0; }
.cj2-marco{ inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.cj2-ventana{ left:23.57%; top:3.16%; width:72.91%; height:70.93%; overflow:hidden;
  border-top-right-radius:4.4cqw; }
.cj2-foto{ position:absolute; bottom:0; left:50%; height:94%; width:auto; max-width:none;
  transform:translateX(-50%); display:block; }
.cj2-cp{ left:5.51%; top:11.22%; width:15.2%; height:auto; }
.cj2-div{ left:5.6%; top:23.6%; width:15%; height:auto; filter:drop-shadow(0 .4cqw .8cqw rgba(0,0,0,.5)); }
.cj2-val, .cj2-pais{ left:3.33%; width:19.96%; display:flex; flex-direction:column; align-items:center; text-align:center; }
.cj2-val{ top:42.6%; }
.cj2-val span, .cj2-pais span{ font-size:3.9cqw; font-weight:700; letter-spacing:.04em; color:#e6eaf0; line-height:1.1; }
.cj2-val b{ font-size:8.6cqw; font-weight:800; color:#fff; line-height:1; margin-top:.9cqw; letter-spacing:-.01em; }
.cj2-pais{ top:58.9%; }
.cj2-pais img{ width:56%; height:auto; margin-top:1.7cqw; display:block; box-shadow:0 .3cqw .8cqw rgba(0,0,0,.45); }
.cj2-nombre, .cj2-sub{ left:5%; width:90%; display:flex; justify-content:center; white-space:nowrap; text-transform:uppercase; }
.cj2-nombre b, .cj2-sub b{ display:inline-block; transform-origin:center; font-weight:800; }
.cj2-nombre{ top:78.3%; }
.cj2-nombre b{ font-size:8.1cqw; line-height:1; color:#fff; letter-spacing:.01em; text-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.55); }
.cj2-sub{ top:85.9%; }
.cj2-sub b{ font-size:5.6cqw; line-height:1; color:#e8ebf1; letter-spacing:.015em; }

/* 08/10/2026 · la skin y su fondo adentro de la ventana (cosmeticos2) */
.cj2-fondo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cj2-con-skin .cj2-skin{ height:100%; width:100%; object-fit:contain; object-position:50% 100%; left:0; transform:none; }