/* Efecto scroll smooth en los anchors */
html {
    scroll-behavior: smooth;
    container-type: scroll-state;
}

#sticky-wrapper>header {
    z-index: 9999;
}

/* sticky més petit */
body.admin-bar #sticky-wrapper.is-sticky>header {
    padding-top: 32px;
}

.is-sticky .head-top-in {
    transition: all 0.5s ease;
    padding-top: 10px;
    padding-bottom: 10px;
}

.is-sticky .stick-logo {
    height: 45px;
}

.is-sticky .hdr-links ul li a:is(.search, .heart, .lang) {
    width: 40px;
    height: 40px;
}

.is-sticky .hdr-links ul li a.lang {
    width: 50px;
    column-gap: 5px;
}

.is-sticky .hdr-links ul li a.lang span img {
    margin: 0;
}

.is-sticky .cbp-hrmenu .cbp-hrsub {
    padding-top: 14px;
}

/* end sticky més petit */

.mobile-menu .menu-inn {
    overflow-y: initial !important;
}

.breadcrum ul li {
    line-height: 21px;
}

img.theme-placeholder-img {
    object-fit: scale-down !important;
    background-color: #fff;
    padding: 10px;
    border: 3px solid rgba(2, 127, 111, 0.17);
    border-radius: 2px;
}

body:not(.fixed-header) #sticky-wrapper:not(.is-sticky) header:not(.dark-bg) a.lang.js-lang-trigger {
    color: #333;
}

body:not(.fixed-header) #sticky-wrapper:not(.is-sticky) header:not(.dark-bg) a.lang.js-lang-trigger:hover {
    color: #fff;
}

/* Datepicker Calendar FIX */
.calendar .ui-datepicker-calendar .ui-datepicker-current-day:after {
    position: absolute;
    display: block;
    content: "";
    width: 35px;
    height: 35px;
    z-index: -1;
    border-radius: 50%;
    left: -1px;
    top: -1px;
    opacity: 1;
    right: 0;
    margin: auto;
    bottom: 0;
    transition: all 0.5s ease;
    background: #007F6F;
}

.calendar .ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default.ui-state-active {
    color: #fff;
}

/* AGENDA */
:is(.exp-main, .blog-main) .exp-img img.card-image {
    aspect-ratio: 16 / 11;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* BLOG */
.blog-img img.card-image,
.blog-top .blog-image img.card-image {
    aspect-ratio: 15 / 7;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.blog-img img.card-image {
    aspect-ratio: 16 / 11;
}

/* MAPA MUNICIPIS */
.mapa-cont-div ul.map-list {
    pointer-events: none;
}

.mapa-cont-div ul.map-list li {
    pointer-events: auto;
}

.pop-in-cont {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 200px;
    position: relative;
    z-index: 10;
}

.pop-img {
    margin-bottom: 8px;
    border-radius: 4px;
    overflow: hidden;
    line-height: 0;
}

.pop-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 10;
}

.pop-in-cont h2 {
    font-size: 15px;
    margin: 0;
    line-height: 1.2;
}

.pop-in-cont h2 a {
    color: #333;
    text-decoration: none;
}

.pop-in-cont h2 a:hover {
    color: #007F6F;
}

.mapa-cont-div ul.map-list li.golf-map1 {
    position: absolute;
    top: 86%;
    left: 11%;
}

.mapa-cont-div ul.map-list li.golf-map2 {
    position: absolute;
    top: 90%;
    left: 17%;
}

.mapa-cont-div ul.map-list li.golf-map3 {
    position: absolute;
    top: 100%;
    left: 51%;
}

.mapa-cont-div ul.map-list li.golf-map4 {
    position: absolute;
    top: 94%;
    left: 30%;
}

.mapa-cont-div ul.map-list li.golf-map5 {
    position: absolute;
    top: 76%;
    left: 21%;
}

.mapa-cont-div ul.map-list li.golf-map6 {
    position: absolute;
    top: 46%;
    left: 5%;
}

.mapa-cont-div ul.map-list li.golf-map7 {
    position: absolute;
    top: 30%;
    left: 11%;
}

.mapa-cont-div ul.map-list li.golf-map8 {
    position: absolute;
    top: 40%;
    left: 15%;
}

.mapa-cont-div ul.map-list li.golf-map9 {
    position: absolute;
    top: 41%;
    left: 26%;
}

.mapa-cont-div ul.map-list li.golf-map10 {
    position: absolute;
    top: 48%;
    left: 30%;
}

.mapa-cont-div ul.map-list li.golf-map11 {
    position: absolute;
    top: 40%;
    left: 32%;
}

.mapa-cont-div ul.map-list li.golf-map12 {
    position: absolute;
    top: 30%;
    left: 23%;
}

.mapa-cont-div ul.map-list li.golf-map13 {
    position: absolute;
    top: 59%;
    left: 25%;
}

.mapa-cont-div ul.map-list li.golf-map14 {
    position: absolute;
    top: 83%;
    left: 32%;
}

.mapa-cont-div ul.map-list li.golf-map15 {
    position: absolute;
    top: 73%;
    left: 34%;
}

.mapa-cont-div ul.map-list li.golf-map16 {
    position: absolute;
    top: 85%;
    left: 46%;
}

.mapa-cont-div ul.map-list li.golf-map17 {
    position: absolute;
    top: 68%;
    left: 44%;
}

.mapa-cont-div ul.map-list li.golf-map18 {
    position: absolute;
    top: 82%;
    left: 55%;
}

.mapa-cont-div ul.map-list li.golf-map19 {
    position: absolute;
    top: 92%;
    left: 62%;
}

.mapa-cont-div ul.map-list li.golf-map20 {
    position: absolute;
    top: 89%;
    left: 69%;
}

.mapa-cont-div ul.map-list li.golf-map21 {
    position: absolute;
    top: 66%;
    left: 52%;
}

.mapa-cont-div ul.map-list li.golf-map22 {
    position: absolute;
    top: 50%;
    left: 37%;
}

.mapa-cont-div ul.map-list li.golf-map23 {
    position: absolute;
    top: 56%;
    left: 45%;
}

.mapa-cont-div ul.map-list li.golf-map24 {
    position: absolute;
    top: 58%;
    left: 54%;
}

.mapa-cont-div ul.map-list li.golf-map25 {
    position: absolute;
    top: 73%;
    left: 10%;
}

.mapa-cont-div ul.map-list li.golf-map26 {
    left: 36%;
    top: 96%;
    position: absolute;
}

.mapa-menu {
    overflow: auto;
}

/* end MAPA MUNICIPIS */

/* single municipi */
.ruta-01-slider .swiper-slide img {
    width: 100%;
    float: left;
    aspect-ratio: 16 / 15;
    object-fit: cover;
}

.tossa-slide .swiper-slide img {
    height: auto;
    aspect-ratio: 14 / 7;
    object-fit: cover;
}

.recursos-list .swiper-slide ul li .gallery-item img {
    aspect-ratio: 16 / 16;
    object-fit: cover;
}

.munici-sec {
    width: 100%;
    float: left;
    background: #fff;
    padding: 0 0 80px 0;
}

.munici-inner {
    width: 100%;
    float: left;
}

.munici-lft {
    width: 50%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* position: sticky;
    top: 150px; */
}

.munici-rgt {
    width: 43%;
    float: right;
}

body.single-municipi .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #007F6F !important;
}

.blog-controls .swiper-button-post-prev,
.blog-controls .swiper-button-post-next {
    cursor: pointer;
    background: #fff;
    width: 50px;
    height: 50px;
    border: 2px solid rgba(51, 51, 51, 0.18);
    border-radius: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

.blog-controls .swiper-button-post-prev:hover,
.blog-controls .swiper-button-post-next:hover {
    background: #007F6F;
}

.blog-controls .swiper-button-post-prev:hover img,
.blog-controls .swiper-button-post-next:hover img {
    filter: brightness(0) invert(1);
}

/* descobreix */
.descobreix-list ul li .descobreix-img img {
    height: auto;
    aspect-ratio: 20 / 12;
    object-fit: cover;
}

/* single-ruta */
.filter-tag ul {
    row-gap: 5px;
}

.dades-sec ul li.type::after {
    background: url(../images/icones/circular.svg) no-repeat 0;
    width: 21px;
    height: 21px;
}

.dades-sec ul li.type-36::after {
    background-image: url(../images/icones/circular.svg);
}

.dades-sec ul li.type-37::after {
    background-image: url(../images/icones/lineal.svg);
}

.dades-sec ul li.type-49::after {
    background-image: url(../images/icones/circular.svg);
}

/* tots els titols de fitxes amb mateixa mida */
.blanes-sec h2,
body.single:not(.single-municipi) .inner-banner h2 {
    font-size: 50px;
    line-height: 60px;
}

.dades-sec .dades-cols {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 30px;
}

.dades-sec .dades-cols ul {
    flex: 1;
    min-width: 250px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dades-sec .dades-cols ul li {
    flex: 0 1 100%;
}

@media (max-width: 600px) {
    .dades-sec .dades-cols {
        flex-direction: column;
        gap: 20px;
    }

    .dades-sec .dades-cols ul {
        width: 100%;
    }
}

.filter-tag.blanes ul li {
    align-self: flex-start;
    height: auto;
}

.dades-sec ul li.desnivel-positivo::after {
    background: url(../images/desnivell-positiu.svg) no-repeat 0;
    width: 18px;
    height: 21px;
}

.dades-sec ul li.desnivel-negativo::after {
    background: url(../images/desnivell-negatiu.svg) no-repeat 0;
    width: 18px;
    height: 21px;
}

/* rutes-main */
.trobat-list ul li .filter-tag ul {
    row-gap: 10px;
}

.rutes-filter-list ul li .nice-select.select_box .list {
    max-height: 300px;
    overflow-y: auto;
}

/* senders-main */
/* --- 1. CONTENEDOR DEL MAPA --- */
#map {
    height: 600px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    /* Evita solapamiento con menús */
}

/* --- 2. ESTRUCTURA DEL POPUP (LEAFLET OVERRIDES) --- */
.leaflet-custom-card .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
}

.leaflet-custom-card .leaflet-popup-content {
    margin: 0;
    width: 280px !important;
    font-family: 'Inter', sans-serif;
}

/* Estilo para la línea interactiva del mapa */
.leaflet-interactive {
    outline: none;
    cursor: pointer;
}

/* --- 3. DISEÑO INTERNO DEL POPUP (CARD) --- */
.custom-route-popup .popup-image {
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    position: relative;
    transition: opacity 0.2s ease-in-out;
}

.custom-route-popup .popup-image:hover {
    opacity: 0.9;
}

.custom-route-popup .popup-body {
    padding: 10px;
}

.custom-route-popup .popup-title a {
    font-family: 'Poppins-Medium', sans-serif;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    line-height: 1.2;
    display: block;
    margin-bottom: 8px;
}

.custom-route-popup .popup-title a:hover {
    color: #007F6F;
}

.custom-route-popup .popup-meta {
    font-family: 'Poppins-Regular', sans-serif;
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

/* --- 4. BADGES Y ETIQUETAS --- */
.custom-route-popup .popup-tags,
.custom-route-popup .popup-footer {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.custom-route-popup .tag-icon {
    background: #007d67;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Poppins-Regular';
}

.custom-route-popup .tag-difficulty,
.custom-route-popup .tag-location {
    background: white;
    color: #555;
    border: 1px solid #ccc;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Poppins-Regular';
}

.custom-route-popup .popup-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

/* --- 5. BOTÓN DE CIERRE (X) --- */
.leaflet-custom-card .leaflet-popup-close-button {
    position: absolute;
    top: 5px !important;
    right: 8px !important;
    z-index: 1000;
    color: #ffffff !important;
    font-size: 24px !important;
    font-family: Arial, sans-serif;
    font-weight: 100;
    opacity: 1 !important;
    /* Contorno negro para visibilidad en fondos claros */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8),
        -1px -1px 1px rgba(0, 0, 0, 0.8),
        1px -1px 1px rgba(0, 0, 0, 0.8),
        -1px 1px 1px rgba(0, 0, 0, 0.8) !important;
}

.leaflet-custom-card .leaflet-popup-close-button:hover {
    opacity: 0.8 !important;
    background: none !important;
}

/* header - idiomes */
/* Contenedor principal */
.hdr-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

/* El "botón" circular/ovalado de la imagen */
.hdr-links a.lang {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 5px 15px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    background: transparent;
    transition: background 0.3s ease;
}

.hdr-links a.lang:hover {
    background: rgba(255, 255, 255, 0.1);
}

.hdr-links a.lang span img {
    width: 16px;
    margin-left: 8px;
    display: block;
}

/* Lógica del desplegable */
.menu-item-language {
    position: relative;
}

.sub-menu-langs {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    min-width: 80px;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 999;
    overflow: hidden;
}

.sub-menu-langs li a {
    color: #333;
    padding: 10px 15px;
    display: block;
    text-decoration: none;
    font-size: 13px;
    text-align: center;
}

.sub-menu-langs li a:hover {
    background: #FFB300;
}

.menu-item-language .sub-menu-langs {
    display: none;
}

.menu-item-language.is-open .sub-menu-langs {
    display: block;
}

.hdr-links ul li a {
    width: 100%;
}

/* PATRIMONI */
.patrimoni-list ul li .patrimoni-img img {
    aspect-ratio: 42/43;
}

.contingut-flexible-alineacio-esquerra,
.contingut-flexible-alineacio-esquerra :is(h2, p) {
    text-align: left;
    padding-left: 0;
}

.contingut-flexible-alineacio-dreta,
.contingut-flexible-alineacio-dreta :is(h2, p) {
    text-align: right;
    padding-right: 0;
}

/* PATRIMONI LIST MAP */
/* 1. Eliminamos el padding del contenedor principal y forzamos el diseño a sangre */
.mapa-google .gm-style-iw.gm-style-iw-c {
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2. Ocultamos la barra de cabecera que reserva Google, pero dejamos el botón */
.mapa-google .gm-style-iw-chr {
    position: absolute !important;
    top: 0;
    right: 0;
    width: 100%;
    height: 0;
    /* Colapsamos la altura para que no empuje la imagen */
    z-index: 10;
}

/* 3. Estilo para la X nativa: la posicionamos encima de la imagen */
.mapa-google .gm-ui-hover-effect {
    position: absolute !important;
    top: 8px !important;
    /* Ajusta según prefieras */
    right: 8px !important;
    /* Ajusta según prefieras */
    background-color: rgba(255, 255, 255, 0.7) !important;
    /* Fondo circular para que se vea bien */
    border-radius: 50% !important;
    width: 32px !important;
    /* Hacemos el botón un poco más pequeño para que sea elegante */
    height: 32px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 4. Ajustamos el icono de la X dentro del botón */
.mapa-google .gm-ui-hover-effect span {
    margin: 4px !important;
    /* Centramos el icono SVG */
}

/* 5. Quitamos cualquier padding del contenedor de datos interno */
.mapa-google .gm-style-iw-d {
    overflow: hidden !important;
    /* Evita scrolls innecesarios */
    padding: 0 !important;
}

/* 6. Aseguramos que tu div de imagen no tenga márgenes */
.mapa-google .custom-route-popup {
    margin: 0 !important;
    padding: 0 !important;
}

.mapa-google .popup-image {
    margin: 0 !important;
    border-top-left-radius: 8px;
    /* Si quieres redondear las esquinas superiores */
    border-top-right-radius: 8px;
}

/* SANT JAUME */
.ruta-01-controls .swiper-pagination-ruta-01 {
    justify-content: left;
    flex-flow: wrap;
    row-gap: 10px;
}

.xarxa-cnt h2 strong {
    display: block;
    color: #007F6F;
}

.arbol-tab-div ul.tabs li {
    padding: 5px 0;
}

.arbol-tab-div ul.tabs li a {
    /* padding: 0 42px; */
    padding: 0 10px;
    line-height: 15px;
}

.arbol-tab-div ul.tabs li:hover a {
    color: #fff;
}

/* ESSENCIES */
.patrimoni-list.columns-4 ul li {
    flex: 0 1 22.9%;
}

.rutas-main .rutas-img img.theme-placeholder-img {
    aspect-ratio: 14 / 18;
}

.rutas-sec.show-swiper-controls .rutas-controls {
    position: relative;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.rutas-sec.show-swiper-controls .rutas-controls .swiper-button-prev-rutas,
.rutas-sec.show-swiper-controls .rutas-controls .swiper-button-next-rutas {
    cursor: pointer;
    background: #fff;
    width: 50px;
    height: 50px;
    border: 2px solid rgba(51, 51, 51, 0.18);
    border-radius: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

.rutas-sec.show-swiper-controls .swiper-button-prev-rutas:hover,
.rutas-sec.show-swiper-controls .swiper-button-next-rutas:hover {
    background: #007F6F;
}

.rutes-filter-list.col-4 ul li {
    flex: 0 1 24%;
}

/* single essencia */
.dades-sec .quick-link ul li.cal:after {
    background: url(../images/calendar.svg) no-repeat 0;
    width: 20px;
    height: 20px;
}

.blanes-cnt .serveis ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 20px;
}

.blanes-cnt .serveis ul>li {
    list-style-type: disc;
    margin-bottom: 10px;
}

body.single-essencia .dades-sec>span {
    margin: 0 5px 5px 0;
}

/* --- ESTILOS DEL MARCADOR DE MUNICIPIO (LEAFLET DIVICON) --- */
.leaflet-mun-div-icon {
    background: transparent;
    border: none;
}

.custom-mun-marker {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
    position: relative;
    gap: 3px;
}

.custom-mun-marker:after {
    display: none;
}

.mun-marker-title {
    font-family: inherit;
    font-size: 15px;
    color: #fff !important;
    font-weight: 500;
    background-color: #007F6F;
    padding: 6px 12px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    margin-bottom: 0;
    display: block;
    text-decoration: none;
    transition: background-color 0.2s;
}

/* mes petit */
.mun-marker-title {
    font-size: 13px;
    padding: 2px 10px;
}

.mun-marker-title:hover {
    background-color: #006053;
}

.mun-marker-routes {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.mun-route-link {
    background-color: #fff;
    color: #333 !important;
    font-size: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* mes petit */
.mun-route-link {
    height: 24px;
}

.mun-route-link:hover {
    background-color: #f7f7f7;
    color: #007F6F !important;
    transform: translateY(-2px);
}

.block-cards.estil_3_cols-arrodonit ul li .patrimoni-img {
    float: left;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.block-cards.estil_3_cols-arrodonit ul li .patrimoni-img img {
    aspect-ratio: 42/39;
}

.block-cards.estil_3_cols-arrodonit .patrimoni-list ul li:hover .patrimoni-cnt p {
    color: #333333;
}

/* Contingut flexible - Cards - 4 columnes */
.rutas-main.columns-4 .rutas-img img {
    aspect-ratio: 18 / 23;
    object-fit: cover;
}

/* Contingut flexible - Cards - 4 columnes - Masonry Layout */
.block-cards.contrastos-slider .swiper-wrapper {
    column-gap: 1px;
}

.block-cards.contrastos-slider .paisatge-img img {
    aspect-ratio: 31 / 43;
    object-fit: cover;
}

/* Contingut flexible - Títol + Descripció */
.descobreix-title h2>p {
    width: 100%;
    float: left;
    text-align: center;
    color: #333333;
    font-family: 'Poppins-Medium';
    font-size: 50px;
    line-height: 55px;
    letter-spacing: -1.77px;
    margin-bottom: 25px;
}

.rutas-inner h2>p {
    float: left;
    width: 100%;
    font-family: 'Poppins-Regular';
    font-size: 70px;
    line-height: 75px;
    letter-spacing: -2.48px;
    color: #333333;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .rutas-inner h2>p {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1.95px;
    }
}

@media screen and (max-width: 767px) {
    .rutas-inner h2>p {
        font-size: 32px;
        line-height: 40px;
        text-align: center;
        letter-spacing: -1.95px;
    }
}

.rutas-inner h2 strong {
    font-family: 'Poppins-Bold';
    color: #007F6F;
}

.rutas-inner p strong {
    font-family: 'Poppins-Bold';
}

/* Contingut flexible - CTA Coneix */
.coneix-cont h2>p {
    width: 100%;
    float: left;
    color: #fff;
    font-size: 85px;
    line-height: 75px;
    letter-spacing: -3.01px;
    font-family: 'Poppins-Regular';
    margin-bottom: 25px;
}

@media screen and (max-width: 767px) {
    .coneix-cont h2>p {
        font-size: 36px;
        line-height: 36px;
        letter-spacing: -1.95px;
        margin-bottom: 20px;
    }
}

.coneix-cont h2 strong {
    color: #FFC300;
    font-family: 'Poppins-Bold';
}

.coneix-cont a.saber-btn:hover {
    color: #333333 !important;
}

/* Contingut flexible - Banner Selva Interactiva */
.inter-left h2>p {
    width: 100%;
    float: left;
    font-family: 'Poppins-Regular';
    color: #fff;
    font-size: 85px;
    line-height: 85px;
    letter-spacing: -3.01px;
    margin-bottom: 25px;
}

.inter-left h2 strong {
    font-family: 'Poppins-Bold';
    color: #FFB300;
}

@media screen and (max-width: 767px) {
    .inter-left h2>p {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: normal;
    }
}

/* Contingut flexible - Banner Coneix el territori */
.mapa-home>svg {
    width: 100% !important;
}

.territory-main .territory-img img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.territorio-lft h2>p {
    width: 100%;
    float: left;
    font-family: 'Poppins-Regular';
    color: #ffffff;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: -2.13px;
    margin-bottom: 20px;
}

.territorio-lft h2 strong {
    color: #FFB300;
    font-family: 'Poppins-Bold';
}

@media screen and (max-width: 767px) {

    .territorio-lft h2>p {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -1px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 479px) {

    .territorio-lft h2>p {
        font-size: 28px;
        line-height: 32px;
    }
}

/* home */
.mapa-home .map-area {
    cursor: pointer;
}

.mapa-home .map-area:hover {
    fill: #FFB300 !important;
    fill-opacity: 1;
}

/* Home slider video */
.slider .swiper-slide {
    position: relative;
    overflow: hidden;
}

.slider .swiper-slide>video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 1024px;
}

.slider .swiper-slide>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider .swiper-slide>video+img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Home slider navigation spacing fixes */
.swiper-pagination-home {
    display: flex !important;
    gap: 15px !important;
    align-items: center;
}

.slider .swiper-navigations {
    width: 100% !important;
    max-width: 1170px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.slider .swiper-button {
    gap: 15px;
}

.swiper-pagination-home .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.3);
    /* Fallback for missing thumbnails */
    flex-shrink: 0;
}

/* Patrimoni video */
.inner-banner,
.inner-banner>:is(video, img) {
    width: 100%;
    height: 725px;
    object-fit: cover;
}

.inner-banner.left,
.inner-banner.left>:is(video, img) {
    width: 100%;
    height: 609px;
    object-fit: cover;
}

/* Ajustes para Tablets */
@media (max-width: 1024px) {

    .inner-banner,
    .inner-banner.left {
        height: 450px;
    }
}

/* Ajustes para Móviles */
@media (max-width: 768px) {

    .inner-banner,
    .inner-banner.left {
        height: 300px;
        /* Altura más cómoda para móvil */
    }
}

/* Filtro negro con opacidad en las cabeceras */
/* 1. El contenedor padre debe ser relativo */
.inner-banner {
    position: relative;
    width: 100%;
    min-height: 400px;
    /* Asegúrate de que tenga una altura */
    overflow: hidden;
}

/* 2. El contenido DEBE ser absoluto para flotar sobre la imagen/video */
.inner-banner .inner-banner-cnt {
    position: absolute !important;
    /* Forzamos absolute */
    width: 100%;
    max-width: 1200px;
    /* O el ancho de tu contenedor */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Centra el contenido flex */
    text-align: center;
}

/* 3. La imagen o video debajo */
.inner-banner>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    /* Tu filtro de oscuridad */
    display: block;
}

/* Galeria d'imatges: que la imatge central sigui de l'amplada del cos de la web, no es faci més gran en pantalles més grans */
/* Configuración para Móvil */
.tossa-slide .swiper-slide {
    /* En móvil queremos que use todo el ancho restando el padding del contenedor */
    width: 100%;
    max-width: 100%;
    transition: transform 0.3s;
    padding: 0 15px;
}

/* Configuración para Pantallas Grandes (Escritorio) */
@media (min-width: 1280px) {
    .tossa-slide .swiper-slide {
        /* Aquí recuperamos el ancho del cuerpo de tu web */
        width: 80%;
        max-width: 1200px;
    }
}

/* Efecto visual opcional */
.tossa-slide .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.5;
    transform: scale(0.9);
}

#map-loader {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
}

a#openLoginModal {
    display: none;
}

/* WISHLIST */
:root {
    --wishlist-font-regular: 'Poppins-Regular' !important;
    --wishlist-font-bold: 'Poppins-SemiBold' !important;
    --wishlist-text-color: #333333;
    --wishlist-text-color-hover: #007F6F !important;
}

.wishlist-ico {
    background-repeat: no-repeat;
    background-position: 10px;
}

.wishlist-ico-black-single {
    width: 21px !important;
    height: 20px !important;
}

.compar-link ul li a:hover .wishlist-ico-black-single {
    background: url(../images/ico-heart-white.svg) no-repeat center center;
}

.exp-main .fav-icon span {
    width: 42px;
    height: 42px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.exp-main .fav-icon span img {
    filter: brightness(0) invert(1);
    width: auto;
}

.sec_experiencia {
    margin: 5%;
    width: 90%;
    float: left;
    background: #fff;
    padding: 0 0 80px 0;
}

.iframe_exp {
    width: 100%;
    height: 615px;
}

/* single blog */
ul.agenda-det-btns li span {
    text-transform: uppercase;
    height: 28px;
    display: flex;
    align-items: center;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 0px 10px;
    color: #333333;
    font-size: 16px;
    font-family: 'Poppins-Regular';
    letter-spacing: -0.57px;
    transition: all 0.4s ease;
}

ul.agenda-det-btns li span:hover {
    background: #007F6F;
    border: 1px solid #007F6F;
    color: #fff;
}

ul.agenda-det-btns li:nth-child(2n) span,
ul.agenda-det-btns li:nth-child(2n) a {
    text-transform: uppercase;
    height: 28px;
    display: flex;
    align-items: center;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 0px 10px;
    color: #333333;
    font-size: 16px;
    font-family: 'Poppins-Regular';
    letter-spacing: -0.57px;
    transition: all 0.4s ease;
}

ul.agenda-det-btns li:nth-child(2n) span:hover,
ul.agenda-det-btns li:nth-child(2n) a:hover {
    background: #007F6F;
    border: 1px solid #007F6F;
    color: #fff;
}

ul.agenda-det-btns li.fecha span,
ul.agenda-det-btns li.fecha a {
    background: #007F6F;
    border: 1px solid #007F6F;
    color: #fff;
    font-family: 'Poppins-SemiBold';
}

ul.agenda-det-btns li.fecha span:hover,
ul.agenda-det-btns li.fecha a:hover {
    background: #fff;
    border: 1px solid #333333;
    color: #333333;
}

/* single agenda */
.agenda-det-cont strong {
    font-family: 'Poppins-Bold';
}

/* la selva */
.fringilla-lft h2 p {
    font-size: 55px;
    line-height: 65px;
    letter-spacing: -1.95px;
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .fringilla-lft h2 p {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -0.95px;
        margin-bottom: 10px;
    }
}

.lght-bg {
    background: rgba(0, 127, 111, 0.1);
}

/* Plantilla per defecte */
body.page-template-default .blog-header h1 {
    width: 100%;
}

body.page-template-default .blog-header h1.mida-gran {
    font-size: 90px;
    line-height: 100px;
    letter-spacing: -3.19px;
}

body.page-template-default .blog-header h1.mida-mitja {
    font-size: 80px;
    line-height: 80px;
    letter-spacing: -2.84px;
}

body.page-template-default .blog-header h1.mida-petit {
    font-size: 50px;
    line-height: 55px;
    letter-spacing: -1.77px;
}

.breadcrum-sec.titol-left .breadcrum ul {
    justify-content: left;
}

.breadcrum-sec.titol-center .breadcrum ul {
    justify-content: center;
}

.breadcrum-sec.titol-right .breadcrum ul {
    justify-content: right;
}

/* CERCADOR */
:root {
    --search_text_normal: 'Poppins-Regular', sans-serif;
    --search_text_medium: 'Poppins-SemiBold', sans-serif;
    --search_text_bold: 'Poppins-SemiBold', sans-serif;
    --search_color: #007F6F;
}

body.search .result-search-inner h1 {
    text-align: center;
    font-size: 34px;
    line-height: 40px;
    margin-bottom: 20px;
}

body.search .arbol-list ul li a.active {
    color: var(--search_color);
}

/* Leer más wysiwyg */
.wysiwyg-content {
    float: left;
}

.read-more-btn {
    display: block;
    margin-top: 15px;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 15px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.57px;
    background: #007F6F;
    border: 1px solid #007F6F;
    color: #fff;
    font-family: 'Poppins-SemiBold';
}

/* CTA Coneix */
.coneix-sec {
    background-image: var(--bg-desk);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    float: left;
    width: 100%;
}

.coneix-cont {
    position: relative !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    float: left;
}

/* --- LEAFLET POPUP STYLE (GOOGLE MAPS INSPIRED) --- */

/* 1. Separación del marcador: lo subimos para que no lo toque */
.leaflet-popup {
    /* Un valor de 15px a 20px creará ese efecto de "flotación" */
    margin-bottom: 18px !important;
}

/* 2. El cuadro blanco: Sombras y bordes */
.leaflet-popup-content-wrapper {
    background: #fff !important;
    color: #333 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.24) !important;
    overflow: hidden;
}

/* 3. Contenedor de texto: Aumentamos el padding inferior */
.leaflet-popup-content {
    line-height: 1.4 !important;
    min-width: 200px !important;
    width: auto !important;
    font-family: 'Poppins-Regular', sans-serif !important;
    float: left;
}

/* 4. Estilos del Título (h6) */
.leaflet-popup-content h6 {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #202124 !important;
    line-height: 18px;
}

/* 5. Estilos del Subtítulo/Dirección (p) */
.leaflet-popup-content p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #70757a !important;
    line-height: 14px;
}

/* 6. Flecha inferior (Pico) */
.leaflet-popup-tip-container {
    display: block !important;
}

.leaflet-popup-tip {
    background: white !important;
}

/* 7. Botón de cerrar (X) */
.leaflet-popup-close-button {
    top: 10px !important;
    right: 10px !important;
    color: #999 !important;
    font-size: 20px !important;
}


/* FIX ALINEACIO BLOC DESCOBREIX */
.descobreix-title.contingut-flexible-alineacio-centre .wysiwyg-content :is(h2, p) {
    text-align: center !important;
}

.descobreix-title.contingut-flexible-alineacio-esquerra .wysiwyg-content :is(h2, p) {
    text-align: left !important;
}

.descobreix-title.contingut-flexible-alineacio-dreta .wysiwyg-content :is(h2, p) {
    text-align: right !important;
}

/* SUBSCRIUTE */
.subscrui-te h2>p {
    color: #fff;
    font-size: 65px;
    line-height: 65px;
    letter-spacing: 0.12px;
    font-family: 'Poppins-Regular';
    text-align: left;
}

.subscrui-te h2>p strong {
    display: block;
    color: #FFB300;
    font-family: 'Poppins-Bold';
}

.chk-box label p {
    color: #fff;
    cursor: pointer;
    padding-bottom: 0px;
    color: #ffffff;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.1px;
    font-family: 'Poppins-Regular';
    padding-left: 26px;
    position: relative;
    float: none;
    display: inline-block;
    width: auto;
    margin-bottom: 0px;
    text-align: left;
    padding-left: 0;
}

.chk-box label p a {
    text-decoration: underline;
    font-family: 'Poppins-Bold';
    font-weight: normal;
    color: #ffffff;
    transition: all .5s ease;
}

.subscribe-form .txt-bx input[type="email"] {
    background: rgba(255, 255, 255, 0.11);
    border: 2px solid rgba(255, 255, 255, 0.42);
    width: 100%;
    height: 58px;
    font-family: 'Poppins-Regular';
    border-radius: 29px;
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0.04px;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 25px;
}

/* Selector estàndard modern */
.subscribe-form .txt-bx input[type="text"]::placeholder,
.subscribe-form .txt-bx input[type="email"]::placeholder {
    color: #ffffff;
    opacity: 1;
    /* Necessari en alguns navegadors com Firefox per evitar que es vegi grisenc */
}

/* Per assegurar compatibilitat amb navegadors més antics */
.subscribe-form .txt-bx input[type="text"]::-webkit-input-placeholder {
    color: #ffffff;
}

.subscribe-form .txt-bx input[type="text"]::-moz-placeholder {
    color: #ffffff;
    opacity: 1;
}

.subscribe-form .txt-bx input[type="text"]:-ms-input-placeholder {
    color: #ffffff;
}

.mc-subscribe-msg {
    display: inline-block;
    line-height: 19px;
    padding: 11px 15px;
    font-size: 14px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.2);
    border-left: 4px solid #ffba00;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    width: 100%;
    margin: 5px 0px 5px 2px;
    margin-top: 20px;
    color: #fff;
}

.mc-subscribe-msg.is-error {
    border-color: #dc3232;
}

.mc-subscribe-msg.is-success {
    border-color: #46b450;
}

.chk-box label::before {
    width: 10px;
    height: 10px;
    top: 5px;
    left: 2px;
}

/* Subscripció - llistes Mailchimp */
.mc-llistes {
    margin-top: 15px;
}

.mc-llistes-title {
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    margin: 15px 0 0 0;
    padding: 0 25px;
    text-align: left;
    font-family: 'Poppins-SemiBold';
    float: left;
}

/* Menys espai entre items de la llista */
.mc-llistes .chk-box {
    margin-top: 10px;
}

/* Checkboxes de llistes quadrats (multi-selecció) per diferenciar-los del LOPD */
.mc-llistes .chk-box label::before,
.mc-llistes .chk-box label::after {
    border-radius: 0;
}

.mc-lopd {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Contingut flexible - Botó */
.block-boto .saber-btn {
    font-family: 'Poppins-SemiBold';
    font-size: 16px;
    line-height: 25px;
    color: #fff;
    padding: 0px 38px;
    background: #007F6F;
    outline: 3px solid rgba(2, 127, 111, 0.17);
    transition: all 0.5s ease;
    border-radius: 43px;
    float: left;
    display: flex;
    height: 53px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid transparent;
}

.block-boto .saber-btn:hover {
    background: #FFB300;
    outline: 3px solid #FFB300;
    color: #333333;
    border: 1px solid transparent;
}

.block-boto>.row2 {
    display: flex;
}

.block-boto.contingut-flexible-boto-alineacio-left>.row2 {
    justify-content: start;
}

.block-boto.contingut-flexible-boto-alineacio-center>.row2 {
    justify-content: center;
}

.block-boto.contingut-flexible-boto-alineacio-right>.row2 {
    justify-content: end;
}

/* bloc propostes destacades */
.bloc-propostes-destacades .filter-title h2 {
    width: auto;
    margin-bottom: 0;
}

.bloc-propostes-destacades .filter-title {
    align-items: center;
    margin-bottom: 50px;
}

.rutas-inner .rutas-rgt p {
    font-family: 'Poppins-Light';
    font-size: 18px !important;
    line-height: 28px !important;
    letter-spacing: -0.26px;
}

.wysiwyg-content a {
    color: #007F6F;
}

.tossa-sec .tossa-lft a {
    color: #007F6F;
    text-decoration: underline;
}

.tossa-sec .tossa-lft a:hover {
    font-weight: bold;
}

.blanes-cnt p a {
    color: #007F6F;
    text-decoration: underline;
}

.blanes-cnt p a:hover {
    font-weight: bold;
}

.agenda-det-cont p a {
    color: #007F6F;
    text-decoration: underline;
}

.agenda-det-cont p a:hover {
    font-weight: bold;
}

.wysiwyg-content a:hover {
    opacity: 1;
    font-weight: bold;
}

.notice.notice-info {
    border-color: #ffba00;
    padding: 20px 15px;
}

/* recorregut municipis */
ul.recorregut-municipis {
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    row-gap: 25px;
}

ul.recorregut-municipis li {
    flex: 0 1 100%;
    padding-left: 40px;
    position: relative;
    color: #262626;
}

ul.recorregut-municipis li:last-child {
    padding-bottom: 0;
}

ul.recorregut-municipis::before {
    position: absolute;
    content: '';
    left: 13px;
    bottom: 0px;
    border-left: 2px solid #007F6F;
    height: 75%;
}

ul.recorregut-municipis li::after {
    position: absolute;
    content: '';
    left: 10px;
    top: 10px;
    background: #007F6F;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dades-sec ul.recorregut-municipis li.location::after {
    left: 5px;
    top: 5px;
}

/* nivells */
.dades-sec ul li.nivell::after {
    background: url(../images/icones/dificultat-01.svg) no-repeat 0;
    width: 20px;
    height: 18px;
}

.dades-sec ul li.nivell-41::after {
    background-image: url(../images/icones/dificultat-01.svg);
}

.dades-sec ul li.nivell-42::after {
    background-image: url(../images/icones/dificultat-02.svg);
}

.dades-sec ul li.nivell-39::after {
    background-image: url(../images/icones/dificultat-03.svg);
}

.dades-sec ul li.nivell-40::after {
    background-image: url(../images/icones/dificultat-04.svg);
}

/* Contenedor principal que alinea los elementos en una fila horizontal */
/* Estado base para todos los cuadrados */
.contenedor-cuadrados {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 300px;
    /* Tu límite actual */
    width: 100%;

    /* MODIFICA SOLO ESTO: El tamaño base de los cuadrados normales */
    --tamano-base: 20px;

    /* El tamaño activo será automáticamente un 60% más grande (factor 1.6) */
    --tamano-activo: calc(var(--tamano-base) * 1.6);
}

/* 2. Aplicamos las variables a los elementos */
.cuadrado {
    width: var(--tamano-base);
    aspect-ratio: 1 / 1;
    /* Obliga a que la altura siempre sea igual al ancho, evitando rectángulos */
    flex-shrink: 1;
    /* Permite que se adapten de forma fluida si el espacio es muy crítico */
    min-width: 0;
    /* Evita el colapso de flexbox */
    transition: width 0.3s ease-in-out;
    /* Animación suave enfocada solo en el cambio de ancho */
}

/* 3. El estado activo cambia el ancho automáticamente usando la variable calculada */
.cuadrado.active {
    width: var(--tamano-activo);
}

/* Paleta cromática exacta extraída de la imagen */
.cuadrado.verde {
    background-color: #84CC36;
}

.cuadrado.azul {
    background-color: #107CC4;
}

.cuadrado.rojo {
    background-color: #C01C28;
}

.cuadrado.negro {
    background-color: #1A1A1A;
}

.veure-mes-btn a {
    font-family: 'Poppins-SemiBold';
    font-size: 16px;
    line-height: 25px;
    color: #fff;
    padding: 0px 38px;
    background: #007F6F;
    outline: 3px solid rgba(2, 127, 111, 0.17);
    transition: all 0.5s ease;
    border-radius: 43px;
    float: left;
    display: flex;
    height: 53px;
    align-items: center;
    justify-content: center;
}

.veure-mes-btn a:hover {
    background: #FFB300;
    outline: 3px solid #FFB300;
    color: #333333;
}

@media screen and (max-width: 767px) {
    .veure-mes-btn a {
        font-size: 14px;
        height: 42px;
        padding: 0px 22px;
    }
}

/* Desactivar hover de los terms en las cards */
.exp-main:hover .filter-tag ul li:not(.active) {
    border-color: #333333;
    color: #333333;
}

/* MARKERCLUSTERS SIN SOLAPARSE */
.leaflet-mun-div-icon {
    background: transparent !important;
    border: none !important;
}

.custom-mun-marker {
    display: inline-flex;
    flex-direction: row;
    /* O column, según tu diseño */
    align-items: center;
    white-space: nowrap;
    /* Evita que el texto del municipio rompa en dos líneas */
    /* background: rgba(255, 255, 255, 0.95); */
    border-radius: 4px;
    /* box-shadow: 0 2px 6px rgba(0,0,0,0.3); */
    will-change: transform;
    /* Evitamos transiciones CSS de movimiento para que el JS calcule las coordenadas exactas al instante */
    transition: none !important;
}

/* Contenedor flotante general */
#map-route-hover-container {
    width: 290px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    overflow: hidden;
    transition: opacity 0.15s ease-in-out;
}

/* Ajustes específicos para la card flotante heredados de exp-main */
#map-route-hover-container .map-hover-card-inner {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

#map-route-hover-container .exp-img {
    height: 160px;
    overflow: hidden;
    position: relative;
    margin: 0;
}

#map-route-hover-container .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#map-route-hover-container .exp-txt {
    padding: 15px;
}

#map-route-hover-container .exp-txt h3 {
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 1.3;
}