/**
 * DEPORTES JIMMY — v6.0 "SENSACIÓN DE MOUSE"
 * -------------------------------------------------------------
 * Efectos de interacción para la home: elegantes primero, modernos
 * y con un puntito agresivo después. La regla de oro es que se
 * sientan igual de vivos con el mouse en computadora que con el
 * dedo en tablet y celular — en pantalla táctil no existe el
 * ":hover" de verdad, así que en vez de depender solo de eso,
 * estos efectos también reaccionan a ":active" (el instante en que
 * el dedo está apoyado) y, donde hace falta más control, a clases
 * que pone interactions.js con Pointer Events — que en un teléfono
 * se disparan igual al tocar que un mouse al pasar por encima.
 *
 * Todo respeta "reducir movimiento": quien lo pida en su sistema
 * ve las secciones quietas y completas, sin perderse nada.
 */

:root {
  --dj-fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Acelera y frena por igual, sin arranque brusco — la curva
     "estándar" de Material Design. Se usa donde el movimiento tiene
     que sentirse fino y tranquilo (Hombre/Mujer), no agresivo. */
  --dj-fx-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dj-gender-dur: 0.75s;
}


/* ===========================================================
   1. .dj-hover-fx
   -----------------------------------------------------------
   Brillo diagonal + anillo rojo + elevación. Se usa en las fichas
   de "Compra por Deporte" y "Arma Tu Gym En Casa": un vidrio que
   destella y la ficha que se despega del fondo, como si de verdad
   hubiera algo ahí debajo reaccionando al mouse.
   =========================================================== */
/**
 * ⚠️ El anillo rojo y la sombra de elevación van en el propio
 * ".dj-hover-fx" (box-shadow del elemento), NUNCA en un "::before" con
 * inset:0 — la ficha (.dj-sport-tile / .dj-gym-tile) tiene
 * "overflow: hidden" para recortar la foto en las esquinas
 * redondeadas, y ESE overflow SÍ recorta el box-shadow de un hijo
 * (el "::before") que se sale de sus bordes, aunque no recorte el
 * box-shadow del propio elemento. Puesto en el elemento, el anillo se
 * ve completo; puesto en el pseudo-elemento, se vería cortado por los
 * cuatro lados y el "efecto agresivo" se perdería justo donde más se
 * nota (el mouse encima).
 */
.dj-hover-fx {
  position: relative;
  isolation: isolate;
  transition: transform 0.4s var(--dj-fx-ease), box-shadow 0.4s var(--dj-fx-ease);
}

.dj-hover-fx::after {
  /* El destello: una franja de luz que cruza la ficha en diagonal */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.4) 46%,
    rgba(255, 255, 255, 0.08) 58%,
    transparent 72%
  );
  background-size: 240% 240%;
  background-position: 130% -20%;
}

/**
 * v7.1 — EL ":active" A SECAS SE QUITÓ DE AQUÍ.
 *
 * "Compra por Deporte" (.dj-sport-tile) vive DENTRO de un carrusel
 * que se arrastra con el dedo. ":active" se dispara en el instante
 * mismo del toque — antes de que el carrusel sepa si el dedo va a
 * quedarse quieto o va a arrastrar — así que el brillo/elevación
 * competía con el swipe justo al empezar y se sentía "raro"/con
 * tirones (el mismo síntoma que en las tarjetas de producto, ver
 * product-hover.js). "Arma Tu Gym En Casa" (.dj-gym-tile) NO está en
 * un carrusel, así que para esa ficha ":active" seguía siendo seguro
 * — se mantiene, pero ya no en TODOS los ".dj-hover-fx".
 *
 * Ahora, en táctil, es interactions.js el que "arma" el efecto con un
 * pequeño retraso y lo cancela si el dedo se mueve de verdad (o sea,
 * si es un swipe) — la clase que pone es ".is-fx-active", que ya
 * estaba aquí desde el principio. Con mouse de escritorio no cambia
 * nada: ":hover" sigue disparando al instante, como siempre.
 */
.dj-hover-fx:hover,
.dj-hover-fx.is-fx-active,
.dj-gym-tile.dj-hover-fx:active {
  transform: translate3d(0, -8px, 0) scale(1.025);
  z-index: 5;
  box-shadow:
    0 26px 46px rgba(0, 0, 0, 0.32),
    0 0 0 2.5px var(--dj-red, #ff0000),
    0 0 26px 2px rgba(255, 0, 0, 0.45);
}

.dj-hover-fx:hover::after,
.dj-hover-fx.is-fx-active::after,
.dj-gym-tile.dj-hover-fx:active::after {
  opacity: 1;
  animation: dj-fx-sweep 0.85s var(--dj-fx-ease) forwards;
}

@keyframes dj-fx-sweep {
  from { background-position: 130% -20%; }
  to   { background-position: -30% 120%; }
}

/* Los tiles ya suben (dj-tilt) con la 3D del mouse en escritorio;
   aquí solo añadimos un pelín más de contraste a la foto al
   reaccionar, para que se note que "algo pasó" y no sea solo el
   marco el que se mueve. */
.dj-sport-tile.dj-hover-fx:hover .dj-sport-tile__bg,
.dj-sport-tile.dj-hover-fx.is-fx-active .dj-sport-tile__bg,
.dj-gym-tile.dj-hover-fx:hover .dj-gym-tile__bg,
.dj-gym-tile.dj-hover-fx:active .dj-gym-tile__bg {
  filter: saturate(1.15) contrast(1.05);
}


/* ===========================================================
   2. COLECCIÓN HOMBRE / MUJER — el panel que se estira hacia
   la mano de su lado y se resalta
   -----------------------------------------------------------
   Al pasar el mouse (o el dedo) sobre "Hombre", esa columna crece
   hacia la IZQUIERDA (su lado) y empuja un poco a "Mujer"; al revés
   con "Mujer", que crece hacia la DERECHA. El texto y la foto de la
   columna activa además se acercan y se iluminan — el "resalte".
   Las clases is-hover-men / is-hover-women las pone interactions.js
   con Pointer Events, así que responden igual al mouse que al dedo.
   =========================================================== */
/**
 * v6.0.2 — MÁS SUTIL Y EN TODOS LOS ANCHOS.
 *
 * Dos correcciones sobre la v6.0.1:
 *
 * 1) SUTIL, NO UN GOLPE. El vaivén de antes (1.55 / 0.6, casi 72/28)
 *    cambiaba de golpe visual el ancho de las dos columnas Y el zoom
 *    de la foto Y un anillo rojo duro Y el texto, todo a la vez y con
 *    una curva que arranca rápido (buena para algo "agresivo" como
 *    Compra por Deporte, mala para algo que tiene que sentirse fino).
 *    Ahora el vaivén es mínimo (1.12 / 0.88, más o menos 56/44 —
 *    apenas se nota que una columna "respira" hacia su lado), la
 *    curva es una que ACELERA Y FRENA suave por igual (sin arranque
 *    brusco) y TODO —ancho, foto, sombra, texto— tarda exactamente lo
 *    mismo, así se siente como un solo movimiento, no cuatro
 *    animaciones peleando entre sí.
 *
 * 2) TAMBIÉN EN CELULAR. Antes el crecimiento de columnas solo pasaba
 *    a partir de 641px — por eso "no hacía nada" en móvil (probando
 *    con la ventana angosta, ni con mouse se veía). Se quitó ese
 *    límite: ahora responde igual de ancho a angosto. El toque en
 *    pantalla táctil dura lo que dura el dedo apoyado (interactions.js
 *    ya usa Pointer Events, que en táctil se comportan igual que un
 *    "mouseenter/mouseleave"), así que con el dedo quieto un instante
 *    sobre la foto se alcanza a ver perfectamente.
 */
.dj-gender-split__col {
  transition:
    flex-grow var(--dj-gender-dur) var(--dj-fx-ease-soft),
    box-shadow var(--dj-gender-dur) var(--dj-fx-ease-soft),
    filter var(--dj-gender-dur) var(--dj-fx-ease-soft);
}

.dj-gender-split.is-hover-men   .dj-gender-split__col--men   { flex-grow: 1.12; }
.dj-gender-split.is-hover-men   .dj-gender-split__col--women { flex-grow: 0.88; }
.dj-gender-split.is-hover-women .dj-gender-split__col--women { flex-grow: 1.12; }
.dj-gender-split.is-hover-women .dj-gender-split__col--men   { flex-grow: 0.88; }

/* Cada foto respira hacia SU lado: Hombre hacia la izquierda,
   Mujer hacia la derecha — por eso el transform-origin cambia.
   El zoom es chico a propósito (iba a 1.12 antes; ahora 1.05, lo
   mismo que ya usa el resto del tema para fotos "en reposo activo",
   ver .dj-card-live) — que se note, no que salte. */
.dj-gender-split__col--men .dj-gender-split__bg { transform-origin: left center; }
.dj-gender-split__col--women .dj-gender-split__bg { transform-origin: right center; }

/* ⚠️ OJO: ".is-active" en ".dj-gender-split__bg" ya significa otra cosa
   (home.js, initGenderRotate: "esta es la foto que toca ahora en la
   rotación"). Para el estado de "esta columna tiene el mouse/dedo
   encima" usamos a propósito un nombre distinto, ".is-fx-hover", puesto
   por interactions.js con Pointer Events — así nunca se pisan. */
.dj-gender-split__col--men.is-fx-hover .dj-gender-split__bg.is-active,
.dj-gender-split__col--women.is-fx-hover .dj-gender-split__bg.is-active {
  transform: scale(1.05);
}

/* El resalte: la foto se aclara un poco (nada de anillos duros de
   color, que es justo lo que se sentía como "golpe") y el texto se
   acerca un pelín, casi imperceptible. */
.dj-gender-split__col.is-fx-hover {
  box-shadow: inset 0 -120px 110px -60px rgba(0, 0, 0, 0.22);
}
.dj-gender-split__col.is-fx-hover .dj-gender-split__bg.is-active {
  filter: brightness(1.08) saturate(1.05);
}
.dj-gender-split__col .dj-gender-split__bg {
  transition: opacity 1s ease, transform var(--dj-gender-dur) var(--dj-fx-ease-soft), filter var(--dj-gender-dur) var(--dj-fx-ease-soft);
}
.dj-gender-split__col.is-fx-hover .dj-gender-split__overlay {
  transition: background var(--dj-gender-dur) var(--dj-fx-ease-soft);
  background: linear-gradient(0deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.14) 60%, rgba(0,0,0,0.26) 100%);
}
.dj-gender-split__col .dj-gender-split__content {
  transition: transform var(--dj-gender-dur) var(--dj-fx-ease-soft);
}
.dj-gender-split__col--men.is-fx-hover .dj-gender-split__content {
  transform: translateX(3px);
}
.dj-gender-split__col--women.is-fx-hover .dj-gender-split__content {
  transform: translateX(-3px);
}
.dj-gender-split__col .dj-btn {
  transition: background-color var(--dj-gender-dur) ease, border-color var(--dj-gender-dur) ease, color var(--dj-gender-dur) ease;
}
.dj-gender-split__col.is-fx-hover .dj-btn {
  background: var(--dj-red, #ff0000);
  border-color: var(--dj-red, #ff0000);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .dj-gender-split,
  .dj-gender-split__col,
  .dj-gender-split__bg,
  .dj-gender-split__content { transition: none !important; }
}


/* ===========================================================
   3. .dj-spotlight — Ofertas de Jimmy / Envío Gratis
   -----------------------------------------------------------
   ESCRITORIO (mouse de verdad, "hover: hover" + "pointer: fine"):
   un foco de luz que sigue al cursor, como pasar una linterna por
   encima de la franja — moderno, un poco "premium", sin dejar de
   ser sutil. Las coordenadas las pone interactions.js en --dj-mx /
   --dj-my sobre la marcha.

   TABLET Y CELULAR: la linterna no tiene sentido sin cursor, así
   que ahí el estilo es OTRO, más simple y directo — un pulso de
   brillo + un ligerísimo hundimiento al tocar, para que se sienta
   el toque sin que la franja entera "salte" en una pantalla chica.
   =========================================================== */
.dj-spotlight {
  position: relative;
  isolation: isolate;
}

.dj-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .dj-spotlight::before {
    background: radial-gradient(
      420px circle at var(--dj-mx, 50%) var(--dj-my, 50%),
      rgba(255, 255, 255, 0.32),
      rgba(255, 255, 255, 0.08) 38%,
      transparent 65%
    );
    mix-blend-mode: overlay;
  }
  .dj-spotlight:hover::before { opacity: 1; }

  .dj-spotlight {
    transition: transform 0.45s var(--dj-fx-ease), box-shadow 0.45s var(--dj-fx-ease);
  }
  .dj-spotlight:hover {
    transform: scale(1.012);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
    z-index: 3;
  }
  .dj-spotlight:hover .dj-sale-ship__title,
  .dj-spotlight:hover .dj-sale-ship__ship-title {
    text-shadow: 0 0 22px rgba(255, 60, 40, 0.55);
  }
}

/* Tablet / celular: otro estilo, pensado para el dedo (:active) */
@media (hover: none), (pointer: coarse) {
  .dj-spotlight {
    transition: transform 0.25s ease, filter 0.25s ease;
  }
  .dj-spotlight:active {
    transform: scale(0.985);
    filter: brightness(1.1) saturate(1.08);
  }
  .dj-spotlight::before {
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.22), transparent 70%);
  }
  .dj-spotlight:active::before {
    opacity: 1;
    transition: opacity 0.15s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dj-spotlight, .dj-spotlight::before { transition: none !important; animation: none !important; }
}


/* ===========================================================
   4. TARJETAS DE PRODUCTO — un poco más de vida al tocarlas
   (el cambio de foto/color lo hace product-hover.js; esto es
   solo el "se despega" de la tarjeta, igual con dedo que con mouse)
   -----------------------------------------------------------
   ⚠️ En la tienda/categorías, ".woocommerce ul.products li.product"
   (shop.css) ya sube la tarjeta en ":hover" — aquí solo le sumamos
   ":active" para que el dedo en tablet/celular sienta lo mismo. Esa
   rejilla NO se arrastra con el dedo, así que ":active" ahí es seguro.
   En la HOME esa regla de shop.css no llega a aplicarse nunca (el
   ".woocommerce" del selector es una clase que pone el propio
   WooCommerce alrededor de la rejilla en la tienda, y la home no pasa
   por ahí — ver el comentario de "CARRUSEL GENÉRICO" en home.css), así
   que ahí la elevación la da esta segunda regla, agarrada a
   ".dj-product-carousel" — la clase que SÍ llevan Fresh Del Camión,
   Los Más Vendidos y Producto Estrella.
   v7.1: a ".dj-product-carousel ... li.product" se le QUITÓ el
   ":active" — esos tres carruseles SÍ se arrastran con el dedo, y
   ":active" se disparaba en el instante del toque, compitiendo con el
   swipe (el mismo problema que en .dj-hover-fx, arriba, y el causante
   del "desplazamiento raro" que se reportó en Producto estrella). El
   dedo ahí sigue viendo elevación, pero ahora la decide product-hover.js
   con su propio retraso-y-cancela-si-hay-swipe, no un ":active" a secas. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.dj-product-carousel .dj-carousel__track > li.product {
  transition: transform 0.35s var(--dj-fx-ease), box-shadow 0.35s var(--dj-fx-ease);
}
.woocommerce ul.products li.product:active,
.woocommerce-page ul.products li.product:active,
.dj-product-carousel .dj-carousel__track > li.product:hover,
.dj-product-carousel .dj-carousel__track > li.product.is-fx-active {
  box-shadow: var(--dj-shadow-md, 0 8px 24px rgba(0,0,0,0.14));
  transform: translateY(-5px);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .dj-product-carousel .dj-carousel__track > li.product { transition: none !important; }
}