/* =========================================================
   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;
  flex: 0 0 calc((100% - 40px) / 3);
  height: 300px;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}
.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 { 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.4rem;
  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 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.dj-gender-split__col {
  position: relative;
  display: flex;
  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;
  transition: opacity 1s ease, transform 0.6s 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; }
.dj-gender-split__col:hover .dj-gender-split__bg { transform: scale(1.06); }
.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;
  margin: 0 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);
  margin: 0 0 clamp(3px, 1vw, 10px);
}
.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;
  margin: 0 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;
}
.dj-sale-ship__truck svg {
  width: clamp(34px, 8vw, 96px);
  height: auto;
  display: inline-block;
  animation: dj-camion-llega 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.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); }
}


/* 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; }
}

/* En celular, menos y más discretas: la pantalla es pequeña y
   con muchas el texto se ensucia. */
@media (max-width: 640px) {
  .dj-particle:nth-child(n + 6) { display: none; }
  .dj-particle { opacity: 0.7; }
}




/* ===========================================================
   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 { 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 { 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;
}
.dj-gender-split__col { transition: filter 0.4s ease; }
.dj-gender-split__col:hover { filter: brightness(1.06); }


/* --- 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 */
}

/* ⚠️ 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;
}


/* ===========================================================
   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);
}
.dj-reels__hint {
  margin-bottom: 0;
}


/* ===========================================================
   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.2rem; padding: 20px; }

  /* 2. Hombre / Mujer — uno al lado del otro, nunca apilados */
  .dj-gender-split { grid-template-columns: 1fr 1fr; min-height: 0; }
  .dj-gender-split__col { min-height: 420px; 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: 0.95rem;
    padding: 16px;
    letter-spacing: 0;
    line-height: 1.2;
  }

  /* -------- 2. Hombre / Mujer: los dos en la misma fila -------- */
  .dj-gender-split {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }
  .dj-gender-split__col {
    min-height: 300px;
    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: 0 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; }
  /* Menos brillos en un espacio pequeño: se lee mejor */
  .dj-gender-split .dj-particles { display: none; }

  /* -------- 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: 270px; 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: TODO en una fila --- */
.dj-star__head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 116px 1fr auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
}

.dj-star__thumb {
  width: 116px;
  height: 116px;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  background: #17171c;
  flex: 0 0 auto;
}
.dj-star__thumb img,
.dj-star__thumb-empty {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dj-star__thumb-empty {
  background: linear-gradient(135deg, #1c1c22, #2a2a33);
}

.dj-star__info { min-width: 0; }

/* La chapa de "lo más vendido": pequeña, al lado del título.
   Antes era un cartel sobre la foto; a este tamaño sobra. */
.dj-star__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 7px;
  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-bold, 700);
  font-size: 0.62rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.dj-star__chip-icon {
  font-size: 0.7rem;
  line-height: 1;
  color: var(--dj-red, #FF0000);
}

.dj-star__title {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-black, 900);
  text-transform: uppercase;
  /* Tope de 1.9rem: por encima de eso deja de ser un título y
     empieza a ser una valla publicitaria. */
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.4px;
  margin: 0 0 6px;
  color: #fff;
}

.dj-star__text {
  font-family: var(--dj-font-body);
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 8px;
  max-width: 620px;
  /* Dos líneas y punto: si hace falta más, es que el texto está
     mal escrito, no que falte sitio. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Las razones, EN LÍNEA. En columna eran tres renglones de alto
   para decir tres cosas de cuatro palabras. */
.dj-star__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.dj-star__list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dj-font-body);
  font-size: 0.76rem;
  font-weight: var(--dj-weight-medium, 500);
  color: rgba(255, 255, 255, 0.82);
}
.dj-star__list span {
  color: var(--dj-red, #FF0000);
  font-weight: 900;
  flex: 0 0 auto;
}

.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 ---
   ⚠️ El selector va con `.dj-home ul.products` a propósito:
   shop.css carga DESPUÉS y ahí manda
   `.woocommerce ul.products { repeat(3,1fr) }`. Con
   `.dj-star__grid` a secas ganaba esa y la cuarta tarjeta se caía
   a una segunda fila dejando medio bloque vacío. Medido a 1280. */
.dj-home ul.products.dj-star__grid,
.dj-star__grid {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.dj-star__grid li.product {
  background: #fff !important;
  border-radius: var(--dj-radius-sm, 4px);
  overflow: hidden;
}

@media (max-width: 1024px) {
  .dj-home > .dj-star { padding: 26px 0; }
  .dj-star__head { gap: 16px; margin-bottom: 16px; }
  .dj-star__head { grid-template-columns: 96px 1fr auto; }
  .dj-star__thumb { width: 96px; height: 96px; }
  .dj-home ul.products.dj-star__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
}

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

  /* En celular el botón no cabe en la fila: pasa abajo, a todo el
     ancho, que además es donde el pulgar lo encuentra sin buscar. */
  .dj-star__head {
    grid-template-columns: 104px 1fr;
    gap: 12px;
    margin-bottom: 14px;
    /* v3.13.1 — La foto se ESTIRA hasta donde llegue el texto.
       Antes era un cuadradito de 72 px arriba del todo y quedaba
       flotando, con un hueco muerto a su derecha: parecía que se
       había cargado a medias. Con la columna estirada, foto y
       texto miden lo mismo y el bloque se lee como una pieza. */
    align-items: stretch;
  }
  .dj-star__thumb {
    width: 104px;
    height: auto;          /* manda el alto del texto */
    align-self: stretch;
    border-radius: 6px;
  }
  .dj-star__thumb img,
  .dj-star__thumb-empty {
    height: 100%;
    min-height: 104px;     /* si el texto es cortísimo, que no se aplaste */
    object-fit: cover;
  }
  .dj-star__chip { font-size: 0.55rem; padding: 3px 8px; margin-bottom: 5px; letter-spacing: 1px; }
  .dj-star__title { font-size: 1.15rem; margin-bottom: 4px; }
  .dj-star__text { font-size: 0.75rem; -webkit-line-clamp: 2; margin-bottom: 6px; }
  .dj-star__list { gap: 4px 12px; }
  .dj-star__list li { font-size: 0.68rem; gap: 5px; }

  .dj-star__btn {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
    padding: 12px 18px;
    font-size: 0.72rem;
    margin-top: 2px;
  }

  .dj-home ul.products.dj-star__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .dj-star__glow { display: none; }
}

/* Celular estrecho: la miniatura y el texto, un punto menos */
@media (max-width: 380px) {
  .dj-star__head { grid-template-columns: 88px 1fr; gap: 10px; }
  .dj-star__thumb { width: 88px; }
  .dj-star__thumb img,
  .dj-star__thumb-empty { min-height: 88px; }
  .dj-star__title { font-size: 1.05rem; }
  .dj-star__text { display: none; }   /* con 62 px de miniatura, la frase estorba */
}


/* ===========================================================
   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; }
}


/* ===========================================================
   v3.14.1 — EN CELULAR, UNA SOLA FILA QUE SE DESLIZA
   -----------------------------------------------------------
   Cuatro productos en dos filas de dos alargaban la sección casi
   1.400 px: para pasar de la estrella a lo siguiente había que
   bajar dos pantallas enteras.

   Ahora es UNA fila: se ven dos tarjetas y las otras dos se
   traen con el dedo. Sin flechas — en pantalla táctil sobran, y
   con la tarjeta a media pantalla la flecha no tendría dónde
   apoyarse sin tapar algo.

   Lo hace el propio navegador (`overflow-x` + `scroll-snap`), no
   JavaScript: el deslizamiento es el nativo del teléfono, con su
   inercia y su rebote, y no cuesta ni un kilobyte.

   El 47% no es un número redondo por casualidad: deja asomar un
   trozo de la tercera tarjeta. Sin flechas, ese trocito es lo
   ÚNICO que le dice al cliente que hay más a la derecha.
   =========================================================== */
/* v3.14.2 — También en TABLET.
   Con 3 columnas y 4 productos quedaba una fila de tres y una
   cuarta tarjeta sola, con dos huecos vacíos al lado: parecía que
   faltaba algo. Deslizando, la fila siempre está completa. */
@media (max-width: 1024px) {

  .dj-home ul.products.dj-star__grid,
  .dj-star__grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    /* v3.16.4 — SIN overflow-y explícito, el navegador calcula ese eje
       como "auto" en cuanto el otro (overflow-x) deja de ser "visible"
       — es una regla del CSS que casi nadie tiene presente. El
       resultado: esta fila también quedaba scrolleable en vertical
       por accidente, y un dedo bajando por la página a veces movía
       las tarjetas arriba/abajo en vez de la página, dando el efecto
       de "bug" en lugar de carrusel. Bloqueando el eje vertical aquí,
       el dedo solo puede mover esto en horizontal — para bajar la
       página, el gesto pasa de largo, como debe ser. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;   /* que no arrastre la página entera */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }
  .dj-home ul.products.dj-star__grid::-webkit-scrollbar,
  .dj-star__grid::-webkit-scrollbar { display: none; }

  .dj-star__grid li.product {
    /* Tablet: tres a la vista y un trozo de la cuarta asomando */
    flex: 0 0 31%;
    max-width: 31%;
    scroll-snap-align: start;
  }
}

/* Celular: dos a la vista. El 47% no es redondo por casualidad —
   deja asomar un trozo de la tercera, y sin flechas ese trocito es
   lo ÚNICO que dice que hay más a la derecha. */
@media (max-width: 640px) {
  .dj-star__grid li.product {
    flex: 0 0 47%;
    max-width: 47%;
  }
}

/* ===========================================================
   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;
}