/* ==========================================================================
   DYRESEL · PLUGIN 2 — GALERÍA DE PRODUCTO CON SELECTOR  (era "sección 5")
   --------------------------------------------------------------------------
   Prefijo propio  .dysp-*  /  #dysp-*  /  --dysp-*  ("DYresel Slider Producto").
   Autónomo: no depende del CSS del bloque principal. Lo único compartido es
   la custom property  --dyh-header-h, con fallback 0px.

   6 slides de producto (New Cosmos / Fenix L3600 / AURA L200, cada uno con su
   variante de color). Fijada y gobernada por el scroll: mientras el wrapper
   está en su rango de pin, el scroll avanza de slide en slide en pasos
   discretos; cuando se ha mostrado el último, el pin se suelta solo y el
   scroll continúa a la siguiente sección — mismo mecanismo sticky-dentro-de-
   wrapper-alto que el resto del documento, sin pin:true de GSAP.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Neutralizar los contenedores de Enfold (redundante —e inofensivo— si el
   bloque principal ya está en la página; necesario si el plugin va solo).
   -------------------------------------------------------------------------- */

.container_wrap:has(.dysp-wrap),
.avia-section:has(.dysp-wrap) {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

.avia-section:has(.dysp-wrap) > .container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.avia-section:has(.dysp-wrap) .content,
.avia-section:has(.dysp-wrap) .template-page,
.avia-section:has(.dysp-wrap) .post-entry,
.avia-section:has(.dysp-wrap) .entry-content-wrapper,
.avia-section:has(.dysp-wrap) .flex_column,
.avia-section:has(.dysp-wrap) .avia_codeblock {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

.dysp-wrap,
.dysp-wrap * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dysp-wrap *:focus,
.dysp-wrap *:focus-visible { outline: none; }


/* ==========================================================================
   ESTRUCTURA
   ========================================================================== */

/* --------------------------------------------------------------------------
   EL ALTO DE LA BANDA
   --------------------------------------------------------------------------
   Las 6 fotos de producto son 2880x1280 -> ratio 2.25. Antes la sección tenía
   min-height y max-height clavados a 640px, y eso solo cuadra a 1440px de
   ancho (1440/640 = 2.25 justo). A cualquier otro ancho, cover recortaba: a
   1280 se comía los laterales; a 1920, 213px por arriba y por abajo. Y encima
   dejaba blanco al descubierto en cuanto el viewport pasaba de 640+header.

   Ahora la banda llena el viewport, y el único freno es cuánto se puede
   recortar de los lados antes de tocar el rótulo del producto. Medido foto a
   foto (detección de bordes sobre los 6 originales), el contenido más ancho
   —"NEW COSMOS SPL 2030"— deja 16.1% de margen vacío por su lado más justo.
   Con 15% el rótulo entra siempre y sobra un pelo de aire.

     recorte por lado <= 15%  ->  ancho visible >= 70% de la foto
     ratio mínimo de la caja  =  2.25 x 0.70  =  1.575

   De ahí --dysp-ratio-min. La banda mide  min(100dvh, 100vw / 1.575):

     1440 x 820   -> 820px, viewport entero, 11% de recorte por lado
     1920 x 1080  -> 1080px, viewport entero
     1440 x 1000  -> 914px, con 43px de sobrante arriba y abajo
     2560 x 1440  -> 1440px, viewport entero

   O sea que en la práctica totalidad de pantallas la foto va a sangre y no
   hay franjas. Cuando las hay, salen del color plano de la propia foto
   (--dysp-bg, que actualiza el JS), simétricas: leen como encuadre.

   Si algún día entra una foto con el rótulo más pegado al borde, lo que se
   toca es este número, no el alto.
   -------------------------------------------------------------------------- */

.dysp-wrap {
  position: relative;
  width: 100%;
  /* 100vh (la sección visible) + el recorrido por transición de slide:
        100 + paso x (nº de slides - 1)
     Con 6 slides y un paso de 80vh -> 500vh. El shortcode lo calcula solo y lo
     escribe inline como --dysp-wrap-h; este 500vh es el fallback si el markup
     se pega a mano. */
  height: var(--dysp-wrap-h, 500vh);
  --dysp-ratio-min: 1.575;
  /* Respaldo por si el sticky se despega un frame antes de tiempo al final de
     su rango: lo que asome es el color del producto, no un flash blanco. El
     shortcode lo escribe inline con el color de la primera slide y el JS lo va
     actualizando junto con el de la sección. */
  background: #2b332c;
}

.dysp {
  position: sticky;
  /* top:0 y no var(--dyh-header-h): la sección ya no reserva hueco para el
     header, deja que flote sobre la foto (el scrim superior le da contraste
     de sobra). Ese hueco era una franja a la vista en cuanto el header
     cambiaba de alto — y este sitio lleva av_header_shrinking, así que encoge
     de 90px a 42px al scrollear mientras --dyh-header-h, que solo se recalcula
     en load y resize, seguía diciendo 90. */
  top: 0;
  width: 100%;
  height: 100vh;
  /* Mismo ajuste de iOS Safari que el resto: 100dvh sigue el viewport real,
     no el "grande" que usa 100vh. */
  height: 100dvh;
  overflow: hidden;
  /* Centra la banda cuando no llena el viewport entero. */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2b332c;
  transition: background-color 0.4s ease;
}

/* La banda de imagen. Ver el bloque de comentario de arriba para el porqué
   del ratio. */
.dysp__stage {
  position: relative;
  width: 100%;
  height: min(100dvh, calc(100vw / var(--dysp-ratio-min, 1.575)));
  overflow: hidden;
}

.dysp__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.dysp__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.dysp__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 30%),
    linear-gradient(0deg,   rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 26%);
  pointer-events: none;
}


/* ==========================================================================
   SELECTOR (etiqueta + miniaturas) + CTA
   ========================================================================== */

.dysp__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  /* Padding izquierdo más corto que el derecho: el scroll-hint flotante está
     centrado horizontalmente y a ciertos anchos se solapaba con las
     miniaturas; con menos hueco a la izquierda el bloque queda más cerca del
     borde y deja libre la zona central. */
  padding: 16px clamp(16px, 8vw, 140px) 20px clamp(16px, 3vw, 40px);
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
}

/* Hermano de .dysp__nav en el HTML, no hijo — mismo motivo que el contador de
   la galería de vídeo: así se posiciona respecto a .dysp y puede "escapar" a
   otra esquina en responsive. El href lo actualiza el JS con el de la slide
   activa. */
.dysp__cta {
  position: absolute;
  right: clamp(16px, 8vw, 140px);
  bottom: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Componente «btn / Primary / L / Negative» del diseño (Figma 5381:9960):
     fondo claro sólido y texto oscuro, no el botón de contorno blanco que
     había aquí. Es el mismo botón que usa la galería de vídeo, así que las dos
     galerías quedan por fin iguales. */
  padding: 16px 32px;
  border-radius: 32px;
  border: none;
  background: #d3e2e3;   /* token fill/light */
  font-family: "Maven Pro", sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1vw, 13px);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.25s ease;
}

/* El color del texto va en un selector aparte y más específico (dos clases) a
   propósito: Enfold pinta TODOS los enlaces con el color primario del theme
   mediante `.main_color a`, que con una sola clase nuestra gana y dejaba el
   botón del color corporativo del theme en vez del suyo. */
.dysp .dysp__cta {
  color: #202e33;   /* token campaign/dark */
}

.dysp .dysp__cta:hover {
  background: #ffffff;
  color: #202e33;
  transform: translateY(-2px);
}

.dysp__thumbs {
  /* 48px de alto en escritorio (diseño original). Sigue escalando en móvil. */
  --dysp-thumb-h: clamp(40px, 9vw, 48px);
  display: flex;
  gap: clamp(6px, 1.5vw, 10px);
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dysp__thumbs::-webkit-scrollbar { display: none; }

.dysp__thumb {
  position: relative;
  height: var(--dysp-thumb-h);
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #10181a;
  padding: 0;
  cursor: pointer;
  opacity: 0.65;
  scroll-snap-align: start;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}

.dysp__thumb:hover { opacity: 1; }

.dysp__thumb.dysp-is-active {
  border-color: rgba(255, 255, 255, 0.9);
  opacity: 1;
}

.dysp__thumb--image { aspect-ratio: 3 / 2; }

.dysp__thumb--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* No es una miniatura clicable (es un <div>, no un <button>): solo indica el
   nombre de la slide activa. Se sobreescriben aquí el cursor y la opacity de
   .dysp__thumb, pensados para las miniaturas de imagen, que sí son
   interactivas. */
.dysp__label {
  width: auto;
  min-width: clamp(120px, 16vw, 180px);
  padding: 0 16px;
  display: flex;
  align-items: center;
  background: rgba(20, 24, 20, 0.85);
  font-family: "Maven Pro", sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 1.3vw, 13px);
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  opacity: 1;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Por debajo de ~1024px, "Ver producto" alineado con las miniaturas termina
   bajo el badge fijo de reCAPTCHA (esquina inferior derecha), y las
   miniaturas no tienen sitio: a 414px de ancho el contenedor medía ~190px,
   apenas la etiqueta del nombre, con las imágenes fuera de vista y sin
   ningún indicio de que se podían desplazar. */
@media (max-width: 1024px) {
  .dysp__nav {
    /* padding-left mayor que el derecho: deja hueco al badge de "gestionar
       cookies" de Enfold (fixed, esquina inferior izquierda, siempre presente
       en todo el sitio). */
    padding-left: 40px;
    padding-right: 24px;
  }

  .dysp__thumbs { width: 100%; }

  /* La etiqueta le quita ancho a las miniaturas en móvil (a 414px ya medía
     ~180px ella sola). Se oculta y las miniaturas usan todo el ancho. */
  .dysp__label { display: none; }

  .dysp__cta {
    /* El header flota sobre la banda (ver .dysp), así que aquí hay que
       apartarse de él a mano. Un desfase de unos píxeles en --dyh-header-h no
       se nota en un botón; en el borde de la sección sí se notaba, y por eso
       allí ya no se usa. */
    top: calc(var(--dyh-header-h, 0px) + 16px);
    right: 20px;
    bottom: auto;
    padding: 10px 22px;
  }

  /* En vertical el ratio mínimo de la banda no aplica: recortar un 15% de los
     lados de una foto 2.25 metida en una pantalla de 390x844 seguiría dejando
     una tira estrecha en mitad de la nada. La banda pasa a ocupar la pantalla
     y la foto se muestra entera con contain, que es lo que ya se hacía; el
     color plano de cada foto (fondo de .dysp) rellena arriba y abajo. */
  .dysp__stage { height: 100%; }
  .dysp__image { object-fit: contain; }
}