/* Escenario estándar de producto — FUENTE ÚNICA (Leo 22-sep + galería 30-sep).
   Lo cargan el sitio público (/plastimex-pet, antes de aurora.css) y el panel
   de Marketing → Contenido de la página, para que la vista previa del panel
   sea EXACTAMENTE la tarjeta/ficha pública: mismo degradado, misma retícula,
   mismo encuadre del recorte. Si cambias el fondo, cámbialo SOLO aquí. */

/* ——— Fondo estándar de producto (Leo 22-sep) ———
   Decisión de marketing: el fondo OFICIAL de toda imagen de producto es el
   degradado azul con retícula de la ficha. Una sola clase reutilizable;
   cero blancos planos y cero degradados sin grid. La ficha (.sheet-viz) y
   las tarjetas/miniaturas (.visual, .cap-thumb) comparten la misma rampa y
   la misma familia de retícula. El cutout (limpia/webp transparente) se
   planta encima; el fondo ya no viene horneado en la foto. */
.producto-fondo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    #D4E8F8 0%,
    #E3F0FB 28%,
    #EEF6FC 52%,
    #F7FBFE 58%,
    #FFFFFF 100%);
}
/* Halo superior (antes .viz-aurora). */
.producto-fondo::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 42%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 0%,
    rgba(78,155,232,.16) 0%,
    transparent 70%);
}
/* Piso en perspectiva + retícula. .viz-floor / .viz-plane son alias de la
   ficha (markup histórico); .producto-fondo__* es el nombre canónico. */
.producto-fondo__piso,
.viz-floor {
  --floor-h: 38%;
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor-h);
  perspective: 420px;
  perspective-origin: 50% 0%;
  pointer-events: none; z-index: 1;
  overflow: visible;
}
.producto-fondo__reticula,
.viz-plane {
  position: absolute; left: -45%; top: 0;
  width: 190%; height: 220%;
  transform: rotateX(62deg);
  transform-origin: 50% 0%;
  background-image:
    linear-gradient(rgba(47,114,190,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,114,190,.18) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
}
/* Variante tarjeta/miniatura: misma familia visual, degradado un punto más
   luminoso para que ámbar/negro/azul sigan leyéndose en cajas chicas, y
   retícula más densa acorde a la escala. */
.producto-fondo--tarjeta {
  background: linear-gradient(180deg,
    #DCECF9 0%,
    #E6F2FB 22%,
    #EEF6FC 48%,
    #F6FBFE 64%,
    #FFFFFF 100%);
}
.producto-fondo--tarjeta::before {
  height: 48%;
  background: radial-gradient(ellipse 80% 70% at 50% 0%,
    rgba(78,155,232,.12) 0%,
    transparent 70%);
}
.producto-fondo--tarjeta .producto-fondo__piso {
  --floor-h: 44%;
  perspective: 280px;
}
.producto-fondo--tarjeta .producto-fondo__reticula {
  background-size: 26px 26px;
  background-image:
    linear-gradient(rgba(47,114,190,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,114,190,.14) 1px, transparent 1px);
}
/* Miniatura 52px (tapas/compatibles): grid 2D suave, sin perspectiva 3D
   (a esa escala el rotateX se lee como ruido). */
.producto-fondo--mini {
  background: linear-gradient(180deg, #DCECF9 0%, #EAF4FC 45%, #F7FBFE 100%);
}
.producto-fondo--mini::before { height: 55%; opacity: .85; }
.producto-fondo--mini::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(47,114,190,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,114,190,.12) 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: center bottom;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.75) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.75) 100%);
}
.producto-fondo--mini .producto-fondo__piso { display: none; }

.visual {
  height: 196px; border-radius: var(--radius-sm, 12px); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 12px 18px;
}
.visual .slot { width: 42%; max-width: 110px; height: 78%; position: relative; z-index: 2; }
.visual .photo {
  width: 100%; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  position: relative; z-index: 2;
}
.visual .photo img {
  max-width: 88%; max-height: 92%; width: auto; height: auto; object-fit: contain;
  /* Doble sombra: contorno ceñido (silueta en piezas claras) + contacto. */
  filter:
    drop-shadow(0 1px 1px rgba(20,62,115,.20))
    drop-shadow(0 16px 14px rgba(20,62,115,.14));
}

/* ——— Selector de color (swatches) — tarjeta pública y vista previa del panel ———
   Mismo producto en varios colores (como unos tenis): el punto cambia la
   imagen de la tarjeta sin salir del listado. Área táctil de 28 px. */
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 6px; min-height: 28px; }
.swatch {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.swatch-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(20,62,115,.28);
  box-shadow: 0 0 0 2px #fff;
  transition: box-shadow .15s ease, transform .15s ease;
}
.swatch:hover .swatch-dot { transform: scale(1.08); }
.swatch[aria-pressed="true"] .swatch-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #171717; }
.swatch:focus-visible { outline: 2px solid #171717; outline-offset: 1px; }
.swatch-name { font-size: 11px; font-weight: 600; color: #143E73; margin-left: 6px; white-space: nowrap; }
.visual .photo img { transition: opacity .18s ease; }
.visual .photo img.is-swapping { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  .swatch-dot, .visual .photo img { transition: none; }
}