/* ==========================================================================
   DYRESEL · PLUGIN 1 — GALERÍA DE VÍDEO CON SELECTOR  (era "sección 4")
   --------------------------------------------------------------------------
   Prefijo propio  .dysv-*  /  #dysv-*  /  --dysv-*  ("DYresel Slider Video").
   Autónomo: no depende del CSS del bloque principal. Lo único que comparte
   es la custom property  --dyh-header-h  (alto del header fijo de Enfold),
   que trae fallback 0px por si este plugin se usa en otra página sin la home.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Neutralizar los contenedores de Enfold.
   La sección se reconoce por :has(), mirando si contiene el markup de este
   plugin — antes hacía falta escribir una clase a mano en el Color Section, y
   si se olvidaba (o el shortcode se movía de sitio) el plugin dejaba de
   funcionar en cualquier página que no fuese la home.

   Si la galería va en la home junto al bloque principal, estas reglas ya están
   en dyresel-home.css y aquí son redundantes (inofensivas). Se repiten para que
   el plugin funcione por su cuenta en cualquier otra página.
   -------------------------------------------------------------------------- */

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

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

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

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

/* Sin outline azul de foco al hacer click en las miniaturas. */
.dysv-wrap *:focus,
.dysv-wrap *:focus-visible { outline: none; }


/* ==========================================================================
   ESTRUCTURA
   --------------------------------------------------------------------------
   Fijada como el resto del documento (sticky dentro de un wrapper alto, sin
   pin:true de GSAP), pero "en suave": no cambia de contenido con el scroll ni
   bloquea nada. Simplemente aguanta en pantalla 100vh extra antes de soltar
   hacia la siguiente sección, dando un momento de atención al clip sin
   impedir que el usuario siga bajando cuando quiera. Las miniaturas funcionan
   igual esté fijada o no.
   Fondo oscuro (contrasta con el header blanco de Enfold), así que se pega
   por debajo del header en vez de a top:0.
   ========================================================================== */

.dysv-wrap {
  position: relative;
  width: 100%;
  /* 100vh (la sección visible) + el recorrido de permanencia antes de soltar.
     El shortcode escribe --dysv-wrap-h inline a partir del ajuste del panel de
     administración; este 200vh es solo el fallback si el markup se pega a mano. */
  height: var(--dysv-wrap-h, 200vh);
}

.dysv {
  position: sticky;
  top: var(--dyh-header-h, 0px);
  width: 100%;
  height: calc(100vh - var(--dyh-header-h, 0px));
  /* iOS Safari calcula 100vh sobre el viewport "grande" (barra de direcciones
     oculta): sin esto, el caption y las miniaturas —ancladas cerca del borde
     inferior de esta caja— quedaban desplazadas por debajo de lo realmente
     visible. 100dvh sigue el viewport real. */
  height: calc(100dvh - var(--dyh-header-h, 0px));
  min-height: 640px;
  overflow: hidden;
  background: #0a1412;
}

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

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

.dysv__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.28) 38%, rgba(0,0,0,0) 62%),
    linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 30%);
  pointer-events: none;
}


/* ==========================================================================
   CAPTION (titular + subtítulo + CTA)
   ========================================================================== */

.dysv__content {
  /* Anclado por abajo, no centrado por transform: cada titular es un SVG con
     aspect-ratio muy distinto (de 126 a 246 de alto sobre 310-439 de ancho),
     así que centrar por altura propia dejaba el botón a alturas distintas en
     cada slide. Con bottom fijo, el titular crece hacia arriba y el botón
     queda siempre en el mismo sitio. */
  position: absolute;
  left: clamp(24px, 8vw, 140px);
  /* "right" igual que "left" (y no un width calculado aparte) para que el
     slide centrado quede realmente centrado en móvil: con
     "width: min(420px, calc(100% - 48px))" se asumían 24px de margen fijo a
     cada lado, pero "left" usa clamp(24px, 8vw, ...) — a partir de ~300px de
     ancho 8vw ya supera esos 24px, así que el margen izquierdo real crecía
     sin que el derecho lo acompañase y la caja quedaba desplazada. Con
     left/right iguales el navegador calcula el ancho como el hueco exacto
     entre ambos, siempre simétrico; en desktop max-width lo vuelve a topar a
     420px anclado por la izquierda, igual que antes. */
  right: clamp(24px, 8vw, 140px);
  bottom: clamp(150px, 24vh, 230px);
  z-index: 2;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 16px; /* medido en las guías de Figma: 16 entre titular→sub y sub→botón */
}

/* Alineación por slide (data-align en cada miniatura). Solo hace falta tocar
   align-items/text-align: el titular (<img>) ya trae el texto dibujado
   centrado o pegado al borde izquierdo dentro de su propio viewBox según el
   slide, así que no necesita ninguna regla aparte. */
.dysv__content--center { align-items: center;   text-align: center; }
.dysv__content--left   { align-items: flex-start; text-align: left; }

.dysv__heading {
  width: 100%;
  /* Ancho exacto por slide, medido sobre los diseños de Figma: tinieblas
     325px, innovación 414px, conocimiento 334px, personalización 317px. Llega
     como custom property inline desde data-heading-width (ver JS), no como un
     max-width único para los cuatro. En móvil no hace falta valor aparte: el
     contenedor ya es más estrecho que cualquiera de ellos, así que actúan
     solo como techo. */
  max-width: var(--dysv-heading-w, 340px);
  height: auto;
  display: block;
  transition: opacity 0.5s ease;
}

.dysv__subtext {
  margin: 0;
  font-family: "Oswald", sans-serif;
  /* 300 (Light) y no 500: comparado con las capturas de Figma, el trazo real
     es mucho más fino. */
  font-weight: 300;
  font-size: clamp(14px, 1.44vw, 19.03px);
  line-height: 1.35;
  letter-spacing: 1px;
  color: rgba(211, 226, 227, 1);
  transition: opacity 0.5s ease;
}

.dysv__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border-radius: 999px;
  background: rgba(211, 226, 227, 1);
  color: #0a2a2f;
  font-family: "Maven Pro", sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease;
}

/* Dos clases a propósito: Enfold pinta todos los enlaces con el color primario
   del theme vía `.main_color a`, y con una sola clase nuestra le ganaba él —
   el botón salía del color corporativo del theme en vez del suyo.
   #202e33 es el token campaign/dark del componente «btn / Primary / L /
   Negative», el mismo botón que usa la galería de producto. */
.dysv .dysv__cta {
  color: #202e33;
}

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


/* ==========================================================================
   SELECTOR (miniaturas + contador)
   ========================================================================== */

.dysv__nav {
  position: absolute;
  left: 0;
  right: 0;
  /* Algo por encima del borde (antes bottom:0) para que, junto con el texto,
     la composición quede equilibrada en vez de estirada de arriba a abajo. */
  bottom: clamp(24px, 4vh, 48px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 24px);
  padding: 16px clamp(16px, 8vw, 140px);
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

.dysv__thumbs {
  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;
}

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

.dysv__thumb {
  position: relative;
  width: clamp(52px, 14vw, 96px);
  aspect-ratio: 3 / 2;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #666666;
  background: #10181a;
  padding: 0;
  cursor: pointer;
  opacity: 0.8;
  scroll-snap-align: start;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}

.dysv__thumb:hover { opacity: 1; }

.dysv__thumb.dysv-is-active {
  border-color: rgba(211, 226, 227, 1);
  opacity: 1;
}

/* Dos formas de pintar una miniatura, según lo que haya en el panel:
   - .dysv__thumb-canvas → sin miniatura subida: el JS saca un frame del vídeo.
   - .dysv__thumb-img    → miniatura subida desde la biblioteca de medios.
   Mismas medidas en los dos casos, así que la fila no se mueve. */
.dysv__thumb-canvas,
.dysv__thumb-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Hermano de .dysv__nav en el HTML, no hijo: así se posiciona con
   position:absolute respecto a .dysv (su antecesor posicionado más cercano —
   position:sticky cuenta a estos efectos) en vez de quedar atrapado dentro de
   .dysv__nav, que es position:absolute por su cuenta. En escritorio se queda
   en la esquina inferior derecha junto a las miniaturas; en responsive sube
   arriba a la derecha, lejos del badge de reCAPTCHA. */
.dysv__counter {
  position: absolute;
  right: clamp(16px, 8vw, 140px);
  bottom: clamp(46px, 6.5vh, 70px);
  z-index: 3;
  font-family: "Maven Pro", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}


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

/* Por debajo de ~1024px las miniaturas no tienen sitio de sobra: se les da
   hueco propio (padding-left mayor, para dejar libre el badge fijo de
   "gestionar cookies" de Enfold en la esquina inferior izquierda) y el
   contador sube a la esquina superior derecha, lejos del badge de reCAPTCHA
   que ocupa la inferior derecha. */
@media (max-width: 1024px) {
  .dysv__nav {
    padding-left: 40px;
    padding-right: 24px;
  }

  .dysv__thumbs { width: 100%; }

  .dysv__counter {
    top: 16px;
    right: 20px;
    bottom: auto;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
  }
}

/* En móvil el caption queda demasiado pegado abajo y las miniaturas chocan
   con el scroll-hint flotante (centrado, mismo tramo inferior de pantalla). */
@media (max-width: 600px) {
  .dysv__content { bottom: clamp(220px, 34vh, 290px); }
  .dysv__nav     { bottom: clamp(88px, 13vh, 120px); }
}