/* ─────────────────────────────────────────────────────────────
   PRODUCTO 2.5D — efecto permanente (no es de ningún tema).
   Cada producto con recorte sin fondo (assets/productos/cortes/*.webp) se para sobre un mesón con
   foco dorado: al aparecer en pantalla se levanta desde acostado, flota suave, se inclina con el
   scroll y, en computador, sigue al mouse con su sombra. Al agregarlo al carrito da un salto.
   El movimiento lo maneja js/producto-25d.js y solo existe con html.p25-on (nunca con
   "reducir movimiento"). Sin JS, o sin recorte, el producto se ve quieto y completo.

   Capas por tarjeta:  .p25 (escenario, perspectiva y foco) › ::after (sombra en el piso)
                       › .card-img (el recorte; se transforma con rotate/translate/transform)
   Propiedades separadas para que no se pisen:
     rotate     → levantarse al entrar           translate → flotar y saltar
     transform  → inclinación (scroll + mouse)   filter    → sombra que sigue al mouse
   ───────────────────────────────────────────────────────────── */

.p25{
  position:relative;height:180px;overflow:hidden;isolation:isolate;
  perspective:700px;perspective-origin:50% 78%;
  background:
    radial-gradient(ellipse 44% 26% at 50% 85%, rgba(245,168,0,.22), transparent 72%),
    linear-gradient(180deg, transparent 0 83.5%, rgba(245,168,0,.09) 84%, transparent 86%),
    radial-gradient(ellipse 95% 90% at 50% 6%, #261e15 0%, #14100c 56%, #0a0807 100%);
}
/* Sombra de contacto en el piso: se achica cuando el producto sube (flotar) */
.p25::after{
  content:'';position:absolute;left:24%;right:24%;bottom:11%;height:9%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,0,0,.78), rgba(0,0,0,0));
}
.p25 .card-img{
  /* Una imagen con position:absolute y width:auto usa su tamaño natural, no el espacio entre left y right:
     por eso el ancho y el alto van explícitos (5 % + 90 % + 5 %, 6 % + 79 % + 15 %). La base queda al 85 %. */
  position:absolute;left:5%;top:6%;width:90%;height:79%;z-index:1;
  object-fit:contain;object-position:50% 100%;
  transform-origin:50% 100%;
  --p25-sombra:drop-shadow(var(--sx,0px) var(--sy,9px) 9px rgba(0,0,0,.6));
  filter:var(--p25-sombra);
  /* --rxs/--rys: scroll · --rxp/--ry: mouse o dedo · --gx/--gy: sensor del teléfono (vienen de <html>) */
  transform:rotateX(calc(var(--rxs,0deg) + var(--rxp,0deg) + var(--gx,0deg))) rotateY(calc(var(--rys,0deg) + var(--ry,0deg) + var(--gy,0deg)));
}
/* El navegador conserva el scroll vertical; el gesto horizontal queda para girar la hamburguesa */
html.p25-on .p25{touch-action:pan-y}
/* Foto sin recorte (por ejemplo subida desde el panel): ocupa todo el escenario, como antes, y no se mueve */
.p25 .card-img.sin-corte{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:none;transform:none}
.p25:has(.sin-corte)::after{display:none}

/* ── Movimiento (solo con html.p25-on) ── */
html.p25-on .p25 .card-img:not(.sin-corte){
  transition:rotate .95s cubic-bezier(.18,.95,.3,1.22), scale .95s cubic-bezier(.18,.95,.3,1.22), opacity .45s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
/* Esperando entrar en pantalla: acostado hacia atrás, un poco más chico */
html.p25-on .p25.p25-espera .card-img:not(.sin-corte){rotate:x 64deg;scale:.9;opacity:.25}
html.p25-on .p25.p25-espera::after{opacity:.2;scale:.6}
html.p25-on .p25::after{transition:opacity .9s ease, scale .9s ease}
/* Siguiendo al mouse: la inclinación responde rápido */
html.p25-on .p25.p25-mouse .card-img{transition:rotate .95s cubic-bezier(.18,.95,.3,1.22), scale .95s, opacity .45s, transform .12s linear}

/* Flotar: solo mientras la tarjeta está en pantalla */
@keyframes p25-flota{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes p25-sombra{0%,100%{scale:1;opacity:1}50%{scale:.86;opacity:.75}}
html.p25-on .p25.p25-vivo:not(.p25-espera):not(.p25-salta) .card-img:not(.sin-corte){animation:p25-flota 4.2s ease-in-out infinite}
html.p25-on .p25.p25-vivo:not(.p25-espera)::after{animation:p25-sombra 4.2s ease-in-out infinite}

/* Salto al agregar al carrito */
@keyframes p25-salta{
  0%{translate:0 0;scale:1}
  18%{translate:0 2px;scale:1.04 .94}
  45%{translate:0 -20px;scale:.97 1.04}
  70%{translate:0 0;scale:1.03 .97}
  100%{translate:0 0;scale:1}
}
html.p25-on .p25.p25-salta .card-img:not(.sin-corte){animation:p25-salta .62s cubic-bezier(.3,.7,.4,1) 1}

/* ── Banner: la foto de la promo, recortada, se para sobre el mismo foco ── */
.banner-slide.p25-slide{
  perspective:1100px;perspective-origin:70% 88%;
  background:
    radial-gradient(ellipse 30% 20% at 74% 90%, rgba(245,168,0,.20), transparent 72%),
    radial-gradient(ellipse 70% 95% at 74% 30%, #211a13 0%, #100d0a 60%, var(--black) 100%);
}
.banner-bg.p25-banner{
  background-repeat:no-repeat;background-size:auto 84%;background-position:right 7% bottom 7%;
  transform:none;transform-origin:50% 93%;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.65));
}
html.p25-on .banner-bg.p25-banner{transition:rotate 1.1s cubic-bezier(.18,.95,.3,1.18) .12s, opacity .5s ease .12s, translate .5s cubic-bezier(.2,.8,.2,1)}
html.p25-on .banner-slide:not(.active) .banner-bg.p25-banner{rotate:x 40deg;opacity:.3}
html.p25-on .banner-slide.active .banner-bg.p25-banner{translate:var(--bx,0px) var(--by,0px)}

@media(max-width:600px){
  /* En el celular el texto va abajo a la izquierda: la promo se para arriba a la derecha */
  .banner-slide.p25-slide{background:
    radial-gradient(ellipse 34% 14% at 76% 50%, rgba(245,168,0,.20), transparent 72%),
    radial-gradient(ellipse 80% 70% at 76% 22%, #211a13 0%, #100d0a 60%, var(--black) 100%)}
  .banner-bg.p25-banner{background-size:54% auto;background-position:right 2% top 8%;transform-origin:76% 50%}
}
@media(max-width:480px){
  .p25{height:130px}
}
@media(prefers-reduced-motion:reduce){
  .p25 .card-img,.banner-bg.p25-banner{transition:none;animation:none}
}