/* INDEX */

/* 
1. root
2. COMPONENTS
3. BREADCRUMBS
4. HEAD FICHA RUTAS

*/

:root {
    --Red: #E94646;

    --black-100: #000000;
    --black-90: #2E3036;
    --black-80: #535663;
    --black-60: #787B85;
    --black-40: #DCDEE6;
    --black-20: #EBECF0;
    --black-10: #F0F0F3;
    --white: #FFFFFF;
    --body-bg: #FAFAFA;

    --te-yelow-bg: #FDEDC6;
    --te-yelow: #E2A200;

    --te-green: #7DBA28;
    --te-blue: #017299;
    --te-second-blue: #004489;
    --te-green-light-bg: #DCE6C9;
    --te-blue-light: #9FD9F0;
    --te-blue-light-bg: #DCF4FE;
    --te-second-blue-light-bg: #CADAEB;


    --source-sans: "Source Sans Pro", sans-serif;
    --noto: "Noto Sans", sans-serif;
    --atma: "Atma", cursive;
    --common-trans: ease-in-out .3s;
    --common-trans-2: ease-in-out .5s;
    --common-trans-3: ease-in-out .7s;

    --planificador-desktop: 606px;
    --planificador-tablet: 400px;
    --planificador-mobile: 100%;
}

body,
html {
    overflow-x: hidden;
    width: 100vw;
}

.home-page header {
    position: relative;
}

.home-page header:after {
    content: "";
    width: 100vw;
    height: 2px;
    background-color: var(--black-40);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
}

/* 2. COMPONENTS */
@media(min-width:992px) {
    #header-mobile {
        display: none;
    }

    #header-desktop {
        display: flex;
        flex-direction: column;
    }
}

@media(max-width:991px) {
    #header-mobile {
        display: flex;
        flex-direction: column;
    }

    #header-desktop {
        display: none;
    }

}

#header-desktop .header-menu ul img {
    display: none;
}

#header-mobile .pre-header,
#header-desktop .pre-header {
    display: flex;
    padding: 8px 20px;
    flex-direction: row;
    gap: 16px;

    background-color: var(--black-90);
}

.pre-header ul.social-net-menu {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: auto 0 auto auto;

}

.pre-header .lang-swich {
    color: #FFF;
    font-family: var(--noto);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

#header-mobile .pre-header .deegres {
    margin: auto 0 auto auto;
    border-left: none;

}

.pre-header .deegres {
    color: #FFF;
    font-family: var(--noto);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 0 16px;
    border-left: 1px dashed var(--black-40);
    border-right: 1px dashed var(--black-40);
}

.header-menu {
    padding: 16px 0;
}

.header-menu .col-md-9 {
    display: flex;
    flex-direction: row;
}

.header-menu .main-logo {
    margin-right: 48px;
}

@media(max-width:1399px) {
    .header-menu .main-logo {
        margin-right: 20px;
    }
}

.header-menu ul.main-menu {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: auto 0;
    gap: 16px;
    height: 100%;
    padding: 0;
    margin: 0;
}

.header-menu ul.main-menu li {
    margin: 0;
    padding: 0;
}

.header-menu ul.main-menu li a {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
}

#header-desktop .header-menu ul.main-menu li a::before {
    position: absolute;
    content: "";
    background-color: var(--te-green);
    height: 3px;
    transition: var(--common-trans);
    width: 0%;
    bottom: 0;
    left: 0;
}

#header-desktop .header-menu ul.main-menu li:hover a::before,
#header-desktop .header-menu ul.main-menu li.active a::before {
    width: 100%;
}

.header-menu .icon-menu-right {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    gap: 16px;
}

.header-menu .icon-menu-right .alert-icon-divider {
    padding: 0 16px;
    border-left: 1px dashed var(--black-80);
    border-right: 1px dashed var(--black-80);
}

.header-menu .icon-menu-right .alert-icon-divider svg {
    stroke: var(--black-100);
}

.header-menu .icon-menu-right .alert-icon-divider.active-alert svg {
    stroke: var(--Red);
}

.header-menu .icon-menu-right a.name-user {
    color: var(--black-100);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    padding: 0 16px;
    border-left: 1px dashed var(--black-80);
}

.header-menu .icon-menu-right a.name-user span {
    background-color: var(--black-40);
    border-radius: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black-100);
    width: 32px;
    height: 32px;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}


.header-menu .icon-menu-right .logout {
    border: transparent;
    color: var(--white);
    background-color: var(--te-second-blue);
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
}


@media(max-width:1399px) {
    .header-menu .icon-menu-right a.name-user {
        font-size: 0;
        padding-right: 0;
        gap: 0;
    }

    .header-menu .icon-menu-right .logout {
        font-size: 0;
        gap: 0;
        padding: 8px;
    }
}

@media(max-width:991px) {
    .header-menu .icon-menu-right a.name-user {
        font-size: 0;
        padding-right: 0;
        gap: 0;
    }

    .header-menu .icon-menu-right a.name-user span {
        font-size: 16px;
    }

    .header-menu .icon-menu-right .logout {
        font-size: 0;
        gap: 0;
        padding: 8px;
    }
}

.header-menu .custom-zafan-dropdown {
    border-radius: 8px;
    border: 2px solid var(--black-40);
    background: #fff;
    padding: 16px;
    width: fit-content;
}

.header-menu ul.main-menu .custom-zafan-dropdown li a {
    white-space: nowrap;
    text-align: left;
    justify-content: start;
    padding: 8px 12px;
    border-radius: 4px;
    transition: var(--common-trans);
}

.header-menu ul.main-menu .custom-zafan-dropdown li a:hover {
    background-color: var(--black-20);
}


.header-menu .custom-zafan-dropdown li a::before {
    display: none;
}

.header-menu #menu-mobile .custom-zafan-dropdown {
    position: relative !important;
    top: inherit !important;
    left: inherit !important;
    transform: inherit !important;
    padding: 0;
    width: 100%;
    border: none;
    padding: 12px;
    background-color: transparent;
    transition: var(--common-trans);
}

.header-menu #menu-mobile .custom-zafan-dropdown li a {
    position: relative;
}

.header-menu #menu-mobile li .custom-zafan-dropdown li a {
    background-color: transparent;
    border-radius: 8px;
}

.header-menu #menu-mobile li .custom-zafan-dropdown li.active a {
    background-color: var(--te-green-light-bg);
    width: fit-content;
}

.header-menu #menu-mobile .custom-zafan-dropdown li a::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    height: 2px;
    width: 12px;
    background-color: var(--te-green);
}

#menu-mobile {
    position: fixed;
    top: 0;
    left: 100vw;
    transition: var(--common-trans);
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background-color: var(--black-20);
    display: flex;
    flex-direction: column;
    padding: 88px 32px 32px 32px;
}

#menu-mobile.active {
    left: 0vw;
}

#menu-mobile #close-btn {
    position: absolute;
    right: 32px;
    top: 32px;
    width: fit-content;
    background-color: transparent;
    border: none;

}

#menu-mobile .main-menu {
    display: flex;
    flex-direction: column;
    align-items: inherit;
}

#menu-mobile .main-menu li {
    align-items: inherit;
}

#menu-mobile .main-menu li a {
    align-items: inherit;
    justify-content: inherit;
    font-size: 20px;
    border-radius: 8px;
    gap: 12px;
    background-color: transparent;
    transition: var(--common-trans);
    padding: 8px 16px;

}

#menu-mobile .main-menu li a svg {
    height: auto;
    stroke: var(--black-60);
}

#menu-mobile .main-menu li.active a svg {
    height: auto;
    stroke: var(--te-green);
}

#menu-mobile .main-menu li.active a {
    background-color: var(--te-green-light-bg);
}

#menu-mobile .main-menu li a::after {
    display: none;
}

#menu-mobile .social-net-menu {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: auto 0 0 0;
    padding: 0;
    gap: 16px;
}

#menu-mobile .social-net-menu img {
    stroke: var(--black-60) !important;
}

#header-mobile #open-btn {
    background-color: transparent;
    border: none;
    width: 24px;
    height: 24px;
}

#header-mobile .header-menu {
    padding: 8px 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}

#header-mobile .header-menu .main-logo {
    margin: 0;
}

#header-mobile .header-menu .main-logo img {
    width: 56px !important;
    height: auto !important;
}

#header-mobile .header-menu .icon-menu-right {
    width: fit-content;
}



/*  3. BREADCRUMBS */
#bradcrumbs {
    position: relative;
}

#bradcrumbs::after {
    content: "";
    width: 100vw;
    height: 2px;
    background-color: var(--black-40);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
}

#bradcrumbs p::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--te-green);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}

#bradcrumbs p {
    margin: 0;
    padding: 8px 0;
    position: relative;
    width: fit-content;
    display: flex;
    flex-direction: row;
    gap: 8px;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#bradcrumbs p a {
    color: var(--black-80);
    text-decoration: none;
}

@media(max-width:991px) {
    #bradcrumbs p {
        width: 100%;
        overflow-x: scroll;
        white-space: nowrap;

    }

    #bradcrumbs p a {
        white-space: nowrap;
    }
}


/* 4. HEAD FICHA RUTAS */

#head-ficha-ruta {
    padding: 32px 0 16px 0;
}

#head-ficha-ruta .tags-head-ficha {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 16px;
}

#head-ficha-ruta .tags-head-ficha span {
    display: flex;
    padding: 4px 8px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: var(--black-40);

    color: var(--black-100);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

#head-ficha-ruta .head-ficha {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#head-ficha-ruta .head-ficha h1 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    margin: 0;
}

#head-ficha-ruta .head-ficha p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    margin: 0;

}

#head-ficha-ruta .action-group {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 16px
}

@media(max-width:991px) {
    #head-ficha-ruta .head-ficha h1 {
        font-size: 32px;
    }

    #head-ficha-ruta .action-group {
        justify-content: start;
        padding: 12px 0 32px 0;
    }

    #head-ficha-ruta .head-ficha p {
        font-size: 18px;
    }

}

#head-ficha-ruta .action-group button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--black-40);
    color: var(--black-90);
    border: none;
    padding: 4px;
}

#head-ficha-ruta .action-group button:first-of-type {
    padding: 4px 8px;
    margin-right: 16px;
}

@media(max-width:991px) {
    #head-ficha-ruta .action-group button:first-of-type {
        margin-right: auto;
    }

}

#head-ficha-ruta .action-group .dropdown button {
    margin: 0 !important;
}

#head-ficha-ruta .action-group .dropdown-menu {
    padding: 40px;
    border-radius: 16px;
}

#head-ficha-ruta .action-group .dropdown-menu span {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#head-ficha-ruta .action-group .dropdown-menu .copy-link {
    border-radius: 16px;
    border: 1px solid var(--black-20);
    background: #F9F9F9;
    padding: 10px;
    display: flex;
    flex-direction: row;
    margin-top: 32px;
    justify-content: center;
    align-items: center;
}

#head-ficha-ruta .action-group .dropdown-menu .copy-link button {

    border-radius: 10px;
    background: var(--te-blue);
    color: #FFF;
    text-align: center;
    font-family: var(--source-sans);
    border: 0 transparent solid;
    padding: 12px 20px;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.45px;
    margin-left: 20px !important;
}

#head-ficha-ruta .action-group .dropdown-menu .copy-link p.link {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
    margin: 0;

}

#head-ficha-ruta .custom-offcanvas-actions {
    top: 40px;
    right: 40px;
    border-radius: 20px;
    height: calc(100vh - 80px);
    padding: 24px;

}

@media(max-width:991px) {
    #head-ficha-ruta .custom-offcanvas-actions {
        right: 0;
        top: inherit;
        bottom: 0;
        transform: translateY(100%);
        /* fuera de pantalla */
        height: 80vh;
    }

    #head-ficha-ruta .custom-offcanvas-actions.show {
        transform: translateY(0);
        /* animación hacia arriba */
    }

}


#head-ficha-ruta .custom-offcanvas-actions p.offcanvas-title {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#head-ficha-ruta .custom-offcanvas-actions .offcanvas-header button {
    background-color: transparent;
    margin: auto 0 auto auto;
}

#head-ficha-ruta .custom-offcanvas-actions ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#head-ficha-ruta .custom-offcanvas-actions li a {
    border-radius: 8px;
    border: 1px solid var(--neutral-black-40, #DCDEE6);
    background: var(--neutral-white, #FFF);
    display: flex;
    flex-direction: column;
    padding: 16px 16px 16px 56px;
    text-decoration: none;
    position: relative;
}

#head-ficha-ruta .custom-offcanvas-actions li a strong {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#head-ficha-ruta .custom-offcanvas-actions li a span {
    color: var(--neutral-black-60, #787B85);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#head-ficha-ruta .custom-offcanvas-actions li a img {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 16px;
    left: 16px;
}

#head-ficha-ruta .container-alert {
    display: flex;
    padding: 12px 24px;
    border-radius: 8px;
    background: #F7E8C3;
    gap: 16px;
    margin-top: 16px;
    flex-direction: row;
    flex-wrap: wrap;
}


#head-ficha-ruta .container-alert p {
    margin: 0;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#head-ficha-ruta .container-alert a {
    margin: auto 0 auto auto;
    color: var(--black-100);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 114.286% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;

}

@media(max-width:991px) {
    #head-ficha-ruta .container-alert {
        margin-top: 0;
    }

    #head-ficha-ruta .container-alert p {
        width: calc(100% - 44px);
    }

    #head-ficha-ruta .container-alert a {
        margin: 0 auto 0 40px;
    }
}

/* INFO FICHA */
.ruta-info {
    padding: 32px 0;

}

.ruta-info h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 24px;
}

@media(max-width:991px) {
    .ruta-info h2 {
        margin-top: 24px;
        margin-bottom: 8px;
    }
}

.ruta-info ul {
    display: flex;
    flex-direction: row;
    gap: 32px;
    list-style: none;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.ruta-info ul li {
    display: flex;
    flex-direction: row;
    gap: 12px;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.ruta-info p.traffic-volume {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 24px;
}

.ruta-info p.traffic-volume span {
    display: flex;
    flex-direction: column;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.ruta-info p.traffic-volume span strong {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.ruta-info ul.rut-tipe {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.ruta-info ul.rut-tipe li {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


/* GALERIA FICHA */

#galeria-imgs {
    padding: 32px 0;
}

.grid-imgs-custom {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    border-radius: 16px;
    overflow: hidden;
}

.grid-imgs-custom .main-image {
    grid-row: 1 / span 2;
    /* ocupa las dos filas */
    position: relative;
    min-height: 50vh;
}

@media(max-width:991px) {
    .grid-imgs-custom .main-image {
        min-height: 40vh;
    }
}

.grid-imgs-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.view-all {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--common-trans);
}

.view-all:hover {
    background: rgba(255, 255, 255, 1);
}


#gallery-ficha-ruta .modal-content {
    border: none;
    background-color: transparent;
}

#gallery-ficha-ruta .custom-closer {
    background-color: transparent;
    border: none;
    width: 32px;
    height: 32px;
    padding: 4px;
    margin: 0 0 40px auto;

}

#gallery-ficha-ruta .carousel-control-prev {
    left: -120px;
}

#gallery-ficha-ruta .carousel-control-next {
    right: -120px;
}

#gallery-ficha-ruta .number-item {
    display: block;
    color: #FFF;
    text-align: center;
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
    padding: 32px;
}


/* 5. CUSTOM TABS SECTION */
#section-tabs ul.nav-tabs {
    border: transparent !important;
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding-bottom: 32px;
}

#section-tabs button.nav-link {
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: #FFF;
    color: var(--black-60);
}

@media(max-width:991px) {
    #section-tabs button.nav-link {
        font-size: 18px;
        padding: 8px 12px;
    }
}

#section-tabs button.nav-link.active {
    border-radius: 8px;
    border: 1px solid var(--neutral-black-40, #DCDEE6);
    background: var(--neutral-black-10, #F0F0F3);
    color: var(--black-80);

}

#section-tabs .card-tabs {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    align-self: stretch;
    border-radius: 16px;
    background: var(--body-bg);
    margin-bottom: 32px;
}

@media(max-width:991px) {
    #section-tabs .card-tabs {
        margin-bottom: 12px;
        padding: 16px;
    }
}

#section-tabs .card-tabs h3 {
    color: var(--black-80);
    margin-bottom: 8px;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#section-tabs .card-tabs ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#section-tabs .card-tabs li,
#section-tabs .card-tabs p {
    color: var(--neutral-black-60, #787B85);
    font-family: var(--sanm);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#section-tabs .card-tabs .route-flag {
    width: 56px;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

}

#section-tabs .card-tabs .route-flag span {
    display: flex;
    width: 100%;
    height: 50%;
}

/* #section-tabs .map-interesting-points.active{
    display: flex;
}
#section-tabs .map-interesting-points{
    display: none;
} */

#section-tabs .gallery-interesting-points {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    overflow: hidden;
    border-radius: 8px;
    margin: 16px 0 24px 0;
    z-index: 1;
    min-height: 50vh;
}

#section-tabs .gallery-interesting-points .main-image {
    grid-row: 1 / span 2;
    /* ocupa las dos filas */
    position: relative;
    min-height: 50vh;
}

@media(max-width:991px) {

    #section-tabs .gallery-interesting-points,
    #section-tabs .gallery-interesting-points .main-image {
        min-height: 40vh;
    }
}

#section-tabs .gallery-interesting-points img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover !important;
    object-fit: cover !important;
    display: block;
}





.section-tabs ul li,
.section-tabs p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

.section-tabs .intro-rute {
    margin-bottom: 56px;
}

.interesting-points .point {
    min-height: 100px;
    position: relative;
    margin-bottom: 16px;
}

.interesting-points .point::after {
    content: "";
    position: absolute;
    min-height: 60px;
    height: calc(100% - 40px);
    bottom: 0;
    left: 16px;
    border-left: 1px dashed var(--black-40);
    width: 1px;
}

@media(max-width:991px) {
    .section-tabs .intro-rute {
        margin-bottom: 32px;
    }

    .interesting-points .point {
        min-height: 64px;
    }

    .interesting-points .point::after {
        height: calc(100% - 40px);
        min-height: calc(100% - 40px);
    }



}

.interesting-points .point:is(:last-of-type) {
    min-height: inherit;

}

.interesting-points .point:last-child::after {
    display: none;
}

.swicher-elements {
    position: relative;
    min-height: 50vh;
}

.channge-map {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    padding: 0;
    background-color: transparent;
    z-index: 2;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    outline: 3px solid #fff;
    overflow: hidden;
}

.channge-map img {
    width: 56px;
    height: 56px;
}

.map-interesting-points {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    /* position: absolute; */
    top: 0;
    left: 0;
    height: 50vh;
    margin: 16px 0 24px 0;
}

.map-interesting-points img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-point {
    padding-left: 40px;
    padding-bottom: 16px;
}

.marker-point {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

@media(max-width:991px) {
    .marker-point {
        flex-wrap: wrap;
        font-size: 16px;
    }

    .marker-point a {
        width: calc(100% - 40px);
        margin-left: auto;
    }
}

.marker-point strong {
    font-weight: 600;
}

.marker-point .marker-point-icon {
    position: relative;
    border-radius: 500px;

    width: 32px;
    height: 32px;
    display: block;
}

.marker-point .marker-point-icon svg {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.marker-point.initial-marker .marker-point-icon {
    background-color: var(--te-green-light-bg);
}

.marker-point.initial-marker .marker-point-icon svg {
    fill: var(--te-green);
}

.marker-point.transition-marker .marker-point-icon {
    background-color: var(--te-blue-light-bg);
}

.marker-point.transition-marker .marker-point-icon svg {
    fill: var(--te-blue);
}

.marker-point.ending-marker .marker-point-icon {
    background-color: var(--te-yelow-bg);
}

.marker-point.ending-marker .marker-point-icon svg {
    fill: var(--te-yelow);
}

.marker-point a {
    color: var(--te-green);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: 15%;
    text-underline-position: from-font;
}

.card-transition {
    padding: 0 24px 24px 24px;
    position: relative;
    margin-bottom: 0px;
}

@media(max-width:991px) {
    .card-transition {
        padding: 0 0 16px 0;
    }
}

.card-transition::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: var(--black-40);
    bottom: 0;
    left: 0;
}

.card-transition h3 {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;

}

.card-transition p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

/* JOCS RUTA */
.jocs-ruta {
    padding: 64px 0;
}

.jocs-ruta .card-jocs-ruta {
    border-radius: 16px;
    border: 1px solid var(--black-40);
    background: var(--body-bg);
    padding: 40px;
}

.jocs-ruta h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
}

.jocs-ruta h3 {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    margin-top: 32px;
    margin-bottom: 16px;
}

.jocs-ruta h4 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

.jocs-ruta p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.jocs-ruta .card-jocs-ruta .card-jocs:first-of-type {
    margin-bottom: 16px;
}

.jocs-ruta .card-jocs-ruta .card-jocs {
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: #FFF;
    display: flex;
    flex-direction: row;

    padding: 16px;
    gap: 16px;
}

.jocs-ruta .card-jocs-ruta .card-jocs .caption-card {
    display: flex;
    flex-direction: column;

}

.jocs-ruta .card-jocs-ruta .card-jocs .caption-card p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.jocs-ruta .card-jocs-ruta .card-jocs img {
    height: 64px;
    width: auto;
    margin: 0 auto 0 0;
}

.jocs-ruta .card-jocs-ruta .card-jocs a {
    color: var(--te-green);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: underline;

}

@media(max-width:991px) {
    .jocs-ruta {
        padding: 24px 0;
    }

    .jocs-ruta .card-jocs-ruta {
        padding: 20px;
    }

    .jocs-ruta h2 {
        font-size: 32px
    }

    .jocs-ruta h3 {
        font-size: 20px;
    }

    .jocs-ruta h4 {
        font-size: 18px;
    }

    .jocs-ruta .card-jocs-ruta .card-jocs {
        flex-direction: column;
        gap: 12px;
    }
}


/* ---  */

.gallery-jocs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 2px;
    overflow: hidden;
    border-radius: 8px;
    z-index: 1;
    min-height: 50vh;
}

.gallery-jocs .main-image {
    grid-column: 1 / span 2;
    /* ocupa las dos filas */
    position: relative;
}

.gallery-jocs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

@media(max-width:991px) {
    .gallery-jocs {
        margin-top: 16px;
    }
}


/* METEO */
.meteo {
    padding: 40px 0;
}

.meteo h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.meteo h3 {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0
}

.meteo .row-icons {
    display: flex;
    flex-direction: row;
    gap: 56px;
    flex-wrap: wrap;
    margin: 32px 0;
}

.meteo .row-icons img {
    height: 50px;
    width: 50px;
    border-bottom: 1px solid var(--black-40);
    margin-bottom: 16px;
}

.meteo .row-icons.today-icons p {
    color: #000;
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


.meteo .row-icons p {
    color: #000;
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

@media(max-width:991px) {
    .meteo {
        padding: 0 0 20px 0;
    }

    .meteo .row-icons {
        gap: inherit;
        justify-content: space-between;
        margin: 12px 0;
    }
}


/* ALTRESS RUTES SECTION SLIDER */

.altres-rutes {
    display: flex;
    padding: 64px 0;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: var(--te-green-light-bg);
}

.altres-rutes h2 {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media(max-width:991px) {
    .altres-rutes {
        padding: 20px 0 32px 0;
        gap: 12px;
    }

    .altres-rutes h2 {
        font-size: 24px;
        margin-bottom: 0;
    }
}

/* .container-card{
    padding: 0 16px;
    width: 100%;
} */
.card-slick-carrousel {
    background-color: #000;
    position: relative;
    outline: #fff 8px solid;
    box-sizing: content-box;
    border-radius: 20px;
    overflow: hidden;
    display: flex !important;
    width: 100%;
    height: 100%;

}

.card-slick-carrousel img.main-img-card {
    opacity: .8;
    position: absolute;
    transform: translate(-50%, -50%);
    height: 100%;
    width: auto;
    top: 50%;
    left: 50%;
    z-index: 0;
}

.card-slick-carrousel .caption-card {
    margin: auto 0 0 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    z-index: 2;
    width: 100%;
    border-radius: 12px;
    background: radial-gradient(circle at center bottom, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, 0) 90%);
}

@media(max-width:991px) {
    .card-slick-carrousel .caption-card {
        background: radial-gradient(circle at center bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .7) 60%, rgba(0, 0, 0, 0) 100%);
    }
}

.card-slick-carrousel h3 {
    color: #fff;
    font-family: var(--source-sans);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
}

.card-slick-carrousel .row-icons-caption {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-top: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.card-slick-carrousel .item-row-icons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    color: #fff;
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

}

.card-slick-carrousel .footer-card-caption {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 48px;
    width: 100%;

}

@media(max-width:991px) {
    .card-slick-carrousel .caption-card {
        padding: 12px;
    }

    .card-slick-carrousel h3 {
        font-size: 24px;
        margin-bottom: 0;
    }

    .card-slick-carrousel .row-icons-caption {
        gap: 12px;
        margin-top: 12px;
    }

    .card-slick-carrousel .footer-card-caption {
        margin-top: 24px;
    }
}

.card-slick-carrousel .footer-card-caption span {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: #fff;
    height: fit-content;
    margin: auto auto auto 0;
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.card-slick-carrousel .footer-card-caption a {
    margin: 0 0 0 auto;
    font-size: 18px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 20px 32px;
    border: 0;
    border-radius: 8px;
    background-color: var(--te-green);
    color: #fff;

    font-family: var(--source-sans);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    margin: auto 0 auto auto;
}

@media(max-width:991px) {
    .card-slick-carrousel .footer-card-caption {
        flex-direction: column;
        margin-top: 12px;
    }

    .card-slick-carrousel .footer-card-caption a {
        margin: 20px 0 0 0;
        width: 100%;
        padding: 12px;
        justify-content: center;
        align-items: center;
    }

    .card-slick-carrousel .footer-card-caption span {
        gap: 8px;
    }

}

.card-slick-carrousel .footer-card-caption a img {
    width: 18px;
}

.card-slick-carrousel .footer-card-caption span img {
    width: 16px;
    height: 16px;
}

/* FAQS */

#card-fqs {
    padding: 64px 0;
}

#card-fqs .row {
    border: 1px solid var(--black-40);
    background: var(--body-bg);
    padding: 40px;
}

#card-fqs h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
}


#card-fqs p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

#card-fqs a {
    display: flex;
    margin-top: 24px;
    margin-bottom: 64px;
    flex-direction: row;
    gap: 8px;
    padding: 16px 20px;
    width: fit-content;
    text-decoration: none;
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.controler-faqs {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.controler-faqs .item-faqs {
    padding: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid var(--black-40);
}

#card-fqs .col-md-7 {
    padding-left: 120px;
    border-left: 2px solid var(--black-40);
}

.controler-faqs .item-faqs:last-of-type {
    border: 0px solid transparent;
    padding: 0;
}

#card-fqs .controler-faqs button {
    width: 100%;
    color: var(--black-90);
    font-family: var(--source-sans);
    text-align: left;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    padding: 0 40px 0 0;
    border: none;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    position: relative;

}

#card-fqs .controler-faqs button img {
    position: absolute;
    top: 0;
    right: 0;

}

@media(max-width:991px) {
    #card-fqs .row {
        padding: 32px 8px;
    }

    #card-fqs h2 {
        font-size: 32px;
        margin-bottom: 4px;
    }

    #card-fqs p {
        font-size: 16px;
    }

    #card-fqs a {
        margin: 12px 0 32px 0;
    }

    #card-fqs .col-md-7 {
        padding: 0 calc(var(--bs-gutter-x) * .5);
        border: none;
    }

    .controler-faqs .item-faqs {
        gap: 8px;
    }

    .controler-faqs .item-faqs:first-of-type {
        margin-top: 20px
    }
}


/* map-rutes */
#map-rutes {
    width: 100vw;
    height: calc(100vh - 48px - 103px);
    position: relative;
    overflow: hidden;
}

@media(max-width:991px) {
    #map-rutes {
        height: calc(100vh - 48px - 88px);

    }

}

#map-rutes #map-container {
    position: absolute;
    object-fit: cover;
    width: calc(100% - 606px);
    top: 0;
    right: 0;
    height: 100%;
    transition: var(--common-trans);
}

#map-rutes .col-rutes {
    display: flex;
    height: 100%;
    width: 606px;
    padding: 40px;
    flex-direction: column;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 2;
    position: relative;
    background-color: #fff;
}

#swicher-mobile {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    margin-left: auto;
    margin-right: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    padding: 10px;
    background-color: var(--black-20);
    transition: var(--common-trans);
}

#swicher-mobile img {
    width: 100%;
}

#swicher-mobile.active {
    background-color: var(--te-green);
}

@media(max-width:1599px) {
    #map-rutes #map-container {
        width: 67%;
    }

    #map-rutes .col-rutes {
        max-width: 33%;
        width: 100%;
        padding: 24px;
    }

}

@media(max-width:1199px) {
    #map-rutes .col-rutes {
        padding: 24px;
    }

}

@media(max-width:991px) {
    #map-rutes #map-container {
        width: 45%;
    }

    #map-rutes .col-rutes {
        max-width: 55%;
        width: 100%;
        padding: 20px;
    }

}

@media(max-width:991px) {
    #map-rutes #map-container {
        width: 45%;
    }

    #map-rutes .col-rutes {
        max-width: 55%;
        width: 100%;
        padding: 20px;
    }
}

@media(max-width:767px) {
    #map-rutes #map-container {
        width: 50%;
    }

    #map-rutes .col-rutes {
        max-width: 50%;
        width: 100%;
        padding: 20px;
    }
}

@media(max-width:600px) {
    #swicher-mobile {
        display: flex;
    }

    #map-rutes #map-container {
        max-width: 100%;
        width: 100%;
        right: -100%;
    }

    #map-rutes #map-container.active {
        z-index: 2;
        right: 0%;
    }

    #map-rutes .col-rutes {
        max-width: 100%;
        width: 100%;
        padding: 20px;
    }
}

/* Transit Filters - SgHome */

#map-rutes .col-rutes .col-rutes-header .transit-btns,
.transit-btns {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-right: auto;
}

.transit-btns button.openfilters,
#map-rutes .col-rutes .col-rutes-header .transit-btns button.open-map-filters {
    transition: var(--common-trans);
}

.transit-btns button.openfilters.active,
#map-rutes .col-rutes .col-rutes-header .transit-btns button.open-map-filters.active {
    background-color: var(--black-20);
}

.transit-btns button.openfilters:first-of-type,
#map-rutes .col-rutes .col-rutes-header .transit-btns button.open-map-filters:first-of-type {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.transit-btns button.openfilters:last-of-type,
#map-rutes .col-rutes .col-rutes-header .transit-btns button.open-map-filters:last-of-type {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}




#map-rutes .col-rutes .col-rutes-header {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
}

#map-rutes .col-rutes .col-rutes-header .flex-title {
    display: flex;
    flex-direction: column;
    width: 100%;
}

button.openfilters,
#map-rutes .col-rutes .col-rutes-header button.open-map-filters {
    color: var(--black-90);
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: #FFF;
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 4px;
    width: fit-content;
}

button.openfilters svg,
#map-rutes .col-rutes .col-rutes-header button.open-map-filters svg {
    width: 16px;
    height: auto;
}

@media(max-width:991px) {
    #map-rutes .col-rutes .col-rutes-header .flex-title {
        width: 80%;
    }

    #map-rutes .col-rutes .col-rutes-header button.open-map-filters {
        margin: 0;
    }
}

#map-rutes .col-rutes .col-rutes-header h1 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    width: 100%;
    margin: 0;
}

#map-rutes .col-rutes .col-rutes-header p {
    margin: 0;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#map-rutes .col-rutes .col-rutes-header ul.filtros-list {
    border-top: 1px solid var(--black-20);
    width: 100%;
    padding: 16px 0 0 0;
    display: flex;
    flex-direction: row;
    gap: 12px;
    list-style: none;
    margin: 0;
}



#map-rutes .col-rutes .col-rutes-header ul.filtros-list li {
    padding: 4px 8px;
    gap: 16px;
    border-radius: 4px;
    background: var(--neutral-black-40, #DCDEE6);
}

#map-rutes .col-rutes .col-rutes-body ul.list-rutes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


#map-rutes .col-rutes .col-rutes-body ul.list-rutes li {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: #fff;
    display: flex;
    flex-direction: row;
    gap: 16px;
    transition: var(--common-trans);
}

@media(max-width:991px) {
    #map-rutes .col-rutes .col-rutes-body ul.list-rutes {
        flex-direction: row;
        flex-wrap: wrap;
    }

    #map-rutes .col-rutes .col-rutes-body ul.list-rutes li {
        width: calc(50% - 8px);
    }

    #map-rutes .col-rutes .col-rutes-body ul.list-rutes li p {
        display: none;
    }
}

@media(max-width:767px) {
    #map-rutes .col-rutes .col-rutes-body ul.list-rutes {
        flex-direction: column;
    }

    #map-rutes .col-rutes .col-rutes-body ul.list-rutes li {
        width: 100%;
    }

    #map-rutes .col-rutes .col-rutes-body ul.list-rutes li p {
        display: none;
    }
}


#map-rutes .col-rutes .col-rutes-body ul.list-rutes li.active {
    border-color: var(--te-green);
}

#map-rutes .col-rutes .col-rutes-body ul.list-rutes li figure {
    min-width: 150px;
    min-height: 150px;
    max-width: 150px;
    max-height: 150px;
    border-radius: 16px;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}

@media(max-width:1399px) {
    #map-rutes .col-rutes .col-rutes-body ul.list-rutes li {
        flex-direction: column;
        position: relative;
        gap: 12px;
    }

    #map-rutes .col-rutes .col-rutes-body ul.list-rutes li figure {
        height: 160px;
        width: 100%;
        border-radius: 8px;
        max-width: none;
        max-height: none;
        margin: 0;
    }

    #map-rutes .col-rutes .col-rutes-body ul.list-rutes li .dropdown {
        position: absolute;
        top: 32px;
        right: 32px;
    }
}

#map-rutes .col-rutes .col-rutes-body ul.list-rutes li p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#map-rutes .col-rutes .col-rutes-body ul.list-rutes li .row-icons-card {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
}

#map-rutes .col-rutes .col-rutes-body ul.list-rutes li .row-icons-card .item-icons-card {
    gap: 8px;
    display: flex;
    flex-direction: row;
}

#map-rutes .col-rutes .col-rutes-body ul.list-rutes li h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

@media(max-width:991px) {}

#map-rutes .col-rutes .col-rutes-body ul.list-rutes li .row-icons-card .item-icons-card span {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#map-rutes .col-rutes .col-rutes-body .dropdown-menu p.title-dropdown,
.header-modal-custom .dropdown-menu p.title-dropdown {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 8px;
    padding: 0 8px;
}

#map-rutes .col-rutes .col-rutes-body .dropdown-menu,
.header-modal-custom .dropdown-menu {
    padding: 16px 12px;
    gap: 16px;
    min-width: 302px;
}

#map-rutes .col-rutes .col-rutes-body .dropdown-menu a,
.header-modal-custom .dropdown-menu a {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0;
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 8px;
    border-radius: 4px;
    transition: var(--common-trans);
    text-decoration: none;
}

#map-rutes .col-rutes .col-rutes-body .dropdown-menu a.active,
.header-modal-custom .dropdown-menu a.active {
    background-color: var(--black-20);
}


#map-rutes .col-rutes .col-rutes-body .dropdown-menu .btn-planificador {
    display: flex;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--te-green);
    border: 0px solid transparent;
    display: flex;
    flex-direction: row;
    gap: 12px;
    text-decoration: none;
    color: #fff;
}

#map-rutes .col-rutes .col-rutes-body .dropdown button.opener-drop-down {
    border-radius: 4px;
    background: var(--black-40);
    border: 0 transparent solid;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;

}

/* MODAL FICHA MINI RUTES */

#modal-mini-ficha {
    position: absolute;
    top: 40px;
    left: 40px;
    opacity: 0;
    padding: 20px;
    transition: var(--common-trans);
    height: calc(100vh - 48px - 103px);
    pointer-events: none;
    /* outline: 1px solid red; */
}

#modal-mini-ficha.active {
    z-index: 1000;
    top: 0;
    pointer-events: inherit;
    opacity: 1;
    max-width: 600px;
    min-width: 300px;
    ;
}

#modal-mini-ficha .modal-content {
    border-radius: 16px;
    background: #FFF;
    overflow: hidden;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    padding: 40px;
    max-height: 100%;
    overflow-y: scroll;
}

#modal-mini-ficha .header-modal-custom {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 12px;
    margin-bottom: 16px;
}

#modal-mini-ficha .header-modal-custom .row-tags {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 0 auto 0 0;

}

#modal-mini-ficha .header-modal-custom .row-tags .item-tag {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: var(--black-40);
    color: #000;
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#modal-mini-ficha .header-modal-custom button.opener-drop-down {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--neutral-black-40, #DCDEE6);
    width: 32px;
    height: 32px;
    border: 0 transparent solid;
    padding: 0;

}

#modal-mini-ficha .content-modal-body p.title-rute {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

#modal-mini-ficha .content-modal-body p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 16px;
}

#modal-mini-ficha .content-modal-body figure {
    width: 100%;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 16px;
}

#modal-mini-ficha .content-modal-body .info-modal-rute .title-info {
    color: var(--brand-te-te-second-blue, #004489);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#modal-mini-ficha .content-modal-body .info-modal-rute .icons-list-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 8px 0
}

#modal-mini-ficha .content-modal-body .info-modal-rute .icons-list-info li {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    display: flex;
    flex-direction: row;
    gap: 8px;
}

#modal-mini-ficha .content-modal-body .info-modal-rute p.traffic-volume {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 16px;
}

#modal-mini-ficha .content-modal-body .info-modal-rute p.traffic-volume span {
    display: flex;
    flex-direction: column;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#modal-mini-ficha .content-modal-body .info-modal-rute p.traffic-volume span strong {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#modal-mini-ficha .content-modal-body .info-modal-rute ul.rut-tipe {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
    margin: 0;
    padding: 0;
}

#modal-mini-ficha .content-modal-body .info-modal-rute ul.rut-tipe li {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#modal-mini-ficha a.btn-planificador {
    display: flex;
    flex-direction: row;
    border-radius: 8px;
    background: var(--te-green);
    padding: 16px 20px;
    width: fit-content;
    margin-top: 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 0px solid transparent;
    color: #fff;
    text-decoration: none;
}

@media(max-width:1599px) {
    #modal-mini-ficha {
        left: 40px;
        /* width: 33%; */
    }
}

@media(max-width:767px) {
    #modal-mini-ficha {
        left: 0px;
        max-width: 100%;
        /* width: 33%; */
    }
}

/* Mapa control capas */
.leaflet-control-custom.toggle-layer {
    cursor: pointer;
    text-align: center;
}

.toggle-img {
    width: 60px;
    height: 60px;
    background-size: cover;
    border: 2px solid #fff;
    border-radius: 6px;
    margin-bottom: 4px;
}

.toggle-label {
    font-size: 12px;
    color: #333;
}

/* modal favoritos */
.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1060 !important;
}

/* Style 2 */
#banner-share {
    padding: 64px 0 0 0;
    background-position: 60% 46%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 64px;
}

#banner-share h2 {
    color: #FFF;
    text-align: center;
    font-family: var(--source-sans);
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#banner-share p {
    color: #FFF;
    text-align: center;
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#banner-share ul {
    padding: 0;
    margin: 56px 0 180px 0;
    display: flex;
    flex-direction: row;
    gap: 44px;
    list-style: none;

}

#banner-share ul li a img {
    width: 56px;
}

@media(max-width:991px) {
    #banner-share {
        margin: 20px 0;
    }

    #banner-share h2 {
        font-size: 32px;
    }

    #banner-share p {
        font-size: 18px;
    }

    #banner-share ul {
        margin: 36px auto;
        gap: 16px;
        justify-content: center;
        align-items: center;
    }

    #banner-share ul li a img {
        width: 20px;
    }


}

#head-ficha-servicios {
    min-height: 600px;
    width: 100vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#ficha-servicios {
    padding: 64px 0 24px 0;
}

#ficha-servicios h1 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
}


#ficha-servicios h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
}

#ficha-servicios li,
#ficha-servicios p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

#ficha-servicios .row-parking-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 20px 0;
    gap: var(--bs-gutter-x);
}

#ficha-servicios .row-parking-info .card-parking {
    border-radius: 8px;
    background-color: var(--black-10);
    display: flex;
    flex-direction: row;
    padding: 24px;
    align-items: center;
    gap: 12px;
}

#ficha-servicios .row-parking-info .card-parking img {
    width: 48px;
    height: 48px;
}

#ficha-servicios .row-parking-info .card-parking p {
    margin: 0;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#map-ficha-services {
    position: relative;
}

#mini-modal-services {
    position: absolute;
    top: 48px;
    left: 40px;
    transition: var(--common-trans);
    opacity: 0;
    pointer-events: none;
    padding: 40px;
    overflow: hidden;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    z-index: 2;
    width: 450px;
    border-radius: 16px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

#mini-modal-services.active {
    top: 40px;
    opacity: 1;
    pointer-events: inherit;
}

#mini-modal-services img {
    border-radius: 8px;
    max-width: 100%;
    width: auto;
}

#mini-modal-services img.icon-modal {
    width: 48px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    border-radius: 500px;

}

#mini-modal-services h3 {
    margin-top: 24px;
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 8px;
}

#mini-modal-services h4 {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 4px;
    line-height: normal;
}

#mini-modal-services ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding-left: 20px;
}

#mini-modal-services li,
#mini-modal-services p {
    margin: 0;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#mini-modal-services .modal-footer-controler {
    width: 100%;
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    gap: 8px;

}

#mini-modal-services .modal-footer-controler a {
    color: #FFF;
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    align-items: center;
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 8px;
    background: var(--te-green);
    padding: 12px 16px;
    width: fit-content;
    text-decoration: none;
}

#ficha-servicios .card-112 {
    border-radius: 16px;
    background: var(--black-10);
    display: flex;
    flex-direction: row;
    padding: 24px 32px;
    align-items: center;
    gap: 24px;
    margin: 32px 0 80px 0;
}

#ficha-servicios .card-112 img {
    width: 120px;
}

#ficha-servicios .card-112 p {
    color: #000;
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

@media(max-width:991px) {
    #ficha-servicios .card-112 {
        flex-direction: column;
        align-items: start;
        gap: 16px;
    }

    #ficha-servicios .card-112 img {
        width: 32px;
        height: auto;
    }

    #ficha-servicios .card-112 p {
        font-size: 16px;
    }
}

#mini-modal-services .btn-close {
    position: absolute;
    right: 16px;
    top: 16px;
}

#ficha-servicios .row-normativa .col-md-6 {
    margin-bottom: var(--bs-gutter-x);

}

#ficha-servicios .card-normativa {
    display: flex;
    height: 100%;
    padding: 40px;
    border-radius: 16px;
    border: 2px solid var(--black-40);
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

#ficha-servicios .card-normativa h3 {

    color: var(--black-80);
    font-family: var(--source-sans);
    margin-bottom: 8px;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#ficha-servicios .card-normativa ul {
    padding-left: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#ficha-servicios .card-normativa ul li {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
}

@media(max-width:991px) {
    #head-ficha-servicios {
        min-height: 200px;
    }

    #ficha-servicios {
        padding: 24px 0 12px 0;
    }

    #ficha-servicios h1 {
        font-size: 40px;
    }

    #ficha-servicios h2 {
        font-size: 32px
    }

    #ficha-servicios li,
    #ficha-servicios p {
        font-size: 16px;
    }

    #ficha-servicios .row-parking-info {
        flex-direction: column;
    }

    #ficha-servicios .row-parking-info .card-parking {
        width: 100%;
        flex-direction: column;
        align-items: start;
    }

    #ficha-servicios .row-parking-info .card-parking img {
        width: 32px;
        height: auto;
    }

    #ficha-servicios .row-parking-info .card-parking p {
        font-size: 18px;
    }

    #ficha-servicios .card-normativa {
        padding: 20px;
    }

    #ficha-servicios .card-normativa h3 {
        font-size: 24px;
        margin-bottom: 4px;
    }

    #ficha-servicios .card-normativa ul {
        gap: 2px;
    }

    #ficha-servicios .card-normativa ul li {
        font-size: 18px;
    }

}


#recomanacions-normativa .card-normativa-bg {
    display: flex;
    flex-direction: row;
    padding: 40px;
    border-radius: 16px;
    background: var(--black-10);
}

#recomanacions-normativa .card-normativa-bg .col-md-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#recomanacions-normativa .card-normativa-bg h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
}

#recomanacions-normativa .card-normativa-bg p strong {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
}

#recomanacions-normativa .card-normativa-bg ul {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#recomanacions-normativa .card-normativa-bg li strong {
    font-weight: 600;
}

#recomanacions-normativa .card-normativa-bg li {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

@media(max-width:991px) {
    #recomanacions-normativa .card-normativa-bg {
        padding: 20px;
    }

    #recomanacions-normativa .card-normativa-bg h2 {
        font-size: 32px;
    }

    #recomanacions-normativa .card-normativa-bg p strong {
        font-size: 18px;
    }

    #recomanacions-normativa .card-normativa-bg li {
        font-size: 16px;
    }

    #recomanacions-normativa img.w-100 {
        margin-top: 20px;
    }
}


.card-accessibilitat {
    padding: 40px;
    border-radius: 16px;
    border: 2px solid var(--neutral-black-40, #DCDEE6);
}

.card-accessibilitat h2 {
    color: var(--black-80-);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.card-accessibilitat ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-left: 20px;
}

.card-accessibilitat p,
.card-accessibilitat li {
    color: var(--black-60);
    font-family: var(--source-sans);
    ;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.card-accessibilitat img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    outline: 2px solid var(--black-40);
}

#banner-mobilitat {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 30% 20%;
    padding: 0;
    border-radius: 16px;
}

#banner-mobilitat .col-md-12 {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px 0;
    margin-top: 32px;
    margin-bottom: 64px;
}

#banner-mobilitat .caption-banner-mobilitat {
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.50);
    display: flex;
    width: 100%;
    padding: 40px;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;

}

#banner-mobilitat .caption-banner-mobilitat h2 {
    color: #FFF;
    text-align: center;
    font-family: var(--source-sans);
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 16px;
}

#banner-mobilitat .caption-banner-mobilitat p {
    color: #FFF;
    text-align: center;
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

#ficha-servicios .card-descargas {
    border-radius: 16px;
    border: 2px solid var(--black-40);
    display: flex;
    padding: 40px;
    flex-direction: column;
    height: 100%;

}

#ficha-servicios .card-descargas img.caption {
    border-radius: 16px;
    width: 100%;
    margin-bottom: 32px;
}

#ficha-servicios .card-descargas h3 {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#ficha-servicios .card-descargas p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 32px;
}

#ficha-servicios .card-descargas a {
    border-radius: 8px;
    background: var(--te-green);
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: #FFF;
    margin-top: auto;
    margin-bottom: 0;
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

@media(max-width:991px) {
    #ficha-servicios .card-descargas {
        padding: 20px;
    }
}

.card-com-arribar-hi {
    border-radius: 16px;
    border: 2px solid var(--neutral-black-40, #DCDEE6);
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-com-arribar-hi img {
    width: 132px;
    margin-bottom: 24px;
}

.card-com-arribar-hi h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.card-com-arribar-hi p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
}

.card-com-arribar-hi .footer-com-arribar-footer {
    display: flex;
    flex-direction: column;
}

.card-com-arribar-hi .footer-com-arribar-footer p strong {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.card-com-arribar-hi .footer-com-arribar-footer a {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.card-com-arribar-hi .footer-com-arribar-footer a img {
    width: 20px;
    height: 20px;
    margin: auto 0;
}

.card-com-arribar-hi .footer-com-arribar-footer p:last-of-type {
    margin-bottom: 0;
}

.card-com-arribar-hi .footer-com-arribar-footer p:first-of-type {
    margin-bottom: 4px;
}

@media(max-width:991px) {
    .card-com-arribar-hi {
        padding: 20px;
    }

    .card-com-arribar-hi h2 {
        font-size: 32px;
    }

    .card-com-arribar-hi img {
        width: 80px;
        margin-bottom: 12px;
    }

}


/* card rutas list */

.rutas-mapa-rutas {
    padding-top: 72px;
}

.rutas-mapa-rutas h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
    line-height: 84px;
    /* 110.526% */
}

.rutas-mapa-rutas .container-card {
    padding: 0px;
    min-width: inherit !important;
    width: 100%;
    height: 600px;
    position: relative;
}

.rutas-mapa-rutas p {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 24px;
}

@media(max-width:991px) {
    .container-card {
        margin: 12px 0;
        height: 400px;
        padding: 12px;
    }

    .rutas-mapa-rutas .card-slick-carrousel .caption-card {
        background: radial-gradient(circle at center bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .7) 60%, rgba(0, 0, 0, 0) 85%);
    }
}

button.openfilters,
.rutas-mapa-rutas button.openfilters {
    border-radius: 8px;
    border: 1px solid var(--neutral-black-40, #DCDEE6);
    background: var(--neutral-white, #FFF);
    /* margin-bottom: 32px; */
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


.filters-custom-dropdown {
    padding: 32px;
    ;
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: #FFF;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    top: 64px;
    left: 0;
    transition: var(--common-trans);
    z-index: 100;
    /* card 2 */
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.filters-custom-dropdown.active {
    opacity: 1;
    pointer-events: inherit;
    top: 48px;
}

.filters-custom-dropdown .title-filters {
    color: var(--black-90);
    font-family: var(--source-sans);
    margin-bottom: 16px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.filters-custom-dropdown input {
    display: none;
}



.filters-custom-dropdown .form-check {
    padding: 0;
}

.filters-custom-dropdown label {
    display: flex;
    padding: 8px 16px;
    align-self: stretch;
    border-radius: 4px;
    border: 2px solid var(--black-40);
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    margin-bottom: 12px;
}

.filters-custom-dropdown input:checked~label {
    border-color: var(--te-green);
}

.filters-custom-dropdown .submit-filters {
    border-radius: 8px;
    background: var(--te-green);
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: 0px solid transparent;
}

.filters-custom-dropdown .reset-filters {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: 0;
    padding: 8px 16px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin: auto 0 auto auto;
}


/* blog home */

#blog-home {
    padding: 64px 0;

}

#blog-home h2 {
    color: var(--te-second-blue);
    text-align: center;
    font-family: var(--source-sans);
    ;
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
}

@media(max-width:991px) {
    #blog-home h2 {
        font-size: 40px;
    }
}

#blog-home .item-blog-home {
    position: relative;

}

#blog-home .col-md-6 .item-blog-home:first-of-type {
    margin-bottom: 32px;
}

#blog-home .item-blog-home figure {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px 16px 16px 0;
    width: 100%;
    margin: 0;
    height: 250px;
}

#blog-home .main-object.item-blog-home {
    height: 100%;
}

#blog-home .item-blog-home.main-object figure {
    height: 500px;
}

#blog-home .item-blog-home.main-object .caption-item-blog {
    margin: 0;
    position: absolute;
    left: 0;
    bottom: 0;
}

#blog-home .item-blog-home .caption-item-blog {
    background-color: #fff;
    margin-top: -80px;
    padding: 24px 40px;
    border-radius: 0 16px 0 0;
    width: 83.333%;
    position: relative;
    z-index: 100;
}

#blog-home .item-blog-home .caption-item-blog::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 20px;
    width: 20px;
    top: -20px;
    left: 0;
    z-index: 100;
    clip-path: path('M 0 0 L 0 20 L 20 20 Q 0 20 0 0 Z');

    /* clip-path: path('M 0 0 L 0 40 L 40 40 Q 0 40 0 0 Z'); */
    /* clip-path: path('M 0 0 L 0 8 L 8 8 Q 0 0 0 0 Z'); */
    /* clip-path: path('M 0 0 L 0 2 L 2 2 Q 0.4 1.6 0 0 Z'); */
}

#blog-home .item-blog-home .caption-item-blog::after {
    content: "";
    position: absolute;
    background-color: white;
    height: 20px;
    width: 20px;
    top: 60px;
    right: -20px;
    z-index: 100;
    clip-path: path('M 0 0 L 0 20 L 20 20 Q 0 20 0 0 Z');
}

#blog-home .item-blog-home.main-object .caption-item-blog::after {
    bottom: 0;
    top: inherit;
}


#blog-home .item-blog-home .caption-item-blog span {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
    padding-left: 20px;
}

#blog-home .item-blog-home .caption-item-blog span::before {
    position: absolute;
    content: "";
    width: 12px;
    height: 1px;
    background-color: var(--te-green);
    outline: 0px solid transparent;
    top: 50%;
    left: 0;
}

#blog-home .item-blog-home .caption-item-blog h3 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 4px;
}

#blog-home .item-blog-home .caption-item-blog p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    margin-bottom: 24px;
    font-weight: 400;
    line-height: normal;
}

#blog-home .item-blog-home .caption-item-blog a {
    color: var(--te-green);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: 15%;
    /* 2.1px */
    text-underline-position: from-font;

}

@media(max-width:991px) {
    #blog-home .item-blog-home {
        margin-bottom: 32px;
    }

    #blog-home .item-blog-home figure,
    #blog-home .item-blog-home.main-object figure {
        height: 300px;
    }

    #blog-home .item-blog-home .caption-item-blog {
        width: 90%;
        padding: 12px 20px 12px 12px;
    }

    #blog-home .item-blog-home.main-object .caption-item-blog {
        position: relative;
        margin-top: -80px;
        top: inherit;
        left: inherit;
        right: inherit;
        bottom: inherit;
    }

    #blog-home .item-blog-home.main-object .caption-item-blog::after {
        bottom: inherit;
        top: 60px;
    }

    #blog-home .item-blog-home .caption-item-blog p {
        font-size: 16px;
    }
}

/* PLANIFICADOR HOME */
#link-planificador {
    padding: 104px 0 0 0;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}

#link-planificador h2 {
    color: var(--te-second-blue);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 16px;
}

#link-planificador p {
    color: var(--black-60);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 20px;
}


#link-planificador a {
    border-radius: 8px;
    background: var(--te-green);
    padding: 16px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
    text-decoration: none;
    flex-direction: row;
    gap: 12px;

    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media(max-width:991px) {
    #link-planificador {
        min-height: 80vh;
        padding: 32px 0;
    }

    #link-planificador h2 {
        font-size: 40px;
    }

    #link-planificador p {
        font-size: 16px;
    }
}

/* Style 3 */
#blog {
    padding-top: 64px;
}

#blog h1 {
    color: var(--brand-te-te-second-blue, #004489);
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
}

#blog p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
    margin: 0;
}

#blog-home.blog-home-list {
    padding: 32px 0;
}

#blog-home.blog-home-list .item-blog-home {
    margin-bottom: 32px;
}

#blog-home.blog-home-list .item-blog-home.main-object figure {
    height: 600px;
}


#blog-home.blog-home-list .item-blog-home.main-object {
    /* outline: 1px solid red; */
}

#blog-home.blog-home-list .item-blog-home.main-object .caption-item-blog {
    /* outline: 1px solid red; */
    bottom: 32px;
}

#blog-home.blog-home-list .item-blog-home figure {
    height: 400px;
}

@media(max-width:991px) {
    #blog {
        padding: 24px 0 12px 0;
    }

    #blog h1 {
        font-size: 40px;
    }

    #blog p {
        font-size: 18px;
    }

    #blog-home.blog-home-list {
        padding: 12px 0 24px 0;
    }

    #blog-home.blog-home-list .item-blog-home.main-object .caption-item-blog {
        bottom: inherit;
    }

    #blog-home.blog-home-list .item-blog-home figure,
    #blog-home.blog-home-list .item-blog-home.main-object figure {
        height: 300px;
    }
}

#alertas .pagination-alertas,
#blog-home .pagination-blog {
    display: flex;
    justify-content: center;
    align-items: center;
}

#alertas .pagination-alertas ul,
#blog-home .pagination-blog ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: 8px;
    padding: 48px 0 24px 0;
}

#alertas .pagination-alertas ul li a,
#blog-home .pagination-blog ul li a {
    width: 40px;
    height: 40px;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--common-trans);
    background-color: var(--black-10);
    border-radius: 4px;

    text-decoration: none;
    color: var(--black-80);
    transition: var(--common-trans);
}

#alertas .pagination-alertas ul li.active a,
#alertas .pagination-alertas ul li a:hover,
#blog-home .pagination-blog ul li.active a,
#blog-home .pagination-blog ul li a:hover {
    background-color: var(--te-second-blue);
    color: var(--te-second-blue-light-bg);
}



article#blog-ficha .hero-ficha {
    padding: 64px 0;
}

article#blog-ficha h2 {
    color: var(--neutral-black-80, #535663);
    font-family: var(--source-sans);
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 32px;
    margin-bottom: 12px;
}

article#blog-ficha h3 {
    color: var(--neutral-black-80, #535663);
    font-family: var(--source-sans);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 32px;
    margin-bottom: 16px;
}

article#blog-ficha p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 8px;
}

article#blog-ficha p a {
    color: var(--te-blue);
    font-weight: 600;
}

article#blog-ficha img {
    max-width: 100%;
    height: auto;
    margin-top: 32px;
    margin-bottom: 12px;
}

article#blog-ficha .title-img {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

article#blog-ficha blockquote {
    color: var(--neutral-black-80, #535663);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    padding: 12px 32px;
    margin: 64px 0;
    border-left: 12px solid #787B8510;
}

article#blog-ficha .hero-ficha {
    height: 600px;
    margin: -72px 0 64px 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;
    position: relative;
    z-index: 1;

}

article#blog-ficha .hero-ficha-caption {
    background-color: #fff;
    width: 75%;
    padding-top: 64px;
    padding-right: 40px;
    padding-bottom: 40px;
    border-bottom-right-radius: 16px;
    position: relative;
    z-index: 2;
}

article#blog-ficha .hero-ficha-caption h1 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

article#blog-ficha .hero-ficha-caption::after {
    content: "";
    position: absolute;
    background-color: white;
    height: 20px;
    width: 20px;
    top: 100%;
    left: 0px;
    z-index: 100;
    clip-path: path("M 20 0 L 0 0 L 0 20 Q 0 0 20 0 Z");
}

article#blog-ficha .hero-ficha-caption::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 20px;
    width: 20px;
    top: 0%;
    left: 100%;
    z-index: 100;
    clip-path: path("M 20 0 L 0 0 L 0 20 Q 0 0 20 0 Z");

}

article#blog-ficha .hero-ficha-caption span {
    color: var(--black-60);
    font-family: var(--black-60);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-left: 24px;
    position: relative;
}

article#blog-ficha .hero-ficha-caption span::before {
    background-color: var(--te-green);
    width: 12px;
    height: 1px;
    left: 0;
    top: 50%;
    position: absolute;
    content: "";
}

article#blog-ficha .grid-imgs-custom {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    border-radius: 16px;
    overflow: hidden;
}

article#blog-ficha .grid-imgs-custom .main-image {
    grid-row: 1 / span 2;
    /* ocupa las dos filas */
    position: relative;
    min-height: 50vh;
}

@media(max-width:991px) {
    article#blog-ficha h2 {
        font-size: 24px;
    }

    article#blog-ficha h3 {
        font-size: 20px;
        margin-bottom: 8px;
        margin-top: 16px;
    }

    article#blog-ficha .hero-ficha {
        margin: 24px 0 20px 0;
    }

    article#blog-ficha .hero-ficha-caption {
        padding: 20px 20px 0 0px;
        top: inherit;
        bottom: 0%;
        border-radius: 0 16px 0 0;
        width: 85%;
    }

    article#blog-ficha .hero-ficha-caption h1 {
        font-size: 28px;
    }

    article#blog-ficha .hero-ficha-caption p {
        margin: 0;
    }

    article#blog-ficha .grid-imgs-custom .main-image {
        min-height: 40vh;
    }

    article#blog-ficha .hero-ficha-caption::after {
        top: -20px;
        bottom: inherit;
        transform: rotate(-90deg);

    }

    article#blog-ficha img {
        margin: 16px 0 8px 0;
    }

    article#blog-ficha .title-img {
        font-size: 14px;
    }

    article#blog-ficha .hero-ficha-caption::before {
        bottom: 0;
        top: inherit;
        transform: rotate(-90deg);
    }

    article#blog-ficha p {
        font-size: 18px;
    }

    article#blog-ficha blockquote {
        font-size: 20px;
        margin: 24px 0;
    }
}

article#blog-ficha .grid-imgs-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

article#blog-ficha .view-all {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--common-trans);
}

article#blog-ficha .view-all:hover {
    background: rgba(255, 255, 255, 1);
}

article#blog-ficha .end-article {
    padding-top: 32px;
    margin-top: 32px;
    border-top: 1px solid var(--black-40);
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* gap: 8px; */
}

article#blog-ficha .end-article span.tag {
    background-color: var(--black-40);
    color: var(--black-80);
    border-radius: 4px;
    padding: 4px 8px;

    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


#related-ruta {
    padding: 64px 0;
}

#related-ruta h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#related-ruta .fake-related-rute {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    height: 600px;
}

#related-ruta .container-card {
    max-width: 100%;
    min-width: 100%;
    padding: 0;
    margin-bottom: 20px;
}

#related-ruta .container-card .card-slick-carrousel {
    outline: 0px solid transparent;
}

#blog-home.blog-home-list.related-posts h2 {
    text-align: left;
    font-size: 40px;
}

#blog-home a.link-go-blog {
    display: flex;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    width: fit-content;
    color: #fff;
    margin: 32px auto;
}

@media(max-width:991px) {
    article#blog-ficha .end-article {
        padding-top: 16px;
        margin-top: 16px;
    }

    #related-ruta {
        padding: 32px 0;
    }

    #blog-home.blog-home-list.related-posts h2 {
        font-size: 32px;
    }

    #related-ruta h2 {
        font-size: 32px;
    }

    #blog-home a.link-go-blog {
        margin: 12px auto;
    }
}

/* info section home */
#info-practica-section {
    padding: 72px 32px;
}

#info-practica-section h2 {

    color: var(--te-second-blue);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
}

#info-practica-section p {
    color: var(--black-60);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

#info-practica-section .grid-container {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columnas iguales */
    gap: 24px;
    /* separación entre bloques */
}

/* --- Row 1 --- */
#info-practica-section .big-left {
    grid-column: 1 / span 2;
    /* mitad izquierda */
    grid-row: 1 / span 2;
    /* ocupa dos filas de altura */
    background: #ddd;
}

#info-practica-section .grid-container>.item:nth-child(2) {
    grid-column: 3;
    /* parte derecha fila 1 */
    grid-row: 1;
}

#info-practica-section .grid-container>.item:nth-child(3) {
    grid-column: 4;
    grid-row: 1;
}

#info-practica-section .grid-container>.item:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
}

#info-practica-section .grid-container>.item:nth-child(5) {
    grid-column: 4;
    grid-row: 2;
}

/* --- Row 2 --- */
#info-practica-section .grid-container>.item:nth-child(6) {
    grid-column: 1 / span 1;
    /* 1/4 */
    grid-row: 3;
    min-height: 450px;
}

#info-practica-section .grid-container>.item:nth-child(7) {
    grid-column: 2 / span 1;
    /* 1/4 */
    grid-row: 3;
    min-height: 450px;
}

#info-practica-section .big-bottom {
    grid-column: 3 / span 2;
    /* ocupa mitad derecha (1/2) */
    grid-row: 3;
    background: #ccc;
    min-height: 450px;
}

/* Estilos base de items (solo visuales) */
#info-practica-section .item {

    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    min-height: 300px;
    border-radius: 16px;
}

#info-practica-section .grid-container .item a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: center;
    height: 100%;
    position: relative;
    width: 100%;
    border-radius: 8px;

    color: #FFF;
    text-align: center;
    font-family: var(--source-sans);
    text-decoration: none;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#info-practica-section .item.big-left a,
#info-practica-section .item.big-bottom a {
    font-size: 48px;
}

#info-practica-section .grid-container .item a span {
    opacity: 0;
    position: absolute;
    transform: translate(-50%, -50%);
    top: calc(50% + 20px + 40px + 5px);
    left: 50%;
    transition: var(--common-trans);

    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 4px;


}

#info-practica-section .grid-container .item a span img {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
}

#info-practica-section .grid-container .item:hover a span {
    top: calc(50% + 20px + 40px);
    opacity: 1;


}

@media(max-width:991px) {
    #info-practica-section {
        padding: 120px 12px 40px 12px;
    }

    #info-practica-section h2 {
        font-size: 40px;
    }

    #info-practica-section .grid-container .item a span {
        top: calc(50% + 20px + 40px);
        opacity: 1;
    }

    #info-practica-section .grid-container .item a {
        font-size: 24px;
    }

    #info-practica-section .grid-container .item {
        max-width: 100%;
    }

    #info-practica-section .grid-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en móvil */
        margin-top: 24px;
        gap: 12px;
    }

    #info-practica-section .big-left {
        grid-column: 1 / span 2;
        /* ocupa todo el ancho */
        grid-row: auto;
    }

    /* Items 2 a 7 → se colocan de forma natural en 2 columnas */
    #info-practica-section .grid-container>.item:nth-child(n+2):nth-child(-n+7) {
        grid-column: auto;
        grid-row: auto;
        min-height: 200px;
        /* ajustable */
    }

    #info-practica-section .big-bottom {
        grid-column: 1 / span 2;
        /* ocupa todo el ancho */
        grid-row: auto;
    }


}

@media(max-width:600px) {
    #info-practica-section .grid-container {
        grid-template-columns: 1fr;
        /* 2 columnas en móvil */
        margin-top: 24px;
        gap: 12px;
    }

    #info-practica-section .grid-container>.item {
        grid-column: 1;
        min-height: 200px;
    }
}


#intro-home {
    padding: 64px 0;
}

#intro-home .col-md-6:first-of-type {
    padding-right: 8.33333333%;
    position: relative;
    z-index: 10;
}

#intro-home .col-md-6:nth-child(2) {
    z-index: 9;
    position: relative;
}

#intro-home h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
}

#intro-home p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 24px;
}

@media(max-width:1399px) {
    #intro-home h2 {
        font-size: 64px;
    }

}

@media(max-width:1199px) {
    #intro-home h2 {
        font-size: 56px;
    }

}

@media(max-width:991px) {
    #intro-home .col-md-6:first-of-type {
        padding-right: 20px;
    }

    #intro-home h2 {
        font-size: 36px;
    }

    #intro-home p {
        font-size: 16px;
        margin-bottom: 8px;
    }
}

#intro-home .row-card-intro {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--bs-gutter-x);
    width: 130%;
    position: absolute;
}

#intro-home .row-card-intro .card-intro {
    position: relative;
    padding: 16px 16px 16px 56px;
    width: calc(50% - 12px);
    border-radius: 8px;
    border: 1px solid var(--neutral-black-40, #DCDEE6);
    background: var(--neutral-white, #FFF);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

#intro-home .row-card-intro .card-intro img {
    position: absolute;
    width: 24px;
    top: 16px;
    left: 16px;
}

#intro-home .row-card-intro .card-intro h3 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#intro-home .row-card-intro .card-intro p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}

.alert-incidence {
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: #FBD9D9;
    padding: 16px 24px;
    display: flex;
    flex-direction: row;

}

.alert-incidence span {
    border-radius: 500px;
    background-color: var(--Red);
    padding: 8px 16px !important;
    height: fit-content;
    color: #000;
    text-align: center;
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.alert-incidence .text-alert {
    margin-left: 16px;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 70%;
}

.alert-incidence .text-alert p:first-of-type {
    color: #000;
    font-family: var(--source-sans);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}

@media(max-width:991px) {
    .alert-incidence .text-alert p:first-of-type {
        font-size: 14px;
        font-weight: 600;
    }
}

.alert-incidence .text-alert p:last-of-type {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;

}

.alert-incidence a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #000;
    text-align: center;
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 114.286% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    margin: auto 0;
}

@media(max-width:991px) {
    #intro-home {
        padding: 32px 0;
    }

    .alert-incidence {
        flex-direction: column;
        margin-top: 20px;
    }

    .alert-incidence .text-alert {
        margin: 12px 0;
    }

    .alert-incidence span {
        height: fit-content;
        width: fit-content;
    }

    .alert-incidence a {
        text-align: left;
        justify-content: start;
    }
}

@media(max-width:767px) {
    #intro-home .row-card-intro {
        width: 100%;
        position: relative;
        padding: 16px 0 20px 0;
        gap: 12px;
    }

    #intro-home .row-card-intro .card-intro {
        width: 100%;
    }
}

#carrusel-home .prebacground-img {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    min-height: 400px;
    width: 100%;
}

#carrusel-home .caption-carrusel-home {
    background-color: #fff;
    margin-top: -100px;
    padding: 40px;
    border-radius: 16px;
    position: relative;
}

#carrusel-home .caption-carrusel-home::before {
    position: absolute;
    top: 80px;
    content: "";
    width: 20px;
    height: 20px;
    background-color: #FFF;
    left: -20px;
    clip-path: path("M 0 20 L 20 20 L 20 0 Q 20 20 0 20 Z");

}

#carrusel-home .caption-carrusel-home::after {
    position: absolute;
    top: 80px;
    content: "";
    width: 20px;
    height: 20px;
    background-color: #FFF;
    right: -20px;
    clip-path: path("M 20 20 L 0 20 L 0 0 Q 0 20 20 20 Z");

}

#carrusel-home .caption-carrusel-home h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 16px;
}

#carrusel-home .caption-carrusel-home p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

#carrusel-home .caption-carrusel-home a {
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 40px;
    display: flex;
    flex-wrap: 8px;
    width: fit-content;

    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

#carrusel-home .openfilters#openfilters {

    margin-bottom: 0;
}

#carrusel-home .flexer-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    padding-left: 40px;
    margin-bottom: 20px;
}

#carrusel-home .flexer-filters .filters-custom-dropdown#filters-custom-dropdown {
    left: 40px;
}

#carrusel-home .flexer-filters .tag-filters {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    border-radius: 8px;
    border: 1px solid var(--neutral-black-40, #DCDEE6);
    background: var(--neutral-white, #FFF);
}

#carrusel-home .flexer-filters .tag-filters:first-of-type {
    margin-left: 40px;
}


@media(max-width:991px) {
    #carrusel-home .caption-carrusel-home {
        padding: 20px;
    }

    #carrusel-home .caption-carrusel-home p {
        font-size: 16px;
    }

    #carrusel-home .caption-carrusel-home h2 {
        font-size: 40px;
        line-height: 100%;
        margin-bottom: 12px;
    }

    #carrusel-home .caption-carrusel-home a {
        margin-top: 16px;
    }

    #carrusel-home .flexer-filters {
        padding: 0 0 0 20px;
        margin-top: 40px;
        margin-bottom: 4px;
    }
}



.alertas-section {
    padding: 72px 0 56px 0;
    background-color: #FAFAFA;
}


.alertas-section h1 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
}

.alertas-section p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
}

.alertas-section form select {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: #fff;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 12px 20px;
}

.alertas-section button {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: #fff;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 12px 20px;
    transition: var(--common-trans);
    pointer-events: none;

}

.alertas-section .head-incidencias-modal button {
    pointer-events: auto;
}

.alertas-section button.disabled {
    opacity: 0.4;
    pointer-events: inherit;

}

.alertas-section .row-incidencias,
.alertas-section .row-map {
    display: none;
}

.alertas-section .row-incidencias.active,
.alertas-section .row-map.active {
    display: flex;
}

.alertas-section .row-map,
.alertas-section .row-incidencias {
    position: relative;
    padding-top: 56px;
}

.alertas-section .row-incidencias .card-incidencias {
    display: flex;
    padding: 24px;
    flex-direction: column;

    border-radius: 16px;
    background: var(--neutral-white, #FFF);
    margin-bottom: var(--bs-gutter-x);
}

.ficha-alerta .tags-card-incidencia,
.alertas-section .tags-card-incidencia {
    display: flex;
    flex-direction: row;
    gap: 8px
}

.ficha-alerta .tags-card-incidencia .tag-type,
.alertas-section .tags-card-incidencia .tag-type {
    display: flex;
    flex-direction: row;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
}

@media(max-width:991px) {

    /* aqui */
    .ficha-alerta .tags-card-incidencia .tag-type,
    .alertas-section .tags-card-incidencia .tag-type {
        font-size: 12px;
    }

    .alertas-section form select {
        -webkit-appearance: none;
        appearance: none;
        margin-top: 12px;
    }

    .alertas-section #mapid {
        height: 60vh !important;
    }
}

.ficha-alerta .tags-card-incidencia .tag-alerta,
.alertas-section .tags-card-incidencia .tag-alerta {

    background-color: #E6C9C9;
}

.ficha-alerta .tags-card-incidencia .tag-incidencia,
.alertas-section .tags-card-incidencia .tag-incidencia {
    background-color: #F7E8C3;
}

/* Estils per tags amb colors personalitzats */
/* Vermell */
.ficha-alerta .tags-card-incidencia .tag-type.alert-red,
.alertas-section .tags-card-incidencia .tag-type.alert-red,
.incidencias-modal .tags-card-incidencia .tag-type.alert-red {
    background-color: #fbd9d9 !important;
    color: #8B0000 !important;
}

.ficha-alerta .tags-card-incidencia .tag-type.alert-red .alert-icon,
.alertas-section .tags-card-incidencia .tag-type.alert-red .alert-icon,
.incidencias-modal .tags-card-incidencia .tag-type.alert-red .alert-icon {
    filter: invert(14%) sepia(97%) saturate(6792%) hue-rotate(357deg) brightness(70%) contrast(119%);
}

/* Taronja */
.ficha-alerta .tags-card-incidencia .tag-type.alert-orange,
.alertas-section .tags-card-incidencia .tag-type.alert-orange,
.incidencias-modal .tags-card-incidencia .tag-type.alert-orange {
    background-color: #ffe7d1 !important;
    color: #CC5500 !important;
}

.ficha-alerta .tags-card-incidencia .tag-type.alert-orange .alert-icon,
.alertas-section .tags-card-incidencia .tag-type.alert-orange .alert-icon,
.incidencias-modal .tags-card-incidencia .tag-type.alert-orange .alert-icon {
    filter: invert(35%) sepia(98%) saturate(2677%) hue-rotate(11deg) brightness(95%) contrast(101%);
}

/* Groc */
.ficha-alerta .tags-card-incidencia .tag-type.alert-yellow,
.alertas-section .tags-card-incidencia .tag-type.alert-yellow,
.incidencias-modal .tags-card-incidencia .tag-type.alert-yellow {
    background-color: #fff8d1 !important;
    color: #B8860B !important;
}

.ficha-alerta .tags-card-incidencia .tag-type.alert-yellow .alert-icon,
.alertas-section .tags-card-incidencia .tag-type.alert-yellow .alert-icon,
.incidencias-modal .tags-card-incidencia .tag-type.alert-yellow .alert-icon {
    filter: invert(52%) sepia(92%) saturate(463%) hue-rotate(5deg) brightness(92%) contrast(86%);
}

/* Blau */
.ficha-alerta .tags-card-incidencia .tag-type.alert-blue,
.alertas-section .tags-card-incidencia .tag-type.alert-blue,
.incidencias-modal .tags-card-incidencia .tag-type.alert-blue {
    background-color: #d1e6fb !important;
    color: #0047AB !important;
}

.ficha-alerta .tags-card-incidencia .tag-type.alert-blue .alert-icon,
.alertas-section .tags-card-incidencia .tag-type.alert-blue .alert-icon,
.incidencias-modal .tags-card-incidencia .tag-type.alert-blue .alert-icon {
    filter: invert(21%) sepia(98%) saturate(3116%) hue-rotate(205deg) brightness(85%) contrast(101%);
}

/* Verd */
.ficha-alerta .tags-card-incidencia .tag-type.alert-green,
.alertas-section .tags-card-incidencia .tag-type.alert-green,
.incidencias-modal .tags-card-incidencia .tag-type.alert-green {
    background-color: #d1fbe0 !important;
    color: #006400 !important;
}

.ficha-alerta .tags-card-incidencia .tag-type.alert-green .alert-icon,
.alertas-section .tags-card-incidencia .tag-type.alert-green .alert-icon,
.incidencias-modal .tags-card-incidencia .tag-type.alert-green .alert-icon {
    filter: invert(24%) sepia(94%) saturate(2841%) hue-rotate(112deg) brightness(91%) contrast(101%);
}

.ficha-alerta .tags-card-incidencia .tag-date,
.alertas-section .tags-card-incidencia .tag-date {
    background-color: var(--black-10);
}


.alertas-section .row-incidencias .card-incidencias h2 {
    margin-top: 24px;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.alertas-section .row-incidencias .card-incidencias p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.alertas-section .itineraris-afectats {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
}

.alertas-section .itineraris-afectats p.title {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 16px;
}

.alertas-section .itineraris-afectats p.item-afectat {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.alertas-section .itineraris-afectats p.item-afectat {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 8px;
}

.alertas-section .row-incidencias .card-incidencias a {
    display: flex;
    width: fit-content;
    text-decoration: none;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 24px;
}

@media(max-width:991px) {

    .alertas-section .row-map,
    .alertas-section .row-incidencias {
        padding: 24px 0;
    }

    .alertas-section .row-incidencias .card-incidencias {
        padding: 12px;
    }

    .alertas-section .row-incidencias .card-incidencias h2 {
        font-size: 24px;
        margin-top: 16px;
    }

    .alertas-section .itineraris-afectats p.title {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .alertas-section .itineraris-afectats p.item-afectat {
        font-size: 16px;
    }

    .alertas-section .row-incidencias .card-incidencias a {
        margin-top: 12px;
    }
}




.controler-map-incidencias {
    position: relative;
}

.incidencias-modal {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 591px;
    height: calc(100% - 32px);

    overflow: scroll;

    display: flex;
    flex-direction: column;

    border-radius: 16px;
    background: var(--neutral-white, #FFF);
}

@media(max-width:991px) {
    .alertas-section {
        padding: 32px 0;
    }

    .alertas-section h1 {
        font-size: 40px;
    }

    .alertas-section p {
        font-size: 18px;
    }

    .incidencias-modal {
        position: fixed;
        width: 90vw;
        height: 90vh;
        left: 5vw;
        top: 5vh;
        z-index: 1;
    }

    /* .incidencias-modal::before{
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        z-index: 0;
        background-color: #00000050;
    } */
}

.incidencias-modal .head-incidencias-modal,
.incidencias-modal .body-incidencias-modal,
.incidencias-modal .footer-modal-incidencias {
    padding: 24px;
    display: flex;
    flex-direction: column;

}

@media(max-width:991px) {

    .incidencias-modal .head-incidencias-modal,
    .incidencias-modal .body-incidencias-modal,
    .incidencias-modal .footer-modal-incidencias {
        padding: 12px;
    }
}

.incidencias-modal .head-incidencias-modal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.incidencias-modal .head-incidencias-modal button {
    height: 100%;
    width: fit-content;
    border: transparent 0px solid;

}

.incidencias-modal .body-incidencias-modal {
    padding: 0 24px;
}

.incidencias-modal .footer-modal-incidencias {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: auto;
    margin-bottom: 0
}

.incidencias-modal .footer-modal-incidencias a {
    display: flex;
    width: fit-content;
    text-decoration: none;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 24px;
}

.incidencias-modal .footer-modal-incidencias a.share-btn {
    display: flex;
    width: fit-content;
    text-decoration: none;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--black-40);
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: auto;
}

#ficha-alerta {
    padding: 72px 0;
    background-color: #FAFAFA;
}

#ficha-alerta h1 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 20px;
    margin-bottom: 12px;
}

#ficha-alerta h2 {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
}

#ficha-alerta p {
    color: var(--black-60);
    font-family: var(--black-60);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#ficha-alerta a {
    margin-bottom: 8px;
    display: flex;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

@media(max-width:991px) {
    #ficha-alerta {
        padding: 24px 0;
    }

    #ficha-alerta h1 {
        font-size: 32px;
        margin: 12px 0 4px 0;
    }

    #ficha-alerta h2 {
        font-size: 24px;
        margin-bottom: 4px;
        margin-top: 20px;
    }
}

.no-results-container {
    margin: 32px 0;
    display: flex;
    flex-direction: column;
}

.no-results-container img {
    width: fit-content;
    max-width: 100%;
    margin: 72px auto;
}

.no-results-container a {
    border-radius: 8px;
    background: var(--te-green);
    display: flex;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
    flex-direction: row;
    width: fit-content;
    height: fit-content;
    color: #FFF;
    font-family: var(--source-sans);
    text-decoration: none;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 32px auto;
}

.no-results-container a img {
    width: fit-content;
    height: auto;
    margin: auto 0;
}

#contacta-intro {
    padding: 72px 0 24px 0;
    background-color: #FAFAFA;
}

#contacta-intro h1 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 12px;
    line-height: 84px;
    /* 110.526% */
}

#contacta-intro p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
    margin: 0;
}

#contacta-intro p a {
    color: var(--te-blue);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

#form-contacta {
    padding: 64px 0;
}

#form-contacta h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 16px;
}

#form-contacta p {
    color: var(--neutral-black-60, #787B85);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
}

#form-contacta form .item-cnt {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}

#form-contacta form label {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 4px;
}

#form-contacta form textarea,
#form-contacta form input {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: #fff;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#form-contacta form textarea {
    min-height: 200px;
}

#form-contacta form input[type="checkbox"] {
    padding: 8px;
    border-radius: 4px;
    margin-right: 16px;
}

#form-contacta form button[type="submit"] {
    margin-top: 32px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: 0px solid transparent;
    padding: 12px 24px;
    border-radius: 8px;
}

@media(max-width:991px) {

    #form-contacta,
    #card-fqs,
    #contacta-intro {
        padding: 24px 0;
    }

    #contacta-intro h1 {
        font-size: 56px;
        margin-bottom: 12px;
    }

    #form-contacta h2 {
        font-size: 40px;
    }

    #form-contacta form button[type="submit"] {
        width: 100%;
        justify-content: center;
        align-items: center;
    }
}

#contacta-ok {
    padding: 32px 0 72px 0;
    background-color: #FAFAFA;
}

#contacta-ok .contacta-ok-card {
    padding: 40px;
}

#contacta-ok h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
}

#contacta-ok .contacta-ok-card {
    border: 1px solid var(--black-40);
    background-color: #FAFAFA;
    border: 1px solid #DCDEE6;
    display: flex;
    flex-direction: column;
    padding: 40px;
}

#contacta-ok .label-title:first-of-type {
    margin-top: 0;
}

#contacta-ok .label-title {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 32px;
    margin-bottom: 0;

}

#contacta-ok .input-cnt {
    color: var(--neutral-black-90);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #DCDEE6;
}

/* Style 4 */


#login-form {
    background-color: #FAFAFA;
    padding: 72px 0 24px 0;
}

#login-form h1 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
}

#login-form .card-login {
    display: flex;
    flex-direction: row;
    gap: 88px;
    border-radius: 16px;
    border: 1px solid var(--black-40);
    background: #fff;
    padding: 40px;
    margin: 40px 0;
}

#login-form .card-login .caption-card-login {
    display: flex;
    flex-direction: column;
    width: 50%;
}

#login-form .card-login img.decoration-img-login {
    width: 50%;
    border-radius: 8px;
    object-fit: cover;
}

#login-form .card-login h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#login-form p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 16px;
    margin-bottom: 4px;
}

#login-form .card-login p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--black-40);
}

#login-form form {
    display: flex;
    flex-direction: column;
}


#login-form form .item-cnt,
#login-form form .control-group {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}

#login-form form label {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 4px;
}

#login-form form input {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: #fff;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#login-form .card-login form input[type="checkbox"] {
    padding: 8px;
    border-radius: 4px;
    margin-right: 16px;
}

#login-form .card-login form button[type="submit"] {
    margin-top: 12px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: 0px solid transparent;
    padding: 12px 24px;
    width: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

#login-form .card-login p.pasword-reset {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
    margin-bottom: 0;
    margin-top: 16px;
}

#login-form .card-login p.pasword-reset a {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

#login-form .card-login p.fail-pasword {
    width: 100%;
    border-radius: 4px;
    color: var(--Red);
    display: flex;
    flex-direction: row;
    gap: 12px;
    background-color: #F5EDEC;
    padding: 8px;
    align-items: center;
    justify-content: center;
    border: none;
}

#login-form .card-login p.login-social-net {
    position: relative;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 18px auto;
    display: flex;
    border: none;
    margin: 18px 0;
}

#login-form .card-login p.login-social-net::after {
    position: absolute;
    content: "";
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    height: 1px;
    width: 100%;
    z-index: 0;
    background-color: var(--black-60);
}

#login-form .card-login p.login-social-net span {
    height: 100%;
    background-color: #fff;
    padding: 0 16px;
    z-index: 1;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;

    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;

}

#login-form .card-login .butons-log {
    display: flex;
    flex-direction: column;
    gap: 12px;

}

#login-form .card-login .butons-log button {
    display: flex;
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    gap: 12px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

#login-form .card-login .butons-log button.facebook {
    color: #fff;
    background-color: #1877F2;
}

#login-form .butons-log button.google {
    color: var(--black-80);
    background-color: #fff;
    box-shadow: 0 0 2.579px 0 rgba(0, 0, 0, 0.08), 0 1.719px 2.579px 0 rgba(0, 0, 0, 0.17);
    ;
}

#login-form .butons-log button.apple {
    color: #fff;
    background-color: #000;
}

#login-form p.msg-tag {
    border-radius: 8px;
    background: #F7E8C3;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
    padding: 8px 16px;
    margin: 0;
}

#login-form a.new-code-pass {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 12px;
    margin-top: 16px;
}

@media(max-width:991px) {
    #login-form {
        padding: 20px 0;
    }

    #login-form h1 {
        font-size: 40px;
    }

    #login-form .card-login {
        padding: 20px;
        flex-direction: column;
        margin: 12px 0;
        gap: 0;
    }

    #login-form .card-login .caption-card-login {
        width: 100%;
    }

    #login-form .card-login img.decoration-img-login {
        display: none;
    }

}


/* DATOS PERSONALES */

#datos-personales {
    background-color: #FAFAFA;
    padding: 72px 0 64px 0;

}

#datos-personales .card-personal-data {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

#datos-personales .card-personal-data .control-figure {
    display: flex;
    flex-direction: column;
}

#datos-personales .control-figure figure {
    min-height: 150px;
    min-width: 150px;
    height: 150px;
    width: 150px;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid var(--black-40);
    margin: 0;
}

#datos-personales .control-figure figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#datos-personales .control-figure .control-btns {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 12px;
}

#datos-personales .control-figure .control-btns button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0px solid transparent;
    background-color: transparent;
}

#datos-personales .control-figure .control-btns button img {
    height: 100%;
}


#datos-personales .card-personal-data h1 {
    color: var(--te-blue);
    color: var(--te-second-blue);
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    display: flex;
    flex-direction: column;
}

#datos-personales .card-personal-data h1 span {
    font-family: var(--source-sans);
    font-size: 44px;
    font-style: normal;
    font-weight: 400;
}

#datos-personales .card-personal-data p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 8px;
}

#datos-personales .card-personal-data p:last-of-type {
    margin-bottom: 0px;

}


#datos-personales-tabs {
    padding: 32px 0;
}

#datos-personales-tabs .nav-tabs {
    display: flex;
    flex-direction: row;
    gap: 16px;
    border: 0px solid transparent;
    padding-bottom: 24px;

}

#datos-personales-tabs button {
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: #fff;
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#datos-personales-tabs button.active {
    background-color: var(--black-40);
    color: var(--black-90);
}


#datos-personales-tabs #tabs-personal h2 {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0;
    margin-bottom: 20px;
}

#datos-personales-tabs #tabs-personal h3 {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 32px;
    margin-bottom: 12px;
}

#datos-personales-tabs #tabs-personal .register-tag {
    border-radius: 8px;
    background: #F7E8C3;
    display: flex;
    padding: 8px 16px;
    width: 100%;
    margin: 8px 0 16px 0;
}

#datos-personales-tabs #tabs-personal .item-cnt,
#datos-personales-tabs #tabs-personal .control-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

#datos-personales-tabs #tabs-personal label {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#datos-personales-tabs #tabs-personal input {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#datos-personales-tabs #tabs-personal p {
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#datos-personales-tabs #tabs-personal button {
    display: flex;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#datos-personales-tabs #tabs-personal #rutas-personales-pane .nav-tabs button {
    display: flex;
    padding: 4px 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    transition: var(--common-trans);
    color: var(--black-60);
    border-radius: 0;
}

#datos-personales-tabs #tabs-personal #rutas-personales-pane .nav-tabs button.active {
    border-bottom: 2px solid var(--te-green);
    color: var(--black-90);
}

#datos-personales-tabs .my-interests {
    border-radius: 16px;
    background: #F0F0F3;
    padding: 40px;
}

#datos-personales-tabs #tabs-personal .my-interests h3 {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0;
}

#datos-personales-tabs #tabs-personal .my-interests form {
    display: flex;
    flex-direction: column;
}

#datos-personales-tabs #tabs-personal .my-interests .form-check {
    margin-bottom: 16px;
}

#datos-personales-tabs #tabs-personal .my-interests .form-check:last-of-type {
    margin-bottom: 0;
}

#datos-personales-tabs #tabs-personal .my-interests .form-check-input:checked {
    background-color: var(--te-green);
    border-color: var(--te-green);
    background-image: none;
}

#datos-personales-tabs #tabs-personal .my-interests .control-group {
    margin: 0;
}

#datos-personales-tabs .card-rutes {
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    border: 1px solid var(--black-40);
    margin-bottom: 12px;
}

#datos-personales-tabs .card-rutes figure {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0;
}

#datos-personales-tabs .card-rutes figure img {
    object-fit: contain;
    height: 150px;
}

#datos-personales-tabs .card-rutes figure .caption-card-rutes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#datos-personales-tabs .card-rutes .caption-card-rutes span {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: fit-content;
    border-radius: 4px;
    background: #DCE6C9;
    padding: 4px 8px;
    margin-bottom: 8px;
}

#datos-personales-tabs #tabs-personal .card-rutes .caption-card-rutes h3 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 0;
    margin-bottom: 4px;
}

#datos-personales-tabs #tabs-personal .card-rutes .caption-card-rutes p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#datos-personales-tabs #tabs-personal .card-rutes .caption-card-rutes .row-icons {
    display: flex;
    flex-direction: row;
    gap: 16px;
    list-style: none;
    margin: 16px 0 0 0;
    padding: 0;
}

#datos-personales-tabs #tabs-personal .card-rutes .caption-card-rutes .row-icons li {
    color: var(--black-80);
    font-family: var(--source-sans);
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#datos-personales-tabs #tabs-personal .card-rutes .dropdown-right {
    margin-left: auto;
    margin-right: 0;
    /* z-index: 2; */
}

#datos-personales-tabs #tabs-personal .card-rutes .dropdown-right button {
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: var(--black-40);
    display: flex;
    justify-content: center;
    align-items: center;
}

#datos-personales-tabs #tabs-personal .card-rutes .dropdown-right button img {
    width: 24px;
    height: 24px;
}

#datos-personales-tabs #tabs-personal .card-rutes .dropdown-menu {
    padding: 16px;
    width: 300px;
}

#datos-personales-tabs #tabs-personal .card-rutes .dropdown-right span.title {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#datos-personales-tabs #tabs-personal .card-rutes .dropdown-right ul {
    list-style: none;
    margin: 12px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#datos-personales-tabs #tabs-personal .card-rutes .dropdown-right ul li a {
    color: var(--black-80);
    font-family: var(--source-sans);
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-size: 16px;
    text-decoration: none;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#datos-personales-tabs #tabs-personal .card-rutes .dropdown-right ul li:last-of-type a {
    color: var(--Red);
    border-top: 1px solid var(--black-40);
    border-bottom: 1px solid var(--black-40);
    padding: 16px 0;
}

#datos-personales-tabs #tabs-personal .card-rutes .dropdown-right a.go-rute {
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    height: fit-content;
    padding: 16px 20px;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 16px;
}


#datos-personales-tabs #tabs-personal .likes-list-cards {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
}


#datos-personales-tabs .likes-list-cards .items-likes {
    position: relative;
    padding: 0 0 24px 48px;
    border-left: 2px solid var(--black-40);
    width: calc(100% - 12px);
    margin-left: 12px;
}

#datos-personales-tabs .likes-list-cards .items-likes .card-rutes {
    margin-bottom: 0;
}

#datos-personales-tabs #tabs-personal .likes-list-cards .items-likes p.date-item-likes {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

#datos-personales-tabs .likes-list-cards .items-likes:last-of-type:after {
    content: "";
    bottom: -2px;
    left: -9px;
    width: 16px;
    height: 16px;
    background-color: var(--black-40);
    position: absolute;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

}

#datos-personales-tabs .likes-list-cards .items-likes::before {
    content: "";
    position: absolute;
    top: 0;
    left: -12px;
    width: 24px;
    height: 24px;
    background-color: #FFF;
    border-radius: 500px;
    border: 2px solid var(--black-40);
}

#datos-personales-tabs .card-rutes {
    position: relative;
}

#datos-personales-tabs .card-rutes a.fake-link {
    /* outline: 1px solid blue; */
    font-size: 0;

}

#datos-personales-tabs .card-rutes a.fake-link::after {
    position: absolute;
    content: "";
    /* background-color: #1877F250; */
    top: 0;
    left: 0;
    width: calc(100% - 48px);
    /* z-index: 0; */
    height: 100%;

}

/* Perfil usuari */
#datos-personales-tabs .form-check-inline {
    display: block;
    margin-right: auto;
}

.form-item-user .control-label {
    display: none;
}

#datos-personales-tabs .nav-item img {
    height: 20px;
}


/* Perfil usuari */
#datos-personales-tabs .form-check-inline {
    display: block;
    margin-right: auto;
}

.form-item-user .control-label {
    display: none;
}

#datos-personales-tabs .nav-item img {
    height: 20px;
}

#member-profile .password-group {
    margin-top: 8px;
}

#datos-personales-tabs #member-profile .input-group {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--black-40);
}

#datos-personales-tabs #member-profile .password-group button,
#datos-personales-tabs #member-profile .password-group input {
    border: none;
    border-radius: 0;
    padding: 8px 12px;
    background-color: #fff;
}

@media(max-width:991px) {
    #datos-personales {
        padding: 24px 0 12px;
    }

    #datos-personales .card-personal-data {
        flex-direction: column;
        gap: 20px
    }

    #datos-personales .card-personal-data h1 span {
        font-size: 36px;
    }

    #datos-personales .card-personal-data h1 {
        font-size: 36px;
        flex-direction: row;
        gap: 8px;
    }

    #datos-personales .card-personal-data p {
        font-size: 16px;
    }

    #datos-personales-tabs {
        padding: 12px 0;
    }

    #datos-personales-tabs .nav-tabs {
        gap: 8px
    }

    #datos-personales-tabs button {
        padding: 8px 12px;
    }

    #datos-personales-tabs .card-rutes {
        padding: 12px;
        gap: 12px;
        flex-direction: column;
    }

    #datos-personales-tabs .card-rutes figure {
        width: 100%;
        height: 200px;
    }

    #datos-personales-tabs .card-rutes figure img {
        width: 100%;
        height: auto;
    }

    #datos-personales-tabs #tabs-personal .card-rutes .caption-card-rutes h3 {
        font-size: 20px;
        width: calc(100% - 64px);
    }

    #datos-personales-tabs #tabs-personal .card-rutes .caption-card-rutes p {
        font-size: 16px;
    }

    #datos-personales-tabs #tabs-personal .card-rutes .caption-card-rutes .row-icons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    #datos-personales-tabs #tabs-personal .card-rutes .caption-card-rutes .row-icons li {
        width: 48%;
    }

    #datos-personales-tabs #tabs-personal h2 {
        font-size: 24px;
        margin-bottom: 12px;
    }

    #datos-personales-tabs .my-interests {
        padding: 20px;
        margin-top: 32px;
    }

    #datos-personales-tabs .card-rutes a.fake-link::after {
        display: none;
    }

    #datos-personales-tabs #tabs-personal .card-rutes .dropdown-right {
        margin-left: auto;
        margin-right: 0;
        position: absolute;
        z-index: 2;
        right: 012px;
        top: 220px;
    }

    #datos-personales-tabs .likes-list-cards .items-likes {
        padding: 0 0 20px 20px;
    }

    #datos-personales .control-figure figure {
        min-height: none;
        min-width: none;
        height: calc(100vw - 24px);
        width: calc(100vw - 24px);

    }

    #datos-personales .control-figure figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #datos-personales-tabs #tabs-personal .item-cnt,
    #datos-personales-tabs #tabs-personal .control-group {
        margin-bottom: 12px;
    }

    #datos-personales-tabs #tabs-personal button.validate {
        padding: 12px;
        width: 100%;
    }

    #datos-personales-tabs #tabs-personal .my-interests h3 {
        font-size: 24px;
    }
}

/*********** Afegit per l'Akram **********/
.document-informatiu a {
    color: #787b85;
}

/* Excloure específicament els controls del mapa */
#ficha-alerta #mini-mapa-alerta a,
#ficha-alerta #mini-mapa-alerta a:hover,
#ficha-alerta #mini-mapa-alerta a:focus,
#ficha-alerta #mini-mapa-alerta .leaflet-control a,
#ficha-alerta #mini-mapa-alerta .leaflet-control a:hover,
#ficha-alerta #mini-mapa-alerta .leaflet-control a:focus {
    margin-bottom: 0 !important;
    text-decoration: none !important;
    display: block !important;
    padding-top: 4px !important;
    font-size: 22px !important;
    color: black !important;
}

/* Footer-style */
#prefooter {
    margin-top: 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    padding: 32px 0 64px 0;
}

#prefooter img {
    height: 44px;
    width: auto;
}

#prefooter-1 .row {
    margin-top: 40px;
}

@media(max-width:991px) {
    #prefooter {
        gap: 16px;
    }

    #prefooter img {
        height: 24px;
    }

    #prefooter-1 .col-md-4 img {
        margin-top: 16px;
        max-width: 80% !important;
    }
}

#footer {
    position: relative;
}

#footer .footer-content {
    border-radius: 16px;
    background: linear-gradient(233deg, #004489 39.45%, #1965B2 94.27%);
    padding: 32px;
    /* card 1 */
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.15);
}

#footer .footer-content hr {
    opacity: 0.5;
    border: 1px solid var(--te-blue);
    width: 100%;
    margin: 32px 0;
}

#footer p.footer-share {
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
    text-align: center;
}

#footer ul.share-list-icons {
    padding: 0;
    margin: 32px auto 32px auto;
    display: flex;
    flex-direction: row;
    gap: 44px;
    list-style: none;
    width: fit-content;


}

#footer ul.share-list-icons li a img {
    width: 40px;
}

@media(max-width:991px) {
    #footer ul.share-list-icons {
        gap: 16px;

    }

    #footer ul.share-list-icons li a img {
        width: 20px;
    }
}

#footer .title-menu {
    margin: 0;
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#footer ul.menu-footer {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 20px;

}

#footer ul.menu-footer li a {
    color: var(--te-blue-light-bg);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

#footer .footer-logo-white {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
}

#footer .footer-logo-white img {
    width: 100px;
    margin: 0 auto 24px auto;
    display: flex;
}

#footer .footer-logo-white p {
    color: var(--te-blue-light-bg);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

footer #legal-menu {
    padding-top: 112px;
    padding-bottom: 64px;

}

footer #legal-menu ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 36px;
    padding: 0;
}

footer #legal-menu ul li {
    position: relative;
}

footer #legal-menu ul li::before {
    position: absolute;
    content: "·";
    color: var(--te-blue-light-bg);
    right: -20px;
}

footer #legal-menu ul li:last-of-type:before {
    display: none;
}

footer #legal-menu ul li a {
    color: var(--te-blue-light-bg);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

@media(max-width:991px) {
    #footer .footer-content {
        padding: 16px;
    }

    #footer .footer-content hr {
        margin: 16px 0;
    }

    footer #legal-menu {
        padding: 32px 12px;
    }

    footer #legal-menu ul {
        margin: 0;
        flex-direction: column;
        gap: 8px;
    }

    footer #legal-menu ul li::before {
        display: none;
    }

    footer #legal-menu ul li a {
        font-size: 14px;
    }

    #footer ul.menu-footer {}


}

/* Style-carrousel */
#home-Carrousel-hero {
    height: calc(100vh - 143px);
    width: 100vw;
}

#home-Carrousel-hero .carousel-inner {
    width: 100%;
    height: 100%;
}

#home-Carrousel-hero .carousel-item {
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 40px 120px 40px;
}

#home-Carrousel-hero .carousel-item .caption-hero-carrousell {
    border-radius: 16px;
    background: rgba(255, 255, 255);

    /* card 1 */
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 450px;
    padding: 40px;
}

#home-Carrousel-hero .carousel-item .caption-hero-carrousell span {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#home-Carrousel-hero .carousel-item .caption-hero-carrousell h1 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
}

#home-Carrousel-hero .carousel-item .caption-hero-carrousell p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
}

#home-Carrousel-hero .carousel-item .caption-hero-carrousell ul.ruta-destacada-datos {
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: var(--black-20);
    display: flex;
    padding: 24px;
    margin: 28px 0 0 0;
    list-style: none;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

#home-Carrousel-hero .carousel-item .caption-hero-carrousell ul.ruta-destacada-datos li {
    width: calc(50% - 8px);
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-direction: row;
    gap: 16px;
}


#home-Carrousel-hero .carousel-item .caption-hero-carrousell button {
    display: flex;
    flex-direction: row;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
    width: fit-content;
}

#home-Carrousel-hero .carousel-item .caption-hero-carrousell .valorations-caption {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin: auto 0 0 0;

}

#home-Carrousel-hero .carousel-item .caption-hero-carrousell .valorations-caption p {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

#home-Carrousel-hero .carousel-item .caption-hero-carrousell .valorations-caption ul {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    list-style: none;

}

#home-Carrousel-hero .carousel-item .caption-hero-carrousell .valorations-caption li {
    border-radius: 500px;
    width: 32px;
    height: 32px;
    border: 2px solid #FFF;
    background-color: var(--black-60);
    margin-left: -8px;

}

#home-Carrousel-hero .carousel-item .caption-hero-carrousell .valorations-caption li:first-of-type {
    margin: 0;
}

#home-Carrousel-hero .carousel-control-next,
#home-Carrousel-hero .carousel-control-prev {
    top: inherit;
    bottom: 40px;
    height: 48px;
    width: 48px;
    border-radius: 500px;
    background-color: #DCF4FE;
    z-index: 2;
}

#home-Carrousel-hero .carousel-control-next {
    left: 104px;
}

#home-Carrousel-hero .carousel-control-prev {
    left: 40px;
}

#home-Carrousel-hero .carousel-indicators {
    position: absolute;
    left: 40px;
    bottom: 40px;
    width: 450px;
    margin: 0;
    display: flex;
    flex-direction: row;
    height: 48px;
    align-items: center;
    justify-content: end;
    z-index: 1;
}

#home-Carrousel-hero .carousel-indicators button {
    width: 14px;
    height: 14px;
    border: none;
    padding: 0;

    border-radius: 14px;
    background: var(--te-blue-light);
    transition: var(--common-trans);
}

#home-Carrousel-hero .carousel-indicators .active {
    background: var(--te-blue);
}

@media(max-width:991px) {

    #home-Carrousel-hero .video-background iframe,
    #home-Carrousel-hero .video-background video {
        min-width: 120%;
        min-height: 120%;
    }
}

/* Video de fons per al slider */
#home-Carrousel-hero .carousel-item {
    position: relative;
    overflow: hidden;
}

#home-Carrousel-hero .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

#home-Carrousel-hero .video-background iframe,
#home-Carrousel-hero .video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    border: none;
}

/* Assegurar que el caption quedi per sobre del vídeo */
#home-Carrousel-hero .carousel-item .caption-hero-carrousell {
    position: relative;
    z-index: 2;
}

/* Opcional: afegir una capa semi-transparent sobre el vídeo per millorar la llegibilitat */
#home-Carrousel-hero .carousel-item .video-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Ocultar tots els controls de vídeo */
#home-Carrousel-hero .video-background video::-webkit-media-controls,
#home-Carrousel-hero .video-background video::-webkit-media-controls-panel,
#home-Carrousel-hero .video-background video::-webkit-media-controls-play-button,
#home-Carrousel-hero .video-background video::-webkit-media-controls-volume-slider,
#home-Carrousel-hero .video-background video::-webkit-media-controls-mute-button,
#home-Carrousel-hero .video-background video::-webkit-media-controls-timeline,
#home-Carrousel-hero .video-background video::-webkit-media-controls-current-time-display,
#home-Carrousel-hero .video-background video::-webkit-media-controls-time-remaining-display,
#home-Carrousel-hero .video-background video::-webkit-media-controls-seek-back-button,
#home-Carrousel-hero .video-background video::-webkit-media-controls-seek-forward-button,
#home-Carrousel-hero .video-background video::-webkit-media-controls-fullscreen-button,
#home-Carrousel-hero .video-background video::-webkit-media-controls-rewind-button,
#home-Carrousel-hero .video-background video::-webkit-media-controls-return-to-realtime-button,
#home-Carrousel-hero .video-background video::-webkit-media-controls-toggle-closed-captions-button {
    display: none !important;
    -webkit-appearance: none;
}

#home-Carrousel-hero .video-background video {
    pointer-events: none;
    /* Desactiva la interacció amb el vídeo */
}

/* Filtros rutas */
/* === ESTILS SISTEMA DE FILTRES - MÒDULS === */

/* Missatges de no resultats */
.no-results-message {
    width: 100%;
    text-align: center;
    padding: 2rem;
    margin: 1rem 0;
}

.no-results-content {
    background: #f3f8ea;
    border-radius: 12px;
    padding: 2rem;
    border: 2px dashed #d2e3c8;
}

.no-results-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.no-results-content h3 {
    color: #495057;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.no-results-content p {
    color: #6c757d;
    margin-bottom: 1.5rem;
}

/* Cards de suggeriments */
.suggestion-card {
    position: relative;
}

.suggestion-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #86b918;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    z-index: 2;
    font-weight: bold;
}

.no-suggestions-content {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
}

.no-suggestions-content p {
    margin-bottom: 1rem;
    color: #856404;
}

#clear-filters-suggestion {
    background: #007bff;
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}

#clear-filters-suggestion:hover {
    background: #0056b3;
}

/* Canvis de Quique */
@media(max-width:991px) {
    #login-form {
        padding: 20px 0;
    }

    #login-form h1 {
        font-size: 40px;
    }

    #login-form .card-login {
        padding: 20px;
        flex-direction: column;
        margin: 12px 0;
        gap: 0;
    }

    #login-form .card-login .caption-card-login {
        width: 100%;
    }



    #login-form .card-login img.decoration-img-login {
        display: none;
    }



}

/* #favourites-row .container-card {
    padding-left: 0;
    padding-right: 0;
} */

#favourites-row .container-card {
    padding: 0;
    min-width: 100%;
    height: 600px;
    position: relative;
}


#favourites-row .container-card .card-slick-carrousel {
    outline: none;
    height: calc(100% - 40px);
}

#favoritos h1 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 76px;
    font-weight: 400;
}

#favoritos {
    padding: 64px 0;
}

#favoritos p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

#favoritos .download-all {
    border: none;
    display: flex;
    padding: 8px 16px;
    gap: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--te-green-light-bg);
    color: var(--black-80);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#favoritos p a {
    color: var(--te-blue);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

#favourites-row .container-card button.delete-favourite {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 16px 0 0 0;
}

/*********** Afegit per l'Akram **********/

#banner-share ul.centered-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    list-style: none;
}

/* Descarregar GPX de rutes planificades */
#downloadGpxModal .modal-content {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 30px 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

#downloadGpxModal .alert-img {
    width: 60px;
    margin: 0 auto 15px;
}

#downloadGpxModal button {
    display: flex !important;
    padding: 16px 20px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 8px !important;
    background: var(--te-green) !important;
    color: #FFF !important;
    font-family: var(--source-sans) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    width: 100% !important;
    border: none !important;
    cursor: pointer !important;
}

#downloadGpxModalLabel {
    color: var(--black-80) !important;
    font-family: var(--source-sans) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

#downloadGpxModal .modal-title {
    margin-bottom: 15px !important;
}

#downloadGpxModal button img {
    vertical-align: middle !important;
    margin-right: 6px !important;
}

#downloadGpxModal button.cancel {
    background: #f1f1f1 !important;
    color: #333 !important;
    margin-top: 10px;
}

#downloadGpxModal #gpxOptions p {
    color: var(--black-80) !important;
    font-family: var(--source-sans) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

#downloadGpxModal label {
    color: var(--black-90) !important;
    font-family: var(--source-sans) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

#downloadGpxModal .form-check {
    text-align: left;
    margin-bottom: 8px;
}

.traffic {
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
    display: flex;
    width: fit-content;
    font-size: 12px;
}

.traffic.traffic-0 {
    background-color: var(--te-green-light-bg);
}

.traffic.traffic-1 {
    background-color: var(--te-blue-light-bg);
}

/* ----- Gamificació ---------- */

.hero-gamificacion {
    padding-bottom: 72px;

}

.hero-gamificacion a {
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 40px;
    display: flex;
    gap: 8px;
    width: fit-content;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
}

.hero-gamificacion h1 {
    color: var(--te-second-blue);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
}

.hero-gamificacion p {
    color: var(--black-60);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-top: 16px;
}

.aventura-familia {
    padding: 72px 0;
    background-color: #FAFAFA;
}

.aventura-familia h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
}

.aventura-familia h3 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 40px;
}

.aventura-familia .col-md-6 p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.aventura-familia .col-md-6 p strong {
    color: black;
}

.aventura-familia .com-funciona {
    margin-top: 64px;
}

.aventura-familia .com-funciona ol {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    width: 100%;
    padding: 0;

}

.aventura-familia .com-funciona ol li {
    width: calc(33% - 1rem);
    padding-left: 76px;
    position: relative;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 24px;
    padding-right: 8px;
}

.aventura-familia .com-funciona ol li span {
    width: 56px;
    height: 56px;
    background-color: var(--te-green-light-bg);
    border-radius: 10000px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #000;
    text-align: center;
    font-family: var(--source-sans);
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
}


.aventura-familia .com-funciona ol li a {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.aventura-familia .card-reptes {
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    border-radius: 16px;
    border: 1px solid var(--black-40);
    background-color: #FFF;
}

.aventura-familia .card-reptes .item-card {
    width: 100%;

    padding-bottom: 40px;
    border-bottom: 1px solid var(--black-20);
}

.aventura-familia .card-reptes .item-card img {
    float: right;
    /* width: 30%; */
    height: auto;
}


@media(max-width:991px) {
    .aventura-familia .card-reptes .item-card img {
        float: none;
        /* width: 30%; */
        height: 200px;
        margin-bottom: 24px;
    }
}

.aventura-familia .card-reptes .item-card:last-of-type {
    border-bottom: none;
    padding-bottom: 0;

}

.aventura-familia .card-reptes .item-card h4 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    width: 70%;
}

.aventura-familia .card-reptes .item-card p {
    width: 70%;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
}

.aventura-familia .jugar-apendre h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
}

.aventura-familia .jugar-apendre h3 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 12px;
    margin-top: 20px;
    padding-left: 32px;
}

.aventura-familia .jugar-apendre p {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    padding-left: 32px;
}

.aventura-familia .jugar-apendre img {
    width: 100%;
}

.cards-links-game {
    padding: 80px 0;
    background-color: #FAFAFA;
}

.cards-links-game .link-go-game {
    border-radius: 16px;
    border: 1px solid var(--black-20);
    background: #FFF;
    padding: 40px;
    margin-bottom: 40px;
}

.cards-links-game .link-go-game h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    width: 65%;
}

.cards-links-game .link-go-game p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 16px;
    width: 65%;
}

.cards-links-game .link-go-game p:last-of-type {
    margin-bottom: 0px;
}

.cards-links-game .link-go-game p strong {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

.cards-links-game .link-go-game a {
    border-radius: 8px;
    padding: 16px 20px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: fit-content;
    margin-top: 32px;
}

.cards-links-game .link-go-game img {
    float: right;
    width: 20%;
}



.preparats {
    padding: 0 0 80px 0;
    background-color: #FAFAFA;
}

.preparats h2 {
    color: var(--te-second-blue);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 24px;
}

.preparats p {
    color: var(--black-60);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 20px;
}

.preparats .controler-btn {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.preparats .controler-btn a {
    border-radius: 8px;
    padding: 16px 20px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: fit-content;
    margin-top: 0px;
}

#modal-login-gamificacion .modal-content .modal-content-controler {
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    position: relative;
}

#modal-login-gamificacion p {
    color: var(--black-60);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

#modal-login-gamificacion p.title {
    color: var(--te-second-blue);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    margin-top: 32px;
}

#modal-login-gamificacion p a {
    color: var(--brand-te-te-blue, #017295);
    font-family: "Source Sans Pro";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

#modal-login-gamificacion a.btn-modal {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: fit-content;
    margin: 32px auto 0 auto;
    text-decoration: none;
}

#modal-login-gamificacion .btn-close {
    position: absolute;
    top: 36px;
    right: 36px;
}

@media(max-width:991px) {
    .hero-ficha-gamificacion h1 {
        font-size: 44px;
    }

    .intro-ficha h2 {
        font-size: 28px;
    }

    .intro-ficha p {
        width: 100%;
    }
}


.hero-ficha-gamificacion {
    padding-bottom: 80px;
}

.hero-ficha-gamificacion h1 {
    color: var(--te-second-blue);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
    margin-top: 40px;
    margin-bottom: 24px;
}

.hero-ficha-gamificacion p {
    color: var(--black-60);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

.hero-ficha-gamificacion a {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: fit-content;
    margin: 32px auto 0 auto;
    text-decoration: none;
}

.intro-ficha {
    padding: 80px 0 120px 0;
    background-color: #FAFAFA;
}

.intro-ficha h2 span {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
}

.intro-ficha h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    margin-bottom: 64px;
}

.intro-ficha h3 {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
}

.intro-ficha p {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

.intro-ficha hr {
    background: var(--black-40);
    margin: 40px 0;
}

.intro-ficha .card-jocs-taula {
    display: flex;
    padding: 40px;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid var(--black-40);
    background: #FFF;
}

.intro-ficha h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 16px;
}

.intro-ficha p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    width: 70%;
}

.intro-ficha .row-cards-games {
    display: flex;
    gap: 24px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.intro-ficha .row-cards-games .item-card-games {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    width: calc(33% - 14px);
    border-radius: 8px;
    outline: 1px solid var(--black-40);
    background: #FAFAFA;
    transition: .3s ease-in-out;
}

@media(max-width:991px) {
    .intro-ficha .row-cards-games .item-card-games {
        width: calc(50% - 12px);
    }
}

@media(max-width:767px) {
    .intro-ficha .row-cards-games .item-card-games {
        width: 100%;
    }
}

.intro-ficha .row-cards-games .item-card-games:hover {
    outline: 3px solid var(--te-green);
}

.intro-ficha .row-cards-games .item-card-games h3 {

    color: var(--black-90);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.intro-ficha .row-cards-games .item-card-games p {
    color: var(--black-60);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.intro-ficha .row-cards-games .item-card-games img {
    margin-bottom: 16px;
    width: 132px;
    height: auto;
}

.intro-ficha .row-cards-games .item-card-games a {
    display: flex;
    flex-direction: row;
    gap: 12px;
    border-radius: 8px;
    background: var(--te-green);
    padding: 16px 20px;
    margin-top: 40px;
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

.cards-links-game.no-bg-color {
    background-color: transparent;
}

.hero-quiz-gamificacion {
    padding-bottom: 20px;
}

.hero-quiz-gamificacion h1 {
    color: var(--te-second-blue);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
}

.hero-quiz-gamificacion p {
    color: var(--neutral-black-60, #787B85);
    text-align: center;
    font-family: "Source Sans Pro";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
}

.hero-quiz-gamificacion .row-imgs-quiz {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    margin: 32px 0;
}

.hero-quiz-gamificacion .row-imgs-quiz button {
    width: 33%;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.hero-quiz-gamificacion .row-imgs-quiz.drag button {
    cursor: grab;
}

.hero-quiz-gamificacion .row-imgs-quiz button img {
    width: 100%;
    min-height: 120px;
    object-fit: cover;
    height: 100%;
}

.quiz-section p {
    color: var(--black-90);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
}

.quiz-section form fieldset {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 32px;
}

.quiz-section form fieldset label {
    display: flex;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--black-40);
    align-self: stretch;
    width: fit-content;
    margin: 0 auto;
    cursor: pointer;
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.quiz-section form fieldset input {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

.quiz-section form fieldset input[type="radio"] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--black-90);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    flex: 0 0 auto;
}

.quiz-section form fieldset input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 0px;
    background: var(--black-90);
    border-radius: 0;
}


.quiz-section .card-quiz-ok {
    margin-top: 56px;
    border-radius: 16px;
    background: #F2F7E7;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 64px 0;

}

.quiz-section .card-quiz-ko {
    margin-top: 56px;
    border-radius: 16px;
    background: #FDEDED;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 40px 0;
}

.quiz-section .card-quiz-ok p.title {
    color: var(--te-green);
    text-align: center;
    font-family: var(--atma);
    font-size: 88px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
}

.quiz-section .card-quiz-ko p.title {
    color: #E94646;
    text-align: center;
    font-family: var(--atma);
    font-size: 88px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
}

.quiz-section .card-quiz-ko p.sub-title,
.quiz-section .card-quiz-ok p.sub-title {
    color: var(--black-90);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    width: 80%;
    margin: 0 auto;
}

.quiz-section .card-quiz-ok p.insignia {
    color: var(--te-second-blue);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
}

.quiz-section .card-quiz-ok p.name-insignia {
    color: var(--black-90);
    text-align: center;
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
}

.quiz-section .card-quiz-ok hr {
    width: 100%;
    margin: 32px 0;
    border: 2px solid var(--black-20);
    opacity: 1;
}

.quiz-section .card-quiz-ok img {
    margin-top: 24px;
    width: 150px;
    height: auto;
}


@media(max-width: 768px) {
    .hero-quiz-gamificacion h1 {
        font-size: 40px;
        margin-top: 20px;
    }

    .quiz-section .card-quiz-ko,
    .quiz-section .card-quiz-ok {
        padding: 24px;
    }

    .quiz-section p {
        font-size: 24px;
    }

    .quiz-section .card-quiz-ko p.title,
    .quiz-section .card-quiz-ok p.title {
        font-size: 44px;
    }

    .quiz-section .card-quiz-ko hr,
    .quiz-section .card-quiz-ok hr {
        margin: 16px 0;
    }

    .quiz-section .card-quiz-ko p.sub-title,
    .quiz-section .card-quiz-ok p.sub-title {
        font-size: 24px;
    }

    .hero-gamificacion h1 {
        font-size: 40px;
    }

    .aventura-familia {
        padding: 32px 0;
    }

    .aventura-familia h2 {
        font-size: 40px;
    }

    .aventura-familia h3 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .aventura-familia .com-funciona ol {
        flex-direction: column;
        gap: 12px;
    }

    .aventura-familia .com-funciona ol li {
        width: 100%;
        margin-bottom: 12px;
    }

    .aventura-familia .card-reptes {
        padding: 20px;
    }

    .aventura-familia .card-reptes .item-card h4 {
        font-size: 32px;
        width: 100%;
    }

    .aventura-familia .card-reptes .item-card p {
        width: 100%;
    }

    .aventura-familia .jugar-apendre h2 {
        font-size: 40px;
        margin-top: 56px;
    }

    .aventura-familia .jugar-apendre h3,
    .aventura-familia .jugar-apendre p {
        padding-left: 0px;
    }

    .cards-links-game {
        padding: 40px 0;
    }

    .cards-links-game .link-go-game {
        padding: 20px;
    }

    .cards-links-game .link-go-game h2,
    .cards-links-game .link-go-game p {
        width: 100%;
    }

    .cards-links-game .link-go-game img {
        width: 60%;
        float: none;
        margin-bottom: 20px;
    }

    .preparats h2 {
        font-size: 40px;
    }

    .preparats .controler-btn {
        flex-direction: column;
        gap: 16px;
    }

    .preparats .controler-btn a {
        width: 100%;
        justify-content: center;
    }
}

.quiz-section form fieldset input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--black-90);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    flex: 0 0 auto;
}

.quiz-section form fieldset input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 0px;
    background: var(--black-90);
    border-radius: 0;
}

.quiz-column.quiz-column-drag {
    min-height: 200px;
    border: 1px solid #dcdee6;
    padding: 15px;
}

.quiz-column.quiz-column-drag img {
    max-width: 75px;
}

/* NEW LLOGUER Y BICICLETAS */
.llistat-lloguer {
    padding: 40px 0;
}

.llistat-lloguer h2 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 24px;
}

.llistat-lloguer .col-md-4 {
    margin-bottom: var(--bs-gutter-x);
}

.llistat-lloguer h3 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.llistat-lloguer .card-lloguer {
    padding: 32px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 2px solid var(--black-40);
    background: var(--neutral-white, #FFF);
}


.llistat-lloguer .card-lloguer p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}


.llistat-lloguer .card-lloguer p a {
    color: var(--black-90);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}



.llistat-lloguer .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.llistat-lloguer .pagination ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: 8px;
    padding: 24px 0;
}


.llistat-lloguer .pagination ul li a {
    width: 40px;
    height: 40px;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--common-trans);
    background-color: var(--black-10);
    border-radius: 4px;

    text-decoration: none;
    color: var(--black-80);
    transition: var(--common-trans);
}

.llistat-lloguer .pagination ul li a.active,
.llistat-lloguer .pagination ul li a:hover {
    background-color: var(--te-second-blue);
    color: var(--te-second-blue-light-bg);
}


.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 0px;
    border-radius: 50px !important;
}

div#search-form {
    margin-bottom: 100px;
}

#header-mobile .mod-languages {
    float: right;
    margin-left: auto;
}

#map-rutes .col-rutes .col-rutes-body ul.list-rutes li h2 a {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: unset;
}

#services-form .form-check {
    display: flex;
    align-items: flex-start;
}

#services-form .form-check label {
    font-size: smaller;
}

.leaflet-popup-content button {
    margin-top: 10px !important;
    background-color: #005771;
    border-color: #005771;
}

.leaflet-popup.leaflet-zoom-animated {
    min-width: 200px;
}

/* QA JOSE 28 ENERO */

#related-ruta .container-card .card-slick-carrousel {
    min-height: 600px;
}

@media (max-width: 991px) {
    #related-ruta .container-card .card-slick-carrousel {
        min-height: 450px;
    }
}

@media (max-width: 767px) {
    #related-ruta .container-card .card-slick-carrousel {
        min-height: 300px;
    }
}

#search-result-list .result__taxonomy {
    display: none;
}

.com-finder h1 {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0;
}

.com-finder label,
.com-finder p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 8px;
}

.com-finder #search-query-explained p {
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 8px;

}

.com-finder #search-query-explained p span {
    font-weight: 700;
    color: var(--te-second-blue);
}

.com-finder #search-query-explained p a {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.com-finder .result__title-link {
    text-decoration: none;
}

.com-finder .result__title-url {
    color: var(--te-green);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 8px;
    text-decoration: none;
}

.com-finder .result__title-text {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 8px;
    text-decoration: none;
}

.com-finder .result__item+.result__item {
    border-top: 1px solid var(--black-40);
}

.com-finder mark {
    background-color: var(--te-green-light-bg);
}

.com-finder div#search-form {
    margin-bottom: 40px;
}

.com-finder .input-group {
    gap: 12px;
}

.com-finder input {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--black-40);
    background: #fff;
    color: var(--black-60);
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    min-width: 40vw;
    min-height: 100%;
}

.com-finder button.btn.btn-primary[type="submit"] {
    display: flex;
    flex-direction: row;
    border-radius: 8px;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: 0px solid transparent;
    padding: 12px 24px !important;
    border-radius: 8px !important;
}

.com-finder button.btn.btn-secondary {
    display: flex;
    flex-direction: row;
    border-radius: 8px;
    background: var(--te-second-blue);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: 0px solid transparent;
    padding: 12px 24px !important;
    border-radius: 8px !important;
}

@media(max-width:767px) {
    .com-finder .input-group .awesomplete {
        width: 100%;
    }
}

#map-rutes .col-rutes .col-rutes-body svg {
    width: 16px;
    height: auto;
    margin-right: 5px;
}

.intro-ficha .row-cards-games .item-card-games.game-played {
    outline: 2px solid green;
}

.item-card-games {
    position: relative;
}

.item-card-games .game-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #6fbf73;
    /* verde */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    z-index: 2;
}

.item-card-games .game-check::before {
    content: "✓";
}


#head-ficha-ruta button#copyShareUrl {
    background-color: #7dba28;
    border-color: #7dba28;
    color: white;
    margin-left: 15px !important;
}

button#copyShareUrl {
    background-color: #7dba28;
    border-color: #7dba28;
}

.btn-answer {
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 40px;
    display: flex;
    gap: 8px;
    width: fit-content;
    background: var(--te-green);
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
    border: none;
}

.quiz-image-btn {
    touch-action: none;
    /* clave */
}

.quiz-image-btn.dragging {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: scale(1.05);
}

#llistat-lloguer .no-bikes-rental-container,
#favoritos .no-favourites,
#alertas .no-alerts-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
}

#llistat-lloguer .no-bikes-rental-container p,
#favoritos .no-favourites p,
#alertas .no-alerts-container p {
    font-size: 18px;
    color: var(--black-60);
    margin-bottom: 30px;
    margin-top: 30px;
}


#favoritos a.btn-go-routes,
#alertas a.btn-go-routes {
    display: flex;
    flex-direction: row;
    border-radius: 8px;
    background: var(--te-green);
    padding: 16px 20px;
    width: fit-content;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 0px solid transparent;
    color: #fff;
    text-decoration: none;
}

#llistat-lloguer .no-bikes-rental-container p {
    font-family: var(--source-sans);
    font-style: normal;
    font-weight: 400;
}

@media (min-width: 993px) and (max-width: 1200px) {


    .header-menu ul.main-menu li a {
        padding: 0px;
        font-size: 13px;
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .header-menu ul.main-menu li a {
        padding: 3px;
        font-size: 15px;
    }
}

@media (min-width: 993px) {
    div#mapid {
        height: 83vh !important;
    }
}

@media (max-width: 992px) {
    #planificador {
        min-height: calc(100vh - 110px) !important;
    }

    div#mapid {
        height: 83vh !important;
    }
}

.audioguies-wrapper {
    max-width: 800px;
    margin: 3rem auto;
    padding: 2.5rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.error-message {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(141, 198, 63, 0.05) 0%, rgba(141, 198, 63, 0.02) 100%);
    border-radius: 8px;
    border: 2px solid var(--te-green);
}

.error-title {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 36px;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
}

.error-text {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

.error-hint {
    color: rgba(0, 114, 188, 0.7);
    font-family: var(--source-sans);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    line-height: 1.6;
}

.audioguies-title {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    margin: 0 0 2.5rem 0;
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid var(--te-green);
}

.audioguia-item {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(141, 198, 63, 0.08) 0%, rgba(141, 198, 63, 0.02) 100%);
    border-radius: 8px;
    border-left: 4px solid var(--te-green);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.audioguia-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(141, 198, 63, 0.3);
}

.audioguia-item:last-child {
    margin-bottom: 0;
}

.audioguia-lang {
    color: var(--te-second-blue);
    font-family: var(--source-sans);
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.audioguia-item audio {
    width: 100%;
    outline: none;
    border-radius: 6px;
    background: rgba(141, 198, 63, 0.1);
}

.audioguia-item audio::-webkit-media-controls-panel {
    background-color: rgba(141, 198, 63, 0.15);
}

@media (max-width: 768px) {
    .audioguies-wrapper {
        margin: 1.5rem auto;
        padding: 1.5rem;
    }

    .audioguies-title {
        font-size: 32px;
        margin-bottom: 1.5rem;
    }

    .audioguia-lang {
        font-size: 22px;
    }

    .audioguia-item {
        padding: 1rem;
    }

    .error-message {
        padding: 2rem 1rem;
    }

    .error-title {
        font-size: 28px;
    }

    .error-text {
        font-size: 18px;
    }

    .error-hint {
        font-size: 14px;
    }
}

.swipper-container {
    touch-action: auto !important;
}

p.blog-author label {
    width: 30px;
    background: var(--te-blue-light);
    border-radius: 50%;
    text-align: center;
    padding: 5px;
}

.blog-meta hr {
    width: 80px;
    color: var(--te-green);
    height: 2px;
    border: 3px solid;
}

.blog-meta {
    margin-bottom: 50px;
}

.hero-ficha-title {
    margin: 64px 0 20px;
}

.btn-gamificacio {
    border-radius: 8px;
    background: var(--te-green);
    display: flex;
    flex-direction: row;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #FFF;
    font-family: var(--source-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    width: fit-content;
}