/* Por defecto sin animación */
.progress-value {
    height: 5px;
    border-radius: 0;
    animation: none !important;
}


/* 0-20 fácil */
.progress-value.easy-1 {
    background: linear-gradient(90deg, #4caf50, #66bb6a) !important;; /* verde */
}

/* 21-40 intermedio fácil */
.progress-value.easy-2 {
    background: linear-gradient(90deg, #8bc34a, #cddc39) !important;; /* verde lima */
}

/* 41-60 medio */
.progress-value.medium {
    background: linear-gradient(90deg, #ffeb3b, #ffc107) !important;; /* amarillo */
}

/* 61-80 difícil */
.progress-value.hard {
    background: linear-gradient(90deg, #ff9800, #f44336) !important;; /* naranja-rojo */
}

/* 81-100 extremo */
.progress-value.extreme {
    background: linear-gradient(90deg, #e53935, #b71c1c) !important;; /* rojo intenso */
}


.legend-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 4px;
}

/* Colores de la escala */
.legend-box.easy {
    background: linear-gradient(90deg, #4caf50, #81c784); /* Verde */
}
.legend-box.medium {
    background: linear-gradient(90deg, #2196f3, #64b5f6); /* Azul */
}
.legend-box.hard {
    background: linear-gradient(90deg, #ff9800, #ffb74d); /* Naranja */
}
.legend-box.expert {
    background: linear-gradient(90deg, #9c27b0, #ba68c8); /* Morado */
}
.legend-box.extreme {
    background: linear-gradient(90deg, #f44336, #e57373); /* Rojo */
}



a {
    transition: color 0.3s transform 0.2s !important;
}

a:hover {
    color: #FF4500 !important;
    transform: scale(1.05) !important; /* Leve “zoom” al pasar el mouse */
    
}




/* PAra el SLIDER de la HOME */


/* === Home Hero Slider === */
.home-hero {
  position: relative;
  width: 100%;
  height: 90vh; /* altura de hero, ajustable */
  overflow: hidden;
}

.home-hero .swiper {
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.home-hero .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-hero .slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  z-index: 1;
  pointer-events: none;
}

.home-hero video.slide-bg,
.home-hero iframe.slide-bg {
  pointer-events: none;
}

.home-hero .slide-content {
  position: relative;
  z-index: 100;
  color: white;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 20px;
  left:10%;
}


/* Móvil: ancho completo */
@media (max-width: 576px) {
	.home-hero  .slide-content {
	
	 left:3%;
	 top: 50%;
	
	  }
}
	

.home-hero .slide-content h2 {
 font-size: clamp(18px, 5vw, 72px); /* mínimo 24px, escala hasta 80px */
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); /* mantiene legibilidad sobre imagen */
}

.home-hero .slide-content p {
  font-size: clamp(16px, 3vw, 24px); /* mínimo 12px, máximo 16px */
  margin-bottom: 20px;
  line-height: 1.4;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
  word-wrap: break-word;
  overflow-wrap: break-word;  
  max-width: 40%; /* ancho máximo en escritorio */
  text-align: justify
}

/* Móvil: ancho completo */
@media (max-width: 576px) {
  .home-hero .slide-content p {
    max-width: 90% ;
	hyphens: auto; 
  }
}



/* Botón elegante con borde blanco y fondo transparente */
.home-hero .slide-content a {
  display: inline-block;
  position: relative;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.45) !important; /* casi transparente */
  color: #fff;
  padding: 12px 30px;
  font-size: 1.25rem;
  font-weight: 300;
  border: 1px solid #f00; 
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  pointer-events: auto;
  touch-action: manipulation;
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

.home-hero .slide-content a:hover {
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-color: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  color: #fff;
}

/* 🌐 Versión reducida para pantallas pequeñas */
@media (max-width: 768px) {
  .home-hero .slide-content a {
    padding: 9px 22px;
    font-size: 1rem;
    border-radius: 24px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  }
}

/* 📱 Ajuste extra fino para móviles muy pequeños (como 360px o menos) */
@media (max-width: 480px) {
  .home-hero .slide-content a {
    padding: 8px 18px;
    font-size: 0.9rem;
    border-radius: 20px;
    border-width: 1px;
  }
}





.home-hero .swiper-button-next,
.home-hero .swiper-button-prev {
  --swiper-navigation-size: 36px;
  color: #fff;
  opacity: 0.8;
  pointer-events: auto;
}

.home-hero .swiper-button-next:hover,
.home-hero .swiper-button-prev:hover {
  opacity: 1;
}

.home-hero .swiper-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.2);
  z-index: 20;
}

.home-hero .swiper-progress {
  width: 0%;
  height: 100%;
  background: rgba(255,238,170,0.5);
  transition: width linear;
}

/* Animaciones */
.home-hero .swiper-slide-active .slide-content > * {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s forwards;
}

.home-hero .swiper-slide-active .slide-content h2 { animation-delay: 0.3s; }
.home-hero .swiper-slide-active .slide-content p { animation-delay: 0.6s; }
.home-hero .swiper-slide-active .slide-content a { animation-delay: 0.9s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media(max-width:768px){
  .home-hero { height: 100vh; }
  .home-hero .slide-content h2 { font-size: 2rem; }
  .home-hero .slide-content p { font-size: 1rem; }
  .home-hero .swiper-button-next,
  .home-hero .swiper-button-prev { --swiper-navigation-size: 24px; }
}


/* 🔄 Ken Burns solo para la slide activa */
.home-hero .swiper-slide .image-fondo {
  transform: scale(1);
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* Cuando la slide está activa → se lanza el zoom */
.home-hero .swiper-slide-active .image-fondo {
  animation: kenburns 8s ease-in-out forwards;
}

/* 👇 Truco: forzar reinicio de la animación */
.home-hero .swiper-slide-active:not(.swiper-slide-duplicate-active) .image-fondo {
  animation-name: kenburns;
}

/* Animación con movimiento sutil y realista */
@keyframes kenburns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-10px, -6px);
  }
  100% {
    transform: scale(1.12) translate(15px, 10px);
  }
}


/* Transición fade suave */
.home-hero .swiper-fade {
  transition-duration: 800ms !important;
}


/* Para quitar el overflow en la home lo guardo por si lo recuperamos
.gt-feature-icon {
    max-height: 380px; 
    overflow-y: auto;
}


@media (max-width: 767px) {
    .gt-feature-icon {
        max-height: none;
        overflow-y: visible;
    }
}
*/



.gt-thumb-img {
    width: 100%;
    height: 250px; /* puedes ajustar la altura que mejor quede */
    object-fit: cover; /* recorta la foto manteniendo la proporción */
    
}