@charset "utf-8";
/* CSS Document */

   /* ====== Imagen con texto superpuesto ====== */
    .destino-img {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
    }

    .destino-img img {
      width: 100%;
      height: 350px;
      object-fit: cover;
      border-radius: 20px;
      transition: transform 0.3s ease;
    }

    .destino-img:hover img {
      transform: scale(1.05);
    }

/* Título con línea animada */
.link-Tit {
  font-size: 24px;
  position: relative;
  display: inline-block; /* ocupa solo el ancho del texto */
  color: #6f5745;
  font-weight: bold;
  text-decoration: none;
  padding-bottom: 8px;
}

/* Línea debajo del texto */
.link-Tit::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px; /* línea inicial pequeña */
  height: 6px;
  background-color: #8cc83f;
  transition: width 0.3s ease;
}

/* Animación al hacer hover */
.link-Tit:hover::after {
  width: 100%; /* ahora cubre solo el ancho del texto */
}


 .nombre-region {
  position: absolute;
  bottom: 10px;           /* Ajusta según tu diseño */
  left: 10px;
  background: #fff;
  padding: 5px 12px;
  font-size: 14px;
  border-radius: 6px;
  display: inline-flex;   /* SOLO ocupa su contenido */
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}


.icono-verde {
  color: #8DC63F;     /* verde */
  font-size: 16px;  /* tamaño */
}

.card-text {
  color: #6f5745 !important;
  font-size: 13px !important;
  text-align: left !important;
	line-height: 135%  !important;
}


.card-text2 {
  color: #6f5745 !important;
  font-size: 16px !important;
  text-align: left !important;
	line-height: 135%  !important;
}

.card-text3 {
  color: #32A5DC !important;
  font-size: 14px !important;
  text-align: left !important;
	line-height: 135%  !important;
}


.card-text4 {
  color: #6f5745  !important;
  font-size: 32px !important;
  text-align: left !important;
	line-height: 135%  !important;
}
.card-text5 {
  color: #6f5745 !important;
  font-size: 13px !important;
	font-weight: bold;
  text-align: left !important;
	line-height: 135%  !important;
}

.TitAct2{
	color:#6f5745;
	font-size: 40px;
	
}



.text-brown {
  color: #4a3f35;
}

.feria img {
  border-radius: 20px;
  object-fit: cover;
}

.share-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 30px;
  background-color: #6b594c;
  padding: 6px 12px;
  transition: all 0.3s ease-in-out;
}

.share-icons {
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.3s ease-in-out;
}

.share-container.active .share-icons {
  opacity: 1;
  transform: translateX(0);
}

.share-btn {
  background-color: #a7cd48;
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

/* Asegura que el botón se posicione dentro del bloque de texto */
.col-lg-5.position-relative {
  position: relative;
}

/* Ajusta la ubicación del botón de compartir */
.share-container {
  position: absolute;
  bottom: 10px;   /* separa del borde inferior */
  right: 10px;    /* separa del borde derecho */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 30px;
  background-color: #6b594c;
  padding: 6px 12px;
  transition: all 0.3s ease-in-out;
  z-index: 10; /* asegura que se vea encima */
}

/* contenedor general */
.share-container {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: transparent; /* por defecto sin fondo */
  border-radius: 30px;
  padding: 6px 10px;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 10;
}

/* íconos ocultos inicialmente */
.share-icons {
  display: flex;
  gap: 12px;
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.4s ease-in-out;
}

/* botón verde circular */
.share-btn {
  background-color: #a7cd48;
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s ease;
}

.share-btn:hover {
  background-color: #8ebc3a;
}

/* íconos dentro */
.share-icons a {
  color: #fff;
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.share-icons a:hover {
  transform: scale(1.2);
}

/* Cuando se activa: aparece fondo marrón y se despliegan íconos */
.share-container.active {
  background-color: #6b594c;
  padding-right: 14px;
  padding-left: 14px;
}

.share-container.active .share-icons {
  opacity: 1;
  transform: translateX(0);
}

.galeria-item {
  overflow: hidden;
  border-radius: 15px;
}

.galeria-item img {
  transition: transform 0.5s ease;
  border-radius: 15px;
  object-fit: cover;
  height: 100%;
}

.galeria-item:hover img {
  transform: scale(1.1);
}

#galeria button {
  border-radius: 25px;
  font-weight: 500;
}

#galeria button i {
  font-size: 1.1rem;
  vertical-align: middle;
}

/* Imagen del modal: centrada, sin recortes */
.galeria-modal-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain; /* evita cortes */
  margin: auto;
  display: block;
}

/* Ajuste visual */
.modal-body {
  background-color: #000; /* fondo negro */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Efecto suave del fade */
.carousel-fade .carousel-item {
  transition: opacity 0.8s ease-in-out;
}

/* Botones de navegación */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1); /* los hace blancos */
}

/* ==== MODAL GALERÍA ==== */

/* Fondo con efecto blur */
.galeria-modal-content {
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.75);
}

/* Imagen centrada y sin recorte */
.galeria-modal-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  margin: auto;
  display: block;
}

/* Transición fade más suave */
.carousel-fade .carousel-item {
  transition: opacity 0.8s ease-in-out;
}

/* Indicadores (puntos) personalizados */
.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #bbb;
  opacity: 0.7;
}
.carousel-indicators .active {
  background-color: #8BC34A; /* Verde similar al estilo de tus iconos */
  opacity: 1;
}

/* Botones de navegación */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
}
.modal-backdrop.show {
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.4);
}
/* === FONDO BORROSO DEL MODAL === */
.modal-backdrop {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(12px) !important; /* compatibilidad Safari */
  background-color: rgba(0, 0, 0, 0.5) !important; /* leve oscurecimiento */
  transition: all 0.3s ease-in-out;
}

/* Suaviza la transición cuando el modal aparece */
.modal.fade.show .modal-dialog {
  transform: scale(1);
  transition: transform 0.3s ease;
}
.backEventos{
	background-image: url("../img/Backg_experiencias.png");
  background-size:cover;/* llena todo el ancho y alto */
  background-position: center; /* centra la imagen */
  background-repeat: no-repeat;
  width: 100%;
  min-height:400px;    
}

.bloque-texto {
  background-color: #a050a5;
  border-radius: 2rem; /* bordes redondeados amplios */
	font-size: 26px;
}


.BtnAct2 {
  color: #493f37;
  font-weight: bold;
  background-color: #8cc83f;
  padding: 10px 25px;
  border: none;
  border-radius: 50px; /* estilo pill */
  transition: all 0.3s ease; /* animación suave */
}

.BtnAct2:hover {
  background-color: #8cc83f; /* un verde más oscuro */
  color: #fff; /* texto blanco al pasar */
  transform: scale(1.05); /* efecto zoom ligero */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* sombra elegante */
}

.BtnAct2:focus,
.BtnAct2:active {
  outline: none !important;
  box-shadow: none !important;
}

 .actividad-img {
      width: 140px;
      height: 140px;
      object-fit: cover;
      border-radius: 50%;
      border: 3px solid #e3e1dd;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      transition: all 0.3s ease;
    }
    .actividad-img:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    }
    .actividad-texto {
      font-size: 15px;
      color: #5c5043;
      margin-top: 10px;
    }
    .titulo-actividades {
      color: #5c5043;
      font-weight: 700;
    }

.servicios-card {
  min-height: 320px;
  background-color: #fff;
  border-radius: 25px;
  overflow: hidden;
}

/* Fondo naranja con degradado */
.servicios-left {
  flex: 1;
  background: linear-gradient(135deg, #ffa632, #ff7d03);
  color: #4a3f36;
  position: relative;
}

/* Curva decorativa */
.servicios-left::after {
  content: "";
  position: absolute;
  right: -150px;
  top: 0;
  width: 380px;
  height: 100%;
  background: inherit;
  border-bottom-left-radius: 350px;
  border-top-left-radius: 350px;
}

.servicios-left > * {
  position: relative;
  z-index: 2;
}

/* Imagen derecha */
.servicios-right {
  flex: 1;
  min-height: 320px;
}

/* Etiquetas */
.badge-servicio {
  background: #ffe3c2;
  color: #4a3f36;
  padding: 7px 16px;
  border-radius: 12px;
  font-size: 14px;
}

/* --- RESPONSIVE --- */

/* Tablets (la curva se hace más pequeña) */
@media (max-width: 992px) {
  .servicios-left::after {
    width: 250px;
    right: -120px;
  }
}

/* Móviles (la curva se elimina, layout vertical) */
@media (max-width: 768px) {

  .servicios-card {
    flex-direction: column;
  }

  .servicios-left {
    padding: 2rem;
  }

    .servicios-left::after {
    display: none;
  }

  .titulo-servicios {
    font-size: 26px;
  }

  .badge-servicio {
    font-size: 13px;
    padding: 6px 14px;
  }

  .servicios-right img {
    border-radius: 0 0 25px 25px;
    height: 240px;
    object-fit: cover;
  }
}
/* Card general */
.ruta-card {
  background: linear-gradient(135deg, #9d4fa2, #9d4fa2);
  border-radius: 40px;
  color: #fff;
  position: relative;
}

/* Curva decorativa arriba */
.ruta-card::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -120px;
  width: 380px;
  height: 380px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}

/* Textos */
.pregunta { font-size: 14px; opacity: .9; }
.titulo { font-size: 38px; font-weight: 700; line-height: 1.2; color: #dac0dc; }
.descripcion { max-width: 90%; opacity: .9; }

/* Tabs personalizados */
.custom-tabs .nav-link {
  background: transparent;
  border: none;
  color: #f6dffb;
  font-weight: 500;
  padding: 6px 16px;
  position: relative;
}

.custom-tabs .nav-link.active {
  color: #fff;
  font-weight: 600;
}

.custom-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #ffc12b;
  border-radius: 2px;
}

.subtitulo { font-size: 26px; font-weight: 600; margin-bottom: 20px; }

/* Timeline */
.timeline {
  border-left: 2px solid rgba(255,255,255,.3);
  padding-left: 25px;
}

.timeline-item {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  position: relative;
}

.timeline-item .icono {
  width: 34px;
  height: 34px;
  background: #90c46c;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: absolute;
  left: -48px;
  top: 0;
}

.timeline-item ul {
  padding-left: 18px;
}

.categoria {
  font-weight: bold;
  margin-bottom: 8px;
}

/* Responsive */
@media(max-width: 992px){
  .titulo{ font-size:30px; }
}

@media(max-width: 768px){
  .ruta-card{ padding: 2rem; }
  .timeline{ border-left: none; padding-left: 0; }
  .timeline-item .icono{ position: static; margin-bottom: 10px; }
}
.blanco {
  color: #fff !important;
}


/* Contenedor de tabs */
.ruta-tabs {
  border-bottom: none; /* Quitamos la línea de Bootstrap */
  gap: 0px;
}

/* Estilo base del tab */
.ruta-tabs .nav-link {
  background: transparent !important;   /* Sin fondo */
  color: #ffffff !important;            /* Texto blanco */
  border: none !important;              /* Quita borde Bootstrap */
  border-bottom: 3px solid transparent; /* Línea inferior invisible */
  border-radius: 0 !important;
  padding: 8px 15px ;
  font-size: 15px;
  transition: all 0.3s ease;
	 border-bottom: 3px solid #fcd7b0 !important;
}

/* AL PASAR EL MOUSE (opcional) */
.ruta-tabs .nav-link:hover {
  border-bottom: 3px solid rgba(255,255,255,0.4);
}

/* TAB ACTIVO */
.ruta-tabs .nav-link.active {
  border-bottom: 3px solid #fdb71a !important; /* Amarillo como en tu diseño */
  font-weight: 600;
}

.region-title {
	color:#6f5745;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 15px;
}
/* Ajustes visuales de la sección */
.card5 {
  background-color: #efece9;
  border: 1px solid #d9d2cc; /* todo en una sola línea */
  border-radius: 25px;
  color: #6f5745;
  
}

/* En móviles: agrandamos para mejor accesibilidad */
@media (max-width: 576px) {
  .icon-circle {
    width: 34px;   /* círculo más grande */
    height: 34px;
  }
  .icon-circle i {
    font-size: 15px;  /* ícono más grande */
  }
}
.card-text {
  font-size: 0.95rem;
  color: #555;
}

/* Estilo base de los enlaces */
.link-pdf {
	font-size: 13px;
  position: relative;
  display: inline-block;
  color: #6f5745;           /* texto en marrón */
  font-weight: bold;
  text-decoration: none;
  padding-bottom: 3px;      /* espacio para la línea */
  transition: color 0.3s ease;
}

/* Línea animada */
.link-pdf::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #6f5745; /* verde igual al círculo */
  transition: width 0.3s ease;
}

.link-pdf:hover::after {
  width: 100%;
}

.link-pdf:hover {
  color: #6f5745;
}

     
    .nombre-region {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background-color: rgba(255, 255, 255, 0.85);
      color: #4a3f35;
      padding: 4px 10px;
      border-radius: 20px;
      font-weight: 600;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .nombre-region i {
      color: #7db340;
    }



    /* ====== Contenido inferior ====== */
    .info-destino {
      padding-top: 0.7rem;
		color: #5a4a3c;
    }

    .info-destino h5 {
      font-weight: 700;
      font-size: 1.1rem;
      margin-bottom: 0.2rem;
    }

    .info-destino p {
      margin: 0;
      font-size: 0.95rem;
      color: #5a4a3c;
    }

    .como-llegar {
      margin-top: 0.6rem;
      font-weight: 600;
      font-size: 12px;
		 color: #6f5745;
    }

    .iconos-transporte i {
      font-size: 1.1rem;
      margin-right: 8px;
      color: #4a3f35;
		background-color:#6f5745;
		border-radius: 35px 25px;
		padding:5px;
    }

    .iconos-transporte i:hover {
      color: #7db340;
    }

    @media (max-width: 992px) {
      .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
      }
    }

    @media (max-width: 576px) {
      .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }

/* Título con línea animada */
.link-Tit {
  font-size: 24px;
  position: relative;
  display: inline-block; /* ocupa solo el ancho del texto */
  color: #6f5745;
  font-weight: bold;
  text-decoration: none;
  padding-bottom: 8px;
}

/* Línea debajo del texto */
.link-Tit::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px; /* línea inicial pequeña */
  height: 6px;
  background-color: #8cc83f;
  transition: width 0.3s ease;
}

/* Animación al hacer hover */
.link-Tit:hover::after {
  width: 100%; /* ahora cubre solo el ancho del texto */
}


/* Fondo del modal */
.galeria-modal-content {
    background: rgba(0, 0, 0, 0.95);
    border-radius: 20px;
}

/* El modal ocupa casi toda la pantalla */
#modalGaleria .modal-dialog {
    max-width: 95vw;
    margin: 1rem auto;
}

/* Área del carrusel */
#modalGaleria .carousel-item {
    height: 90vh; /* 90% de la altura de la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Imagen centrada y escalada proporcionalmente */
.galeria-modal-img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}

/* Botón cerrar */
#modalGaleria .btn-close {
    z-index: 1055;
    background-size: 1.2rem;
    opacity: 1;
}

/* Flechas más visibles */
#modalGaleria .carousel-control-prev-icon,
#modalGaleria .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

/* En móviles */
@media (max-width: 768px) {
    #modalGaleria .modal-dialog {
        max-width: 100vw;
        margin: 0;
    }

    #modalGaleria .carousel-item {
        height: 100vh;
    }

    .galeria-modal-img {
        max-height: 85vh;
    }
}