/* =========================================
   ECOVIES — Estilos principals
   (tokens y reset centralizados en variables.css)
   =========================================

   ÍNDICE
   -----------------------------------------
   COMPONENTS COMUNS
   ─────────────────────────────────────────
   1.  TIPOGRAFIA GLOBAL         (.c-heading-*)
   2.  UTILITATS / LAYOUT        (.full-right, .full-left)
   3.  C-BUTTON                  (.c-button, --primary, --secondary, --tertiary)
   4.  LINK TYPE                 (.link-type)
   5.  BREADCRUMBS               (.breadcrumbs)
   6.  C-CARD                    (.c-card, modificadors)

   SECCIONS DE PÀGINA
   ─────────────────────────────────────────
   7.  PAGE HEADER               (.page-header)
   8.  INFO PRÀCTICA HEAD        (.info-practica-head)
   9.  INFO PRÀCTICA SECTIONS    (.info-practica-sections)
   10. C-FAQS                    (.c-faqs)
   11. PLANIFICA EL TEU VIATGE   (.planifica-viatge)
   12. BANNER HELP               (.banner-help)
   13. MAP DOWNLOAD              (.maps-download)
   14. TABS DOWNLOAD             (.tabs-download)
   15. SERVICES LIST             (.services-list)
   16. AGENDA ROW                (.agenda-row)
   17. NORMATIVA INFO            (.normativa-info)
   18. LEGALES SECTION           (.legales-section)
   19. TABS TRANSPARÈNCIA        (.tabs-transparencia)
   20. GRID FOTOS DOWNLOAD       (.grid-fotos-download)
   21. ESTUDI SECTION            (.estudi-section)
   22. ACTUALITAT LIST CARD      (.actualitat-card)
   23. GALLERY SECTION           (.gallery-section)
   24. FICHA AGENDA              (.ficha-agenda)
   25. CONTACT FORM              (.contact-form)
   26. CONTENT SEARCH            (.content-search)
   27. BLOG LIST                 (.blog-list)
   28. CONNECTA                  (.connecta, .newsletter)
   29. FICHA BLOG                (.ficha-blog)
   30. RUTAS ASOCIADAS           (.rutas-asociadas-section)
   31. INSPIRA SECTION           (.inspira-section)
   32. TAMBÉ ET POT INTERESSAR   (.tambien-interesar_news)
   33. HEADER                    (.header, .c-megamenu, .c-search-modal)
   34. FOOTER                    (.footer)
   35. INTRO HOME                (.intro-home, .search-routes)
   36. PLANIFICA SECTION         (.planifica-section)
   37. PLANIFICA CAROUSEL        (.planifica-carousel)
   38. TROBA RUTA                (.troba-ruta)
   39. MILLON                    (.millon)
   40. ECOVIAS INTRO             (.ecovias-intro)
   41. TOTES RUTES               (.totes-rutes, .ruta-card)
   42. ECOVIES MAPA              (.ecovies-mapa)
   43. PERSONALITZA CTA          (.personalitza-cta)
   44. GRID RUTES                (.grid-rutes)
   45. MAP ECOVIAS               (.map-ecovias)
   46. PLANIFICADOR CTA          (.planificador-cta)
   47. ALTRES RUTES              (.altres-rutes)
   48. SECTION GALLERY           (.section-gallery)
   49. RUTAS ASOCIADAS GRID      (.rutas-asociadas__grid-container)
   50. FICHA LIST             (.ficha-list)
  


/* =========================================
   1. TIPOGRAFIA GLOBAL
   ========================================= */

.c-heading-2 {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-4xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-4xl);
}

.c-heading-3{
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-xl);
}


/* =========================================
   2. UTILITATS / LAYOUT
   ========================================= */

.full-right,
.full-left {
    position: relative;
}

.full-right::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 1px;
    width: calc((100vw - var(--container-max-width)) / 2 + var(--container-max-width));
    background-color: var(--text-100);
}

.full-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: calc(50vw - var(--container-max-width)) / 2 + var(--container-max-width);
    background-color: var(--text-100);
}

.medium-left {
    position: relative;
}

.medium-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 50vw;
    background-color: var(--text-100);
}



/* --- Solució B: margin-top quan ve just després d'una secció amb fons --- */
.info-practica-head + .full-right,
.info-practica-head + .full-left,
.maps-download + .full-right,
.maps-download + .full-left,
.c-faqs + .full-right,
.c-faqs + .full-left,
.estudi-section + .full-right,
.estudi-section + .full-left {
    margin-top: var(--section-sm);
}


/* =========================================
   3. C-BUTTON
   =========================================

   Botón de dos partes que intercambien colores en hover,
   inspirado en el patrón "split-swap button":

   ┌─────────────────────────────┐ ┌─────┐
   │  DESCUBRE EL VIATGE         │ │  →  │  ← estado normal
   └─────────────────────────────┘ └─────┘
     fondo --primary-500 (oscuro)    fondo --accent-500 (verde claro)

   ┌─────────────────────────────┐ ┌─────┐
   │  DESCUBRE EL VIATGE         │ │  →  │  ← hover
   └─────────────────────────────┘ └─────┘
     fondo --accent-500 (verde claro)  fondo --primary-500 (oscuro)

   ESTRUCTURA HTML
   ────────────────────────────────────────
   <a class="c-button" href="#">
       <span class="c-button__label">Text del botó</span>
       <span class="c-button__icon">
           <i class="ti ti-arrow-right"></i>
       </span>
   </a>

/* ── Contenidor principal ───────────────────────────────── */
.c-button {
    display: inline-flex;
    align-items: stretch;
    text-decoration: none;
    cursor: pointer;
    width: fit-content;
    transition: opacity 0.6s ease;
}

/* ── Part esquerra: etiqueta de text ─────────────────────── */
.c-button__label {
    display: flex;
    align-items: center;
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    position: relative;
    transition:
        background-color var(--transition-base),
        color            var(--transition-base);
    border-radius: 12px 0 0 12px;
    letter-spacing: 0;
    line-height: var(--lh-lg);
    margin-right: 32px;
    overflow: visible;
    padding: 8px 8px 8px 20px;
    text-transform: uppercase;
}

.c-button__label-corner {
    background: transparent;
    display: block;
    top: 0;
    right: -16px;
    bottom: 0;
    position: absolute;
    width: 18px;
    height: 100%;
}

.c-button__label-corner svg {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
}

.c-button__label-corner svg path {
    fill: var(--primary-500);
    transition: fill var(--transition-base);
}

/* ── Part dreta: icona de fletxa ────────────────────────── */
.c-button__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px 8px 4px;
    position: relative;
    font-size: var(--fs-md);
    border-radius: 0 12px 12px 0;
    transition:
        background-color var(--transition-base),
        color            var(--transition-base);
}

.c-button__label-corner-icon {
    background: transparent;
    display: block;
    top: 0;
    left: -16px;
    bottom: 0;
    position: absolute;
    width: 18px;
    height: 100%;
}

.c-button__label-corner-icon svg {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
}

.c-button__label-corner-icon svg path {
    fill: var(--accent-500);
    transition: fill var(--transition-base);
}

/* ── Variante Primary ───────────────────────────────────── */
.c-button--primary .c-button__label {
    background-color: var(--primary-500);
    color: var(--white);
}

.c-button--primary .c-button__icon {
    background-color: var(--accent-500);
    color: var(--primary-500);
}

.c-button--primary:hover .c-button__label {
    background-color: var(--accent-500);
    color: var(--primary-500);
}

.c-button--primary:hover .c-button__icon {
    background-color: var(--primary-500);
    color: var(--white);
}

.c-button--primary:hover .c-button__label-corner svg path {
    fill: var(--accent-500);
}

.c-button--primary:hover .c-button__label-corner-icon svg path {
    fill: var(--primary-500);
}

/* ── Variante Secondary ─────────────────────────────────── */
/* Label: --secondary-500 (verd mig) · Icon: --accent-500 (llima)
   Hover: swap complet, igual que --primary                     */
.c-button--secondary .c-button__label {
    background-color: var(--secondary-500);
    color: var(--white);
}

.c-button--secondary .c-button__label-corner svg path {
    fill: var(--secondary-500);
}

.c-button--secondary .c-button__icon {
    background-color: var(--accent-500);
    color: var(--primary-500);
}

.c-button--secondary .c-button__label-corner-icon svg path {
    fill: var(--accent-500);
}

.c-button--secondary:hover .c-button__label {
    background-color: var(--accent-500);
    color: var(--primary-500);
}

.c-button--secondary:hover .c-button__icon {
    background-color: var(--secondary-500);
    color: var(--white);
}

.c-button--secondary:hover .c-button__label-corner svg path {
    fill: var(--accent-500);
}

.c-button--secondary:hover .c-button__label-corner-icon svg path {
    fill: var(--secondary-500);
}

/* ── Variante Tertiary ──────────────────────────────────── */
/* Label: --white (blanc) · Icon: --accent-500 (llima)
   Hover: swap complet                                       */
.c-button--tertiary .c-button__label {
    background-color: var(--white);
    color: var(--primary-500);
}

.c-button--tertiary .c-button__label-corner svg path {
    fill: var(--white);
}

.c-button--tertiary .c-button__icon {
    background-color: var(--accent-500);
    color: var(--primary-500);
}

.c-button--tertiary .c-button__label-corner-icon svg path {
    fill: var(--accent-500);
}

.c-button--tertiary:hover .c-button__label {
    background-color: var(--accent-500);
    color: var(--white);
}

.c-button--tertiary:hover .c-button__icon {
    background-color: var(--white);
    color: var(--primary-500);
}

.c-button--tertiary:hover .c-button__label-corner svg path {
    fill: var(--accent-500);
}

.c-button--tertiary:hover .c-button__label-corner-icon svg path {
    fill: var(--white);
}

/* ── Variante Troba Ruta ──────────────────────────────────── */
/* Label: --primary-500 (verd fosc) · Icon: --white (blanc)
   Hover: swap complet                                       */
.c-button--troba-ruta .c-button__label {
    background-color: var(--primary-500);
    color: var(--white);
}

.c-button--troba-ruta .c-button__label-corner svg path {
    fill: var(--primary-500);
}

.c-button--troba-ruta .c-button__icon {
    background-color: var(--white);
    color: var(--primary-500);
}

.c-button--troba-ruta .c-button__label-corner-icon svg path {
    fill: var(--white);
}

.c-button--troba-ruta:hover .c-button__label {
    background-color: var(--white);
    color: var(--primary-500);
}

.c-button--troba-ruta:hover .c-button__icon {
    background-color: var(--primary-500);
    color: var(--white);
}

.c-button--troba-ruta:hover .c-button__label-corner svg path {
    fill: var(--white);
}

.c-button--troba-ruta:hover .c-button__label-corner-icon svg path {
    fill: var(--primary-500);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 575px) {
    .c-button__label {
        font-size: var(--fs-xs);
    }
}

/* =========================================
   4. LINK TYPE
   ========================================= */
 .link-type{
    color: var(--secondary-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    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;
 }

 .info-practica-head .link-type{
    color: var(--accent-500);
 }
/* =========================================
   5. BREADCRUMBS
   ========================================= */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumbs__link {
    color: rgba(255, 255, 255, 0.80);
    font-family: var(--font-family-base);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: normal;
}

.breadcrumbs__link::after {
    content: "/";
    margin: 0 4px;
    opacity: 0.6;
}

.breadcrumbs__current {
    color: rgba(255, 255, 255, 0.80);
    font-family: var(--font-family-base);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: normal;
}


/* =========================================
   6. C-CARD
   ========================================= */

/* ── Base ─────────────────────────────────────── */
.c-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;
    background-color: var(--text-50);
    padding: 32px;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.c-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.c-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.c-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-2xl);
}

.c-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.c-card__tag {
    display: inline-block;
    font-family: var(--font-family-base);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.c-card__title {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: normal;
}

.c-card__subtitle {
    font-family: var(--font-family-base);
    font-size: var(--fs-sm);
    font-weight: 400;
}

.c-card__text {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
}

.c-card__footer {
    display: flex;
}

.c-card__link {
    color: var(--secondary-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-lg);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    transition: opacity var(--transition-fast);
}

.c-card__link:hover {
    opacity: 0.75;
}

/* ── Modificador: info-practica ───────────────────── */
.c-card--info-practica {
}

.c-card--info-practica .c-card__title {
}

.c-card--info-practica .c-card__text {
}

.c-card--info-practica .c-card__link {
}

/* ── Modificador: planifica ────────────────────────── */
.c-card--planifica {
    background-color: var(--white);
    border: 1px solid var(--text-100);
    padding: 32px 24px;
    gap: 16px;
    box-shadow: none;
    transition: var(--transition-base);
}

.c-card--planifica .c-card__icon {
    justify-content: flex-start;
    font-size: var(--fs-3xl);
    color: var(--accent-500);
}

.c-card--planifica .c-card__body {
    gap: 16px;
}

.c-card--planifica .c-card__title {
    color: var(--secondary-500);
    font-family: var(--font-family-heading);
    font-size: var(--fs-3xl);
    line-height: var(--lh-2xl);
    font-weight: 700;
    letter-spacing: -1.2px;
    transition: var(--transition-base);
}

.c-card--planifica .c-card__text {
    color: var(--text-600);
    font-size: var(--fs-lg);
    margin: 0;
    transition: var(--transition-base);
}

.c-card--planifica:hover{
    background-color: var(--primary-500);
}

.c-card--planifica:hover .c-card__title {
    color: var(--accent-500);
}
.c-card--planifica:hover .c-card__text{
    color: var(--white);
}

/* ── Modificador: download ─────────────────────────── */
.c-card--download {
    background-color: var(--text-50);
    border: 0px solid transparent;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.c-card--download .c-card__body {
    gap: 8px;
}

.c-card--download .c-card__title {
    font-family: var(--font-family-heading);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-800);
    line-height: var(--lh-lg);
}

.c-card--download .c-card__text {
    font-size: var(--fs-lg);
    color: var(--text-600);
    line-height: var(--lh-lg);
}

.c-card--download .c-card__link {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--secondary-500);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-base);
}

.c-card--download .c-card__link:hover {
    color: var(--primary-500);
}

/* ── Responsive: c-card ─────────────────────────────── */
@media (max-width: 575px) {
    .c-card {
        padding: 24px;
    }
    .c-card__title {
        font-size: var(--fs-xl);
    }
    .c-card__text {
        font-size: var(--fs-md);
    }
    .c-card--planifica {
        padding: 24px 20px;
    }
    .c-card--planifica .c-card__icon {
        font-size: var(--fs-2xl);
    }
}


/* =========================================
   7. PAGE HEADER
   ========================================= */

.page-header {
    padding: 32px;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-header__small {
    height: 45vh;
}

@media (max-width: 991px) {
    .page-header {
        padding: 0.75rem;
        height: 85vh;
    }
    
    .header--pinned {
        top: 12px;
        left: 12px;
        width: calc(100% - 24px);
    }
}

.page-header__content {
    border-radius: 16px;
    background-color: var(--black);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: local;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-header__content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    z-index: 0;
}

.page-header__container {
    position: relative;
    z-index: 1;
}

.page-header__title {
    color: var(--white);
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: var(--fs-5xl);
    font-weight: 800;
    line-height: var(--lh-5xl);
    margin-bottom: 32px;
}

.page-header__subtitle {
    color: var(--accent-500);
    text-align: center;
    font-family: var(--font-family-base);
    font-size: var(--fs-3xl);
    font-weight: 400;
    line-height: var(--lh-xl);
}

@media (max-width: 991px) {
    .page-header__subtitle {
        font-size: var(--fs-2xl);
    }
}

@media (max-width: 575px) {
    .page-header__subtitle {
        font-size: var(--fs-xl);
    }
}
.page-header__home-badges{
    margin: 0 auto 12px auto;
    display: flex;
    justify-content: center;
    background-color: #1C504690;
    width: fit-content;
    padding: 8px 16px;
    border-radius: 8px;
    gap: 20px;
}
.page-header__home-badges span{
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.page-header__home-actions{
    display: flex;
    gap: 64px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 64px;
}
.page-header__container .page-header__subtitle,
.page-header__container .page-header__title{
    width: 70%;
    margin: 0 auto 20px auto;
}

/* =========================================
   8. INFO PRÀCTICA HEAD
   ========================================= */

.info-practica-head {
    padding: var(--section-xl) 0;
    background-color: var(--primary-500);
}

.info-practica-head__col-main {
}

.info-practica-head__col-aside {
}

.info-practica-head__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.info-practica-head__title {
    color: var(--accent-500);
    font-size: var(--fs-6xl);
    line-height: var(--lh-6xl);
    letter-spacing: -2.88px;
}
.info-practica-head__title.c-heading-3{
    font-size: var(--fs-4xl);
    line-height: var(--lh-3xl);
    color: var(--white);
    letter-spacing: 0px;
    margin-top: 20px;
}
.info-practica-head__subtitle {
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: var(--lh-lg);
}
.info-practica-head__text {
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin: 0;
}
.info-practica-head__img{
    width: 100%;
    height: auto;
    border-radius: 16px;    
    object-fit: cover;
    margin: 32px 0 0 0;
}
.info-practica-head__interl-link{
    color: var(--accent-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-lg);
    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;
}

.info-practica-head__highlight{
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-lg);
    margin-bottom: 0px;
}

@media (max-width: 575px) {
    .info-practica-head__title {
        letter-spacing: -1.5px;
    }
    .info-practica-head__text {
        font-size: var(--fs-md);
    }
}

.info-practica-card{
    background-color: var(--bg-secondary);
    padding: var(--section-sm);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: var(--section-md);
}
.info-practica-card__title{
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-800);
    line-height: var(--lh-lg);
    margin-bottom: 4px;
}
.info-practica-card__text{
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
     margin: 0;
}

.info-practica-head__alert{
    background-color: var(--bg-alert);
    display: flex;
    flex-direction: row;
    padding: 12px 24px;
    border-radius: 12px;
    gap: 16px;
    margin-top: var(--section-sm);
}
.info-practica-head__icon{
    color: var(--error-500);
    font-size: var(--fs-2xl);
}
.info-practica-head__alert-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    margin-right: auto;
}
.info-practica-head__alert-content span{
    color: var(--color-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-sm);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.info-practica-head__alert-content p{
    margin: 0;
    color: var(--black);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: normal;

}
.info-practica-head__link{
    color: var(--black);
    font-size: var(--fs-2xl);

}

/* =========================================
   9. INFO PRÀCTICA SECTIONS
   ========================================= */

.info-practica-sections {
    padding: var(--section-lg) 0;
}

.info-practica-sections__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 40px;
}

@media (max-width: 991px) {
    .info-practica-sections__grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: var(--section-md);
        gap: .75rem;
    }
}

@media (max-width: 575px) {
    .info-practica-sections__grid {
        grid-template-columns: 1fr;
    }
}

.c-form--search{
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 80%;
}

.c-form__input--search{
    flex: 1;
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--text-300);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--text-700);
}
.c-form__button--search{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    background-color: var(--accent-500);
    color: var(--black);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 500;
    transition: background-color var(--transition-base), color var(--transition-base);
}


/* =========================================
   10. C-FAQS
   ========================================= */

.c-faqs {
    padding: var(--section-lg) 0;
}

/* ── Nav de tabs ───────────────────────────── */
.c-faqs__tabs {
    border-radius: 0;
    border: 0px solid transparent;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
}

.c-faqs__tab-item {
    border-radius: 0;
    border: 0px solid transparent;
    padding: 0;
}

.c-faqs__tab-btn {
    border-radius: 8px;
    border: 1px solid var(--text-100) !important;
    padding: 12px 16px;
    background-color: transparent;
    color: var(--text-600);
    transition: var(--transition-base);
}

.c-faqs__tab-btn:hover,
.c-faqs__tab-btn.active {
    border: 1px solid var(--accent-500) !important;
    background-color: var(--accent-500) !important;
    color: var(--text-900);
}

/* ── Contingut dels panels ─────────────────────── */
.c-faqs__panels {
    padding: var(--section-sm) 0;
}

.c-faqs__panel {
}

.c-faqs__panel-title {
}

/* ── Accordion ─────────────────────────────────── */
.c-faqs__item {
    background-color: transparent;
    border: none;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--text-100);
    padding: 24px 0;
}

.c-faqs__item-header {
    background-color: transparent;
    border-radius: 0;
}

.c-faqs__item-btn {
    border-radius: 0;
    font-family: var(--font-family-base);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-900);
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.c-faqs__item-btn::after {
    content: '';
    display: none;
}

.c-faqs__item-btn .c-faqs__item-icon {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--text-500);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color var(--transition-base);
    transform: rotate(0deg);
}

.c-faqs__item-btn:not(.collapsed) .c-faqs__item-icon {
    transform: rotate(-180deg);
    color: var(--text-700);
}

.c-faqs__item-btn:not(.collapsed) {
    color: var(--text-900);
    background-color: transparent;
    box-shadow: none;
}

.c-faqs__collapse {
    background-color: transparent;
}

.c-faqs__body {
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--text-700);
    line-height: var(--lh-md);
    padding: 8px 0 20px 0;
    margin: 0;
}

.c-faqs__link {
    display: inline-block;
    margin-top: 12px;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--secondary-500);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-base);
}

.c-faqs__link:hover {
    color: var(--primary-500);
}


/* =========================================
   11. PLANIFICA EL TEU VIATGE
   ========================================= */

.planifica-viatge {
    padding: var(--section-lg) 0;
    background-color: var(--white);
}

.planifica-viatge__header {
    text-align: center;
    margin-bottom: 48px;
}

.planifica-viatge__title {
    color: var(--secondary-500);
    margin-bottom: 16px;
}

.planifica-viatge__subtitle {
    color: var(--text-600);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: 1.6;
}

.planifica-viatge__subtitle strong {
    color: var(--text-800);
    font-weight: 700;
}

.planifica-viatge__grid {
    --bs-gutter-y: 24px;
}

.planifica-viatge__col {
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {
    .planifica-viatge__grid {
        --bs-gutter-y: 16px;
    }
}

@media (max-width: 575px) {
    .planifica-viatge__header {
        margin-bottom: 32px;
    }
}


/* =========================================
   12. BANNER HELP
   ========================================= */

.banner-help {
    padding: var(--section-lg) 0 0 0;
}

.banner-help__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.banner-help__title {
    color: var(--secondary-500);
}

.banner-help__text {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
    margin-bottom: 8px;
}


/* =========================================
   13. MAP DOWNLOAD
   ========================================= */

.maps-download {
    padding: var(--section-lg) 0;
    background-color: var(--accent-500);
}

.maps-download__item {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.maps-download__item-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.maps-download__item-title {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: 64px;
    margin-bottom: 0px;
}

.maps-download__item-text {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
}

.maps-download__item-img {
    width: 100%;
    height: auto;
    margin-top: auto;
    margin-bottom: 0;
}

.maps-download__item-link {
    margin-top: auto;
    margin-bottom: 0;
}

.maps-download__item-link .c-button__label {
    background-color: var(--primary-500);
    color: var(--white);
}

.maps-download__item-link .c-button__label-corner svg path {
    fill: var(--primary-500);
}

.maps-download__item-link .c-button__icon {
    background-color: var(--white);
    color: var(--primary-500);
}

.maps-download__item-link .c-button__label-corner-icon svg path {
    fill: var(--white);
}

.maps-download__item-link:hover .c-button__label {
    background-color: var(--white);
    color: var(--primary-500);
}

.maps-download__item-link:hover .c-button__label-corner svg path {
    fill: var(--white);
}

.maps-download__item-link:hover .c-button__icon {
    background-color: var(--primary-500);
    color: var(--white);
}

.maps-download__item-link:hover .c-button__label-corner-icon svg path {
    fill: var(--primary-500);
}


/* =========================================
   14. TABS DOWNLOAD
   ========================================= */

.tabs-download {
    padding: var(--section-lg) 0;
}

/* ── Nav de tabs ───────────────────────────────── */
.tabs-download__tabs {
    border: 0;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: var(--section-sm);
}

.tabs-download__tab-item {
    padding: 0;
}

.tabs-download__tab-btn {
    border-radius: 8px;
    border: 1px solid var(--text-100) !important;
    padding: 12px 16px;
    background-color: transparent;
    color: var(--text-600);
    transition: var(--transition-base);
}

.tabs-download__tab-btn:hover,
.tabs-download__tab-btn.active {
    border-color: var(--accent-500) !important;
    background-color: var(--accent-500) !important;
    color: var(--white);
}

/* ── Panels ───────────────────────────────────────── */
.tabs-download__panels {
}

.tabs-download__panel {
}

/* ── Grid de cards ────────────────────────────────── */
.tabs-download__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 991px) {
    .tabs-download__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .tabs-download__grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   15. SERVICES LIST
   ========================================= */

.services-list {
    padding: var(--section-lg) 0;
}

/* ── Grid 3 columnes ─────────────────────────────── */
.services-list__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: var(--section-sm) 0 var(--section-md) 0;

}

.services-list__link{
    margin-top: 24px;
    display: flex;
}

/* ── Card ─────────────────────────────────────── */
.services-list__card {
    background-color: var(--text-50);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.services-list__card-body{
    margin-bottom: 72px;
}
.services-list__card-title {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0;
}

.services-list__card-text {
    color: var(--text-600);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin-bottom: 4px;
}

/* ── Row d'icones ──────────────────────────────── */
.services-list__card-icons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: auto;
}

.services-list__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--accent-500);
    color: var(--text-800);
    font-size: var(--fs-md);
    text-decoration: none;
    transition:
        background-color var(--transition-base),
        color var(--transition-base);
}

.services-list__card-icon:hover {
    background-color: var(--primary-500);
    color: var(--white);
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 991px) {
    .services-list__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .services-list__grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   16. AGENDA ROW
   ========================================= */

.agenda-row {
    padding: var(--section-lg) 0;
}

.agenda-row__ancors {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: var(--section-lg);
}

.agenda-row__ancor {
    color: var(--text-900);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    padding: 12px 16px;
    background-color: var(--white);
    border: 1px solid var(--text-100);
    border-radius: 8px;
    text-decoration: none;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.agenda-row__ancor:hover {
    background-color: var(--accent-500);
    color: var(--text-900);
}

/* ── Bloc per mes ─────────────────────────────────── */
.agenda-row__month {
    margin-bottom: var(--section-lg);
    scroll-margin-top: 32px;
}

.agenda-row__month-title {
    color: var(--text-400);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--section-sm);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--text-100);
}

/* ── Grid d'events ──────────────────────────────── */
.agenda-row__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* ── Card d'event ──────────────────────────────── */
.agenda-row__card {
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    /* overflow: hidden; */
    border-radius: 16px;
}
.agenda-row__card:before{
    z-index: 0;
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--text-50);
    border-radius: 16px;
    transition: var(--transition-base);
    clip-path: polygon(100% 0, 100% calc(100% - 88px), calc(100% - 88px) calc(100% - 88px), calc(100% - 88px) 100%, 0 100%, 0 0);
}
.agenda-row__card:hover:before{
    background-color: var(--bg-secondary);
}

.agenda-row__clipath{
    width: 88px;
    height: 88px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    transition: var(--transition-base);
}

.agenda-row__clipath svg{
    fill:var(--text-50);
    transition: var(--transition-base);
}
.agenda-row__card:hover .agenda-row__clipath svg{
    fill: var(--bg-secondary);
}


.agenda-row__card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.agenda-row__card-tag {
    display: inline-block;
    width: fit-content;
    background-color: var(--accent-500);
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 4px;
}

.agenda-row__card-title {
    color: var(--secondary-500);
    font-family: var(--font-family-heading);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: var(--lh-2xl);
    margin-bottom: 0;
}

.agenda-row__card-title span {
    display: inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: background-size var(--transition-base);
}

.agenda-row__card:hover .agenda-row__card-title span {
    background-size: 100% 2px;
}

.agenda-row__card-text {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin-bottom: 0;
}

.agenda-row__card-link {
    color: var(--secondary-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-base);
}

.agenda-row__card-link:hover {
    color: var(--primary-500);
}

/* ── Footer de la card: data + botó ───────────────── */
.agenda-row__card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}


.agenda-row__card-date {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.agenda-row__card-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.agenda-row__card-date-num {
    color: var(--primary-500);
    font-family: var(--font-family-heading);
    font-size: 72px;
    font-weight: 800;
    line-height: var(--lh-4xl);
}

.agenda-row__card-date-sep {
    color: var(--primary-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-xl);
    line-height: var(--lh-3xl);
    font-weight: 400;
}

.agenda-row__card-date-month {
    color: var(--primary-500);
    font-family: var(--font-family-heading);
    font-size: var(--fs-3xl);
    line-height: var(--lh-xl);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agenda-row__card-btn{
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(40px*1.5);
    height: calc(36px*1.5);
}
.agenda-row__card-btn i{
    font-size: var(--fs-xl);
    color: var(--white);
    position: relative;
    z-index: 1;
    transition: var(--transition-base);
}
.agenda-row__card-btn svg{
    position: absolute;
    bottom: 0;
    right: 0;
    height: calc(36px*1.5);
    width: auto;
    fill:var(--secondary-500);
    transition: var(--transition-base);
}

.agenda-row__card:hover .agenda-row__card-btn svg{
    fill: var(--accent-500);
}
.agenda-row__card:hover i{
    color: var(--black);
}

/* =========================================
   17. NORMATIVA INFO
   ========================================= */

.normativa-info {
    padding: var(--section-lg) 0;
}

.normativa-info__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.normativa-info__title {
    /* Extèn c-heading-2 */
}

.normativa-info__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.normativa-info__text {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin-bottom: 0;
}

.normativa-info__link {
    /* Extèn link-type */
}


/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 991px) {
    .agenda-row__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .agenda-row__card-date-num {
        font-size: 56px;
    }
}

@media (max-width: 767px) {
    .agenda-row__grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================
   18. LEGALES SECTION
   ========================================= */
.head-legales{
    padding-top:200px;
}
.legales-section {
    padding: var(--section-lg) 0;
    background-color: var(--white);
}

.legales-section__article {
    margin-bottom: var(--section-md);
}

.legales-section__article:last-child {
    margin-bottom: 0;
}

.legales-section__title {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: var(--lh-2xl);
    margin-bottom: 32px;
}

.legales-section__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legales-section__subtitle {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: var(--lh-1xl);
    margin-top:16px;
    margin-bottom: 0px;
}

.legales-section__text {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin-bottom: 0;
}

.legales-section__text strong {
    color: var(--text-800);
    font-weight: 600;
}

.legales-section__link {
    color: var(--secondary-500);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.legales-section__link:hover {
    color: var(--primary-500);
    text-decoration: underline;
}

.legales-section__list {
    margin: 16px 0;
    padding-left: 24px;
    list-style: disc;
}

.legales-section__list-item {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin-bottom: 12px;
}

.legales-section__list-item:last-child {
    margin-bottom: 0;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 991px) {
    .legales-section {
        padding: var(--section-md) 0;
    }
    
    .legales-section__title {
        font-size: var(--fs-4xl);
    }
    
    .legales-section__subtitle {
        font-size: var(--fs-2xl);
    }
}

@media (max-width: 575px) {
    .legales-section__title {
        font-size: var(--fs-3xl);
    }
    
    .legales-section__subtitle {
        font-size: var(--fs-xl);
    }
    
    .legales-section__text,
    .legales-section__list-item {
        font-size: var(--fs-base);
    }
}


/* =========================================
   19. TABS TRANSPARÈNCIA
   ========================================= */

.tabs-transparencia {
    padding: var(--section-lg) 0;
}

/* ── Nav vertical ─────────────────────────────────── */
.tabs-transparencia__tabs {
    gap: 4px;
    border: 0;
    position: sticky;
    top: 32px;
}

.tabs-transparencia__tab-item {
    padding: 0;
}

.tabs-transparencia__tab-btn {
    width: 100%;
    text-align: left;
    border-radius: 0px;
    border-bottom: 1px solid var(--text-100) !important;
    padding: 12px 0;
    background-color: transparent;
    color: var(--text-600);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    transition: var(--transition-base);
}

.tabs-transparencia__tab-btn:hover,
.tabs-transparencia__tab-btn.active {
    border-color: var(--secondary-500) !important;
    color: var(--secondary-500);
}

/* ── Panels ─────────────────────────────────────── */
.tabs-transparencia__panels {
}

.tabs-transparencia__panel {
    padding-left: var(--section-sm);
}

.tabs-transparencia__panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Capçalera del panel (foto + nom/rol) ────────── */
.tabs-transparencia__panel-head {
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: 32px;
    padding-bottom: 32px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--text-100);
}

.tabs-transparencia__panel-head-img {
    border-radius: 16px;
    overflow: hidden;
}

.tabs-transparencia__panel-head-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tabs-transparencia__panel-head-name {
    color: var(--text-900);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-style: normal;
    font-weight: 600;
    line-height: var(--lh-2xl);
}

.tabs-transparencia__panel-head-role {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    margin: 0;
    line-height: normal;
}
.tabs-transparencia__panel-body h3,
.tabs-transparencia__panel-title {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: var(--lh-2xl);
    margin-bottom: 0;
    margin-top: 24px;
}
.tabs-transparencia__panel-body h3:first-of-type,
.tabs-transparencia__panel-title:first-of-type{
    margin-top: 0px;
}
.tabs-transparencia__panel-body ul{
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: number;
}
.tabs-transparencia__panel-body ul li,
.tabs-transparencia__panel-body p,
.tabs-transparencia__panel-text {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin-bottom: 0;
}

.tabs-transparencia__panel-link {
    /* Extèn link-type */
}

/* ── Llistes ──────────────────────────────────────── */
.tabs-transparencia__panel-list {
    margin: 8px 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: disc;
}

.tabs-transparencia__panel-list-item {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
}

.tabs-transparencia__panel-sublist {
    margin-top: 8px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: circle;
}

.tabs-transparencia__panel-sublist-item {
    color: var(--text-600);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: var(--lh-lg);
}

/* ── Reconeixements per any ──────────────────────── */
.tabs-transparencia__panel-timeline {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 8px;
}

.tabs-transparencia__panel-year {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tabs-transparencia__panel-year-label {
    color: var(--primary-500);
    font-family: var(--font-family-heading);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: var(--lh-lg);
}

.tabs-transparencia__panel-year-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tabs-transparencia__panel-year-img {
    display: inline-block;
    margin-top: 4px;
}

.tabs-transparencia__panel-year-img img {
    max-width: 120px;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 991px) {
    .tabs-transparencia__tabs {
        flex-direction: row !important;
        flex-wrap: wrap;
        position: static;
        gap: 8px;
        margin-bottom: var(--section-sm);
    }

    /* A partir de tablet: estil botó (com c-faqs__tab-btn / tabs-download__tab-btn) */
    .tabs-transparencia__tab-btn {
        width: auto;
        border-radius: 8px;
        border: 1px solid var(--text-100) !important;
        padding: 12px 16px;
        background-color: transparent;
        color: var(--text-600);
        font-size: var(--fs-md);
    }

    .tabs-transparencia__tab-btn:hover,
    .tabs-transparencia__tab-btn.active {
        border-color: var(--accent-500) !important;
        background-color: var(--accent-500) !important;
        color: var(--text-900);
    }

    .tabs-transparencia__panel {
        padding-left: 0;
        padding-top: var(--section-sm);
    }
}
.transparencia .normativa-info__content{
    margin-bottom: var(--section-md);
}
.transparencia .normativa-info__content:last-of-type{
    margin-bottom: 0;
}


/* =========================================
   20. GRID FOTOS DOWNLOAD
   ========================================= */

.grid-fotos-download {
    padding: var(--section-lg) 0;
}

/* ── Grid 2 columnes / 3 files ──────────────────────────── */
/* Layout asimètric:
   col1 fila1-2: imatge alta esquerra
   col2 fila1:   imatge baixa dreta-superior
   col1 fila3:   imatge baixa esquerra-inferior
   col2 fila2-3: imatge alta dreta                          */
.grid-fotos-download__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 28vh);
    gap: 32px;
}

.grid-fotos-download__item {
    overflow: hidden;
}

.grid-fotos-download__item:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
}

.grid-fotos-download__item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.grid-fotos-download__item:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
}

.grid-fotos-download__item:nth-child(4) {
    grid-column: 2;
    grid-row: 2 / 4;
}

/* ── Imatge ─────────────────────────────────────────────── */
.grid-fotos-download__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}

.grid-fotos-download__item:hover .grid-fotos-download__img {
    transform: scale(1.04);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .grid-fotos-download__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 0.75rem;
    }

    .grid-fotos-download__item:nth-child(1),
    .grid-fotos-download__item:nth-child(2),
    .grid-fotos-download__item:nth-child(3),
    .grid-fotos-download__item:nth-child(4) {
        grid-column: 1;
        grid-row: auto;
    }

    .grid-fotos-download__img {
        height: 25vh;
    }
}

/* =========================================
   21. ESTUDI SECTION
   ========================================= */

/* Layout: text (col-md-7) + imatge portada (col-md-5)
   Reutilitza: c-heading-2, normativa-info__text, link-type, c-button  */

.estudi-section {
    padding: var(--section-lg) 0;
    background-color: var(--accent-500);
}

.estudi-section__col-main {
}

.estudi-section__col-aside {
}

.estudi-section__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.estudi-section__title {
    /* Extén c-heading-2 */
    color: var(--text-900);
}

.estudi-section__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.estudi-section__text {
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin-bottom: 0;
}

.estudi-section__btn {
    margin-top: 8px;
}

.estudi-section__link {
    /* Extén link-type */
    color: var(--secondary-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.estudi-section__img-wrap {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.estudi-section__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .estudi-section__col-aside {
        margin-top: 32px;
    }

    .estudi-section__img-wrap {
        max-height: 340px;
    }
}

/* línia separadora sobre fons --bg-accent */
.estudi-section.full-left::before {
    background-color: var(--text-200);
}

/* Fondo blanco solo para el icono del botón primario en la sección estudi */
.estudi-section .c-button--primary .c-button__icon {
    background-color: var(--white);
    color: var(--primary-500);
}
.estudi-section .c-button--primary{
    margin-bottom: var(--section-md);
}

.estudi-section .c-button--primary:hover .c-button__icon {
    background-color: var(--primary-500);
    color: var(--white);
}

/* Fondo blanco también para el after del icono en el botón primario de estudi-section */
.estudi-section .c-button__label-corner-icon svg path{
    fill: var(--white);
}

/* Fondo blanco para el label y el SVG del botón primario solo en estudi-section */
.estudi-section .c-button--primary:hover .c-button__label{
    background-color: var(--white);
}
.estudi-section .c-button--primary:hover .c-button__label svg path{
    fill: var(--white);
}





.informes-section{
    padding: var(--section-lg) 0;
}

.informes-section__accordion-item{
    padding: 0!important;
}


.informes-section__accordion-body,
.informes-section__accordion-item,
.informes-section__accordion-header{
    border: 0!important;
    padding: 0;
}
.informes-section__accordion-item:first-of-type{
    padding:0 0 36px 0!important;
}
.informes-section__accordion-item{
    padding: 36px 0!important;
    border-bottom: 1px solid var(--text-100)!important;
}
.informes-section__accordion-btn{
    border: 0!important;
    padding: 0;
    background-color: transparent!important;
    color: var(--text-900)!important;
    font-family: var(--font-family-heading);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: var(--lh-2xl);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    box-shadow: none!important;
}
.informes-section__accordion-btn span{
    max-width: 70%;
}

.informes-section__accordion-body{
    padding-top: 24px;
    max-width: 70%;
}
.informes-section__text{
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-md); /* 140% */
}
.informes-section__title{
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-xl);
    margin-bottom: 12px;
}
.informes-section__text + .informes-section__title,
.informes-section__links-list + .informes-section__title,
.informes-section__list + .informes-section__title {
    margin-top: 40px;
}


.informes-section__links-list{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.informes-section__list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: disc;
}

/* Oculta el caret por defecto de Bootstrap */
.accordion-button::after {
    display: none !important;
}

/* Estilo para el icono personalizado del collapse */
.accordion-button .ti-select {
    margin-left: 0.5em;
    font-size: var(--fs-2xl);
    transition: transform 0.2s;
    vertical-align: middle;
    display: inline-block;
}

/* Rota el icono cuando el collapse está abierto */
.accordion-button:not(.collapsed) .ti-select {
    transform: rotate(180deg);
}






/* =========================================
   22. ACTUALITAT LIST CARD
   ========================================= */
.actualitat-list {
    padding: var(--section-lg) 0;
}
.actualitat-list__content{
    display: flex;
    flex-direction: column;
    gap: 24px;  
}
.actualitat-card {
    display: flex;
    flex-direction: row;
    border-radius: 16px;
    overflow: hidden;
}
.actualitat-card__img-wrap {
    width: 48%;
}
.actualitat-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.actualitat-card__body {
    display: flex;
    flex-direction: column;
    width: 52%;
    padding:32px;
    background-color: var(--text-50);

}
.actualitat-card__tag {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: fit-content;
    border-radius: 4px;
    background-color: var(--accent-500);
    margin-bottom: 8px;

    color: var(--black);
    font-family: var(--font-family-base);
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.actualitat-card__title {
    color: var(--secondary-500);
    font-family: var(--font-family-heading);
    font-size: var(--fs-3xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-2xl);
}
.actualitat-card__desc {
    color: var(--neutrals-text-color-700, #485057);
    font-family: Helvetica;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 140% */
}
.actualitat-card__link {
    margin-top: auto;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .actualitat-card {
        display: flex;
        flex-direction: column;
    }
    .actualitat-card__img-wrap {
        width: 100%;
        height: 200px;
    }
    .actualitat-card__body {
        width: 100%;
        padding: 24px;
    }
}
.pagination-list {
    margin-top: var(--section-sm);
}
.pagination-list__items {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding: 0;
}
.pagination-list__item {
    border-radius: 4px;
    background-color: var(--text-50); 
    color: var(--text-900);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: normal;   
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}
@media(max-width:991px){
    .pagination-list__item{
        min-width: 32px;
        height: 32px;
        font-size: var(--fs-sm);
    }
}
.pagination-list__item.active {
    background-color: var(--accent-500);
}

.pagination-list__item.disabled {
    opacity: .5;
    pointer-events: none;

}
.pagination-list__item--ellipsis {
    background-color: transparent;
    color: var(--text-600);
    pointer-events: none;   
}
.pagination-list__link {}

.pagination-list__link--prev {}
.pagination-list__link--next {}
.pagination-list__ellipsis {}



/* =========================================
   23. GALLERY SECTION
   ========================================= */

.gallery-section {
    margin-top: 48px;
    margin-bottom: 48px;
}
.gallery-section__title {
    color: var(--accent-900, #1a7c3a);
    font-family: var(--font-family-heading);
    font-size: var(--fs-3xl, 2rem);
    font-weight: 700;
    margin-bottom: 20px;
}
.gallery-section__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
    max-width: 100%;
}
.gallery-section__item {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: #f7f7f7;
}
.gallery-section__item--main {
    grid-row: 1 / span 2;
    grid-column: 1 / 2;
}
.gallery-section__item--side {
    aspect-ratio: 2/1;
    height: 100%;
}
.gallery-section__item--side:nth-child(2) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    height: 100%;
}
.gallery-section__item--side.gallery-section__item--with-count {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

/* Variante con 1 imagen grande + 4 pequeñas */
.gallery-section__title--variant {
    font-size: var(--fs-6xl);
    line-height: var(--lh-5xl);
    color: var(--black);
    margin-bottom: var(--section-sm);
}
.gallery-section__title--variant strong{
    color: var(--secondary-500);
    font-weight: 700;
}

.gallery-section__grid--variant {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    min-height: 500px;
}

.gallery-section__grid--variant .gallery-section__item {
    height: 100%;
    width: 100%;
}

.gallery-section__grid--variant .gallery-section__item--main {
    grid-row: 1 / span 2;
    grid-column: 1 / 2;
    aspect-ratio: unset;
}

.gallery-section__grid--variant .gallery-section__item--side:nth-child(2) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

.gallery-section__grid--variant .gallery-section__item--side:nth-child(3) {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}

.gallery-section__grid--variant .gallery-section__item--side:nth-child(4) {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

.gallery-section__grid--variant .gallery-section__item--side:nth-child(5) {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
}

.gallery-section__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
.gallery-section__count {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(34, 34, 34, 0.8);
    color: #fff;
    font-size: var(--fs-md);
    padding: 6px 18px;
    border-radius: 4px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gallery-section__tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 8px;
    border-top: 1px solid var(--text-200);
    padding-top: 32px;
    margin-top: 32px;
    width: 100%;
}
.gallery-section__tag {
    background: #ededed;
    color: #222;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: var(--fs-sm);
    font-family: var(--font-family-base);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.gallery-section__tag:hover,
.gallery-section__tag:focus {
    background: var(--accent-500, #b6c92b);
    color: #fff;
}

@media (max-width: 991px) {
    .gallery-section__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .gallery-section__item--main {
        grid-row: auto;
        grid-column: auto;
        aspect-ratio: 1.5/1;
    }
    .gallery-section__item--side,
    .gallery-section__item--side.gallery-section__item--with-count {
        aspect-ratio: 2/1;
    }
    
    /* Variante responsive */
    .gallery-section__grid--variant {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    
    .gallery-section__grid--variant .gallery-section__item--main {
        grid-row: 1 / span 2;
        grid-column: 1 / 2;
    }
    
    .gallery-section__grid--variant .gallery-section__item--side:nth-child(2) {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
    }
    
    .gallery-section__grid--variant .gallery-section__item--side:nth-child(3) {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
    }
    
    .gallery-section__grid--variant .gallery-section__item--side:nth-child(4),
    .gallery-section__grid--variant .gallery-section__item--side:nth-child(5) {
        grid-row: auto;
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .gallery-section {
        margin-top: 32px;
        margin-bottom: 32px;
    }
    .gallery-section__title {
        font-size: 1.25rem;
        margin-bottom: 20px;
    }
    .gallery-section__grid {
        gap: 12px;
    }
    .gallery-section__tags {
        flex-wrap: wrap;
        gap: 6px;
    }
    .gallery-section__tag {
        font-size: 0.95rem;
        padding: 5px 12px;
    }
    
    /* Variante en móvil */
    .gallery-section__grid--variant {
        grid-template-columns: 1fr;
    }
    
    .gallery-section__grid--variant .gallery-section__item--main,
    .gallery-section__grid--variant .gallery-section__item--side {
        grid-row: auto;
        grid-column: auto;
    }
}


/* Gallery Modal */
.gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.gallery-modal.active {
    display: flex;
}

.gallery-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 1;
}

.gallery-modal__content {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1200px;
    height: 80vh;
}

.gallery-modal__close {
    position: absolute;
    top: -50px;
    right: 0;
    background: var(--white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.gallery-modal__close:hover {
    background: var(--accent-500);
    transform: rotate(90deg);
}

.gallery-modal__close i {
    font-size: 24px;
    color: var(--text-900);
}

.gallery-modal__close:hover i {
    color: var(--white);
}

.gallery-modal__swiper {
    width: 100%;
    height: 100%;
}

.gallery-modal__swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-modal__swiper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.gallery-modal__swiper .swiper-button-prev,
.gallery-modal__swiper .swiper-button-next {
    color: var(--white);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    backdrop-filter: blur(10px);
}

.gallery-modal__swiper .swiper-button-prev:hover,
.gallery-modal__swiper .swiper-button-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gallery-modal__swiper .swiper-button-prev::after,
.gallery-modal__swiper .swiper-button-next::after {
    font-size: 20px;
    font-weight: bold;
}

.gallery-modal__swiper .swiper-pagination {
    bottom: 20px;
}

.gallery-modal__swiper .swiper-pagination-bullet {
    background: var(--white);
    opacity: 0.5;
    width: 10px;
    height: 10px;
}

.gallery-modal__swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--accent-500);
}

.gallery-section__item {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-section__item:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .gallery-modal__content {
        width: 95%;
        height: 70vh;
    }
    
    .gallery-modal__close {
        top: -45px;
        width: 35px;
        height: 35px;
    }
    
    .gallery-modal__swiper .swiper-button-prev,
    .gallery-modal__swiper .swiper-button-next {
        width: 40px;
        height: 40px;
    }
    
    .gallery-modal__swiper .swiper-button-prev::after,
    .gallery-modal__swiper .swiper-button-next::after {
        font-size: 16px;
    }
}


/* =========================================
   24. FICHA AGENDA
    ========================================= */

.ficha-agenda {
    padding: var(--section-md) 0;
    
}
.ficha-agenda__date {
    display: flex;
    flex-direction: row;
    gap: 8px;
    position: relative;
    margin-bottom: 32px;
    padding-bottom: 32px;
}
.ficha-agenda__date::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 86px;
    height: 4px;
    background-color: var(--bg-secondary);
    z-index: 1;
}
.ficha-agenda__date-item {
    color: var(--color-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
    margin:0;
}
.ficha-agenda__content {
    display: flex;
    flex-direction: column;
    gap: 24px;  
}

.ficha-agenda__content p strong{
    color: var(--text-700);
    font-family: var(--font-family-heading);
    font-size: var(--fs-xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-xl);
}
.ficha-agenda__content p{
    color: var(--color-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
    margin:0;
}
.ficha-agenda__caption {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 0;
}

.ficha-agenda__caption  small{
     color: var(--color-600);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-md);
}
.ficha-agenda__content blockquote{
    display: flex;
    flex-direction: column;
    margin: var(--section-md) 0;
    padding: 32px;
    border-left: 12px solid #787B8510;
}
.ficha-agenda__content  blockquote p{
    color: var(--black-80);
    font-family: var(--font-family-base);
    font-size: var(--fs-3xl);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-3xl); /* 120% */
}


/* =========================================
   25. CONTACT FORM
    ========================================= */

.form-cnt {
    padding: var(--section-sm) 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.contact-form__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-form__label {
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.contact-form__label--checkbox {}
.contact-form__input {
    border-radius: 8px;
    border: 1px solid var(--text-300);
    background: var(--white);
    padding:8px 12px ;
    color: var(--neutrals-text-color-600, #5D666F);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
}
.contact-form__checkbox {}
.contact-form__link {
    color: var(--secondary-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-underline-offset: auto;    

}
.contact-form__group--checkbox {
    display: flex;
    flex-direction: row;
    gap: 12px;

}
.contact-form__submit {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-500);
    border-radius: 8px;
    border: none;
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 600;
    line-height: var(--lh-lg);
    padding: 12px 24px;
    width: fit-content;
    transition: background-color 0.2s;
}

.contact-form__submit:hover {
    background-color: var(--secondary-500);
    color: var(--white);
}

.map-cnt{
    padding: var(--section-lg) 0;
}
.map-cnt__title{
    margin-bottom: 20px;
}
.map-cnt__text{
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.map-cnt__content{
    display: flex;
    flex-direction: column;
    gap: 32px;  
    width: 100%;
    margin-top: var(--section-md);
}

.contacta-ok-summary{
    padding: var(--section-lg) 0;
    
}

.contacta-ok-summary__list{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
}
.contacta-ok-summary__item{
     display: flex;
    flex-direction: column;
    gap: 4px;
}
.contacta-ok-summary__label{
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.contacta-ok-summary__value{
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}




/* =========================================
   26. CONTENT SEARCH (RESULTADOS BUSQUEDA)
    ========================================= */

.content-search{
    padding: var(--section-md) 0;
}
.content-search__title {}
.content-search__count {}
.content-search__list {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.content-search__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--text-100);
}
.content-search__item-link {
    color: var(--secondary-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
}
.content-search__item-title {
    color: var(--black);
    font-family: var(--font-family-heading);
    font-size: var(--fs-3xl);
    font-style: normal;
    font-weight: 600;
    line-height: var(--lh-lg);
    margin-bottom: 4px;
}
.content-search__item-desc {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
}

/* =========================================
   27. BLOG LIST
    ========================================= */

.blog-list{
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: var(--section-lg);
    padding: 32px 32px var(--section-lg) 32px;
}

.blog-list__card {
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--black);
    width: calc(100vw - 64px);
    height: calc(100vh - 64px);
    margin: 0 auto;
    
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media(max-width:991px){
    .blog-list{
        padding: 16px 16px var(--section-lg) 16px;
        gap: 16px;
    }
    .blog-list__card {
        width: calc(100vw - 32px);
        height: 60vh;
    }
}
.blog-list__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    z-index: 0;
}
.blog-list__card-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media(max-width:991px){
    .blog-list__card-image{
        justify-content: end;
    }
}


.blog-list__card-badge{
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 4px 12px;
    border-radius: 8px;
    background: rgba(28, 80, 70, 0.60);
    color: var(--white);

}
.blog-list__card-title{
    color: var(--white);
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: var(--fs-5xl);
    font-style: normal;
    font-weight: 800;
    line-height: var(--lh-4xl);
    z-index: 1;
    margin-bottom: 56px;
    margin-top: 8px;
    max-width: 85%;
}

.blog-list__banner-personalitza{
    background-color: var(--primary-500);
    padding: var(--section-2xl) 32px;
    background-image: url(/templates/viesverdes/img/background-banner.jpg);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.blog-list__banner-personalitza::after{
    content: "";
    position: absolute;
    top: var(--section-md);
    left: 0;
    width: 40vw;
    height: 2px;
    background-color: var(--text-200);
    z-index: 0;
}
.blog-list__banner-personalitza-title{
    color: var(--white);
    font-family: var(--font-family-heading);
    font-size: var(--fs-5xl);
    font-style: normal;
    font-weight: 400!important;
    line-height: var(--lh-4xl);
}
.blog-list__banner-personalitza-title strong{
    color: var(--secondary-500);
}
.blog-list__banner-personalitza .c-button {
    margin-top: 32px;
}

.blog-list__banner-personalitza .c-button__label {
    background-color: var(--white);
    color: var(--black);
}
.blog-list__banner-personalitza .c-button__label svg path{
    fill: var(--white);
}
.blog-list__banner-personalitza .c-button:hover .c-button__label {
    background-color: var(--accent-500);
    color: var(--black);
}
.blog-list__banner-personalitza .c-button:hover .c-button__label svg path{
    fill: var(--accent-500);
}

.blog-list__banner-personalitza .c-button__icon {
    background-color: var(--secondary-500);
    color: var(--white);
}
.blog-list__banner-personalitza .c-button__icon svg path{
    fill: var(--secondary-500);
}
.blog-list__banner-personalitza .c-button:hover .c-button__icon {
    background-color: var(--white);
    color: var(--black);
}
.blog-list__banner-personalitza .c-button:hover .c-button__icon svg path{
    fill: var(--white);
}

.blog-list__banner-text{
   color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
}
@media (max-width: 991px) {
    .blog-list__banner-text{
        margin-top: 20px;
    }
}
.blog-list__banner-link {
    color: var(--accent-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
   
}
.blog-list__banner-link span{
     text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-underline-offset: auto;    
}




/* =========================================
   28. CONNECTA (SOCIAL & NEWSLETTER)
    ========================================= */


.connecta {
    padding: var(--section-lg) 0 0 0;
}
.connecta__col-img {}
.connecta__title {    
    color: var(--secondary-500);
}
.connecta__subtitle {
}
.connecta__desc {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
}
.connecta__social-list {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin: 24px 0;
    padding: 0

}
.connecta__social-item {
    border-radius:1000px;
    background-color: var(--accent-500);
    min-width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
        transition: var(--transition-base);

}
.connecta__social-link {
    color: var(--black);
    font-size: var(--fs-xl);
    transition: var(--transition-base);

}
.connecta__social-item:hover {
    background-color: var(--secondary-500)
}

.connecta__social-item img{
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* =========================================
   29. FICHA BLOG
    ========================================= */
.noticias{
    padding-top:32px;
}
.ficha-blog {
    padding: var(--section-md) 0;
    
}
.ficha-blog__date {
    display: flex;
    flex-direction: row;
    gap: 8px;
    position: relative;
    margin-bottom: 32px;
    padding-bottom: 32px;
}
.ficha-blog__date::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 86px;
    height: 4px;
    background-color: var(--bg-secondary);
    z-index: 1;
}
.ficha-blog__date-item {
    color: var(--color-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
    margin:0;
}
.ficha-blog__content {
    display: flex;
    flex-direction: column;
    gap: 24px;  
}

.ficha-blog__content p strong{
    color: var(--text-700);
    font-family: var(--font-family-heading);
    font-size: var(--fs-xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-xl);
}
.ficha-blog__content p{
    color: var(--color-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
    margin:0;
}
.ficha-blog__caption {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 0;
}

.ficha-blog__caption  small{
     color: var(--color-600);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-md);
}
.ficha-blog__content blockquote{
    display: flex;
    flex-direction: column;
    margin: var(--section-md) 0;
    padding: 32px;
    border-left: 12px solid #787B8510;
}
.ficha-blog__content  blockquote p{
    color: var(--black-80);
    font-family: var(--font-family-base);
    font-size: var(--fs-3xl);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-3xl); /* 120% */
}

/* === Autor ficha-blog === */
.ficha-blog__author {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.ficha-blog__author-img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
}
.ficha-blog__author-info {
  display: flex;
  flex-direction: column;
}
.ficha-blog__author-name {
  color: var(--black-90);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 500;
    line-height: var(--lh-lg);
}
.ficha-blog__author-role {
  font-size: 0.95rem;
  color: var(--text-500, #666);
}


/* =========================================
   30. RUTAS ASOCIADAS
    ========================================= */

.rutas-asociadas {
    padding: var(--section-md) 0 var(--section-md) var(--section-md);
    background-image: url(/templates/viesverdes/img/bg-rutes-asociades.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.rutas-asociadas__grid{
    padding: var(--section-md);
}
.rutas-asociadas__title {
    color: var(--black);
    font-family: var(--font-family-heading);
    font-size: var(--fs-6xl);
    font-weight: 700;
    line-height: var(--lh-5xl);
    letter-spacing: -2.88px;
    margin-bottom: 20px;
}
.rutas-asociadas__title strong{
    color: var(--secondary-500);
    font-weight: 700;   
}
.rutas-asociadas__text{
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
    max-width: 600px;
}
.rutas-asociadas__carousel{
    margin: 32px;
}

/* Grid para variante sin slider */
.rutas-asociadas__grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 32px;
    margin: 32px;
}

.rutas-card__item {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.rutas-card{
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 16px;
    background: rgba(30, 30, 30, 0.60) ;
    gap: 24px;
    height: 100%;
    min-height: 60vh;
    /* overflow: hidden; */
    border-radius: 16px;
    position: relative;
    overflow:hidden;
}


.rutas-card__bg{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform:translate(-50%, -50%) scale(1);
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    border-radius: 16px;
    transition:var(--transition-slow);

}
.rutas-card:hover .rutas-card__bg{
    transform:translate(-50%, -50%) scale(1.2);

}
.rutas-card__icons-head{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}
.rutas-card__type-rute{
    display: flex;
    flex-direction: row;
    gap: 8px;
}
.rutas-card__type-buble{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius:1000px;
    background-color: var(--white);
    color: var(--primary-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.rutas-card__accessibility-buble{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius:1000px;
    background-color: var(--accent-500);
    color: var(--primary-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.rutas-card__body{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}
.rutas-card__tag-badge{
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 4px;
    padding: 4px 8px;
    width: fit-content;
}

.rutas-card__via-verda .rutas-card__tag-badge{
    background-color: var(--route-vies-verdes);
    color: var(--black);
}
.rutas-card__pirinexus .rutas-card__tag-badge{
    background-color: var(--route-pirinexus);
}
.rutas-card__ruta-tematica .rutas-card__tag-badge{
    background-color: var(--route-vies-tematiques);
    
}
.rutas-card__ruta-vies-locals .rutas-card__tag-badge{
    background-color: var(--route-vies-locals);
    color: var(--black);
}

.rutas-card__accessibility {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.rutas-card__card-title{
    color: var(--white);
    font-family: var(--font-family-title);
    font-size: var(--fs-3xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-3xl); /* 83.333% */
    letter-spacing: -1.44px;
    transition: var(--transition-base);
}

.rutas-card .rutas-card__card-title span{
    display: inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 3px;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: background-size var(--transition-base), background-image 0s;
}

.rutas-card:hover .rutas-card__card-title span{
    background-size: 100% 3px;
}
.rutas-card__via-verda:hover .rutas-card__card-title span {
    background-image: linear-gradient(var(--route-vies-verdes), var(--route-vies-verdes));
}
.rutas-card__pirinexus:hover .rutas-card__card-title span {
    background-image: linear-gradient(var(--route-pirinexus), var(--route-pirinexus));
}
.rutas-card__ruta-tematica:hover .rutas-card__card-title span {
    background-image: linear-gradient(var(--route-vies-tematiques), var(--route-vies-tematiques));
}
.rutas-card__ruta-vies-locals:hover .rutas-card__card-title span {
    background-image: linear-gradient(var(--route-vies-locals), var(--route-vies-locals));
}

/* Subrayado de color personalizado según la clase de la tarjeta */
.rutas-card__via-verda:hover .rutas-card__card-title span {
    background-image: linear-gradient(var(--route-vies-verdes), var(--route-vies-verdes));
}
.rutas-card__pirinexus:hover .rutas-card__card-title span {
    background-image: linear-gradient(var(--route-pirinexus), var(--route-pirinexus));
}
.rutas-card__ruta-tematica:hover .rutas-card__card-title span {
    background-image: linear-gradient(var(--route-vies-tematiques), var(--route-vies-tematiques));
}
.rutas-card__ruta-vies-locals:hover .rutas-card__card-title span {
    background-image: linear-gradient(var(--route-vies-locals), var(--route-vies-locals));
}


.rutas-card__card-info{
    border-radius: 8px;
    background: rgba(30, 30, 30, 0.80);
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: fit-content;
}
.rutas-card__card-info-item{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rutas-card__card-info-icon{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.rutas-card__card-info-icon img{
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.rutas-card__card-info-text{
    color: var(--neutrals-white, #FFF);
    text-align: center;
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.rutas-card__card-citys{
    color: var(--white) ;
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.rutas-card__card-btn{
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(40px*1.5);
    height: calc(36px*1.5);
}

.rutas-card__card-btn i{
    font-size: var(--fs-xl);
    color: var(--white);
    position: relative;
    z-index: 1;
    transition: var(--transition-base);
}
.rutas-card__card-btn svg{
    position: absolute;
    bottom: 0;
    right: 0;
    height: calc(36px*1.5);
    width: auto;
    fill:var(--primary-500);
    transition: var(--transition-base);
}

.rutas-card:hover .rutas-card__card-btn svg{
    fill: var(--secondary-500);
}


.rutas-card__clipath{
    width: 88px;
    height: 88px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    transition: var(--transition-base);
}

.rutas-card__clipath svg{
    fill:var(--accent-500);
}

.rutas-card__pagination.swiper-pagination{
    position: relative;
    bottom: inherit;
    right: inherit;
    left: inherit;
    top: inherit;
    width: fit-content;
    margin-top: var(--section-sm);
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.rutas-card__pagination.swiper-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background-color: var(--white);
    opacity: 1;
    border-radius: 4px;
    transition: var(--transition-base);
    margin: 0;
}
.rutas-card__pagination.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: var(--secondary-500);
    width: 36px;

}


.tambien-interesar{
    padding: var(--section-md) 0;
}
.tambien-interesar .blog-list__card {
    width: 100% !important;
    max-width: 100% !important;
    height: 60vh;
    box-sizing: border-box;
}

.tambien-interesar .blog-list__card .blog-list__card-title{
    font-size: var(--fs-4xl);
    line-height: var(--lh-4xl);
}


/* =========================================
   31. INSPIRA SECTION
    ========================================= */

.inspira-section{
    padding:var(--section-lg) var(--section-sm);
    background-color: var(--text-50)
}
.inspira-section__content{
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-end;
     align-items: flex-end;

}
.inspira-section__title{
    color: var(--black);
    font-family: var(--font-family-heading);
    font-size: var(--fs-6xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-5xl);
    margin-bottom: 32px;
    text-align: right;
}
.inspira-section__text{
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
    text-align: right;
}

.boton-inspirat{
    display: flex;
    position: relative;
}
.boton-inspirat span{
    color:var(--primary-500);
    font-size: var(--fs-md);
    position: absolute;
    top: 25%;
    right: 25%;
    transform: rotate(0deg);
    transition: var(--transition-slow);
}

.boton-inspirat.active span{
    top: 25%;
    right: -56px;
    transform: rotate(45deg);
}

.filtros-inspirat{
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease;
    justify-content: flex-end;
}

.filtros-inspirat.show{
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
}

.filtro-inspirat {
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--text-900);
    background-color: var(--accent-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-,d);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    outline: 2px solid transparent;
    /* Transición separada para outline y para color/fondo */
    transition:
        outline-color 0.25s cubic-bezier(0.4,0,0.2,1),
        background-color 0.25s cubic-bezier(0.4,0,0.2,1) 0.25s,
        color 0.25s cubic-bezier(0.4,0,0.2,1) 0.25s;
}
/* Cuando está activo, primero crece el outline y luego cambia color y fondo */
.filtro-inspirat.active{
    outline-color: var(--secondary-500);
    background-color: var(--secondary-500);
    color: var(--white);
}
.filtro-inspirat:hover{
    outline: 2px solid var(--secondary-500);
}

/* Filtro Alternativo - Nuevo diseño */
.filtro-alternativo__button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filtro-alternativo__button i {
    font-size: 18px;
}


.filtro-alternativo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    opacity: 0;
    height: 0;
}

.filtro-alternativo.show {
    opacity: 1;
    height: auto;
}

.filtro-alternativo__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background-color: var(--white);
    border: 1px solid var(--text-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filtro-alternativo__item:hover {
    border-color: var(--text-300);
}

.filtro-alternativo__checkbox {
    width: 12px;
    height: 12px;
    background-color: var(--text-300);
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.filtro-alternativo__item.active .filtro-alternativo__checkbox {
    background-color: var(--secondary-500);
}



.filtro-alternativo__label {
    font-family: var(--font-family-base);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-900);
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inspira-section__grid{
    margin-top: var(--section-md);
    display:grid;
	grid-template-columns:repeat(12, 1fr);
	gap:40px;
}

.inspira-section__grid-item{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
     border-radius: 16px;
     width: 100%;
     height: 400px;
     transition: var(--transition-slow);
     position: relative;
    padding:var(--section-sm);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.inspira-section__grid-item::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 0;
}

.inspira-section__grid-item::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
	linear-gradient(
		to bottom,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,0.75) 100%
	);
    z-index: 1;
    opacity: .95;
    border-radius: 16px;
}


.item-1{
	grid-column:span 7;
}

.item-2{
	grid-column:span 5;
}

.item-3{
	grid-column:span 5;
}

.item-4{
	grid-column:span 7;
}

.inspira-section__grid-item__content{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap:8px;
    max-width: 80%;
}

.inspira-section__grid-item__badage{
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 4px;
    padding: 8px 12px;
    width: fit-content;
    background-color: var(--secondary-500);    
}

.inspira-section__grid-item__title{
    color: var(--white);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-2xl);
}

.inspira-section__grid-item__title span{
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 3px;
    -webkit-text-decoration: none;
    text-decoration: none;
    /* Primero crece la línea completamente, luego cambia el color */
    transition:
        background-size 0.3s cubic-bezier(0.4,0,0.2,1),
        background-image 0.1s ease 0.3s;
}

.inspira-section__grid-item:hover{
    padding-bottom: calc(var(--section-sm) + 40px);
}
.inspira-section__grid-item:hover .inspira-section__grid-item__title span{
    background-size: 100% 3px;
    background-image: linear-gradient(var(--accent-500), var(--accent-500));
}

.inspira-section__grid__card-btn{
     transition: var(--transition-base);
    position: absolute;
    bottom: 0;
    right: -80px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(40px * 1.5);
    height: calc(36px * 1.5);
    z-index: 9;
    transition: var(--transition-slow);
}
.inspira-section__grid__card-btn::after{
    content: "";
    position: absolute;
    /* Se expande desde el botón (bottom-right) para cubrir todo el grid-item */
    top: -400px;
    right: -2000px;
    bottom: -100px;
    left: -2000px;
    z-index: 10;
}
.inspira-section__grid-item:hover .inspira-section__grid__card-btn{
    right: 0;
}

.inspira-section__grid__card-btn svg {
    position: absolute;
    bottom: 0;
    right: 0;
    height: calc(36px * 1.5);
    width: auto;
    fill: var(--primary-500);
    transition: var(--transition-base);
}
.inspira-section__grid__card-btn i {
    font-size: var(--fs-xl);
    color: var(--white);
    position: relative;
    z-index: 1;
    transition: var(--transition-base);
}

.inspira-section__clipath {
     transition: var(--transition-base);
    width: 88px;
    height: 88px;
    position: absolute;
    bottom: 0px;
    right: -80px;
    z-index: 8;
    transition: var(--transition-base);
}
.inspira-section__grid-item:hover .inspira-section__clipath {
    right: 0;
}

.inspira-section__clipath svg {
    fill: var(--text-50);
}

@media (max-width:991px){
    .inspira-section__content{
        align-items: flex-start;
        justify-content: flex-start;
    }
    .inspira-section__title,
    .inspira-section__text{
        text-align: left;
    }
    .inspira-section__grid{
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .inspira-section__grid .item-1,
	.inspira-section__grid .item-2,
	.inspira-section__grid .item-3,
	.inspira-section__grid .item-4{
		grid-column: auto;
	}
    .inspira-section__grid-item{
        height: 300px;
    }
}

/* Responsive */
@media (max-width:768px){
	.inspira-section__gri{
		grid-template-columns:1fr;
	}
	

}

/* =========================================
   32. TAMBÉ ET POT INTERESSAR
    ========================================= */

.tambien-interesar_news{
    padding: var(--section-md) 0;
    background-color: var(--text-50);
}

.tambien-interesar_news__title {
    color: var(--secondary-500);
    font-family: var(--font-family-heading);
    font-size: var(--fs-4xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-4xl);
    margin-bottom: 32px
}

.tambien-interesar_news__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 16px;
    background-color: var(--white);
    padding: 24px;  
}

.tambien-interesar_news__card-media {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
}

.tambien-interesar_news__card-img {
    min-height: 400px;
    width: 100%;
    object-fit: cover;
}


.tambien-interesar_news__card-content {}

.tambien-interesar_news__card-badge {
    color: var(--text-900);
    font-family: var(--font-family-base);
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background-color: var(--accent-500);
    border-radius: 4px;
    padding: 8px 12px;
    width: fit-content;
}

.tambien-interesar_news__card-title {
    color: var(--secondary-500);
    font-family: var(--font-family-heading);
    font-size: var(--fs-3xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-2xl);
    margin-bottom: 32px;
    margin-top: 8px;
}

.tambien-interesar_news__card-btn {
    
}

/* Responsive */
@media (max-width: 991px) {
    .tambien-interesar_news__card{
        margin-bottom: 24px;
        padding: 16px;
    }
    .tambien-interesar_news__card-img {
        min-height: 320px;
    }
}

@media (max-width: 575px) {
    .tambien-interesar_news__card-img {
        min-height: 240px;
    }
}


/* =========================================
   33. HEADER
    ========================================= */

    /* ── Base Header ───────────────────────── */
    .header {
        top: 32px;
        left: 32px;
        padding: 32px;
        position: absolute;
        width: calc(100% - 64px);
        z-index: 9999;
        transition: var(--transition-slow);
        border-radius: 16px 16px 0 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%);
    }
   

    .header--scrolled {
        background: none;
        top: -200px;
        padding: 0px 32px;
    }

    .header--pinned {
        position: fixed;
        top: -200px;
        transition: top var(--transition-base);
    }
    
    .header--pinned.header--scroll-up {
        top: 16px;
    }

    .header--pinned .header__nav-wrapper {
        background-color: var(--primary-500);
        padding: 24px 32px;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* ── Nav Wrapper ───────────────────────── */
    .header__nav-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        transition: background-color var(--transition-base), padding var(--transition-base), border-radius var(--transition-base), box-shadow var(--transition-base);
    }

    /* ── Brand ───────────────────────── */
    .header__brand {
        display: flex;
        align-items: center;
    }

    /* ── Nav Container ───────────────────────── */
    .header__nav {
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: center;
    }

    /* ── Nav List ───────────────────────── */
    .header__nav-list {
        display: flex;
        flex-direction: row;
        gap: 16px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .header__nav-item {
        padding: 4px 0;
        border-bottom: 2px solid transparent;
        transition: var(--transition-base);
    }

    .header__nav-item:hover,
    .header__nav-item--active {
        border-bottom: 2px solid var(--secondary-500);
    }

    .header__nav-link {
        color: var(--white);
        font-family: var(--font-family-base);
        font-size: var(--fs-md);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-decoration: none;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: var(--transition-base);
    }

    /* ── User Button ───────────────────────── */
    .header__user {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 1000px;
        text-decoration: none;
        transition: var(--transition-base);
    }

    .header__user i {
        font-size: var(--fs-xl);
        color: var(--white);
        transition: var(--transition-base);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border-radius: 1000px;
    }

    .header__user:hover i {
        color: var(--accent-500);
    }

    .header__user--logged {
        background-color: var(--accent-500);
        color: var(--black);
        font-family: var(--font-family-base);
        font-size: var(--fs-md);
        font-style: normal;
        font-weight: 700;
    }

    /* ── Consorci Button ───────────────────────── */
    .header__consorci {
        position: relative;
        padding: 0 16px;
    }

    .header__consorci::before,
    .header__consorci::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translate(0%, -50%);
        width: 1px;
        height: 60%;
        background-color: var(--white);
    }

    .header__consorci::before {
        left: 0;
    }

    .header__consorci::after {
        right: 0;
    }

    .header__consorci-button {
        background-color: var(--accent-500);
        border-radius: 8px;
        border: none;
        color: var(--black);
        font-family: var(--font-family-base);
        font-size: var(--fs-md);
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        cursor: pointer;
        transition: var(--transition-base);
    }

    .header__consorci-button:hover {
        background-color: var(--secondary-500);
    }

    /* ── Actions (Right Side) ───────────────────────── */
    .header__actions {
        display: flex;
        flex-direction: row;
        gap: 24px;
        align-items: center;
        justify-content: end;
    }

    .header__search-button {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: center;
        color: var(--white);
        font-family: var(--font-family-base);
        font-size: var(--fs-md);
        font-style: normal;
        font-weight: 400;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: var(--transition-base);
    }

    .header__search-button i {
        font-size: var(--fs-xl);
        color: var(--white);
        transition: var(--transition-base);
    }

    .header__search-button:hover,
    .header__search-button:hover i {
        color: var(--accent-500);
    }

    /* ── Language Dropdown ───────────────────────── */
    .header__lang {
        position: relative;
    }

    .header__lang-button {
        background: var(--white);
        border: none;
        color: var(--black);
        font-family: var(--font-family-base);
        font-size: var(--fs-sm);
        font-weight: 500;
        text-transform: uppercase;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        border-radius: 8px;
        transition: var(--transition-base);
    }

    .header__lang-button i {
        font-size: var(--fs-md);
        transition: var(--transition-base);
    }

    .header__lang-button:hover,
    .header__lang-button[aria-expanded="true"] {
        background-color: var(--primary-500);
        color: var(--white);
    }

    .header__lang-button[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

    .header__lang-button span.mobile{
        display: none;
    }
    .header__lang-button span.desktop{
        display: inline;
    }


    .header__lang-dropdown-wrapper {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 1000;
    }

    .header__lang-dropdown {
        background-color: var(--white);
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        padding: 16px;
        min-width: 160px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .header__lang-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        border-radius: 8px;
        color: var(--neutral-900);
        font-family: var(--font-family-base);
        font-size: var(--fs-sm);
        font-weight: 400;
        text-decoration: none;
        text-transform: uppercase;
        transition: var(--transition-base);
    }

    .header__lang-item:hover {
        background-color: var(--bg-primary);
        color: var(--primary-500);
    }

    .header__lang-item--active {
        color: var(--primary-500);
        font-weight: 500;
        background-color: var(--bg-primary);
    }

    .header__lang-item i {
        font-size: var(--fs-md);
        color: var(--primary-500);
    }

    /* ── Search Modal (Component) ───────────────────────── */
    .c-search-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--secondary-500);
        z-index: 99999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 32px;
    }

    .c-search-modal--active {
        display: flex;
    }

    .c-search-modal__close {
        position: absolute;
        top: 32px;
        right: 32px;
        background: transparent;
        border: none;
        color: var(--white);
        font-size: var(--fs-3xl);
        cursor: pointer;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition-base);
        border-radius: 8px;
    }

    .c-search-modal__close:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .c-search-modal__content {
        width: 100%;
        max-width: 1000px;
    }

    .c-search-modal__input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .c-search-modal__input {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 3px solid var(--accent-500);
        color: var(--white);
        font-family: var(--font-family-base);
        font-size: var(--fs-3xl);
        font-weight: 400;
        padding: 24px 80px 24px 0;
        outline: none;
    }

    .c-search-modal__input::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    .c-search-modal__button {
        position: absolute;
        right: 0;
        background: transparent;
        border: none;
        color: var(--white);
        font-size: var(--fs-3xl);
        cursor: pointer;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition-base);
        border-radius: 8px;
    }

    .c-search-modal__button:hover {
        color: var(--accent-500);
    }

    @media (max-width: 1399px) {
        .c-search-modal {
            padding: 24px;
        }

        .c-search-modal__close {
            top: 24px;
            right: 24px;
            font-size: var(--fs-2xl);
            width: 40px;
            height: 40px;
        }

        .c-search-modal__input {
            font-size: var(--fs-xl);
            padding: 16px 64px 16px 0;
        }

        .c-search-modal__button {
            font-size: var(--fs-2xl);
            width: 48px;
            height: 48px;
        }
    }

    /* ── Megamenu Component (Generic Collapse Menu) ───────────────────────── */
    .c-megamenu {
        background-color: var(--white);
        padding: 32px;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: row;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 16px;

    }

    .c-megamenu__item {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: calc((100% - 60px) / 4);
        padding: 16px;
        border-radius: 8px;
        transition: var(--transition-base);
        position: relative;

    }

    .c-megamenu__item:hover,
    .c-megamenu__item.c-megamenu__item--highlighted{
        background-color:var(--bg-primary) ;
    }

    .c-megamenu__icon {
        min-width: 48px;
        height: 48px;
        border-radius: 1000px;
        background-color: var(--primary-500);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    /* Colores específicos para megamenu Info Pràctica */
    .c-megamenu--info-practica .c-megamenu__icon {
        background-color: var(--text-200);
    }

    /* Colores específicos para megamenu Ecovies */
    .c-megamenu--ecovies .c-megamenu__item:nth-child(1) .c-megamenu__icon {
        background-color: var(--accent-500);
    }
    .c-megamenu--ecovies .c-megamenu__item:nth-child(2) .c-megamenu__icon {
        background-color: var(--secondary-500);
    }
    .c-megamenu--ecovies .c-megamenu__item:nth-child(3) .c-megamenu__icon {
        background-color: var(--route-vies-locals);
    }
    .c-megamenu--ecovies .c-megamenu__item:nth-child(4) .c-megamenu__icon {
        background-color: var(--route-pirinexus);
    }
    .c-megamenu--ecovies .c-megamenu__item:nth-child(n+5) .c-megamenu__icon {
        background-color: var(--text-200);
    }
    

    .c-megamenu__content {
    }

    .c-megamenu__title {
    }

    .c-megamenu__description {
    }

    .c-megamenu__link {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        text-decoration: none;
        background-color: transparent!important;
    }
    .c-megamenu__link::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        opacity: 1;
    }

    .c-megamenu__arrow {
    }
    .c-megamenu__item--highlighted {
    }

    .c-megamenu__item--featured {
    }

    /* ── Megamenu Modifiers (Specific Contexts) ───────────────────────── */
    .c-megamenu--consorci {
    }

    .c-megamenu--ecovies {
    }

    .c-megamenu--info-practica {
    }

    /* Wrappers de submenu mobile: ocultos en desktop */
    .header__nav-submenu-wrapper {
        display: none;
    }

    /* ── Megamenu Responsive ───────────────────────── */
    @media (max-width: 991px) {
        .c-megamenu {
            padding: 24px;
            gap: 16px;
        }

        .c-megamenu__item {
            width: calc((100% - 16px) / 2);
        }
    }

    @media (max-width: 1399px) {
        .header__nav-item:hover, .header__nav-item--active{
            border-bottom:none ;
        }
        /* Ocultar megamenus desktop en mobile */
        .collapse#ecoviesCollapse,
        .collapse#infoPracticaCollapse,
        .collapse#consorciCollapse {
            display: none !important;
        }

        /* Mostrar wrappers de submenu mobile */
        .header__nav-submenu-wrapper {
            display: block;
        }

        /* Megamenus mobile: dentro del flujo del menú */
        .c-megamenu--mobile {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 12px;
            padding: 16px;
            gap: 12px;
            border-radius: 12px;
        }

        .c-megamenu--mobile .c-megamenu__item {
            width: 100%;
            gap: 8px;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 8px;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .c-megamenu--mobile .c-megamenu__item:hover,
        .c-megamenu--mobile .c-megamenu__item.c-megamenu__item--highlighted {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .c-megamenu--mobile .c-megamenu__icon {
            min-width: 20px;
            height: 20px;
        }

        .c-megamenu--mobile .c-megamenu__title {
            color: var(--white);
        }
        
        .c-megamenu--mobile .c-megamenu__description{
            display: none;
        }
    }

    @media (max-width: 575px) {
        .c-megamenu--mobile {
            padding: 12px;
            gap: 8px;
        }

    

    }



    .open-mobile,
    .close-mobile{
        display: none;
        color: var(--white);
        font-size: var(--fs-2xl);
    }

     @media(max-width:1399px){
        .header{
            top: 32px;
            left: 32px;
            padding: 16px;
            width: calc(100% - 64px);
        }
         .open-mobile,
        .close-mobile{
            display: flex;
        }
        .close-mobile {
            position: absolute;
            top: 32px;
            left: 32px;
            z-index: 100;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 500px;
            cursor: pointer;
            padding: 0;
            width: 48px;
            height: 48px;
            align-items: center;
            justify-content: center;
        }
        .close-mobile i {
            font-size: var(--fs-2xl);
            color: var(--white);
        }
        .header--pinned{
            top: 16px;
            width: calc(100% - 32px);
            left: 16px;
            padding:0;
        }
        .header--pinned .header__nav-wrapper{
            padding: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 16px;
        }
        .header__nav{
            display: flex;
            flex-direction: column;
            width: 100vw;
            height: 100vh;
            background-color: var(--primary-500);
            background-image: url(/templates/viesverdes/img/header-bg-mobile.jpg);
            background-size: cover;
            background-position: center;
            position: fixed;
            top: 0;
            left: 100%;
            transition: var(--transition-slow);
            padding:120px var(--section-lg) var(--section-lg) var(--section-lg);
            z-index: 9;
            overflow-y: auto;
        }

        .header__nav.opened{
            left: 0;
        }
        .header__nav-list{
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .header__nav-item{
            width: fit-content;
            border: none;
        }
 
        .header__nav-item.header__nav-item--active a{
            background-color: var(--accent-500);
            color: var(--black);
        }
        .header__brand img{
            width: 120px;
        }
        .header__search-button{
            font-size: 0;
        }
        .header__lang-button i,
        .header__search-button span.mobile i {
            font-size: var(--fs-2xl);
        }
        .header__lang-button{
            background-color: transparent;
            color: var(--white);
            padding: 0;

        }
        .header__lang-button span.mobile{
            display: inline;
        }
        .header__lang-button span.desktop{
            display: none;
        }
        .header__consorci-button,
        .header__nav-link{
            font-size: var(--fs-xl);
            padding: 8px 16px;
            border-radius: 8px;
            transition: var(--transition-base);
        }
        /* Resetear estilo botón del consorci-button en mobile */
        .header__consorci-button {
            background-color: transparent;
            color: var(--white);
            justify-content: flex-start;
        }
        .header__consorci-button:hover {
            background-color: transparent;
        }
        /* Estado active para consorci-button */
        .header__consorci--active .header__consorci-button,
        .header__consorci-button[aria-expanded="true"] {
            background-color: var(--accent-500);
            color: var(--black);
        }
        /* Estado active para nav-items con megamenus desplegados */
        .header__nav-item--active .header__nav-link[data-bs-toggle="collapse"],
        .header__nav-link[data-bs-toggle="collapse"][aria-expanded="true"] {
            background-color: var(--accent-500);
            color: var(--black);
        }
        .header__consorci{
            padding: 20px 0 0 0;
            width: 100%;
            border-top: 2px solid rgba(255, 255, 255, 0.1);
            
        }
        .header__consorci::before,
        .header__consorci::after{
            display: none;
        }
        .header__user{
            position: absolute;
            top: var(--section-lg);
            right: var(--section-lg);
        }
        /* Estilo glassmorphism para user sin login */
        .header__user:not(.header__user--logged) {
            width: 48px;
            height: 48px;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .header__user:not(.header__user--logged) i {
            font-size: var(--fs-2xl);
        }
    }

    @media(max-width:991px){
        .header{
            top: 0.75rem;
            left: 0.75rem;
            padding: 0.75rem;
            width: calc(100% - 1.5rem);
        }
    }

/* =========================================
   34. FOOTER
    ========================================= */

.footer {
    background-image: url(/templates/viesverdes/img/footer-img-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: local;
    background-repeat: no-repeat;
    padding-top: var(--section-2xl);
    padding-bottom: 300px;
    position: relative;
}
footer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px;
    z-index: 0;
    background-image: url(/templates/viesverdes/img/footer-logo-bg.svg);
    background-size: 100% auto;
    background-position: top center;
    background-attachment: local;
    background-repeat: no-repeat;
}

.footer__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.footer__inner::after {
    position: absolute;
    content: "";
    top: 0;
    left: 40px;
    width: calc(100% - 80px);
    height: 100%;
    background-color: var(--primary-500);
    border-radius: 32px;
    z-index: 0;
}

@media (max-width: 1499px) {
    .footer__inner::after {
        left: 16px;
        width: calc(100% - 32px);
    }
}

.footer__container {
    position: relative;
    z-index: 1;
    padding: var(--section-md) 0;
}

.footer__row {
}

.footer__col {
}

.footer__logo {
    mix-blend-mode: lighten;
}

.footer__logo-img {
    margin-bottom: 16px;
}

.footer__brand {
}

.footer__brand-img {
    margin-bottom: 16px;
}

.footer__description {
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: normal;
    margin-bottom: 16px;
}

.footer__address {
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: normal;
}

.footer__address-line {
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: normal;
}

.footer__email {
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: normal;
}

.footer__nav-title {
    color: var(--accent-500);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.48px;
}

.footer__nav-list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer__nav-item {
}

.footer__nav-link {
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: normal;
}

@media (max-width: 991px) {
    .footer {
        padding-bottom: 200px;
    }
    .footer__inner::after {
        left: 16px;
        width: calc(100% - 32px);
    }
}

@media (max-width: 575px) {
    .footer {
        padding: var(--section-md) var(--section-sm);
    }
    .footer__inner{
            padding:0 var(--section-sm) ;
    }
    .footer__inner::after {
        left: 0;
        width: 100%;
    }
    .footer__nav-title {
        font-size: var(--fs-xl);
    }
}

/* ── Footer Cards Home ───────────────────── */

.footer-cards-home {
    margin-bottom: var(--section-lg);
    z-index: 2;
}

.footer-card-home {
    background: var(--white);
    border-radius: 12px;
    padding: 16px 102px 16px 16px;
    display: flex;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    margin-bottom: 24px;
    min-height: 120px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.footer-card-home:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.footer-card-home__icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
}

.footer-card-home__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-card-home__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-card-home__title {
    color: var(--primary-500);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    line-height: var(--lh-lg);
    font-weight: 700;
}

.footer-card-home__description {
    color: var(--text-600);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-weight: 400;
    line-height: var(--lh-lg);
}

.footer-card-home__clipath {
    width: 88px;
    height: 88px;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: var(--transition-base);
}

.footer-card-home__clipath svg {
    fill: var(--bg-secondary);
}

.footer-card-home__button {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 54px;
}

.footer-card-home__button i {
    font-size: var(--fs-xl);
    color: var(--white);
    position: relative;
    z-index: 1;
    transition: var(--transition-base);
}

.footer-card-home__button svg {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 54px;
    width: auto;
    fill: var(--secondary-500);
    transition: var(--transition-base);
}

.footer-card-home:hover .footer-card-home__button svg {
    fill: var(--secondary-500);
}

.footer-card-home:hover .footer-card-home__button i {
    transform: translateX(2px);
}

@media (max-width: 767px) {
    .footer-card-home {
        padding: 16px;
        gap: 12px;
        min-height: 100px;
    }

    .footer-card-home__icon {
        width: 56px;
        height: 56px;
    }

    .footer-card-home__title {
        font-size: var(--fs-md);
    }

    .footer-card-home__description {
        font-size: var(--fs-xs);
    }

    .footer-card-home__clipath {
        width: 70px;
        height: 70px;
    }

    .footer-card-home__button {
        width: 48px;
        height: 43px;
    }

    .footer-card-home__button svg {
        height: 43px;
    }

    .footer-card-home__button i {
        font-size: var(--fs-lg);
    }
}

/* =========================================
   35. INTRO HOME
    ========================================= */

.intro-home {
    padding: var(--section-md) 0;
}

.intro-home p {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-xl);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 24px;
}

.intro-home .c-button {
    /* margin-top: 16px; */
}

@media (max-width: 991px) {
    .intro-home {
        padding: var(--section-xl) 0;
    }
    .intro-home p {
        font-size: var(--fs-xl);
    }
}

@media (max-width: 767px) {
    .intro-home {
        padding: var(--section-lg) 0;
    }
    .intro-home p {
        font-size: var(--fs-lg);
    }
}

.search-routes {
    padding: var(--section-md);
    background-image: url(/templates/viesverdes/img/bg-rutes-home.jpg);
    background-size: cover;
    background-position: center;
    overflow-x: clip;
}

.search-routes .container-fluid {
    overflow-x: clip;
}

.search-routes .col-lg-5 {
    position: relative;
}

.search-routes__head {
    position: sticky;
    top: 80px;
    z-index: 10;
}

.search-routes__title {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-6xl);
    font-weight: 700;
    margin-bottom: 24px;
    line-height: var(--lh-5xl);
    margin-bottom: 56px;
}

.search-routes__title strong{
    color: var(--secondary-500);
    font-weight: 700;
}

.search-routes__text {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    margin-bottom: 16px;
}

.search-routes__button {
    margin-top: 24px;
}

.search-routes__filter-button {
    display: flex;
    position: relative;
    margin-top: 56px;
}

.search-routes__filter-button span {
    color: var(--primary-500);
    font-size: var(--fs-md);
    position: absolute;
    top: 25%;
    right: 25%;
    transform: rotate(0deg);
    transition: var(--transition-slow);
}

.search-routes__filter-button.active span {
    top: 25%;
    right: -56px;
    transform: rotate(45deg);
}

.search-routes__filters {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 20px;
}

.search-routes__filter {
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--text-900);
    background-color: var(--accent-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    outline: 2px solid transparent;
    transition:
        outline-color 0.25s cubic-bezier(0.4,0,0.2,1),
        background-color 0.25s cubic-bezier(0.4,0,0.2,1) 0.25s,
        color 0.25s cubic-bezier(0.4,0,0.2,1) 0.25s;
}

.search-routes__filter.active {
    outline-color: var(--secondary-500);
    background-color: var(--secondary-500);
    color: var(--white);
}

.search-routes__filter:hover {
    outline: 2px solid var(--secondary-500);
}

.search-routes__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
}

/* Swiper override para mobile */
@media (max-width: 990px) {
    .search-routes__grid {
        display: block;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .search-routes__grid .swiper-wrapper {
        display: flex;
        padding-left: 0;
    }
}

.search-routes__pagination {
    position: relative;
    margin-top: 24px;
    text-align: center;
}

.search-routes__pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--primary-500);
    opacity: 0.3;
    transition: opacity var(--transition-base);
}

.search-routes__pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

@media (min-width: 991px) {
  
    .search-routes__pagination {
        display: none;
    }
    
    .search-routes__grid.swiper-initialized {
        display: grid;
    }
    
    .search-routes__grid .swiper-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .search-routes__grid .swiper-slide {
        margin: 0 !important;
    }
}

@media(max-width: 990px){
      .search-routes .controler-pading{
        padding-right: 0!important;
    }
}
.search-routes__grid-item {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 16px;
    width: 100%;
    height: 500px;
    position: relative;
    padding: var(--section-sm);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

/* Asegurar altura en swiper-slide */


.search-routes__grid-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 0;
}

.search-routes__grid-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.75) 100%
    );
    z-index: 1;
    opacity: .95;
    border-radius: 16px;
}

.search-routes__grid-item__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 80%;
}

.search-routes__grid-item__title {
    color: var(--white);
    font-family: var(--font-family-heading);
    font-size: var(--fs-4xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-3xl);
}
.search-routes__grid-item__text{
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
}
.search-routes__grid__card-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(40px * 1.5);
    height: calc(36px * 1.5);
    z-index: 9;
}

.search-routes__grid__card-btn::after {
    content: "";
    position: absolute;
    top: -500px;
    right: -2000px;
    bottom: -100px;
    left: -2000px;
    z-index: 10;
}

.search-routes__grid__card-btn svg {
    position: absolute;
    bottom: 0;
    right: 0;
    height: calc(36px * 1.5);
    width: auto;
    fill: var(--primary-500);
    transition: fill 0.3s ease;
}

.search-routes__grid-item:hover .search-routes__grid__card-btn svg {
    fill: var(--accent-500);
}

.search-routes__grid__card-btn i {
    font-size: var(--fs-xl);
    color: var(--white);
    position: relative;
    z-index: 1;
}

.search-routes__clipath {
    width: 88px;
    height: 88px;
    position: absolute;
    bottom: 0px;
    right: 0;
    z-index: 8;
}

.search-routes__clipath svg {
    fill: var(--white);
}

@media (max-width: 991px) {
    .search-routes {
        padding: var(--section-lg) 0;
        overflow-x: clip;
    }
    
    .search-routes__title {
        font-size: var(--fs-3xl);
    }
    .search-routes__grid {
        gap: 16px;
        margin-top: 32px;
    }
    .search-routes__grid-item {
        height: 400px;
        padding:32px
    }
    .search-routes__grid-item__content{
        width: 90%;
    }
}

@media (max-width: 767px) {
    .search-routes {
        padding: var(--section-md) 0;
    }
    .search-routes__title {
        font-size: var(--fs-6xl);
        margin-bottom: 20px;
    }
    .search-routes__text {
        font-size: var(--fs-lg);
    }
    .search-routes__grid-item {
        height: 400px;
    }
    .search-routes__grid-item__title {
        font-size: var(--fs-5xl);
    }
}

/* =========================================
   36. PLANIFICA SECTION
   ========================================= */

.planifica-section{
    padding: var(--section-2xl) 0;
    background-image: url(/templates/viesverdes/img/bg-planificador.jpg);
    background-size: cover;
    background-position: center;
}
.planifica-section.medium-left::before{
    top: 56px;
    background-color: var(--text-50);
}
.planifica-section .container-fluid{
    padding: 0 var(--section-md) ;
}

.planifica-section__title{
    color: var(--white);
    font-family: var(--font-family-heading);
    font-size: var(--fs-6xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-5xl);
    letter-spacing: -2.88px;
    margin-bottom: 56px;
}

.planifica-section__title strong{
    color: var(--secondary-500);
    font-weight: 700;
}

.planifica-section__text{
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 133.333% */
    margin-bottom: 24px;
}

@media(max-width:991px){
    .planifica-section{
        padding: 72px 0;
    }
    .planifica-section__title{
        margin-bottom: 32px;
    }
    .planifica-section__text{
        font-size: var(--fs-lg);
        line-height: var(--lh-lg);
    }
}

/* =========================================
   37. PLANIFICA CAROUSEL
   ========================================= */



.planifica-carousel__swiper {
    min-height: 80vh;
    border-radius: 16px;
    width: calc(100% - 64px);
    padding: 32px 0 64px 32px;

    background-image: url(/templates/viesverdes/img/bg-slider.jpg);
    background-position: center center;
    background-size: cover;
    
    display: flex;
    align-items: end;
}

.planifica-carousel__slide {
    height: auto;
}

.planifica-carousel__card {
    background: var(--white);
    border-radius: 16px;
    padding: 32px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.planifica-carousel__card:hover {
    transform: translateY(-20px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.planifica-carousel__icon {
    font-size: 40px;
    color: var(--accent-500);
    line-height: 1;
}

.planifica-carousel__title {
    color:var(--secondary-500);
    font-family: var(--font-family-heading);
    font-size: var(--fs-3xl);
    font-style: normal;
    font-weight: 600;
    line-height: var(--lh-xl);
    letter-spacing: -1.2px;
}

.planifica-carousel__text {
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-md);
    color: var(--black-70);
    margin: 0;
}

.planifica-carousel__pagination {
    position: relative;
    margin-top: 40px;
    text-align: center;
}

.planifica-carousel__pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--primary-500);
    opacity: 0.3;
    transition: opacity var(--transition-base);
}

.planifica-carousel__pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
    .planifica-carousel {
        padding: 60px 0;
        height: 60vh;
    }

    .planifica-carousel__swiper {
        min-height: 60vh;
        padding: 32px;
    }
     .planifica-carousel__card {
        padding: 16px;
        gap: 4px;
    }

     .planifica-carousel__icon {
        font-size: var(--fs-3xl);
    }

    .planifica-carousel__title {
        font-size: var(--fs-4xl);
        line-height: var(--lh-2xl);
        margin-bottom: 12px;
    }

    .planifica-carousel__text {
        font-size: var(--fs-lg);
    }
    .planifica-carousel__card:hover {
        transform: none;
    }
}

@media (max-width: 575px) {
    .planifica-carousel {
        padding: 40px 0;
    }

    .planifica-carousel__swiper {
        padding: 32px;
    }

    .planifica-carousel__card {
        padding: 16px;
    }

    .planifica-carousel__icon {
        font-size: var(--fs-3xl);
    }

    .planifica-carousel__title {
        font-size: var(--fs-4xl);
    }

    .planifica-carousel__text {
        font-size: var(--fs-lg);
    }
}

.planifica-section__button {
    margin-bottom: 40px;
}

.planifica-section__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--accent-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-base);
}
@media (max-width: 991px) {
    .planifica-section__link {
        align-items: start;
        margin-bottom: 40px;
    }
    .planifica-section__link i{
        margin-top: 6px;
    }
}

.planifica-section__link:hover {
    color: var(--accent-500);
}

.planifica-section__link i {
    font-size: var(--fs-xl);
    text-decoration: none;
}

.planifica-section__link span {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.planifica-section__link:hover span {
    text-decoration-color: var(--accent-500);
}

/* =========================================
   38. TROBA RUTA
   ========================================= */

.troba-ruta {
    background-color: var(--accent-500);
    padding: var(--section-2xl) 0 var(--section-2xl) var(--section-md);
    background-image: url(/templates/viesverdes/img/troba-ruta-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.troba-ruta__title {
    color: var(--black);
    font-family: var(--font-family-heading);
    font-size: var(--fs-6xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-5xl);
    letter-spacing: -2.88px;
    margin-bottom: 16px;
}
.troba-ruta__title strong{
    color: var(--secondary-500);
    font-weight: 700;
}

.troba-ruta__text {
    color: var(--black-90);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-md); /* 133.333% */
}

.troba-ruta__button {
    margin-top: 32px;
    margin-bottom: 56px;
}

.troba-ruta__image-col {

}

.troba-ruta__carousel-col {

}

.troba-ruta__carousel {
    overflow: visible !important;
}

.troba-ruta__carousel-wrapper {

}

.troba-ruta__carousel-slide {
    height: auto;
}

.troba-ruta__pagination.swiper-pagination {
    position: relative;
    bottom: inherit;
    right: inherit;
    left: inherit;
    top: inherit;
    width: fit-content;
    margin-top: var(--section-sm);
    display: flex !important;
    flex-direction: row;
    gap: 6px;
    z-index: 10;
}

.troba-ruta__pagination.swiper-pagination .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    border-radius: 4px;
    transition: var(--transition-base);
    margin: 0 !important;
}

.troba-ruta__pagination.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--secondary-500) !important;
    width: 36px !important;
}

/* =========================================
   39. MILLON
   ========================================= */

.millon {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--section-2xl) 0;
    /* isolation: isolate; */
}



.millon__content {
    position: relative;
    z-index: 1;
    width: 100%;
    /* mix-blend-mode: difference; */
        background: var(--white);

}

.millon__text-wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.millon__content .millon__number {
    color: var(--secondary-500);
}

.millon__content .millon__subtitle {
    color: var(--secondary-500);
}

.millon__content .millon__description {
    color: var(--text-700);
}

.millon__content .millon__info {
    color: var(--black);
}

.millon__number {
    font-family: var(--font-family-heading);
    font-size: clamp(5rem, 15vw, 14rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0;
}

.millon__subtitle {
    font-family: var(--font-family-heading);
    font-size: clamp(2.5rem, 8vw, 7rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin: 0;
}

.millon__description {
    font-family: var(--font-family-heading);
    font-size: var(--fs-4xl);
    font-weight: 500;
    line-height: 1.2;
    margin: 24px 0 8px 0;
    max-width: 800px;
}

.millon__info {
    font-family: var(--font-family-base);
    font-size: var(--fs-xl);
    font-weight: 400;
    line-height: var(--lh-md);
    margin: 16px 0 32px 0;
    max-width: 600px;
}

.millon__button {
    margin-top: 24px;
}

.millon__hidden-copy {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    background-color: var(--secondary-500);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 60%, 0% 100%);
    transition: none;
}

.millon__hidden-copy .millon__number {
    color: var(--white);
}

.millon__hidden-copy .millon__subtitle {
    color: var(--white);
}

.millon__hidden-copy .millon__description {
    color: var(--text-700);
}

.millon__hidden-copy .millon__description strong {
    color: var(--text-700);
}

.millon__hidden-copy .millon__info {
    color: var(--black);
}



.agenda-home{
    padding: var(--section-lg) var(--section-md);
}

.agenda-home__container{
    background-image: url(/templates/viesverdes/img/bg-agenda-home.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    padding: var(--section-lg);
    position: relative;
    overflow: hidden;
    
}

.agenda-home__container::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 80, 70, 0.8);
    border-radius: 16px;
    z-index: 1;
}

.agenda-home__row{
    position: relative;
    z-index: 2;
}

.agenda-home__head{
    display: flex;
    flex-direction: column;
}

.agenda-home__title{
    color: var(--white);
    font-family: var(--font-family-heading);
    font-size: var(--fs-6xl);
    font-weight: 700;
    line-height: var(--lh-5xl);
    letter-spacing: -2.88px;
    margin-bottom: 32px;
}
.agenda-home__text{
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-md);
}

.agenda-home__text:last-of-type{
    margin-bottom: 48px;
}

.agenda-home__carousel-wrapper {
    position: relative;
    z-index: 2;
    margin-top: var(--section-md);
}

.agenda-home__carousel {
    overflow: visible;
}

.agenda-home__carousel .swiper-slide {
    height: auto;
    display: flex;
}

.agenda-home__carousel .agenda-row__card {
    height: 100%;
    width: 100%;
}

.agenda-home__pagination {
    position: relative;
    bottom: inherit;
    right: inherit;
    left: inherit;
    top: inherit;
    width: fit-content;
    margin: var(--section-sm) auto 0;
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.agenda-home__pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: var(--white);
    opacity: 1;
    border-radius: 4px;
    transition: var(--transition-base);
    margin: 0;
}

.agenda-home__pagination .swiper-pagination-bullet-active {
    background-color: var(--secondary-500);
    opacity: 1;
    width: 36px;
    border-radius: 4px;
}

@media (max-width: 991px) {
    .agenda-home__title {
        font-size: var(--fs-4xl);
        line-height: var(--lh-4xl);
    }
}

@media (max-width: 767px) {
    .agenda-home__container {
        padding: var(--section-md) var(--section-sm);
    }

    .agenda-home__title {
        font-size: var(--fs-3xl);
        line-height: var(--lh-3xl);
        margin-bottom: 24px;
    }

    .agenda-home__text {
        font-size: var(--fs-md);
    }

    .agenda-home__text:last-of-type {
        margin-bottom: 32px;
    }
}

.agenda-home__banner{
    background-image: url(/templates/viesverdes/img/banner-agenda-bg.jpg);
    background-color: var(--white);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 60% center;
    border-radius: 16px;
    padding: var(--section-sm);
    position: relative;
    overflow: hidden;
    margin-top: var(--section-md);
}

.agenda-home__banner-title{
    color: var(--secondary-500);
    font-family: var(--font-family-heading);
    font-size: var(--fs-4xl);
    font-weight: 700;
    line-height: var(--lh-3xl);
    margin-bottom: 16px;
    width: 40%;
}
.agenda-home__banner-text{
    color: var(--text-900);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-md);
    width: 40%;
    margin-bottom: 32px;
}
.agenda-home__logo{
    position: absolute;
    top: var(--section-sm);
    right: var(--section-sm);
    height: 80px;
}
@media (max-width: 1199px){
    .agenda-home__banner{
        background-image: none;
    }
    .agenda-home__banner-title{
        width: calc(100% - 240px);
    }
    .agenda-home__banner-text{
       width: 100%;
    }
}
@media (max-width: 991px) {
    .agenda-home__banner{
        overflow: hidden;
    }

    .agenda-home__banner-title{
        font-size: var(--fs-5xl);
        line-height: var(--lh-3xl);
        width: 100%;
    }
    .agenda-home__banner-text{
        width: 100%;
    }
    .agenda-home__logo{
        position: relative;
        top:inherit;
        right: inherit;
        height: 80px;
    }
}


/* =========================================
   40. ECOVIAS INTRO
   ========================================= */

.ecovias-intro {
    padding: var(--section-lg) 0;
    background-color: var(--secondary-500);
}

.ecovias-intro__title {
    color: var(--white);
    font-family: var(--font-family-heading);
    font-size: var(--fs-5xl);
    font-weight: 700;
    line-height: var(--lh-4xl);
    margin-bottom: 32px;
}

.ecovias-intro__text {
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin-bottom: 24px;
}

.ecovias-intro__text:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .ecovias-intro {
        padding: var(--section-md) 0;
    }

    .ecovias-intro__title {
        font-size: var(--fs-4xl);
        line-height: var(--lh-3xl);
        margin-bottom: 24px;
    }

    .ecovias-intro__text {
        font-size: var(--fs-base);
    }
}

@media (max-width: 575px) {
    .ecovias-intro {
        padding: var(--section-sm) 0;
    }

    .ecovias-intro__title {
        font-size: var(--fs-3xl);
        line-height: var(--lh-2xl);
    }
}


/* =========================================
   41. TOTES RUTES
   ========================================= */

.totes-rutes {
    padding: var(--section-lg) 0;
    background-color: var(--white);
}

.totes-rutes__header {
    margin-bottom: 48px;
}

.totes-rutes__title {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-5xl);
    font-weight: 700;
    line-height: var(--lh-4xl);
    margin-bottom: 16px;
}

.totes-rutes__title strong {
    color: var(--primary-500);
}

.totes-rutes__subtitle {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    max-width: 800px;
}

.totes-rutes__filters {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 48px;
    padding: 32px;
    background-color: var(--neutral-100);
    border-radius: 16px;
}

.totes-rutes__filter-group {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}

.totes-rutes__filter-label {
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.totes-rutes__filter-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--text-200);
    border-radius: 8px;
    background-color: var(--white);
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-base);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.totes-rutes__filter-select:hover,
.totes-rutes__filter-select:focus {
    border-color: var(--primary-500);
    outline: none;
}

.totes-rutes__filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.totes-rutes__filter-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.totes-rutes__filter-checkbox label {
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-base);
    cursor: pointer;
    margin: 0;
}

.totes-rutes__filter-button {
    flex-shrink: 0;
}

.totes-rutes__results {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: 24px;
}

.totes-rutes__grid {
    margin-top: 32px;
}

.totes-rutes__col {
    margin-bottom: 32px;
}

/* Ruta Card */
.ruta-card {
    position: relative;
    background-color: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ruta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ruta-card__image {
    position: relative;
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ruta-card__icons {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    gap: 8px;
}

.ruta-card__icon {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ruta-card__icon i {
    font-size: 20px;
    color: var(--primary-500);
}

.ruta-card__accessibility {
    position: absolute;
    top: 16px;
    right: 16px;
}

.ruta-card__accessibility-icon {
    width: 40px;
    height: 40px;
    background-color: var(--primary-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ruta-card__accessibility-icon i {
    font-size: 20px;
    color: var(--white);
}

.ruta-card__body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ruta-card__badge {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--primary-500);
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    margin-bottom: 16px;
    align-self: flex-start;
}

.ruta-card__title {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: var(--lh-xl);
    margin-bottom: 12px;
}

.ruta-card__route {
    color: var(--text-600);
    font-family: var(--font-family-base);
    font-size: var(--fs-base);
    font-weight: 400;
    margin-bottom: 16px;
}

.ruta-card__stats {
    display: flex;
    gap: 16px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--text-100);
}

.ruta-card__stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-sm);
}

.ruta-card__stat i {
    font-size: 18px;
    color: var(--primary-500);
}

.ruta-card__link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

@media (max-width: 991px) {
    .totes-rutes {
        padding: var(--section-md) 0;
    }

    .totes-rutes__title {
        font-size: var(--fs-4xl);
        line-height: var(--lh-3xl);
    }

    .totes-rutes__filters {
        padding: 24px;
        gap: 12px;
    }

    .totes-rutes__filter-group {
        min-width: 150px;
    }
}

@media (max-width: 575px) {
    .totes-rutes {
        padding: var(--section-sm) 0;
    }

    .totes-rutes__title {
        font-size: var(--fs-3xl);
        line-height: var(--lh-2xl);
    }

    .totes-rutes__filters {
        flex-direction: column;
        padding: 16px;
    }

    .totes-rutes__filter-group {
        width: 100%;
        min-width: 100%;
    }

    .totes-rutes__filter-button {
        width: 100%;
    }

    .ruta-card__image {
        height: 200px;
    }

    .ruta-card__body {
        padding: 16px;
    }

    .ruta-card__title {
        font-size: var(--fs-xl);
        line-height: var(--lh-lg);
    }

    .ruta-card__stats {
        flex-wrap: wrap;
        gap: 12px;
    }
}


/* =========================================
   42. ECOVIES MAPA
   ========================================= */

.ecovies-mapa {
    padding: var(--section-lg) 0;
    background-color: var(--neutral-50);
}

.ecovies-mapa__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.ecovies-mapa__title {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-5xl);
    font-weight: 700;
    line-height: var(--lh-4xl);
    margin-bottom: 24px;
}

.ecovies-mapa__title strong {
    color: var(--primary-500);
}

.ecovies-mapa__text {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
}

.ecovies-mapa__map {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.ecovies-mapa__map img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    .ecovies-mapa {
        padding: var(--section-md) 0;
    }

    .ecovies-mapa__title {
        font-size: var(--fs-4xl);
        line-height: var(--lh-3xl);
        margin-bottom: 16px;
    }

    .ecovies-mapa__content {
        margin-bottom: 32px;
    }
}

@media (max-width: 575px) {
    .ecovies-mapa {
        padding: var(--section-sm) 0;
    }

    .ecovies-mapa__title {
        font-size: var(--fs-3xl);
        line-height: var(--lh-2xl);
    }

    .ecovies-mapa__text {
        font-size: var(--fs-base);
    }
}


/* =========================================
   43. PERSONALITZA CTA
   ========================================= */

.personalitza-cta {
    padding: var(--section-lg) 0;
    background-color: var(--white);
}

.personalitza-cta__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-right: 48px;
}

.personalitza-cta__title {
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-5xl);
    font-weight: 700;
    line-height: var(--lh-4xl);
    margin-bottom: 24px;
}

.personalitza-cta__text {
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin-bottom: 32px;
}

.personalitza-cta__image {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
}

@media (max-width: 991px) {
    .personalitza-cta {
        padding: var(--section-md) 0;
    }

    .personalitza-cta__content {
        padding-right: 0;
        margin-bottom: 32px;
    }

    .personalitza-cta__title {
        font-size: var(--fs-4xl);
        line-height: var(--lh-3xl);
    }

    .personalitza-cta__image {
        height: 400px;
    }
}

@media (max-width: 575px) {
    .personalitza-cta {
        padding: var(--section-sm) 0;
    }

    .personalitza-cta__title {
        font-size: var(--fs-3xl);
        line-height: var(--lh-2xl);
    }

    .personalitza-cta__text {
        font-size: var(--fs-base);
    }

    .personalitza-cta__image {
        height: 300px;
    }
}


/* =========================================
   44. GRID RUTES
   ========================================= */

.grid-rutes {
    padding: var(--section-lg) var(--section-md);
}

.grid-rutes__header {
    margin-bottom: 64px;
}

.grid-rutes__title {
    font-family: var(--font-family-heading);
    font-size: var(--fs-6xl);
    font-weight: 700;
    line-height: var(--lh-5xl);
    color: var(--black);
    margin-bottom: 20px;
}
.grid-rutes__title strong{
    color: var(--secondary-500);
    font-weight: 700;
}

.grid-rutes__description {
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    color: var(--neutral-900);
    margin: 0;
}

.grid-rutes__wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.grid-rutes__item {
    width: 100%;
}

.grid-rutes .rutas-card__clipath svg {
    fill: var(--white);
}

/* Responsive */
@media (max-width: 1199px) {
    .grid-rutes__header {
        margin-bottom: 48px;
    }

    .grid-rutes__wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

@media (max-width: 991px) {
    .grid-rutes {
        padding: var(--section-md) 0;
    }

    .grid-rutes__header {
        margin-bottom: 40px;
    }

    .grid-rutes__title {
        font-size: var(--fs-xl);
        line-height: var(--lh-xl);
        margin-bottom: 12px;
    }

    .grid-rutes__description {
        font-size: var(--fs-base);
        line-height: var(--lh-base);
    }

    .grid-rutes__wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .grid-rutes {
        padding: var(--section-sm) 0;
    }

    .grid-rutes__header {
        margin-bottom: 32px;
    }

    .grid-rutes__title {
        font-size: var(--fs-lg);
        line-height: var(--lh-lg);
    }

    .grid-rutes__description {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    .grid-rutes__wrapper {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* =========================================
   45. MAP ECOVIAS
   ========================================= */

.map-ecovias{
    padding:var(--section-lg) var(--section-md);
}
.map-ecovias__title{
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-5xl);
    font-weight: 700;
    line-height: var(--lh-4xl);
    margin-bottom: 0px;
}
.map-ecovias__title strong{
    color: var(--secondary-500);
    font-weight: 700;
}
.map-ecovias__description{
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
     margin-bottom: 32px;
     margin-top: 24px;
}
.map-ecovias__map{
    margin-top: var(--section-lg);
    max-height: 90vh;
    overflow: hidden;
    border-radius: 16px;

}
.map-ecovias__map img{
    height: 100%;
    display: block;
    object-fit: cover;
}


/* =========================================
   46. PLANIFICADOR CTA
   ========================================= */

.planificador-cta {
    padding: var(--section-lg) 0;
    background-color: var(--primary-500);
    position: relative;
    overflow: hidden;
    background-image: url(/templates/viesverdes/img/bg-planificador.jpg);
    background-size: cover;
    background-position:top center;
}

.planificador-cta__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.planificador-cta__title {
    color: var(--white);
    font-family: var(--font-family-heading);
    font-size: var(--fs-5xl);
    font-weight: 700;
    line-height: var(--lh-5xl);
    margin: 0;
}

.planificador-cta__title-highlight {
    color: var(--accent-500);
}

.planificador-cta__button {
    width: fit-content;
}

.planificador-cta__info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.planificador-cta__text {
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin: 0;
}

.planificador-cta__video-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--accent-500);
    transition: opacity var(--transition-base);
}

.planificador-cta__video-link:hover {
    opacity: 0.8;
}

.planificador-cta__video-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--accent-500);
}

.planificador-cta__video-text {
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: var(--lh-md);
    text-decoration: underline;
}


@media (max-width: 991px) {
    .planificador-cta {
        padding: var(--section-md) 0;
    }

    .planificador-cta__title {
        font-size: var(--fs-5xl);
        line-height: var(--lh-5xl);
    }

    .planificador-cta__content {
        margin-bottom: 32px;
    }

    .planificador-cta__text {
        font-size: var(--fs-md);
        line-height: var(--lh-md);
    }
}

@media (max-width: 575px) {
    .planificador-cta {
        padding: var(--section-sm) 0;
    }

    .planificador-cta__title {
        font-size: var(--fs-3xl);
        line-height: var(--lh-3xl);
    }

    .planificador-cta__content {
        gap: 24px;
    }

    .planificador-cta__text {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    .planificador-cta__video-text {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

}

/* =========================================
   47. ALTRES RUTES
   ========================================= */

.altres-rutes{
    padding: var(--section-lg) var(--section-md);
}

.altres-rutes__title{
    color: var(--text-800);
    font-family: var(--font-family-heading);
    font-size: var(--fs-5xl);
    font-weight: 700;
    line-height: var(--lh-4xl);
    margin-bottom: 24px;
    text-align: right;
}
.altres-rutes__title strong{
    color: var(--secondary-500);
    font-weight: 700;
}   
.altres-rutes__description{
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-lg);
    margin-bottom: 32px;
    text-align: right;
}


.altres-rutes__card{
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    min-height: 500px;
    overflow: hidden;
    margin-bottom: 32px;
    display: flex;
}

.altres-rutes__bg{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.altres-rutes__logo{
    width: 40%;
    height: 100%;
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
}
.altres-rutes__content{
    justify-content: end;
    min-height: 100%;
    width: 50%;
    padding:var(--section-sm);
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
}

.altres-rutes__badage{
    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 8px 16px;
    background: rgba(28, 80, 70, 0.60);
    border-radius: 8px;
    margin-bottom: 16px;
    width: fit-content;
}

.altres-rutes__badage span{
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 500;
    letter-spacing: 0.5px;
   
}
.altres-rutes__title-card{
    color: var(--white);
    font-family: var(--font-family-heading);
    font-size: var(--fs-4xl);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-2xl);
    letter-spacing: -1.12px;
}

.altres-rutes__text{
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-lg);
}
@media (max-width: 1024px) {
.altres-rutes__content{
    width: 70%;
    padding: var(--section-sm);
}
  .altres-rutes__logo{
    display: none;
  }
}
@media (max-width: 767px) {
    .altres-rutes__card{
        height: 400px;
    }
    .altres-rutes__content{
        width: 90%;
    }
}

/* =========================================
   48. SECTION GALLERY
   ========================================= */

.section-gallery{
    padding: var(--section-lg) var(--section-md);
}

/* =========================================
   49. RUTAS ASOCIADAS GRID
   ========================================= */

/* Responsive para rutas-asociadas grid */
@media (max-width: 991px) {
    .rutas-asociadas__grid-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 24px;
        margin: 24px;
    }
}

@media (max-width: 767px) {
    .rutas-asociadas__grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 16px;
        margin: 16px;
    }
}

/* =========================================
   50. FICHA LIST
   ========================================= */

.ficha-list{
    padding: var(--section-md) 0;
    

}
.ficha-list__controler{
    height: 100vh;
    display: flex;
    flex-direction: row;
}


.ficha-list__left,
.ficha-list__right{
    width: 50%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.ficha-list__left{
    overflow-y: auto;
    padding:0 32px 24px 32px;
}

/* Grid de galería en ficha-list */
.ficha-list__gallery-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    margin-bottom: 56px;
    min-height: 200px;
}

.ficha-list__gallery-item {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: #f7f7f7;
    height: 100%;
    width: 100%;
}

.ficha-list__gallery-item--main {
    grid-row: 1 / span 2;
    grid-column: 1 / 2;
}

.ficha-list__gallery-item--side:nth-child(2) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

.ficha-list__gallery-item--side:nth-child(3) {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

.ficha-list__gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ficha-list__right{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    position: relative;

}

.ficha-list__info-title{
    color: var(--black);
    font-family: var(--font-family-heading);
    font-size: var(--fs-4xl);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.ficha-list__point{
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding-left: 56px;
    position: relative;
}

.ficha-list__point::after{
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, var(--text-300) 50%, transparent 50%);
    background-size: 1px 16px;
    background-repeat: repeat-y;
}
.point-value{
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background-color: var(--text-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 12px;
    font-family: var(--font-family-base);
    z-index: 1;
    outline: 8px solid white;
    transition: var(--transition-base);
}
.ficha-list__point:hover .point-value{
    background-color: var(--accent-500);

}
.initial-point{
    background-color: var(--secondary-500)!important;
}
.final-point{
    background-color: var(--primary-500)!important;
}
.ficha-list__point__info{
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.ficha-list__point__head{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
}
.ficha-list__point-link{
    display: flex;
    width: fit-content;
    color: var(--secondary-500);
    font-family: var(--font-family-base);
    font-size: var(--fs-sm);
    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;
}

.ficha-list__point-title{
    color: var(--text-600);
    font-family: var(--font-family-heading);
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0;
}
.ficha-list__point-location{
    color: var(--black);
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-style: normal;
    font-weight: 600;
    line-height: var(--lh-xl);
    margin-bottom: 8px;
}
.ficha-list__point-description{
    color: var(--text-600);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-md);
    width: 80%;
}

.ficha-list__altimetria{
    position: absolute;
    bottom: 32px;
    left: 32px;
    width: calc(100% - 64px);
    background-color: var(--white);
    padding: 24px 56px;
    border-radius: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.ficha-list__altimetria-btn{
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity var(--transition-base);
}

.ficha-list__altimetria-btn i{
    transition: transform var(--transition-base);
}

.ficha-list__altimetria.closed .ficha-list__altimetria-btn i{
    transform: rotate(180deg);
}

/* Ocultar botón de abrir cuando está abierto */
.ficha-list__altimetria:not(.closed) .ficha-list__altimetria-btn{
    opacity: 0;
    pointer-events: none;
    height: 0;
}

/* Botón de cerrar */
.ficha-list__altimetria-close{
    width: 48px;
    height: 5px;
    background-color: var(--text-200);
    border-radius: 500px;
    border: none;
    cursor: pointer;
    margin: 0 auto 16px;
    transition: background-color var(--transition-base);
}

.ficha-list__altimetria-close:hover{
    background-color: var(--text-300);
}

.ficha-list__altimetria.closed .ficha-list__altimetria-content{
    max-height: 0;
    opacity: 0;
    
} 
.ficha-list__altimetria .ficha-list__altimetria-content{
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height var(--transition-slow), opacity var(--transition-base);

} 
.ficha-list__altimetria-title{
    color:var(--black);
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: var(--fs-2xl);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 4px;
}
.ficha-list__altimetria-description{
    color: var(--text-700);
    text-align: center;
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Info Cards */
.ficha-list__info-cards{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 56px;
}

.ficha-list__info-card{
    background-color: #F5F5F5;
    border-radius: 16px;
    padding: 24px;
}

.ficha-list__info-card-title{
    color: var(--black);
    font-family: var(--font-family-heading);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: normal;
    margin-bottom: 8px;
}

.ficha-list__info-card-subtitle{
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
}

/* Weather Section */
.ficha-list__weather-current{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.ficha-list__weather-item{
    display: flex;
    align-items: center;
    gap: 8px;
}

.ficha-list__weather-item i{
    font-size: 24px;
    color: var(--text-600);
}

.ficha-list__weather-item--main i{
    font-size: 32px;
    color: #FFB800;
}

.ficha-list__weather-value{
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: normal;
}

.ficha-list__weather-temps{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ficha-list__weather-forecast{
    border-top: 1px solid #E0E0E0;
    padding-top: 20px;
}

.ficha-list__weather-forecast-title{
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: normal;
    margin-bottom: 16px;
}

.ficha-list__weather-days{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ficha-list__weather-day{
    display: flex;
    align-items: center;
    gap: 12px;
}

.ficha-list__weather-day i{
    font-size: 24px;
    color: var(--text-600);
}

.ficha-list__weather-day-info{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ficha-list__weather-day-name{
    color: var(--text-800);
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: normal;
}

.ficha-list__weather-day-temp{
    color: var(--text-700);
    font-family: var(--font-family-base);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: normal;
}

/* Platforms Section */
.ficha-list__platforms{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ficha-list__platform-link{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 16px;
    background-color: var(--white);
    border-radius: 8px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    text-decoration: none;
}

.ficha-list__platform-link:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ficha-list__platform-logo{
    height: 32px;
    width: auto;
    object-fit: contain;
}