* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  font-family: 'Anton', sans-serif;
    /* Para Firefox */
  scrollbar-width: thin; /* Hace la barra de desplazamiento fina */
  scrollbar-color: #888 transparent; /* 'thumb' gris, 'track' transparente */
  scroll-snap-type: y mandatory; /* Habilita el ajuste vertical y fuerza que siempre se ajuste */
  overflow-y: scroll; /* Asegura que la barra de desplazamiento vertical siempre esté visible */
  height: 100%; /* Asegura que el html ocupe el 100% de la altura del viewport para un mejor ajuste */
  /* Puedes considerar también 'scroll-behavior: smooth;' para un desplazamiento más suave */
  /* scroll-behavior: smooth; */
}

header, footer {
  background-color: black;
  color: white;
  text-align: center;
  position: fixed;
  width: 100%;
  z-index: 10;
  left: 0;
}

header {
  top: 0;
  height: 60px;
  line-height: 60px;
}

main {
  margin-top: 60px;
  margin-bottom: 0px;
}

.producto {
  height: calc(100vh - 145px);
  position: relative;
  display: flex;
  align-items: center;
  background-size: 33.3333% 100%;
  background-position: left, center, right;
  background-repeat: no-repeat;
  scroll-snap-align: center;
}

.minipistaday {
  background-image:
    url('../img/2_4.jpg'),
    url('../img/2_2.jpg'),
    url('../img/2_5.jpg');
}

.intensivo8day {
  background-image:
    url('../img/2.jpg'),
    url('../img/3.jpg'),
    url('../img/10.jpg');
}

.adventure {
  background-image:
    url('../img/3_1.jpg'),
    url('../img/3_2.jpg'),
    url('../img/3_3.jpg');
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
    /*linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);*/
  display: flex;
  /* CAMBIO CLAVE: Usamos flex-direction: column y justify-content para apilar verticalmente */
  flex-direction: column; /* Apila el contenido verticalmente */
  justify-content: flex-end; /* Mueve todo el contenido a la parte inferior del overlay */
  align-items: center; /* Alinea los ítems a la izquierda */
  padding: 2rem; /* Padding general */
  padding-left: 70%; /* Mantiene el padding a la izquierda para el contenido PC */
  padding-right: 2rem;
  box-sizing: border-box;

/* Gradiente original para oscurecer la derecha */
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 85%);

/* --- AÑADE ESTOS GRADIENTES ADICIONALES PARA SUAVIZAR LAS UNIONES --- */
background-image:
  /* Gradiente para suavizar la unión entre la primera y segunda imagen (entre 33% y 66%) */
  linear-gradient(to right,
    transparent 30%, /* Empieza transparente un poco antes del 33.33% */
    rgba(0, 0, 0, 0.1) 33%, /* Un poco de oscuridad en la unión del 33.33% */
    transparent 36% /* Vuelve a transparente un poco después */
  ),
  /* Gradiente para suavizar la unión entre la segunda y tercera imagen (entre 66% y 100%) */
  linear-gradient(to right,
    transparent 63%, /* Empieza transparente un poco antes del 66.66% */
    rgba(0, 0, 0, 0.1) 66%, /* Un poco de oscuridad en la unión del 66.66% */
    transparent 69% /* Vuelve a transparente un poco después */
  ),
  /* Mantiene tu gradiente original, asegúrate de que sea el último para que se superponga correctamente */
  linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 85%);

/* Importante: si usas múltiples background-image, la propiedad 'background' compuesta no funcionará.
   Debes listar todos los gradientes en 'background-image' y luego el 'background-color' si lo necesitas.
   Pero como ya tienes un 'background: linear-gradient', lo más fácil es simplemente agregarlos
   como parte de la lista de `background-image` y el último será el que tiene la oscuridad principal.
   La forma correcta es que todos los gradientes estén en `background-image`, separadas por coma.
   El orden es importante: los primeros se superponen a los de abajo.
*/

/* El orden de los gradientes es crucial. Los que quieres que se vean "arriba" van primero.
   Vamos a poner los gradientes de unión primero, y luego el gradiente principal de oscurecimiento. */
background-image:
  /* Gradiente de unión 1 (izquierda) */
  linear-gradient(to right, transparent 30%, rgba(0, 0, 0, 0.2) 33%, transparent 36%),
  /* Gradiente de unión 2 (centro) */
  linear-gradient(to right, transparent 63%, rgba(0, 0, 0, 0.2) 66%, transparent 69%),
  /* Tu gradiente principal de oscurecimiento a la derecha */
  linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 85%);

}

/* NUEVO: Estilo para el h3 cuando es hijo directo de .overlay en PC */
.overlay h3 {
  order: 0; /* Asegura que el h3 no se vaya con el order -1 de móvil */
  margin-bottom: 20px; /* Espacio debajo del título */
  /* Reafirma sus estilos de PC */
  font-size: 2.5rem;
  color: beige;
  text-shadow:
    0 0 2px #ff0000,
    0 0 2px #ff4d4d;
  width: auto; /* Permite que el ancho se ajuste al contenido, no 100% */
  text-align: center; /* Alinea el texto a la izquierda */
  align-self: center; /* Asegura que se alinee a la izquierda del contenedor flex */
  /* Si el h3 tenía un color específico antes en .contenido h3, podrías mantenerlo aquí */
}

.contenido {
  color: beige;
  /*background: rgba(255, 255, 255, 0.35);*/
  padding: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  /*border-radius: 12px;*/
  max-width: 400px;
  text-align: left;
  /*box-shadow: 0 0 10px rgba(0,0,0,0.5);*/
  max-height: calc(100vh - 155px); /* Ajusta esta altura según sea necesario */
  overflow-y: auto; /* Agrega la barra de desplazamiento vertical cuando el contenido exceda la altura máxima */
  /* --- Estilos para la barra de desplazamiento (Firefox) --- */
  scrollbar-width: thin; /* Hace la barra de desplazamiento fina */
  scrollbar-color: #888 transparent; /* 'thumb' gris, 'track' transparente */
  padding-bottom: 90px;
}

.contenido h2 {
  margin-bottom: 10px;
}

.contenido p {
  margin-bottom: 10px;
}

.ver-mas {
  display: block;
  margin-bottom: 10px;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.extra-info {
  display: none;
  margin-top: 10px;
  /* Puedes añadir un poco de padding al final si quieres que la barra de desplazamiento no pegue con el texto final */
  /* padding-bottom: 10px; */
}

.extra-info.show {
  display: block;
}


.ver-mas:target + .extra-info {
  display: block;
}

.boton-container {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 20px;
}

/* Estilo del botón */
.boton-inscribirse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: #039d3b;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
  transition: background-color 0.3s;
}

.boton-inscribirse:hover {
  background-color: #15cd59;
}


/* Lista dentro de tarjeta */
.contenido ul {
  padding-left: 20px;
  margin: 10px 0;
  list-style: none;
  color: #111;
}

.contenido ul li {
  margin-bottom: 5px;
  font-weight: 700;
  color: #60c854;
}

.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px; /* Altura que ya tenías */
  background-color: #000;
  color: #fff;
  display: flex; /* Mantenemos Flexbox */
  justify-content: center; /* ¡NUEVO! Centra los elementos hijos horizontalmente */
  align-items: center; /* Centra los elementos hijos verticalmente */
  padding: 0 10px;
  font-size: 14px;
  z-index: 1000;
  box-sizing: border-box;
  font-family: 'Anton', sans-serif;
}

#frase-fija {
  font-size: x-large;
  white-space: nowrap;
}



/* --- MODIFICACIONES AL FOOTER --- */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85px; /* Altura que ya definiste */
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: space-between; /* Distribuye espacio entre los 3 elementos */
  align-items: center; /* Centra verticalmente */
  padding: 0 20px; /* Espacio a los lados */
  font-size: 18px;
  z-index: 3000000;
  box-sizing: border-box;
  font-family: sans-serif;
  font-weight: 900;
  flex-wrap: nowrap; /* Impide que los elementos se envuelvan a la siguiente línea */
}

/* Estilo para el enlace central ("Conocé más...") */
.footer-center-content {
  flex-grow: 1; /* Permite que este elemento crezca para ocupar el espacio central disponible */
  text-align: center; /* Centra el texto del enlace dentro de su propio espacio flexible */
  /* Opcional: min-width para asegurar que el enlace tenga siempre espacio suficiente */
  min-width: 250px; /* Ajusta si el texto del enlace es muy largo o se rompe */
}

.footer-center-content a {
  color: #fff; /* Color del enlace */
  text-decoration: none; /* Quita el subrayado */
  font-family: sans-serif;
  font-weight: 900;
}

/* --- ESTILOS PARA LAS FRASES DINÁMICAS (AJUSTADOS) --- */
.frase-footer {
  color: #fff;
  /*font-size: 1.5rem;  Tamaño de fuente para las frases */
  white-space: nowrap; /* Impide que el texto de la frase se rompa en varias líneas */
  overflow: hidden; /* Oculta cualquier texto que se desborde */
  text-overflow: ellipsis; /* Añade puntos suspensivos si el texto se desborda */
  transition: opacity 0.5s ease; /* Transición suave de opacidad */
  font-variant-numeric: tabular-nums; /* Ayuda a que los números tengan un ancho uniforme */

  /* --- CORRECCIÓN CRÍTICA: ANCHURA FIJA PARA LA ESTABILIDAD --- */
  flex-grow: 0; /* Evita que las frases crezcan más allá de su contenido */
  flex-shrink: 0; /* Evita que las frases se encojan si hay poco espacio */
  min-width: 280px; /* !!! CLAVE: Ancho mínimo fijo para cada frase !!! */
                    /* Ajusta este valor (280px) para que sea lo suficientemente grande
                       para contener la frase más larga en cada lado (ej. "Profe Marcos Cativa Tolosa"
                       o "36 años de experiencia") sin que se trunque o cause que el centro se mueva.
                       Experimenta con este valor. */
}

#frase-izquierda {
  text-align: left; /* Alinea el texto a la izquierda dentro de su min-width */
  font-family: sans-serif;
  font-weight: 900;
}

#frase-derecha {
  text-align: right; /* Alinea el texto a la derecha dentro de su min-width */
  font-family: sans-serif;
  font-weight: 900;
}

/* --- ANIMACIONES (mantén estas definiciones en tu CSS) --- */
.scale-effect {
  animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* --- Estilos para navegadores basados en WebKit (Chrome, Safari, Edge) --- */
.contenido::-webkit-scrollbar {
  width: 8px; /* Ancho de la barra de desplazamiento */
  height: 8px; /* Si también tuvieras scroll horizontal */
  background-color: transparent; /* Fondo de la barra de desplazamiento transparente */
}

.contenido::-webkit-scrollbar-track {
  background-color: transparent; /* Hace el fondo del track transparente */
}

.contenido::-webkit-scrollbar-thumb {
  background-color: #888; /* Color gris del 'thumb' */
  border-radius: 10px; /* Bordes redondeados para el 'thumb' */
  border: 2px solid transparent; /* Opcional: un pequeño borde transparente para separar del contenido */
}

/* Para ocultar las flechas (botones) de la barra de desplazamiento en WebKit */
.contenido::-webkit-scrollbar-button {
  display: none;
}

/* Estilos para navegadores basados en WebKit (Chrome, Safari, Edge) */
html::-webkit-scrollbar {
  width: 8px; /* Ancho de la barra de desplazamiento */
  height: 8px; /* Si también tuvieras scroll horizontal */
  background-color: transparent; /* Fondo de la barra de desplazamiento transparente */
}

html::-webkit-scrollbar-track {
  background-color: transparent; /* Hace el fondo del track transparente */
}

html::-webkit-scrollbar-thumb {
  background-color: #888; /* Color gris del 'thumb' */
  border-radius: 10px; /* Bordes redondeados para el 'thumb' */
  border: 2px solid transparent; /* Opcional: un pequeño borde transparente para separar del contenido */
}

/* Para ocultar las flechas (botones) de la barra de desplazamiento en WebKit */
html::-webkit-scrollbar-button {
  display: none;
}

.producto:last-of-type {
  height: calc(100vh - 70px); /* Ajusta a 100vh, restando 155px (header/top) y 85px (footer) */
  /* Asegúrate de que el scroll snap siga funcionando si lo deseas */
  scroll-snap-align: center; /* O start, si quieres que se alinee al inicio de la pantalla */
}


/* Define la animación de rebote */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0); /* Posición normal */
  }
  40% {
    transform: translateX(-50%) translateY(-10px); /* Sube un poco */
  }
  60% {
    transform: translateX(-50%) translateY(-5px); /* Baja un poco menos */
  }
}

.scroll-down-arrow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%); /* Base para la animación */
  color: #ff0000; /* Color cian (o el que prefieras) */
  font-size: 2.8rem;
  cursor: pointer;
  z-index: 100;
  opacity: 0.85;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);

  /* Aplica la animación */
  animation: bounce 2s infinite; /* Nombre de la animación, duración, y que se repita infinitamente */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Mantenemos la transición para el hover */
}

.scroll-down-arrow:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(5px); /* Efecto hover */
  animation: none; /* Detiene la animación al pasar el ratón si quieres */
}

/* Opcional: Si no quieres que la flecha aparezca en la ÚLTIMA sección */
.producto:last-of-type .scroll-down-arrow {
  display: none;
}


/* NUEVO: Estilos para la flecha de subir */
.scroll-up-arrow {
  position: absolute; /* Posiciona la flecha relativamente a su padre .overlay */
  top: 20px; /* Distancia desde la parte superior del overlay */
  left: 50%; /* Centra horizontalmente */
  transform: translateX(-50%); /* Ajusta el centrado exacto */
  color: #ff0000; /* Mismo color cian para consistencia (o el que uses) */
  font-size: 2.8rem; /* Mismo tamaño que la flecha de bajar */
  cursor: pointer;
  z-index: 100;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);

  /* Si quieres que también rebote, puedes aplicar la misma animación 'bounce' */
  animation: bounce 2s infinite;
}

.scroll-up-arrow:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px); /* Pequeño efecto de "rebote" hacia arriba */
  animation: none; /* Detiene la animación al pasar el ratón */
}

.producto:first-of-type .scroll-up-arrow {
  display: none;
}

.producto.testimonios {
  background-color: #111;
  color: #fff;
  /*padding: 60px 20px;*/
}
.producto.testimonios h3 {
  color: #f2f2f2;
}


/* Estilos para la nueva sección del carrusel */
.carrusel-instagram {
  /* Ocupa toda la altura entre el header (60px) y el footer (85px) */
  height: calc(100vh - 60px - 85px); 
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* Elimina la barra de desplazamiento en la sección */
}

.carrusel-instagram .contenido {
  /* Usa flexbox para distribuir el título y el carrusel */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el contenido verticalmente */
  align-items: center; /* Centra el contenido horizontalmente */
  width: 100%;
  max-width: 50%; /* Limita el ancho del carrusel como lo pediste */
  height: 100%; /* El contenedor interno ocupa el 100% de la altura disponible */
  padding: 0;
  margin: auto !important;
}

.carrusel-instagram h3 {
  color: #fff;
  margin-bottom: 22px;
  text-align: center; 
  font-family: 'Anton', sans-serif; 
  font-size: 2rem;
}

.carrusel-instagram .carousel {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  width: 100%;
  height: auto;
  flex-grow: 1; 
  display: flex;
  flex-direction: column;
}

.carrusel-instagram .carousel-inner {
  height: 100%; 
}

.carrusel-instagram .carousel-item {
  text-align: center;
  height: 100%; 
  display: flex;
  align-items: center;
  justify-content: center;
}

/* **¡CAMBIO CLAVE!** Regla específica para imágenes y videos dentro del carrusel */
.carrusel-instagram .carousel-item img,
.carrusel-instagram .carousel-item video {
  max-height: 100%; 
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
}

/* Corrección de superposición para los videos del carrusel */
.carrusel-instagram .carousel-item img,
.carrusel-instagram .carousel-item video {
  /* Establece una altura máxima para que el contenido no se desborde */
  max-height: calc(100vh - 60px - 85px - 48px - 22px); /* La altura de la sección menos el header, footer y el título/margenes */
  max-width: 100%; /* Asegura que no se salgan del ancho del carrusel */
  object-fit: contain; /* Ajusta el contenido dentro de las dimensiones */
  margin: auto;
}

/* Estilos para la nueva sección del carrusel */
.carrusel-instagram {
  height: calc(100vh - 60px - 85px); 
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; 
}

.carrusel-instagram .contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 50%;
  height: 100%;
  padding: 0;
  margin: auto !important;
}

.carrusel-instagram h3 {
  color: #fff;
  margin-bottom: 22px;
  text-align: center; 
  font-family: 'Anton', sans-serif; 
  font-size: 2rem;
}

.carrusel-instagram .carousel {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  width: 100%; 
  height: auto; 
  flex-grow: 1; 
}

.carrusel-instagram .carousel-inner {
  height: 100%;
}

.carrusel-instagram .carousel-item {
  height: 100%; 
  display: flex;
  align-items: center;
  justify-content: center;
}

/* **CLAVE** para que el contenido no se desborde */
.carrusel-instagram .carousel-item img,
.carrusel-instagram .carousel-item video {
  max-width: 100%;
  /* Calcula la altura máxima del contenido para que no se desborde del contenedor */
  max-height: calc(100vh - 60px - 85px - 44px - 22px - 40px);
  object-fit: contain;
  margin: auto;
}

/* Corrección para que cada slide del carrusel quede por debajo salvo el activo */
.carrusel-instagram .carousel-item {
  z-index: 0 !important;
}

.carrusel-instagram .carousel-item.active {
  z-index: 1 !important;
}

/* Corrección para evitar imágenes superpuestas en el carrusel */
.carrusel-instagram .carousel-item {
  background-color: #000;   /* mismo color de fondo de la sección */
  width: 100%;
  height: 100%;
  flex: 0 0 100%;           /* asegura que ocupe todo el espacio */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Corrección del parpadeo de slides en Bootstrap */
.carrusel-instagram .carousel-item {
  z-index: 0 !important;
}

.carrusel-instagram .carousel-item.active,
.carrusel-instagram .carousel-item-next,
.carrusel-instagram .carousel-item-prev {
  z-index: 1 !important;
}

/* Estilo de flechas del carrusel con look similar a .scroll-down-arrow */
.carrusel-instagram .carousel-control-next {
  width: 5%; /* ancho del área clickeable */
  padding-right: 5%;
}

.carrusel-instagram .carousel-control-prev {
  width: 5%; /* ancho del área clickeable */
  padding-left: 5%;
}

.carrusel-instagram .carousel-control-prev-icon,
.carrusel-instagram .carousel-control-next-icon {
  background: none; /* eliminamos el SVG por defecto */
  font-size: 2.8rem; /* mismo tamaño que la scroll-down-arrow */
  color: #ff0000; /* rojo */
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Reemplazo de íconos con Font Awesome */
.carrusel-instagram .carousel-control-prev-icon::after {
  content: "\f053"; /* fa-chevron-left */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.carrusel-instagram .carousel-control-next-icon::after {
  content: "\f054"; /* fa-chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* Hover efecto como la scroll-down-arrow */
.carrusel-instagram .carousel-control-prev-icon:hover,
.carrusel-instagram .carousel-control-next-icon:hover {
  opacity: 1;
  transform: translateY(5px); /* pequeño movimiento */
}

.carrusel-instagram .carousel {
  box-shadow: none !important;
}

/* Botón de WhatsApp (versión PC) */
.whatsapp-button {
  position: fixed; /* Lo fija en la pantalla */
  top: 100px; /* Separación del borde inferior */
  right: 40px; /* Separación del borde derecho */
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
  background-color: #25d366;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%; /* Lo hace circular */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  text-decoration: none;
}

.whatsapp-button:hover {
  transform: scale(1.1); /* Efecto al pasar el mouse */
}