/* ══════════════════════════════════════════════════════════════════
   cop-cosmeticos.css · LOS COSMÉTICOS (economía v3 · tanda 8 · 30/09/2026)
   ------------------------------------------------------------------
   La tienda de cosméticos (pestaña «Estilo» de tienda.html), las piezas
   PROVISORIAS (marcos, fondos, camisetas CP, efecto de victoria,
   reacciones y brillo) y cómo se ve lo equipado en el perfil y en los
   rankings. Regla de hierro (ECONOMIA-V3 §4.4): sólo se ven.
   ⚠ Todo color sale de los tokens del sistema o de `estilo` de la pieza
   (que usa los mismos cinco colores). El arte definitivo lo hace Franco
   y entra por `cosmeticos.imagen` (ver cop-cosmeticos.js).
   ══════════════════════════════════════════════════════════════════ */

/* ══ 1 · LAS PIEZAS PROVISORIAS ═════════════════════════════════════ */

/* ── FONDO: degradés del sistema, detrás de lo que decoran ─────────── */
.cos-fondo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;display:block;
  background-color:transparent;
}
.cos-fondo--foco{
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(var(--cos-a),.55) 0%, rgba(var(--cos-a),.16) 42%, rgba(var(--cos-a),0) 72%),
    linear-gradient(180deg, rgba(var(--cos-b),.55), rgba(var(--cos-b),0) 80%);
}
.cos-fondo--diagonal{
  background:
    linear-gradient(125deg, rgba(var(--cos-a),.55) 0%, rgba(var(--cos-a),0) 52%),
    linear-gradient(305deg, rgba(var(--cos-b),.5) 0%, rgba(var(--cos-b),0) 52%);
}
.cos-fondo--aurora{
  background:
    radial-gradient(60% 70% at 18% 8%,  rgba(var(--cos-a),.5), rgba(var(--cos-a),0) 70%),
    radial-gradient(55% 65% at 84% 0%,  rgba(var(--cos-b),.5), rgba(var(--cos-b),0) 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(var(--cos-c),.3), rgba(var(--cos-c),0) 70%);
  background-size:160% 160%, 160% 160%, 100% 100%;
  animation:cos-aurora 16s ease-in-out infinite alternate;
}
.cos-fondo--img{ background:var(--cos-img) center/cover no-repeat }
@keyframes cos-aurora{
  from{ background-position:0% 0%, 100% 0%, 50% 100% }
  to  { background-position:40% 30%, 60% 25%, 50% 100% }
}

/* ── BRILLO DEL NOMBRE: una luz que recorre las letras ─────────────── */
.cos-brillo{
  --cos-br:12,149,235;
  background:linear-gradient(100deg, var(--text,#f4f6fb) 0%, var(--text,#f4f6fb) 36%,
             rgb(var(--cos-br)) 47%, #fff 50%, rgb(var(--cos-br)) 53%, var(--text,#f4f6fb) 64%, var(--text,#f4f6fb) 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 .32em rgba(var(--cos-br),.42));
  animation:cos-brillo 3.6s ease-in-out infinite;
}
@keyframes cos-brillo{ 0%{background-position:100% 0} 55%,100%{background-position:0% 0} }

/* ── MARCO: la luz de los niveles altos, recortada a la forma de la carta
   (la máscara ES el archivo del marco: fuera de la carta no se pinta) ── */
.cos-mf{ position:relative; --cos-glow:12,149,235 }
.cos-mf::after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  -webkit-mask:var(--cos-mask) center/100% 100% no-repeat;
          mask:var(--cos-mask) center/100% 100% no-repeat;
}
.cos-mf--barrido::after{
  background:linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 62%);
  background-size:320% 100%;background-position:120% 0;
  mix-blend-mode:screen;
  animation:cos-barrido 3.8s ease-in-out infinite;
}
@keyframes cos-barrido{ 0%{background-position:120% 0} 55%,100%{background-position:-20% 0} }
.cos-mf--doble{ animation:cos-doble 4.5s ease-in-out infinite }
@keyframes cos-doble{
  0%,100%{ filter:drop-shadow(0 0 .55rem rgba(12,149,235,.75)) }
  50%    { filter:drop-shadow(0 0 .55rem rgba(157,43,255,.8)) }
}
.cos-mf--pulso{ animation:cos-pulso 3.2s ease-in-out infinite }
@keyframes cos-pulso{
  0%,100%{ filter:drop-shadow(0 0 .2rem rgba(var(--cos-glow),.35)) }
  50%    { filter:drop-shadow(0 0 .7rem rgba(var(--cos-glow),.85)) }
}

/* ── CAMISETA CP ─────────────────────────────────────────────────── */
.cos-cam{ display:block;width:100%;height:auto }
.rk-mini img.cos-cam-rk{ object-fit:contain }

/* ── REACCIONES: el pack como fichas ─────────────────────────────── */
.cos-reac{ display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;width:74% }
.cos-reac i{
  font-style:normal;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;
  font-size:clamp(1rem, 6cqw, 1.45rem);line-height:1;
  background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.1), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

/* ── EFECTO DE VICTORIA: se juega sobre un escenario ─────────────── */
.cos-fx{ position:absolute;inset:-12%;z-index:6;pointer-events:none;overflow:visible;--cos-fx:12,149,235 }
.cos-fx img{ position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;animation:cos-destello 1.4s ease-out forwards }
.cos-fx--destello{
  background:radial-gradient(circle, rgba(var(--cos-fx),.9) 0, rgba(var(--cos-fx),.35) 28%, rgba(var(--cos-fx),0) 60%);
  animation:cos-destello 1.2s ease-out forwards;
}
.cos-fx--destello::after{
  content:'';position:absolute;inset:18%;border-radius:50%;
  box-shadow:0 0 0 3px rgba(var(--cos-fx),.9), 0 0 1.4rem rgba(var(--cos-fx),.7);
  animation:cos-anillo 1.1s ease-out forwards;
}
@keyframes cos-destello{ 0%{opacity:0;transform:scale(.3)} 18%{opacity:1} 100%{opacity:0;transform:scale(1.5)} }
@keyframes cos-anillo{ 0%{opacity:1;transform:scale(.2)} 100%{opacity:0;transform:scale(1.3)} }
.cos-fx--papelitos i{
  position:absolute;top:0;left:var(--x);width:6px;height:11px;border-radius:1px;
  background:rgb(var(--c));opacity:0;
  animation:cos-cae 1.5s var(--d) cubic-bezier(.3,.6,.5,1) forwards;
}
/* ⚠ cae con `top` y no con translateY: el % de un translate es del
   PAPELITO (11 px), no del escenario */
@keyframes cos-cae{
  0%  { opacity:1;top:-4%;transform:rotate(0) }
  85% { opacity:1 }
  100%{ opacity:0;top:96%;transform:rotate(var(--r)) translateX(12px) }
}
.cos-fx--rayo{ overflow:hidden;animation:cos-flash 1.3s ease-out forwards }
.cos-fx--rayo i{
  position:absolute;left:-20%;top:46%;width:140%;height:14px;border-radius:7px;
  background:linear-gradient(90deg, rgba(var(--cos-fx),0), rgba(var(--cos-fx),1) 40%, #fff 50%, rgba(var(--cos-fx),1) 60%, rgba(var(--cos-fx),0));
  box-shadow:0 0 1.2rem rgba(var(--cos-fx),.9);
  transform:rotate(-28deg) translateX(-110%);
  animation:cos-rayo .75s .1s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes cos-rayo{ to{ transform:rotate(-28deg) translateX(110%) } }
@keyframes cos-flash{ 0%,100%{background:transparent} 30%{background:rgba(var(--cos-fx),.22)} }
.cos-fx--onda i{
  position:absolute;inset:25%;border-radius:50%;
  box-shadow:0 0 0 2px rgba(var(--cos-fx),.95), 0 0 1rem rgba(var(--cos-fx),.6);
  opacity:0;animation:cos-anillo 1.2s ease-out forwards;
}
.cos-fx--onda i:nth-child(2){ animation-delay:.22s }
.cos-fx--onda i:nth-child(3){ animation-delay:.44s }
.cos-fx--quieto{ box-shadow:inset 0 0 0 3px rgba(var(--cos-fx),.8), inset 0 0 2rem rgba(var(--cos-fx),.45);border-radius:var(--r-card,14px) }

/* ══ 2 · LA TIENDA (pestaña «Estilo») ═══════════════════════════════ */
.cos-tienda{ box-sizing:border-box;position:relative }
.cos-tienda *, .cos-tienda *::before, .cos-tienda *::after{ box-sizing:border-box }
.cos-tienda[hidden]{ display:none }
.cos-tienda .sec-head{ margin-bottom:var(--gap-lg, 1rem);flex-wrap:wrap;row-gap:var(--gap-xs, .3rem) }
.cos-sec{ margin-top:var(--gap-2xl, 1.8rem) }
.cos-sub{ margin:calc(-1 * var(--gap-sm, .5rem)) 0 var(--gap-lg, 1rem);font-size:var(--fs-md, .88rem);color:var(--text-dim,#9aa3b5);line-height:var(--lh-base, 1.3) }
.cos-vacio{ margin:var(--gap-lg, 1rem) 0;color:var(--text-dim,#9aa3b5);font-size:var(--fs-md, .88rem) }
.cos-regla{ margin:var(--gap-2xl, 1.8rem) 0 0;text-align:center;color:var(--text-faint,#5a6275);font-size:var(--fs-sm, .8rem) }

/* el reloj de la vidriera, a la derecha del título */
.cos-reloj{
  margin-left:auto;display:inline-flex;align-items:center;gap:var(--gap-xs, .3rem);white-space:nowrap;
  font:700 var(--fs-sm, .8rem)/1 Inter,sans-serif;color:var(--text-dim,#9aa3b5);
}
.cos-reloj::before{
  content:'';width:.55rem;height:.55rem;border-radius:50%;
  background:rgb(var(--cop-acento-rgb,12,149,235));box-shadow:0 0 .5rem rgba(var(--cop-acento-rgb,12,149,235),.8);
}
.cos-reloj--t::before{ background:var(--gold,#ffc233);box-shadow:0 0 .5rem rgba(255,194,51,.8) }

/* ── EL PROBADOR: tu carta con lo que te probás encima ─────────────── */
.cos-prob{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:minmax(104px, 36%) 1fr;align-items:center;
  gap:var(--gap-lg, 1rem);padding:0 0 var(--gap-sm, .5rem);   /* el aire de arriba ya lo da la fila de pestañas */
}
/* al tocar una pieza abajo, el probador sube a la vista DEBAJO de la barra de arriba */
.cos-prob{ scroll-margin-top:calc(var(--topbar-h, 64px) + var(--gap-lg, 1rem)) }
.cos-prob > .cos-fondo{
  inset:calc(-1 * var(--gap-lg, 1rem)) calc(-1 * var(--aire-contenido, 16px)) 0;
  -webkit-mask:radial-gradient(ellipse 80% 75% at 40% 45%, #000 35%, transparent 100%);
          mask:radial-gradient(ellipse 80% 75% at 40% 45%, #000 35%, transparent 100%);
}
.cos-prob-carta{ position:relative;filter:drop-shadow(0 18px 26px rgba(0,0,0,.55)) }
.cos-prob-info{ min-width:0 }
.cos-prob-alias{ margin:0 }
.cos-prob-alias b{
  display:inline-block;max-width:100%;
  font:400 var(--fs-2xl, 1.5rem)/1.05 Anton,Inter,sans-serif;letter-spacing:.4px;text-transform:uppercase;
  overflow-wrap:anywhere;color:var(--text,#f4f6fb);
}
.cos-prob-cam{
  display:flex;align-items:center;gap:var(--gap-sm, .5rem);margin:var(--gap-sm, .5rem) 0 0;
  font-size:var(--fs-sm, .8rem);font-weight:600;color:var(--text,#f4f6fb);
}
.cos-prob-kit{ width:26px;flex:0 0 26px }
.cos-dim{ color:var(--text-dim,#9aa3b5) }
.cos-prob-pista{ margin:var(--gap-lg, 1rem) 0 0;font-size:var(--fs-md, .88rem);color:var(--text-dim,#9aa3b5);line-height:var(--lh-base, 1.3) }
.cos-prob-cat{
  margin:var(--gap-lg, 1rem) 0 var(--gap-xs, .3rem);font-size:var(--fs-xs, .72rem);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:rgb(var(--cop-acento-rgb,12,149,235));
}
.cos-prob-nom{ margin:0;font:800 var(--fs-lg, 1.15rem)/var(--lh-tight, 1.1) Inter,sans-serif;color:var(--text,#f4f6fb);overflow-wrap:anywhere }
.cos-ver-ef{
  margin:var(--gap-sm, .5rem) 0 0;padding:0;border:0;background:none;cursor:pointer;
  font:700 var(--fs-sm, .8rem) Inter,sans-serif;color:rgb(var(--cop-acento-rgb,12,149,235));
}
.cos-ver-ef::before{ content:'▶';margin-right:.35rem;font-size:.7em }
.cos-prob-acc{ margin-top:var(--gap-md, .7rem) }
.cos-cta{ width:100%;gap:var(--gap-xs, .3rem) }
.cos-cta .cop-ico--moneda{ --cop-ico:18px }
.cos-nota{ margin:var(--gap-sm, .5rem) 0 0;font-size:var(--fs-sm, .8rem);color:var(--text-dim,#9aa3b5);line-height:var(--lh-base, 1.3) }
.cos-msg{ margin:var(--gap-xs, .3rem) 0 0;min-height:1em;font-size:var(--fs-sm, .8rem);font-weight:700;color:var(--ok,#22c55e) }
.cos-msg:empty{ display:none }
.cos-msg.mal{ color:var(--red,#ff3b5c) }

/* ── LA BALDOSA DE UNA PIEZA ─────────────────────────────────────── */
.cos-pieza{
  display:flex;flex-direction:column;gap:var(--gap-xs, .3rem);min-width:0;
  padding:0;margin:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;
  font:inherit;-webkit-tap-highlight-color:transparent;
}
.cos-arte{
  position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate;
  aspect-ratio:1;border-radius:var(--r-card, 14px);
  background:radial-gradient(90% 70% at 50% 35%, rgba(255,255,255,.05), rgba(255,255,255,0)), var(--panel,#11161f);
  box-shadow:inset 0 0 0 1px var(--card-border,#1e2330);
  container-type:inline-size;
  transition:box-shadow .18s ease, transform .18s ease;
}
.cos-pieza.sel .cos-arte{
  box-shadow:inset 0 0 0 2px rgb(var(--cop-acento-rgb,12,149,235)), 0 0 1.1rem rgba(var(--cop-acento-rgb,12,149,235),.35);
}
.cos-pieza:active .cos-arte{ transform:scale(.98) }
.cos-pieza:focus-visible{ outline:none }
.cos-pieza:focus-visible .cos-arte{ box-shadow:inset 0 0 0 2px #fff }
@media (hover:hover) and (pointer:fine){
  .cos-pieza:not(.sel):hover .cos-arte{ box-shadow:inset 0 0 0 1px rgba(var(--cop-acento-rgb,12,149,235),.6) }
}
.cos-pieza.bloq .cos-arte > :not(.cos-candado):not(.cos-est){ filter:grayscale(.55) brightness(.75) }
.cos-nom{
  display:block;font-size:var(--fs-md, .88rem);font-weight:700;color:var(--text,#f4f6fb);
  line-height:var(--lh-tight, 1.1);overflow-wrap:anywhere;   /* se parte, no se corta */
}
.cos-nivel{
  display:block;margin-top:var(--gap-xs, .3rem);font-size:var(--fs-xs, .72rem);font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-dim,#9aa3b5);overflow-wrap:anywhere;
}
.cos-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;font-size:var(--fs-sm, .8rem);color:var(--text-dim,#9aa3b5);min-width:0 }
.cos-meta--gana{ color:var(--gold,#ffc233);font-weight:700 }
.cos-precio{ display:inline-flex;align-items:center;gap:.2rem;color:var(--text,#f4f6fb) }
.cos-precio b{ font-weight:800 }
.cos-precio .cop-ico--moneda{ --cop-ico:15px }
.cos-est{
  position:absolute;top:.45rem;left:.45rem;z-index:3;
  padding:.18rem .45rem;border-radius:999px;font-style:normal;
  font:800 var(--fs-xs, .72rem)/1 Inter,sans-serif;letter-spacing:.03em;text-transform:uppercase;
  color:var(--text,#f4f6fb);background:rgba(15,15,15,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.cos-est--on{ background:rgb(var(--cop-acento-rgb,12,149,235));box-shadow:none }
.cos-candado{ position:absolute;right:.5rem;bottom:.5rem;z-index:3;width:18px;height:18px;color:var(--gold,#ffc233) }
.cos-candado svg{ width:100%;height:100% }

/* el arte de cada categoría adentro de la baldosa */
.cos-a-marco{ display:block;width:52%;position:relative }
.cos-a-marco img{ display:block;width:100%;height:auto }
.cos-a-fondo{ position:absolute;inset:0;display:grid;place-items:center;z-index:0 }
.cos-a-fondo .cos-fondo{ z-index:0;filter:saturate(1.25) brightness(1.35) }   /* en chico se lee más apagado que en la cabecera */
.cos-a-fondo-carta{
  position:relative;z-index:1;width:34%;aspect-ratio:.72;border-radius:6px;
  background:rgba(15,15,15,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.cos-a-cam{ display:block;width:58% }
.cos-a-ef{ position:absolute;inset:0;display:grid;place-items:center }
.cos-a-ef b{
  font:400 clamp(1.1rem, 13cqw, 1.5rem)/1 Anton,Inter,sans-serif;letter-spacing:.5px;color:var(--text,#f4f6fb);
  text-shadow:0 0 .6em rgba(var(--cop-acento-rgb,12,149,235),.8);
}
.cos-arte--efecto_victoria::before{
  content:'';position:absolute;inset:18%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, rgba(var(--cop-acento-rgb,12,149,235),.35), rgba(var(--cop-acento-rgb,12,149,235),0) 70%);
}
.cos-a-brillo{ padding:0 .6rem;max-width:100% }
.cos-a-brillo b{
  display:block;font:400 clamp(.95rem, 12cqw, 1.3rem)/1.1 Anton,Inter,sans-serif;text-transform:uppercase;letter-spacing:.4px;
  text-align:center;overflow-wrap:anywhere;
}

/* la vidriera: una tira que se desliza (teléfono) o una fila de 6 (compu) */
.cos-vid{
  display:grid;grid-auto-flow:column;grid-auto-columns:40%;gap:var(--gap-md, .7rem);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior-x:contain;touch-action:pan-x pan-y;
  margin:0 calc(-1 * var(--aire-contenido, 16px));padding:0 var(--aire-contenido, 16px) var(--gap-xs, .3rem);
  scroll-padding:0 var(--aire-contenido, 16px);
}
.cos-vid::-webkit-scrollbar{ display:none }
.cos-vid > .cos-pieza{ scroll-snap-align:start }
.cos-grilla{ display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--gap-lg, 1rem) var(--gap-md, .7rem) }
.cos-chips{ margin-bottom:var(--gap-lg, 1rem) }

@media (min-width:600px){
  .cos-grilla{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .cos-vid{ grid-auto-columns:28% }
}
/* ⚠ EN LA COMPU: el probador queda FIJO a la izquierda y la tienda corre a
   la derecha — lo que tocás se ve puesto sin volver a subir. */
@media (min-width:980px){
  .cos-tienda{ display:grid;grid-template-columns:minmax(260px, 320px) minmax(0,1fr);column-gap:var(--gap-2xl, 1.8rem);align-items:start }
  .cos-tienda > .cos-prob{
    grid-column:1;grid-row:1 / span 20;position:sticky;top:calc(var(--topbar-h, 64px) + var(--gap-lg, 1rem));
    grid-template-columns:1fr;padding:var(--gap-xl, 1.2rem);border-radius:var(--r-card, 14px);
  }
  .cos-tienda > .cos-prob > .cos-fondo{ inset:0;border-radius:var(--r-card, 14px);-webkit-mask:none;mask:none }
  .cos-tienda > .cos-prob .cos-prob-carta{ width:62%;margin:0 auto }
  .cos-tienda > .cos-prob .cos-prob-info{ text-align:left }
  .cos-tienda > :not(.cos-prob){ grid-column:2 }
  .cos-tienda > .cos-sec:first-of-type, .cos-tienda > .cos-prob + .cos-sec{ margin-top:0 }
  .cos-vid{ grid-auto-flow:row;grid-template-columns:repeat(3, minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:var(--gap-lg, 1rem) var(--gap-md, .7rem) }
  .cos-grilla{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .cos-regla{ text-align:left }
}

/* ══ 3 · EN EL PERFIL ═══════════════════════════════════════════════ */
/* el fondo detrás de la cabecera: de borde a borde en el teléfono, con la
   misma caja de la columna en la compu; se funde hacia abajo */
.pa-hero > .cos-fondo{
  /* ⚠ dentro de la columna: el contenedor del perfil recorta lo que se
     salga, y un recorte recto se ve como caja. La máscara llega a cero
     antes de los bordes. */
  inset:calc(-1 * var(--cop-main-arriba, .9rem)) 0 25%;
  /* ⚠ SIN BORDES: se funde por los cuatro lados. Con un corte recto la
     columna lo recortaba y se leía como una caja (regla 1 del sistema) */
  -webkit-mask:radial-gradient(ellipse 50% 62% at 50% 34%, #000 30%, transparent 100%);
          mask:radial-gradient(ellipse 50% 62% at 50% 34%, #000 30%, transparent 100%);
}
.cos-personalizar{
  display:inline-flex;align-items:center;gap:var(--gap-xs, .3rem);
  margin:calc(-1 * var(--gap-sm, .5rem)) auto var(--gap-lg, 1rem);
  font:700 var(--fs-sm, .8rem)/1 Inter,sans-serif;color:rgb(var(--cop-acento-rgb,12,149,235));text-decoration:none;
  padding:.35rem .2rem;
}
.cos-personalizar svg{ width:15px;height:15px }
@media (hover:hover) and (pointer:fine){ .cos-personalizar:hover{ text-decoration:underline } }

/* ══ 3b · EL PERFIL PROPIO · PESTAÑA «ESTILO» (opción C · 30/09/2026) ═
   Franco: «que se pueda editar desde el perfil lo comprado en la tienda en
   la tab de estilo». Arriba la MISMA vitrina del probador (`.cos-prob`,
   acá `.cos-vit`); abajo una FILA por categoría —no una caja—, separadas
   con una línea como toda lista de la app, y «Cambiar» abre la hoja
   compartida (`cop-ui-hoja.css`) con tus piezas. */
.cos-estilo{ box-sizing:border-box;position:relative }
.cos-estilo *, .cos-estilo *::before, .cos-estilo *::after, .cos-hoja *, .cos-hoja *::before, .cos-hoja *::after{ box-sizing:border-box }
.cos-vit{ margin-bottom:var(--gap-lg, 1rem) }
.cos-vit > .cos-fondo{
  /* ⚠ sin salirse de la columna del perfil: fundido por los cuatro lados */
  inset:calc(-1 * var(--gap-lg, 1rem)) 0;
  -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
          mask:radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
}
.cos-slots{ display:block }
.cos-slot{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;
  gap:var(--gap-lg, 1rem);padding:var(--gap-lg, 1rem) 0;
  border-bottom:1px solid var(--card-border,#1e2330);
}
.cos-slot:last-child{ border-bottom:0 }
.cos-slot > .cos-arte{ width:56px }
.cos-slot-vacio{
  display:block;width:56px;aspect-ratio:1;border-radius:var(--r-card, 14px);
  border:1.5px dashed rgba(255,255,255,.16);
}
.cos-slot-txt{ display:flex;flex-direction:column;gap:2px;min-width:0 }
.cos-slot-cat{
  font-size:var(--fs-xs, .72rem);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dim,#9aa3b5);overflow-wrap:anywhere;
}
.cos-slot-nom{
  font-size:var(--fs-base, 1rem);font-weight:700;color:var(--text,#f4f6fb);
  line-height:var(--lh-tight, 1.1);overflow-wrap:anywhere;
}
.cos-slot-nota{ font-size:var(--fs-xs, .72rem);font-weight:600;color:var(--text-faint,#5a6275) }
.cos-est-pie{ display:flex;justify-content:center;margin-top:var(--gap-xl, 1.2rem) }

/* ── LA HOJA «CAMBIAR»: tus piezas de esa categoría + «Ninguno» ───── */
.cos-hoja-grilla{ display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:var(--gap-lg, 1rem) var(--gap-md, .7rem) }
.cos-arte--nada{ background:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12) }
.cos-op-nada{
  position:relative;display:block;width:38%;aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(255,255,255,.28);
}
.cos-op-nada::after{
  content:'';position:absolute;left:50%;top:-8%;width:2px;height:116%;
  background:rgba(255,255,255,.28);transform:translateX(-50%) rotate(45deg);
}
.cos-op.cargando{ pointer-events:none }
.cos-op.cargando .cos-arte{ animation:cos-cargando .9s ease-in-out infinite alternate }
@keyframes cos-cargando{ from{ opacity:1 } to{ opacity:.45 } }
.cos-hoja .cos-msg{ margin-top:var(--gap-md, .7rem);text-align:center }
.cos-hoja-mas{
  display:block;margin:var(--gap-lg, 1rem) auto 0;width:max-content;max-width:100%;padding:.35rem .2rem;
  font:700 var(--fs-sm, .8rem)/1.2 Inter,sans-serif;color:rgb(var(--cop-acento-rgb,12,149,235));text-decoration:none;
}
@media (hover:hover) and (pointer:fine){ .cos-hoja-mas:hover{ text-decoration:underline } }

/* ══ 4 · MENOS MOVIMIENTO: todo quieto, las piezas se siguen viendo ═══ */
@media (prefers-reduced-motion: reduce){
  .cos-brillo{ animation:none;background-position:50% 0 }
  .cos-fondo--aurora{ animation:none }
  .cos-mf--barrido::after{ animation:none;background-position:50% 0;opacity:.6 }
  .cos-mf--doble{ animation:none;filter:drop-shadow(0 0 .45rem rgba(12,149,235,.7)) drop-shadow(0 0 .45rem rgba(157,43,255,.5)) }
  .cos-mf--pulso{ animation:none;filter:drop-shadow(0 0 .45rem rgba(var(--cos-glow),.7)) }
  .cos-arte{ transition:none }
  .cos-op.cargando .cos-arte{ animation:none;opacity:.55 }
}

/* 08/10/2026 (cosmeticos2): la pieza se muestra puesta en la carta */
.cos-a-carta{ display:block; width:min(100%, 132px); margin:0 auto; }
.cos-a-carta .cjc{ width:100%; }
.cos-prob-cam{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:var(--gap-xs, .3rem); }
.cos-prob-capa{ display:flex; flex-direction:column; line-height:1.2; }
.cos-prob-capa small{ font:700 var(--fs-xs, .72rem)/1.2 'Inter',sans-serif; color:var(--text-dim, #9aa3b5); text-transform:uppercase; letter-spacing:.04em; }

/* ══ 09/10/2026 · PERSONALIZAR: TU CARTA Y TU SKIN (cosmeticos3) ═════════
   Dos grupos: lo de la carta y la skin suelta (camiseta o skin) con su
   borde. El editor de la camiseta se MUDÓ acá desde «Editar perfil». */
.cos-grupo{ margin:var(--gap-xl, 1.3rem) 0 0;font:400 var(--fs-xl, 1.3rem)/1.1 Anton,Inter,sans-serif;letter-spacing:.4px;text-transform:uppercase;color:var(--text,#f4f6fb) }
.cos-grupo-nota{ margin:var(--gap-xs, .3rem) 0 0;font-size:var(--fs-sm, .8rem);font-weight:600;color:var(--text-dim,#9aa3b5) }
.cos-arte--mini{ background:none;box-shadow:none;overflow:visible }
.cos-slot > .cos-arte--mini{ aspect-ratio:auto;padding:3px 0 }
.cos-slot .cos-mini{ --mini-w:46px;margin:0 auto }
.cos-a-borde{ display:grid;place-items:center;width:100% }
.cos-a-borde .cos-mini{ --mini-w:52%;width:52% }
.cos-a-suelta{ display:block;width:100%;height:100%;padding:8% 10% 0 }
.cos-a-suelta img{ display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100% }
/* la vitrina: la mini tarjeta apoyada en la esquina de la carta */
.cos-prob-suelta{ position:absolute;right:-8px;bottom:-6px;z-index:2;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6)) }
.cos-prob-suelta .cos-mini{ --mini-w:44px }
/* la hoja de la skin suelta: Camiseta | Skin */
.cos-seg{ display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 var(--gap-lg, 1rem);
  border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--card-border,#1e2330) }
.cos-seg-b{ min-height:40px;border:0;border-radius:999px;background:none;cursor:pointer;
  font:800 var(--fs-sm, .8rem)/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim,#9aa3b5);
  -webkit-tap-highlight-color:transparent;transition:background .18s, color .18s }
.cos-seg-b.on{ background:rgb(var(--cop-acento-rgb,12,149,235));color:#fff }
.cos-seg-b:focus-visible{ outline:2px solid #fff;outline-offset:2px }
.cos-hoja-pista{ margin:0 0 var(--gap-lg, 1rem);font-size:var(--fs-md, .88rem);color:var(--text-dim,#9aa3b5);line-height:var(--lh-base, 1.3) }
.cos-cam{ display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--gap-lg,1rem);align-items:start }
.cos-cam-vista{ display:block;width:112px;height:auto;aspect-ratio:2/3;max-width:100% }
.cos-cam-vista.sin{ opacity:.25 }
.cos-cam-datos{ display:flex;flex-direction:column;gap:var(--gap-md, .7rem);min-width:0 }
.cos-cam-in{ display:flex;flex-direction:column;gap:.3rem;min-width:0 }
.cos-cam-in > small{ align-self:stretch;display:flex;justify-content:space-between;font:800 var(--fs-xs, .72rem) Inter,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-faint,#5a6275) }
.cos-cam-in > small em{ font-style:normal;letter-spacing:0;font-variant-numeric:tabular-nums }
.cos-cam-in :is(input,select){ box-sizing:border-box;width:100%;border-radius:var(--r-card,14px);
  border:1px solid var(--card-border,#1e2330);background:var(--bg,#0b0e14);color:#fff;
  font:600 1rem Inter,sans-serif;padding:var(--gap-md, .7rem);outline:none;transition:border-color .2s;min-height:44px }
.cos-cam-in select{ appearance:none;-webkit-appearance:none;padding-right:2rem;
  background-image:linear-gradient(45deg,transparent 50%,#9aa3b5 50%),linear-gradient(135deg,#9aa3b5 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px;background-repeat:no-repeat }
.cos-cam-in :is(input,select):focus{ border-color:rgb(var(--cop-acento-rgb,12,149,235)) }
.cos-cam-in input[type=number]{ -moz-appearance:textfield;appearance:textfield }
.cos-cam-in input[type=number]::-webkit-inner-spin-button,.cos-cam-in input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none;margin:0 }
#cosCamNombre{ text-transform:uppercase;letter-spacing:1px }
.cos-cam-nota{ margin:var(--gap-md, .7rem) 0 0;font:600 var(--fs-xs, .72rem) Inter,sans-serif;color:var(--text-faint,#5a6275) }
.cos-cam-usar{ display:flex;width:100%;margin-top:var(--gap-lg, 1rem) }
@media (max-width:359px){ .cos-cam{ grid-template-columns:1fr } .cos-cam-vista{ width:128px;margin-inline:auto } }

/* ══ 16/10/2026 · LA VITRINA «ELEGÍ TU ESTILO» ═══════════════════════════
   Franco: «el nombre de usuario centrado; abajo, a la DERECHA la carta del
   usuario entera, y a la IZQUIERDA la skin sola sin borde, entera, del
   mismo tamaño que la carta. SIN descripciones: todo visual». La usan la
   tienda y la pestaña «Personalizar» del perfil (un solo dibujo).
   Los dos lados son la MISMA caja (proporción de la carta v2, 1052/1328):
   la skin se apoya en el piso de esa caja, así miden lo mismo. */
.cos-prob.cos-v2{ display:block;padding:0 0 var(--gap-lg, 1rem);text-align:center }
.cos-v2::before{   /* la luz detrás del par: redonda, sin caja */
  content:'';position:absolute;z-index:-1;left:50%;top:44%;width:min(120%, 560px);aspect-ratio:1.5;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--cop-acento-rgb,12,149,235),.20), rgba(var(--cop-acento-rgb,12,149,235),.06) 55%, transparent);
}
.cos-v2 .cos-prob-alias{ margin:0 0 var(--gap-lg, 1rem);text-align:center }
.cos-v2 .cos-prob-alias b{ font-size:var(--fs-2xl, 1.5rem) }
.cos-v2-par{ display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--gap-lg, 1rem);align-items:start }
.cos-v2-lado{ display:flex;flex-direction:column;align-items:stretch;gap:var(--gap-md, .7rem);min-width:0 }
.cos-v2-arte{ position:relative;width:100%;aspect-ratio:1052 / 1328;display:grid;place-items:end center }
.cos-v2-arte.cos-prob-carta{ place-items:center;filter:drop-shadow(0 18px 26px rgba(0,0,0,.55)) }
.cos-v2-arte .cjc{ width:100% }
.cos-v2-suelta{
  display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.6));
}
.cos-v2-suelta[data-sk="camiseta"]{ object-position:50% 50%;padding:6% 4% }
.cos-v2-mini{ display:grid;place-items:center;width:100%;height:100% }
.cos-v2-mini .cos-mini{ --mini-w:74% }
/* el botón de cada lado: apagado hasta que te probás algo de la tienda */
.cos-v2-comprar{ width:100%;gap:var(--gap-xs, .3rem);white-space:nowrap }
.cos-v2-comprar:disabled{ opacity:.42;cursor:default }
.cos-v2-comprar .cop-ico--moneda{ --cop-ico:16px }
.cos-v2-nota{ margin:var(--gap-md, .7rem) 0 0;font-size:var(--fs-sm, .8rem);font-weight:600;color:var(--text-dim,#9aa3b5);text-align:center }
.cos-v2 .cos-msg{ text-align:center }
@media (prefers-reduced-motion: no-preference){
  .cos-v2-lado.cambia .cos-v2-arte{ animation:cosV2Entra .42s cubic-bezier(.2,.9,.3,1.25) both }
  .cos-v2-comprar.on{ animation:cosV2Prende .5s ease-out both }
  @keyframes cosV2Entra{ from{ opacity:.35;transform:translateY(8px) scale(.96) } to{ opacity:1;transform:none } }
  @keyframes cosV2Prende{ from{ box-shadow:0 0 0 0 rgba(var(--cop-acento-rgb,12,149,235),.55) } to{ box-shadow:0 0 0 10px rgba(var(--cop-acento-rgb,12,149,235),0) } }
}
@media (max-width:359px){
  .cos-v2-par{ gap:var(--gap-md, .7rem) }
  .cos-v2-comprar{ font-size:var(--fs-sm, .8rem);padding-inline:var(--gap-sm, .5rem) }
}
/* en la compu: la vitrina sigue fija a la izquierda, un poco más ancha
   para que la carta y la skin no queden chicas */
@media (min-width:980px){
  .cos-tienda{ grid-template-columns:minmax(320px, 400px) minmax(0,1fr) }
  .cos-tienda > .cos-prob.cos-v2{ display:block;padding:var(--gap-lg, 1rem) 0 }
  .cos-tienda > .cos-v2 .cos-prob-carta{ width:100%;margin:0 }
}