/* ============================================================
   millores_2026.css — Ajuntament de Tortosa
   Additive override stylesheet for 2026 visual refresh.
   Load this LAST in head.tpl. Safe to remove without side effects.
   ============================================================ */

/* --- 1. Modern Typography --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html,
body {
    font-family: 'Inter', "Century Gothic custom", Century Gothic, Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 2. Global Smooth Transitions --- */
a,
#bmenu a,
input[type="button"],
input[type="submit"],
input[type="reset"],
.social,
.banner-mes-informacio,
.singleBanner,
.marc-info-administrativa,
.info-participa-banner,
.col-negocis {
    transition: all 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 3. Link Hover Consistency --- */
a:hover {
    opacity: 0.85;
}

ul.another-webs a:hover,
ul.altres-materies li a:hover,
#contactDetails ul li a:hover {
    color: #ED1F33;
    opacity: 1;
}

/* --- 4. Navigation Menu Polish --- */
#bmenu a {
    border-bottom: 3px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
}

#bmenu a:hover {
    border-bottom: 3px solid #ED1F33;
    background-image: none;
    background-color: transparent;
}

/* --- 5. Cards & Box Shadows (softer, modern) --- */
.marcfinestra,
.marcfinestra2,
.rowCartellera,
.marc-info-administrativa,
.marc-banners-informacio-administrativa,
.marc-serveis-ciutat,
.noticia_foto,
.info-participa-banner,
.banner-pobles-ciutat,
.info-general-ciutat,
div#cartellera {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}

/* Subtle lift on hover for interactive cards */
.singleBanner:hover,
.banner-mes-informacio:hover,
.marc-info-administrativa:hover,
.info-participa-banner:hover,
.follow-no-social:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

/* --- 6. Buttons (interactive hover) --- */
input[type="button"],
input[type="submit"],
input[type="reset"] {
    transition: background-color 0.3s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
    cursor: pointer;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: #c91a2b;
    transform: scale(1.015);
}

/* --- 7. Header Bar (depth) --- */
#contenidorcap_text,
div#contenidorcap2 {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* --- 8. Footer (larger text, more breathing room) --- */
#footer {
    padding: 16px 0;
    background: linear-gradient(180deg, #ED1F33 0%, #c91a2b 100%);
}

#contenidorpeu {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
}

#privacitat {
    font-size: 13px;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

#credencials {
    font-size: 13px;
    line-height: 1.6;
}

#credencials p {
    margin: 4px 0;
}

#footer a {
    transition: opacity 0.2s ease;
}

#footer a:hover {
    opacity: 0.8;
}

/* Footer social icons */
#footer .icon-facebook-official,
#footer .icon-twitter {
    font-size: 18px;
    margin-left: 4px;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

#footer .icon-facebook-official:hover,
#footer .icon-twitter:hover {
    transform: scale(1.08);
}

/* --- 9. Search Bar (more prominent, focus glow) --- */
.cercador input[type="text"],
.div-cercador input[type="text"] {
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}

.cercador input[type="text"]:focus,
.div-cercador input[type="text"]:focus {
    border-color: #ED1F33;
    box-shadow: 0 0 0 3px rgba(237, 31, 51, 0.15);
}

/* --- 10. Section Titles (subtle underline accent) --- */
.titolsSeccionsHome {
    position: relative;
    padding-bottom: 6px;
}

.titolsSeccionsHome::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #ED1F33;
    border-radius: 2px;
}

/* --- 11. Service Grid (red boxes) --- */
.taula-n-ciutat-2 {
    border-radius: 6px;
    overflow: hidden;
}

.col-negocis {
    transition: background-color 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease;
    position: relative;
}

.col-negocis:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.col-negocis a {
    transition: opacity 0.2s ease;
}

/* Banners (Turisme, Festa del Renaixement, etc.) */
.singleBanner,
.singleBannerLast {
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.36s ease;
}

.singleBanner:hover,
.singleBannerLast:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Social media icons row */
.social:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Follow-us banners and info banners */
.follow-no-social,
.banner-mes-informacio,
.banner-viulaciutat,
.arees-negocis,
.marc-info-administrativa,
.marc-banners-informacio-administrativa {
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.36s ease;
}

.follow-no-social:hover,
.banner-viulaciutat:hover,
.arees-negocis:hover,
.marc-banners-informacio-administrativa:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* --- 12. Scrollbar Styling (Webkit) --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ED1F33;
}

/* --- 13. Selection Color --- */
::selection {
    background-color: rgba(237, 31, 51, 0.2);
    color: inherit;
}

/* --- 14. Mobile Menu Enhancement --- */
#menu_planB {
    background-color: transparent;
}

#menu_planB a {
    color: #555 !important;
}

#menu_planB_item {
    transition: background-color 0.2s ease;
    color: #555;
    /* fallback */
    border-bottom: 1px solid #ddd;
}

#menu_planB_item:hover {
    background-color: #f5f5f5;
}

/* --- 15. Subtle Background Gradient --- */
html {
    background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 600px);
    background-attachment: fixed;
}

body {
    background-color: transparent;
}

/* --- 16. Image Hover Zoom in Banners --- */
.marcfinestra,
.marcterme {
    overflow: hidden;
}

.marcfinestra img,
.marcterme img {
    transition: transform 0.35s ease;
}

.marcfinestra:hover img,
.marcterme:hover img {
    transform: scale(1.05);
}

/* --- 17. Link Icons & Bullets (red accents) --- */
ul.another-webs li {
    padding-left: 4px;
    border-left: 3px solid transparent;
    margin-bottom: 6px;
    transition: border-color 0.2s ease;
}

ul.another-webs li:hover {
    border-left-color: #ED1F33;
}

ul.another-webs .icon-link-ext {
    color: #ED1F33;
    font-size: 14px;
    margin-right: 4px;
}

/* Also style external links in other lists */
ul.altres-materies li a::before {
    content: '›';
    color: #ED1F33;
    font-weight: bold;
    font-size: 16px;
    margin-right: 5px;
}

/* --- 18. BOTÓ ACCESSIBILITAT (ZOOM INCREMENTAL) --- */
.accessibility-widget-group {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background-color: white;
    border-radius: 30px;
    display: flex;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 999999;
    border: 2px solid #ED1F33;
}

.acc-btn:first-of-type {
    border-top-left-radius: 28px;
    border-bottom-left-radius: 28px;
}

.acc-btn:last-of-type {
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
}

.acc-btn {
    background-color: transparent;
    color: #ED1F33;
    border: none;
    width: 44px;
    height: 44px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
    padding: 0;
    margin: 0;
}

.acc-btn:hover {
    background-color: rgba(237, 31, 51, 0.1);
}

.btn-center {
    border-left: 1px solid #ED1F33 !important;
    border-right: 1px solid #ED1F33 !important;
    font-size: 16px;
    color: #333;
}

.acc-level {
    position: absolute;
    bottom: -22px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    color: #888;
    font-family: 'Inter', sans-serif;
    pointer-events: none;
}

@media (max-device-width: 1024px) {
    .accessibility-widget-group {
        display: none;
    }
}

/* --- 19. Accessibilitat unificada (Variables i Modes) --- */
:root {
    /* Default color scheme */
    --acc-primary: #ED1F33;
    --acc-primary-dark: #c91a2b;
    --acc-primary-light: rgba(237, 31, 51, 0.1);
    --acc-link: #ED1F33;
    --acc-link-hover: #c91a2b;
    --acc-header-text: #ffffff;
    --acc-footer-text: #ffffff;

    /* Widget Variables (Mapped to primary system) */
    --a11y-accent: var(--acc-primary);
    --a11y-accent-dark: var(--acc-primary-dark);
    --a11y-panel-bg: #ffffff;
    --a11y-panel-text: #222222;
    --a11y-panel-border: #d9d9d9;
}

/* Visible keyboard focus without changing mouse interactions */
:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 2px;
}

/* Protanopia Mode (Yellowish) */
body.theme-protanopia {
    --acc-primary: #f1c40f;
    --acc-primary-dark: #d4ac0d;
    --acc-primary-light: rgba(241, 196, 15, 0.1);
    --acc-link: #936a00;
    --acc-link-hover: #7b5900;
    --acc-header-text: #222222;
    /* Dark text for light background */
}

/* Deuteranopia Mode (Darker blue for stronger AA contrast) */
body.theme-deuteranopia {
    --acc-primary: #1b4f72;
    --acc-primary-dark: #154360;
    --acc-primary-light: rgba(27, 79, 114, 0.1);
    --acc-link: #1b4f72;
    --acc-link-hover: #154360;
    --acc-header-text: #ffffff;
}

/* Tritanopia Mode (Darker magenta for stronger AA contrast) */
body.theme-tritanopia {
    --acc-primary: #c2185b;
    --acc-primary-dark: #880e4f;
    --acc-primary-light: rgba(194, 24, 91, 0.1);
    --acc-link: #880e4f;
    --acc-link-hover: #a0144a;
    --acc-header-text: #ffffff;
}

/* High Contrast Mode */
body.theme-high-contrast {
    --acc-primary: #000000;
    --acc-primary-dark: #000000;
    --acc-primary-light: rgba(0, 0, 0, 0.1);
    --acc-link: #000000;
    --acc-link-hover: #000000;
    --acc-header-text: #ffffff;
    --acc-footer-text: #ffffff;

    background-color: #ffffff !important;
}

/* REGLA D'OR: La vora no ha de sumar píxels a l'amplada i eliminem "soroll" visual */
body.theme-high-contrast *,
body.theme-high-contrast *::before,
body.theme-high-contrast *::after {
    box-sizing: border-box !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Apply variables only when an accessibility theme is active */
body.theme-protanopia a,
body.theme-protanopia .titolsSeccionsHome,
body.theme-protanopia .titolsSeccionsHome a,
body.theme-protanopia .titolsSeccionsHome font,
body.theme-protanopia .titolBig,
body.theme-protanopia .titolSmall,
body.theme-protanopia #textseu,
body.theme-protanopia #textagenda,
body.theme-protanopia #textagendac,
body.theme-protanopia #textagendacb,
body.theme-protanopia #textdefensorp,
body.theme-protanopia .bannerfonstext,
body.theme-protanopia .banners4text,
body.theme-protanopia div#marcnomterme a,
body.theme-protanopia div#titolseccio3,
body.theme-protanopia div#titolseccio,
body.theme-deuteranopia a,
body.theme-deuteranopia .titolsSeccionsHome,
body.theme-deuteranopia .titolsSeccionsHome a,
body.theme-deuteranopia .titolsSeccionsHome font,
body.theme-deuteranopia .titolBig,
body.theme-deuteranopia .titolSmall,
body.theme-deuteranopia #textseu,
body.theme-deuteranopia #textagenda,
body.theme-deuteranopia #textagendac,
body.theme-deuteranopia #textagendacb,
body.theme-deuteranopia #textdefensorp,
body.theme-deuteranopia .bannerfonstext,
body.theme-deuteranopia .banners4text,
body.theme-deuteranopia div#marcnomterme a,
body.theme-deuteranopia div#titolseccio3,
body.theme-deuteranopia div#titolseccio,
body.theme-tritanopia a,
body.theme-tritanopia .titolsSeccionsHome,
body.theme-tritanopia .titolsSeccionsHome a,
body.theme-tritanopia .titolsSeccionsHome font,
body.theme-tritanopia .titolBig,
body.theme-tritanopia .titolSmall,
body.theme-tritanopia #textseu,
body.theme-tritanopia #textagenda,
body.theme-tritanopia #textagendac,
body.theme-tritanopia #textagendacb,
body.theme-tritanopia #textdefensorp,
body.theme-tritanopia .bannerfonstext,
body.theme-tritanopia .banners4text,
body.theme-tritanopia div#marcnomterme a,
body.theme-tritanopia div#titolseccio3,
body.theme-tritanopia div#titolseccio,
body.theme-high-contrast a,
body.theme-high-contrast .titolsSeccionsHome,
body.theme-high-contrast .titolsSeccionsHome a,
body.theme-high-contrast .titolsSeccionsHome font,
body.theme-high-contrast .titolBig,
body.theme-high-contrast .titolSmall,
body.theme-high-contrast #textseu,
body.theme-high-contrast #textagenda,
body.theme-high-contrast #textagendac,
body.theme-high-contrast #textagendacb,
body.theme-high-contrast #textdefensorp,
body.theme-high-contrast .bannerfonstext,
body.theme-high-contrast .banners4text,
body.theme-high-contrast div#marcnomterme a,
body.theme-high-contrast div#titolseccio3,
body.theme-high-contrast div#titolseccio {
    color: var(--acc-link) !important;
}

/* Header and Footer Backgrounds */
body.theme-protanopia #footer,
body.theme-protanopia #contenidorcap_text,
body.theme-protanopia div#contenidorcap1,
body.theme-protanopia div#contenidorcap2,
body.theme-protanopia div#contenidortotalcap1,
body.theme-deuteranopia #footer,
body.theme-deuteranopia #contenidorcap_text,
body.theme-deuteranopia div#contenidorcap1,
body.theme-deuteranopia div#contenidorcap2,
body.theme-deuteranopia div#contenidortotalcap1,
body.theme-tritanopia #footer,
body.theme-tritanopia #contenidorcap_text,
body.theme-tritanopia div#contenidorcap1,
body.theme-tritanopia div#contenidorcap2,
body.theme-tritanopia div#contenidortotalcap1,
body.theme-high-contrast #footer,
body.theme-high-contrast #contenidorcap_text,
body.theme-high-contrast div#contenidorcap1,
body.theme-high-contrast div#contenidorcap2,
body.theme-high-contrast div#contenidortotalcap1 {
    background-color: var(--acc-primary) !important;
    background-image: none !important;
}

/* Header and Footer Text (Contrast) */
body.theme-protanopia #contenidorcap_text,
body.theme-protanopia #contenidorcap_text .nomcap,
body.theme-protanopia #idiomescapul li,
body.theme-protanopia #idiomescapul li a,
body.theme-protanopia div#datacap,
body.theme-protanopia #footer,
body.theme-protanopia #footer *,
body.theme-protanopia #privacitat,
body.theme-protanopia #credencials p,
body.theme-deuteranopia #contenidorcap_text,
body.theme-deuteranopia #contenidorcap_text .nomcap,
body.theme-deuteranopia #idiomescapul li,
body.theme-deuteranopia #idiomescapul li a,
body.theme-deuteranopia div#datacap,
body.theme-deuteranopia #footer,
body.theme-deuteranopia #footer *,
body.theme-deuteranopia #privacitat,
body.theme-deuteranopia #credencials p,
body.theme-tritanopia #contenidorcap_text,
body.theme-tritanopia #contenidorcap_text .nomcap,
body.theme-tritanopia #idiomescapul li,
body.theme-tritanopia #idiomescapul li a,
body.theme-tritanopia div#datacap,
body.theme-tritanopia #footer,
body.theme-tritanopia #footer *,
body.theme-tritanopia #privacitat,
body.theme-tritanopia #credencials p,
body.theme-high-contrast #contenidorcap_text,
body.theme-high-contrast #contenidorcap_text .nomcap,
body.theme-high-contrast #idiomescapul li,
body.theme-high-contrast #idiomescapul li a,
body.theme-high-contrast div#datacap,
body.theme-high-contrast #footer,
body.theme-high-contrast #footer *,
body.theme-high-contrast #privacitat,
body.theme-high-contrast #credencials p {
    color: var(--acc-header-text) !important;
}

/* Exception for Footer in non-high-contrast if needed, 
   but user wants drastic change, so primary color is good. */

body.theme-protanopia #footer,
body.theme-deuteranopia #footer,
body.theme-tritanopia #footer,
body.theme-high-contrast #footer {
    background: linear-gradient(180deg, var(--acc-primary) 0%, var(--acc-primary-dark) 100%) !important;
}

/* Overrides to prevent simulation filters from appearing */
body.theme-protanopia,
body.theme-deuteranopia,
body.theme-tritanopia,
body.theme-high-contrast {
    filter: none !important;
}

/* Selection and visual accents */
::selection {
    background-color: var(--acc-primary-light);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--acc-primary);
}

.titolsSeccionsHome::after {
    background-color: var(--acc-primary) !important;
}

/* High Contrast Extra Contrast (Targeted) */
body.theme-high-contrast a {
    text-decoration: underline !important;
}

body.theme-high-contrast .marcterme,
body.theme-high-contrast input,
body.theme-high-contrast .singleBanner,
body.theme-high-contrast .singleBannerLast,
body.theme-high-contrast .div-banners-mes-informacio .marcfinestra,
body.theme-high-contrast .div-social-noSocial .marcfinestra,
body.theme-high-contrast .col-negocis {
    border-color: transparent !important;
    background: #ffffff !important;
    background-image: none !important;
}

body.theme-high-contrast .rowInsideCol .social,
body.theme-high-contrast .rowInsideCol .social *,
body.theme-high-contrast .rowInsideCol .social i,
body.theme-high-contrast .rowInsideCol .social span {
    border: none !important;
}

/* Force text in specific cards to black for readability */
body.theme-high-contrast .banner-mes-informacio *,
body.theme-high-contrast .singleBanner *,
body.theme-high-contrast .singleBannerLast *,
body.theme-high-contrast .col-negocis a,
body.theme-high-contrast .follow-no-social * {
    color: inherit !important;
}

body.theme-high-contrast #bannerText5 {
    color: #000000 !important;
}

/* Force titles and fonts in High Contrast to be Black */
body.theme-high-contrast .titolsSeccionsHome,
body.theme-high-contrast .titolsSeccionsHome font,
body.theme-high-contrast .titolBig,
body.theme-high-contrast .titolSmall,
body.theme-high-contrast font,
body.theme-high-contrast b {
    color: #000 !important;
}

/* Ajust del responsive per a les targetes mòbils en Alt Contrast */
@media (max-width: 760px) {
    body.theme-high-contrast .div-banners-mes-informacio>a {
        /* Reduïm lleugerament per deixar aire per a la vora de 2px */
        width: calc(50% - 8px) !important;
        flex-basis: calc(50% - 8px) !important;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.accessibility-widget-2026 {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999998;
}

.acc-widget-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--a11y-accent);
    color: var(--a11y-accent);
    background: #fff;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 600;
}

.acc-widget-toggle:hover,
.acc-widget-toggle:focus {
    color: #fff;
    background: var(--a11y-accent);
}

.acc-icon {
    width: 18px;
    height: 18px;
}

.acc-dropdown {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: 290px;
    border: 1px solid var(--a11y-panel-border);
    border-radius: 10px;
    background: var(--a11y-panel-bg);
    color: var(--a11y-panel-text);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
}

.acc-dropdown.acc-dropdown-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.acc-dropdown-header {
    background: var(--a11y-accent);
    color: #fff;
    padding: 12px 14px;
    font-weight: 600;
}

.acc-dropdown-section,
.acc-dropdown-footer {
    padding: 12px 14px;
}

.acc-section-title {
    display: block;
    margin-bottom: 10px;
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.acc-font-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.acc-font-btn,
.acc-mode-btn,
.acc-reset-btn {
    border: 1px solid var(--a11y-panel-border);
    background: #fff;
    color: #333;
    border-radius: 8px;
}

.acc-font-btn {
    width: 38px;
    height: 38px;
}

.acc-font-level {
    min-width: 44px;
    text-align: center;
    font-weight: 600;
}

.acc-mode-options {
    display: grid;
    gap: 6px;
}

.acc-mode-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    text-align: left;
}

.acc-mode-btn.acc-mode-active {
    border-color: var(--a11y-accent);
    color: var(--a11y-accent);
    background: rgba(0, 0, 0, 0.03);
}

.acc-mode-btn svg {
    width: 16px;
    height: 16px;
}

.acc-reset-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
}

.campanyes-rotator {
    position: relative;
    width: 146px;
    min-height: 260px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.campanyes-rotator li {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease;
}

.campanyes-rotator li.is-active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.campanyes-rotator li,
.campanyes-rotator li a,
.campanyes-rotator li img {
    display: block;
    width: 146px;
}

.campanyes-pager {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.campanyes-pager-dot {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background: #777;
    padding: 0;
}

.campanyes-pager-dot.is-active {
    background: #000;
}

@media (max-width: 900px) {
    .accessibility-widget-2026 {
        right: 12px;
        bottom: 12px;
    }

    .acc-toggle-text {
        display: none;
    }

    .acc-dropdown {
        width: min(290px, calc(100vw - 24px));
    }
}

/* --- 20. +Informacio responsive fix --- */
.div-banners-mes-informacio {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
    padding-left: 0 !important;
}

.div-banners-mes-informacio>a {
    display: block;
    width: 150px;
    flex: 0 0 150px;
}

.div-banners-mes-informacio .banner-mes-informacio,
.div-banners-mes-informacio .banner-mes-informacio-last {
    float: none !important;
    margin: 0 !important;
    top: 0;
    width: 150px;
}

.div-banners-mes-informacio #banner4ima img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 760px) {
    :root {
        --mobile-card-bg: #eeeeee;
    }

    .div-campanyes {
        width: 146px !important;
        height: auto !important;
        padding-left: 0 !important;
        margin: 28px auto 0 !important;
    }

    .campanyes-rotator {
        margin: 0 auto;
    }

    .home .bx-wrapper {
        width: 146px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 40px !important;
    }

    .home .bx-wrapper .bx-viewport {
        width: 146px !important;
        overflow: hidden !important;
    }

    .div-banners-mes-informacio {
        gap: 10px;
        justify-content: flex-start;
    }

    .div-banners-mes-informacio>a {
        width: calc(50% - 5px);
        flex-basis: calc(50% - 5px);
        max-width: none;
        display: flex;
        justify-content: center;
    }

    .div-banners-mes-informacio .banner-mes-informacio,
    .div-banners-mes-informacio .banner-mes-informacio-last {
        width: 150px;
        height: 105px !important;
    }

    .div-banners-mes-informacio #banner4ima,
    .div-banners-mes-informacio .banners4text {
        width: 146px;
    }

    .rowInsideCol {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4px;
        margin-top: 18px;
    }

    .rowInsideCol .titolCampanyes {
        width: 100%;
        margin-bottom: 2px;
    }

    .rowInsideCol .social {
        float: none;
        margin: 0;
        flex: 0 0 45px;
    }

    .div-social-noSocial {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
    }

    .div-social-noSocial .follow-no-social,
    .div-social-noSocial .follow-no-social-last {
        float: none !important;
        margin: 0 !important;
        width: calc(50% - 5px);
        display: flex;
        justify-content: center;
        background-color: transparent !important;
    }

    .div-social-noSocial .follow-no-social>a,
    .div-social-noSocial .follow-no-social-last>a {
        display: block;
        width: 141px;
    }

    .div-social-noSocial #bannerima img {
        width: 137px;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 460px) {
    .div-banners-mes-informacio>a {
        width: calc(50% - 5px);
        flex-basis: calc(50% - 5px);
    }
}