@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;
      top: 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: #8DC63F;
    }
.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;
}


.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_eventos.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;
}