/* =========================================================
   DEPORTES JIMMY — HERO / SLIDER REVOLUTION
   ========================================================= */

.dj-hero {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--dj-black-soft, #111);
}

/* ---------------------------------------------------------
   Wrapper de Slider Revolution
   Reserva sitio mientras el módulo carga, para que la página no
   "salte" cuando aparece.

   ⚠️ v3.6 — ANTES ERAN 400 px FIJOS Y ESO ERA UN BOQUETE.
   En celular el slider mide 230-280 px, pero el wrapper se
   quedaba en 400: sobraban 150 px de negro entre el slider y la
   cinta de mensajes. Ahora la reserva es proporcional al ancho de
   la pantalla (46vw, y nunca más de 400 px) y, en cuanto el
   slider aparece, hero.js la pone a cero: el hueco se ajusta al
   milímetro y la cinta queda pegada.
   --------------------------------------------------------- */
.dj-hero__rs-wrapper {
  width: 100%;
  min-height: min(400px, 46vw);
}

/* Clases opcionales para usar como "custom class" en capas
   de texto dentro del RS Editor, así el texto respeta la marca
   sin tener que reconfigurar fuentes manualmente en cada capa */
.rs-dj-headline {
  font-family: var(--dj-font-display), sans-serif !important;
  text-transform: uppercase;
  color: var(--dj-white, #fff) !important;
}
.rs-dj-accent {
  font-family: var(--dj-font-accent), cursive !important;
  color: var(--dj-red, #FF0000) !important;
}
.rs-dj-subtitle {
  font-family: var(--dj-font-body), sans-serif !important;
  font-weight: var(--dj-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dj-white, #fff) !important;
}
.rs-dj-btn {
  font-family: var(--dj-font-body), sans-serif !important;
  font-weight: var(--dj-weight-bold, 700) !important;
  text-transform: uppercase;
  background-color: var(--dj-red, #FF0000) !important;
  border-radius: var(--dj-radius-sm, 4px) !important;
}


/* ===========================================================
   FALLBACK HERO (solo se activa si Slider Revolution no está listo)
   =========================================================== */
.dj-hero-fallback {
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
}

.dj-hero-fallback__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  display: flex;
  align-items: center;
}
.dj-hero-fallback__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.dj-hero-fallback__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.dj-hero-fallback__title {
  color: var(--dj-white, #fff);
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  margin-bottom: var(--dj-space-sm, 16px);
}

.dj-hero-fallback__subtitle {
  color: var(--dj-gray, #AEAEAF);
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  margin-bottom: var(--dj-space-md, 24px);
}

/* Flechas de navegación */
.dj-hero-fallback__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  backdrop-filter: blur(4px);
}
.dj-hero-fallback__arrow:hover { background: rgba(255,255,255,0.3); }
.dj-hero-fallback__arrow--prev { left: 24px; }
.dj-hero-fallback__arrow--next { right: 24px; }

/* Dots */
.dj-hero-fallback__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.dj-hero-fallback__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  padding: 0;
}
.dj-hero-fallback__dot.is-active {
  background: var(--dj-red, #FF0000);
  transform: scale(1.2);
}


/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1024px) {
  .dj-hero-fallback { height: 560px; }
}

@media (max-width: 768px) {
  .dj-hero-fallback { height: 480px; }
  .dj-hero-fallback__content { max-width: 90%; }
  .dj-hero-fallback__arrow { width: 38px; height: 38px; }
  .dj-hero-fallback__arrow--prev { left: 12px; }
  .dj-hero-fallback__arrow--next { right: 12px; }
}

@media (max-width: 480px) {
  .dj-hero-fallback { height: 420px; }
  .dj-hero-fallback__title { font-size: 2rem; }
  .dj-hero-fallback__arrow { display: none; } /* en móvil, swipe manda */
}


/* ===========================================================
   HERO PROPIO — capas de profundidad
   (añadido en v2.0: fondo con parallax + overlay + texto flotante)
   =========================================================== */
.dj-hero-fallback__slide {
  background-image: none !important; /* el fondo ahora vive en __bg */
}

.dj-hero-fallback__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  /* Realce de vitrina: la foto se ve viva, no apagada */
  filter: saturate(1.12) contrast(1.05) brightness(1.03);
  transform: scale(1.06);           /* margen para que el parallax no muestre bordes */
  animation: dj-hero-zoom 18s ease-in-out infinite alternate;
}

@keyframes dj-hero-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.14); }
}

/* Con parallax activo mandamos nosotros la transformación: sin animación de zoom */
.dj-has-parallax .dj-hero-fallback__bg {
  animation: none;
}

/**
 * EL VELO DEL HERO — v2.8
 *
 * ⚠️ ANTES apagaba la foto entera: 0.78 de negro a la izquierda que
 * seguía en 0.15 hasta el borde derecho, MÁS otro degradado vertical
 * de 0.35 arriba y 0.55 abajo. Esas dos bandas de arriba y abajo eran
 * la "sombra interior" que hacía que la imagen se viera opaca y sucia.
 *
 * AHORA el velo existe SOLO donde va el texto (la izquierda) y se
 * desvanece del todo antes de la mitad. La foto se ve como es.
 * La intensidad se elige en Personalizar > Hero.
 */
.dj-hero-fallback__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, var(--dj-hero-veil, 0.55)) 0%,
    rgba(0, 0, 0, calc(var(--dj-hero-veil, 0.55) * 0.42)) 30%,
    rgba(0, 0, 0, 0) 58%);
}

/* Intensidades, desde el panel */
.dj-hero--veil-soft   { --dj-hero-veil: 0.42; }
.dj-hero--veil-medium { --dj-hero-veil: 0.58; }
.dj-hero--veil-strong { --dj-hero-veil: 0.74; }
.dj-hero--veil-none .dj-hero-fallback__overlay { display: none; }

/* En vertical el texto queda debajo, así que el velo viene de abajo */
@media (max-width: 768px) {
  .dj-hero-fallback__overlay {
    background: linear-gradient(0deg,
      rgba(0, 0, 0, calc(var(--dj-hero-veil, 0.55) + 0.14)) 0%,
      rgba(0, 0, 0, calc(var(--dj-hero-veil, 0.55) * 0.45)) 38%,
      rgba(0, 0, 0, 0) 72%);
  }
}

.dj-hero-fallback__line {
  display: block;
  line-height: 0.95;
}

.dj-hero-fallback__content {
  z-index: 3;
}

/* Avisos que solo ve el administrador */
.dj-hero__admin-warning,
.dj-hero__admin-hint {
  position: relative;
  z-index: 6;
  margin: 0 auto;
  max-width: 900px;
  padding: 14px 18px;
  background: #fff4c2;
  color: #4a3b00;
  border-left: 4px solid #d98600;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.85rem;
  border-radius: 4px;
}
.dj-hero__admin-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  opacity: 0.95;
}


/* ===========================================================
   v2.5 — FOTO DEL HERO SEGÚN LA PANTALLA
   -----------------------------------------------------------
   Las variables las imprime template-parts/hero.php. Las de
   tablet y celular son OPCIONALES: si no se suben, la variable
   no existe y el `var(..., fallback)` cae en la de arriba.

   Ventaja frente a subir una sola foto gigante: el celular
   descarga SOLO la suya. Menos datos, más velocidad.
   =========================================================== */
.dj-hero-fallback__bg.has-src {
  background-image: var(--dj-bg-d);
}

/* Tablet */
@media (max-width: 1024px) {
  .dj-hero-fallback__bg.has-src {
    background-image: var(--dj-bg-t, var(--dj-bg-d));
  }
}

/* Celular — si no hay foto de celular usa la de tablet, y si
   tampoco hay, la de computadora */
@media (max-width: 640px) {
  .dj-hero-fallback__bg.has-src {
    background-image: var(--dj-bg-m, var(--dj-bg-t, var(--dj-bg-d)));
  }
}


/* ===========================================================
   v2.8 — VIDEO DE FONDO EN EL HERO
   -----------------------------------------------------------
   Cuando un slide tiene video, sustituye a la foto. La foto sigue
   haciendo falta: es el póster que se ve mientras el video carga,
   y es lo que se muestra en celular si decides no gastar los datos
   del visitante.
   =========================================================== */
.dj-hero-fallback__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.04);
  /* Fondo negro mientras carga: nunca un flash blanco */
  background: #000;
}

/* Sin video en celular (por defecto): se ve la foto y punto */
@media (max-width: 768px) {
  .dj-hero--no-video-mobile .dj-hero-fallback__video { display: none; }
}


/* ===========================================================
   v2.9 — HERO: POSICIÓN, ANIMACIÓN, RÓTULO Y CAPAS
   =========================================================== */

/* -----------------------------------------------------------
   1. DÓNDE VA EL CONTENIDO
   ----------------------------------------------------------- */
/* Un poco más de ancho: el título de tres líneas lo agradece */
.dj-hero-fallback__content { max-width: 620px; }

/* El botón sigue al texto */


/* Con el texto centrado o a la derecha, el velo tiene que
   acompañarlo: si no, el título cae sobre la parte clara. */
.dj-hero--veil-soft .dj-hero-fallback__slide:has(.dj-al-d-center) .dj-hero-fallback__overlay,
.dj-hero--veil-medium .dj-hero-fallback__slide:has(.dj-al-d-center) .dj-hero-fallback__overlay,
.dj-hero--veil-strong .dj-hero-fallback__slide:has(.dj-al-d-center) .dj-hero-fallback__overlay {
  background: radial-gradient(70% 90% at 50% 50%,
    rgba(0, 0, 0, var(--dj-hero-veil, 0.55)) 0%,
    rgba(0, 0, 0, 0) 78%);
}
.dj-hero--veil-soft .dj-hero-fallback__slide:has(.dj-al-d-right) .dj-hero-fallback__overlay,
.dj-hero--veil-medium .dj-hero-fallback__slide:has(.dj-al-d-right) .dj-hero-fallback__overlay,
.dj-hero--veil-strong .dj-hero-fallback__slide:has(.dj-al-d-right) .dj-hero-fallback__overlay {
  background: linear-gradient(270deg,
    rgba(0, 0, 0, var(--dj-hero-veil, 0.55)) 0%,
    rgba(0, 0, 0, calc(var(--dj-hero-veil, 0.55) * 0.42)) 30%,
    rgba(0, 0, 0, 0) 58%);
}


/* -----------------------------------------------------------
   2. RÓTULO EN IMAGEN (PNG / WebP transparente)
   ----------------------------------------------------------- */
.dj-hero-fallback__lockup {
  display: block;
  width: auto;
  max-width: min(560px, 82%);
  height: auto;
  max-height: 46vh;
  margin-bottom: 20px;
  /* Sombra propia del recorte, no de una caja: sigue el contorno
     del PNG y por eso no se ve un rectángulo oscuro detrás. */
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
}


@media (max-width: 768px) {
  .dj-hero-fallback__lockup { max-width: 88%; max-height: 34vh; margin-bottom: 14px; }
}


/* -----------------------------------------------------------
   3. ANIMACIONES DE ENTRADA
   La duración la pone la plantilla en --dj-anim-dur, desde el
   panel. Solo se dispara en el slide activo, así que al cambiar
   de slide la animación se repite: es lo que da vida al slider.
   ----------------------------------------------------------- */
.dj-hero-anim { --dj-anim-dur: 900ms; }

@media (prefers-reduced-motion: reduce) {
  .dj-hero-fallback__slide.is-active .dj-hero-anim { animation: none !important; }
}


/* -----------------------------------------------------------
   4. IMÁGENES ENCIMA DEL FONDO (hasta 3 por slide)
   Van por debajo del texto y por encima de la foto y del velo.
   ----------------------------------------------------------- */
.dj-hero-layer {
  position: absolute;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
  will-change: transform;
}

/* --- Tamaños --- */
.dj-hero-layer--sm { max-width: 16%;  max-height: 30%; }
.dj-hero-layer--md { max-width: 26%;  max-height: 52%; }
.dj-hero-layer--lg { max-width: 38%;  max-height: 74%; }
.dj-hero-layer--xl { max-width: 50%;  max-height: 92%; }

/* --- Posiciones --- */
.dj-hero-layer--left         { left: 4%;  top: 50%; transform: translateY(-50%); }
.dj-hero-layer--right        { right: 4%; top: 50%; transform: translateY(-50%); }
.dj-hero-layer--center       { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.dj-hero-layer--top-left     { left: 4%;  top: 6%; }
.dj-hero-layer--top-right    { right: 4%; top: 6%; }
.dj-hero-layer--bottom-left  { left: 4%;  bottom: 6%; }
.dj-hero-layer--bottom-right { right: 4%; bottom: 6%; }

/**
 * ⚠️ Con el parallax activo el JavaScript escribe su propio
 * `transform` en la capa, que pisa el translate de centrado de
 * arriba. Por eso las posiciones que necesitaban centrarse pasan
 * a hacerlo con márgenes negativos, que el transform no toca.
 */
.dj-has-parallax .dj-hero-layer--left,
.dj-has-parallax .dj-hero-layer--right {
  top: 50%;
  transform: none;
  translate: 0 -50%;
}
.dj-has-parallax .dj-hero-layer--center {
  left: 50%;
  top: 50%;
  transform: none;
  translate: -50% -50%;
}

/* --- Entrada de las capas: escalonada, detrás del texto --- */
.dj-hero-fallback__slide.is-active .dj-hero-layer {
  animation: dj-h-layer 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dj-hero-fallback__slide.is-active .dj-hero-layer:nth-of-type(2) { animation-delay: 0.12s; }
.dj-hero-fallback__slide.is-active .dj-hero-layer:nth-of-type(3) { animation-delay: 0.24s; }

@keyframes dj-h-layer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Celular: más pequeñas y solo las dos primeras --- */
@media (max-width: 768px) {
  .dj-hero-layer--sm { max-width: 24%; }
  .dj-hero-layer--md { max-width: 38%; }
  .dj-hero-layer--lg { max-width: 52%; }
  .dj-hero-layer--xl { max-width: 66%; }
  /* La tercera capa sobra en una pantalla estrecha: ensucia el texto */
  .dj-hero-layer:nth-of-type(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dj-hero-fallback__slide.is-active .dj-hero-layer { animation: none !important; }
}


/* ===========================================================
   v3.0 — HERO POR DISPOSITIVO
   -----------------------------------------------------------
   Cada slide sale con TRES clases de posición y TRES de
   animación (una por dispositivo) y tres duraciones en
   variables. Aquí se decide cuál manda según el ancho.

   Se resuelve en CSS y no en PHP a propósito: el visitante
   puede girar el móvil o cambiar el tamaño de la ventana, y
   con media queries responde al momento, sin recargar.

   Cortes:  celular ≤640 · tablet 641–1024 · computadora ≥1025
   =========================================================== */

/* COMPUTADORA — más de 1024 px */
@media (min-width: 1025px) {
  .dj-hero-anim { --dj-anim-dur: var(--dj-dur-d, 900ms); }

  .dj-hero-fallback__content.dj-al-d-left   { margin-left: 0;    margin-right: auto; text-align: left; }
  .dj-hero-fallback__content.dj-al-d-center { margin-left: auto; margin-right: auto; text-align: center; }
  .dj-hero-fallback__content.dj-al-d-right  { margin-left: auto; margin-right: 0;    text-align: right; }

  .dj-al-d-center .dj-hero-fallback__lockup { margin-left: auto; margin-right: auto; }
  .dj-al-d-right  .dj-hero-fallback__lockup { margin-left: auto; margin-right: 0; }
  .dj-al-d-center .dj-btn,
  .dj-al-d-right  .dj-btn { display: inline-flex; }
  .dj-hero-fallback__slide.is-active .dj-an-d-none { animation: none !important; }
  .dj-hero-fallback__slide.is-active .dj-an-d-fade { animation: dj-h-fade var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-d-up { animation: dj-h-up var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-d-down { animation: dj-h-down var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-d-left { animation: dj-h-left var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-d-right { animation: dj-h-right var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-d-zoom { animation: dj-h-zoom var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-d-blur { animation: dj-h-blur var(--dj-anim-dur) ease both; }
}

/* TABLET — de 641 a 1024 px */
@media (min-width: 641px) and (max-width: 1024px) {
  .dj-hero-anim { --dj-anim-dur: var(--dj-dur-t, 900ms); }

  .dj-hero-fallback__content.dj-al-t-left   { margin-left: 0;    margin-right: auto; text-align: left; }
  .dj-hero-fallback__content.dj-al-t-center { margin-left: auto; margin-right: auto; text-align: center; }
  .dj-hero-fallback__content.dj-al-t-right  { margin-left: auto; margin-right: 0;    text-align: right; }

  .dj-al-t-center .dj-hero-fallback__lockup { margin-left: auto; margin-right: auto; }
  .dj-al-t-right  .dj-hero-fallback__lockup { margin-left: auto; margin-right: 0; }
  .dj-al-t-center .dj-btn,
  .dj-al-t-right  .dj-btn { display: inline-flex; }
  .dj-hero-fallback__slide.is-active .dj-an-t-none { animation: none !important; }
  .dj-hero-fallback__slide.is-active .dj-an-t-fade { animation: dj-h-fade var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-t-up { animation: dj-h-up var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-t-down { animation: dj-h-down var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-t-left { animation: dj-h-left var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-t-right { animation: dj-h-right var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-t-zoom { animation: dj-h-zoom var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-t-blur { animation: dj-h-blur var(--dj-anim-dur) ease both; }
}

/* CELULAR — hasta 640 px */
@media (max-width: 640px) {
  .dj-hero-anim { --dj-anim-dur: var(--dj-dur-m, 900ms); }

  .dj-hero-fallback__content.dj-al-m-left   { margin-left: 0;    margin-right: auto; text-align: left; }
  .dj-hero-fallback__content.dj-al-m-center { margin-left: auto; margin-right: auto; text-align: center; }
  .dj-hero-fallback__content.dj-al-m-right  { margin-left: auto; margin-right: 0;    text-align: right; }

  .dj-al-m-center .dj-hero-fallback__lockup { margin-left: auto; margin-right: auto; }
  .dj-al-m-right  .dj-hero-fallback__lockup { margin-left: auto; margin-right: 0; }
  .dj-al-m-center .dj-btn,
  .dj-al-m-right  .dj-btn { display: inline-flex; }
  .dj-hero-fallback__slide.is-active .dj-an-m-none { animation: none !important; }
  .dj-hero-fallback__slide.is-active .dj-an-m-fade { animation: dj-h-fade var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-m-up { animation: dj-h-up var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-m-down { animation: dj-h-down var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-m-left { animation: dj-h-left var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-m-right { animation: dj-h-right var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-m-zoom { animation: dj-h-zoom var(--dj-anim-dur) cubic-bezier(0.16,1,0.3,1) both; }
  .dj-hero-fallback__slide.is-active .dj-an-m-blur { animation: dj-h-blur var(--dj-anim-dur) ease both; }
}


/* --- Visibilidad de las imágenes de encima, por dispositivo --- */
@media (min-width: 1025px) {
  .dj-hero-layer--show-tab-mob,
  .dj-hero-layer--show-mob { display: none; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .dj-hero-layer--show-desk,
  .dj-hero-layer--show-mob { display: none; }
}
@media (max-width: 640px) {
  .dj-hero-layer--show-desk,
  .dj-hero-layer--show-desk-tab { display: none; }
}

/* Ya no hace falta esconder la tercera a la fuerza: ahora se
   controla desde el panel, capa por capa. */
@media (max-width: 768px) {
  .dj-hero-layer:nth-of-type(3) { display: revert; }
}


/* ===========================================================
   v3.4 — EL HERO, LIMPIO: SOLO UNA SOMBRA ABAJO
   -----------------------------------------------------------
   El hero lo maneja Slider Revolution: sus efectos, sus capas y sus
   transiciones. Todo lo que el tema le pintaba encima competía con
   eso y se veía raro — dos "capas de humo" peleando por la misma
   foto.

   Aquí se apaga TODO lo que el tema le ponía encima:
     · sombras de caja del contenedor y del módulo de Revolution
     · la sombra interior de "ventana" (las bandas de arriba y abajo)
     · el velo negro sobre la foto

   Y queda UNA sola cosa: un degradado muy suave en el borde de abajo.
   No es decoración: es lo que hace que el ojo lea que el hero está al
   fondo y que la página empieza por encima de él. 14% de negro en
   56 px — se siente, no se ve.
   =========================================================== */

.dj-hero,
.dj-hero__rs-wrapper,
.dj-hero-fallback,
/* Contenedores de Slider Revolution (nombres de las versiones 5 y 6) */
.dj-hero .rev_slider_wrapper,
.dj-hero .rev_slider,
.dj-hero .tp-fullwidth-forcer,
.dj-hero rs-module-wrap,
.dj-hero rs-module,
.dj-hero rs-slides {
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* La sombra interior de "ventana" (motion.css) no entra en el hero:
   ese efecto es para las bandas con foto, no para el slider. */
.dj-hero.dj-parallax-host::after,
.dj-hero.dj-window::after,
.dj-hero.dj-layer-shadow::before {
  display: none !important;
}

/* El velo negro sobre la foto, fuera. La legibilidad del texto se
   resuelve en el propio slider (capas, cajas, sombra de texto), que
   es donde toca. */
.dj-hero .dj-hero-fallback__overlay {
  display: none !important;
}

/* --- La ÚNICA sombra que queda: el filete de abajo --- */
.dj-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  z-index: 6;              /* por encima del slider, debajo del header */
  pointer-events: none;    /* jamás debe robar un clic al slider */
  background: linear-gradient(0deg,
    rgba(0, 0, 0, 0.14) 0%,
    rgba(0, 0, 0, 0.05) 42%,
    rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 640px) {
  /* En celular, proporcional: menos alto de pantalla, menos sombra */
  .dj-hero::after { height: 34px; }
}

/* Si alguien no quiere ni eso: basta con añadir la clase
   dj-hero--sin-sombra al <section> del hero. */
.dj-hero--sin-sombra::after { display: none !important; }


/* ===========================================================
   v3.5 — ALTO DEL HERO CON TOPE (Personalizar > Hero)
   -----------------------------------------------------------
   El problema: un slider de 900 px de alto en un portátil (que suele
   tener 750-800 px de pantalla útil) ocupa TODA la primera pantalla.
   El visitante entra a una tienda y no ve ni un producto hasta bajar.
   En celular es peor todavía.

   Estas reglas solo actúan si has puesto un número en
   Personalizar > Deportes Jimmy > Hero. Con 0 no se toca nada.

   Cómo recorta: el slider se queda de su alto real y se ve por su
   CENTRO — se corta lo mismo por arriba que por abajo. Es lo que
   mejor funciona con un slide centrado.

   ⚠️ Esto es un TOPE, no la solución de fondo. Con Slider Revolution
   lo suyo es bajar el alto en el propio plugin:
   Slider Revolution > tu slider > Layout > Slider Height
   (y el Grid Size al mismo alto). Así el plugin recoloca sus capas
   y no se corta nada. El tope de aquí es la red de seguridad.
   =========================================================== */

.dj-hero--alto-fijo .dj-hero__rs-wrapper,
.dj-hero--alto-fijo .dj-hero-fallback {
  height: var(--dj-hero-h, var(--dj-hero-h-pc)) !important;
  min-height: 0 !important;
  max-height: var(--dj-hero-h, var(--dj-hero-h-pc)) !important;
  overflow: hidden;
}

/* El slider, centrado dentro del hueco: se recorta por igual arriba
   y abajo en vez de comerse todo el final del slide. */
.dj-hero--alto-fijo .dj-hero__rs-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dj-hero--alto-fijo .dj-hero__rs-wrapper > * {
  width: 100%;
  flex: 0 0 auto;
}

/* El hero propio del tema no se recorta: es flexible y se adapta
   al alto que le pongas. */
.dj-hero--alto-fijo .dj-hero-fallback__slide {
  height: 100%;
}

/* --- Los tres tramos --- */
@media (max-width: 1024px) {
  .dj-hero--alto-fijo {
    --dj-hero-h: var(--dj-hero-h-tablet, var(--dj-hero-h-pc));
  }
}
@media (max-width: 640px) {
  .dj-hero--alto-fijo {
    --dj-hero-h: var(--dj-hero-h-movil, var(--dj-hero-h-tablet, var(--dj-hero-h-pc)));
  }
}


/* ===========================================================
   v3.6 — NI UN HUECO NEGRO DEBAJO DEL SLIDER
   -----------------------------------------------------------
   Dos cosas distintas pueden dejar negro entre el slider y la
   cinta de mensajes, y aquí se tapan las dos:

   1) El hueco lo dejaba el TEMA (la reserva de 400 px de arriba).
      Resuelto: reserva proporcional + hero.js la anula al cargar.

   2) El hueco está DENTRO del módulo de Revolution: el módulo
      mide más que la foto de fondo porque el ajuste de la imagen
      no es "Cover". Entonces la foto ocupa una franja y el resto
      es el color de fondo del módulo. Eso se arregla aquí abajo:
      la foto del slide se estira SIEMPRE a cubrir todo el módulo,
      recortando lo que sobre, que es lo que uno espera de un hero.

   Los nombres de etiqueta cambian entre versiones: rs-sbg y
   rs-sbg-px son de la 6.x; .rev-slidebg y .tp-bgimg son de la 5.x.
   Están los cuatro para que valga en cualquiera.
   =========================================================== */
.dj-hero rs-sbg,
.dj-hero rs-sbg-px,
.dj-hero .rev-slidebg,
.dj-hero .tp-bgimg {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.dj-hero rs-sbg img,
.dj-hero rs-sbg-px img,
.dj-hero .rev-slidebg img,
.dj-hero .tp-bgimg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* El módulo, siempre de borde a borde: si el tema o el plugin de
   página le mete un ancho máximo, el fondo dejaría franjas. */
.dj-hero rs-module-wrap,
.dj-hero .rev_slider_wrapper {
  max-width: 100% !important;
}

/* Nada de espacio muerto por el hueco de línea que dejan los
   elementos en línea dentro de la sección. */
.dj-hero__rs-wrapper > * { vertical-align: top; }
.dj-hero__rs-wrapper { font-size: 0; line-height: 0; }
.dj-hero__rs-wrapper rs-module-wrap,
.dj-hero__rs-wrapper .rev_slider_wrapper { font-size: 1rem; line-height: normal; }