.card-body:hover{
    opacity: 1 !important;
    background-color:transparent!important
}


.itemFil .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.nav-link {
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.nav-link.active {
    border-bottom: 3px solid #e1f3d5!important;
    background-color: #e1f3d5!important;
    color: #000!important;
}

.card-img-overlay {
    background: rgba(0, 0, 0, 0.3);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

.titulos-oferta{
    font-size: 2.5vh;
}
.texto-oferta{
    background: transparent!important;
    font-size: 1.5vh;
    margin-bottom: .5vh;
}

.card:hover .card-body {
    opacity: 0!important;
    background-color: transparent !important;
    cursor: pointer;
}

.titulo-destinos-hove{
    text-transform: uppercase;
}
.texto-amarillo{
    text-transform: uppercase;
}

.collapse-icon {
    margin-left: 10px;
}

.item-count {
    font-weight: normal!important;
    font-size: 1.5vh!important;
}
/* Fix para slider-sec2: mantener card-body visible en hover */
.cardRegiones:hover .card-body,
.slider-sec2 .card:hover .card-body,
.slider-sec2 .card:hover .card-body.imagen3D {
    opacity: 1!important;
    background-color: white !important;
    cursor: pointer;
}

.card:hover .card-body {
    opacity: 0!important;
    background-color: transparent !important;
    cursor: pointer;
}
.punto-origen {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: white;
    z-index: 10;
}
.lineas-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.owl-stage-outer {
    overflow: hidden !important;
}
.slider-sec2, .owl-stage-outer {
    overflow: hidden !important;
}


.titulo-se-libre-textAvent-costa {
    font-size:3.9vh;
    color:#FFAA38;
    font-family: var(--font-family-Humanistist521BT-Bold) !important;
    font-weight: bold;
    letter-spacing:-0.04em;
    width: auto;height:auto
}
.titulos-footer{
    padding-top: 1vh;
    font-size:2.1vh;
    color:#fff;
    font-family: var(--font-family-Humanistist521BT-Roman) !important;
    letter-spacing:0.03em;
}


    .col-per-7{
        flex: 0 0 auto;
        width: 14.2857142857%;
    }




.titulo-footer-proximos-eventos {
    font-family: var(--font-family-MadeOkineSansBold) !important;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FFAA38;
    color: rgb(255, 170, 56);
    text-shadow: 7px 7px 7px rgba(1, 26, 0, 0.5);
}

.menu-op {
    color: white !important;
}

.menu-op-actual {
    color: white !important;
}






.icon-container-guayas {
    background-color: #FFAA38;
    font-size: 18px;
    font-family: var(--font-family-Humanistist521BT-Bold);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.icon-container-manabi {
    background-color: #CF1C8E;
    font-size: 18px;
    font-family: var(--font-family-Humanistist521BT-Bold);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.icon-container-eloro {
    background-color: #FFA400;
    font-size: 18px;
    font-family: var(--font-family-Humanistist521BT-Bold);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.icon-container-losrios {
    background-color: #00A8BC;
    font-size: 18px;
    font-family: var(--font-family-Humanistist521BT-Bold);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.icon-container-esmeraldas {
    background-color: #F17221;
    font-size: 18px;
    font-family: var(--font-family-Humanistist521BT-Bold);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.icon-container-santaelena {
    background-color: #0071A2;
    font-size: 18px;
    font-family: var(--font-family-Humanistist521BT-Bold);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.dropdown-menu-guayas {
    position: absolute;
    bottom: 100%;
    left: -1%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #FFAA38; 
    display: none; 
    z-index: 999;
    width:58.3%!important;
    height: 300%!important;
}

.dropdown-menu-manabi {
    position: absolute;
    bottom: 100%;
    left: 14%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #CF1C8E; 
    display: none; 
    z-index: 999;
    width:58.3%!important;
    height: 300%!important;
}

.dropdown-menu-eloro {
    position: absolute;
    bottom: 100%;
    left: 28%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #FFA400; 
    display: none; 
    z-index: 999;
    width:44%!important;
    height: 300%!important;
}

.dropdown-menu-losrios {
    position: absolute;
    bottom: 100%;
    left: 42.6%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #00A8BC; 
    display: none; 
    z-index: 999;
    width:44%!important;
    height: 300%!important;
}

.dropdown-menu-esmeraldas {
    position: absolute;
    bottom: 100%;
    left: 57%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #F17221; 
    display: none; 
    z-index: 999;
    width:29%!important;
    height: 300%!important;
}

.dropdown-menu-santaelena {
    position: absolute;
    bottom: 100%;
    left: 72%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #0071A2; 
    display: none; 
    z-index: 999;
    width:14%!important;
    height: 300%!important;
}

    .dropdown-menu-santodomingodelostsachilas  {
        position: absolute;
        bottom: 100%;
        left: 86%;
        width: 14.5% !important;
        height: 300%!important;
        background-color: #fff;
        list-style: none;
        padding: 0;
        margin: 0;
        border-top: 1px solid #b45519; 
        display: none; 
        z-index: 999;
    }




















.owl-prev-slider-sec2 {
    position: absolute;
    bottom: 20vh;
    left: 6.5vw;
}

.owl-next-slider-sec2 {
    position: absolute;
    bottom: 20vh;
    right: 6.5vw;
}

.owl-prev-fil-carr {
    position: absolute;
    bottom: 50%;
    left: -3vw;
}

.owl-next-fil-carr {
    position: absolute;
    bottom: 50%;
    right: -3vw;
}

.btn_planifica {
    background: #FFFFFF;
    background: rgba(255, 255, 255, 1);
    border-style: Solid;
    border-color: rgba(56, 56, 56, .5);
    border-width: 0.3px;
    border-radius: 3px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-family: var(--font-family-Humanistist521BT-Roman) !important;
    font-size: 17px;
    letter-spacing: 0.68px;
    color: rgb(128, 128, 128);
    display: inline-block;
    width: 13vw;
    height: 6vh;
    text-align: center;
    margin-right: 1vw;
}

.btn_planifica_activado {
    background-color: #FFAA38;
    border-color: #FFAA38;
    color: white;
}





.texto-plani-viaje-carru-foot {
    font-size: 15px !important;
    font-family: var(--font-family-Humanistist521BT-Roman) !important;
    color: #3FA9F5 !important;
}

.hotel-block_one-heading a {
    color: #3FA9F5 !important;
}

.leer-mas {
    font-size: 1.5vh !important;
    color: #3FA9F5 !important;
    opacity: .6;
}

.texto-amarillo {
    color: #FFAA38 !important;
}

.texto-amarillo a {
    color: #FFAA38 !important;
    font-size: 15px;
    font-family: var(--font-family-Humanistist521BT-Bold) !important;;
}

.velo_hover_filtros {
    background-color: #FFAA38;

}

.verde-bold {
    font-weight: bold;
    font-size: 16px;
}











.scrolling-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 58vh; 
}

.scrolling-wrapper .card {
    display: inline-block;
    width: 100%; 
    margin-right: 10px; 
}

.vertical-line {
    border-left: 1px solid #000; 
    height: 30px; 
}

.menu_ciudades {
    font-size: 11.5px!important;
    font-family: var(--font-family-Humanistist521BT-Roman);
    font-weight: normal;
    letter-spacing: 0.75px;
    color: #FFFFFF;
    padding-bottom: 0!important;
}



















.titulo_gastro_modal {
    font-family: var(--font-family-Humanistist521BT-Bold) !important;
    font-weight: bold;
    font-size: 30px;
    letter-spacing: -1px;
    color: #FFAA38;
    color: rgb(105, 196, 47);
}

.titulo-platillos-bebidas {
    font-family: var(--font-family-Humanistist521BT-Bold) !important;
    font-weight: bold;
    font-size: 13px;
    margin: -5px 0 0 10px;
    padding: 0;
}



.fon-verde {
    background-color: #E1F3D5;
    width: 100%!important;
    cursor:pointer;
    height: 33%!important;
    min-height: 33%!important;;
    max-height: 33%!important;;
}
.fon-blanco {
    width: 100%!important;
    cursor:pointer;
    height: 33%!important;
    min-height: 33%!important;;
    max-height: 33%!important;;
}

/* Estilos responsive para móvil - Costa */
@media (max-width: 1024px) {
    /* Hacer los botones apilados verticalmente en tablet */
    .d-flex.align-items-center.justify-content-between.flex-wrap.gap-3 {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    /* Botones con ancho completo y fondo blanco */
    .icono-container,
    .icono-container-2,
    .carousel {
        width: 100% !important;
        min-width: 100% !important;
        background-color: white !important;
        padding: 15px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        border-radius: 8px !important;
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    /* Iconos y texto más pequeños (25% reducción) */
    .faq-icon {
        width: 41px !important;
        height: 41px !important;
        border-width: 4px !important;
    }

    .signo-pregunta {
        font-size: 26px !important;
        line-height: 33px !important;
    }

    .circulo-pregunta {
        display: none !important;
    }

    .btn-mis-favoritos .icono svg,
    .btn-necesitas-transporte .icono svg {
        width: 41px !important;
        height: 41px !important;
    }

    .btn-mis-favoritos .texto,
    .btn-necesitas-transporte .texto {
        font-size: 12px !important;
    }

    .faq-logo .titulo-pregunta {
        font-size: 12px !important;
    }

    .btn-mis-favoritos,
    .btn-necesitas-transporte {
        gap: 11px !important;
        padding: 11px !important;
        justify-content: center !important;
    }

    /* Centrar el contenido del carrusel */
    .carousel,
    .collapse-icon {
        justify-content: center !important;
    }

    /* Ocultar el botón "CONTACTA UN GUÍA" en móvil (se muestra en footer) */
    .contacta-guia {
        display: none !important;
    }

    /* Contenedor de botones planifica */
    .promo-one.plani-viaje .auto-container.row[style*="margin-left"] {
        margin-left: 0 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px;
        padding: 0 10px;
    }

    /* Botones Top Ciudades, Top Gastronomía, etc. */
    .btn_planifica {
        width: calc(50% - 5px) !important;
        min-width: 140px !important;
        height: 50px !important;
        font-size: 14px !important;
        margin-right: 0 !important;
        white-space: nowrap;
        padding: 0 5px !important;
    }

    /* Contenedor de carruseles */
    .promo-one.plani-viaje .col-lg-12[style*="margin-left"] {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 15px;
    }

    /* Botones de navegación del carrusel (flechas) - Ocultar en móvil */
    .carrusel-tops .owl-prev,
    .carrusel-tops .owl-next,
    .carrusel-tops .owl-nav,
    .owl-carousel .owl-prev,
    .owl-carousel .owl-next,
    .owl-carousel .owl-nav {
        display: none !important;
    }

    /* Ocultar dots de navegación en móvil */
    .carrusel-tops .owl-dots,
    .owl-carousel .owl-dots {
        display: none !important;
    }

    /* Eliminar padding/margin extra del carrusel */
    .owl-carousel .owl-stage-outer {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Permitir navegación táctil en carruseles */
    .owl-carousel {
        touch-action: pan-y pinch-zoom !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Carrusel de planifica viaje - ajustes finales */
    .carrusel-tops {
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .carrusel-tops .owl-stage-outer,
    .carrusel-tops .owl-stage {
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .carrusel-tops .owl-item {
        height: auto !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Eliminar cualquier padding/margin del contenedor padre */
    .promo-one.plani-viaje .col-lg-12 {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Sobrescribir el margin-bottom: 4vh del contenedor */
    .promo-one.plani-viaje .col-lg-12[style*="margin-bottom"] {
        margin-bottom: 0 !important;
        margin-top: 2vh !important;
    }

    /* Imágenes del carrusel - Evitar que se aplasten */
    .carrusel-tops .card-img-top,
    .carrusel-tops img[style*="height: 26vh"] {
        height: auto !important;
        width: 100% !important;
        aspect-ratio: 4/3 !important;
        object-fit: cover !important;
    }

    /* Sobrescribir CUALQUIER elemento con height en vh dentro del carrusel */
    .carrusel-tops [style*="height"][style*="vh"],
    .carrusel-tops div[style*="34.976vh"],
    .carrusel-tops *[style*="vh"] {
        height: auto !important;
    }

    /* Sobrescribir width en vw también */
    .carrusel-tops [style*="width"][style*="vw"],
    .carrusel-tops div[style*="18.525vw"] {
        width: 100% !important;
    }

    /* Cards del carrusel */
    .carrusel-tops .card {
        width: 100% !important;
        height: auto !important;
    }

    .carrusel-tops .gallery-block_two {
        margin: 0 !important;
        height: auto !important;
        width: 100% !important;
    }

    /* Elementos internos de las cards */
    .carrusel-tops .gallery-block_two > div,
    .carrusel-tops .card > div {
        height: auto !important;
        width: 100% !important;
    }

    /* Textos de las tarjetas del carrusel */
    .carrusel-tops .hotel-block_one-heading {
        font-size: 14px !important;
    }

    .carrusel-tops .hotel-block_one-heading img[src*="ubicacion"] {
        height: 16px !important;
        width: 16px !important;
    }

    /* Separación de la sección completa "Planifica tu viaje" */
    .plani-viaje {
        padding-bottom: 1.6vh !important;
        margin-bottom: 1.2vh !important;
    }

    /* Separación del carrusel de texto para evitar sobreposición */
    .plani-viaje-carru-foot {
        margin-bottom: 1.2vh !important;
    }

    /* Espacio adicional en el contenedor del carrusel */
    .row.auto-container.d-flex.align-items-center.justify-content-between.flex-wrap {
        margin-bottom: 1.2vh !important;
    }

    /* Sección footer con margen superior adicional */
    section.footer {
        margin-top: 1.6vh !important;
        padding-top: 1.2vh !important;
    }

    /* Título "Próximos Eventos" con margen superior */
    .titulo-footer-proximos-eventos {
        margin-top: 0.8vh !important;
        padding-top: 0.6vh !important;
    }

    /* Carrusel de eventos con espacio inferior para no tocar el footer */
    .proximos-event-footer {
        margin-bottom: 3vh !important;
    }
}

/* Responsive styles for slider-sec2 carousel - Mobile */
@media (max-width: 768px) {
    /* Stack layout vertically in mobile */
    .sec-2-mapa .row {
        flex-direction: column !important;
    }

    .sec-2-mapa .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 3vh !important;
        overflow: visible !important;
    }

    /* Carousel container */
    .sec-2-mapa .slider-sec2 {
        margin: 0 auto !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 5vh !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* Allow owl-stage-outer to show overflow */
    .sec-2-mapa .slider-sec2 .owl-stage-outer {
        overflow: visible !important;
    }

    .sec-2-mapa .slider-sec2 .owl-stage {
        display: flex !important;
        align-items: center !important;
    }

    /* Make cards slightly transparent on sides to show peek effect */
    .sec-2-mapa .slider-sec2 .owl-item:not(.active) .card {
        opacity: 0.6 !important;
        transform: scale(0.9) !important;
        transition: all 0.3s ease !important;
    }

    .sec-2-mapa .slider-sec2 .owl-item.active .card {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    /* Parent container must allow overflow */
    .sec-2-mapa .d-flex[style*="background-image"] {
        background-size: cover !important;
        height: auto !important;
        min-height: 60vh !important;
        padding: 2vh 0 !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    /* Carousel cards */
    .sec-2-mapa .slider-sec2 .card {
        height: auto !important;
        max-width: 100% !important;
    }

    /* Navigation arrows for carousel */
    .owl-prev-slider-sec2,
    .owl-next-slider-sec2 {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 30px !important;
        height: 30px !important;
    }

    .owl-prev-slider-sec2 {
        left: 5px !important;
    }

    .owl-next-slider-sec2 {
        right: 5px !important;
    }

    /* Video button below carousel */
    .sec-2-mapa .d-flex.pointer[style*="margin-top: 1.5vh"] {
        width: 90% !important;
        margin: 2vh auto 0 auto !important;
        justify-content: center !important;
    }

    .sec-2-mapa .d-flex.pointer img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 60px !important;
    }

    /* SVG Map container */
    .sec-2-mapa .container.col-lg-6 {
        padding: 0 15px !important;
    }

    .sec-2-mapa .content {
        background-position: center !important;
    }

    /* SVG map responsive */
    .sec-2-mapa .svg-container {
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        padding: 2vh 0 !important;
    }

    .sec-2-mapa .svg-container svg {
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
    }

    #regionCuadroInfo {
        margin-left: 0 !important;
        margin-top: 2vh !important;
    }
}

/* Search bar styles - Mobile */
@media (max-width: 768px) {
    /* Contenedor del buscador más ancho en móvil */
    #buscador {
        width: 85vw !important;
        left: 7.5vw !important;
        right: 7.5vw !important;
        height: auto !important;
        min-height: 7vh !important;
    }

    /* Barra de búsqueda más ancha en móvil */
    .search-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        height: 50px !important;
    }

    .form-group {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Search bar styles - Desktop */
@media (min-width: 769px) {
    .search-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        height: 50px !important;
    }

    .form-group {
        width: 100% !important;
    }
}

/* Ancho estandarizado para desktop */
@media (min-width: 769px) {
    .icono-container,
    .icono-container-2,
    .carousel {
        min-width: 14.362vw !important;
        justify-content: center;
    }
}