/* ═══════════════════════════════════════════════════════════════════════════
   caja-3d.css — Caja 3D para presentar PAQUETES (software box)

   Qué es: la caja con volumen (frente, lomo y tapa) con la que se anuncia un
   paquete de samples/ritmos, en vez de una foto plana. Es CSS 3D puro: no
   carga Three.js ni imágenes, así que funciona igual en la ficha, en las
   tarjetas del catálogo y en la vista previa del panel.

   Dos tamaños, misma marca:
     .caja3d--grande  → la ficha del producto (con giro suave y aire)
     .caja3d--mini    → la miniatura de las tarjetas (sin giro, sin giro de
                        texto pequeño: a ese tamaño solo se lee el título)

   Los colores y los textos llegan por variables CSS y por el contenido de la
   cara frontal, así que el mismo HTML sirve para cualquier paquete.
   ═══════════════════════════════════════════════════════════════════════════ */

.caja3d {
  --caja-c1: #6d28d9;
  --caja-c2: #ec4899;
  --caja-w: 240px;
  --caja-h: 306px;
  --caja-d: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 10px 26px;
  perspective: 1000px;
}
.caja3d--mini {
  --caja-w: 116px;
  --caja-h: 148px;
  --caja-d: 22px;
  padding: 8px 4px 12px;
  perspective: 620px;
}

/* ── Escena + cubo ──
   El cubo se gira (si se viera de frente no parecería una caja) y se MECE
   despacio SIEMPRE: en la ficha, en las tarjetas del catálogo/portada y en la
   vista previa del panel. El movimiento es lo que vende la sensación de
   volumen, así que la ficha hace un giro amplio y la tarjeta uno corto (ahí el
   texto tiene que seguir leyéndose). Con «reducir movimiento» activado se
   queda quieto y se lee igual. */
.caja3d-escena { position: relative; width: var(--caja-w); height: var(--caja-h); }
.caja3d--mini .caja3d-escena { height: var(--caja-h); }
.caja3d-cubo {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-9deg) rotateY(-30deg);
  /* La VELOCIDAD la pone el dueño desde el panel (--caja-vel, 1 = normal).
     14s / 2 → 7s (el doble de rápido); 14s / 0.5 → 28s (la mitad). */
  animation: caja3d-mecer calc(14s / var(--caja-vel, 1)) ease-in-out infinite;
}
@keyframes caja3d-mecer {
  0%, 100% { transform: rotateX(-9deg)  rotateY(-30deg); }
  50%      { transform: rotateX(-15deg) rotateY(28deg); }
}
/* La miniatura se mece con menos amplitud (el texto se lee) pero también se
   mueve: antes estaba congelada y en el catálogo la caja parecía una foto. */
.caja3d--mini .caja3d-cubo {
  transform: rotateX(-8deg) rotateY(-24deg);
  /* MISMO ciclo base que la ficha (14 s): así la velocidad que elige el dueño
     significa lo mismo en la portada, en el catálogo y en la ficha — antes la
     tarjeta iba a 18 s y parecía ir más lenta con el mismo ajuste. */
  animation: caja3d-mecer-mini calc(14s / var(--caja-vel, 1)) ease-in-out infinite;
}
@keyframes caja3d-mecer-mini {
  0%, 100% { transform: rotateX(-8deg)  rotateY(-24deg); }
  50%      { transform: rotateX(-11deg) rotateY(-9deg); }
}

/* «Quieta»: el dueño bajó la velocidad a cero. Se apaga la animación pero la
   caja conserva su ángulo de siempre (sigue pareciendo una caja, no una foto). */
.caja3d--quieta .caja3d-cubo,
.caja3d--quieta.caja3d--mini .caja3d-cubo { animation: none; }

/* Al pasar el ratón la caja se detiene y se abre hacia el frente: es la señal
   de que hay volumen (en el celular no hay hover, y no hace falta). */
@media (hover: hover) and (pointer: fine) {
  .caja3d--grande:hover .caja3d-cubo { animation-play-state: paused; transform: rotateX(-6deg) rotateY(12deg); }
  .caja3d--grande .caja3d-cubo { transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .caja3d-cubo, .caja3d--mini .caja3d-cubo { animation: none !important; }
}

/* ── Caras ──
   Cada cara nace centrada (left/top 50%) y se lleva a su sitio con una cadena
   translate → rotate → translateZ. Así una sola medida (--caja-w/h/d) manda
   en los dos tamaños. */
.caja3d-cara {
  position: absolute; left: 50%; top: 50%;
  overflow: hidden;
  background: linear-gradient(158deg, var(--caja-c1) 0%, var(--caja-c2) 100%);
  backface-visibility: hidden;
}
.caja3d-frontal { width: var(--caja-w); height: var(--caja-h); transform: translate(-50%, -50%) translateZ(calc(var(--caja-d) / 2)); }
.caja3d-dorso   { width: var(--caja-w); height: var(--caja-h); transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--caja-d) / 2)); }
/* Los CANTOS (lomo derecho y cara izquierda) llevan 1px de MÁS en su ancho: así
   se montan un pelo sobre la cara frontal y la de atrás. Sin ese solape, al
   girar el cubo las dos caras quedaban exactamente en el mismo plano y el
   navegador dibujaba una línea vertical que PARPADEABA en el borde. */
.caja3d-lomo    { width: calc(var(--caja-d) + 1px); height: var(--caja-h); transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--caja-w) / 2)); }
/* CARA IZQUIERDA. Faltaba: el cubo tenía frente, dorso, lomo (derecho), tapa y
   base. Al girar hacia la derecha el lado izquierdo quedaba HUECO y la caja
   parecía a medio armar («solo mitad»). Va sin texto, como el dorso y la tapa. */
.caja3d-canto   { width: calc(var(--caja-d) + 1px); height: var(--caja-h); transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--caja-w) / 2)); }
.caja3d-tapa    { width: var(--caja-w); height: calc(var(--caja-d) + 1px); transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--caja-h) / 2)); }
.caja3d-base    { width: var(--caja-w); height: calc(var(--caja-d) + 1px); transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--caja-h) / 2)); }

/* El lomo y la tapa llevan un bajón MUY suave de luz, solo para que se note el
   canto. Antes era brightness(0.74): en pantalla las caras se veían grises
   («plomo oscuro») y la caja parecía sucia. */
.caja3d-lomo, .caja3d-canto, .caja3d-tapa, .caja3d-base, .caja3d-dorso { filter: brightness(0.92) saturate(1.02); }

/* Textura geométrica sutil (líneas verticales finas) por encima del degradado:
   le da cuerpo a colores planos sin tapar el texto. */
.caja3d-textura {
  position: absolute; inset: 0; pointer-events: none;
  /* Solo las líneas finas: se sacaron los dos degradados radiales, sobre todo el
     OSCURO (rgba(0,0,0,.18)) que era el que daba el aspecto plomo. */
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 13px);
}
/* ── EL BRILLO ESPEJO ──
   Pintaba una franja clara de un lado y una OSCURA del otro (rgba(0,0,0,.16)):
   eso era el «espejo plomo oscuro» que no quería el dueño. En la plantilla
   Clásica sigue apagado; las demás plantillas lo encienden con SU propio
   brillo (siempre claro, nunca oscuro). */
.caja3d-brillo {
  display: none;
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   PLANTILLAS DE CAJA — el dueño elige una y después puede cambiar TODO

   Cada plantilla es solo «piel»: no toca la geometría ni los textos, así que
   cambiar de plantilla nunca rompe la caja ni lo que ya estaba escrito. Los
   colores llegan por --caja-c1/--caja-c2 (los pone el panel al elegir la
   plantilla y el dueño los puede cambiar a mano después).
   ═══════════════════════════════════════════════════════════════════════ */

/* Neón: filo luminoso y una luz del color de la caja. */
.caja3d--t-neon .caja3d-frontal {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35),
              inset 0 0 34px rgba(0, 0, 0, 0.45);
}
.caja3d--t-neon .caja3d-textura {
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.28), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 9px);
}
.caja3d--t-neon .caja3d-brillo {
  display: block;
  background: radial-gradient(60% 46% at 30% 22%, rgba(255, 255, 255, 0.30), transparent 70%);
}

/* Oro: reflejo diagonal cálido y marco dorado. */
.caja3d--t-oro .caja3d-frontal {
  box-shadow: inset 0 0 0 1px rgba(245, 214, 123, 0.65),
              inset 0 0 30px rgba(0, 0, 0, 0.45);
}
.caja3d--t-oro .caja3d-textura {
  background-image: repeating-linear-gradient(135deg, rgba(255, 236, 170, 0.10) 0 2px, transparent 2px 12px);
}
.caja3d--t-oro .caja3d-brillo {
  display: block;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 240, 190, 0.42) 50%, transparent 66%);
}

/* Cristal: velo translúcido y borde claro, como una caja de plástico. */
.caja3d--t-cristal .caja3d-frontal {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5),
              inset 0 -40px 60px rgba(255, 255, 255, 0.10);
}
.caja3d--t-cristal .caja3d-textura {
  background-image:
    linear-gradient(200deg, rgba(255, 255, 255, 0.30), transparent 42%),
    radial-gradient(90% 60% at 80% 100%, rgba(255, 255, 255, 0.18), transparent 70%);
}
.caja3d--t-cristal .caja3d-brillo {
  display: block;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.34) 50%, transparent 60%);
}

/* Retro: trama de puntos y marco marcado, tipo caja de los 90. */
.caja3d--t-retro .caja3d-frontal {
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.28);
}
.caja3d--t-retro .caja3d-textura {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0 2px, transparent 2px 10px);
  background-size: 10px 10px, auto;
}

/* Minimal: plano, sin trama, con un filo fino. */
.caja3d--t-minimal .caja3d-textura { background-image: none; }
.caja3d--t-minimal .caja3d-frontal {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.caja3d--t-minimal .caja3d-badge {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: none;
}

/* Aurora: dos luces de color sobre el degradado (verde/azul), muy vivo. */
.caja3d--t-aurora .caja3d-frontal {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28),
              inset 0 0 60px rgba(0, 0, 0, 0.35);
}
.caja3d--t-aurora .caja3d-textura {
  background-image:
    radial-gradient(80% 55% at 15% 8%, rgba(52, 211, 153, 0.55), transparent 62%),
    radial-gradient(85% 60% at 88% 92%, rgba(59, 130, 246, 0.55), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px);
}
.caja3d--t-aurora .caja3d-brillo {
  display: block;
  background: radial-gradient(50% 40% at 70% 18%, rgba(255, 255, 255, 0.28), transparent 72%);
}

/* Limitada: negro con doble marco dorado, como una edición numerada. */
.caja3d--t-limitada .caja3d-frontal {
  box-shadow: inset 0 0 0 1px rgba(245, 214, 123, 0.85),
              inset 0 0 0 6px rgba(0, 0, 0, 0.28),
              inset 0 0 0 7px rgba(245, 214, 123, 0.45);
}
.caja3d--t-limitada .caja3d-textura {
  background-image:
    linear-gradient(160deg, rgba(255, 236, 170, 0.14), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 11px);
}
.caja3d--t-limitada .caja3d-badge {
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  color: #3b2606; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ── Contenido de la cara frontal ── */
.caja3d-contenido {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 14px 14px;
  color: #fff;
  font-family: inherit;
}
.caja3d--mini .caja3d-contenido { padding: 9px 8px 8px; }

.caja3d-badge {
  order: 0;
  max-width: 100%;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.94); color: #1f2937;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.2px;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}
/* En la miniatura la franja se PARTE en dos líneas en vez de recortarse: «12
   RITMOS DE HUA…» se lee como un error, «12 RITMOS DE HUAYNO» en dos líneas
   no. */
.caja3d--mini .caja3d-badge {
  font-size: 7px; padding: 2px 6px;
  white-space: normal; line-height: 1.25; text-overflow: clip;
}

.caja3d-logo {
  order: 1;
  margin: 14px 0 10px;
  width: 66px; height: 66px; flex: 0 0 auto;
  border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.caja3d-logo img { width: 78%; height: 78%; object-fit: contain; }
.caja3d-logo-txt { font-size: 25px; font-weight: 900; color: #4c1d95; letter-spacing: -1px; }
.caja3d--mini .caja3d-logo { width: 34px; height: 34px; margin: 7px 0 6px; }
.caja3d--mini .caja3d-logo-txt { font-size: 14px; }

.caja3d-titulo {
  order: 2;
  font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -0.3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  /* Dos renglones como máximo: un título largo no puede empujar las etiquetas
     fuera de la caja. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.caja3d--mini .caja3d-titulo { font-size: 11px; -webkit-line-clamp: 3; }

.caja3d-sub {
  order: 3;
  margin-top: 7px;
  font-size: 10.5px; line-height: 1.35; opacity: 0.9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.caja3d--mini .caja3d-sub, .caja3d--mini .caja3d-compat { display: none; }

/* Etiquetas de compatibilidad (PSR-SX, Genos, SFF1…): al pie de la cara
   frontal, como los sellos de sistema operativo de una caja de software. */
.caja3d-compat {
  order: 4;
  margin-top: auto; padding-top: 8px;
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 100%;
}
.caja3d-compat span {
  padding: 3px 7px; border-radius: 5px;
  background: rgba(0, 0, 0, 0.26); border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap;
}

/* ── Lomo (canto lateral) ──
   El texto va girado 90°: es lo que hace que se lea como una caja de estante y
   no como tres rectángulos. En la miniatura se oculta (no cabe y ensucia). */
.caja3d-lomo-caja {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.caja3d-lomo-caja span {
  writing-mode: vertical-rl; text-orientation: mixed;
  transform: rotate(180deg);
  max-height: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.caja3d--mini .caja3d-lomo-caja { display: none; }

/* ── Sombra en el piso ──
   Sin esto la caja parece flotar en el aire. Es una elipse difusa debajo. */
.caja3d-sombra {
  position: absolute; left: 50%; bottom: -14px; width: 74%; height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), transparent 70%);
  filter: blur(4px); pointer-events: none;
}
.caja3d--mini .caja3d-sombra { height: 12px; bottom: -8px; }

/* ── Envoltorio de la ficha (sección «presentación» del paquete) ── */
.pd-caja {
  max-width: 1080px; margin: 0 auto 26px; padding: 8px 22px 22px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  text-align: center;
}
.pd-caja > p { font-size: 13px; color: var(--text-secondary); max-width: 620px; margin: 0 auto 4px; }
.pd-caja-entrega {
  display: inline-flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; padding: 10px 14px; max-width: 640px;
  background: var(--purple-10); border: 1px solid var(--purple-20); border-radius: 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--text); text-align: left;
}

/* En las tarjetas (portada y catálogo) la caja reemplaza a la miniatura y se
   separa un poco del borde para que se vea el volumen. */
.linea-card .caja3d--mini, .explorar-card .caja3d--mini { margin: 0 auto; }

/* ── Tarjeta de pack de la portada ──
   Los packs NO usan la fila compacta de las líneas: la caja necesita aire para
   leerse como caja. Cada pack va en su propia tarjeta (caja arriba, nombre,
   qué incluye y precio), así el bloque se distingue del resto del catálogo. */
.packs-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}
.pack-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* ── SIN CAJA DE FONDO (5 de octubre) ──
     El dueño: «quita las cards de fondo… ese mismo tiene el producto de pack».
     Era el mismo recuadro que se sacó del hero y de las secciones: acá envolvía
     la caja 3D + título + precio. Se quita el fondo, el borde y el radio; el
     contenido (la caja 3D, el título y el precio) queda igual, directo sobre el
     fondo de la página. */
  padding: 4px 2px 8px;
  text-decoration: none; color: var(--text); min-width: 0;
  transition: transform 0.2s ease;
  animation: fadeInUp 0.5s ease forwards; opacity: 0;
}
.pack-card:hover { transform: translateY(-3px); }
.pack-card .caja3d--mini { --caja-w: 132px; --caja-h: 168px; --caja-d: 26px; }
.pack-card-titulo {
  margin-top: 4px; font-size: 13.5px; font-weight: 800; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pack-card-incluye { margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.pack-card-precio { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--purple-light); }
/* Sin caja (foto o 🎁): el icono vuelve a su tamaño de tarjeta. */
.pack-card .linea-icon { width: 74px; height: 74px; border-radius: 14px; font-size: 30px; margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   PACK INSIGNIA (el bloque grande de la portada)

   El dueño lo pidió mirando tiendas como AutoTune y Splice: su producto
   estrella ocupa un bloque propio —nombre, frase, precio con el descuento y un
   botón grande— y TODO lo demás queda debajo. Acá el «insignia» es el primer
   pack de la lista, o sea el que en el panel se marca con ⭐ (Destacado).
   ═══════════════════════════════════════════════════════════════════════ */
.pack-insignia {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center; gap: 26px;
  /* El aire de arriba es para las ESQUINAS (el rótulo y el botón). */
  padding: 88px 28px 26px; border-radius: 22px;
  border: 1px solid rgba(124, 58, 237, 0.38);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(124, 58, 237, 0.28), transparent 62%),
    radial-gradient(110% 130% at 92% 100%, rgba(236, 72, 153, 0.18), transparent 66%),
    var(--card, var(--surface));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  animation: fadeInUp 0.5s ease forwards; opacity: 0;
}
/* ── ESQUINAS DEL BLOQUE ──
   Arriba a la izquierda el rótulo de la sección (chico y en su carril) y arriba
   a la derecha el botón para ver todos los packs. Así ninguno de los dos se
   mezcla con el título y la descripción del pack, que son los protagonistas. */
.pi-esquina { position: absolute; top: 20px; z-index: 2; }
/* Ya no hay botón en la esquina derecha (se duplicaba con el de abajo), así que
   el rótulo puede usar todo el ancho. */
.pi-esquina-izq { left: 26px; right: 26px; text-align: left; }
/* La estrella del pack insignia: sola, en la esquina de arriba a la derecha. */
.pi-estrella { right: 24px; line-height: 1; }
.pi-estrella svg.ico { display: block; }
.pi-esquina-izq .section-kicker { margin: 0 0 2px; }
.pi-esquina-izq h2 {
  margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.25; color: var(--text);
}
.pi-esquina-izq p { margin: 2px 0 0; font-size: 11.5px; color: var(--text-muted); }
/* El descuento del pack insignia: la MISMA pastilla que la ficha del producto
   (nombre de clase compartido a propósito, para que se vean idénticas). */
.pd-pack-chollo {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px;
  border: 1px solid rgba(168, 85, 247, 0.40); border-radius: 14px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(236, 72, 153, 0.12));
  font-size: 12.5px; line-height: 1.45; max-width: 100%; row-gap: 8px;
}
.pd-pack-chollo-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 13px; border-radius: 100px;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark, var(--purple)));
  color: #fff; font-size: 13px; font-weight: 900; letter-spacing: -0.2px;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35);
}
.pd-pack-chollo-txt { color: var(--text-muted); padding-right: 2px; }
.pd-pack-chollo-txt s { text-decoration: line-through; }
.pd-pack-chollo-txt b { color: var(--text); font-weight: 800; }
.pd-pack-chollo-ahorro { color: #34d399; font-weight: 800; white-space: nowrap; }
.pack-insignia-visual { display: flex; align-items: center; justify-content: center; min-width: 0; }
.pack-insignia-visual img { max-width: 100%; border-radius: 16px; }
.pack-insignia-txt { min-width: 0; }
.pack-insignia-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--purple-light, #a78bfa);
}
.pack-insignia-txt h3 {
  /* Más compacto: el título del pack más grande del catálogo («Pack Completo
     PSR-620-SX700-720-900-920-Genos») ocupaba 40 px y se comía la tarjeta.
     Ahora tiene el mismo aire que los títulos de producto (30 px como máximo). */
  /* Dos puntos menos (lo pidió el dueño): el título del pack ya no compite con
     el titular de la portada. */
  margin: 6px 0 8px; font-size: clamp(17px, 2.1vw, 28px); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.02em; color: var(--text);
}
.pack-insignia-txt > p {
  margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
  max-width: 60ch;
}
.pack-insignia-precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
/* El precio, más contento: era el número más grande de la portada (30 px). */
/* El precio principal, un poco más grande: es el número que decide la compra. */
.pack-insignia-precio b {
  font-size: clamp(21px, 2.4vw, 25px); font-weight: 800; letter-spacing: -0.4px; color: var(--text);
  /* line-height 1: la caja del precio abraza el número (sin el aire de los
     descendentes) y así queda CENTRADO entre la línea de arriba y la pastilla. */
  line-height: 1;
}
.pack-insignia-precio s { font-size: 14px; color: var(--text-muted); }
.pack-insignia-off {
  padding: 4px 10px; border-radius: 100px; font-size: 12.5px; font-weight: 900;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark, var(--purple)));
  color: #fff;
}
.pack-insignia-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.pi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* ── TAMAÑO ESTABLE (clave en el celular) ──
     `min-height` fijo + `white-space: nowrap` + `box-sizing` borde a borde: el
     botón mide SIEMPRE lo mismo. Antes, al tocarlo, el navegador aplicaba el
     «hover» (subía 2px y le crecía la sombra), el texto se partía y el de abajo
     se estiraba: se perdía el toque premium. */
  /* Píldoras más juntas (menos relleno) con la MISMA letra: el botón no se
     encoge de texto, solo se aprieta el aire de los costados. */
  min-height: 42px; padding: 10px 20px; border-radius: 100px; cursor: pointer;
  box-sizing: border-box; white-space: nowrap; line-height: 1.15;
  /* Sin retardo de 300 ms ni zoom por doble toque. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-size: 14.5px; font-weight: 800; text-decoration: none;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff; border: 1px solid transparent;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pi-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(124, 58, 237, 0.45); }
.pi-btn-ghost {
  /* Secundario: la MISMA forma de píldora con flecha que tenía el de la
     esquina, pero en tono violeta suave para que no compita con «Ver el pack». */
  background: rgba(22, 18, 33, .78); color: var(--text);
  border: 1px solid rgba(196, 181, 253, .36); box-shadow: none;
}
.pi-btn-ghost:hover { background: var(--white-5, rgba(255,255,255,.06)); box-shadow: none; }
.pi-btn-ghost svg { width: 13px; height: 13px; }
/* ── EN PANTALLAS TÁCTILES NO HAY «HOVER» ──
   El navegador deja el hover pegado después de tocar: el botón quedaba de pie
   (levantado y con más sombra) hasta tocar otra cosa. Acá no se levanta ni
   cambia de tamaño: al tocarlo se hunde un 2% y ya —respuesta inmediata y
   simétrica, sin empujar al de abajo. */
@media (hover: none) {
  .pi-btn:hover { transform: none; box-shadow: 0 8px 22px rgba(124, 58, 237, 0.35); }
  .pi-btn-ghost:hover { background: rgba(124, 58, 237, 0.16); box-shadow: none; }
  .pi-btn:active { transform: scale(0.98); }
}
.packs-sub-titulo {
  margin: 26px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-muted);
}
@media (max-width: 760px) {
  /* En el celular el bloque se apila y las esquinas siguen arriba: el rótulo a
     la izquierda (más chico) y el botón a la derecha. */
  /* Un poco más bajo que antes (96→78px de aire arriba): con el hero ya
     recortado, así el pack insignia entra en la primera pantalla. */
  /* ── COMPACTO PARA QUE ENTRE EN LA PRIMERA PANTALLA ──
     El bloque ocupaba 625px y en un celular de 780 se cortaba abajo (había que
     bajar para ver el precio y los botones). Acá se recorta SOLO el aire: los
     rellenos y los márgenes. Ni la caja ni las letras se achican. */
  .pack-insignia { grid-template-columns: 1fr; gap: 2px; padding: 42px 16px 10px; text-align: center; }
  /* Sin altura mínima artificial. Antes se forzaba a medir casi toda la
     pantalla y el sobrante se centraba: en teléfonos altos aparecía una
     separación grande entre el rótulo y la caja. Ahora el bloque mide solo su
     contenido y conserva los mismos espacios internos compactos. */
  .pack-insignia { min-height: 0; align-content: start; }
  /* El aire de la caja (18/26px) también se recorta DENTRO del insignia: el cubo
     mide exactamente lo mismo, solo se le quita el colchón de arriba y de abajo. */
  .pack-insignia .caja3d { padding: 6px 10px 10px; }
  .pi-esquina { top: 14px; }
  .pi-estrella { right: 14px; }
  .pi-esquina-izq { left: 14px; right: 14px; width: auto; }
  .pi-esquina-izq h2 { font-size: 13px; }
  /* La bajada del rótulo se oculta en el celular: son 3 renglones de antesala
     que empujan el pack fuera de la primera pantalla. El título de la sección
     queda igual. */
  .pi-esquina-izq p { display: none; }
  .pack-insignia-visual img { max-width: 220px; }
  /* La caja del insignia un poco más chica en el celular: es la pieza que más
     alto ocupa y así el conjunto (caja + título + descripción) entra junto. */
  .pack-insignia .caja3d { --caja-w: min(172px, 49vw); --caja-h: calc(var(--caja-w) * 1.275); --caja-d: 30px; }
  .pack-insignia-txt h3 { margin: 4px 0 6px; }
  .pack-insignia-txt > p { margin: 0 auto 8px; }
  /* El precio principal, MÁS GRANDE (es el número que decide la compra) y con
     su aire: la idea es que el bloque llene justo la pantalla del celular. */
  .pack-insignia-precio { margin-bottom: 8px; }
  /* Un poco más chico que antes (27 → 24 px en un celular de 390): se lee bien
     sin comerse el alto. */
  .pack-insignia-precio b { font-size: clamp(23px, 6.2vw, 27px); }
  .pd-pack-chollo { margin-bottom: 10px; }
  .pack-insignia-txt > p { margin-left: auto; margin-right: auto; }
  .pack-insignia-precio, .pack-insignia-cta { justify-content: center; }
  .pd-pack-chollo { justify-content: center; text-align: left; }
  /* ── BOTONES EN FILA, UNO A CADA LADO (y sin relleno de más) ──
     Apilados ocupaban dos renglones y alargaban el bloque. Van lado a lado,
     con la mitad del ancho cada uno y el fondo justo: nada de aire de sobra. */
  .pack-insignia-cta { flex-direction: row; align-items: center; gap: 8px; }
  .pi-btn {
    flex: 1 1 0; min-width: 0; width: auto;
    min-height: 38px; padding: 8px 10px; font-size: 13px; gap: 6px;
  }
  /* ── LA PASTILLA DEL DESCUENTO, COMPACTA ──
     Con el texto más chico y menos relleno entra en dos renglones cortos en vez
     de estirar el bloque. */
  /* En el celular la pastilla se ordena en DOS renglones fijos: la etiqueta −%
     con los dos precios arriba, y el ahorro abajo. Antes el badge caía solo en
     su propio renglón y la pastilla ocupaba tres. */
  .pd-pack-chollo {
    /* Tres columnas: la etiqueta −%, los precios y el CARRITO en la esquina
       derecha (lo pidió el dueño ahí). El ahorro sigue abajo, a todo el ancho. */
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: 2px 8px; padding: 7px 10px; font-size: 11.5px; text-align: left;
  }
  .pd-pack-chollo-badge { grid-column: 1; grid-row: 1; padding: 3px 10px; font-size: 12px; }
  .pd-pack-chollo-txt { grid-column: 2; grid-row: 1; }
  .pd-pack-chollo-ahorro { grid-column: 1 / -1; grid-row: 2; justify-self: start; font-size: 11.5px; }
  .pd-pack-chollo-txt { padding-right: 0; }
  .pd-pack-chollo > .card-add-btn { grid-column: 3; grid-row: 1; margin-left: 0; justify-self: end; }
  .pd-pack-chollo > .card-add-btn {
    width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border: 1px solid rgba(216, 180, 254, .62);
    box-shadow: 0 6px 16px rgba(109, 40, 217, .30);
  }
  .pd-pack-chollo > .card-add-btn .card-add-ico { font-size: 16px; }
  /* ── LA LETRA DENTRO DE LA CAJA ──
     Con la caja más chica (172px) el texto de adentro se cortaba: el título, el
     subtítulo y los sellos se ajustan a la medida de la caja del celular. */
  .pack-insignia .caja3d .caja3d-contenido { padding: 10px 9px 9px; }
  .pack-insignia .caja3d .caja3d-titulo { font-size: 14.5px; line-height: 1.12; }
  .pack-insignia .caja3d .caja3d-sub { font-size: 9px; line-height: 1.3; margin-top: 5px; }
  .pack-insignia .caja3d .caja3d-badge { font-size: 8px; padding: 2px 7px; }
  .pack-insignia .caja3d .caja3d-logo { width: 54px; height: 54px; margin: 10px 0 8px; }
  .pack-insignia .caja3d .caja3d-compat { padding-top: 6px; gap: 3px; }
  .pack-insignia .caja3d .caja3d-compat span { font-size: 7.5px; padding: 2px 5px; }
}

/* ── PANTALLA CORTA (celulares bajos, ~640-800 de alto) ──
   Ahí el contenido completo no entra con el titular arriba: se vuelve a comprimir
   (se quitan el precio grande y la bajada, que repiten lo que ya dice la pastilla
   del descuento y el rótulo) para que los botones queden a la vista. */
@media (max-width: 760px) and (max-height: 800px) {
  /* También llega hasta la barra del menú (mismo truco de arriba): así no asoma
     el bloque siguiente ni en los celulares bajos. */
  .pack-insignia { padding: 44px 16px 4px; }
  .pack-insignia .caja3d { padding: 4px 10px 8px; }
  .pack-insignia-txt h3 { margin: 2px 0 4px; }
  .pack-insignia-txt > p { display: none; }
  .pack-insignia-precio { display: none; }
  .pd-pack-chollo { margin-bottom: 7px; }
}

/* En pantallas chicas la caja grande se achica sola: el ancho manda, no un
   punto de quiebre fijo (así también entra en la vista previa del panel). */
@media (max-width: 520px) {
  .caja3d { --caja-w: min(232px, 66vw); --caja-h: calc(var(--caja-w) * 1.275); --caja-d: 38px; }
  .packs-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .pack-card { padding: 10px 10px 13px; }
  .pack-card .caja3d--mini { --caja-w: 106px; --caja-h: 136px; --caja-d: 21px; }
}

/* ═══ EL CARRITO EN LAS TARJETAS DE PACK (lo pidió el dueño) ═══
   Va en la ESQUINA DERECHA y SOLO con el icono, igual que en las tarjetas del
   catálogo:
     · en la pastilla del descuento del pack insignia (esquina derecha);
     · en cada tarjeta de pack («Los demás packs»), abajo a la derecha.
   El botón vive FUERA del <a> que envuelve la tarjeta: un <button> dentro de un
   <a> no es válido y el toque se perdía (abría la ficha en vez de agregar). Por
   eso la tarjeta va dentro de .pack-card-caja. */
.pack-card-caja { position: relative; display: flex; min-width: 0; }
.pack-card-caja > .pack-card { flex: 1 1 auto; min-width: 0; }
.pack-card-caja > .card-add-btn,
.pd-pack-chollo > .card-add-btn {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0; margin: 0;
  border-radius: 50%; align-items: center; justify-content: center;
}
.pack-card-caja > .card-add-btn { position: absolute; right: 6px; bottom: 6px; z-index: 3; }
.pack-card-caja > .card-add-btn .card-add-txt,
.pd-pack-chollo > .card-add-btn .card-add-txt { display: none; }
.pack-card-caja > .card-add-btn .card-add-ico,
.pd-pack-chollo > .card-add-btn .card-add-ico { font-size: 15px; }
/* En la pastilla, al rincón derecho (en el celular lo ubica la grilla). */
.pd-pack-chollo > .card-add-btn { margin-left: auto; }
.pack-card-caja > .card-add-btn.ok .card-add-ico::after { font-size: 15px; }