/* ============================================================
   Efectos de borde en la imagen de los productos (maximo 2):
   - .fx-offer  -> producto en oferta: linea roja/naranja que palpita (::before)
   - .fx-theme  -> campana de temporada con tema: aro animado de colores (::after)
   Las clases las agrega productFx() (app/core/Helpers.php).
   ============================================================ */
@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.fx-offer, .fx-theme { position: relative; }
.fx-offer::before, .fx-theme::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}

/* Oferta */
.fx-offer::before {
  z-index: 2;
  box-shadow: inset 0 0 0 2px #ff3b30, inset 0 0 14px rgba(255, 90, 40, .45);
  animation: fx-offer-pulse 2.2s ease-in-out infinite;
}
.fx-theme.fx-offer::before { inset: 4px; box-shadow: inset 0 0 0 1.5px #ff3b30, inset 0 0 12px rgba(255, 90, 40, .4); }
@keyframes fx-offer-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* Temporada: aro de colores que gira */
.fx-theme { --fx-stops: #e2231a, #ff9f1c, #e2231a; }
.fx-theme::after {
  z-index: 3; padding: 4px;
  background: conic-gradient(from var(--fx-a), var(--fx-stops));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: fx-ring 4.5s linear infinite;
}
@keyframes fx-ring { to { --fx-a: 360deg; } }

.fx-t-viernes_negro, .card:has(.fx-t-viernes_negro) { --fx-stops: #0b0b0b, #f5b301, #0b0b0b, #f5b301, #0b0b0b; }
.fx-t-cyber_monday, .card:has(.fx-t-cyber_monday) { --fx-stops: #00e5ff, #7c4dff, #ff2bd6, #00e5ff; }
.fx-t-madre, .card:has(.fx-t-madre) { --fx-stops: #ff6b9d, #ffd0e0, #d6336c, #ff6b9d; }
.fx-t-padre, .card:has(.fx-t-padre) { --fx-stops: #1c7ed6, #a5d8ff, #0b3d91, #1c7ed6; }
.fx-t-nino, .card:has(.fx-t-nino) { --fx-stops: #ff6b6b, #ffd43b, #51cf66, #339af0, #cc5de8, #ff6b6b; }
.fx-t-san_valentin, .card:has(.fx-t-san_valentin) { --fx-stops: #e21a4b, #ffb3c6, #ffffff, #e21a4b; }
.fx-t-patrio, .card:has(.fx-t-patrio) { --fx-stops: #ce1126, #ffffff, #002d62, #ffffff, #ce1126; }
.fx-t-semana_santa, .card:has(.fx-t-semana_santa) { --fx-stops: #6741d9, #f3e8ff, #f5b301, #6741d9; }
.fx-t-halloween, .card:has(.fx-t-halloween) { --fx-stops: #f76707, #1b1b1b, #9c36b5, #1b1b1b, #f76707; }
.fx-t-clases, .card:has(.fx-t-clases) { --fx-stops: #f08c00, #228be6, #fcc419, #f08c00; }
.fx-t-navidad, .card:has(.fx-t-navidad) { --fx-stops: #c92a2a, #ffffff, #2b8a3e, #ffffff, #c92a2a; }
.fx-t-ano_nuevo, .card:has(.fx-t-ano_nuevo) { --fx-stops: #f5b301, #f1f3f5, #fff3bf, #f5b301; }

/* Sin soporte de @property el aro queda fijo; con "reducir movimiento" no se anima nada. */
@media (prefers-reduced-motion: reduce) {
  .fx-offer::before, .fx-theme::after { animation: none; }
}

/* ============================================================
   Marco de la tarjeta completa: el producto en promo se distingue del resto.
   - En oferta: marco rojo con brillo suave.
   - Con tema de temporada: el aro animado rodea toda la tarjeta (colores del tema).
   ============================================================ */
.card:has(.card-img-wrap.fx-offer) {
  border-color: #ff3b30;
  box-shadow: 0 0 0 1px #ff3b30, 0 8px 22px rgba(255, 59, 48, .22);
}
.card:has(.card-img-wrap.fx-theme) { border-color: transparent; box-shadow: 0 10px 26px rgba(0, 0, 0, .14); }
.card:has(.card-img-wrap.fx-theme)::after {
  content: ''; position: absolute; inset: 0; z-index: 4; padding: 3px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--fx-a), var(--fx-stops));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: fx-ring 4.5s linear infinite;
}
/* dentro de una tarjeta el aro va en la tarjeta, no en la imagen */
.card .fx-theme::after { display: none; }
.card .fx-offer::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .card:has(.card-img-wrap.fx-theme)::after { animation: none; }
}

/* Rotulo que parpadea sobre la imagen: nombre de la promo y mensajes cortos (los alterna main.js). */
.card .fx-offer[data-promo-now]::before {
  display: block; content: attr(data-promo-now);
  position: absolute; inset: auto 0 0 0; z-index: 3; box-shadow: none; pointer-events: none;
  padding: 6px 8px; text-align: center; color: #fff;
  font: 800 .72rem/1.1 var(--bc-display, inherit); letter-spacing: .07em; text-transform: uppercase;
  background: rgba(190, 20, 15, .9); text-shadow: 0 0 8px rgba(255, 255, 255, .55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: fx-blink 1.15s ease-in-out infinite;
}
.card .fx-theme[data-promo-now]::before { background: rgba(12, 16, 24, .82); }
@keyframes fx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }
@media (prefers-reduced-motion: reduce) {
  .card .fx-offer[data-promo-now]::before { animation: none; }
}

/* Stickers del tema montados sobre el marco (campanas y lazos, calabazas y esqueletos, corazones y cupidos...).
   Son ilustraciones SVG con borde blanco de sticker; sobresalen de la tarjeta. */
.fx-ico {
  --r: 0deg;
  position: absolute; z-index: 6; display: block; width: 54px; height: 54px; pointer-events: none; user-select: none;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
          drop-shadow(0 4px 5px rgba(0, 0, 0, .35));
  transform: rotate(var(--r));
}
.fx-ico svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fx-ico-a { --r: 12deg; top: -20px; right: -17px; }
.fx-ico-b { --r: -12deg; left: -17px; bottom: 36px; width: 46px; height: 46px; }
.gallery-main .fx-ico { width: 68px; height: 68px; }
.gallery-main .fx-ico-a { top: -22px; right: -20px; }
.gallery-main .fx-ico-b { left: -20px; bottom: 28px; width: 60px; height: 60px; }
.fx-ia-float { animation: fx-ico-float 2.8s ease-in-out infinite; }
.fx-ia-float.fx-ico-b { animation-delay: -1.4s; }
.fx-ia-pulse { animation: fx-ico-pulse 1.5s ease-in-out infinite; }
.fx-ia-pulse.fx-ico-b { animation-delay: -.75s; }
.fx-ia-swing { animation: fx-ico-swing 1.9s ease-in-out infinite; transform-origin: 50% 12%; }
.fx-ia-swing.fx-ico-b { animation-delay: -.95s; }
@keyframes fx-ico-float { 0%, 100% { transform: translateY(0) rotate(calc(var(--r) - 3deg)); } 50% { transform: translateY(-4px) rotate(calc(var(--r) + 3deg)); } }
@keyframes fx-ico-pulse { 0%, 100% { transform: scale(1) rotate(var(--r)); } 40% { transform: scale(1.14) rotate(var(--r)); } 60% { transform: scale(1.04) rotate(var(--r)); } }
@keyframes fx-ico-swing { 0%, 100% { transform: rotate(calc(var(--r) - 12deg)); } 50% { transform: rotate(calc(var(--r) + 12deg)); } }
@media (prefers-reduced-motion: reduce) { .fx-ico { animation: none !important; } }

/* Con stickers la tarjeta deja de recortar: la imagen se redondea sola y no hace zoom al pasar el cursor. */
.card:has(.fx-ico) { overflow: visible; }
.card:has(.fx-ico) .card-img-wrap { overflow: visible; }
.card:has(.fx-ico) .card-img-wrap .card-img { border-radius: calc(var(--bc-radius, 12px) - 1px) calc(var(--bc-radius, 12px) - 1px) 0 0; }
.card:has(.fx-ico):hover .card-img { transform: none; }
.gallery-main:has(.fx-ico) { overflow: visible; }