/* =========================================================
   DEPORTES JIMMY — HOMEPAGE
   ========================================================= */

/* ---------------------------------------------------------
   SCROLL-REVEAL
   Las reglas de .dj-reveal ahora viven en assets/css/motion.css
   (junto con el parallax y la profundidad 3D). No las dupliques
   aquí: si están en dos archivos, gana la última que carga y se
   rompe el efecto de profundidad.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Encabezado de sección reutilizable
   --------------------------------------------------------- */
.dj-section-heading {
  text-align: center;
  margin-bottom: var(--dj-space-xl, 64px);
}
.dj-section-heading__eyebrow {
  display: block;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--dj-red, #FF0000);
  margin-bottom: 8px;
}
.dj-section-heading__eyebrow--white { color: rgba(255,255,255,0.7); }
.dj-section-heading__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0;
}

.dj-home section {
  padding: var(--dj-space-2xl, 96px) 0;
}


/* ===========================================================
   1. TILES DE CATEGORÍAS
   =========================================================== */
.dj-cat-tiles { padding-top: var(--dj-space-xl, 64px); padding-bottom: 0; }
.dj-cat-tiles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px;
}
.dj-cat-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 280px;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  text-decoration: none;
}
.dj-cat-tile__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.dj-cat-tile:hover .dj-cat-tile__bg {
  transform: scale(1.08);
}
.dj-cat-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.75) 100%);
}
.dj-cat-tile__label {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: var(--dj-font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  padding: 24px;
  letter-spacing: 0.5px;
}


/* ===========================================================
   2. PRODUCTOS DESTACADOS (home)
   =========================================================== */
.dj-home-products__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tarjeta más refinada: borde sutil, sombra suave, hover con elevación real */
.dj-home-products__grid li.product {
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.dj-home-products__grid li.product:hover {
  box-shadow: 0 16px 32px rgba(0,0,0,0.1) !important;
  border-color: transparent !important;
}

.dj-home-products__grid li.product img {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  aspect-ratio: 1 / 1;
}
.dj-home-products__grid li.product:hover img {
  transform: scale(1.05);
}
.dj-home-products__grid li.product a:first-child {
  overflow: hidden;
}

/* Título: SIEMPRE una sola línea, con puntos suspensivos si no cabe */
.dj-home-products__grid .woocommerce-loop-product__title {
  font-size: 0.82rem !important;
  font-weight: var(--dj-weight-medium, 500) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  min-height: 0 !important;
  padding: 16px 16px 0 !important;
  color: var(--dj-black-soft, #111) !important;
}

.dj-home-products__grid .price {
  padding: 4px 16px 16px !important;
  font-size: 0.92rem !important;
}

/* Badges más discretos y elegantes en las tarjetas de la home */
.dj-home-products__grid span.onsale.dj-badge-sale,
.dj-home-products__grid .dj-badge-new {
  font-size: 0.62rem !important;
  padding: 4px 9px !important;
  letter-spacing: 0.3px;
}

.dj-home-products__cta {
  text-align: center;
  margin-top: var(--dj-space-xl, 64px);
}


/* ===========================================================
   3. FRANJA DE MARCAS (scroll infinito)
   =========================================================== */
.dj-brand-strip {
  padding: var(--dj-space-lg, 40px) 0;
  background: var(--dj-gray-light, #f4f4f5);
  overflow: hidden;
}
.dj-brand-strip__track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: dj-marquee 28s linear infinite;
}
.dj-brand-strip:hover .dj-brand-strip__track {
  animation-play-state: paused;
}
@keyframes dj-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.dj-brand-strip__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.dj-brand-strip__item img {
  max-height: 100%;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.dj-brand-strip__item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
.dj-brand-strip__text {
  font-family: var(--dj-font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--dj-gray, #AEAEAF);
  letter-spacing: 1px;
  transition: color 0.3s ease;
}
.dj-brand-strip__item:hover .dj-brand-strip__text {
  color: var(--dj-black-soft, #111);
}


/* ===========================================================
   4. BANNER PROMOCIONAL
   =========================================================== */
.dj-promo-banner {
  position: relative;
  overflow: hidden;
  color: #fff;
}
.dj-promo-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dj-promo-banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 40px;
}
.dj-promo-banner__title {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-black, 900);
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 0 0 16px;
  line-height: 1.15;
}
.dj-promo-banner__text {
  font-family: var(--dj-font-body);
  color: rgba(255,255,255,0.85);
  max-width: 460px;
  margin: 0 0 28px;
}
.dj-promo-banner__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dj-promo-banner__visual-placeholder {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dj-float 4s ease-in-out infinite;
}
.dj-promo-banner__visual-mark {
  width: 96px;
  height: auto;
  opacity: 0.9;
}
@keyframes dj-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}


/* ===========================================================
   5. TESTIMONIOS
   =========================================================== */
.dj-testimonials {
  background: var(--dj-black-soft, #111);
  color: #fff;
}
.dj-testimonials__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 60px;
  align-items: center;
}
.dj-testimonials__title {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin: 0;
  line-height: 1.2;
}
.dj-testimonials__carousel {
  position: relative;
  min-height: 200px;
}
.dj-testimonials__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}
.dj-testimonials__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  position: relative;
}
.dj-testimonials__quote {
  font-family: var(--dj-font-body);
  font-size: 1.3rem;
  font-weight: var(--dj-weight-light, 300);
  line-height: 1.5;
  margin: 0 0 28px;
  color: #fff;
}
.dj-testimonials__author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dj-testimonials__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--dj-red, #FF0000);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dj-font-display);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.dj-testimonials__author strong {
  display: block;
  font-size: 0.95rem;
}
.dj-testimonials__author span {
  display: block;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}
.dj-testimonials__dots {
  display: flex;
  gap: 10px;
  margin-top: 32px;
}
.dj-testimonials__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  transition: var(--dj-transition);
  padding: 0;
}
.dj-testimonials__dot.is-active {
  background: var(--dj-red, #FF0000);
  transform: scale(1.3);
}


/* ===========================================================
   6. BLOG / NOTICIAS
   =========================================================== */
.dj-home-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.dj-blog-card {
  text-decoration: none;
  display: block;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  box-shadow: var(--dj-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  transition: var(--dj-transition);
}
.dj-blog-card:hover {
  box-shadow: var(--dj-shadow-md, 0 8px 24px rgba(0,0,0,0.14));
  transform: translateY(-4px);
}
.dj-blog-card__media {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
}
.dj-blog-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--dj-red, #FF0000);
  color: #fff;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  font-size: 0.68rem;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--dj-radius-sm, 4px);
}
.dj-blog-card__body { padding: 20px; background: #fff; }
.dj-blog-card__title {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-semibold, 600);
  font-size: 1.05rem;
  color: var(--dj-black-soft, #111);
  margin: 0 0 10px;
  line-height: 1.4;
}
.dj-blog-card__date {
  font-size: 0.78rem;
  color: var(--dj-gray-dark, #4a4a4a);
}


/* ===========================================================
   7. CTA FINAL
   =========================================================== */
.dj-final-cta {
  text-align: center;
  padding: var(--dj-space-2xl, 96px) 0;
}
.dj-final-cta__title {
  color: #fff;
  font-family: var(--dj-font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-transform: uppercase;
  margin: 0 0 28px;
}


/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1024px) {
  .dj-cat-tiles__grid { grid-template-columns: repeat(2, 1fr); }
  .dj-cat-tile:last-child { grid-column: 1 / -1; }

  .dj-home-products__grid { grid-template-columns: repeat(2, 1fr) !important; }

  .dj-promo-banner__inner { grid-template-columns: 1fr; text-align: center; }
  .dj-promo-banner__text { margin-left: auto; margin-right: auto; }
  .dj-promo-banner__visual { order: -1; }

  .dj-testimonials__inner { grid-template-columns: 1fr; text-align: center; }
  .dj-testimonials__author { justify-content: center; }
  .dj-testimonials__dots { justify-content: center; }

  .dj-home-blog__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .dj-home section { padding: var(--dj-space-xl, 64px) 0; }

  .dj-cat-tiles__grid { grid-template-columns: 1fr; }
  .dj-cat-tile:last-child { grid-column: auto; }

  .dj-home-products__grid { grid-template-columns: 1fr !important; }

  .dj-home-blog__grid { grid-template-columns: 1fr; }
}


/* ===========================================================
   ENCABEZADO DE SECCIÓN — estilo fila (barra roja + texto + link)
   =========================================================== */
.dj-section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: var(--dj-space-lg, 40px);
  flex-wrap: wrap;
}
.dj-section-heading-row__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-black, 900);
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  margin: 0;
  color: var(--dj-black-soft, #111);
  /* v3.16.2 — todos los títulos de sección van planos, sin sombra,
     como "Favoritos Del Momento". Antes algunos (p.ej. "Los Más
     Vendidos") se veían con una sombra que no tenían los demás. Se
     fuerza a "none" para que no haya inconsistencia entre secciones. */
  text-shadow: none;
}
/**
 * v3.16.1 — POR QUÉ "COMPRA POR DEPORTE" SE VEÍA CON DOBLE ESPACIO
 * -----------------------------------------------------------
 * alive.js parte el título en palabras y envuelve cada una en su
 * propio <span class="dj-word">. Esos spans quedan como hijos
 * DIRECTOS de .dj-section-heading-row__title, que es un flex
 * container con gap. El gap de flexbox se aplica entre TODOS sus
 * hijos en línea — incluida cada palabra — así que se sumaba al
 * espacio en blanco normal entre palabras: doble espacio.
 *
 * La solución no es quitar el gap (hace falta para separar la
 * barra roja del bloque de texto): es que el texto del título ya
 * no sea hijo directo del flex. Se envuelve en este span, que es
 * inline normal (no flex), así el gap del padre solo cuenta una
 * vez —entre la barra y el texto— y dentro del texto las palabras
 * respetan el espacio normal de toda la vida.
 */
.dj-section-heading-row__title-text {
  display: inline;
  /* v4.0 — un poco de aire entre palabras: en mayúsculas y peso 900
     las palabras se leían pegadas ("COMPRAPOR", "ARMATUGYM"). Solo
     entre palabras, no entre letras (letter-spacing quedaría igual
     de apretado dentro de cada palabra). */
  word-spacing: 0.2em;
}
.dj-section-heading-row__bar {
  width: 4px;
  height: 1.2em;
  background: var(--dj-red, #FF0000);
  flex-shrink: 0;
}
.dj-section-heading-row__link {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: var(--dj-black-soft, #111);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.dj-section-heading-row__link:hover { color: var(--dj-red, #FF0000); }
.dj-section-heading-row__link span {
  display: inline-block;
  transition: transform 0.2s ease;
}
.dj-section-heading-row__link:hover span { transform: translateX(3px); }


/* ===========================================================
   COMPRA POR DEPORTE — carrusel
   =========================================================== */
.dj-sport-carousel {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dj-sport-carousel__viewport {
  overflow: hidden;
  flex: 1;
}
.dj-sport-carousel__track {
  display: flex;
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.dj-sport-tile {
  position: relative;
  /* v6.0 — este "flex" de aquí ya no manda el ancho: lo hace
     `.dj-carousel__track > *` (ver "CARRUSEL GENÉRICO" más abajo),
     que trae !important y decide el ancho real a partir de --dj-per
     (puesto por home.js según data-per="4,3,2" en home-sport-shop.php,
     ahora 4 en escritorio en vez de 3). Se deja aquí solo como
     respaldo por si algún día el carrusel no llegara a inicializarse. */
  flex: 0 0 calc((100% - 60px) / 4);
  height: 300px;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}
@media (min-width: 1025px) {
  /* Con 4 fichas en vez de 3 cada una es más angosta: un pelín menos
     de alto y quedan mejor proporcionadas, ni muy cuadradas ni muy
     altas y flacas. */
  .dj-sport-tile { height: 258px; }
}
.dj-sport-tile__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.dj-sport-tile:hover .dj-sport-tile__bg,
.dj-sport-tile:active .dj-sport-tile__bg { transform: scale(1.08); }
.dj-sport-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.8) 100%);
}
.dj-sport-tile__label {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: var(--dj-font-display);
  font-size: 1.7rem;             /* v7.2: antes 1.4rem — se pedía más grande */
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 28px;
}
.dj-sport-carousel__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: var(--dj-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  transition: var(--dj-transition);
  color: var(--dj-black-soft, #111);
}
.dj-sport-carousel__arrow:hover {
  background: var(--dj-red, #FF0000);
  color: #fff;
  transform: scale(1.08);
}


/* ===========================================================
   BANNER DE ENVÍO GRATIS — limpio y estático
   =========================================================== */
.dj-shipping-banner {
  background: var(--dj-red, #FF0000);
  padding: 14px 0;
  text-align: center;
}
.dj-shipping-banner__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dj-shipping-banner__icon {
  color: #fff;
  flex-shrink: 0;
}
.dj-shipping-banner__text {
  margin: 0;
  color: #fff;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
}


/* ===========================================================
   COLECCIÓN HOMBRE / MUJER
   =========================================================== */
.dj-gender-split {
  /**
   * v6.0.1 — ERA "display: grid" con "grid-template-columns: 1fr 1fr".
   * Para el efecto de "la columna crece hacia su lado" (interactions.css)
   * hacía falta animar el ancho de cada columna, y transicionar
   * "grid-template-columns" se ve DE GOLPE en bastantes navegadores —
   * el valor no se interpola suave, salta directo al final. "flex-grow"
   * sí se anima suave en todos lados (es la técnica de toda la vida para
   * paneles que crecen al pasar el mouse), así que el layout pasó a
   * flexbox: con las dos columnas en flex:1 1 0% pesan exactamente
   * igual que 1fr 1fr — mismo resultado en reposo, pero ahora el
   * crecimiento se puede animar sin saltos.
   */
  display: flex;

  /**
   * v7.32 — LAS DOS FOTOS EN 4:3.
   *
   * Antes esto era "min-height: 520px": una altura fija. El ancho
   * de cada columna sí cambiaba con la pantalla, así que el recorte
   * de la foto era distinto en cada monitor —más apaisado en un
   * iMac, más cuadrado en un portátil— y las dos columnas nunca
   * coincidían con lo que se había preparado en el diseño.
   *
   * La proporción se pone en la SECCIÓN, no en cada columna, y por
   * un motivo concreto: al pasar el mouse, una columna crece a 65%
   * y la otra encoge a 35% (interactions.css). Si cada columna
   * llevara su propio 4:3, al crecer se pondría más alta y al
   * encoger más baja: la sección entera daría un brinco vertical
   * cada vez que el cliente mueve el mouse.
   *
   * Poniéndolo en el padre, la altura queda clavada y solo se
   * reparte el ancho. Dos cajas de 4:3 lado a lado dan 8:3, que es
   * de donde sale el número.
   */
  --dj-gender-ratio: 8 / 3;   /* = cada columna en 4:3 */
  --dj-gender-tope: 840px;

  aspect-ratio: var(--dj-gender-ratio);
  max-height: var(--dj-gender-tope);
  min-height: 0;
}
.dj-gender-split__col {
  position: relative;
  display: flex;
  /* v7.3 — flex-basis 50%, NO "1 1 0%".
     El efecto de crecimiento (interactions.css) ahora anima
     flex-basis (50% → 65% / 35%), que es exactamente la técnica del
     código que pidió el cliente. Con "flex: 1 1 0%" el reparto lo
     hacía flex-grow y el navegador lo resolvía de golpe en varios
     casos; con flex-basis en porcentaje la interpolación es suave y
     predecible en todos. */
  flex: 1 1 50%;
  min-width: 0;
  align-items: flex-end;
  padding: 48px;
  overflow: hidden;
  text-decoration: none;
}
.dj-gender-split__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* v6.0.2: el "transform" y el "filter" de aquí, el timing lo manda
     assets/css/interactions.css (más específico: ".dj-gender-split__col
     .dj-gender-split__bg"), para que estén sincronizados con el resto
     del efecto de "la columna crece hacia su lado". Aquí solo queda la
     opacidad del cross-fade entre fotos, que es un tema aparte. */
  transition: opacity 1s ease;
}
/**
 * v3.16.1 — hasta 6 fotos por columna, con cross-fade (home.js,
 * initGenderRotate). Todas las capas quedan superpuestas (inset:0) y
 * solo la que tiene .is-active se ve; el resto está a opacidad 0, así
 * que el orden en el DOM no importa y el cambio de una a otra es un
 * fundido suave, no un salto.
 */
.dj-gender-split__bg.is-active { opacity: 1; }
/* v6.0.2 — el zoom de la foto al pasar el mouse/dedo ya NO vive aquí en
   un ":hover" suelto (eso solo respondía al mouse de verdad, nunca al
   dedo — por eso "no hacía nada" en celular). Ahora lo maneja
   interactions.css/.js con la clase ".is-fx-hover", que responde igual
   a mouse y a dedo, y a la vez con el crecimiento de la columna. */
.dj-gender-split__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.35) 100%);
}
.dj-gender-split__content {
  position: relative;
  z-index: 2;
  max-width: 420px;
}
.dj-gender-split__eyebrow {
  display: block;
  color: #fff;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.dj-gender-split__title {
  color: var(--dj-red, #FF0000);
  font-family: var(--dj-font-display);
  font-weight: var(--dj-weight-black, 900);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  text-transform: uppercase;
  /* v6.1 — la fuente de despliegue reserva espacio arriba de la
     mayúscula (para tildes: Á, É...) y eso se veía como un hueco
     grande entre "Colección de" y "Hombre/Mujer". Un margen negativo
     lo cierra sin tocar el tamaño de letra. */
  margin: -18px 0 12px;
  line-height: 0.95;
  /* Más peso visual: un contorno oscuro sutil + una sombra caída,
     así "HOMBRE"/"MUJER" se leen fuerte incluso sobre fotos claras. */
  -webkit-text-stroke: 1px rgba(0,0,0,0.35);
  text-stroke: 1px rgba(0,0,0,0.35);
  text-shadow: 0 4px 18px rgba(0,0,0,0.55), 0 1px 0 rgba(0,0,0,0.3);
}
.dj-gender-split__text {
  color: rgba(255,255,255,0.85);
  font-family: var(--dj-font-body);
  font-size: 0.9rem;
  margin: 0 0 20px;
}


/* ===========================================================
   BANNERS PARALLAX (Ofertas de Jimmy / Liga)
   =========================================================== */
.dj-parallax-banner {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
}
.dj-parallax-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* v2.6: fuera `background-attachment: fixed`.
     Daba el efecto ventana pero NO funciona en iPhone y da tirones en
     Android. Ahora lo hace el motor de motion.js, que se ve igual (o
     mejor, porque la foto además se desplaza) y va fino en todos lados. */
}
.dj-parallax-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.dj-parallax-banner--sale .dj-parallax-banner__overlay {
  background: rgba(0,0,0,0.4);
}
.dj-parallax-banner__content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  /* v5.0.2 — REPARADO: "el botón debe centrarse con la imagen" (PC).
     Antes el texto pequeño/título/subtítulo (bloques) y el botón (un
     <a> en línea) solo COINCIDÍAN de borde por casualidad, según cómo
     cayera cada uno por su cuenta — y en cuanto el título pasaba a
     modo imagen (con su propio ancho automático) el botón podía quedar
     visualmente "suelto", sin alinearse con ella. Ahora todo el
     contenido del banner (texto pequeño + título/imagen + subtítulo +
     botón) vive en una sola columna flex, así que SIEMPRE quedan
     pegados al mismo borde entre sí — sea texto o imagen, en cualquier
     dispositivo — sin depender de cómo se comporte cada etiqueta por
     separado. */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dj-parallax-banner__content--left {
  /* v5.0.4 — REPARADO: "el botón debe estar centrado [con la imagen]"
     (escritorio). La v5.0.2 pegaba TODO al borde izquierdo del banner
     completo (align-items: flex-start sobre una columna de ancho
     100%), así que el botón y el título/logo compartían el mismo
     borde izquierdo, pero NO quedaban centrados el uno respecto al
     otro cuando tenían anchos distintos (el logo, más ancho, hacía
     que el botón, más angosto, se viera "descolgado" hacia la
     izquierda en vez de centrado bajo él).
     Ahora la columna se encoge a su propio contenido (width:
     fit-content, en vez de 100%) y se ancla al lado izquierdo del
     banner con el margen (no con align-items) — así, DENTRO de esa
     columna angosta, "align-items: center" sí centra cada elemento
     (texto pequeño, título/logo, subtítulo, botón) respecto al más
     ancho de todos ellos (normalmente el logo), sin mover el bloque
     completo del lado izquierdo del banner hacia el centro. */
  text-align: left;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
}
.dj-parallax-banner__eyebrow {
  display: block;
  color: rgba(255,255,255,0.85);
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.dj-parallax-banner__title {
  color: var(--dj-red, #FF0000);
  font-family: var(--dj-font-display);
  font-size: clamp(3rem, 10vw, 6.5rem);
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0 0 20px;
}
.dj-parallax-banner__title--outline {
  /* v3.16.4 — antes iba hueco (transparente + contorno blanco). Ahora
     va relleno en rojo de marca con el contorno blanco encima, y un
     poco más de grosor de trazo para que se lea "más fuerte". */
  color: var(--dj-red, #FF0000);
  -webkit-text-stroke: 2.5px #fff;
  text-stroke: 2.5px #fff;
}
.dj-parallax-banner__text {
  color: rgba(255,255,255,0.9);
  font-family: var(--dj-font-body);
  font-size: 1.1rem;
  margin: 0 0 28px;
  /* v5.0.4 — tope de ancho para que un subtítulo largo no estire la
     columna "fit-content" de arriba más de la cuenta (ver
     .dj-parallax-banner__content--left). Con el subtítulo normal
     ("Se Vive Todos Los Días") no se nota: cabe de sobra en una sola
     línea. */
  max-width: 420px;
}
.dj-parallax-banner--sale .dj-parallax-banner__text { max-width: 480px; }

/* v5.0 — FOTO DEL BANNER "LA PASIÓN DEL DEPORTE" SEGÚN LA PANTALLA
   Mismo mecanismo que ya usa el hero (template-parts/hero.php +
   assets/css/hero.css): template-parts/home-league-banner.php imprime
   hasta 3 variables CSS (--dj-bg-d/--dj-bg-t/--dj-bg-m) en el propio
   style="" del div. Tablet y celular son OPCIONALES: si no se suben,
   la variable no existe y el var(..., respaldo) cae en la de arriba. */
.dj-parallax-banner__bg.has-src {
  background-image: var(--dj-bg-d);
  background-size: cover;
  background-position: center;
}
@media (max-width: 1024px) {
  .dj-parallax-banner__bg.has-src {
    background-image: var(--dj-bg-t, var(--dj-bg-d));
  }
}
@media (max-width: 640px) {
  .dj-parallax-banner__bg.has-src {
    background-image: var(--dj-bg-m, var(--dj-bg-t, var(--dj-bg-d)));
  }
}

/* v5.0.2 — EN TABLET Y CELULAR, EL BANNER SE VE CUADRADO — SIN CORTAR
   NADA
   -----------------------------------------------------------------
   REPARADO: la v5.0.1 usaba `aspect-ratio: 1/1`, que fija una altura
   RÍGIDA. Como este banner tiene `overflow: hidden` (hace falta para
   que la foto de fondo no se salga al moverse con el parallax), en
   pantallas angostas el contenido (texto pequeño + título + subtítulo
   + botón) no cabía dentro de ese cuadrado exacto y el sobrante — el
   botón "Ver Equipos" — se cortaba y desaparecía.
   Ahora se usa `min-height` en vez de `aspect-ratio`: es un PISO, no un
   techo, así que si el contenido necesita más alto, el banner CRECE en
   vez de recortar. El valor se calcula con clamp() para que, con el
   contenido normal, la proporción siga viéndose prácticamente cuadrada
   (se acerca al ancho de la pantalla) en vez de un número fijo que no
   se adapta al dispositivo.
   La FOTO DE FONDO (background-size: cover + background-position:
   center, ver bloque de arriba) se ajusta sola a la altura que termine
   teniendo el banner — sea cual sea el tamaño de la foto que subas
   (cuadrada, vertical de hasta 1080 px de alto, lo que sea): la foto se
   recorta para llenar el espacio, nunca al revés. El banner nunca se
   agranda por culpa de una foto grande.
   En escritorio no cambia nada: sigue ancho, con el texto a la
   izquierda y centrado en vertical. */
@media (max-width: 1024px) {
  .dj-parallax-banner {
    min-height: clamp(480px, 92vw, 620px);
    align-items: flex-start;
  }
  /* Se centra SIEMPRE en tablet/celular, aunque la plantilla siga
     mandando la clase "--left" (la usa en escritorio). v5.0.4: aquí se
     deshace a propósito el "width: fit-content" que --left usa en
     escritorio (ver arriba) — en tablet/celular esta columna vuelve a
     ocupar el 100% y centrarse dentro de ese 100%, que es como ya
     estaba y se veía bien ("móvil está perfecto"); ese cambio de
     escritorio no debía tocar tablet/celular, y con este reseteo no
     lo toca. */
  .dj-parallax-banner__content,
  .dj-parallax-banner__content--left {
    text-align: center;
    align-items: center; /* la columna flex también se centra, botón incluido */
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(28px, 8vw, 56px);
    padding-bottom: clamp(24px, 6vw, 40px);
  }
}
@media (max-width: 640px) {
  .dj-parallax-banner {
    min-height: clamp(420px, 100vw, 560px);
  }
}


/* ===========================================================
   OFERTAS DE JIMMY + ENVÍO GRATIS — fusionadas (v3.16.1)
   -----------------------------------------------------------
   Dos mitades, una sola fila, SIEMPRE — en escritorio, tablet y
   celular. Nada de "grid-template-columns: 1fr" a partir de tal
   ancho: es un grid de 2 columnas fijo y lo que cede es el tamaño
   de letra (clamp()), no el layout.
   =========================================================== */
.dj-sale-ship__row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: stretch;
  min-height: clamp(220px, 40vw, 460px);
}
/* Si solo una mitad está activa (la otra se apagó desde el panel),
   que ocupe la fila entera en vez de dejar un hueco vacío. */
.dj-sale-ship--solo .dj-sale-ship__row {
  grid-template-columns: 1fr;
}

.dj-sale-ship__col {
  position: relative;
  overflow: hidden;
  min-width: 0; /* si no, el texto largo puede forzar el grid a desbordar */
}

/* --- Mitad izquierda: foto + oferta (estilo del banner parallax) --- */
.dj-sale-ship__col--sale {
  display: flex;
  align-items: center;
  color: #fff;
}
.dj-sale-ship__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.dj-sale-ship__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.42);
}
.dj-sale-ship__content {
  position: relative;
  z-index: 2;
  max-width: 480px;
  padding: clamp(14px, 4vw, 48px);
}
.dj-sale-ship__eyebrow {
  display: block;
  color: rgba(255,255,255,0.85);
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  text-transform: uppercase;
  font-size: clamp(0.58rem, 1.4vw, 0.85rem);
  letter-spacing: clamp(0.4px, 0.4vw, 2px);
  /* v8.9 — 6px, los mismos que ".dj-gender-split__eyebrow". El resto
     del cierre lo hace el margen negativo de ".dj-sale-ship__title". */
  margin: 0 0 6px;
}
.dj-sale-ship__title {
  color: var(--dj-red, #FF0000);
  font-family: var(--dj-font-display);
  font-size: clamp(1.7rem, 6.6vw, 4.2rem);
  text-transform: uppercase;
  line-height: 0.9;
  /* v8.9 — "OFERTAS DE" tiene que quedar APENAS encima de "JIMMY".
     El hueco no venía de los márgenes: la fuente de despliegue
     (Anton) reserva espacio arriba de la mayúscula para las tildes
     (Á, É...), y ese espacio vacío empujaba el título hacia abajo.
     Un margen superior negativo lo cierra sin tocar el tamaño de
     letra. Es el mismo truco que ya usa "COLECCIÓN DE / HOMBRE".

     Va en "em" y no en píxeles a propósito: el título va de 1.7rem
     a 4.2rem según la pantalla, y el hueco a cerrar crece con la
     letra. En em se escala solo; con un valor fijo quedaría bien en
     un tamaño y mal en los demás.

     ⚠️ -0.3em era DEMASIADO: subía tanto el título que "OFERTAS DE"
     terminaba encimado sobre "JIMMY". Con -0.16em y los 6px de
     abajo del texto pequeño, la separación queda igualita a la de
     "COLECCIÓN DE / HOMBRE" — cerca, pero sin tocarse. */
  margin: -0.16em 0 clamp(5px, 1.6vw, 18px);
  /* v3.16.2 — "JIMMY" con más peso. Anton solo viene en un grosor
     (no tiene variante 900 de verdad), así que además del
     font-weight se le añade un trazo fino del mismo color para
     que se vea más grueso, igual que ya se hace en Hombre/Mujer. */
  font-weight: var(--dj-weight-black, 900);
  -webkit-text-stroke: 1px var(--dj-red, #FF0000);
  text-stroke: 1px var(--dj-red, #FF0000);
}
.dj-sale-ship__text {
  color: rgba(255,255,255,0.9);
  font-family: var(--dj-font-body);
  font-size: clamp(0.62rem, 1.7vw, 1.05rem);
  line-height: 1.35;
  margin: 0 0 clamp(8px, 1.8vw, 22px);
  max-width: 92%;
}
.dj-sale-ship__btn {
  font-size: clamp(0.56rem, 1.3vw, 0.85rem);
  padding: clamp(7px, 1.6vw, 14px) clamp(12px, 2.6vw, 26px);
}

/* --- Mitad derecha: envío gratis (estilo bloque, sobre fondo claro) --- */
.dj-sale-ship__col--ship {
  background: var(--dj-gray-light, #F4F4F5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(16px, 3.4vw, 44px) clamp(10px, 3vw, 28px);
}
.dj-sale-ship__truck {
  color: var(--dj-black-soft, #111);
  margin-bottom: clamp(6px, 1.6vw, 14px);
  line-height: 0;
  /* v8.9 — LA PISTA POR DONDE ANDA EL CAMIÓN.
     Antes esta caja medía lo mismo que el camión, así que no había
     "por dónde irse": el camión solo podía desvanecerse en el sitio.
     Ahora ocupa todo el ancho de la columna y recorta lo que se
     salga (overflow: hidden), así el camión se va manejando hasta el
     borde y ahí se pierde de verdad, como quien dobla la esquina —
     sin fundidos ni desapariciones raras. */
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.dj-sale-ship__truck svg {
  width: clamp(34px, 8vw, 96px);
  height: auto;
  display: inline-block;
  /* v8.9 — EL VIAJE DE ENTREGA, EN BUCLE.
     Estacionado en el centro 4 segundos → arranca en reversa (un
     empujoncito hacia atrás para tomar impulso) → se va manejando
     hacia la DERECHA hasta salirse por completo del borde → vuelve
     a entrar por la izquierda → llega al centro pasándose un
     poquito de largo y frena hacia atrás hasta quedar clavado. Y
     otra vez.

     El ciclo dura 7s: 4s parqueado y 3s de recorrido. Va en
     "linear" porque el ritmo lo marcan los propios fotogramas (el
     frenazo del final tiene que sentirse seco); si le pusiera una
     curva encima, el motor suavizaría también ese rebote y se
     perdería el efecto. */
  animation: dj-camion-ruta 7s linear infinite;
}
@keyframes dj-camion-ruta {
  /* --- Estacionado en el centro (0 → 4s) --- */
  0%, 57%    { transform: translateX(0); }

  /* --- Arranca en reversa: retrocede para tomar impulso.
         Como maneja hacia la DERECHA, retroceder es ir a la
         izquierda (valor negativo). --- */
  62%        { transform: translateX(-11%); }

  /* --- Se va manejando hasta salirse del todo por la derecha.
         El 60vw asegura que sale de la pista en cualquier pantalla;
         el recorte de la caja lo hace desaparecer en el borde. --- */
  75%        { transform: translateX(60vw); }

  /* --- Reaparece por el otro lado (la izquierda). El salto ocurre
         fuera de la pista (los dos valores están más allá del borde
         recortado), así que en pantalla no se ve ningún brinco. --- */
  75.01%     { transform: translateX(-60vw); }

  /* --- Vuelve entrando y se acerca al centro --- */
  92%        { transform: translateX(7%); }    /* se pasa un poquito */
  96.5%      { transform: translateX(-3%); }   /* frena y rebota */
  100%       { transform: translateX(0); }     /* queda clavado */
}
.dj-sale-ship__ship-title {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-black, 900);
  text-transform: uppercase;
  font-size: clamp(1rem, 3.6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.3px;
  margin: 0 0 clamp(3px, 1vw, 10px);
  color: var(--dj-black-soft, #111);
}
.dj-sale-ship__ship-sub {
  font-family: var(--dj-font-body);
  font-size: clamp(0.58rem, 1.5vw, 0.95rem);
  line-height: 1.4;
  color: #55555f;
  margin: 0 0 clamp(8px, 1.8vw, 22px);
  max-width: 94%;
}
.dj-sale-ship__ship-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--dj-black-soft, #111);
  color: #fff;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  font-size: clamp(0.52rem, 1.2vw, 0.82rem);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--dj-radius-sm, 4px);
  padding: clamp(7px, 1.6vw, 14px) clamp(12px, 2.8vw, 30px);
  transition: background-color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.dj-sale-ship__ship-btn:hover {
  background: var(--dj-red, #FF0000);
  transform: translateY(-2px);
}
.dj-sale-ship__ship-btn span { transition: transform 0.2s ease; }
.dj-sale-ship__ship-btn:hover span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .dj-sale-ship__truck svg { animation: none; }
}

@media (max-width: 640px) {
  .dj-sale-ship__row { min-height: clamp(200px, 62vw, 320px); }
  .dj-sale-ship__eyebrow { letter-spacing: 0.4px; }
}

@media (max-width: 380px) {
  .dj-sale-ship__row { grid-template-columns: 1.15fr 1fr; }
}

/* v4.0 — en tablet y celular, "Envío Gratis" pasa a ir DEBAJO de
   "Ofertas de Jimmy" en vez de al lado. El HTML ya trae "Ofertas"
   primero y "Envío" después, así que apilar el grid a una sola
   columna basta: el orden visual sale correcto sin tocar la
   plantilla. Se anula la regla "SIEMPRE en una sola fila" de
   arriba solo en este rango de ancho. */
@media (max-width: 1024px) {
  .dj-sale-ship__row {
    grid-template-columns: 1fr !important;
    min-height: 0;
  }
  .dj-sale-ship__col--sale { min-height: clamp(220px, 60vw, 360px); }

  /* v6.1 — a pedido: en tablet/celular "Envío Gratis" pasa a ir
     PRIMERO (arriba), justo debajo de Hombre/Mujer, y "Ofertas de
     Jimmy" queda después. Solo se reordena visualmente con "order"
     (el HTML no cambia), y solo en este rango de ancho — en
     escritorio siguen una al lado de la otra como siempre. */
  .dj-sale-ship__col--ship { order: -1; }
  .dj-sale-ship__col--sale { order: 1; }
}


/* Partículas flotantes (sensación de profundidad/vida) */
/* ===========================================================
   PARTÍCULAS FLOTANTES  (template-parts/particles.php)
   -----------------------------------------------------------
   Los puntitos de luz que suben por delante de la foto. Van en
   TODAS las secciones con imagen, no solo en un banner.

   El recorrido es en `vh` y no en píxeles fijos: así funciona
   igual en una franja baja de 300 px que en un hero de 700.
   =========================================================== */
.dj-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.dj-particle {
  position: absolute;
  bottom: -12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
  animation-name: dj-particle-float;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

/* Variante de marca, para fondos claros o cuando toca reforzar el rojo */
.dj-particles--red .dj-particle {
  background: rgba(255, 60, 60, 0.65);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
}

/**
 * ⚠️ El recorrido va en `vh`, NO en porcentaje.
 * Un `translateY(-100%)` en un punto de 5 px son 5 px: no se movería
 * nada. El porcentaje se mide sobre el propio elemento, no sobre el
 * contenedor. Con `vh` el recorrido es el alto de la pantalla, que es
 * lo que se quiere, y lo que sobre lo recorta el hueco.
 */
@keyframes dj-particle-float {
  0%   { transform: translate3d(0, 0, 0) scale(1);            opacity: 0; }
  12%  { opacity: 0.85; }
  55%  { transform: translate3d(10px, -32vh, 0) scale(0.8);   opacity: 0.7; }
  100% { transform: translate3d(-8px, -68vh, 0) scale(0.3);   opacity: 0; }
}

/* Si el visitante pidió "reducir movimiento", se quedan quietas
   y transparentes: no molestan y no gastan batería. */
@media (prefers-reduced-motion: reduce) {
  .dj-particles { display: none; }
}

/* v8.11 — En celular se ven CASI TODAS. Antes se escondían de la
   sexta en adelante; ahora solo se recorta a partir de la décima y
   con menos opacidad. El celular es el mayor tráfico de la tienda,
   así que los efectos tienen que llegar ahí, no solo a escritorio. */
@media (max-width: 640px) {
  .dj-particle:nth-child(n + 10) { display: none; }
  .dj-particle { opacity: 0.6; }
}




/* ===========================================================
   ARMA TU GYM EN CASA
   =========================================================== */
.dj-gym-tiles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.dj-gym-tile {
  position: relative;
  height: 240px;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}
.dj-gym-tile__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.dj-gym-tile:hover .dj-gym-tile__bg,
.dj-gym-tile:active .dj-gym-tile__bg { transform: scale(1.1); }
.dj-gym-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.82) 100%);
}
.dj-gym-tile__label {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  text-transform: uppercase;
  font-size: 1rem;
  padding: 20px;
  transition: transform 0.3s ease;
}
.dj-gym-tile:hover .dj-gym-tile__label,
.dj-gym-tile:active .dj-gym-tile__label { transform: translateY(-6px); }


/* ===========================================================
   REELS — "Recién Llegado del Camión"
   =========================================================== */
.dj-reels__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dj-reel {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  background: var(--dj-black-soft, #111);
  transition: transform 0.3s ease;
}
.dj-reel:hover { transform: translateY(-4px); }
.dj-reel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dj-reel__sound {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(2px);
}
/* v3.16.1: se quitó .dj-reel__caption — la etiqueta debajo del video
   ya no se imprime nunca (ver template-parts/home-reels.php). */


/* ===========================================================
   RESPONSIVE — secciones nuevas
   =========================================================== */
/* ⚠️ v3.3 — AQUÍ YA NO SE APILA NADA EN UNA COLUMNA.
 *
 * Antes, en celular, cada tarjeta ocupaba una fila entera: la home medía
 * metros y el cliente se cansaba de bajar antes de llegar a los videos.
 * El reparto por pantalla (2 por fila en celular, 3 en tablet) vive ahora
 * en el bloque "v3.3 — DENSIDAD EN MÓVIL Y TABLET", al final del archivo.
 * Si vuelves a poner aquí un grid-template-columns: 1fr, deshaces eso. */
@media (max-width: 1024px) {
  .dj-reels__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .dj-sport-carousel__arrow { width: 36px; height: 36px; }
  .dj-reels__grid { grid-template-columns: repeat(2, 1fr); }
  /* v5.0.1 — el alto del banner de la liga ya no se fija aquí: pasó a
     ser cuadrado (aspect-ratio 1:1) junto con tablet, ver el bloque
     "EN TABLET Y CELULAR, EL BANNER PASA A SER CUADRADO" más arriba. */
}


/* ===========================================================
   v2.0 — CAPAS DE PROFUNDIDAD, FOTOS DE FONDO Y REELS
   =========================================================== */

/* --- Fondos con foto: que siempre encuadren bien --- */
.dj-gender-split__bg,
.dj-gym-tile__bg,
.dj-sport-tile__bg,
.dj-shipping-banner__bg,
.dj-reels__bg {
  background-size: cover;
  background-position: center;
}

/* Con el parallax JS activo, 'fixed' estorba (y en iOS ni funciona) */
.dj-has-parallax .dj-parallax-banner__bg {
  background-attachment: scroll;
}

/* El hover de zoom pelea con el parallax: lo movemos al contenedor */
.dj-has-parallax .dj-gender-split__col:hover .dj-gender-split__bg {
  transform: none;
}
/* v6.0.2 — el "brillo" al pasar por encima ya no vive en un ":hover"
   suelto aquí (solo respondía a mouse de verdad, nunca al dedo).
   Ahora es parte del mismo efecto sincronizado de interactions.css
   (".is-fx-hover"), que responde igual a mouse y a dedo. */


/* --- Banner de envío gratis con foto --- */
.dj-shipping-banner--photo {
  position: relative;
  padding: 46px 0;
  background: var(--dj-black-soft, #111);
  overflow: hidden;
}
.dj-shipping-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dj-shipping-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(200,0,0,0.85) 0%, rgba(0,0,0,0.65) 100%);
}
.dj-shipping-banner--photo .dj-shipping-banner__inner {
  position: relative;
  z-index: 2;
  padding: 16px 26px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.dj-shipping-banner--photo .dj-shipping-banner__text {
  font-size: 1rem;
}
a.dj-shipping-banner__inner {
  text-decoration: none;
  transition: transform 0.25s ease;
}
a.dj-shipping-banner__inner:hover { transform: translateY(-2px); }


/* --- Pista de foto faltante en las tarjetas de deporte (solo admin) --- */
.dj-sport-tile__hint {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: rgba(255, 244, 194, 0.94);
  color: #4a3b00;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  max-width: 80%;
}

/* --- Aviso de diagnóstico para el administrador --- */
.dj-admin-note {
  background: #fff4c2;
  color: #4a3b00;
  border-left: 4px solid #d98600;
  padding: 12px 16px;
  border-radius: 4px;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.85rem;
  margin: 0 0 20px;
}


/* ===========================================================
   REELS — versión 9:16 con sonido y doble clic
   =========================================================== */
.dj-reels {
  position: relative;
  padding: var(--dj-space-xl, 64px) 0;
}
.dj-reels--photo { background: var(--dj-black-soft, #111); overflow: hidden; }
.dj-reels__bg { position: absolute; inset: 0; z-index: 0; }
.dj-reels__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0.88));
}
.dj-reels--photo .dj-container { position: relative; z-index: 2; }
.dj-reels--photo .dj-section-heading-row__title,
.dj-reels--photo .dj-section-heading-row__link,
.dj-reels--photo .dj-reels__hint { color: #fff; }

.dj-reel {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  background: #000;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  -webkit-tap-highlight-color: transparent;
}

/* Respaldo para navegadores viejos sin aspect-ratio */
@supports not (aspect-ratio: 9 / 16) {
  .dj-reel { height: 0; padding-bottom: 177.78%; }
  .dj-reel__video { position: absolute; inset: 0; }
}

.dj-reel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dj-reel__sound {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(2px);
}
.dj-reel__icon-sound { display: none; }
.dj-reel.is-unmuted .dj-reel__icon-muted { display: none; }
.dj-reel.is-unmuted .dj-reel__icon-sound { display: block; }
.dj-reel.is-unmuted .dj-reel__sound { background: var(--dj-red, #FF0000); }

/* Corazón del doble clic (igual que en Instagram) */
.dj-reel__heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.dj-reel.is-liked .dj-reel__heart {
  animation: dj-heart-pop 0.7s ease;
}
@keyframes dj-heart-pop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
  35%  { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  70%  { opacity: 1; transform: translate(-50%,-50%) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1); }
}


.dj-reels__hint {
  margin-top: 18px;
  text-align: center;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.78rem;
  color: var(--dj-gray, #AEAEAF);
}

/* Contenido de la home hecho con Elementor / bloques */
.dj-home-editor-content {
  padding: var(--dj-space-lg, 48px) 0;
}


/* ===========================================================
   SECCIONES A TODO LO ANCHO (full-bleed)

   ⚠️ REPARADO: la regla ".dj-home section { padding: 96px 0 }" se
   aplicaba también al hero, al banner de envío, a Hombre/Mujer y a los
   banners con foto. Resultado: franjas negras arriba y abajo del hero y
   huecos blancos alrededor de las bandas de foto. Estas secciones se
   gestionan su propio espaciado.
   =========================================================== */
.dj-home > .dj-hero,
.dj-home > .dj-gender-split,
.dj-home > .dj-parallax-banner,
.dj-home > .dj-shipping-banner,
.dj-home > .dj-reels--photo {
  padding: 0;
}

/* El banner de envío sí necesita aire cuando lleva foto de fondo */
.dj-home > .dj-shipping-banner {
  padding: 14px 0;
}
.dj-home > .dj-shipping-banner--photo {
  padding: 46px 0;
}
.dj-home > .dj-reels--photo {
  padding: var(--dj-space-2xl, 96px) 0;
}

/* v3.16.2 — entre "Ofertas De Jimmy" y "Recién Llegados" quedaba un
   hueco enorme: esta sección tenía el padding genérico de sección
   (52px) ARRIBA y ABAJO, y encima "Recién Llegados" sumaba su propio
   padding-top (otros 52px) → casi 104px de blanco entre las dos.
   Se recorta solo el padding-bottom, dejando el de arriba intacto. */
.dj-home > .dj-sale-ship {
  padding-bottom: 20px;
}
@media (max-width: 1024px) {
  .dj-home > .dj-sale-ship { padding-bottom: 16px; }
}
@media (max-width: 640px) {
  .dj-home > .dj-sale-ship { padding-bottom: 10px; }
}

/* v5.0 — REPARADO: seguía quedando una franja blanca entre "Hombre/Mujer"
   y "Ofertas de Jimmy". La regla de arriba solo recortaba el padding de
   ABAJO; el de ARRIBA lo seguía poniendo la regla genérica ".dj-home
   section" (52px en escritorio / 36px en tablet / 24px en celular, ver
   más abajo en este mismo archivo). ".dj-home > .dj-sale-ship" es más
   específica que ".dj-home section", así que con padding-top:0 aquí basta
   para anular ese aire arriba en CUALQUIER pantalla, sin tocar el resto
   de secciones ni el padding-bottom que ya estaba bien calibrado. Las dos
   secciones quedan pegadas: sin margin, sin padding, sin gap, sin franja. */
.dj-home > .dj-sale-ship {
  padding-top: 0;
}

/* El hero ocupa toda la pantalla de ancho, sin franjas */
.dj-hero,
.dj-hero-fallback {
  width: 100%;
}


/* ===========================================================
   v2.1 — CARRUSEL GENÉRICO
   Un solo componente para categorías, productos y videos.
   El número de elementos visibles lo pone el JS en --dj-per.
   =========================================================== */
.dj-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  --dj-carousel-gap: 20px;
  /* v3.16.4 — sin esto, en varios navegadores móviles el navegador
     intenta interpretar el arrastre horizontal como su propio gesto
     de scroll/rebote MIENTRAS el JS también lo mueve con la mano: esa
     pelea entre los dos es lo que se sentía como "elástico" al
     arrastrar. Con pan-y le decimos al navegador "el vertical lo
     manejas tú, el horizontal lo maneja el JS", y deja de pelear. */
  touch-action: pan-y;
}

.dj-carousel__viewport {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;              /* sin esto, flex no deja encoger y se desborda */
}

/* v8.7 — el cursor avisa que la fila se puede arrastrar con el mouse.
   Solo donde hay mouse de verdad: en pantallas táctiles el cursor no
   existe, y ahí manda el gesto del dedo de siempre. */
@media (hover: hover) and (pointer: fine) {
  .dj-carousel__viewport { cursor: grab; }
  .dj-carousel.is-dragging .dj-carousel__viewport { cursor: grabbing; }
  /* Mientras se arrastra, no se selecciona el texto de las tarjetas
     (si no, arrastrar deja media página en azul). */
  .dj-carousel.is-dragging,
  .dj-carousel.is-dragging * { user-select: none; }
}

/* ⚠️ LOS TRES SELECTORES SON NECESARIOS. NO SIMPLIFICAR.
 *
 * `.dj-carousel__track` a secas tiene especificidad 0,1,0. En shop.css hay
 * un `.woocommerce ul.products { display:grid !important }` con 0,2,1 — y
 * entre dos !important gana el más específico. Resultado: en cualquier
 * página donde el <body> lleve la clase `.woocommerce` (la tienda, las
 * categorías, y la home si algún plugin la añade) el carrusel dejaba de
 * ser carrusel y se desplomaba en una rejilla de 3 columnas, con las
 * flechas ahí sin hacer nada.
 *
 * Se descubrió montando la prueba del navegador con `<body class=
 * "woocommerce">`: la pista fue que las tarjetas medían 79 px en vez de
 * 280. En la home actual no pasaba porque ese body NO lleva la clase —
 * o sea, funcionaba por casualidad.
 */
.dj-carousel__track,
.woocommerce ul.products.dj-carousel__track,
.woocommerce-page ul.products.dj-carousel__track {
  display: flex !important;
  gap: var(--dj-carousel-gap) !important;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  grid-template-columns: none !important;   /* anula el grid anterior */
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  touch-action: pan-y;
}

/* Cada elemento ocupa exactamente 1/--dj-per del ancho visible.
   box-sizing obligatorio: si la tarjeta tiene borde y calcula en
   content-box, se suman 2px por tarjeta y la última queda cortada. */
.dj-carousel__track > * {
  box-sizing: border-box !important;
  /* el -0.5px evita que el redondeo a subpíxel corte la última tarjeta */
  flex: 0 0 calc(
    (100% - var(--dj-carousel-gap) * (var(--dj-per, 4) - 1)) / var(--dj-per, 4) - 0.5px
  ) !important;
  max-width: calc(
    (100% - var(--dj-carousel-gap) * (var(--dj-per, 4) - 1)) / var(--dj-per, 4) - 0.5px
  ) !important;
  min-width: 0;
}

.dj-carousel__arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: var(--dj-shadow-sm, 0 2px 10px rgba(0,0,0,0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--dj-black-soft, #111);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dj-carousel__arrow:hover {
  background: var(--dj-red, #FF0000);
  color: #fff;
  transform: scale(1.08);
}


/* ===========================================================
   FILA DE PRODUCTOS — todas las tarjetas del mismo tamaño
   =========================================================== */
.dj-product-carousel {
  --dj-carousel-gap: 20px;
}

.dj-product-carousel .dj-carousel__track > li.product {
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  /* margen para que la sombra del hover no se recorte en el viewport */
  margin-bottom: 6px !important;
}

/* Foto: siempre cuadrada, todas iguales */
.dj-product-carousel li.product a:first-of-type {
  display: block;
  width: 100%;
}
.dj-product-carousel li.product img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

/* Título a una sola línea y precio siempre pegado abajo:
   así todas las tarjetas terminan a la misma altura */
.dj-product-carousel li.product .woocommerce-loop-product__title {
  flex: 0 0 auto;
}
.dj-product-carousel li.product .price {
  margin-top: auto !important;
}

/* El botón de añadir al carrito, discreto y alineado */
.dj-product-carousel li.product .button {
  margin: 0 16px 16px !important;
  width: calc(100% - 32px);
  text-align: center;
}


/* ===========================================================
   v7.2 — "FRESH DEL CAMIÓN": 3 PRODUCTOS + 1 VIDEO FIJO
   -----------------------------------------------------------
   ".dj-fresh-row" es una fila flex con dos hijos:
     1) ".dj-carousel"  → el carrusel de productos (con sus flechas,
        que quedan SOLO dentro de este bloque, nunca sobre el video).
     2) ".dj-fresh-video" → el video, fuera del carrusel, así que
        NUNCA se desliza — está siempre a la vista.

   El ancho del video se calcula con la misma cuenta que usa
   "--dj-per" para las tarjetas (ver "CARRUSEL GENÉRICO" más arriba):
   con 3 productos + 1 video hay 4 columnas y 3 huecos de por medio
   (2 internos del carrusel + 1 entre el carrusel y el video), así que
   si los tres huecos miden lo mismo (20 px = --dj-carousel-gap), el
   video termina exactamente del mismo ancho que una tarjeta.
   =========================================================== */
.dj-fresh-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
}
.dj-fresh-row .dj-carousel {
  flex: 1 1 auto;
  min-width: 0;
}
.dj-fresh-video {
  position: relative;
  flex: 0 0 calc((100% - 20px * 3) / 4);
  max-width: calc((100% - 20px * 3) / 4);
  aspect-ratio: 9 / 16;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  background: #0d0d10;
  cursor: pointer;
}
.dj-fresh-video .dj-reel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tablet: 2 productos + video = 3 columnas, 2 huecos.
   El "gap" de fila se deja en 20px porque --dj-carousel-gap de
   .dj-product-carousel sigue en 20px en este rango (solo cambia en
   celular, ver más abajo) — así los 2 huecos internos del carrusel y
   el hueco entre el carrusel y el video miden exactamente lo mismo. */
@media (min-width: 641px) and (max-width: 1024px) {
  .dj-fresh-video { flex-basis: calc((100% - 20px * 2) / 3); max-width: calc((100% - 20px * 2) / 3); }
}

/* Celular: 1 producto + video = 2 columnas, 1 hueco. Aquí
   .dj-product-carousel SÍ baja --dj-carousel-gap a 10px, así que la
   fila usa el mismo valor. */
@media (max-width: 640px) {
  .dj-fresh-row { gap: 10px; }
  .dj-fresh-video { flex-basis: calc((100% - 10px) / 2); max-width: calc((100% - 10px) / 2); }
}


/* ===========================================================
   VIDEOS — carrusel (4 en escritorio, 1 en celular)
   =========================================================== */
.dj-reels-carousel {
  --dj-carousel-gap: 20px;
}
.dj-reels-carousel .dj-carousel__arrow {
  background: rgba(255,255,255,0.92);
}
.dj-reels__track {
  display: flex;
  /* flex-start (no stretch): con align-items:stretch la altura de la fila
     mandaba sobre el aspect-ratio 9/16 y los videos se hacían más anchos
     de la cuenta, cortando el último. Así el alto lo decide el ancho. */
  align-items: flex-start;
}
.dj-reels-carousel .dj-carousel__track {
  align-items: flex-start;
}

/* Espacio de respiro entre los videos y el footer */
.dj-home > .dj-reels {
  padding-bottom: var(--dj-space-2xl, 96px);
}

/* v7.2 — Botones "Síguenos", reemplazan al texto "Toca para
   escuchar..." que iba antes debajo del carrusel. */
.dj-reels__socials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.dj-reels__socials-label {
  font-family: var(--dj-font-display);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--dj-black-soft, #111);
  margin-right: 4px;
}
.dj-reels__social-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--dj-radius-pill, 999px);
  border: 1px solid #e2e2e6;
  background: #fff;
  color: var(--dj-black-soft, #111);
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-semibold, 600);
  font-size: 0.8rem;
  text-decoration: none;
  transition: var(--dj-transition);
}
.dj-reels__social-btn:hover {
  background: var(--dj-red, #FF0000);
  border-color: var(--dj-red, #FF0000);
  color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .dj-reels__socials { gap: 8px; margin-top: 18px; }
  .dj-reels__social-btn { padding: 8px 13px; font-size: 0.74rem; }
  .dj-reels__social-btn span { display: none; }   /* solo el ícono, ahorra ancho */
  .dj-reels__socials-label { width: 100%; text-align: center; margin: 0 0 6px; }
}


/* ===========================================================
   RESPONSIVE DE LOS CARRUSELES
   =========================================================== */
@media (max-width: 1024px) {
  .dj-carousel { gap: 10px; }
  .dj-carousel__arrow { width: 38px; height: 38px; font-size: 1.2rem; }
}

@media (max-width: 640px) {
  .dj-carousel {
    --dj-carousel-gap: 12px;
    gap: 6px;
  }
  .dj-carousel__arrow {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
  }
  /* En celular el video ocupa el ancho útil y se desliza con el dedo */
  .dj-reels-carousel { --dj-carousel-gap: 14px; }
  .dj-home > .dj-reels { padding-bottom: var(--dj-space-xl, 64px); }
}


/* ===========================================================
   CARRUSELES EN CELULAR
   Las flechas pasan a ir ENCIMA del contenido: así el video o la
   tarjeta aprovechan todo el ancho de la pantalla.
   =========================================================== */
@media (max-width: 640px) {
  .dj-carousel {
    display: block;
    position: relative;
    gap: 0;
  }
  .dj-carousel__viewport {
    width: 100%;
  }
  .dj-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .dj-carousel__arrow--prev { left: 6px; }
  .dj-carousel__arrow--next { right: 6px; }
  .dj-carousel__arrow:hover { transform: translateY(-50%) scale(1.06); }

  /* En el video, las flechas se apoyan sobre el propio reel */
  .dj-reels-carousel .dj-carousel__arrow {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
  }

  /* Miniaturas de galería fuera en celular: las tarjetas quedan
     todas de la misma altura y la foto principal se ve más grande */
  .dj-product-carousel .dj-product-thumbs {
    display: none !important;
  }
}


/* ===========================================================
   v3.3 — DENSIDAD EN MÓVIL Y TABLET
   -----------------------------------------------------------
   El 80% del tráfico entra por celular. En celular una fila = una
   tarjeta hacía que la home midiera metros: el cliente se cansaba de
   bajar antes de llegar a los videos.

   Regla nueva, y única, para toda la home:
       CELULAR (≤640)      → 2 por fila
       TABLET  (641–1024)  → 3 por fila (Hombre/Mujer siempre 2)
       ESCRITORIO          → como estaba

   No basta con partir la fila en dos: si la tarjeta se queda con las
   letras y los botones de tamaño de escritorio, la mitad no cabe y
   se ve apretada. Por eso cada bloque de abajo baja TAMBIÉN el alto,
   la tipografía y el aire en la misma proporción. Se ve todo, y la
   página mide la mitad.

   Las tarjetas de producto (Recién Llegados / Los Más Vendidos) se
   ajustan en shop.css, que es el que carga después y manda sobre
   li.product.
   =========================================================== */

/* -----------------------------------------------------------
   TABLET — 641 a 1024
   ----------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {

  .dj-home section { padding: 48px 0; }
  .dj-section-heading-row { margin-bottom: 24px; }

  /* 1. Compra por Deporte — 3 por fila (lo pone data-per="3,3,2") */
  .dj-sport-tile { height: 230px; }
  .dj-sport-tile__label { font-size: 1.45rem; padding: 20px; }

  /* 2. Hombre / Mujer — uno al lado del otro, nunca apilados
     (ya es flex, no grid: las dos columnas quedan iguales solas) */
  /* v7.32 — sigue en 4:3 por columna. El suelo de 340px es por si
     acaso: a 700px de ancho el 8:3 da 262px y el botón se saldría. */
  .dj-gender-split { min-height: 340px; }
  .dj-gender-split__col { min-height: 0; padding: 32px 26px; }
  .dj-gender-split__content { max-width: 100%; }
  .dj-gender-split__title { font-size: clamp(2rem, 5.2vw, 2.9rem); }
  .dj-gender-split__text { display: none; }
  .dj-gender-split .dj-btn { padding: 10px 18px; font-size: 0.75rem; }

  /* 4. Arma Tu Gym En Casa — 3 por fila */
  .dj-gym-tiles__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .dj-gym-tile { height: 190px; }
  .dj-gym-tile__label { font-size: 0.88rem; padding: 16px; }
}


/* -----------------------------------------------------------
   CELULAR — hasta 640
   ----------------------------------------------------------- */
@media (max-width: 640px) {

  /* Aire entre secciones: suficiente para separar, no para cansar */
  .dj-home section { padding: 34px 0; }

  /* El encabezado se queda en UNA línea (antes se partía en dos y
     cada sección regalaba 40 px de alto sin decir nada) */
  .dj-section-heading-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 14px;
  }
  .dj-section-heading-row__title {
    font-size: 1.02rem;
    gap: 9px;
    letter-spacing: -0.2px;
    min-width: 0;
  }
  .dj-section-heading-row__bar { width: 3px; }
  .dj-section-heading-row__link { font-size: 0.66rem; letter-spacing: 0.3px; }

  /* -------- 1. Compra por Deporte: 2 por fila -------- */
  .dj-sport-carousel { --dj-carousel-gap: 10px; }
  .dj-sport-tile {
    height: 148px;
    border-radius: 6px;
  }
  .dj-sport-tile__label {
    font-size: 1.15rem;
    padding: 16px;
    letter-spacing: 0;
    line-height: 1.2;
  }

  /* -------- 2. Hombre / Mujer: los dos en la misma fila --------
     (ya es flex, no grid: las dos columnas quedan iguales solas) */
  /*
    v7.32 — EN CELULAR NO PUEDE SER 4:3, Y ES A PROPÓSITO.

    Las dos columnas nunca se apilan: en un celular de 390px cada
    una mide 195px de ancho. Un 4:3 sobre 195px da 146px de alto:
    una franja donde no cabe ni el título, y la foto se vería
    recortada a una tira. Se pasa a 3:4 (vertical), que es la misma
    idea —proporción fija e igual en las dos, nada de alturas
    inventadas— pero de pie, que es como se mira un celular.

    Si lo prefieres igual que en computadora, cambia el 3/2 por
    8/3 y ya está.
  */
  .dj-gender-split {
    --dj-gender-ratio: 3 / 2;   /* = cada columna en 3:4 vertical */
    min-height: 0;
  }
  .dj-gender-split__col {
    min-height: 0;
    padding: 16px 13px;
  }
  .dj-gender-split__content { max-width: 100%; }
  .dj-gender-split__eyebrow {
    font-size: 0.55rem;
    letter-spacing: 1px;
    margin-bottom: 2px;
  }
  .dj-gender-split__title {
    font-size: 1.55rem;
    line-height: 0.95;
    margin: -9px 0 6px;
  }
  /* v4.0 — en tablet se quita el texto descriptivo bajo el título:
     "Entrena como un atleta..." / "Muévete con fuerza...". El
     título y el botón ya dicen lo necesario, y liberar ese espacio
     evita que la columna se vea apretada. */
  .dj-gender-split__text {
    display: none;
  }
  /* El botón sobra: la columna entera ya es un enlace y a media
     pantalla el botón solo robaba alto. Se toca la foto y va igual. */
  .dj-gender-split .dj-btn { display: none !important; }
  /* v8.11 — Las partículas VUELVEN en celular. Antes se ocultaban
     aquí para "no ensuciar" el espacio chico, pero el celular es de
     donde viene la mayoría del tráfico: es justo donde los efectos
     tienen que verse. Se dejan más suaves (menos opacidad) en vez
     de quitarlas. */
  .dj-gender-split .dj-particles { display: block; }
  .dj-gender-split .dj-particle { opacity: 0.45; }

  /* -------- 4. Arma Tu Gym En Casa: 2 por fila -------- */
  .dj-gym-tiles__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .dj-gym-tile {
    height: 130px;
    border-radius: 6px;
  }
  .dj-gym-tile__label {
    font-size: 0.7rem;
    padding: 12px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  /* -------- Filas de producto: hueco justo entre las 2 tarjetas -------- */
  .dj-product-carousel { --dj-carousel-gap: 10px; }
}


/* Celulares estrechos (iPhone SE y parecidos): un punto menos de todo,
   porque a 320 px la mitad de la pantalla son 145 px de tarjeta. */
@media (max-width: 380px) {
  .dj-sport-tile { height: 130px; }
  .dj-gym-tile { height: 116px; }
  .dj-gender-split__col { min-height: 0; padding: 14px 11px; }
  .dj-gender-split__title { font-size: 1.35rem; }
  .dj-gender-split__text { font-size: 0.66rem; }
  .dj-section-heading-row__title { font-size: 0.94rem; }
}


/* -----------------------------------------------------------
   v3.3 — LAS FLECHAS, SOBRE LA FOTO (no sobre el nombre)
   -----------------------------------------------------------
   Con 2 tarjetas por fila la tarjeta mide ~350 px de alto, y la flecha
   —centrada al 50%— caía justo encima del nombre del producto y del
   precio: tapaba lo único que el cliente necesita leer. Ahora se apoya
   sobre la foto, que es donde no estorba.
   25vw es, en la práctica, el centro de la foto: la tarjeta ocupa
   media pantalla y la foto es cuadrada.
   ----------------------------------------------------------- */
@media (max-width: 640px) {
  .dj-product-carousel .dj-carousel__arrow {
    top: calc(25vw - 8px);
  }
}


/* ===========================================================
   v3.4 — SIN FLECHAS EN CELULAR NI TABLET
   -----------------------------------------------------------
   En pantalla táctil la flecha sobra: se arrastra con el dedo y ya.
   Además, con 2 o 3 tarjetas por fila la flecha tenía que apoyarse
   ENCIMA de una tarjeta, y ahí siempre tapa algo.

   El deslizamiento con el dedo NO se toca: sigue en home.js
   (touchstart/touchend, gesto horizontal de más de 45 px).
   En computadora las flechas siguen saliendo igual.
   =========================================================== */
@media (max-width: 1024px) {
  .dj-carousel__arrow,
  .dj-sport-carousel__arrow,
  .dj-product-carousel .dj-carousel__arrow,
  .dj-reels-carousel .dj-carousel__arrow {
    display: none !important;
  }
}


/* ===========================================================
   v3.7 — BANNER DE ENVÍO GRATIS: CON VIDA Y BIEN ALINEADO
   -----------------------------------------------------------
   Dos cosas:

   1) EL CAMIÓN. Estaba fuera del párrafo, así que en celular
      —donde la frase ocupa dos líneas y el bloque se estira a
      todo el ancho— se quedaba clavado en el borde izquierdo,
      lejísimos del texto. Ahora va dentro del párrafo: se centra
      con la frase, dé una línea o tres.

   2) EL MOVIMIENTO. Una franja roja quieta es un cartel; una que
      se mueve es un mensaje. El camión entra por la izquierda,
      "reparte" y sale por la derecha, y cada cierto tiempo un
      brillo cruza la franja. Sutil: tiene que llamar la atención
      sin marear, porque esto se ve en TODAS las visitas.
   =========================================================== */

.dj-shipping-banner {
  position: relative;
  overflow: hidden;
}

/* --- El camión, dentro de la frase --- */
.dj-shipping-banner__truck {
  display: inline-block;
  margin-right: 9px;
  vertical-align: -0.28em;
  /* Ancho fijo: el camión se mueve pero el texto NO baila con él */
  width: 18px;
  height: 18px;
  overflow: visible;
}
.dj-shipping-banner__icon {
  color: #fff;
  display: block;
  animation: dj-truck-reparte 7s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

/* Entra por la izquierda, se queda mientras se lee la frase y sale
   por la derecha. El ciclo es largo a propósito: un camión dando
   vueltas cada segundo cansa a los tres segundos. */
@keyframes dj-truck-reparte {
  0%   { transform: translateX(-16px); opacity: 0; }
  10%  { transform: translateX(0);     opacity: 1; }
  70%  { transform: translateX(0);     opacity: 1; }
  72%  { transform: translateX(0) translateY(-1px); }
  74%  { transform: translateX(0) translateY(0); }
  88%  { transform: translateX(20px);  opacity: 0; }
  100% { transform: translateX(-16px); opacity: 0; }
}

/* --- El brillo que cruza la franja roja --- */
.dj-shipping-banner:not(.dj-shipping-banner--photo)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 55%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 100%);
  animation: dj-envio-brillo 7s ease-in-out infinite;
}

@keyframes dj-envio-brillo {
  0%,  55% { transform: translateX(0); }
  85%      { transform: translateX(320%); }
  100%     { transform: translateX(320%); }
}

/* El texto, por encima del brillo */
.dj-shipping-banner__inner { position: relative; z-index: 2; }

/* En celular la frase va a dos líneas: un pelín más de aire entre
   ellas para que se lea de un golpe de vista. */
@media (max-width: 640px) {
  .dj-shipping-banner { padding: 11px 12px; }
  .dj-shipping-banner__text { line-height: 1.45; font-size: 0.76rem; }
  .dj-shipping-banner__truck { margin-right: 7px; }
}

/* Quien pide menos movimiento, lo tiene: el camión se queda quieto
   y visible, y el brillo desaparece. */
@media (prefers-reduced-motion: reduce) {
  .dj-shipping-banner__icon { animation: none; opacity: 1; transform: none; }
  .dj-shipping-banner:not(.dj-shipping-banner--photo)::after { display: none; }
}


/* ===========================================================
   v3.10 — BLOQUE DE ENVÍO GRATIS
   -----------------------------------------------------------
   Va entre Hombre/Mujer y Ofertas de Jimmy. Dos trabajos a la vez:
   contar la promesa que más vende y meter un respiro claro entre
   dos secciones con foto que, pegadas, se leían como una mancha.

   Fondo gris muy claro a propósito: entre dos bloques oscuros con
   foto, el respiro tiene que ser CLARO. Si fuera otra foto o negro,
   volveríamos al mismo problema.
   =========================================================== */
.dj-ship-block {
  background: var(--dj-gray-light, #F4F4F5);
  text-align: center;
}
.dj-home > .dj-ship-block {
  padding: 44px 0;   /* espaciado propio: no es una sección normal */
}

.dj-ship-block__inner {
  max-width: 560px;
  margin: 0 auto;
}

/* El camión de la marca. Es SVG y se pinta con currentColor, así que
   el mismo dibujo vale aquí en negro y en la franja roja en blanco. */
.dj-ship-block__truck {
  color: var(--dj-black-soft, #111);
  margin-bottom: 14px;
  line-height: 0;
}
.dj-ship-block__truck svg {
  width: 96px;
  height: auto;
  display: inline-block;
  /* Entra por la izquierda cuando el bloque aparece: el camión
     "llega", no está aparcado. */
  animation: dj-camion-llega 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes dj-camion-llega {
  0%   { transform: translate3d(-42px, 0, 0); opacity: 0; }
  100% { transform: translate3d(0, 0, 0);     opacity: 1; }
}

.dj-ship-block__title {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-black, 900);
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin: 0 0 10px;
  color: var(--dj-black-soft, #111);
}

.dj-ship-block__sub {
  font-family: var(--dj-font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #55555f;
  margin: 0 auto 22px;
  max-width: 420px;
}

.dj-ship-block__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  background: var(--dj-black-soft, #111);
  color: #fff;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  font-size: 0.82rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--dj-radius-sm, 4px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.dj-ship-block__btn:hover {
  background: var(--dj-red, #FF0000);
  color: #fff;
  transform: translateY(-2px);
}
.dj-ship-block__btn span { transition: transform 0.2s ease; }
.dj-ship-block__btn:hover span { transform: translateX(3px); }

@media (max-width: 1024px) {
  .dj-home > .dj-ship-block { padding: 34px 0; }
  .dj-ship-block__truck svg { width: 78px; }
}

@media (max-width: 640px) {
  .dj-home > .dj-ship-block { padding: 26px 16px; }
  .dj-ship-block__truck { margin-bottom: 10px; }
  .dj-ship-block__truck svg { width: 64px; }
  .dj-ship-block__title { font-size: 1.5rem; margin-bottom: 7px; }
  .dj-ship-block__sub { font-size: 0.82rem; margin-bottom: 16px; }
  .dj-ship-block__btn { padding: 12px 24px; font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dj-ship-block__truck svg { animation: none; }
}


/* --- El camión de la FRANJA roja: mismo dibujo, en pequeño --- */
.dj-shipping-banner__truck svg {
  width: 22px;
  height: auto;
  display: block;
  color: #fff;
}
.dj-shipping-banner__truck {
  width: 22px;
  height: 15px;
  vertical-align: -0.2em;
}
@media (max-width: 640px) {
  .dj-shipping-banner__truck,
  .dj-shipping-banner__truck svg { width: 19px; }
}


/* ===========================================================
   v3.10 — MENOS AIRE ENTRE SECCIONES
   -----------------------------------------------------------
   96 px arriba y 96 abajo entre sección y sección son 192 px de
   nada entre dos cosas que vender. En una tienda eso es scroll
   perdido: el cliente pasa más tiempo viendo blanco que producto.

   Se baja a un respiro que SE VE pero no se sufre. La separación
   sigue existiendo —el ojo necesita saber dónde acaba una sección
   y empieza otra— pero deja de ser un descampado.

        antes            ahora
   PC     96 px    →     52 px
   Tablet 48 px    →     36 px
   Móvil  34 px    →     24 px
   =========================================================== */
.dj-home section {
  padding: 52px 0;
}

@media (max-width: 1024px) {
  .dj-home section { padding: 36px 0; }
  .dj-section-heading-row { margin-bottom: 20px; }
}

@media (max-width: 640px) {
  .dj-home section { padding: 24px 0; }
  .dj-section-heading-row { margin-bottom: 12px; }
}

/* Las secciones a todo lo ancho siguen gestionando su propio aire:
   no se les toca (si no, aparecen franjas de fondo arriba y abajo). */
.dj-home > .dj-hero,
.dj-home > .dj-gender-split,
.dj-home > .dj-parallax-banner,
.dj-home > .dj-shipping-banner,
.dj-home > .dj-reels--photo {
  padding: 0;
}
.dj-home > .dj-shipping-banner { padding: 12px 0; }
.dj-home > .dj-reels--photo { padding: 52px 0; }

@media (max-width: 640px) {
  .dj-home > .dj-reels--photo { padding: 26px 0; }
}


/* v3.11 — "COLECCIÓN DE" estaba a 8.8 px: se veía, pero no se leía */
@media (max-width: 640px) {
  .dj-gender-split__eyebrow { font-size: 0.63rem; }
}


/* ===========================================================
   v3.13 — LA ESTRELLA DE LA CASA
   -----------------------------------------------------------
   Segunda versión, y la buena. La primera ocupaba una pantalla
   entera: foto de media página y titular gigante. Llamaba la
   atención a gritos, y una sección que grita tapa a los
   productos —que son los que venden.

   Ahora es una FRANJA: miniatura cuadrada, texto al lado, botón
   a la derecha, y debajo las tarjetas. Ocupa un tercio de lo que
   ocupaba. El fondo oscuro se queda: viene de blanco y sigue en
   blanco, y ese corte es lo que hace que el ojo se pare aquí sin
   necesidad de letras de 3 cm.
   =========================================================== */
.dj-star {
  position: relative;
  overflow: hidden;
  background: #0d0d10;
  color: #fff;
}
.dj-home > .dj-star {
  padding: 34px 0;
}

/* Resplandor rojo, ahora mucho más contenido */
.dj-star__glow {
  position: absolute;
  top: -60%;
  right: -5%;
  width: 45%;
  height: 220%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 0, 0, 0.16), transparent 70%);
}

/* --- La cabecera: título grande + botón --- */
.dj-star__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.dj-star__info { min-width: 0; }
.dj-star__info--full { flex: 1 1 auto; }

/**
 * v7.2 — "LAS ESTRELLAS DE LA CASA"
 * -----------------------------------------------------------
 * Antes esto era dos cosas: una chapita chica ("La estrella de la
 * casa") y, debajo, el titular de verdad ("Mancuernas y Pesas") en
 * otro estilo. A pedido del cliente ahora es UNA sola pieza: el
 * mismo look de la chapa —píldora, borde rojo, fondo entintado,
 * mayúsculas— pero al tamaño de un título de sección, no de una
 * etiqueta. Reemplaza a ambas.
 */
.dj-star__title--eyebrow-style {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 26px;
  border-radius: 999px;
  background: rgba(255, 0, 0, 0.14);
  border: 1px solid rgba(255, 0, 0, 0.35);
  color: #ff5a5a;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-black, 900);
  font-size: clamp(1.2rem, 2.6vw, 2.1rem);
  letter-spacing: 1.4px;
  line-height: 1.2;
  text-transform: uppercase;
}
.dj-star__title--eyebrow-style::before {
  content: "★";
  color: var(--dj-red, #FF0000);
  font-size: 0.75em;
  line-height: 1;
}

.dj-star__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 24px;
  background: var(--dj-red, #FF0000);
  color: #fff;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  font-size: 0.76rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--dj-radius-sm, 4px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.dj-star__btn:hover {
  background: #fff;
  color: #0d0d10;
  transform: translateY(-2px);
}
.dj-star__btn span { transition: transform 0.2s ease; }
.dj-star__btn:hover span { transform: translateX(3px); }

/* --- Los productos ---
   v6.0 — Ya NO es una rejilla fija: es el carrusel real
   (data-dj-carousel, ver home-star.php y home.js), así que el ancho
   de cada tarjeta lo pone --dj-per (assets/css/home.css, "CARRUSEL
   GENÉRICO" más abajo) y aquí solo queda el vestido de la tarjeta,
   NUNCA su layout — poner "display" o "grid-template-columns" aquí
   le ganaría por cascada al carrusel y lo dejaría inmóvil, como
   pasaba antes de la v6.0. */
.dj-star__grid li.product {
  background: #fff !important;
  border-radius: var(--dj-radius-sm, 4px);
  overflow: hidden;
}

/**
 * ⚠️ CORREGIDO (v6.0.1) — Al quitar la rejilla fija de arriba se fue,
 * sin querer, "position: relative; z-index: 2;" que traía aquel
 * selector. No era solo layout: era lo que ponía a los productos POR
 * ENCIMA del fuego de fondo (.dj-star__fuego, z-index:1) y del
 * degradado oscuro (.dj-star--foto::before, z-index:1 y SIN
 * pointer-events:none). Sin ese z-index, el carrusel entero volvía a
 * quedar por debajo de esas dos capas en el orden de apilado — se
 * veía todo lavado/oscurecido, como con algo semitransparente encima,
 * y ese "algo" (el degradado, que si no tiene pointer-events:none
 * SÍ recibe los clics) se comía los toques antes de que llegaran a
 * las tarjetas. .dj-star__head ya tenía exactamente este mismo
 * arreglo (ver arriba); al carrusel le hacía falta el mismo. */
.dj-star-carousel {
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .dj-home > .dj-star { padding: 26px 0; }
  .dj-star__head { gap: 16px; margin-bottom: 18px; }
}

@media (max-width: 640px) {
  .dj-home > .dj-star { padding: 22px 0; }

  .dj-star__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }
  .dj-star__title--eyebrow-style {
    font-size: 1.05rem;
    padding: 8px 18px;
    gap: 8px;
  }

  .dj-star__btn {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
    font-size: 0.72rem;
  }

  .dj-star__glow { display: none; }
}

/* Celular estrecho: un punto menos de todo */
@media (max-width: 380px) {
  .dj-star__title--eyebrow-style { font-size: 0.92rem; padding: 7px 14px; }
}


/* ===========================================================
   v3.14 — FUEGO DE FONDO Y TARJETAS IGUALES
   =========================================================== */

/* --- 1. La foto de fondo (Personalizar > Producto estrella) --- */
.dj-star__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  /* Muy apagada: es un fondo, no una foto de producto. Encima van
     un precio y un botón de comprar, y esos tienen que ganar. */
  opacity: 0.3;
  filter: grayscale(0.2) contrast(1.05);
}
.dj-star--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(13,13,16,0.86) 0%, rgba(13,13,16,0.72) 45%, rgba(13,13,16,0.9) 100%);
}

/* --- 2. El fuego ---
   Tres degradados que respiran a 8, 11 y 14 segundos. Al no ser
   múltiplos entre sí, nunca coinciden: por eso parece lumbre y no
   un semáforo. Y son degradados, no un video: pesan cero y los
   mueve la tarjeta gráfica, así que en celular no se nota. */
.dj-star__fuego {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.dj-star__llama {
  position: absolute;
  bottom: -40%;
  height: 120%;
  border-radius: 50%;
  filter: blur(38px);
  opacity: 0;
}
.dj-star__llama--1 {
  left: -5%;
  width: 55%;
  background: radial-gradient(closest-side, rgba(255, 92, 0, 0.5), transparent 72%);
  animation: dj-fuego-1 8s ease-in-out infinite;
}
.dj-star__llama--2 {
  left: 32%;
  width: 46%;
  background: radial-gradient(closest-side, rgba(255, 0, 0, 0.42), transparent 70%);
  animation: dj-fuego-2 11s ease-in-out infinite;
}
.dj-star__llama--3 {
  right: -6%;
  width: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 20, 0.34), transparent 74%);
  animation: dj-fuego-3 14s ease-in-out infinite;
}

@keyframes dj-fuego-1 {
  0%, 100% { opacity: 0.30; transform: translate3d(0, 8%, 0) scaleY(0.94); }
  50%      { opacity: 0.55; transform: translate3d(2%, 0, 0) scaleY(1.06); }
}
@keyframes dj-fuego-2 {
  0%, 100% { opacity: 0.42; transform: translate3d(0, 4%, 0) scaleY(1.04); }
  50%      { opacity: 0.20; transform: translate3d(-3%, 10%, 0) scaleY(0.92); }
}
@keyframes dj-fuego-3 {
  0%, 100% { opacity: 0.22; transform: translate3d(0, 6%, 0) scaleY(0.97); }
  50%      { opacity: 0.44; transform: translate3d(3%, -2%, 0) scaleY(1.08); }
}

/* Cuatro chispas que suben. Cuatro, no cuarenta: la diferencia
   entre "hay fuego detrás" y "esto es una pantalla de carga". */
.dj-star__chispa {
  position: absolute;
  left: var(--x, 50%);
  bottom: 6%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff8a2b;
  box-shadow: 0 0 8px rgba(255, 120, 0, 0.9);
  opacity: 0;
  animation: dj-chispa 9s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes dj-chispa {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0) scale(0.7); }
  12%  { opacity: 0.85; }
  70%  { opacity: 0.35; }
  100% { opacity: 0;    transform: translate3d(14px, -180px, 0) scale(1.1); }
}

/* --- 3. Las tarjetas, IGUALES a Recién Llegados ---
   La rejilla lleva también la clase `dj-home-products__grid`, así
   que hereda el título a una línea, el precio y las chapas de las
   filas de la home. Antes el título salía en rosa y gigante: eran
   los estilos del tema padre, que no encontraban nada que los
   pisara. Aquí solo queda lo que la rejilla necesita de más:
   apilar el contenido para que el botón se pegue abajo. */
.dj-star__grid li.product {
  display: flex !important;
  flex-direction: column;
  background: #fff !important;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  border: none !important;
}
.dj-star__grid li.product img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
}

/* --- 4. Un respiro antes de "Ofertas de Jimmy" ---
   Las dos secciones son oscuras y estaban pegadas: se leían como
   un solo bloque largo. Una línea de fondo entre las dos y ya se
   entiende que son dos cosas distintas. */
.dj-home > .dj-star { margin-bottom: 14px; }

@media (max-width: 640px) {
  .dj-home > .dj-star { margin-bottom: 10px; }
  /* En celular el fuego se queda en dos capas y sin chispas: es
     un fondo, no puede costar batería. */
  .dj-star__llama--3,
  .dj-star__chispa { display: none; }
  .dj-star__llama { filter: blur(28px); }
}

/* Menos movimiento: el fuego se queda quieto, encendido y suave. */
@media (prefers-reduced-motion: reduce) {
  .dj-star__llama,
  .dj-star__chispa { animation: none; }
  .dj-star__llama { opacity: 0.3; }
  .dj-star__chispa { display: none; }
}


/* ===========================================================
   v6.0 — TABLET Y CELULAR: EL MISMO CARRUSEL, NO UN SCROLL APARTE
   -----------------------------------------------------------
   Hasta la v5, esta fila era una excepción: en vez del carrusel con
   flechas que usa el resto de la home, aquí se armaba un scroll
   horizontal nativo aparte (overflow-x + scroll-snap) solo para
   tablet y celular. Servía, pero era una segunda manera de hacer lo
   mismo que ya sabía hacer data-dj-carousel — y con la sección
   mostrando ahora unos 10 productos en vez de 4, tenía más sentido
   que se comportara IGUAL que "Fresh Del Camión" y "Los Más
   Vendidos": el carrusel genérico (ver "CARRUSEL GENÉRICO" más abajo
   en este archivo) ya trae su propio arrastre de dedo suave con
   inercia (home.js) y, en escritorio, flechas — así que aquí no hace
   falta nada aparte. Las flechas se ocultan solas en tablet/celular
   por la regla general de "v3.4 — SIN FLECHAS EN CELULAR NI TABLET".
   =========================================================== */


/* ===========================================================
   v3.16.4 — HOMBRE/MUJER Y LA ESTRELLA DE LA CASA: SIN FLASH BLANCO
   -----------------------------------------------------------
   Las dos secciones llevan fondo oscuro (foto o color), pero el
   efecto de aparición (.dj-reveal / .dj-depth) anima la OPACIDAD de
   la sección entera — fondo incluido. Mientras esa opacidad está en
   0, lo que se ve por detrás es el blanco normal de la página: un
   hueco en blanco justo donde debería haber una franja oscura, que
   se leía como un error de carga y no como una animación.

   La solución no es quitar el efecto: es que estas dos secciones ya
   no animen la opacidad (se quedan siempre visibles, fondo oscuro
   incluido) y solo se anime el desplazamiento hacia arriba, que es
   la parte del efecto que se nota sin generar el hueco blanco.
   El !important es necesario: hay un segundo motor de animación
   (animation-timeline: view(), ver motion.css) que también controla
   la opacidad por keyframes en navegadores compatibles, y hay que
   ganarle a los dos a la vez.
   =========================================================== */
.dj-star,
.dj-gender-split {
  opacity: 1 !important;
}