.map-info {
        position: relative;
        width: 100%;
        height: 600px;
		
        #map {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .top-Sidebar {
            position: absolute;
            top: 0;
            width: 340px;
            height: 100%;
            background: rgba(255, 255, 255, 0.6);
            padding: 15px;
            overflow-y: auto;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
            z-index: 3;
        overflow-y: scroll;

        }

        .list {
            list-style: none;
            width: auto;
            top: 0;
            list-style: none;
            flex: 0 0 25%;
            padding: 1rem;
            box-sizing: border-box;
            position: relative;
        }

        .list:before {
            content: "";
            position: absolute;
            height: 90%;
            background: #ccc;
            width: 2px
        }

        .list li {
            line-height: 1.5;
            font-weight: 300;
            padding-left: 2rem;
            position: relative;
            font-size: 1rem;
            margin-bottom: 1rem
        }

       
        .list li:hover {
            cursor: pointer;
            color: #e71c03;
            font-weight: 700
        }

		.list li.active:before {
			position: absolute;
			left: -0.725rem;
			font-size: 1rem;
			top: -4px;
			z-index: 999;
		}

        .list li.active {
            color: #e71c03;
            font-weight: 700;
            font-size: 0.75rem;

        }
      
		.selected-image {
            position: absolute;
            top: 40px;
            right: 15%;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
            display: none;
            text-align: center;
            z-index: 4;
			border-radius:10px;

        }

        .selected-image img {
            width: 100%;
        }
        

		/* Bloque de texto pegado abajo y a todo lo ancho */
		.wrapper-text {
		  position: absolute;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 2;
		  padding: 1rem 1rem 1rem;
		  color: #fff;
		  background:linear-gradient(0deg, rgba(0, 0, 0, 0.53) 0%, rgb(67 67 66 / 32%) 100%);
		}

		/* Degradado real detrás del texto (más alto que el bloque) */
		.wrapper-text::before {
		  content: "";
		  position: absolute;
		  left: -8px;           /* un pelín más ancho para que “abrace” el texto */
		  right: -8px;
		  bottom: -8px;
		  height: 120px;        /* alto del fade: ajústalo a tu gusto */
		  background: linear-gradient(
			to top,
			rgba(0,0,0,.75) 0%,
			rgba(0,0,0,.45) 60%,
			rgba(0,0,0,0) 100%
		  );
		  border-radius: 8px;
		  z-index: -1;
		  pointer-events: none;
		}



		.wrapper-text p {
		  margin: 0;
		  line-height: 1;
		}

		.wrapper-text #location-name {
		  font-weight: 700;
		  font-size: 1.25rem;
		}

		.wrapper-text #location-description {
		  font-size: 1rem;
		  opacity: 0.9;
		}
		
        .text-white>*, .text-white {
           /* text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
            background-image: linear-gradient(0deg, #000 85%, rgba(0, 0, 0, 0) 100%);
            -webkit-background-clip: text; */
            -webkit-text-fill-color: #fff;
        }

        .text-white {
            color: #fff !important;
        }
		
        @media screen and (max-width: 1399px) {
                .selected-image {
                right: 5%;
            }

        }

    }

  .destino-icon { height: 24px;transition: 0.5s; border: 0; color:white}