.scrollToTop {
  color: #0a2e46 !important;
}

.btn-outline-light {
  color: white !important;
  background-color: #0a2e46 !important;
}

.containter {
  margin-bottom: 10px !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.menuzord-menu > li > a {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  /* Negrita fuerte */
  letter-spacing: -0.5px;
  /* Un toquecito más pegadas las letras se ve más moderno */
  text-transform: uppercase;
  /* Opcional: Si quieres que los títulos sean siempre mayúsculas */
}

body,
p,
span,
a,
li,
div {
  font-family: "Open Sans", sans-serif;
}

.flotante {
  transition: transform 0.5s;
}

.flotante:hover {
  transform: scale(1.05);
}

.flipbox-text {
  color: #7ed957;
}

.boton-primario {
  background-color: #0a2e46;
  color: white;
  border: #fff 1px solid;
}

.boton-primario:hover {
  background-color: white;
  color: #0a2e46;
  border: #0a2e46 1px solid;
}

.boton-secundario {
  background-color: white;
  color: #0a2e46;
  border: #0a2e46 1px solid;
  margin-left: 15px;
}

.boton-secundario:hover {
  background-color: #0a2e46;
  color: white;
  border: #fff 1px solid;
}

.timeline-swiper {
  width: 100%;
  height: 350px;
  /* Ajusta la altura de las fotos */
  margin-top: 15px;
  border-radius: 8px;
  overflow: hidden;
}

.text-justify {
  text-align: justify !important;
}

.swiper-slide img:hover {
  transform: scale(1.05);
  /* Pequeño zoom al pasar el mouse */
}

/* IMPORTANTE: El modal debe estar encima de tus animaciones GSAP (que tienen 9999) */
.modal {
  z-index: 10005 !important;
}

.modal-backdrop {
  z-index: 10000 !important;
}

.timeline-swiper {
  width: 100%;
  /* height: 600px;  <--- BORRA O COMENTA ESTA LÍNEA */
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
}

.seccion-con-deco {
  position: relative;
  /* Opcional: si la imagen es muy grande y no quieres que se salga del contenedor padre, usa overflow: hidden; aquí */
}

.deco-scroll-img {
  position: absolute;
  z-index: -1;
  /* Detrás del texto */
  width: 180px;
  /* Ajusta el tamaño según tus imágenes */
  height: auto;
  opacity: 0;
  /* Inicialmente invisibles, GSAP las mostrará */
  pointer-events: none;
  /* Para que no interfieran con clicks en el texto */
}

/* Posiciones iniciales (GSAP las moverá desde aquí) */
.deco-left {
  left: -100px;
  /* Comienza metida a la izquierda */
  top: 10%;
  /* Un pequeño ángulo inicial para más dinamismo */
  transform: rotate(-15deg);
}

.deco-right {
  right: -100px;
  /* Comienza metida a la derecha */
  top: 10%;
  transform: rotate(15deg);
}

.svg-rio-flotante {
  position: absolute;
  top: 0;
  left: -20px;
  /* Ajusta esto para acercarlo o alejarlo del texto */
  width: 100%;
  /* Ocupa el ancho disponible del contenedor */
  height: 100%;
  /* SE ESTIRA PARA CUBRIR TODAS LAS ACTIVIDADES */
  z-index: -1;
  pointer-events: none;
  overflow: visible;
  /* max-width limita que no se vuelva gigante en pantallas muy anchas */
  max-width: 300px;
  opacity: 50%;
}

.ola-camino {
  fill: none;
  stroke: lightblue;
  /* Azul para diferenciar (o usa tu verde #7ed957) */
  stroke-width: 8;
  stroke-linecap: round;

  /* Configuración matemática */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* Empieza oculta */

  transition: none !important;
}

.rio-camino {
  fill: none;
  stroke: lightblue;
  stroke-width: 15;
  /* Grosor de la línea */
  stroke-linecap: round;

  /* TRUCO MAESTRO: */
  /* Definimos que la línea mide "1" y el espacio vacío mide "1" */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* Empieza totalmente oculta */

  /* Sin transiciones CSS para que responda instantáneo al dedo */
  transition: none !important;
}

/* Una clase auxiliar para cuando el JS ya cargó */
.rio-camino.listo {
  opacity: 1;
}

/* En pantallas grandes, lo movemos un poco para que no tape el texto */
@media (min-width: 1200px) {
  .svg-rio-flotante {
    left: -50px;
    max-width: 400px;
  }

  .header-nav .header-nav-wrapper .container {
    width: 100% !important;
    max-width: 98% !important;
    /* Usamos el 98% del ancho total */
  }

  /* 2. Evitar que el texto de los enlaces se parta en dos líneas */
  .menuzord-menu > li > a {
    white-space: nowrap !important;
    padding: 8px 12px !important;
    /* Ajuste fino del espacio entre letras */
  }
}

/* Reutilizamos las clases de posición que creamos antes */
.deco-left {
  left: -120px;
  top: 0;
}

.deco-right {
  right: -120px;
  top: 0;
}

.header#header .header-top {
  background-color: #0a2e46;
}

.styled-icons.icon-dark a {
  background-color: orange !important;
}

/* Ocultar en móviles para no saturar la pantalla pequeña */
@media (max-width: 767px) {
  .deco-scroll-img {
    display: none !important;
  }
}

@media (max-width: 1199.98px) {
  #top-primary-nav.menuzord-responsive .menuzord-menu > li > a,
  #top-primary-nav-clone.menuzord-responsive .menuzord-menu > li > a {
    color: white;
    background-color: #0a2e46;
    border-bottom-color: #0a2e46;
  }
}

.timeline-swiper .swiper-slide {
  width: auto !important;
  /* Deja que la imagen defina el ancho o usa un px fijo */
  max-width: 400px;
  height: 100%;
}

.timeline-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Recorta la imagen para que llene el espacio sin deformarse */
  border-radius: 8px;
  cursor: pointer;
}

/* Botones del Modal de Galería */
.modal-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(126, 217, 87, 0.8);
  /* Tu color verde con transparencia */
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10010;
  transition: all 0.3s;
}

.menuzord.theme-color2 .menuzord-menu > li.active > a,
.menuzord.theme-color2 .menuzord-menu > li:hover > a,
.menuzord.theme-color2 .menuzord-menu ul.dropdown li:hover > a {
  background-color: #0a2e46;
  color: #fff;
}

.modal-nav-btn:hover {
  background-color: #7ed957;
  transform: translateY(-50%) scale(1.1);
}

.modal-prev {
  left: 10px;
}

.modal-next {
  right: 10px;
}

.img-reveal-h,
.img-reveal-v {
  /* Inicialmente recortamos todo (no se ven) */
  /* inset(Top Right Bottom Left) */

  /* Horizontal: Recortamos el 100% desde la derecha */
  clip-path: inset(0 100% 0 0);

  transition: none !important;
  will-change: clip-path;
  /* Optimización para navegadores */
}

/* Vertical: Recortamos el 100% desde abajo */
.img-reveal-v {
  clip-path: inset(0 0 100% 0);
}

.icon-move-h {
  /* Optimización para que no vibre */
  will-change: transform;
  transition: none !important;
}

.icon-move-v {
  will-change: transform;
  transition: none !important;
}

/*RIO NAVEGABLE*/
.camino-navegable {
  fill: none;
  stroke: #7ed957;
  /* Color del río */
  stroke-width: 40;
  /* Río ancho */
  stroke-linecap: round;
  stroke-opacity: 0.3;
  /* Un poco transparente para que parezca agua */

  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* Empieza oculto y se dibuja */
  transition: none !important;
}

/* El barco no necesita transición CSS porque JS lo mueve frame a frame */
.icono-barco {
  transition: none !important;
  z-index: 10;
}

/*MEDIA QUERYS TRACKS*/
@media (max-width: 767px) {
  /* Hacemos los tracks horizontales más angostos en móvil */
  .track-horizontal,
  .contenedor-ola {
    height: 100px !important;
    /* Antes 150px */
  }

  /* Ajustamos el track vertical para que no sea eterno en pantallas chicas */
  .track-vertical,
  .contenedor-reveal-v {
    height: 350px !important;
    /* Antes 500/600px */
  }

  /* Ajustamos el tamaño de los iconos en móvil para que no se vean gigantes */
  .icon-move-h,
  .icon-move-v {
    width: 50px !important;
  }

  /* Ajuste de texto para que no tape todo */
  .track-vertical h3,
  .contenedor-reveal-v h3 {
    font-size: 1.2rem;
  }
}

/*SCROLLYTELLING*/
/* Estilos del Río Largo */
.story-camino {
  fill: none;
  stroke: lightblue;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-opacity: 0.25;
  /* Un poco más transparente para no tapar el texto */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: none !important;
}

/* La balsa */
.story-barco {
  transition: none !important;
  /* Sombra para que destaque del fondo */
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3));
}

#modalImage {
  max-height: 85vh !important;
  /* Limita la altura al 85% de la pantalla */
  width: auto !important;
  /* El ancho se ajusta automáticamente para no deformar */
  max-width: 100%;
  /* Asegura que no se salga de ancho en móviles */
  object-fit: contain;
  /* Muestra la imagen completa */
  margin: 0 auto;
  /* Centra la imagen si sobra espacio a los lados */
  display: block;
}

/* Ajuste opcional para el botón de cerrar en móviles */
.btn-close-white {
  background-color: rgba(0, 0, 0, 0.5);
  /* Un fondo oscuro para que se vea sobre fotos claras */
  border-radius: 50%;
}

/* Contenedores de los puntos de historia */
.story-point {
  position: absolute;
  /* ESTADO INICIAL: OCULTO */
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  /* Desplazado hacia abajo y un poco más pequeño */
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Transición suave */
}

/* ESTADO VISIBLE (Activado por JS) */
.story-point.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* En su lugar original y tamaño normal */
}

/* Tarjetas de contenido (para que se vea bonito) */
.story-card {
  background: rgba(255, 255, 255, 0.8);
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(5px);
  /* Efecto vidrio esmerilado moderno */
  max-width: 350px;
  display: inline-block;
}

/* Responsivo para el módulo narrativo */
@media (max-width: 768px) {
  /* 1. SCROLLYTELLING: CENTRALIZAR TODO */
  /* Forzamos que el contenedor tenga una altura manejable en móvil */
  .contenedor-story-rio {
    height: 2200px !important;
    /* Un poco menos alto que en PC */
  }

  /* REGLA DE ORO: Ignorar las posiciones izquierda/derecha y CENTRAR todo */
  .story-point {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    /* Centrado perfecto */
    width: 90% !important;
    /* Que ocupe casi todo el ancho */
    text-align: center !important;
    /* Texto centrado */

    /* Ajuste de animación para móvil */
    transition: opacity 0.5s ease, transform 0.5s ease !important;
  }

  /* Cuando aparece, mantenemos el centrado */
  .story-point.is-visible {
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Ajustes estéticos de la tarjeta en móvil */
  .story-card {
    max-width: 100% !important;
    /* Aprovechar espacio */
    padding: 10px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    /* Más sólido para leer mejor */
  }

  .story-card h4 {
    font-size: 1.1rem !important;
    /* Títulos más pequeños */
  }

  .story-card p {
    font-size: 0.9rem !important;
  }

  /* Ajustar la balsa para que no se vea gigante */
  .story-barco {
    width: 40px !important;
  }

  /* 2. AJUSTE DE TRACKS (ICONOS MOVIÉNDOSE) */
  .track-horizontal,
  .contenedor-ola {
    height: 120px !important;
    /* Menos altura */
  }

  .track-vertical,
  .contenedor-reveal-v {
    height: 400px !important;
  }

  /* Iconos más pequeños */
  .icon-move-h,
  .icon-move-v,
  .icono-barco {
    width: 40px !important;
  }

  /* 3. REVELADO DE IMÁGENES */
  .contenedor-reveal-h {
    height: 250px !important;
    /* Las imágenes horizontales no deben ser tan altas */
  }

  /* Texto sobre imágenes más pequeño */
  .contenedor-reveal-h h3,
  .contenedor-reveal-v h3 {
    font-size: 1.5rem !important;
  }

  /* 4. AJUSTE DEL SVG DEL RÍO */
  /* Hacemos el río un poco más grueso en móvil para que se note */
  .story-camino,
  .rio-camino,
  .camino-navegable {
    stroke-width: 25px !important;
  }
}