/* =======================
   Slider Home – versión simple
   ======================= */

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.modo_stack_snap {
  scroll-padding-top: var(--altura_menu); /* opcional si hay menú fijo */
}

@media (min-width: 980px) {
  html.modo_stack_snap {
    scroll-snap-type: y proximity;
  }
  .ilanga_slider {
    scroll-snap-type: y mandatory; /* usa 'mandatory' si quieres anclaje duro */
    -webkit-overflow-scrolling: touch;
  }
}

/* Contenedor general del slider */
.ilanga_slider.modo_stack {
  position: relative;
  width: 100%;
  height: auto;
  min-height: min(90vh, calc(100vh - var(--altura_menu)));
  max-height: min(90vh, calc(100vh - var(--altura_menu)));
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: auto;
}

/* Ocultar scrollbars */
.ilanga_slider.modo_stack .ilanga_slider {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge antiguo */
}
.ilanga_slider.modo_stack .ilanga_slider::-webkit-scrollbar {
  display: none;
}

/* Cada slide ocupa toda la pantalla */
.ilanga_slider.modo_stack .ilanga_slide {
  position: relative;
  width: 100%;
  height: auto;
  min-height: min(90vh, calc(100vh - var(--altura_menu)));
  scroll-snap-align: start;
  overscroll-behavior-y: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .ilanga_slider:not(.modo_stack) .ilanga_slider_track {
    display: flex; /* pone las slides en fila */
    flex-direction: row;
    height: min(90vh, calc(100vh - var(--altura_menu)));
    width: 100%;
    transform: translateX(0);
    transition: transform 0.4s ease;
    will-change: transform;
  }
  .ilanga_slider:not(.modo_stack) {
    overflow-x: hidden; /* ← El “viewport” que recorta debe ser el contenedor */
    cursor: grab;
    touch-action: pan-y;
  }
  .ilanga_slider:not(.modo_stack).dragging {
    cursor: grabbing;
  }
  .ilanga_slider:not(.modo_stack) .ilanga_slide {
    flex: 0 0 calc(100% + 1px); /* cada slide ocupa exactamente el 100% del ancho */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    overflow: hidden;
    width: calc(100% + 1px);
    margin-right: -1px;
  }

  /* (opcional) oculta la barra de scroll horizontal */
  .ilanga_slider:not(.modo_stack)::-webkit-scrollbar {
    display: none;
  }
  .ilanga_slider:not(.modo_stack) {
    scrollbar-width: none;
  }
}

/* Imagen de fondo */
.ilanga_slider .ilanga_slide_media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ilanga_slide_media::after {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  background: linear-gradient(
    90.32deg,
    rgba(0, 0, 0, 0) 10.53%,
    rgba(0, 0, 0, 0.313403) 64.33%,
    rgba(0, 0, 0, 0.5) 93.66%
  );
  pointer-events: none; /* no bloquea clics */
  z-index: 1; /* se coloca sobre la imagen */
  width: 100%;
  height: 100%;
}

.ilanga_slider .ilanga_slide_bg_image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Tarjeta de contenido */
.ilanga_slider .ilanga_card {
  position: relative;
  z-index: 1;
  max-width: 30vw;
  max-height: 90%;
  background: var(--color_blanco);
  padding: var(--margin_large);
  text-align: center;
  -webkit-overflow-scrolling: touch;
}
.ilanga_slider .ilanga_card_media {
  margin-bottom: var(--margin_textos);
  max-height: 30vh;
  overflow-y: hidden;
}
.ilanga_slider .ilanga_card_media img {
  object-fit: cover;
  object-position: center;
  aspect-ratio: 2.6;
}
.ilanga_slider .ilanga_card_numero {
  font-size: var(--size_19);
  font-family: var(--fuente_titulos);
  color: var(--color_gris_medio);
  font-weight: 400;
}
.ilanga_slider .ilanga_card_numero_actual {
  color: var(--color_azul_verde);
  font-family: var(--fuente_titulos);
}
.ilanga_slider .ilanga_card_cabecera p,
.ilanga_slider .ilanga_card_cabecera {
  font-size: var(--size_30);
  color: var(--color_azul_verde);
}

.ilanga_slider .ilanga_card_texto,
.ilanga_card_texto p {
  font-size: var(--size_21);
}

/* ====== Animaciones ====== */

/* Fondo: solo fade */
.js_enabled .ilanga_slide_bg_image {
  opacity: 1;
  transform: none !important;
  transition: opacity 0.55s ease;
}
.js_enabled .ilanga_slide.is_active .ilanga_slide_bg_image {
  opacity: 1;
}

/* Contenidos dentro de la tarjeta: fade + subida */
.js_enabled .ilanga_card_media,
.js_enabled .ilanga_card_numero,
.js_enabled .ilanga_card_cabecera,
.js_enabled .ilanga_card_texto {
  opacity: 0;
  transform: translateY(14px); /* cámbialo a 0 si quieres solo fade */
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js_enabled .ilanga_slide.is_active .ilanga_card_media,
.js_enabled .ilanga_slide.is_active .ilanga_card_numero,
.js_enabled .ilanga_slide.is_active .ilanga_card_cabecera,
.js_enabled .ilanga_slide.is_active .ilanga_card_texto {
  opacity: 1;
  transform: translateY(0);
}

/* Pequeño escalonado */
.js_enabled .ilanga_slide.is_active .ilanga_card_media {
  transition-delay: 0.1s;
}
.js_enabled .ilanga_slide.is_active .ilanga_card_numero {
  transition-delay: 0.18s;
}
.js_enabled .ilanga_slide.is_active .ilanga_card_cabecera {
  transition-delay: 0.26s;
}
.js_enabled .ilanga_slide.is_active .ilanga_card_texto {
  transition-delay: 0.34s;
}

/* ====== Contenedor del bloque slider ====== */
.seccion_slider {
  position: relative;
  max-width: var(--ancho_contendor);
  margin: auto;
}

/* Texto lateral (visible solo al inicio) */
.seccion_slider .mensaje_lateral {
  position: absolute;
  left: var(--padding_columnas);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: auto;
  margin: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  background-color: transparent;
  max-width: 380px;
}
.seccion_slider .mensaje_lateral p,
.seccion_slider .mensaje_lateral .et_pb_text_inner {
  color: var(--color_blanco);
  font-size: var(--size_58);
  font-weight: 200;
  margin-bottom: 0;
  padding-bottom: 0;
}
.seccion_slider.is_scrolled .mensaje_lateral {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(-8px);
}

/* Texto “Sigue desplazándote” */

/* 🔽 Animación de movimiento arriba-abajo */
@keyframes flecha_scroll {
  0%,
  100% {
    transform: translateY(-50%) translateY(0);
  }
  50% {
    transform: translateY(-50%) translateY(20px);
  }
}

@media (min-width: 1024px) {
  @keyframes flecha_scroll_horizontal {
    0%,
    100% {
      transform: translateY(-50%) translateX(0) rotate(-90deg);
    }
    50% {
      transform: translateY(-50%) translateX(20px) rotate(-90deg);
    }
  }
   @keyframes flecha_scroll_back_horizontal {
    0%, 100% {
      transform: translateY(-50%) translateX(0) rotate(90deg);
    }
    50% {
      transform: translateY(-50%) translateX(20px) rotate(90deg);
    }
  }
}

.modo_stack_snap .seccion_slider .aviso_scroll {
  position: absolute;
  right: var(--padding_columnas);
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  z-index: 10;
  pointer-events: none;
  background-color: transparent;
  height: 43px;
  width: 43px;
  animation: flecha_scroll 1.6s ease-in-out infinite;
}

.aviso_scroll_back { 
  display: none;
}

@media (min-width: 1024px) {
  .seccion_slider .aviso_scroll {
    position: absolute;
    right: var(--padding_columnas);
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    width: auto;
    z-index: 10;
    pointer-events: auto;
    background-color: transparent;
    height: 43px;
    width: 43px;
    animation: flecha_scroll_horizontal 1.6s ease-in-out infinite;
    overflow: hidden;
  } 

  .seccion_slider .aviso_scroll:hover, .seccion_slider .aviso_scroll_back:hover {
    opacity: 0.8;
    cursor: pointer;
  }

  .seccion_slider .aviso_scroll_back {
      position: absolute;
      display: block;
      left: var(--padding_columnas);
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
      width: 43px;
      height: 43px;
      z-index: 10;
      background-color: transparent;
      animation: flecha_scroll_back_horizontal 1.6s ease-in-out infinite;
      pointer-events: auto; /* Esta SÍ debe poder hacer click */
    }
}

.is_hidden { display: none !important; }

.seccion_slider .aviso_scroll p,
.seccion_slider .aviso_scroll .et_pb_text_inner {
  font-size: var(--size_25);
  font-weight: 200;
  color: var(--color_blanco);
  text-transform: capitalize;
}



/* Cuando el JS detecta que no cabe, activamos el modo apilado */

.ilanga_slider.modo_stack {
  height: auto;
  overflow: visible;
  scroll-snap-type: none;
  max-height: fit-content;
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--altura_menu);
}

.ilanga_slider.modo_stack .ilanga_slide {
  min-height: calc(100vh - var(--altura_menu));
  height: auto;
  max-height: fit-content;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  margin-bottom: var(--margin_large);
  margin: 0;
  border: 0;
  padding: var(--padding_columnas);
  view-timeline-name: --slide;
  view-timeline-axis: block;
}

/* La primera slide expone una view timeline */
.ilanga_slider.modo_stack .ilanga_slide:first-child {
  view-timeline-name: --primera;
  view-timeline-axis: block; /* scroll vertical */
}

/* Animación simple de desvanecido */
@keyframes msg_fade_out {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.ilanga_slider.modo_stack .ilanga_card {
  max-height: none;
  overflow: visible;
}

.seccion_slider:has(.ilanga_slider.modo_stack) {
  position: relative;
}

.seccion_slider:has(.ilanga_slider.modo_stack) .mensaje_lateral {
  display: none;
}

.seccion_slider:has(.ilanga_slider.modo_stack) .aviso_scroll {
  display: none;
}

.ilanga_slider.modo_stack .ilanga_card_media,
.ilanga_slider.modo_stack .ilanga_card_numero,
.ilanga_slider.modo_stack .ilanga_card_cabecera,
.ilanga_slider.modo_stack .ilanga_card_texto {
  opacity: 0;
  animation-name: aparecer;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timeline: --slide; /* ← se liga a la visibilidad de la slide */
  animation-range: entry 0% cover 5%;
}

/* pequeño escalonado, igual que tenías */
.ilanga_slider.modo_stack .ilanga_card_numero {
  animation-delay: 0.01s;
}
.ilanga_slider.modo_stack .ilanga_card_cabecera {
  animation-delay: 0.016s;
}
.ilanga_slider.modo_stack .ilanga_card_texto {
  animation-delay: 0.024s;
}

.ilanga_slider.modo_stack .ilanga_slide:first-child .ilanga_card_media,
.ilanga_slider.modo_stack .ilanga_slide:first-child .ilanga_card_numero,
.ilanga_slider.modo_stack .ilanga_slide:first-child .ilanga_card_cabecera,
.ilanga_slider.modo_stack .ilanga_slide:first-child .ilanga_card_texto {
  opacity: 1;
  transform: none;
  animation: none;
}

@media (max-width: 1600px) {
  .ilanga_slider .ilanga_card {
    max-width: 35vw;
  }
  .seccion_slider .mensaje_lateral {
    max-width: 300px;
  }
  .seccion_slider .mensaje_lateral p,
  .seccion_slider .mensaje_lateral .et_pb_text_inner {
    font-size: var(--size_38);
  }
}

@media (max-width: 1024px) {
  .ilanga_slider {
    scroll-snap-type: unset;
  }
  .ilanga_slider .ilanga_slide_media {
    display: none;
  }
  .seccion_slider .ilanga_slider {
    padding: var(--padding_columnas);
    background-color: var(--color_azul_verde);
  }
  .ilanga_slider .ilanga_card {
    max-width: 100%;
    max-height: none;
    overflow: visible;
  }
  .ilanga_slider .ilanga_slide {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }
  .seccion_slider {
    background-color: var(--color_azul_verde);
    min-height: auto;
  }
  .seccion_slider .aviso_scroll {
    display: none;
  }
  .seccion_slider .mensaje_lateral,
  .seccion_slider.is_scrolled .mensaje_lateral {
    position: static;
    opacity: 1;
    width: 100%;
    max-width: var(--ancho_contendor);
    padding-top: var(--padding_columnas) !important;
    padding-left: var(--padding_columnas) !important;
    padding-right: var(--padding_columnas) !important;
    background-color: var(--color_azul_verde);
    transform: translateY(0) translateX(0);
    top: 0;
    right: 0;
    visibility: visible;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .seccion_slider .mensaje_lateral .et_pb_column {
    width: 50%;
  }
  .seccion_slider .mensaje_lateral .et_pb_text_inner {
    text-align: center;
  }
  .seccion_slider .mensaje_lateral p {
    display: inline;
    text-align: center;
  }
  .ilanga_slider .ilanga_card {
    max-width: 100%;
  }
}

@media (max-width: 980px) {
  .ilanga_slider,
  html.modo_stack_snap {
    scroll-snap-type: unset;
  }
  .ilanga_slider .ilanga_slide {
    scroll-snap-align: unset;
    scroll-snap-stop: unset !important;
  }
}