/**
 * DEPORTES JIMMY — Capa "VIVA" (v2.3)
 * -------------------------------------------------------------
 * Movimiento discreto y caro, no aparatoso:
 *   1. Títulos que pasan de borrosos a nítidos (sin saltos)
 *   2. Tarjetas que entran en cascada al bajar
 *   3. Botones magnéticos
 *   4. Tarjetas que reaccionan al mouse
 *   5. Barra de progreso de lectura
 *   6. Cinta de texto (apagada por defecto; se enciende en Personalizar)
 *
 * Sin librerías externas. Si el visitante pidió "reducir movimiento"
 * en su sistema, TODO se muestra quieto y completo.
 */

/* ===========================================================
   0. CURVAS DE MOVIMIENTO COMPARTIDAS
   =========================================================== */
:root {
  --dj-ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* frena suave, "caro" */
  --dj-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dj-dur: 0.9s;
}


/* ===========================================================
   1. TÍTULOS QUE SE ENFOCAN (estilo Fladient)
   El texto NO salta ni se desplaza. Cada palabra pasa de
   BORROSA a NÍTIDA, de izquierda a derecha, como si la página
   estuviera ajustando el foco. Es el efecto más elegante que
   existe: se nota que está vivo, pero no distrae de la venta.
   =========================================================== */
.dj-word {
  display: inline-block;
  /* Sin overflow ni máscaras: nada que recorte ni descoloque */
}

.dj-word__i {
  display: inline-block;
  opacity: 0;
  filter: blur(9px);
  transition:
    opacity 0.62s ease,
    filter 0.62s ease;
  transition-delay: calc(var(--dj-i, 0) * 32ms);
  will-change: opacity, filter;
}

.dj-split.is-in .dj-word__i {
  opacity: 1;
  filter: blur(0);
}

/* Variante rápida para textos largos (párrafos, descripciones) */
.dj-split[data-dj-split="fast"] .dj-word__i {
  transition-delay: calc(var(--dj-i, 0) * 14ms);
  transition-duration: 0.5s;
  filter: blur(6px);
}


/* ===========================================================
   2. FOTOS CON CORTINA + ZOOM
   La imagen se descubre de abajo hacia arriba mientras el zoom
   se relaja. Es el efecto que hace que una foto "entre" en vez
   de simplemente estar ahí.
   =========================================================== */
/**
 * SEGURIDAD ANTE TODO: la foto solo se esconde si el JavaScript
 * llegó a ejecutarse y añadió .is-armed. Si el JS falla, la clase
 * nunca se pone y la imagen se ve normal desde el primer momento.
 * Es imposible que una foto se quede invisible.
 */
.dj-curtain {
  position: relative;
  overflow: hidden;
}

.dj-curtain.is-armed {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.15s var(--dj-ease-out);
  will-change: clip-path;
}

.dj-curtain.is-armed.is-in {
  clip-path: inset(0 0 0 0);
}

/* Lo de dentro (img o div con background) arranca ampliado */
.dj-curtain.is-armed > img,
.dj-curtain.is-armed > .dj-curtain__media,
.dj-curtain.is-armed picture > img {
  transform: scale(1.22);
  transition: transform 1.6s var(--dj-ease-out);
  will-change: transform;
}

.dj-curtain.is-armed.is-in > img,
.dj-curtain.is-armed.is-in > .dj-curtain__media,
.dj-curtain.is-armed.is-in picture > img {
  transform: scale(1);
}

/* Destello que barre la foto justo cuando termina de descubrirse */
.dj-curtain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 65%);
  transform: translateX(-100%);
}

.dj-curtain.is-armed.is-in::after {
  animation: dj-sheen 1.1s ease 0.55s 1;
}

@keyframes dj-sheen {
  0%   { opacity: 0; transform: translateX(-100%); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}


/* ===========================================================
   3. CINTA DE TEXTO EN MOVIMIENTO (MARQUEE)
   =========================================================== */
/* v3.3 — La cinta pasó de pancarta a filete.
 * Antes: 22 px de aire + letras de hasta 2.7rem. Ocupaba lo mismo que
 * media sección, gritaba más que los productos y en celular se comía
 * un tercio de la pantalla. Ahora es una franja fina que acompaña sin
 * competir: menos alto, letra más pequeña y más espaciada. */
.dj-marquee {
  position: relative;
  overflow: hidden;
  padding: 11px 0;
  background: var(--dj-black-soft, #111);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  user-select: none;
}

/* Variante roja de marca */
.dj-marquee--red {
  background: linear-gradient(90deg, #C40000 0%, #FF0000 50%, #C40000 100%);
  border-color: rgba(0, 0, 0, 0.12);
}

/* Variante clara, para separar dos secciones blancas sin ensuciar */
.dj-marquee--light {
  background: var(--dj-gray-light, #F4F4F5);
  border-color: rgba(0, 0, 0, 0.06);
}

.dj-marquee__track {
  display: flex;
  width: max-content;
  animation: dj-marquee-run 34s linear infinite;
}

.dj-marquee:hover .dj-marquee__track {
  animation-play-state: paused;
}

/* Sentido inverso, por si quieres dos cintas cruzadas */
.dj-marquee--reverse .dj-marquee__track {
  animation-direction: reverse;
}

.dj-marquee__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.dj-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  color: #fff;
  font-family: var(--dj-font-display), sans-serif;
  /* Fina y con aire entre letras: se lee como un filete de marca,
     no como un titular. */
  font-size: clamp(0.82rem, 1.5vw, 1.15rem);
  line-height: 1;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dj-marquee--light .dj-marquee__item {
  color: var(--dj-black, #000);
}

/* Palabras alternas en contorno: da ritmo visual a la cinta */
.dj-marquee__item:nth-child(even) {
  color: transparent;
  /* 0.8px: con 1.5px sobre una letra pequeña el contorno se cerraba
     y la palabra se veía emborronada, no hueca. */
  -webkit-text-stroke: 0.8px rgba(255, 255, 255, 0.6);
}

.dj-marquee--light .dj-marquee__item:nth-child(even) {
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.42);
}

.dj-marquee__dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dj-red, #FF0000);
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.75);
}

.dj-marquee--red .dj-marquee__dot {
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

.dj-marquee--light .dj-marquee__dot {
  box-shadow: none;
}

@keyframes dj-marquee-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Bordes difuminados: la cinta no "empieza" ni "acaba", fluye */
.dj-marquee::before,
.dj-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.dj-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--dj-black-soft, #111), transparent);
}
.dj-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--dj-black-soft, #111), transparent);
}
.dj-marquee--red::before { background: linear-gradient(90deg, #C40000, transparent); }
.dj-marquee--red::after  { background: linear-gradient(270deg, #C40000, transparent); }
.dj-marquee--light::before { background: linear-gradient(90deg, var(--dj-gray-light, #F4F4F5), transparent); }
.dj-marquee--light::after  { background: linear-gradient(270deg, var(--dj-gray-light, #F4F4F5), transparent); }

@media (max-width: 768px) {
  .dj-marquee { padding: 9px 0; }
  .dj-marquee::before,
  .dj-marquee::after { width: 34px; }
  /* Más lenta que antes: con la letra pequeña, a 22s el texto pasaba
     tan rápido que no daba tiempo a leerlo. */
  .dj-marquee__track { animation-duration: 26s; }
  .dj-marquee__item {
    font-size: 0.78rem;
    letter-spacing: 1.8px;
    gap: 12px;
    padding: 0 12px;
  }
  .dj-marquee__dot { width: 4px; height: 4px; }
}


/* ===========================================================
   4. BOTONES MAGNÉTICOS
   El botón se inclina hacia el cursor cuando pasas cerca.
   =========================================================== */
.dj-magnetic {
  position: relative;
  transition: transform 0.45s var(--dj-ease-out),
              box-shadow 0.35s ease;
  will-change: transform;
}

.dj-magnetic__label {
  display: inline-block;
  transition: transform 0.45s var(--dj-ease-out);
  pointer-events: none;
}

/* Relleno que crece desde abajo al pasar el mouse */
.dj-fill-up {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.dj-fill-up::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dj-red, #FF0000);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.5s var(--dj-ease-out);
}
.dj-fill-up:hover::before,
.dj-fill-up:focus-visible::before {
  transform: translate3d(0, 0, 0);
}
.dj-fill-up:hover,
.dj-fill-up:focus-visible {
  color: #fff;
  border-color: var(--dj-red, #FF0000);
}


/* ===========================================================
   5. TARJETAS QUE REACCIONAN
   La foto hace zoom dentro del marco, la tarjeta se levanta y
   un filo rojo se dibuja por abajo.
   =========================================================== */
.dj-card-live {
  position: relative;
  transition: transform 0.5s var(--dj-ease-out),
              box-shadow 0.5s var(--dj-ease-out);
  will-change: transform;
}

.dj-card-live__media,
.dj-card-live .dj-card-media {
  overflow: hidden;
}

.dj-card-live img {
  transition: transform 0.8s var(--dj-ease-out),
              filter 0.5s ease;
}

@media (hover: hover) {
  .dj-card-live:hover {
    transform: translate3d(0, -8px, 0);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
  }
  .dj-card-live:hover img {
    transform: scale(1.07);
  }
}

/* Filo rojo que se dibuja de izquierda a derecha */
.dj-card-live::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--dj-red, #FF0000);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--dj-ease-out);
  pointer-events: none;
}
@media (hover: hover) {
  .dj-card-live:hover::after { transform: scaleX(1); }
}


/* ===========================================================
   5-bis. TARJETAS QUE ENTRAN EN CASCADA  ← lo del video
   Cada tarjeta aparece un pelín después que la anterior, subiendo
   apenas 24 px. Nada de rotaciones ni perspectivas: solo aparece.
   Igual que en la referencia.

   SEGURIDAD: solo se esconde si el JS puso .is-armed. Sin JS,
   las tarjetas se ven desde el primer momento.
   =========================================================== */
.dj-rise.is-armed {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.66s var(--dj-ease-out),
    transform 0.66s var(--dj-ease-out);
  transition-delay: calc(var(--dj-i, 0) * 85ms);
  will-change: opacity, transform;
}

.dj-rise.is-armed.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ===========================================================
   6. CONTADORES
   =========================================================== */
.dj-count {
  font-variant-numeric: tabular-nums;
}


/* ===========================================================
   7. BARRA DE PROGRESO DE LECTURA
   Hilo rojo finísimo arriba del todo. Refuerza la sensación de
   que la página responde a lo que haces.
   =========================================================== */
.dj-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 99999;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--dj-red, #FF0000), #ff6a6a);
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
}


/* ===========================================================
   8. LÍNEAS QUE SE DIBUJAN
   Para los filetes bajo los títulos de sección.
   =========================================================== */
.dj-draw {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--dj-ease-out) 0.2s;
}
.dj-draw.is-in { transform: scaleX(1); }

/* Variante vertical: para la barrita roja que va antes de cada título */
.dj-draw--y {
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.7s var(--dj-ease-out);
}
.dj-draw--y.is-in { transform: scaleY(1); }


/* ===========================================================
   9. ACCESIBILIDAD Y RED DE SEGURIDAD
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  .dj-word__i,
  .dj-rise,
  .dj-rise.is-armed,
  .dj-curtain,
  .dj-curtain > img,
  .dj-curtain > .dj-curtain__media,
  .dj-draw {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .dj-marquee__track { animation: none !important; }
  .dj-curtain::after { animation: none !important; }
  .dj-progress { display: none; }
}

/**
 * Si el JavaScript falla (un plugin roto, un bloqueador, la red),
 * a los 4 segundos TODO aparece igual. Ni un título puede quedarse
 * invisible por culpa de una animación.
 */
/* Las palabras solo existen si el JS las creó; aun así, si el
   observador nunca llegara a dispararse, a los 5 segundos el
   título aparece igual. */
.dj-split .dj-word__i { animation: dj-alive-failsafe 0.01s linear 5s forwards; }
.dj-split.is-in .dj-word__i { animation: none; }

@keyframes dj-alive-failsafe {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* Las fotos con cortina se protegen solas con .is-armed (arriba):
   sin JS no se esconden nunca. */
.no-js .dj-word__i { opacity: 1; filter: none; transform: none; }