/* =========================================================================
   Friky Store — catálogo animado (tienda, categorías, colecciones y búsqueda)
   Se carga después de marco-oscuro.css. Arriba (oscuro): logo animado de Friky como en la
   portada, anillo 3D de categorías y destellos 3D. Abajo (blanco): barra de filtros, tarjetas
   con inclinación y variante elegible. Todo el movimiento usa transform/opacity (lo hace la
   tarjeta gráfica) y se apaga con «reducir movimiento».
   ========================================================================= */

@property --hue { syntax: "<color>"; inherits: true; initial-value: #8B5CF6; }

.cat-page {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --soft: cubic-bezier(.16, 1, .3, 1);
  --stick-top: 60px;
  --pink: #EC4899;
}
@media (min-width: 1024px) { .cat-page { --stick-top: 119px; } }
.cat-page main { overflow-x: clip; }

/* ---------------------------------------------------------------- Escenario de arriba (mismos colores que el hero de la portada) */
.cat-hero {
  position: relative; overflow: clip; color: #fff; border-radius: 0 0 30px 30px;
  background:
    radial-gradient(900px 620px at 85% 10%, rgba(236, 72, 153, .38), transparent 62%),
    radial-gradient(760px 560px at 0% 100%, rgba(167, 139, 250, .32), transparent 60%),
    linear-gradient(160deg, #4C1DA8 0%, #2E1065 52%, #1A0840 100%);
}
.cat-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 22px 64px; }
.cat-hero-copy { position: relative; z-index: 2; min-width: 0; }
.cat-hero .breadcrumbs, .cat-hero .breadcrumbs a { color: #D9CCF5; }
.cat-title { margin-top: 12px; font-size: clamp(42px, 9vw, 86px); line-height: .94; letter-spacing: -0.045em; text-wrap: balance; }
.cat-intro { margin-top: 14px; color: #E6DBFF; font-size: 17px; max-width: 40ch; }
.cat-count { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 18px; padding: 7px 16px 8px; border-radius: var(--pill); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); font-weight: 600; color: #F3EDFF; }
.cat-count strong { font-family: var(--font-display); font-size: 22px; line-height: 1; color: #FBCFE8; font-variant-numeric: tabular-nums; }

/* Franja rosa de categorías, como la de la portada */
.cat-marquee { position: relative; z-index: 3; overflow: clip; margin-top: -34px; padding: 18px 0 8px; }
.cat-marquee-band { overflow: hidden; margin: 0 -2vw; padding: 14px 0; rotate: -1.5deg; background: #EC4899; color: #2E1065; box-shadow: 0 10px 30px rgba(236, 72, 153, .3); }
.cat-marquee-track { display: flex; width: max-content; }
.cat-marquee-group { display: flex; align-items: center; gap: 22px; padding-right: 22px; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; }
.cat-marquee-group svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
@media (min-width: 900px) { .cat-marquee-group { font-size: 24px; } }
@media (prefers-reduced-motion: no-preference) {
  .cat-marquee-track { animation: cat-marquee 34s linear infinite; }
  .cat-marquee-band:hover .cat-marquee-track { animation-play-state: paused; }
}
@keyframes cat-marquee { to { transform: translateX(-50%); } }

.cat-stage {
  --r: 132px; --tilt: -20deg; --bubble: 58px;
  position: relative; height: 290px; perspective: 1000px; transform-style: preserve-3d;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.cat-stage.is-dragging { cursor: grabbing; }
@media (min-width: 600px) { .cat-stage { --r: 205px; --bubble: 72px; height: 380px; } }
@media (min-width: 900px) {
  .cat-hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; min-height: 410px; padding-block: 8px 84px; }
  .cat-stage { --r: 255px; --bubble: 80px; height: 440px; }
}

/* Logo animado de Friky, igual que en el hero de la portada: video en una esfera con brillo rosa
   y un círculo punteado que gira. Solo se anima con transform (escala y giro): no se redibuja. */
.cat-orb {
  position: absolute; left: 50%; top: 46%; width: min(60%, 280px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; overflow: hidden; background: #2B0E62;
  box-shadow: 0 0 90px rgba(236, 72, 153, .45), 0 0 0 10px rgba(255, 255, 255, .05);
  transform: translateZ(0); will-change: transform;
}
@media (min-width: 900px) { .cat-orb { width: min(58%, 330px); } }
.cat-orb-video, .cat-orb-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-orb-logo { object-fit: contain; padding: 14%; }
.cat-orb-ring { position: absolute; left: 50%; top: 46%; width: min(76%, 380px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .22); pointer-events: none; will-change: transform; }
.cat-orb-ring::after { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #EC4899; box-shadow: 0 0 18px #EC4899; }
@media (prefers-reduced-motion: no-preference) {
  .cat-orb { animation: orb-in 1.2s cubic-bezier(.34, 1.56, .64, 1) .2s backwards, orb-breathe 6s ease-in-out 1.4s infinite; }
  /* Con la entrada todavía en la lista, Chrome hace la respiración en el procesador cuadro a cuadro.
     catalogo.js agrega .is-popped al terminar la entrada y la respiración pasa a la tarjeta gráfica. */
  .cat-orb.is-popped { animation: orb-breathe-gpu 6s ease-in-out infinite; }
  .cat-orb-ring { animation: orb-spin 38s linear infinite; }
}
@keyframes orb-in { from { opacity: 0; scale: .55; } }
@keyframes orb-breathe { 50% { scale: 1.025; } }
@keyframes orb-breathe-gpu { 50% { scale: 1.025; } }
@keyframes orb-spin { to { rotate: 360deg; } }

/* Anillo 3D: cada categoría gira alrededor de la figura y siempre mira al frente */
.cat-ring { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
/* El anillo gira alrededor de la base del logo (como el anillo de un planeta) para no taparlo */
.cat-ring-track { --rot: 0deg; list-style: none; position: absolute; left: 50%; top: 64%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt)) rotateY(var(--rot)); }
.cat-ring-item {
  --a: calc(var(--i) * 360deg / var(--count)); --z: 1;
  position: absolute; left: 0; top: 0; transform-style: preserve-3d;
  transform: rotateY(var(--a)) translateZ(var(--r)) rotateY(calc(-1 * (var(--a) + var(--rot)))) rotateX(calc(-1 * var(--tilt)));
  opacity: calc(.42 + .58 * (var(--z) + 1) / 2);
}
.cat-ring-item a {
  pointer-events: auto; position: absolute; left: 0; top: 0; translate: -50% -50%;
  display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--ink); -webkit-user-drag: none;
  scale: calc(.82 + .18 * (var(--z) + 1) / 2);
}
.ring-bubble {
  width: var(--bubble); aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #FBCFE8 0%, var(--bm) 32%, var(--be) 78%, #2E1065 100%);
  box-shadow: 0 16px 34px rgba(8, 2, 24, .5), inset -6px -10px 18px rgba(26, 8, 64, .3);
  transition: border-radius .8s var(--spring), rotate .8s var(--spring), scale .5s var(--spring);
}
.ring-bubble img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; scale: 1.25; pointer-events: none; }
.ring-bubble svg { width: 46%; height: 46%; fill: #fff; }
.ring-label { padding: 4px 12px; border-radius: var(--pill); background: rgba(26, 8, 64, .86); border: 1px solid var(--line-strong); font-weight: 800; font-size: 13px; white-space: nowrap; transition: background .3s, color .3s; }
.cat-ring-item a:hover .ring-bubble, .cat-ring-item a:focus-visible .ring-bubble { scale: 1.1; rotate: 12deg; }
.cat-ring-item a[aria-current="page"] .ring-bubble { box-shadow: 0 0 0 3px #fff, 0 16px 34px rgba(8, 2, 24, .5); }
.cat-ring-item a[aria-current="page"] .ring-label { background: #fff; color: var(--night); border-color: #fff; }
.cat-ring-item a:focus-visible { outline: none; }
.cat-ring-item a:focus-visible .ring-label { outline: 3px solid var(--pink); outline-offset: 2px; }
/* La pista va arriba a la izquierda del escenario, donde el anillo no pasa */
.cat-ring-hint { position: absolute; left: 0; top: 6px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; pointer-events: none; }

/* Formas y colores de las burbujas (también las usan las tarjetas): solo rosa y violeta, como la portada */
.b0 { --bm: #EC4899; --be: #7C3AED; border-radius: 58% 42% 46% 54% / 47% 58% 42% 53%; }
.b1 { --bm: #C084FC; --be: #6D28D9; border-radius: 45% 55% 62% 38% / 52% 40% 60% 48%; }
.b2 { --bm: #F472B6; --be: #A21CAF; border-radius: 50% 50% 38% 62% / 60% 44% 56% 40%; }
.b3 { --bm: #A78BFA; --be: #5B21B6; border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
.b4 { --bm: #E879F9; --be: #7C3AED; border-radius: 40% 60% 52% 48% / 44% 52% 48% 56%; }
.b5 { --bm: #F9A8D4; --be: #8B5CF6; border-radius: 55% 45% 40% 60% / 38% 56% 44% 62%; }

/* Destellos 3D: capas apiladas en profundidad que se mecen */
.spark3d { position: absolute; width: 58px; height: 58px; transform-style: preserve-3d; pointer-events: none; z-index: 3;
  transform: translateZ(60px) rotateX(14deg) rotateY(-24deg); }
/* El vaivén anima solo transform (lo resuelve la tarjeta gráfica, no recalcula estilos en cada cuadro) */
@media (prefers-reduced-motion: no-preference) {
  .spark3d { animation: spark-rock 5.5s ease-in-out infinite alternate; }
  .spark3d.s2 { animation: spark-rock-2 4.2s ease-in-out infinite alternate; }
}
@keyframes spark-rock { from { transform: translateZ(60px) translateY(-5px) rotateX(14deg) rotateY(-52deg); } to { transform: translateZ(60px) translateY(5px) rotateX(14deg) rotateY(4deg); } }
@keyframes spark-rock-2 { from { transform: translateZ(60px) translateY(4px) rotateX(-10deg) rotateY(58deg); } to { transform: translateZ(60px) translateY(-4px) rotateX(-10deg) rotateY(2deg); } }
.spark3d > span { position: absolute; inset: 0; transform: translateZ(calc(var(--l) * 1.7px)); color: #4C1D95; }
.spark3d > span:nth-last-child(2) { color: #7C3AED; }
.spark3d > span:last-child { color: #FBCFE8; }
.spark3d svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.spark3d.s1 { right: 6%; top: 6%; }
.spark3d.s2 { left: 6%; bottom: 16%; width: 38px; height: 38px; transform: translateZ(60px) rotateX(-10deg) rotateY(30deg); }
.spark3d.s2 > span:last-child { color: #fff; }
@media (min-width: 900px) { .spark3d.s1 { width: 76px; height: 76px; right: 4%; top: 4%; } .spark3d.s2 { width: 46px; height: 46px; } }

/* ---------------------------------------------------------------- Barra de filtros */
.cat-toolbar { position: sticky; top: var(--stick-top); z-index: 30; margin-top: 14px; border-block: 1px solid var(--line); isolation: isolate; }
.cat-toolbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .97); box-shadow: 0 8px 24px -16px rgba(46, 16, 101, .35); }
.cat-filters { display: flex; align-items: center; gap: 8px; padding-block: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.cat-filters::-webkit-scrollbar { display: none; }
/* En celular la fila se desliza de lado: un degradado a la derecha avisa que hay más (sin máscara, para no recortar las ventanitas) */
@media (max-width: 699px) {
  .cat-toolbar > .container { position: relative; }
  .cat-toolbar > .container::after { content: ""; position: absolute; right: 0; top: 0; height: 62px; width: 44px; pointer-events: none; background: linear-gradient(90deg, transparent, #fff); }
  .cat-filters { padding-right: 44px; }
}
@media (min-width: 700px) { .cat-filters { overflow: visible; flex-wrap: wrap; margin-inline: 0; padding-inline: 0; } }

.tbtn {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 42px; padding: 0 16px; border-radius: var(--pill);
  background: #F5F0FF; border: 1px solid #E4D9F7; color: #2E1065;
  font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; list-style: none; user-select: none;
  transition: background .25s, color .25s, border-color .25s, border-radius .5s var(--spring), scale .3s var(--spring);
}
.tbtn::-webkit-details-marker { display: none; }
.tbtn:hover { background: #EDE5FF; border-color: #C4B5FD; }
.tbtn:active { scale: .96; }
.tbtn .icon { width: 16px; height: 16px; transition: rotate .35s var(--spring); }
.tbtn-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: #DB2777; color: #fff; font-size: 12px; }
.tpop[open] > .tbtn { background: #6D28D9; color: #fff; border-color: #6D28D9; border-radius: 18px 18px 18px 6px; }
.tpop[open] > .tbtn .icon { rotate: 180deg; }

.tbtn-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tbtn-switch { position: relative; width: 32px; height: 18px; border-radius: var(--pill); background: rgba(46, 16, 101, .22); transition: background .3s; flex: none; }
.tbtn-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(26, 8, 64, .35); transition: translate .45s var(--spring), border-radius .45s var(--spring); }
.tbtn-toggle input:checked + .tbtn-switch { background: var(--pink); }
.tbtn-toggle input:checked + .tbtn-switch::after { translate: 14px 0; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; }
.tbtn-toggle:has(input:focus-visible) { outline: 3px solid var(--pink); outline-offset: 2px; }

.tpop { position: relative; flex: none; }
.tpop-panel {
  position: absolute; z-index: 40; top: calc(100% + 10px); left: 0; width: max-content; min-width: 230px; max-width: min(420px, 86vw);
  padding: 16px; border-radius: 22px; background: #fff; border: 1px solid #E4D9F7; color: #2E1065;
  box-shadow: 0 24px 60px rgba(46, 16, 101, .22); transform-origin: 18px 0;
}
.tpop[open] .tpop-panel { animation: pop-morph .55s var(--spring) both; }
@keyframes pop-morph {
  0% { opacity: 0; scale: .6; border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
  60% { opacity: 1; }
  100% { opacity: 1; scale: 1; border-radius: 22px; }
}
.tpop-title { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.tpop-list { list-style: none; display: grid; gap: 2px; }
.tcheck { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: 12px; cursor: pointer; font-weight: 600; }
.tcheck:hover { background: #F5F0FF; }
.tcheck input { width: 18px; height: 18px; accent-color: var(--pink); }
.tpop-tones { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip { position: relative; cursor: pointer; }
.tchip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tchip span { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 6px; border-radius: var(--pill); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.tchip i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(46, 16, 101, .18); }
.tchip input:checked + span { background: #6D28D9; color: #fff; border-color: #6D28D9; }
.tchip input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: 2px; }
.tpop-price { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tpop-price label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tpop-price .input { min-height: 44px; }
.tpop-apply { margin-top: 12px; width: 100%; min-height: 44px; border: 0; border-radius: var(--pill); background: #DB2777; color: #fff; font-weight: 800; cursor: pointer; }
.tpop-apply:hover { background: #BE185D; }

.tsort { position: relative; display: inline-flex; align-items: center; flex: none; }
.tsort select { appearance: none; -webkit-appearance: none; min-height: 42px; padding: 0 40px 0 16px; border-radius: var(--pill); background: #F5F0FF; border: 1px solid #E4D9F7; color: #2E1065; font-weight: 700; font-size: 14px; cursor: pointer; }
.tsort select:hover { border-color: #C4B5FD; }
.tsort select:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.tsort .icon { position: absolute; right: 14px; width: 16px; height: 16px; pointer-events: none; }
@media (min-width: 700px) { .tsort { margin-left: auto; } }

.cat-active { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 12px; border-radius: var(--pill); background: #FCE7F3; color: #9D174D; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s; }
.cat-chip:hover { background: #FBCFE8; }
.cat-chip .icon { width: 14px; height: 14px; }
.cat-clear { align-self: center; font-size: 13px; font-weight: 700; color: var(--muted); }

/* Ventanitas de filtro en celular: hoja abajo */
@media (max-width: 699px) {
  .tpop-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: 70vh; overflow: auto; transform-origin: 50% 100%; }
  .tpop[open]::before { content: ""; position: fixed; inset: 0; z-index: 39; background: rgba(8, 2, 22, .55); }
}

/* ---------------------------------------------------------------- Grilla y tarjetas */
.cat-results { padding-block: 26px 48px; }
.cat-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
@media (min-width: 700px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; } }
@media (min-width: 1100px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 24px; } }

.pcard { position: relative; display: flex; flex-direction: column; min-width: 0; perspective: 900px; transition: --hue .6s ease; }
.pcard-stage {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%;
  position: relative; aspect-ratio: 4 / 5; border-radius: 26px; transform-style: preserve-3d;
  /* Mismo brillo que las tarjetas de la portada */
  background:
    radial-gradient(circle at 86% 14%, rgba(236, 72, 153, .42), transparent 36%),
    radial-gradient(circle at 12% 90%, rgba(236, 72, 153, .3), transparent 34%),
    radial-gradient(120% 88% at 50% 62%, #7B47DE 0%, #3B1782 42%, #1E0A4A 80%);
  border: 1px solid rgba(255, 255, 255, .08);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s var(--soft), box-shadow .5s var(--soft), border-color .4s;
}
.pcard:nth-child(3n+2) .pcard-stage {
  background:
    radial-gradient(circle at 84% 16%, rgba(167, 139, 250, .45), transparent 36%),
    radial-gradient(circle at 14% 88%, rgba(129, 140, 248, .3), transparent 34%),
    radial-gradient(120% 88% at 50% 62%, #6A3FD6 0%, #33157A 42%, #1A0840 80%);
}
.pcard:nth-child(3n+3) .pcard-stage {
  background:
    radial-gradient(circle at 84% 16%, rgba(244, 114, 182, .45), transparent 36%),
    radial-gradient(circle at 14% 88%, rgba(251, 113, 133, .3), transparent 34%),
    radial-gradient(120% 88% at 50% 62%, #8E3FBF 0%, #451A78 42%, #220A44 80%);
}
.pcard.is-tilting .pcard-stage { transition: box-shadow .5s var(--soft), border-color .4s; }
/* Figura detrás del producto: esfera rosa y violeta como la de la portada, que se deforma */
.pcard-blob {
  position: absolute; left: 13%; right: 13%; top: 14%; bottom: 17%;
  background: radial-gradient(circle at 32% 28%, #FBCFE8 0%, var(--bm) 32%, var(--be) 78%, #2E1065 100%);
  box-shadow: inset -12px -18px 34px rgba(26, 8, 64, .3), 0 0 46px rgba(236, 72, 153, .35);
  opacity: .92;
  transform: translateZ(8px);
  transition: border-radius 1s var(--spring), rotate 1s var(--spring), scale .9s var(--spring);
}
.pcard.is-pulse .pcard-blob { animation: blob-pulse .7s var(--spring); }
@keyframes blob-pulse { 40% { scale: 1.12; rotate: -10deg; } }
.pcard-floor { position: absolute; left: 26%; right: 26%; bottom: 11%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 2, 24, .6), transparent); transform: translateZ(14px); transition: scale .6s var(--soft), opacity .6s; }
.pcard-img {
  position: absolute; left: 6%; top: 5%; width: 88%; height: 86%; object-fit: contain; border-radius: 18px;
  transform: translateZ(46px); transition: transform .7s var(--soft), opacity .35s;
  filter: drop-shadow(0 16px 20px rgba(8, 2, 24, .42));
}
.pcard-img.is-swapping { opacity: 0; }
.pcard-stickers { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; transform: translateZ(64px); }
.pcard-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transform: translateZ(2px);
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .2), transparent 48%); transition: opacity .4s; }

.pcard-body { display: grid; gap: 4px; padding: 14px 4px 0; justify-items: start; }
.pcard-brand { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pcard-title { font-weight: 700; font-size: 15.5px; line-height: 1.3; text-decoration: none; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-title::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 26px; }
.pcard-title:focus-visible { outline: none; }
.pcard:has(.pcard-title:focus-visible) .pcard-stage { outline: 3px solid var(--pink); outline-offset: 3px; }
.pcard-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pcard-price .price-now { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.pcard-price.is-sale .price-now { color: #BE185D; }
.pcard-price .price-was { font-size: 13px; color: var(--muted); text-decoration: line-through; }

.pcard-tones { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.tone { position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: scale .3s var(--spring); }
.tone i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(46, 16, 101, .18); transition: border-radius .5s var(--spring); }
.tone::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px transparent; transition: box-shadow .25s; }
.tone:hover { scale: 1.12; }
.tone[aria-checked="true"]::before { box-shadow: 0 0 0 2px #6D28D9; }
.tone[aria-checked="true"] i { border-radius: 44% 56% 52% 48% / 52% 44% 56% 48%; }
.tone.is-out { opacity: .5; }
.tone.is-out::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; background: #2E1065; rotate: 45deg; border-radius: 2px; }
.tone:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.tone-text { width: auto; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--pill); border: 1px solid var(--line-strong); color: var(--ink); font-size: 11.5px; font-weight: 800; }
.tone-text[aria-checked="true"] { background: #6D28D9; color: #fff; border-color: #6D28D9; }
.tone-text[aria-checked="true"]::before { box-shadow: none; }
.tone-more { height: 28px; padding: 0 8px; border-radius: var(--pill); border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; }
.pcard-tone-name { min-height: 18px; font-size: 12.5px; color: var(--muted); }

.pcard-add {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
  min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--pill); cursor: pointer;
  background: #6D28D9; color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 10px 24px -8px rgba(109, 40, 217, .55);
  transition: scale .3s var(--spring), border-radius .5s var(--spring), background .3s, color .3s, box-shadow .3s;
}
.pcard-add .icon { width: 18px; height: 18px; }
.pcard-add:hover { scale: 1.05; border-radius: 40% 60% 55% 45% / 60% 50% 50% 40%; box-shadow: 0 14px 40px rgba(236, 72, 153, .45); }
.pcard-add:active { scale: .95; }
.pcard-add:focus-visible { outline: 3px solid #F472B6; outline-offset: 2px; }
.pcard-add[disabled] { background: #F1EDF5; color: var(--muted); box-shadow: none; cursor: not-allowed; scale: 1; border-radius: var(--pill); }
.pcard-add.is-added { background: #EC4899; color: #fff; }

.pcard.is-out .pcard-img { opacity: .55; }

/* Hover / foco: la tarjeta se levanta, la figura se transforma y la foto sale hacia adelante */
@media (hover: hover) {
  .pcard:hover .pcard-img { transform: translateZ(78px) scale(1.04); }
  .pcard:hover .pcard-floor { scale: .82; opacity: .7; }
  .pcard:hover .pcard-glare { opacity: 1; }
  .pcard:hover .pcard-blob { rotate: 14deg; scale: 1.06; }
  .pcard:hover .b0 { border-radius: 42% 58% 60% 40% / 58% 40% 60% 42%; }
  .pcard:hover .b1 { border-radius: 62% 38% 40% 60% / 40% 60% 48% 52%; }
  .pcard:hover .b2 { border-radius: 38% 62% 58% 42% / 44% 58% 42% 56%; }
  .pcard:hover .b3 { border-radius: 40% 60% 42% 58% / 48% 62% 38% 52%; }
  .pcard:hover .b4 { border-radius: 58% 42% 36% 64% / 60% 38% 62% 40%; }
  .pcard:hover .b5 { border-radius: 44% 56% 62% 38% / 56% 40% 60% 44%; }
}

/* Entrada al aparecer (solo con JavaScript: sin él todo se ve de una) */
.cat-js .pcard:not(.is-in) { opacity: 0; translate: 0 36px; }
.cat-js .pcard.is-in { animation: card-in .8s var(--soft) backwards; animation-delay: calc(var(--d, 0) * 70ms); }
.cat-js .pcard.is-in .pcard-blob { animation: blob-pop 1s var(--spring) backwards; animation-delay: calc(var(--d, 0) * 70ms + 120ms); }
@keyframes card-in { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
@keyframes blob-pop { from { scale: .35; rotate: -40deg; } to { scale: 1; rotate: 0deg; } }
.cat-hero-copy.is-swapping .cat-title { animation: title-in .7s var(--soft) both; }
.cat-hero-copy.is-swapping .cat-intro, .cat-hero-copy.is-swapping .cat-count { animation: title-in .7s var(--soft) .08s both; }
@keyframes title-in { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
.cat-results.is-loading { opacity: .55; transition: opacity .2s; }

/* Volar al carrito */
.fly-img { position: fixed; z-index: 95; pointer-events: none; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(8, 2, 24, .5)); }

/* ---------------------------------------------------------------- Más productos y vacío */
.cat-more { display: grid; justify-items: center; gap: 12px; margin-top: 48px; text-align: center; }
.cat-more-count { color: var(--muted); font-size: 14px; font-weight: 600; }
.cat-more-bar { width: min(260px, 70%); height: 4px; border-radius: 4px; background: rgba(46, 16, 101, .1); overflow: hidden; }
.cat-more-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8B5CF6, var(--pink)); transition: width .6s var(--soft); }
.cat-more-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cat-more-btn, .cat-prev {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--pill);
  font-weight: 800; text-decoration: none; transition: scale .3s var(--spring), border-radius .6s var(--spring), box-shadow .3s;
}
.cat-more-btn { background: #6D28D9; color: #fff; box-shadow: 0 14px 34px -10px rgba(109, 40, 217, .55); }
.cat-more-btn:hover { scale: 1.04; border-radius: 42% 58% 55% 45% / 60% 48% 52% 40%; }
.cat-more-btn.is-loading { pointer-events: none; opacity: .7; }
.cat-prev { border: 1px solid var(--line-strong); color: var(--ink); }
.cat-more-btn .icon, .cat-prev .icon { width: 18px; height: 18px; }

.cat-empty { display: grid; justify-items: center; gap: 12px; padding: 40px 16px 20px; text-align: center; }
.cat-empty-blob { display: grid; place-items: center; width: 120px; height: 120px; background: radial-gradient(circle at 32% 28%, #F9A8D4, #8B5CF6 70%); border-radius: 58% 42% 46% 54% / 47% 58% 42% 53%; animation: blob-idle 7s ease-in-out infinite; color: #fff; }
.cat-empty-blob .icon { width: 40px; height: 40px; }
.cat-empty h2 { font-size: 26px; }
.cat-empty p { color: var(--muted); max-width: 44ch; }
.cat-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
@keyframes blob-idle {
  0%, 100% { border-radius: 58% 42% 46% 54% / 47% 58% 42% 53%; }
  33% { border-radius: 42% 58% 60% 40% / 58% 40% 60% 42%; }
  66% { border-radius: 50% 50% 38% 62% / 60% 44% 56% 40%; }
}

/* ---------------------------------------------------------------- Cursor que cambia de forma (solo mouse) */
.cat-cursor { position: fixed; left: 0; top: 0; z-index: 90; width: 0; height: 0; pointer-events: none; display: none; }
.cat-cursor { will-change: transform; }
.cat-cursor span {
  position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 46% 54% 58% 42% / 44% 46% 54% 56%;
  background: var(--pink); color: #fff; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; white-space: nowrap;
  opacity: .9; transform: scale(.22); transition: transform .35s var(--spring), opacity .25s; will-change: transform;
}
.cat-cursor span::after { content: attr(data-label); opacity: 0; transition: opacity .2s; }
.cat-cursor.is-big span { transform: translate(44px, 44px) scale(1); }
.cat-cursor.is-big span::after { opacity: 1; }
.cat-cursor.is-hidden span { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .cat-js .cat-cursor { display: block; } }

/* ---------------------------------------------------------------- Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .cat-cursor, .cat-ring-hint { display: none !important; }
  .cat-js .pcard:not(.is-in) { opacity: 1; translate: none; }
  .pcard-stage { transform: none !important; }
}