body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* Accesibilidad: mantener siempre un indicador de foco visible aunque Bootstrap quite outline en algunos controles. */
a:focus,
button:focus,
[role="button"]:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #000 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000 !important;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000 !important;
}

/* Style the header with a grey background and some padding */
.header {
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 20px 10px;
}

    /* Style the header links */
    .header a {
        float: left;
        color: black;
        text-align: center;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        line-height: 25px;
        border-radius: 4px;
    }

        /* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
        .header a.logo {
            font-size: 25px;
            font-weight: bold;
        }

        /* Change the background color on mouse-over */
        .header a:hover {
            background-color: #ddd;
            color: black;
        }

        /* Style the active/current link*/
        .header a.active {
            background-color: dodgerblue;
            color: white;
        }

/* Float the link section to the right */
.header-right {
    float: right;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
    .header a {
        float: none;
        display: block;
        text-align: left;
    }

    .header-right {
        float: none;
    }
}

/* MENÚ CABECERA */
.navbar {
    min-height: 5rem !important;
    z-index: 50 !important;
}

.navbar-right {
    margin-right: 0px !important;
}

.navbar .container {
    padding: 0px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.navbar-brand {
    margin-left: 0px !important;
    padding-left: 0px !important;
}

.navbar-header {
    width: 12% !important;
    overflow: hidden;
}

.navbar-collapse {
    min-width: 88% !important;
    float: left;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-color: #e7e7e7 !important;
    color: #555 !important;
}

/*datepicker*/

input.hasDatepicker {
    cursor: pointer;
}

    input.hasDatepicker + *[class*="fa-calendar"] {
        display: inline-block;
        float: right;
        color: #6c757d; /*#024268;*/
        font-size: 25px;
        margin-top: -30px;
        margin-right: 4px;
    }

.datepicker-dropdown {
    padding: 2px;
}

    .datepicker-dropdown table {
        border-collapse: initial;
    }

    .datepicker-dropdown th,
    .datepicker-dropdown td {
        text-align: center;
    }

    .datepicker-dropdown th {
        color: #024268;
        font-weight: 500;
    }

    .datepicker-dropdown tbody td {
        padding: 2px;
        margin: 2px;
        width: 32px;
        cursor: pointer;
    }

        .datepicker-dropdown tbody td.today.day {
            background-image: none;
            background-color: #024268;
            color: #fff;
        }

        .datepicker-dropdown tbody td.active.day {
            background-image: none;
            background-color: #1E9CD8;
        }

        .datepicker-dropdown tbody td.old.day,
        .datepicker-dropdown tbody td.new.day {
            background-image: none;
            background-color: #f4f4f4;
        }

.appCustomdDatepickerImage {
    display: none;
}


/* Accesibilidad: contrastes mínimos WCAG AA para enlaces, formularios y foco visible. */
#main-content a:not(.btn):not(.icon),
.mainBox a:not(.btn):not(.icon),
#faqs .panel-body a,
.panel-body a {
    color: #000000 !important;
}

#main-content a:not(.btn):not(.icon):hover,
#main-content a:not(.btn):not(.icon):focus,
.mainBox a:not(.btn):not(.icon):hover,
.mainBox a:not(.btn):not(.icon):focus,
#faqs .panel-body a:hover,
#faqs .panel-body a:focus,
.panel-body a:hover,
.panel-body a:focus {
    color: #000000 !important;
    text-decoration: underline;
}

#main-content label,
#main-content .control-label,
#main-content .form-group label,
#main-content .text-primary,
#main-content .text-info,
.mainBox label,
.mainBox .control-label,
.mainBox .form-group label,
.mainBox .text-primary,
.mainBox .text-info {
    color: #000000 !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: #6C757D !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #595959 !important;
    opacity: 1;
}

.custom-control-label::before,
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
    border: 2px solid #6C757D !important;
}

/* El título/enlace del portal debe poder crecer cuando el usuario aplica el
   espaciado WCAG (interlineado, palabras y caracteres) sin quedar recortado. */
#wrapper .zbe-portalTitle,
#wrapper .zbe-portalTitle a,
#wrapper .headerContent .titleSection,
#wrapper .headerContent .titleSection .module-grid h1,
#wrapper .headerContent .titleSection .module-grid h2,
#wrapper .headerContent .titleSection .module-grid h1 a,
#wrapper .headerContent .titleSection .module-grid h2 a {
    height: auto !important;
    max-height: none !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* Login: el ojo se ancla al campo, no a una coordenada fija dependiente del label. */
.password-container {
    width: 100%;
    min-width: 0;
}

.password-container > label {
    display: block;
}

.password-input-control {
    position: relative;
    width: 100%;
    min-width: 0;
}

.password-input-control #ENT_Password {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-right: 52px;
    box-sizing: border-box;
}

.password-container .toggle-password {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid #00a9b6;
    background: transparent;
    color: #00a9b6 !important;
    line-height: 1;
    transform: none;
    cursor: pointer;
    box-sizing: border-box;
}

.password-container .toggle-password:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.password-container .toggle-password .fa-eye,
.password-container .toggle-password .fa-eye-slash {
    color: currentColor !important;
}

.fa-eye,
.fa-eye-slash,
.icon-eye,
.icon-eye-slash,
[class*="eye"] {
    color: #00a9b6 !important;
}

.bg-monografic,
.btn.bg-monografic,
.btn-outline-primary.bg-monografic,
input[type="submit"].bg-monografic,
button.bg-monografic {
    background-color: #00a9b6 !important;
    border-color: #00a9b6 !important;
    color: #000000 !important;
}

.headerContent .titleSection {
    background-color: #00a9b6 !important;
    padding: 0 !important;
    border-bottom: 1px solid #00565D;
    box-shadow: none !important;
}

.headerContent .titleSection .module-grid {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 5px 10px !important;
    box-sizing: border-box;
}

.headerContent .titleSection .module-grid h1,
.headerContent .titleSection .module-grid h2 {
    margin: 0 !important;
    line-height: 1.3 !important;
}

.headerContent .titleSection,
.headerContent .titleSection .module-grid h1 a,
.headerContent .titleSection .module-grid h2 a,
.headerContent .titleSection .module-grid h1 a strong,
.headerContent .titleSection .module-grid h2 a strong,
.headerContent .titleSection .module-grid .anchor_links .list.inline li a {
    color: #000000 !important;
}

.btn-outline-primary,
a.btn-outline-primary,
button.btn-outline-primary,
input.btn-outline-primary {
    color: #00a9b6 !important;
    border-color: #00a9b6 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
a.btn-outline-primary:hover,
a.btn-outline-primary:focus,
button.btn-outline-primary:hover,
button.btn-outline-primary:focus,
input.btn-outline-primary:hover,
input.btn-outline-primary:focus {
    background-color: #00a9b6 !important;
    border-color: #00a9b6 !important;
    color: #000000 !important;
}

/* Accesibilidad/maquetación: cierre de herramientas con imagen y selector de idioma sin marcador desplazado. */
#wrapper div.headertools article.row {
    position: relative;
}

#wrapper div.headertools {
    position: relative;
    z-index: 260 !important;
}

@media screen and (max-width: 1023px) {
    #wrapper div.headertools article.row:not(.nodisplayed) {
        position: fixed !important;
        top: 105px !important;
        left: 0 !important;
        right: 0 !important;
        display: block !important;
        visibility: visible !important;
        z-index: 260 !important;
        margin: 0 !important;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);
    }

    #wrapper div.headertools article.row.compartir,
    #wrapper div.headertools article.row.idioma {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 105px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 12px 0 16px !important;
    }

    #wrapper div.headertools article.row.compartir .module-grid,
    #wrapper div.headertools article.row.idioma .module-grid {
        position: relative;
        width: 100% !important;
        max-width: 720px;
        margin: 0 auto;
        padding: 36px 48px 0 !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    #wrapper div.headertools article.row .closemenu,
    #wrapper div.headertools article.row:not(.nodisplayed) .closemenu {
        position: absolute !important;
        top: 0;
        right: 16px;
        z-index: 20;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent !important;
        cursor: pointer;
    }

    #wrapper div.headertools article.row.idioma {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #wrapper div.headertools article.row.idioma ul.list {
        display: block !important;
        margin: 0 auto;
        padding: 0;
        width: 100% !important;
        max-width: 584px;
    }

    #wrapper div.headertools article.row.idioma ul.list > li.block {
        display: block !important;
        float: none !important;
        width: 100% !important;
        list-style: none;
        border-bottom: 1px solid #c9c9c9;
        margin: 0 !important;
        padding: 0 !important;
    }

    #wrapper div.headertools article.row.idioma ul.list > li.block:first-child {
        border-top: 1px solid #c9c9c9;
    }

    #wrapper div.headertools article.row.idioma a.icon.idioma,
    #wrapper div.headertools article.row.idioma a.icon.idioma.active {
        position: relative;
        display: block;
        width: 100%;
        min-height: 36px;
        padding: 7px 34px 7px 0;
        line-height: 22px;
        background-image: none !important;
    }

    #wrapper div.headertools article.row.idioma a.icon.idioma.active::before {
        content: none !important;
    }

    #wrapper div.headertools article.row.idioma a.icon.idioma.active::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        width: 16px;
        height: 16px;
        border: 5px solid #24aeb7;
        border-radius: 50%;
        background: #fff;
        transform: translateY(-50%);
        box-sizing: border-box;
    }
}

#wrapper div.headertools article.row .closemenu img,
#wrapper #navRD .nav-close-menu img {
    display: block;
    width: 24px;
    height: 24px;
}

#wrapper div.headertools article.row .closemenu .icon.close {
    display: none !important;
}

@media screen and (min-width: 1024px) {
    #wrapper div.headertools article.row:not(.nodisplayed) {
        position: fixed !important;
        top: 152px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 260 !important;
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 110px;
        overflow: visible !important;
        margin-top: 0 !important;
        padding: 30px 0 28px 0 !important;
        background: #f5f5f5;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.12);
    }

    #wrapper div.headertools article.row .module-grid {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 132px 0 48px !important;
    }

    #wrapper div.headertools article.row .closemenu {
        position: absolute !important;
        top: 50%;
        right: 36px;
        z-index: 20;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        padding: 0;
        background: transparent !important;
        border: 0;
        cursor: pointer;
        transform: translateY(-50%);
    }

    #wrapper div.headertools article.row .closemenu img {
        width: 28px;
        height: 28px;
    }

    #wrapper div.headertools article.row.compartir,
    #wrapper div.headertools article.row.idioma {
        overflow: visible !important;
    }

    #wrapper div.headertools article.row.compartir ul.list,
    #wrapper div.headertools article.row.idioma ul.list {
        display: flex !important;
        align-items: stretch;
        width: 100% !important;
        max-width: none;
        margin: 0 auto;
        padding: 0;
        overflow: visible !important;
    }

    #wrapper div.headertools article.row.compartir ul.list > li.block,
    #wrapper div.headertools article.row.idioma ul.list > li.block {
        display: block !important;
        float: none !important;
        width: 25% !important;
        list-style: none;
        margin: 0 !important;
        padding: 0 14px !important;
        border-top: 1px solid #c9c9c9;
        border-bottom: 1px solid #c9c9c9;
        box-sizing: border-box;
    }

    #wrapper div.headertools article.row.compartir ul.list > li.block + li.block,
    #wrapper div.headertools article.row.idioma ul.list > li.block + li.block {
        margin-left: 16px !important;
    }

    #wrapper div.headertools article.row.idioma a.icon.idioma,
    #wrapper div.headertools article.row.idioma a.icon.idioma.active {
        position: relative;
        display: block;
        width: 100%;
        min-height: 42px;
        padding: 10px 34px 10px 0;
        line-height: 22px;
        background-image: none !important;
        box-sizing: border-box;
    }

    #wrapper div.headertools article.row.compartir ul.list > li.block > a {
        position: relative;
        display: block;
        width: 100%;
        min-height: 42px;
        padding: 10px 34px 10px 0;
        line-height: 22px;
        background-repeat: no-repeat !important;
        background-position: right center !important;
        background-size: 18px 18px;
        box-sizing: border-box;
    }

    #wrapper div.headertools article.row.compartir a.icon.xarxes.fb {
        background-image: url("/Content/images/assets/ico-facebook.png") !important;
    }

    #wrapper div.headertools article.row.compartir a.icon.xarxes.ld {
        background-image: url("/Content/images/assets/ico-ld.png") !important;
    }

    #wrapper div.headertools article.row.compartir a.icon.xarxes.tw {
        background-image: url("/Content/images/assets/ico-twi.png") !important;
    }

    #wrapper div.headertools article.row.compartir a.icon.xarxes.wa {
        background-image: url("/Content/images/assets/ico-what.png") !important;
    }

    #wrapper div.headertools article.row.idioma a.icon.idioma.active::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        width: 16px;
        height: 16px;
        border: 5px solid #000000;
        border-radius: 50%;
        background: #fff;
        transform: translateY(-50%);
        box-sizing: border-box;
    }

}

#wrapper #navRD .nav-close-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 12px auto;
    padding: 0;
    background: transparent !important;
    border: 0;
    position: relative;
    z-index: 30;
}

#wrapper #navRD .toolsBar .nav-close-menu + hr {
    margin-top: 0;
}

#wrapper > #navRD > .toolsList > .list.block.tools > li[data-service-type="share"] > i,
#wrapper > #navRD > .toolsList > .list.block.tools > li[data-service-type="idioma"] > i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    box-sizing: border-box;
}

#wrapper #navRD .toolsList > .nav-close-menu {
    position: sticky;
    top: 12px;
    margin-left: 12px;
}

#wrapper #navRD:not(.displayed) {
    visibility: hidden;
}

#wrapper #navRD.displayed {
    visibility: visible;
}

html,
body {
    overflow-x: hidden !important;
}

/* Carrusel de inicio: evita que el foco de las flechas pinte una línea a toda altura
   y hace que los slogans se ajusten al ancho real del slide. */
#carouselControls {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

#carouselControls .carousel-inner {
    overflow: hidden;
}

#carouselControls .carousel-item > .slogan {
    height: clamp(300px, 32vw, 500px) !important;
    position: relative;
    box-sizing: border-box;
}

#carouselControls .carousel-item > .slogan p {
    width: min(58%, 720px);
    max-width: calc(100% - 120px);
    margin: 0;
    padding: clamp(55px, 7vw, 100px) 7% 60px 0 !important;
    box-sizing: border-box;
}

#carouselControls .carousel-item > .slogan p span {
    display: block;
    clear: both;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.15;
    box-sizing: border-box;
}

#carouselControls .carousel-caption {
    top: auto !important;
    right: 0;
    bottom: 36px;
    left: 0;
    height: auto !important;
    padding: 0;
    pointer-events: none;
}

#carouselControls .carousel-caption a {
    pointer-events: auto;
}

#carouselControls .mas-info-link {
    display: inline-block;
    padding: 0;
    background: transparent !important;
}

#carouselControls .mas-info-link a {
    display: inline-block;
    padding: 4px 10px;
    background: #000000 !important;
    color: #fff !important;
    border-radius: 4px;
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none !important;
    text-shadow: none !important;
}

#carouselControls .mas-info-link a:hover,
#carouselControls .mas-info-link a:focus,
#carouselControls .mas-info-link a:focus-visible {
    color: #fff !important;
    background: #003F45 !important;
    text-decoration: underline !important;
}

#carouselControls #presentacio6Info {
    display: block;
    width: 100%;
    background: transparent !important;
    text-align: center;
}

#carouselControls #presentacio6Info a,
#carouselControls #presentacio6Info a:hover,
#carouselControls #presentacio6Info a:focus,
#carouselControls #presentacio6Info a:focus-visible {
    color: #fff !important;
}

#carouselControls #presentacio6 p {
    width: min(54%, 660px);
    padding-right: 7.5% !important;
}

#carouselControls #presentacio6 p span {
    font-size: clamp(22px, 2vw, 30px) !important;
}

#carouselControls #presentacioFiraries p {
    width: min(44%, 560px);
    padding-top: clamp(70px, 6.5vw, 95px) !important;
    padding-right: 7% !important;
}

#carouselControls #presentacioFiraries p span {
    max-width: min(34vw, 480px);
    font-size: clamp(20px, 1.75vw, 27px) !important;
}

#carouselControls #presentacioTuristas p {
    width: min(50%, 620px);
    padding-top: clamp(70px, 6.5vw, 95px) !important;
    padding-right: 7% !important;
}

#carouselControls #presentacioTuristas p span {
    max-width: min(40vw, 540px);
    font-size: clamp(20px, 1.85vw, 28px) !important;
}

#carouselControls .carousel-control-prev,
#carouselControls .carousel-control-next {
    width: 8%;
    opacity: 1;
}

    #carouselControls .carousel-control-prev-icon,
    #carouselControls .carousel-control-next-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #000000;
        background-size: 55% 55%;
    }

#carouselControls .carousel-control-prev:focus,
#carouselControls .carousel-control-next:focus,
#carouselControls .carousel-control-prev:focus-visible,
#carouselControls .carousel-control-next:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

#carouselControls .carousel-control-prev:focus .carousel-control-prev-icon,
#carouselControls .carousel-control-next:focus .carousel-control-next-icon,
#carouselControls .carousel-control-prev:focus-visible .carousel-control-prev-icon,
#carouselControls .carousel-control-next:focus-visible .carousel-control-next-icon {
    outline: 3px solid #000 !important;
    outline-offset: 4px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000 !important;
}

@media (max-width: 991.98px) {
    #carouselControls .carousel-item > .slogan {
        height: clamp(260px, 48vw, 420px) !important;
    }

    #carouselControls .carousel-item > .slogan p {
        width: min(70%, 620px);
        max-width: calc(100% - 80px);
        padding: 42px 8% 54px 0 !important;
    }

    #carouselControls .carousel-control-prev,
    #carouselControls .carousel-control-next {
        width: 12%;
    }
}

/* El carrusel forma parte del contenido de inicio también en móvil y tableta. */
@media (max-width: 1024px) {
    article .article-grid.bgGrey.hideCarru {
        display: block !important;
    }
}

/* En tableta se conserva la franja de sección y el carrusel horizontal; en
   móvil ambos pasan a una composición apilada sin superposiciones. */
@media (min-width: 701px) and (max-width: 1100px) {
    .headerContent .titleSection.menufixed:not(.scrolled) {
        position: fixed !important;
        top: 105px !important;
        width: 100%;
    }

    .headerContent .titleSection.menufixed.scrolled {
        position: fixed !important;
        top: 0 !important;
        width: 100%;
    }

    #mainWrapper.inicio {
        padding-top: 60px !important;
    }

    #carouselControls .carousel-item > .slogan {
        height: clamp(330px, 35vw, 370px) !important;
        background-size: 100% auto !important;
        background-position: center top !important;
    }

    #carouselControls .carousel-item > .slogan p,
    #carouselControls #presentacio6 p,
    #carouselControls #presentacioFiraries p,
    #carouselControls #presentacioTuristas p {
        float: right !important;
        width: 55% !important;
        max-width: 55% !important;
        margin: 0 !important;
        padding: 14px 5% 58px 0 !important;
    }

    #carouselControls .carousel-item > .slogan p span,
    #carouselControls #presentacio6 p span,
    #carouselControls #presentacioFiraries p span,
    #carouselControls #presentacioTuristas p span {
        float: right !important;
        width: auto;
        max-width: 100% !important;
        margin-bottom: 4px;
        padding: 3px 8px;
        font-size: clamp(16px, 1.7vw, 18px) !important;
        line-height: 1.1;
        text-align: right !important;
    }

    #carouselControls .carousel-control-prev,
    #carouselControls .carousel-control-next {
        align-items: flex-start;
        padding-top: clamp(70px, 11vw, 105px);
        box-sizing: border-box;
    }

    #carouselControls .carousel-item > .slogan p span.mb,
    #carouselControls #presentacio6 p span.mb,
    #carouselControls #presentacioFiraries p span.mb,
    #carouselControls #presentacioTuristas p span.mb {
        margin-bottom: 10px !important;
    }

    #carouselControls #presentacio3,
    #carouselControls #presentacio4,
    #carouselControls #presentacio5,
    #carouselControls #presentacioTuristas,
    #carouselControls #presentacioFiraries {
        background-color: #7EC5CB;
    }

    #carouselControls #presentacio6 {
        background-color: #2B3455;
    }
}

@media (min-width: 701px) and (max-width: 860px) {
    .headerContent .titleSection.menufixed:not(.scrolled) {
        top: 115px !important;
    }

    #carouselControls {
        margin-top: 60px;
    }

    #carouselControls .carousel-item > .slogan p,
    #carouselControls #presentacio6 p,
    #carouselControls #presentacioFiraries p,
    #carouselControls #presentacioTuristas p {
        width: 58% !important;
        max-width: 58% !important;
        padding-right: 52px !important;
    }

    #carouselControls .carousel-control-prev,
    #carouselControls .carousel-control-next {
        width: 8%;
    }
}

@media (max-width: 700px) {
    .headerContent .titleSection.menufixed:not(.scrolled) {
        position: fixed !important;
        top: 115px !important;
        width: 100%;
    }

    .headerContent .titleSection.menufixed.scrolled {
        position: fixed !important;
        top: 0 !important;
        width: 100%;
    }

    #mainWrapper.inicio {
        padding-top: 60px !important;
    }

    #carouselControls {
        margin-top: 60px;
    }

    #carouselControls {
        width: 100%;
        max-width: 720px;
    }

    #carouselControls .carousel-item > .slogan {
        height: auto !important;
        min-height: clamp(430px, 78vw, 600px);
        background-size: 100% auto !important;
        background-position: center top !important;
    }

    #carouselControls .carousel-item > .slogan p,
    #carouselControls #presentacio6 p,
    #carouselControls #presentacioFiraries p,
    #carouselControls #presentacioTuristas p {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: clamp(140px, 36vw, 300px) 48px 72px !important;
    }

    #carouselControls .carousel-item > .slogan p span,
    #carouselControls #presentacio6 p span,
    #carouselControls #presentacioFiraries p span,
    #carouselControls #presentacioTuristas p span {
        float: none !important;
        width: 100%;
        max-width: 100% !important;
        margin-bottom: 6px;
        padding: 4px 10px;
        font-size: clamp(17px, 3vw, 21px) !important;
        line-height: 1.1;
        text-align: center !important;
    }

    #carouselControls .carousel-caption.d-none {
        display: block !important;
        bottom: 14px;
    }

    #carouselControls .carousel-control-prev,
    #carouselControls .carousel-control-next {
        align-items: flex-start;
        padding-top: clamp(38px, 12vw, 105px);
        box-sizing: border-box;
    }
}

@media (max-width: 700px) {
    .headerContent .titleSection {
        margin-top: 0 !important;
    }

    .headerContent .titleSection .module-grid {
        min-height: 42px;
        padding: 5px 16px !important;
    }

    .headerContent .titleSection .module-grid h1 a,
    .headerContent .titleSection .module-grid h2 a {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    #carouselControls .carousel-item > .slogan {
        height: auto !important;
        min-height: clamp(430px, 78vw, 560px);
        background-size: 100% auto !important;
        background-position: center top !important;
    }

    #carouselControls .carousel-item > .slogan p,
    #carouselControls #presentacio6 p,
    #carouselControls #presentacioFiraries p,
    #carouselControls #presentacioTuristas p {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(130px, 36vw, 260px) 44px 68px !important;
    }

    #carouselControls .carousel-item > .slogan p br {
        display: none;
    }

    #carouselControls .carousel-item > .slogan p span,
    #carouselControls #presentacio6 p span,
    #carouselControls #presentacioFiraries p span,
    #carouselControls #presentacioTuristas p span {
        float: none !important;
        width: 100%;
        font-size: clamp(16px, 4.5vw, 19px) !important;
        text-align: center !important;
    }

    #carouselControls .carousel-caption {
        bottom: 16px;
    }

    #carouselControls .carousel-control-prev,
    #carouselControls .carousel-control-next {
        align-items: flex-start;
        padding-top: clamp(38px, 12vw, 92px);
        box-sizing: border-box;
    }

    #carouselControls #presentacio3,
    #carouselControls #presentacio4,
    #carouselControls #presentacio5,
    #carouselControls #presentacioTuristas,
    #carouselControls #presentacioFiraries {
        background-color: #7EC5CB;
    }

    #carouselControls #presentacio6 {
        background-color: #2B3455;
    }
}

/* Herramientas de cabecera: una única lista semántica y disposición flexible
   para que idioma y compartir no se solapen al ampliar texto o reducir ancho. */
#wrapper > header .header-tools-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 55px;
}

#wrapper > header > .module-grid:first-child .logo {
    display: flex;
    align-items: center;
    min-width: 250px;
    min-height: 55px;
    overflow: visible;
}

#wrapper > header > .module-grid:first-child .zbe-portalTitle {
    width: 250px;
    height: 37px;
    margin: 0 !important;
    overflow: visible;
}

#wrapper > header > .module-grid:first-child .zbe-portalTitle a,
#wrapper > header.fixed > .module-grid:first-child .zbe-portalTitle a {
    display: block;
    width: 250px !important;
    height: 37px !important;
    background-size: contain !important;
    background-position: left center !important;
}

#wrapper > header .header-tools-list > li {
    display: flex;
    align-items: center;
    height: 55px;
}

@media (min-width: 861px) {
    #wrapper > header > .module-grid:first-child {
        display: grid !important;
        grid-template-columns: minmax(250px, 1fr) auto;
        align-items: center;
        width: 96%;
        height: 55px !important;
        min-height: 55px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    #wrapper > header > .module-grid:first-child .logo {
        height: 55px;
    }

    #wrapper > header > .module-grid:first-child .zbe-portalTitle {
        padding: 0 !important;
    }

    #wrapper > header > .module-grid:first-child #btnBurger {
        display: none !important;
    }

    #wrapper > header > .module-grid:first-child .header-tools-list {
        display: flex !important;
        min-height: 55px;
    }

    #wrapper > header > .module-grid:first-child .header-tools-list a.icon.lang {
        height: 55px;
        line-height: 55px !important;
    }

    #wrapper > header > .module-grid:first-child .header-tools-list a.icon-share {
        display: inline-flex !important;
        width: 55px;
        height: 55px;
    }

    #wrapper > header > .module-grid.segSec {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        height: 50px !important;
        min-height: 50px;
        box-sizing: border-box;
    }

    #wrapper > header > .module-grid.segSec .zbe-pageTitle {
        flex: 0 1 auto;
        white-space: nowrap;
    }

    #wrapper > header > .module-grid.segSec .menu-nav {
        display: flex !important;
        flex: 0 1 auto;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        margin-left: auto;
    }

    .headerContent .titleSection.menufixed:not(.scrolled) {
        top: 105px !important;
    }

    .headerContent .titleSection.menufixed.scrolled {
        top: 0 !important;
    }
}

@media (min-width: 861px) and (max-width: 1100px) {
    #wrapper > header > .module-grid.segSec {
        gap: 8px;
    }

    #wrapper > header > .module-grid.segSec .zbe-pageTitle a {
        font-size: 18px !important;
    }

    #wrapper > header > .module-grid.segSec .menu-nav li a {
        padding: 10px 8px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    #wrapper > header > .module-grid.segSec .menu-nav li:last-child a:not(.cerrar-sesion) {
        margin: 7px 0 0 5px !important;
        padding: 5px 12px !important;
    }
}

/* Icono gráfico sin espacio interno del glifo: queda centrado de forma estable
   tanto en escritorio como en móvil y conserva un área táctil suficiente. */
#wrapper > header .header-tools-list a.icon-share {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 !important;
    color: transparent !important;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    background-image: url("images/assets/icona-compartir.png") !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    background-size: 24px 24px !important;
    box-sizing: border-box;
}

#wrapper > header .header-tools-list a.icon-share::after {
    content: none !important;
    display: none !important;
}

#wrapper > header .module-grid,
#wrapper > header .segSec,
#wrapper > header .menu-nav {
    min-width: 0;
    height: auto !important;
}

#wrapper > header .menu-nav {
    display: flex;
    flex-wrap: wrap;
}

#navRD[aria-hidden="true"] {
    display: none !important;
}

.color-monografic,
#main-content a.color-monografic,
.mainBox a.color-monografic {
    color: #00a9b6 !important;
}

#main-content a.color-monografic:hover,
#main-content a.color-monografic:focus,
.mainBox a.color-monografic:hover,
.mainBox a.color-monografic:focus {
    color: #00565D !important;
}

@media (max-width: 767.98px) {
    #wrapper > header .header-tools-list,
    #wrapper > header .menu-nav {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 860px) {
    #wrapper > #navRD.closing {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #wrapper > header > .module-grid:first-child {
        position: relative;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        width: 100% !important;
        min-height: 55px;
        padding: 0 16px !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    #wrapper > header > .module-grid:first-child .logo {
        display: flex !important;
        align-items: center;
        gap: 8px;
        min-width: 0;
        min-height: 55px;
        overflow: hidden;
    }

    #wrapper > header > .module-grid:first-child #btnBurger {
        position: relative !important;
        float: none !important;
        flex: 0 0 36px;
        width: 36px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #wrapper > header > .module-grid:first-child #btnBurger::after {
        top: 0 !important;
        line-height: 44px !important;
        background-position: 50% 50% !important;
        background-size: 24px 24px !important;
    }

    #wrapper > header > .module-grid:first-child .zbe-portalTitle,
    #wrapper > header > .module-grid:first-child .zbe-portalTitle a,
    #wrapper > header.fixed > .module-grid:first-child .zbe-portalTitle a {
        flex: 0 1 220px;
        width: min(220px, calc(100vw - 190px)) !important;
        min-width: 150px;
        height: 33px !important;
        padding: 0 !important;
    }

    #wrapper > header > .module-grid .header-tools-list {
        position: static;
        z-index: 30;
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 2px;
        min-height: 44px;
        transform: none;
    }

    #wrapper > header > .module-grid .header-tools-list > li {
        display: block !important;
        float: none !important;
        height: 44px;
        margin: 0 !important;
        padding: 0 !important;
    }

    #wrapper > header > .module-grid .header-tools-list a.icon.lang {
        min-width: 86px;
        height: 44px;
        padding: 0 8px;
        font-size: 14px;
        line-height: 44px;
    }

    #wrapper > header > .module-grid .header-tools-list a.icon-share {
        display: inline-flex !important;
        width: 44px;
        height: 44px;
        overflow: hidden;
        color: transparent !important;
        font-size: 0;
        text-indent: -9999px;
    }

    #wrapper > header > .module-grid.segSec {
        width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    #wrapper > header > .module-grid.segSec .menu-nav {
        display: none !important;
    }

    #wrapper div.headertools article.row.compartir:not(.nodisplayed) .closemenu {
        position: absolute !important;
        top: 10px;
        right: 14px;
        z-index: 20;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent !important;
    }

    #wrapper div.headertools article.row.compartir ul.list {
        display: flex !important;
        flex-wrap: wrap;
        width: 100% !important;
        margin: 0 auto;
        padding: 58px 24px 18px;
        box-sizing: border-box;
    }

    #wrapper div.headertools article.row.compartir ul.list > li.block {
        display: block !important;
        float: none !important;
        width: 50% !important;
        margin: 0 !important;
        padding: 0 8px !important;
        list-style: none;
        box-sizing: border-box;
    }

    #wrapper div.headertools article.row.compartir ul.list > li.block > a {
        display: block;
        min-height: 44px;
        padding: 10px 36px 10px 8px;
        background-position: right center !important;
        background-repeat: no-repeat !important;
        background-size: 20px 20px !important;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    #wrapper > header > .module-grid .header-tools-list > li:first-child {
        display: none !important;
    }

    #wrapper > header > .module-grid:first-child .zbe-portalTitle,
    #wrapper > header > .module-grid:first-child .zbe-portalTitle a,
    #wrapper > header.fixed > .module-grid:first-child .zbe-portalTitle a {
        width: min(220px, calc(100vw - 120px)) !important;
    }
}

@media (max-width: 420px) {

    #wrapper > header > .module-grid:first-child .logo {
        min-width: 205px;
    }

    #wrapper > header > .module-grid:first-child .zbe-portalTitle,
    #wrapper > header > .module-grid:first-child .zbe-portalTitle a,
    #wrapper > header.fixed > .module-grid:first-child .zbe-portalTitle a {
        width: min(205px, calc(100vw - 112px)) !important;
        min-width: 120px;
        height: 30px !important;
    }

    #wrapper div.headertools article.row.compartir ul.list > li.block {
        width: 100% !important;
    }
}

/* Contraste WCAG AA. Estas reglas se cargan después de los estilos históricos
   y evitan combinaciones de turquesa sobre blanco o turquesa sobre turquesa. */
body,
#main-content,
.mainBox,
.zbe-tarjetas,
.zbe-form,
.zbe-login {
    color: #212529;
}

.zbe-tarjetas .nav-tabs .nav-link,
.zbe-tarjetas .nav-item:link .nav-link {
    background-color: #fff !important;
    color: #00565D !important;
    border-color: #6C757D !important;
    font-weight: 600;
}

.zbe-tarjetas .nav-tabs .nav-link.active,
.zbe-tarjetas .nav-tabs .nav-link:hover,
.zbe-tarjetas .nav-tabs .nav-link:focus,
.zbe-tarjetas .nav-item:hover .nav-link,
.zbe-tarjetas .nav-item:active .nav-link {
    background-color: #00a9b6 !important;
    border-color: #00a9b6 !important;
    color: #000000 !important;
}

.text-muted,
.text-secondary,
.help-block,
.form-text,
small.text-muted,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-results__option,
.select2-results__message {
    color: #595959 !important;
    opacity: 1 !important;
}

.text-danger,
.validation-summary-errors,
.field-validation-error,
[role="alert"].text-danger {
    color: #B00020 !important;
}

.form-control:disabled,
.form-control[readonly],
input:disabled,
select:disabled,
textarea:disabled,
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #E9ECEF !important;
    color: #495057 !important;
    opacity: 1 !important;
}

footer nav.coorp.amb .list.inline li a,
#wrapper > footer a {
    color: #4B433D !important;
    opacity: 1 !important;
}

footer nav.coorp.amb .list.inline li a:hover,
footer nav.coorp.amb .list.inline li a:focus,
#wrapper > footer a:hover,
#wrapper > footer a:focus {
    color: #211E1B !important;
    text-decoration: underline;
}

/* Botones turquesa claro con texto negro para mantener contraste AA. */
.zbe-login .btn,
.zbe-form .btn,
.button.big,
button.bg-monografic,
input.bg-monografic {
    background-color: #00a9b6 !important;
    border-color: #00a9b6 !important;
    color: #000000 !important;
}

.zbe-login .btn:hover,
.zbe-login .btn:focus,
.zbe-form .btn:hover,
.zbe-form .btn:focus,
.button.big:hover,
.button.big:focus {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #fff !important;
}

/* Preguntas frecuentes: fondo negro con texto e indicador blancos. */
#preguntesFrequents .panel-heading .panel-title button:hover,
#preguntesFrequents .panel-heading .panel-title button:focus,
#preguntesFrequents .panel-heading .panel-title button[aria-expanded="true"],
#faqs .panel-heading .panel-title button:hover,
#faqs .panel-heading .panel-title button:focus,
#faqs .panel-heading .panel-title button[aria-expanded="true"] {
    background-color: #000 !important;
    color: #fff !important;
}

#preguntesFrequents .panel-heading .panel-title button:hover span::after,
#preguntesFrequents .panel-heading .panel-title button:focus span::after,
#preguntesFrequents .panel-heading .panel-title button[aria-expanded="true"] span::after,
#faqs .panel-heading .panel-title button:hover span::after,
#faqs .panel-heading .panel-title button:focus span::after,
#faqs .panel-heading .panel-title button[aria-expanded="true"] span::after {
    color: #fff !important;
}

#preguntesFrequents .panel-heading .panel-title button:focus-visible,
#faqs .panel-heading .panel-title button:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* FAQs: alinea el título y el indicador +/- sin solaparlos en pantallas pequeñas. */
@media (max-width: 767.98px) {
    #preguntesFrequents .panel-heading .panel-title button,
    #faqs .panel-heading .panel-title button {
        position: relative;
        display: block;
        min-height: 54px;
        padding: 13px 52px 13px 18px !important;
        font-size: 20px !important;
        line-height: 1.35;
        text-align: left !important;
        box-sizing: border-box;
    }

    #preguntesFrequents .panel-heading .panel-title button span,
    #faqs .panel-heading .panel-title button span {
        position: absolute;
        top: 50%;
        right: 14px;
        display: inline-flex;
        float: none;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        line-height: 1;
        transform: translateY(-50%);
    }

    #preguntesFrequents .panel-heading .panel-title button span::after,
    #faqs .panel-heading .panel-title button span::after {
        display: block;
        font-size: 22px;
        line-height: 1;
    }
}

/* Contacto tiene fondo gris oscuro. Se evita que la regla general de enlaces
   aplique el verde destinado a fondos blancos. */
#main-content #contacte a,
#contacte dd a,
#contacte .avisoCoronavirus a {
    color: #fff !important;
    opacity: 1 !important;
    text-decoration: underline;
    text-decoration-thickness: .1em;
    text-underline-offset: .15em;
}

#main-content #contacte a:hover,
#main-content #contacte a:focus,
#contacte dd a:hover,
#contacte dd a:focus {
    background-color: #fff !important;
    color: #000 !important;
    text-decoration: underline;
}

#contacte ul.block li.slideanim:first-child > a:hover dl,
#contacte ul.block li.slideanim:first-child > a:focus dl {
    background-color: #fff !important;
    border-color: #fff !important;
}

#contacte ul.block li.slideanim:first-child > a:hover dd,
#contacte ul.block li.slideanim:first-child > a:focus dd {
    color: #000 !important;
}

/* Acceso de usuarios de la cabecera: negro sobre #00a9b6. */
#wrapper > header > .segSec .menu-nav li:last-child a:not(.cerrar-sesion) {
    background-color: #00a9b6 !important;
    border-color: #00a9b6 !important;
    color: #000000 !important;
}

#wrapper > header > .segSec .menu-nav li:last-child a:not(.cerrar-sesion):hover,
#wrapper > header > .segSec .menu-nav li:last-child a:not(.cerrar-sesion):focus {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

/* Los pictogramas de contacto proceden de SVG oscuros (#00a9b6). Sobre el
   fondo #333 se muestran en blanco para superar el contraste no textual 3:1. */
#contacte .contacto-www,
#contacte .contacto-direccion,
#contacte .contacto-tfno {
    filter: brightness(0) invert(1) !important;
}

#contacte dl.withicon,
#contacte dl.withicon dd,
#contacte dl.withicon dd span {
    color: #fff !important;
    opacity: 1 !important;
}

#contacte ul.block li.slideanim:first-child dl {
    border-color: #fff !important;
}

/* Utilidades de cabecera sobre fondo blanco. Se evita el azul Bootstrap
   #007bff (3,98:1) en los controles de idioma y compartir. */
.header-tools-list a,
.header-tools-list a:visited {
    color: #00565D !important;
}

.header-tools-list a:hover,
.header-tools-list a:focus {
    color: #003F45 !important;
    text-decoration: underline;
}

/* Contenido de las fichas de autorización. Los estilos antiguos heredaban
   #00a9b6 incluso a párrafos y títulos sobre blanco/gris claro. */
.zbe-tarjetas .tab-content p,
.zbe-tarjetas .tab-content li,
.zbe-tarjetas .tab-content h4,
.zbe-tarjetas .tab-content h5,
.zbe-tarjetas .tab-content label,
.zbe-tarjetas .tab-content .txtGral,
.zbe-tarjetas .container-matricula h5,
.zbe-tarjetas .container-matricula label {
    color: #212529 !important;
}

.zbe-tarjetas .tab-content .color-monografic {
    background-color: transparent !important;
    color: #00565D !important;
}

#mainWrapper .zbe-tarjetas .nav-tabs a.nav-link.active,
#mainWrapper .zbe-tarjetas .nav-tabs a.nav-link:hover,
#mainWrapper .zbe-tarjetas .nav-tabs a.nav-link:focus {
    background-color: #00a9b6 !important;
    border-color: #00a9b6 !important;
    color: #000000 !important;
}

/* Menú responsive consolidado. Estas reglas finales neutralizan los puntos de
   corte históricos que se solapaban entre 861 y 1024 px. */
#wrapper > header > .module-grid:first-child,
#wrapper > header > .module-grid.segSec {
    box-sizing: border-box;
}

#wrapper > header .header-tools-list,
#wrapper > header .header-tools-list > li {
    align-items: center;
}

@media (min-width: 861px) {
    #wrapper > header > .module-grid:first-child {
        display: grid !important;
        grid-template-columns: minmax(250px, 1fr) auto;
        width: 96% !important;
        height: 55px !important;
        min-height: 55px;
        padding: 0 !important;
    }

    #wrapper > header > .module-grid:first-child #btnBurger {
        display: none !important;
    }

    #wrapper > header > .module-grid:first-child .zbe-portalTitle {
        width: 250px !important;
        height: 37px !important;
        padding: 0 !important;
    }

    #wrapper > header > .module-grid:first-child .zbe-portalTitle a {
        width: 250px !important;
        height: 37px !important;
    }

    #wrapper > header > .module-grid:first-child .header-tools-list {
        display: flex !important;
        width: auto !important;
        min-height: 55px;
        margin: 0 !important;
    }

    #wrapper > header > .module-grid.segSec {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 96% !important;
        height: 50px !important;
        min-height: 50px;
        gap: 12px;
    }

    #wrapper > header > .module-grid.segSec .zbe-pageTitle {
        flex: 0 1 auto;
        min-width: 190px;
        white-space: nowrap;
    }

    #wrapper > header > .module-grid.segSec .menu-nav {
        display: flex !important;
        flex: 0 1 auto;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        width: auto !important;
        min-width: 0;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
    }

    /* La cuenta y el cierre de sesión forman una única unidad. El marcado
       histórico usa una lista anidada y, sin este flex, el icono puede saltar
       debajo del nombre y solaparse con la franja de título. */
    #wrapper > header > .module-grid.segSec .menu-nav > li.user-session {
        float: none !important;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 220px;
        margin: 0;
        padding: 0;
    }

    #wrapper > header > .module-grid.segSec .session-actions {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        width: auto !important;
        min-width: 0;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    #wrapper > header > .module-grid.segSec .session-actions > li {
        float: none !important;
        flex: 0 0 auto;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
    }

    #wrapper > header > .module-grid.segSec .session-actions > li:first-child {
        flex: 1 1 auto;
    }

    #wrapper > header > .module-grid.segSec .session-actions a.nombre-usuario,
    #wrapper > header > .module-grid.segSec .session-actions a.cerrar-sesion {
        display: inline-flex !important;
        float: none !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }

    #wrapper > header > .module-grid.segSec .session-actions a.nombre-usuario {
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #wrapper div.headertools article.row:not(.nodisplayed) {
        position: fixed !important;
        top: 150px !important;
        right: 0 !important;
        left: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 150px) !important;
        margin-top: 0;
        padding: 18px 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #f5f5f5;
    }

    #wrapper > header.fixed ~ .headertools article.row:not(.nodisplayed) {
        top: 50px !important;
        max-height: calc(100vh - 50px) !important;
    }

    #wrapper div.headertools article.row:not(.nodisplayed) .module-grid {
        position: relative;
        width: 96% !important;
        max-width: 1200px;
        margin: 0 auto;
        padding: 42px 72px 0 24px !important;
        overflow: visible !important;
    }

    #wrapper div.headertools article.row:not(.nodisplayed) .closemenu {
        position: absolute !important;
        top: 0 !important;
        right: 12px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent !important;
        transform: none !important;
    }

    #wrapper div.headertools article.row.idioma ul.list,
    #wrapper div.headertools article.row.compartir ul.list {
        display: flex !important;
        align-items: stretch;
        width: 100% !important;
        max-width: none;
        margin: 0 !important;
        padding: 0 !important;
    }

    #wrapper div.headertools article.row.idioma ul.list > li.block,
    #wrapper div.headertools article.row.compartir ul.list > li.block {
        display: block !important;
        float: none !important;
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        margin: 0 8px !important;
        padding: 0 12px !important;
        box-sizing: border-box;
    }
}

/* En el escritorio intermedio se compacta el texto antes de llegar al punto
   de corte móvil. Así los enlaces y la sesión permanecen en una sola fila. */
@media (min-width: 1101px) and (max-width: 1600px) {
    #wrapper > header > .module-grid.segSec {
        gap: 8px;
    }

    #wrapper > header > .module-grid.segSec .zbe-pageTitle a {
        font-size: 22px !important;
    }

    #wrapper > header > .module-grid.segSec .menu-nav > li > a {
        padding: 10px 9px !important;
        font-size: 14px !important;
        white-space: nowrap;
    }

    #wrapper > header > .module-grid.segSec .menu-nav > li.linea {
        align-self: center;
        margin-top: 0 !important;
    }

    #wrapper > header > .module-grid.segSec .session-actions a.nombre-usuario {
        max-width: 170px;
        padding: 5px 12px !important;
        font-size: 14px !important;
    }
}

@media (min-width: 861px) and (max-width: 1100px) {
    #carouselControls {
        margin-top: 60px;
    }

    #wrapper > header > .module-grid.segSec {
        gap: 6px;
    }

    #wrapper > header > .module-grid.segSec .zbe-pageTitle {
        min-width: 175px;
    }

    #wrapper > header > .module-grid.segSec .zbe-pageTitle a {
        font-size: 17px !important;
    }

    #wrapper > header > .module-grid.segSec .menu-nav li a {
        padding: 10px 7px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    #wrapper > header > .module-grid.segSec .menu-nav li:last-child a:not(.cerrar-sesion) {
        margin-left: 3px !important;
        padding: 5px 11px !important;
    }

    #wrapper > header > .module-grid.segSec .menu-nav > li.user-session {
        max-width: 145px;
    }
}

@media (max-width: 860px) {
    #wrapper > header > .module-grid:first-child {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        width: 100% !important;
        height: 55px !important;
        min-height: 55px;
        padding: 0 16px !important;
    }

    #wrapper > header > .module-grid:first-child .logo {
        display: flex !important;
        align-items: center;
        gap: 8px;
        min-width: 0;
        height: 55px;
        overflow: hidden;
    }

    #wrapper > header > .module-grid:first-child #btnBurger {
        position: relative !important;
        display: inline-block !important;
        float: none !important;
        flex: 0 0 36px;
        width: 36px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #wrapper > header > .module-grid:first-child #btnBurger::after {
        top: 0 !important;
        height: 44px !important;
        line-height: 44px !important;
        background-position: center !important;
    }

    #wrapper > header > .module-grid:first-child .zbe-portalTitle,
    #wrapper > header > .module-grid:first-child .zbe-portalTitle a {
        width: min(220px, calc(100vw - 190px)) !important;
        min-width: 150px;
        height: 33px !important;
        padding: 0 !important;
    }

    #wrapper > header > .module-grid:first-child .header-tools-list {
        position: static !important;
        display: flex !important;
        flex-wrap: nowrap;
        width: auto !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    #wrapper > header > .module-grid:first-child .header-tools-list > li:last-child {
        display: none !important;
    }

    #wrapper > header > .module-grid.segSec {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        min-height: 50px;
        padding: 0 16px !important;
    }

    #wrapper > header > .module-grid.segSec .menu-nav {
        display: none !important;
    }

    #wrapper > #navRD.displayed {
        display: block !important;
        visibility: visible !important;
        left: 0 !important;
        width: min(90vw, 377px) !important;
        max-width: 377px;
        height: 100vh;
        overflow: hidden;
    }

    #wrapper > #navRD.displayed .toolsList {
        max-width: calc(100vw - 60px);
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #wrapper > #navRD.displayed #toolsBar {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        z-index: 90 !important;
        width: 72px !important;
        height: 72px !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #f5f5f5 !important;
    }

    #wrapper > #navRD.displayed.compressed #toolsBar {
        display: none !important;
    }

    #wrapper > #navRD.displayed #toolsBar > hr,
    #wrapper > #navRD.displayed #toolsBar > ul.tools {
        display: none !important;
    }

    #wrapper > #navRD.displayed .nav-close-menu {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        left: auto !important;
        z-index: 40;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 10px !important;
        border: 0 !important;
        border-radius: 50%;
        background: #00a9b6 !important;
        background-image: none !important;
        box-shadow: none !important;
        box-sizing: border-box;
    }

    #wrapper > #navRD.displayed .nav-close-menu img {
        display: none !important;
    }

    #wrapper > #navRD.displayed .nav-close-menu::before,
    #wrapper > #navRD.displayed .nav-close-menu::after {
        content: "";
        position: absolute;
        top: 21px;
        left: 11px;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
    }

    #wrapper > #navRD.displayed .nav-close-menu::before {
        transform: rotate(45deg);
    }

    #wrapper > #navRD.displayed .nav-close-menu::after {
        transform: rotate(-45deg);
    }

    #wrapper div.headertools article.row:not(.nodisplayed) {
        position: fixed !important;
        top: 105px !important;
        right: 0 !important;
        left: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 105px) !important;
        margin: 0 !important;
        padding: 12px 0 16px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #f5f5f5;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);
    }

    #wrapper > header.fixed ~ .headertools article.row:not(.nodisplayed) {
        top: 50px !important;
        max-height: calc(100vh - 50px) !important;
    }

    #wrapper div.headertools article.row:not(.nodisplayed) .module-grid {
        position: relative;
        width: 100% !important;
        max-width: 720px;
        margin: 0 auto;
        padding: 40px 48px 0 !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    #wrapper div.headertools article.row:not(.nodisplayed) .closemenu {
        position: absolute !important;
        top: 0 !important;
        right: 12px !important;
        z-index: 20;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent !important;
    }

    #wrapper div.headertools article.row.idioma ul.list,
    #wrapper div.headertools article.row.compartir ul.list {
        width: 100% !important;
        max-width: 584px;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    #wrapper div.headertools article.row.idioma ul.list > li.block {
        display: block !important;
        float: none !important;
        width: 100% !important;
        min-height: 40px;
        margin: 0 !important;
        padding: 0 !important;
    }

    #wrapper div.headertools article.row.compartir ul.list {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0;
    }

    #wrapper div.headertools article.row.compartir ul.list > li.block {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 640px) {
    #wrapper > header > .module-grid:first-child {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 0 12px !important;
    }

    #wrapper > header > .module-grid:first-child .header-tools-list {
        display: none !important;
    }

    #wrapper > header > .module-grid:first-child .zbe-portalTitle,
    #wrapper > header > .module-grid:first-child .zbe-portalTitle a {
        width: min(260px, calc(100vw - 76px)) !important;
        min-width: 130px;
    }

    #wrapper div.headertools article.row:not(.nodisplayed) .module-grid {
        padding-top: 52px !important;
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    #wrapper div.headertools article.row.compartir ul.list {
        grid-template-columns: 1fr;
        max-width: 100% !important;
        gap: 0;
    }

    #wrapper div.headertools article.row.compartir ul.list > li.block {
        width: 100% !important;
        border-bottom: 1px solid #c9c9c9;
    }

    #wrapper div.headertools article.row.compartir ul.list > li.block:first-child {
        border-top: 1px solid #c9c9c9;
    }
}

@media (max-width: 420px) {
    #wrapper > header > .module-grid:first-child .zbe-portalTitle,
    #wrapper > header > .module-grid:first-child .zbe-portalTitle a {
        width: min(190px, calc(100vw - 104px)) !important;
        min-width: 115px;
        height: 29px !important;
    }

    #wrapper div.headertools article.row.compartir ul.list {
        grid-template-columns: 1fr;
    }
}

/* Controles de cierre y foco claramente perceptibles. */
#wrapper div.headertools article.row .closemenu,
#wrapper div.headertools article.row:not(.nodisplayed) .closemenu {
    width: 54px !important;
    height: 54px !important;
    border: 2px solid #6e6259 !important;
    border-radius: 50%;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body #wrapper > div.headertools > article.row:not(.nodisplayed) button.closemenu {
    background-color: #fff !important;
}

#wrapper div.headertools article.row .closemenu img {
    display: none !important;
}

#wrapper div.headertools article.row .closemenu::before,
#wrapper div.headertools article.row .closemenu::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 13px;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: #6e6259;
}

#wrapper div.headertools article.row .closemenu::before {
    transform: rotate(45deg);
}

#wrapper div.headertools article.row .closemenu::after {
    transform: rotate(-45deg);
}

#wrapper div.headertools article.row:not(.nodisplayed) {
    border-right-color: #00a9b6 !important;
}

#wrapper button:focus-visible,
#wrapper a:focus-visible,
#wrapper [role="button"]:focus-visible {
    outline: 3px solid #111 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px #fff !important;
}

/* Menú móvil: recuperación del patrón lateral original de AMB. */
@media (max-width: 860px) {
    body.headertool-open {
        overflow: hidden;
    }

    #wrapper > header > .module-grid:first-child .header-tools-list {
        display: none !important;
    }

    #wrapper > #navRD.displayed {
        left: 0 !important;
        width: min(82vw, 520px) !important;
        max-width: 520px !important;
        height: 100vh !important;
        overflow: visible !important;
    }

    #wrapper > #navRD.displayed:not(.compressed) .toolsList {
        width: min(82vw, 520px) !important;
        max-width: 520px !important;
    }

    #wrapper > #navRD.displayed.compressed {
        width: 54px !important;
    }

    #wrapper > #navRD.displayed #toolsBar,
    #wrapper > #navRD.displayed.compressed #toolsBar {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        left: 0 !important;
        z-index: 300 !important;
        display: block !important;
        width: 54px !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding: 8px 5px !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: 7px 0 10px rgba(0, 0, 0, 0.14) !important;
        box-sizing: border-box;
    }

    #wrapper > #navRD.displayed:not(.compressed) #toolsBar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 90 !important;
        display: block !important;
        width: 44px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #wrapper > #navRD.displayed:not(.compressed) #toolsBar > ul.tools {
        display: none !important;
    }

    #wrapper > #navRD.displayed:not(.compressed) .toolsList {
        padding-top: 52px !important;
    }

    #wrapper > #navRD.displayed #toolsBar > hr {
        display: none !important;
    }

    #wrapper > #navRD.displayed #toolsBar > ul.tools {
        display: block !important;
        width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    #wrapper > #navRD.displayed #toolsBar > ul.tools > li {
        display: block !important;
        width: 44px !important;
        height: 41px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #wrapper > #navRD.displayed .nav-close-menu,
    #wrapper > #navRD.displayed #toolsBar .mobile-tool-button {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 41px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #6e6259;
        cursor: pointer;
        box-sizing: border-box;
    }

    #wrapper > #navRD.displayed .nav-close-menu img {
        display: none !important;
    }

    #wrapper > #navRD.displayed .nav-close-menu::before {
        content: "";
        position: static !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 23px;
        height: 23px;
        border: 1px solid #6e6259;
        border-radius: 50%;
        background: #fff;
        transform: none !important;
        box-sizing: border-box;
    }

    #wrapper > #navRD.displayed .nav-close-menu::after {
        content: "";
        position: absolute;
        top: 17px;
        left: 19px;
        display: block;
        width: 6px;
        height: 6px;
        border: solid #6e6259;
        border-width: 0 0 1px 1px;
        background: transparent;
        transform: rotate(45deg);
        box-sizing: border-box;
    }

    #wrapper > #navRD.displayed:not(.compressed) .nav-close-menu {
        width: 44px !important;
        height: 48px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    #wrapper > #navRD.displayed:not(.compressed) .nav-close-menu::before {
        content: "\00d7";
        position: static !important;
        display: flex;
        width: 44px;
        height: 48px;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #6e6259;
        font: 30px/1 Arial, sans-serif;
        transform: none !important;
    }

    #wrapper > #navRD.displayed:not(.compressed) .nav-close-menu::after {
        content: none !important;
    }

    #wrapper > #navRD.displayed #toolsBar .mobile-tool-button i {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 23px !important;
        height: 23px !important;
        margin: 0 !important;
        border: 1px solid #6e6259;
        border-radius: 50%;
        background: #fff;
        color: #6e6259;
        font-size: 13px;
        line-height: 23px !important;
        box-sizing: border-box;
    }

    #wrapper > #navRD.displayed #toolsBar .mobile-tool-button i.active,
    #wrapper > #navRD.displayed #toolsBar .mobile-tool-button[aria-expanded="true"] i {
        border-color: #008995;
        color: #008995;
    }

    #wrapper div.headertools article.row:not(.nodisplayed) {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 54px !important;
        z-index: 280 !important;
        display: block !important;
        width: calc(min(82vw, 520px) - 54px) !important;
        max-width: 466px !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 0 !important;
        border-right: 2px solid #00a9b6 !important;
        background: #f5f5f5 !important;
        box-shadow: none !important;
        box-sizing: border-box;
    }

    #wrapper > header.fixed ~ .headertools article.row:not(.nodisplayed) {
        top: 0 !important;
        max-height: none !important;
    }

    #wrapper div.headertools article.row:not(.nodisplayed) .module-grid {
        position: relative;
        width: 100% !important;
        max-width: none !important;
        min-height: 100%;
        margin: 0 !important;
        padding: 72px 34px 30px !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    #wrapper div.headertools article.row:not(.nodisplayed) .closemenu {
        display: none !important;
    }

    #wrapper div.headertools article.row.idioma ul.list,
    #wrapper div.headertools article.row.compartir ul.list {
        display: block !important;
        width: min(100%, 394px) !important;
        max-width: 394px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    #wrapper div.headertools article.row.idioma ul.list > li.block,
    #wrapper div.headertools article.row.compartir ul.list > li.block {
        display: block !important;
        float: none !important;
        width: 100% !important;
        min-height: 61px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-top: 1px solid #c9c9c9 !important;
        box-sizing: border-box;
    }

    #wrapper div.headertools article.row.idioma ul.list > li.block:last-child,
    #wrapper div.headertools article.row.compartir ul.list > li.block:last-child {
        border-bottom: 1px solid #c9c9c9 !important;
    }

    #wrapper div.headertools article.row.idioma a.icon.idioma,
    #wrapper div.headertools article.row.idioma a.icon.idioma.active,
    #wrapper div.headertools article.row.compartir ul.list > li.block > a {
        position: relative;
        display: flex !important;
        align-items: center;
        width: 100% !important;
        min-height: 60px !important;
        margin: 0 !important;
        padding: 12px 42px 12px 12px !important;
        background-position: right 12px center !important;
        background-repeat: no-repeat !important;
        color: #6e6259 !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 24px !important;
        text-decoration: none !important;
        box-sizing: border-box;
    }

    #wrapper div.headertools article.row.idioma a.icon.idioma.active::after {
        right: 12px !important;
        border-color: #008995 !important;
    }
}

@media (max-width: 420px) {
    #wrapper div.headertools article.row:not(.nodisplayed) .module-grid {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
}

/* En móvil, Compartir e Idioma se cierran volviendo con la flecha lateral. */
@media (max-width: 860px) {
    html body #wrapper > div.headertools > article.row.compartir button.closemenu,
    html body #wrapper > div.headertools > article.row.idioma button.closemenu {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ZBE_MNEV_720: centra verticalmente los selectores de identidad. */
.zbe-form #ENT_TipoSolicitante + .select2-container .select2-selection--single,
.zbe-form #ENT_TipoIPF + .select2-container .select2-selection--single,
.zbe-form #ENT_PAI_ID_IPF + .select2-container .select2-selection--single {
    height: 38px !important;
    padding: 0 12px !important;
}

.zbe-form #ENT_TipoSolicitante + .select2-container .select2-selection__rendered,
.zbe-form #ENT_TipoIPF + .select2-container .select2-selection__rendered,
.zbe-form #ENT_PAI_ID_IPF + .select2-container .select2-selection__rendered {
    height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 36px !important;
}

.zbe-form #ENT_TipoSolicitante + .select2-container .select2-selection__arrow,
.zbe-form #ENT_TipoIPF + .select2-container .select2-selection__arrow,
.zbe-form #ENT_PAI_ID_IPF + .select2-container .select2-selection__arrow {
    top: 0 !important;
    height: 36px !important;
    margin: 0 !important;
}