/* ============================================
   ESTILOS EXCLUSIVOS PARA MENU.PHP
   Todos los estilos en este archivo están diseñados 
   específicamente para el archivo class/menu.php
   ============================================ */

/* Main Header */
#main-header {
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    border-bottom: groove;
}

header {
    position: relative;
    width: 100%;
    background: black;
}

/* Menus */
.menus nav {
    width: 100%;
    left: 0;
    top: 0;
    position: fixed;
    width: 100%;
    margin: 0 auto;
}

.menus,
.menus ul,
.menus ul li,
.menus ul li a,
.menus #head-mobile {
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.menus ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.menus:after,
.menus>ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.menus {   
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
}


.menus>ul>li {
    float: left
}

.menus>ul>li>a {
    padding: 1rem;
    font-size: 2rem;
    letter-spacing: 1px;
    text-decoration: none;
    color: white;
    font-weight: 700;
}

.menus>ul>li:hover>a,
.menus ul li.active a {
    color: #282220;
}

.menus>ul>li:hover,
.menus ul ul li:hover>a,
.menus ul li.active:hover,
.menus ul li.active,
.menus ul li.has-sub.active:hover {
    background: #447182 !important;
    -webkit-transition: background .3s ease;
    -ms-transition: background .3s ease;
    transition: background .3s ease;
    color:black;
}

.menus>ul>li.has-sub>a {
    padding-right: 30px
}

.menus>ul>li.has-sub>a:after {
    position: absolute;
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
}

.menus>ul>li.has-sub>a:before {
    position: absolute;
    top: 19px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ddd;
    content: '';
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease
}

.menus>ul>li.has-sub:hover>a:before {
    top: 23px;
    height: 0
}

.menus ul ul {
    position: absolute;
    left: -9999px
}

.menus ul ul li {
    height: 0;
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    background: #333;
    transition: all .25s ease
}

.menus li:hover>ul {
    left: auto
}

.menus li:hover>ul>li {
    height: 35px
}

.menus ul ul ul {
    margin-left: 100%;
    top: 0
}

.menus ul ul li a {
    border-bottom: 1px solid rgba(150, 150, 150, 0.15);
    padding: 11px 15px;
    width: 170px;
    font-size: 12px;
    text-decoration: none;
    color: #ddd;
    font-weight: 400;
}

.menus ul ul li:last-child>a,
.menus ul ul li.last-item>a {
    border-bottom: 0;
    line-height: normal;
}

.menus ul ul li:hover>a,
.menus ul ul li a:hover {
    color: #fff
}

.menus ul ul li.has-sub>a:after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
}

.menus ul ul li.has-sub>a:before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ddd;
    content: '';
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease
}

.menus ul ul>li.has-sub:hover>a:before {
    top: 17px;
    height: 0
}

.menus ul ul li.has-sub:hover,
.menus ul li.has-sub ul li.has-sub ul li:hover {
    background: #ddd;
}

.menus ul ul ul li.active a {
    border-left: 1px solid #ddd
}

.menus>ul>li.has-sub>ul>li.active>a,
.menus>ul ul>li.has-sub>ul>li.active>a {
    border-top: 1px solid #ddd
}

.menus .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    text-align: center;
    padding: 10px 0 0 0;
    float: none
}

.menus nav {
    display: none;
}

.menus {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    place-content: flex-end;
}

/* Menu Principal */
.menu {
    display: flex;
    flex-direction: row;
    border-bottom: none;
}

.menu-der{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    width: 33.33%;
}

.menu-der img {
    height: 5rem;
    margin: 2rem 0rem 0rem 1.5rem;
}

.menu-izq{
    display: flex;
    gap: 10px;
    padding: 10px 30px;
}

.logo-desktop{
    display: flex;
    align-items: center; 
    justify-content: center;
}

.logo-mobile{
    display: none;
    align-items: center; 
    justify-content: center;
}

.menu-izq img {
    height: 5rem;
    width: 5rem;
    margin: 0;
    background: black;
}

.logo-desktop img{
    height: 100%;
}

.menuLogoNombre{
    display: block;
    text-align: center;
    font-size: 18px;
}

.menu-cen{
    width: 33.33%;
    display: block;
    text-align: center;
}

.menu-cen img{
    height: 20rem;
}

hr.hrMenuNombre{
    opacity: 1;
    width: 90%;
    margin: 0 auto;
}

#botmenu, #botmenu2 {
    background-color: black;
    border: none;
    cursor: pointer;
    padding: 0 1rem 0 0;
}

/* Iconos */
.centrar{
    text-align: center;
    justify-content: center;
}

.menu-mobile{
    display: none;
}

.icono-izq{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Login guest: button con misma piel que el <a> anterior (sin borde/fondo de form) */
button.icono-izq.login-window {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.icono-izq span {
    text-align: center;
    position: absolute;
    color: white;
    background: darkturquoise;
    border-radius: 1rem;
    height: 2.1rem;
    width: 2.1rem;
    font-size: 2rem;
    padding: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 20%;
    right: 40%;
}

.menu-items{
    display: flex !important;
    align-items: center;
}

.icono-der{
    height: 5rem;
}

.menu-items img {
    height: 4rem;
    margin: 0 2rem 0 43.5%;
}

#txtBusqueda {
    font-size: 3rem;
    height: 100%;
    border: none;
}

.menu-sub{
    border-bottom: none !important;
}

.menu-sub li a{
    background: black !important;
    font-size: 2rem !important;
}

@media (max-width:600px){
    .menu-sub li a{
        font-size: 1.8rem !important;
    }
}

.busqueda-info {
    flex-direction: row;
    flex-wrap: wrap;
    display: inline-flex;
    margin: 2rem 0;
}

#menubuscar{
    border-bottom:groove;
}

.nomostrar{
    display:none;
}

.btn {
    width: max-content;
    max-width: 100%;
    height: auto;
    min-height: 40px;
    margin: 1px;
    padding: 5px 20px;
    font:  18px/14px 'BentonSans-Regular','BentonSans-Bold';
    line-height: 1.3;
    text-decoration: none;
    color: #FFF;
    border: 1px solid #447182;
    background: #447182;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0;
    box-sizing: border-box;
    white-space: normal;
    overflow: visible;
}

.boton-menu {
    background: transparent;
    color: white;
    height: auto;
    font-size: 2rem;
    font-weight: bold;
    font-family: 'BentonSans-Regular','BentonSans-Bold';
    height: 4.4rem;
    padding: 0 0 0 1rem;
    width: 100%;
    text-align: left;
}

/* Menu flotante */
.menu-flotante{
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background: black;
    align-content: center;
    z-index: 9999;
}

.menu-flotante .div-principal{
    margin: 0 1.4rem;
    border-style: groove;
    display: flex;
    justify-content: center;
}

@media (max-width: 600px){
    .menu-flotante .div-principal{
        margin: 0;
    }
}

/* Responsive */
@media (max-width:1025px) {

    .menu-items img {
        height: 4rem;
        margin: 0 2rem 0 38.5%;
    }

    .menu-items img.menu-idioma-flag {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        margin: 0 2rem 0 38.5% !important;
    }
}

/* Estilos para el menú desktop #cssmenu2 */
#menu-pc-nav-shell:not(.menu-pc-nav-shell--open) {
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#cssmenu2 {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 10070;
    overflow: hidden;
    border-bottom: 2px solid #447182;
    box-sizing: border-box;
}

#cssmenu2.cssmenu2--open {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#menu-pc-nav-shell.menu-pc-nav-shell--open {
    height: auto;
    max-height: none;
    overflow: visible;
    visibility: visible;
    pointer-events: auto;
    position: relative;
    z-index: 10070;
}

#cssmenu2.cssmenu2--viewport {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#cssmenu2.cssmenu2--viewport #menu-categorias.menu-pc-columns {
    min-height: 100%;
    align-content: flex-start;
}

#cssmenu2.show {
    top: 100%;
    position: relative;
}

@media (max-width: 991px) {
    #cssmenu2 {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #menu-pc-nav-shell.menu-pc-nav-shell--open {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #cssmenuMobile.cssmenu-mobile--viewport {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

#cssmenuMobile.cssmenu-mobile--viewport {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#cssmenuMobile.cssmenu-mobile--viewport .menu-m-strip {
    min-height: 100%;
    box-sizing: border-box;
}

#menu-categorias.menu-pc-columns--empty {
    min-height: 100%;
    background: #fff;
}

#cssmenu2.cssmenu2--viewport:has(#menu-categorias.menu-pc-columns--empty),
#cssmenu2.cssmenu2--open:has(#menu-categorias.menu-pc-columns--empty) {
    background-color: #fff !important;
}

/* Estilos del menú móvil (clases nuevas sin estilos previos) */
#menu-pc-nav-shell {
    --menu-pc-imagen-height: 100px;
}

#menu-categorias.menu-pc-columns {
    --menu-pc-titulo-font-size: 10.5px;
    --menu-pc-subtitulo-font-size: 9.1px;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 5px;
    justify-content: space-between;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
}

#menu-categorias.menu-pc-columns > .menu-pc-column-slot {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    padding: 0;
    box-shadow: none;
    overflow: visible;
    transition: none;
}

#menu-categorias.menu-pc-columns > .menu-pc-column-slot:has(.menu-pc-column-block--con-subcategorias:hover) {
    flex: 1.55 1 0;
    z-index: 2;
}

#menu-categorias.menu-pc-columns > .menu-pc-column-slot--empty {
    visibility: hidden;
    pointer-events: none;
    min-height: 0;
    flex: 1 1 0;
    min-width: 0;
}

#menu-categorias.menu-pc-columns .menu-pc-column-block.menu-pc-column-alinear {
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
}

#menu-categorias.menu-pc-columns .menu-pc-column-block.menu-pc-column-alinear > div {
    flex: 1 1 auto;
    min-height: 0;
}

.divMenu {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 20px;
    justify-content: space-between;
    background: #fff;
    width: 100%;
    align-items: flex-start;
}

.divMenu.menu-pc-row-has-alinear > .menu-pc-column-block.menu-pc-column-alinear {
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    align-self: flex-start;
}

.divMenu.menu-pc-row-has-alinear > .menu-pc-column-block.menu-pc-column-alinear > div {
    flex: 1 1 auto;
    min-height: 0;
}

.divMenu.menu-pc-row-has-alinear > .menu-pc-column-block:not(.menu-pc-column-alinear) {
    align-self: flex-start;
    height: auto;
}

.divMenu > div {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.divMenu > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(68, 113, 130, 0.5);
}

.divMenu > div.menu-pc-empty-column {
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
}

.divMenu > div.menu-pc-empty-column:hover {
    transform: none;
    box-shadow: none;
}

.divMenu > div.menu-pc-column-slot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.divMenu > div.menu-pc-column-slot:hover {
    transform: none;
    box-shadow: none;
}

.menu-pc-column-block {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: none;
    transform-origin: center top;
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
}

#menu-categorias.menu-pc-columns .menu-pc-column-block--con-subcategorias:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 28px rgba(68, 113, 130, 0.28);
    z-index: 3;
}

.menu-pc-column-block--con-subcategorias:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 28px rgba(68, 113, 130, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    #menu-categorias.menu-pc-columns > .menu-pc-column-slot {
        transition: none;
    }

    #menu-categorias.menu-pc-columns > .menu-pc-column-slot:has(.menu-pc-column-block--con-subcategorias:hover) {
        flex: 1 1 0;
    }

    .menu-pc-column-block,
    #menu-categorias.menu-pc-columns .menu-pc-column-block--con-subcategorias:hover,
    .menu-pc-column-block--con-subcategorias:hover {
        transition: none;
        transform: none;
    }
}

.menu-pc-column-block .menu-pc-imagen-link {
    display: block;
    line-height: 0;
    cursor: pointer;
    width: 100%;
    height: var(--menu-pc-imagen-height, 100px);
    min-height: var(--menu-pc-imagen-height, 100px);
    max-height: var(--menu-pc-imagen-height, 100px);
    overflow: hidden;
    margin: 0;
    border-radius: 4px;
    flex: 0 0 var(--menu-pc-imagen-height, 100px);
    box-sizing: border-box;
}

.menu-pc-column-block .menu-pc-imagen-link picture {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.menu-pc-column-block .menu-pc-imagen-link img {
    width: 100% !important;
    height: var(--menu-pc-imagen-height, 100px) !important;
    min-height: var(--menu-pc-imagen-height, 100px) !important;
    max-height: var(--menu-pc-imagen-height, 100px) !important;
    object-fit: cover !important;
    object-position: center;
    border-radius: 4px;
    margin: 0;
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
}

.menu-pc-column-block .menu-pc-imagen-link:hover img {
    opacity: 0.92;
}

.menu-pc-column-block--sin-imagen .menuTitulo {
    margin-bottom: 4px;
}

.menuTitulo {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--menu-pc-titulo-font-size, 10.5px);
    font-weight: 700;
    color: #000;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    border-bottom: 2px solid #447182;
    padding-bottom: 5px;
    transition: color 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.menuTitulo:hover {
    color: #447182;
}

.divMenu > div > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

.divMenu > div.menu-pc-column-slot > .menu-pc-column-block {
    display: block;
    margin-top: 0;
}

.menu-pc-column-block > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

.menuSubtitulo {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--menu-pc-subtitulo-font-size, 9.1px);
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    padding: 4px 6px;
    transition:
        color 0.3s,
        background 0.3s,
        padding-left 0.3s;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.menuSubtitulo:hover {
    color: #fff;
    background: #447182;
    padding-left: 12px;
}

#cssmenu2 #menu-categorias.menu-pc-columns .menuTitulo,
#cssmenu2 #menu-categorias.menu-pc-columns .menuSubtitulo {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #000;
    text-transform: uppercase;
    text-decoration: none !important;
}

#cssmenu2 #menu-categorias.menu-pc-columns .menuTitulo {
    font-size: var(--menu-pc-titulo-font-size, 10.5px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

#cssmenu2 #menu-categorias.menu-pc-columns .menuSubtitulo {
    font-size: var(--menu-pc-subtitulo-font-size, 9.1px) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

#cssmenu2 #menu-categorias.menu-pc-columns .menuTitulo:hover {
    color: #447182;
}

#cssmenu2 #menu-categorias.menu-pc-columns .menuSubtitulo:hover {
    color: #fff;
}

.busqueda-contenedor {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 5px;

}

.busqueda-contenedor button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
}

.busqueda-contenedor input {
    border: none;
    outline: none;
    padding: 10px;
    font-size: 1.4rem;
}

.menu-fixed {
    background: black;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    border-bottom: none !important;
}

.full-logo {
    max-width: 200px;
    height: auto;
}

.small-logo {
    max-width: 60px;
    height: auto;
}

/* Host flex: centra el modal sin transform ni medir layout (rápido en fichas) */
#lds-auth-host {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100200;
    pointer-events: none;
    /* hidden: evita que 100vw/X negativa ensanchen el documento (Firefox) */
    overflow: hidden;
    padding: 28px; /* espacio para la X con margin negativo */
    box-sizing: border-box;
}

#lds-auth-host.is-open {
    display: flex !important;
}

/* Login/Register Popup Styles */
.login-popup{
    display:none;
    background: #333;
    padding: 10px; 	
    border: 2px solid #ddd;
    float: none;
    font-size: 1.2em;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: max-content;
    /* % del host (no 100vw): en Firefox 100vw incluye scrollbar y expande la página */
    max-width: 100%;
    height: auto;
    margin: 0;
    transform: none !important;
    -webkit-transform: none !important;
    overflow: visible;
    transition: none !important;
    -webkit-transition: none !important;
    z-index: 1;
    pointer-events: auto;
    box-shadow: 0px 0px 20px #999;
    -moz-box-shadow: 0px 0px 20px #999;
    -webkit-box-shadow: 0px 0px 20px #999;
    border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.login-popup.is-open {
    display: block !important;
    opacity: 1 !important;
}

/* Mask por encima del header (100050) y debajo del popup (100200) */
#mask {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    transition: none !important;
    -webkit-transition: none !important;
    z-index: 100150 !important;
}

#mask.is-open {
    display: block !important;
}

img.btn_close {
    float: right; 
    margin: -28px -28px 0 0;
}

/* X del login: absolute para no quedar recortada por overflow del modal */
.login-popup > a.close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    float: none;
    line-height: 0;
}

.login-popup > a.close img.btn_close {
    float: none;
    margin: 0;
    display: block;
}

fieldset { 
    border:none; 
}

form.signin .textbox label { 
    display: block;
    width: 25rem;
}

form.signin .textbox span { 
    display:block;
    font-size: 2rem;
}

form.signin p, form.signin span { 
    font-size: 15px;
    line-height: 18px;
    margin: 0;
    color: white;
}

form.signin .textbox input { 
    background:#666666 !important;
    background-color:#666666 !important;
    border-bottom:1px solid #333;
    border-left:1px solid #000;
    border-right:1px solid #333;
    border-top:1px solid #000;
    color:#fff !important;
    -webkit-text-fill-color:#fff;
    caret-color:#fff;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font:15px Arial, Helvetica, sans-serif;
    padding:6px 6px 4px;
    width:234px;
}

/*
 * Chrome/Edge autofill pinta el input blanco/azul y parece “bloqueado”
 * hasta que se escribe. Forzar el mismo gris del modal.
 */
.login-popup form.signin .textbox input:-webkit-autofill,
.login-popup form.signin .textbox input:-webkit-autofill:hover,
.login-popup form.signin .textbox input:-webkit-autofill:focus,
.login-popup form.signin .textbox input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    border-bottom:1px solid #333;
    border-left:1px solid #000;
    border-right:1px solid #333;
    border-top:1px solid #000;
    box-shadow: 0 0 0 1000px #666666 inset !important;
    -webkit-box-shadow: 0 0 0 1000px #666666 inset !important;
    transition: background-color 99999s ease-out 0s;
    background-color: #666666 !important;
    background-clip: content-box !important;
}

form.signin input:-moz-placeholder { 
    color:#bbb; 
    text-shadow:0 0 2px #000; 
}

form.signin input::-webkit-input-placeholder { 
    color:#bbb; 
    text-shadow:0 0 2px #000;  
}

.buttonlog { 
    font-size: 2rem;
    background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
    background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
    border-color:#000; 
    border-width:1px;
    border-radius:4px 4px 4px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color:#333;
    cursor:pointer;
    display:inline-block;
    padding:6px 6px 4px;
    margin-top:10px;
}

.buttonlog:hover { 
    background:#ddd; 
}

.flex-horizontal{
    display:flex;
    flex-direction:row;
}

#txtpassword{
    width:200px;
}

.mensaje-error{
    font-size: 1.8rem;
    text-align: center;
    line-height: 3rem;
    cursor: default;
}

.recupera-mensaje{
    width: 100%;
    color: orange;
    margin: 1rem 0;
    text-align: center;
    font-size: 1.7rem;
}

/* Hasta 800px: fila logo-mobile (evita solapamiento del .logo-desktop.menu-logo-link con breadcrumbs 751–800px) */
@media (max-width: 800px) {
    .full-logo {
        display: none !important;
    }

    .logo-mobile,
    .logo-mobile.menu-logo-mobile-container {
        display: flex !important;
    }

    /* Si está activa la fila logo-mobile del menú principal, ocultar botmenu del bloque principal */
    #menu-pricipal > .menu-izq > #botmenu {
        display: none !important;
    }

    /* En ese mismo estado, ocultar el logo desktop del menú principal */
    #menu-pricipal > .menu-izq > .logo-desktop.menu-logo-link {
        display: none !important;
    }

    /* Menú principal (móvil): posición del badge/counter */
    #menu-pricipal .icono-izq span {
        bottom: 12%;
        right: 31%;
    }
}

@media (min-width: 640px) and (max-width: 800px) {
    #menu-pricipal .icono-izq span {
        bottom: 22%;
        right: 37%;
        height: 2.1rem !important;
        width: 2.1rem !important;
        font-size: 2rem;
    }
}

/* ≥801px: logo desktop en barra fija; oculta fila móvil (pisa reglas en styles30042021.css ≤900px) */
@media (min-width: 801px) {
    .logo-mobile,
    .logo-mobile.menu-logo-mobile-container {
        display: none !important;
    }

    .logo-desktop {
        display: flex !important;
    }

    /* Menú principal: idiomas un poco a la derecha sin redistribuir el flex (margin mueve al resto) */
    #menu-pricipal #idiomas {
        transform: translateX(4.3rem);
    }
}

.busqueda-contenedor {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    width: 100%;

    /* padding: 10px; */
    /* background-color: #fff; */
    color: #fff;
    border: #fff 1px solid;
    background-color: #fff;
    border-radius: 4px;
}

.busqueda-info {
    width: 100%;
    max-width: 700px;
    margin: 0rem;
    padding: 1rem;
}

.busqueda-contenedor input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    color: #111;
}

.busqueda-contenedor button {
    padding: 0px 10px;
}

/* === Estilos específicos para menu.php === */
/* Header principal */
#main-header.menu-header-bg {
    background-color: #000;
}

/* Logo desktop link */
.logo-desktop.menu-logo-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.logo-desktop.menu-logo-link .full-logo {
    width: 200px;
    max-width: 200px;
    padding: 0rem;
}

/* Logo mobile container */
.logo-mobile.menu-logo-mobile-container {
    align-items: center;
    justify-content: space-between;
    border-top: 2.5px groove #d2d2d2;
}

.logo-mobile.menu-logo-mobile-container .menu-mobile-left,
.logo-mobile.menu-logo-mobile-container .menu-mobile-right {
    width: 30%;
}

.logo-mobile.menu-logo-mobile-container .menu-mobile-center {
    display: flex;
    align-items: center;
}

.logo-mobile.menu-logo-mobile-container .menu-mobile-center img {
    width: 150px;
}

/* Menu fixed */
.menu-fixed.menu-fixed-position {
    position: fixed;
    left: 0;
    /* 100% (no 100vw): evita scroll horizontal en Firefox por el ancho del scrollbar */
    width: 100%;
    top: -100%;
    z-index: 9999;
}

@media (min-width: 992px) {
    #main-header.menu-pc-nav-active #menu-pricipal {
        display: none !important;
    }

    #main-header.menu-pc-nav-active #menu-fixed.menu-fixed-position {
        top: 0 !important;
    }

    #menu-fixed .menu-toggle-btn {
        position: relative;
        flex-shrink: 0;
        width: 5rem;
        height: 5rem;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        overflow: hidden;
    }

    #menu-fixed .menu-toggle-btn .menu-toggle-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 5rem;
        height: 5rem;
        max-width: 5rem;
        max-height: 5rem;
        object-fit: contain;
        margin: 0;
        background: black;
    }

    #menu-fixed .menu-toggle-btn .menu-toggle-icon--open {
        display: block;
    }

    #menu-fixed .menu-toggle-btn .menu-toggle-icon--close {
        display: none !important;
    }

    #main-header.menu-pc-nav-active #menu-fixed .menu-toggle-btn .menu-toggle-icon--open {
        display: none !important;
    }

    #main-header.menu-pc-nav-active #menu-fixed .menu-toggle-btn .menu-toggle-icon--close {
        display: block !important;
        visibility: visible !important;
    }
}

/* Estilos para que el logo.png en nomostrar no se vea */
.nomostrar img {
    width: 90px !important;
}

/* Logo text in fixed menu */
.menu-logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.menu-logo-text-top,
.menu-logo-text-bottom {
    color: #fff;
    font-size: 14px;
    word-wrap: normal;
    white-space: nowrap;
    transition: none;
}

.menu-logo-text-divider {
    color: #fff;
    margin: .1rem 0rem;
    width: 100%;
    height: 2px;
    background-color: #fff;
}

.menu-small-logo {
    width: 60px;
    padding: 0rem;
}

/* Buscador formulario */
.menu-busqueda-form {
    max-width: 700px;
    margin: 10px auto;
}

.menu-busqueda-width-full {
    width: 100%;
}

/* Fuera del acceso, el selector de idiomas conserva su capa de pantalla completa. */
.menu-idiomas-fixed {
    position: fixed;
    background-color: #000;
    width: 100vw;
    left: 0;
    right: 0;
    z-index: 100300;
    height: 100vh;
    height: 100dvh;
    top: 0;
    overflow: hidden;
}

/*
 * Con el popup de auth abierto, el header y todos sus paneles quedan detrás
 * de #mask (100150) y #lds-auth-host (100200). Esto evita que el menú fijo
 * recorte o desplace el popup cuando cambia el viewport por zoom o teclado.
 * Usar body.lds-auth-open (clase JS) en lugar de :has(#mask): en fichas
 * con cientos de imágenes :has() fuerza un style recalc muy lento.
 */
html.lds-auth-open,
body.lds-auth-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}
body.lds-auth-open #main-header {
    position: relative;
    z-index: 100100 !important;
}

body.lds-auth-open #menu-fixed.menu-fixed-position,
body.lds-auth-open #menu-movil.menu-fixed.menu-fixed-position {
    z-index: 100100 !important;
}

body.lds-auth-open .lds-floating-dock {
    z-index: 100100 !important;
}

body.lds-auth-open #cssmenu2,
body.lds-auth-open #menu-pc-nav-shell.menu-pc-nav-shell--open,
body.lds-auth-open #cssmenuMobile,
body.lds-auth-open #menubuscar,
body.lds-auth-open #menuidiomas {
    z-index: 100100 !important;
}

.menu-idiomas-list {
    display: grid !important;
    grid-template-rows: 50px repeat(12, min(50px, calc((100dvh - 50px) / 12)));
    align-content: start;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.menu-idiomas-list > li {
    width: 100% !important;
    min-height: 0;
    justify-self: stretch;
}

.menu-idiomas-list > li:not(:first-child) {
    position: relative;
    overflow: visible;
}

.menu-idiomas-list > li:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: transparent;
    pointer-events: none;
    z-index: 0;
}

.menu-idiomas-list > li:not(:first-child):hover {
    background: transparent !important;
}

.menu-idiomas-list > li:not(:first-child):hover::before {
    background: #447182;
}

.menu-idiomas-list > li:not(:first-child):hover > .menu-items {
    background: transparent !important;
}

.menu-idiomas-list > li:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.menu-idiomas-list > li:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: transparent;
    pointer-events: none;
    z-index: 0;
}

.menu-idiomas-list > li:first-child:hover {
    background: transparent !important;
}

.menu-idiomas-list > li:first-child:hover::before {
    background: #447182;
}

.menu-idiomas-list #botmenu3 {
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 5px;
    border: 0;
    background: transparent;
    position: relative;
    z-index: 1;
}

.menu-idiomas-list #botmenu3 img {
    display: block;
    width: clamp(27px, 4.7dvh, 34px);
    height: clamp(27px, 4.7dvh, 34px);
    margin: 0;
    object-fit: contain;
}

.menu-idiomas-list .menu-items {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 2px 0 2px max(0px, calc(50% - 70px));
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.menu-idiomas-list .menu-items h2 {
    margin: 0 !important;
    font-family: "Saira", sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    line-height: 1 !important;
    letter-spacing: 5px !important;
    text-transform: none !important;
    white-space: nowrap;
}

/* Celular/tablet: nombres de idioma más compactos (PC intacto). */
@media (max-width: 991px) {
    .menu-idiomas-list .menu-items h2 {
        font-size: 1.6rem !important;
        letter-spacing: 2px !important;
    }
}

/* Banderas de idiomas - tamaño uniforme */
.menu-idiomas-list .menu-items img.menu-idioma-flag {
    width: clamp(24px, 5dvh, 32px) !important;
    height: clamp(24px, 5dvh, 32px) !important;
    min-width: clamp(24px, 5dvh, 32px) !important;
    min-height: clamp(24px, 5dvh, 32px) !important;
    max-width: clamp(24px, 5dvh, 32px) !important;
    max-height: clamp(24px, 5dvh, 32px) !important;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 50%;
    display: block;
    margin: 0 2rem 0 0 !important;
    box-sizing: border-box;
}

/* Menu login items — misma tipografía; espacios iguales y texto centrado en vertical */
.menu-login-item {
    background: #447182;
}

#menulogin > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

#menulogin > ul > li.centrar {
    width: 100%;
    flex: 0 0 auto;
}

#menulogin > ul > li.menu-login-item {
    width: 100%;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

#menulogin .menu-login-item > a,
#menulogin .menu-login-item > .boton-menu {
    font: 1.8rem/1.2 'BentonSans-Regular', 'BentonSans-Bold';
    font-weight: normal;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 1.4rem 1rem;
    border: none;
    text-align: left;
}

@media (max-width: 1000px) {
    #menulogin .menu-login-item > a,
    #menulogin .menu-login-item > .boton-menu {
        font: 1.6rem/1.2 'BentonSans-Regular', 'BentonSans-Bold';
        font-weight: normal;
        padding: 1.2rem 1rem;
    }
}

/*
 * Desplegable de usuario (#menulogin): sigue siendo un panel bajo el header
 * (ancho completo), y dentro cada opción es un botón petrol centrado.
 */
/*
 * Cerrado por defecto. El JS pone display:block/none al clic del icono usuario.
 * Sin !important en display para no pelear con el inline del script.
 */
html body #menulogin.menus,
html body nav#menulogin {
    display: none;
    position: relative;
    /* Por encima de .lds-floating-dock (10060). El caso fijo al scroll lo fija menu-inline.js. */
    z-index: 10080;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #000 !important;
    border: 0 !important;
    border-bottom: 1px solid #575e60 !important;
}

html body #menulogin.menus > ul,
html body nav#menulogin > ul {
    position: relative !important;
    display: flex !important;
    float: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* El clearfix ::after de .menus>ul cuenta como ítem flex y desalinea el hueco */
html body #menulogin.menus > ul::after,
html body nav#menulogin > ul::after,
html body #menulogin.menus::after,
html body nav#menulogin::after {
    content: none !important;
    display: none !important;
}

/*
 * La X debe quedar fuera del flujo: si ocupa fila, el padding de arriba
 * parece mucho mayor que el de abajo.
 */
html body #menulogin.menus > ul > li.centrar,
html body nav#menulogin > ul > li.centrar {
    position: absolute !important;
    top: 4px !important;
    right: 6px !important;
    left: auto !important;
    float: none !important;
    width: auto !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    flex: none !important;
    background: transparent !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

html body #menulogin.menus > ul > li.centrar > #botmenu2,
html body nav#menulogin > ul > li.centrar > #botmenu2 {
    pointer-events: auto !important;
}

html body #menulogin.menus > ul > li.centrar:hover,
html body #menulogin.menus > ul > li.menu-login-item:hover,
html body nav#menulogin > ul > li.centrar:hover,
html body nav#menulogin > ul > li.menu-login-item:hover,
html body #menulogin.menus > ul > li.menu-login-item,
html body nav#menulogin > ul > li.menu-login-item {
    background: transparent !important;
    color: #fff !important;
}

html body #menulogin #botmenu2,
html body nav#menulogin #botmenu2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    line-height: 0 !important;
    align-content: center !important;
}

html body #menulogin #botmenu2 img,
html body nav#menulogin #botmenu2 img {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
}

html body #menulogin.menus > ul > li.menu-login-item,
html body nav#menulogin > ul > li.menu-login-item {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    flex: 0 0 auto !important;
}

/* :last-of-type: con sesión iniciada hay un <script> después del último <li>. */
html body #menulogin.menus > ul > li.menu-login-item:last-of-type,
html body nav#menulogin > ul > li.menu-login-item:last-of-type {
    margin-bottom: 6px !important;
}

html body #menulogin .menu-login-item > a,
html body #menulogin .menu-login-item > .boton-menu,
html body nav#menulogin .menu-login-item > a,
html body nav#menulogin .menu-login-item > .boton-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 420px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    background: #447182 !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    color: #fff !important;
    font: 1.4rem/1.2 'BentonSans-Regular', 'BentonSans-Bold' !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

html body #menulogin .menu-login-item > a:hover,
html body #menulogin .menu-login-item > .boton-menu:hover,
html body #menulogin .menu-login-item:hover > a,
html body #menulogin .menu-login-item:hover > .boton-menu,
html body #menulogin .menu-login-item > a:focus-visible,
html body #menulogin .menu-login-item > .boton-menu:focus-visible,
html body nav#menulogin .menu-login-item > a:hover,
html body nav#menulogin .menu-login-item > .boton-menu:hover,
html body nav#menulogin .menu-login-item:hover > a,
html body nav#menulogin .menu-login-item:hover > .boton-menu {
    background: #4b8995 !important;
    color: #fff !important;
}

@media (min-width: 992px) {
    html body #menulogin.menus > ul,
    html body nav#menulogin > ul {
        padding: 10px 24px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    /* PC: X centrada arriba; botones debajo (mismo patrón que móvil) */
    html body #menulogin.menus > ul > li.centrar,
    html body nav#menulogin > ul > li.centrar {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
        pointer-events: auto !important;
        z-index: 2 !important;
    }

    html body #menulogin.menus > ul > li.centrar > #botmenu2,
    html body nav#menulogin > ul > li.centrar > #botmenu2 {
        margin: 0 auto !important;
        pointer-events: auto !important;
    }

    /* PC: columna centrada fija (sin medir iconos por JS) */
    html body #menulogin .menu-login-item > a,
    html body #menulogin .menu-login-item > .boton-menu,
    html body nav#menulogin .menu-login-item > a,
    html body nav#menulogin .menu-login-item > .boton-menu {
        width: 100% !important;
        max-width: 420px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 8px 12px !important;
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
        border: 1px solid #000 !important;
    }

    html body #menulogin #botmenu2,
    html body nav#menulogin #botmenu2 {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    html body #menulogin #botmenu2 img,
    html body nav#menulogin #botmenu2 img {
        width: 28px !important;
        height: 28px !important;
    }
}

@media (max-width: 991px) {
    html body #menulogin.menus > ul,
    html body nav#menulogin > ul {
        padding: 10px 14px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    /* Celular/tablet: X centrada arriba; botones debajo en el flujo */
    html body #menulogin.menus > ul > li.centrar,
    html body nav#menulogin > ul > li.centrar {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
        pointer-events: auto !important;
        z-index: 2 !important;
    }

    html body #menulogin.menus > ul > li.centrar > #botmenu2,
    html body nav#menulogin > ul > li.centrar > #botmenu2 {
        margin: 0 auto !important;
        pointer-events: auto !important;
    }

    html body #menulogin .menu-login-item > a,
    html body #menulogin .menu-login-item > .boton-menu,
    html body nav#menulogin .menu-login-item > a,
    html body nav#menulogin .menu-login-item > .boton-menu {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 12px !important;
    }
}

/* Tablets táctiles en anchos de escritorio: misma X centrada */
@media (hover: none) and (pointer: coarse) and (min-width: 992px) {
    html body #menulogin.menus > ul > li.centrar,
    html body nav#menulogin > ul > li.centrar {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
        pointer-events: auto !important;
        z-index: 2 !important;
    }

    html body #menulogin.menus > ul > li.centrar > #botmenu2,
    html body nav#menulogin > ul > li.centrar > #botmenu2 {
        margin: 0 auto !important;
        pointer-events: auto !important;
    }
}

/* menu-movil: barra unificada ≤991 en index e interiores (layout ficha producto) */
#menu-movil.menu-movil {
    display: none !important;
}

@media (max-width: 991px) {
    /*
     * menu-movil es position:fixed y no ocupa flujo; al ocultar #menu-pricipal el header queda vacío
     * y el contenido siguiente queda tapado. Reservamos altura = barra + notch.
     */
    #main-header {
        padding-top: calc(8rem + env(safe-area-inset-top, 0px));
        box-sizing: border-box;
        margin-top: 0 !important;
    }

    #main-header #menu-movil.menu-movil.menu-fixed.menu-fixed-position {
        display: flex !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-left: none;
        border-right: none;
        padding-inline: max(0px, env(safe-area-inset-left, 0px)) max(0px, env(safe-area-inset-right, 0px));
        padding-top: max(0px, env(safe-area-inset-top, 0px));
        border-bottom: none !important;
    }

    #main-header #menu-movil.menu-movil .menu-izq {
        padding: 0 1.1vw;
        width: 100%;
        max-width: 100%;
        height: 100%;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0;
        min-width: 0;
    }

    #main-header #menu-movil.menu-movil .logo-desktop.menu-logo-link {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        gap: 0.35rem;
        margin: 0 1.6vw;
        overflow: visible;
    }

    #main-header #menu-movil.menu-movil .menu-small-logo {
        width: auto !important;
        height: 11.7vw !important;
        max-height: 5.2rem !important;
        aspect-ratio: 593 / 611;
        object-fit: contain;
        flex: 0 0 auto;
    }

    /* BentonSans como en Productos; gana al * { Saira } de index.css */
    #main-header #menu-movil.menu-movil .menu-logo-text-top,
    #main-header #menu-movil.menu-movil .menu-logo-text-bottom {
        font-family: 'BentonSans-Regular', 'BentonSans-Bold', Arial, Helvetica, sans-serif;
        font-weight: normal;
        font-style: normal;
        font-optical-sizing: auto;
        font-variation-settings: normal;
        font-size: clamp(10px, 2.8vw, 1.4rem);
    }

    #main-header #menu-pricipal {
        display: none !important;
    }

    #main-header .logo-mobile.menu-logo-mobile-container {
        display: none !important;
    }

    #main-header #menu-fixed.menu-fixed-position {
        display: none !important;
    }
}

@media (min-width: 601px) and (max-width: 991px) {
    #main-header #menu-movil.menu-movil.menu-fixed.menu-fixed-position {
        left: 0 !important;
        right: 0 !important;
        border-left: none;
        border-right: none;
    }
}

@media (max-width: 600px) {
    #main-header #menu-movil.menu-movil.menu-fixed.menu-fixed-position {
        border-left: none;
        border-right: none;
    }
}

/* Favoritos menu-movil: mismo patrón que #carrp-movil (icono-izq + icono + span); corazón SVG relleno blanco */
#menu-movil.menu-movil #btnFavoritosMenuMovil .menu-movil-favorito-icon {
    position: relative;
    display: block;
    width: 90%;
    height: 90%;
    flex-shrink: 0;
    overflow: visible;
}

#menu-movil.menu-movil #btnFavoritosMenuMovil .menu-movil-favorito-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: none;
}

#menu-movil.menu-movil #btnFavoritosMenuMovil .menu-movil-favorito-icon svg path {
    fill: #ffffff;
}


@media (max-width: 991px) {
    #main-header #menu-movil.menu-movil.menu-fixed.menu-fixed-position {
        height: 8rem;
    }

    #menu-movil.menu-movil .menu-izq {
        align-items: center;
    }
}

@media (min-width: 401px) and (max-width: 639px) {
    #menu-movil.menu-movil .menu-izq img:not(.menu-small-logo) {
        height: 4.25rem !important;
        width: 4.25rem !important;
    }

    /* Banderas mantienen su tamaño uniforme en móvil */
    #menu-movil.menu-movil .menu-izq img.menu-idioma-flag,
    .menu-items img.menu-idioma-flag {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }
}

/* Regla global para todas las banderas en cualquier contexto */
img.menu-idioma-flag {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
}

/* Alineación uniforme del menú principal y del menú fijo en escritorio */
@media (min-width: 992px) {
    #menu-pricipal > .menu-izq {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(180px, 1.4fr) repeat(3, minmax(0, 1fr));
        align-items: center;
        justify-items: center;
        column-gap: clamp(6rem, 7vw, 13rem);
        row-gap: 0;
        padding: 1rem 2rem;
        box-sizing: border-box;
    }

    #menu-pricipal > .menu-izq > .icono-izq {
        width: 5rem;
        height: 5rem;
        min-width: 5rem;
        min-height: 5rem;
        margin: 0;
        padding: 0;
        border: 0;
        appearance: none;
        background: transparent;
        align-self: center;
        justify-self: center;
    }

    #menu-pricipal > .menu-izq > .icono-izq > img {
        width: 5rem;
        height: 5rem;
        margin: 0;
        object-fit: contain;
    }

    #menu-pricipal > .menu-izq > .logo-desktop.menu-logo-link {
        width: min(200px, 100%);
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 0;
        align-self: center;
        justify-self: center;
    }

    #menu-pricipal > .menu-izq > .logo-desktop.menu-logo-link .full-logo {
        width: 100%;
        height: auto;
        max-width: 200px;
        margin: 0;
        object-fit: contain;
    }

    #menu-pricipal #botmenu,
    #menu-pricipal #idiomas {
        padding: 0;
        transform: none;
    }

    #menu-fixed > .menu-izq {
        width: 100%;
        align-items: center;
        box-sizing: border-box;
    }

    #menu-fixed > .menu-izq > .icono-izq,
    #menu-fixed > .menu-izq > .logo-desktop.menu-logo-link {
        align-self: center;
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Cabecera móvil/tablet: misma caja para menú, favoritos, carrito y usuario */
@media (max-width: 991px) {
    #menu-movil.menu-movil .menu-izq {
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    #menu-movil.menu-movil #botmenu,
    #menu-movil.menu-movil #idiomas-movil {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 12.8vw;
        width: 12.8vw;
        height: 12.8vw;
        min-width: 0;
        min-height: 0;
        max-width: 6.2rem;
        max-height: 6.2rem;
        margin: 0 0.67vw 0 0.53vw;
        padding: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    #menu-movil.menu-movil #carrp-movil {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 12.8vw;
        width: 12.8vw;
        height: 12.8vw;
        min-width: 0;
        min-height: 0;
        max-width: 6.2rem;
        max-height: 6.2rem;
        margin: 0 0.79vw 0 0.8vw;
        padding: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    #menu-movil.menu-movil #login-sticky-movil {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 12.8vw;
        width: 12.8vw;
        height: 12.8vw;
        min-width: 0;
        min-height: 0;
        max-width: 6.2rem;
        max-height: 6.2rem;
        margin: 0 -1.19vw 0 -0.96vw;
        padding: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    #menu-movil.menu-movil #btnFavoritosMenuMovil {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 16.5vw;
        width: 16.5vw;
        height: 16.5vw;
        min-width: 0;
        min-height: 0;
        max-width: 7.2rem;
        max-height: 7.2rem;
        margin: 0 -1.23vw;
        padding: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    #menu-movil.menu-movil #botmenu img,
    #menu-movil.menu-movil #idiomas-movil img,
    #menu-movil.menu-movil #login-sticky-movil img {
        width: 90% !important;
        height: 90% !important;
        margin: 0 !important;
        object-fit: contain;
        flex: 0 0 auto;
    }

    #menu-movil.menu-movil #carrp-movil .menu-movil-carro-icon {
        position: relative;
        display: block;
        flex: 0 0 auto;
        width: 90% !important;
        height: 90% !important;
        margin: 0 !important;
    }

    #menu-movil.menu-movil #carrp-movil .menu-movil-carro-icon img {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        object-fit: contain;
        transform: translateY(-10.9%);
    }

    #menu-movil.menu-movil .menu-movil-favorito-icon .btn-favoritos-fab-count,
    #menu-movil.menu-movil .menu-movil-carro-icon .menu-movil-carro-count {
        position: absolute;
        right: auto;
        bottom: auto;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
        transform: translate(-50%, calc(-50% - 0.4vw));
    }

    #menu-movil.menu-movil .menu-movil-favorito-icon .btn-favoritos-fab-count {
        left: 50%;
        top: 50%;
        width: 1.22rem;
        height: 1.22rem;
        border-radius: 50%;
        font-size: 0.72rem;
    }

    #menu-movil.menu-movil .menu-movil-carro-icon .menu-movil-carro-count {
        left: 43%;
        top: 50%;
        width: 1.17rem;
        height: 1.17rem;
        border-radius: 50%;
        font-size: 0.68rem;
        color: #fff;
        background: darkturquoise;
    }
}

/* ≤991 unificado: dibujo de hamburguesa, carrito, usuario e idiomas */
@media (max-width: 991px) {
    #menu-movil.menu-movil #botmenu img,
    #menu-movil.menu-movil #login-sticky-movil img,
    #menu-movil.menu-movil #carrp-movil .menu-movil-carro-icon img,
    #menu-movil.menu-movil #idiomas-movil img,
    #menu-movil.menu-movil #idiomas-movil img.menu-idioma-flag {
        width: 5rem !important;
        height: 5rem !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 5rem !important;
        max-height: 5rem !important;
    }

    /* Corazón favoritos: ~18% más grande; misma caja pulsable */
    #menu-movil.menu-movil #btnFavoritosMenuMovil {
        justify-content: center !important;
        align-items: center !important;
    }

    #menu-movil.menu-movil #btnFavoritosMenuMovil .menu-movil-favorito-icon svg {
        width: 5.9rem !important;
        height: 5.9rem !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 5.9rem !important;
        max-height: 5.9rem !important;
    }
}

@media (max-width: 639px) {
    #menu-movil.menu-movil #botmenu img,
    #menu-movil.menu-movil #login-sticky-movil img,
    #menu-movil.menu-movil #carrp-movil .menu-movil-carro-icon img,
    #menu-movil.menu-movil #idiomas-movil img,
    #menu-movil.menu-movil #idiomas-movil img.menu-idioma-flag {
        width: 3rem !important;
        height: 3rem !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 3rem !important;
        max-height: 3rem !important;
    }

    #menu-movil.menu-movil #btnFavoritosMenuMovil .menu-movil-favorito-icon svg {
        width: 3.55rem !important;
        height: 3.55rem !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 3.55rem !important;
        max-height: 3.55rem !important;
    }
}

@media (max-width: 320px) {
    #menu-movil.menu-movil #botmenu img,
    #menu-movil.menu-movil #login-sticky-movil img,
    #menu-movil.menu-movil #carrp-movil .menu-movil-carro-icon img,
    #menu-movil.menu-movil #idiomas-movil img,
    #menu-movil.menu-movil #idiomas-movil img.menu-idioma-flag {
        width: 2rem !important;
        height: 2rem !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 2rem !important;
        max-height: 2rem !important;
    }

    #menu-movil.menu-movil #btnFavoritosMenuMovil .menu-movil-favorito-icon svg {
        width: 2.35rem !important;
        height: 2.35rem !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 2.35rem !important;
        max-height: 2.35rem !important;
    }
}

/* ≤991 unificado: corazón y bolsa centrados en su caja; el contador sigue al dibujo */
@media (max-width: 991px) {
    #menu-movil.menu-movil #btnFavoritosMenuMovil .menu-movil-favorito-icon,
    #menu-movil.menu-movil #carrp-movil .menu-movil-carro-icon {
        width: max-content !important;
        height: max-content !important;
        flex: 0 0 auto;
        display: block;
        position: relative;
        margin: 0;
    }

    #menu-movil.menu-movil #btnFavoritosMenuMovil .menu-movil-favorito-icon svg,
    #menu-movil.menu-movil #carrp-movil .menu-movil-carro-icon img {
        display: block;
    }

    #menu-movil.menu-movil #btnFavoritosMenuMovil .menu-movil-favorito-icon svg {
        transform: none;
    }

    #menu-movil.menu-movil #carrp-movil .menu-movil-carro-icon img {
        transform: translateY(-9.3%);
    }

    #menu-movil.menu-movil {
        --ficha-badge: 2rem;
        --ficha-badge-font: 1.1rem;
    }

    #menu-movil.menu-movil .menu-movil-favorito-icon .btn-favoritos-fab-count,
    #menu-movil.menu-movil .menu-movil-carro-icon .menu-movil-carro-count {
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--ficha-badge) !important;
        height: var(--ficha-badge) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: var(--ficha-badge-font) !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        transform: translate(-50%, -50%) !important;
    }

    #menu-movil.menu-movil .menu-movil-favorito-icon .btn-favoritos-fab-count > .menu-movil-count-num,
    #menu-movil.menu-movil .menu-movil-carro-icon .menu-movil-carro-count > .menu-movil-count-num {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        font-family: inherit !important;
        font-size: 1em !important;
        font-weight: 700 !important;
        font-style: normal !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        text-indent: 0 !important;
        transform: translateY(0.1em) !important;
    }

    #menu-movil.menu-movil .menu-movil-favorito-icon .btn-favoritos-fab-count {
        left: 50% !important;
    }

    #menu-movil.menu-movil .menu-movil-carro-icon .menu-movil-carro-count {
        left: 43.5% !important;
    }
}

@media (max-width: 639px) {
    #menu-movil.menu-movil {
        --ficha-badge: 1.2rem;
        --ficha-badge-font: 0.7rem;
    }
}

@media (max-width: 320px) {
    #menu-movil.menu-movil {
        --ficha-badge: 0.8rem;
        --ficha-badge-font: 0.45rem;
    }
}

/* Laterales menu-movil: contents por defecto; ≤991 el layout unificado reactiva flex */
#menu-movil.menu-movil .menu-movil-side {
    display: contents;
}

/*
 * ≤991 (todas las páginas): texto logo centrado en viewport; ave a su izquierda.
 */
@media (max-width: 991px) {
    #main-header #menu-movil.menu-movil .menu-izq {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 0.6rem 0 0.6rem !important;
        gap: 0 !important;
    }

    #main-header #menu-movil.menu-movil {
        /* Misma separación visual que corazón → ave (dibujos, no cajas) */
        --ficha-hdr-gap: clamp(0.4rem, 2vw, 0.7rem);
        /* Mitad aprox. de «LUXURY DESIGN» a la talla del logo */
        --ficha-logo-text-half: 3.55em;
        /* Ancho del ave (logo99, aspect 593/611) */
        --ficha-logo-bird-w: min(5.05rem, calc(11.7vw * 593 / 611));
    }

    #main-header #menu-movil.menu-movil .menu-movil-side {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        gap: 0 !important;
    }

    /* Izquierda: grupo compacto; gap simple 12–16px (cajas ajustadas al dibujo) */
    #main-header #menu-movil.menu-movil .menu-movil-side--left {
        --ficha-burger-draw: 5rem;
        --ficha-heart-draw: 5.9rem;
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        flex: 0 0 auto !important;
        width: max-content !important;
        max-width: none !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: clamp(12px, 3.4vw, 16px) !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        z-index: 2 !important;
        pointer-events: none !important;
        overflow: visible !important;
    }

    #main-header #menu-movil.menu-movil .menu-movil-side--left > * {
        pointer-events: auto !important;
    }

    #main-header #menu-movil.menu-movil .menu-movil-side--left::after {
        content: none !important;
        display: none !important;
    }

    /* Cajas izq: más compactas que 12.8/16.5vw; mínimo táctil ~44px; dibujo centrado */
    #main-header #menu-movil.menu-movil .menu-movil-side--left #botmenu {
        flex: 0 0 auto !important;
        width: max(2.75rem, calc(var(--ficha-burger-draw) + 0.5rem)) !important;
        height: max(2.75rem, calc(var(--ficha-burger-draw) + 0.5rem)) !important;
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    #main-header #menu-movil.menu-movil .menu-movil-side--left #btnFavoritosMenuMovil {
        flex: 0 0 auto !important;
        width: max(2.75rem, calc(var(--ficha-heart-draw) + 0.5rem)) !important;
        height: max(2.75rem, calc(var(--ficha-heart-draw) + 0.5rem)) !important;
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    /* Bolsa+login+idiomas: tras el texto; translateX deja aire al borde derecho del viewport */
    #main-header #menu-movil.menu-movil .menu-movil-side--right {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-0.85rem, -50%) !important;
        flex: 0 0 auto !important;
        width: max-content !important;
        max-width: none !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0 !important;
        /* Tras «LUXURY DESIGN»: ~20–24px a 375px (= hueco corazón→ave); bolsa+login se mueven juntos */
        padding-left: calc(var(--ficha-logo-text-half) + clamp(20px, 5.8vw, 24px)) !important;
        font-size: clamp(10px, 2.8vw, 1.4rem) !important;
        box-sizing: border-box !important;
        z-index: 2 !important;
        pointer-events: none !important;
        overflow: visible !important;
    }

    #main-header #menu-movil.menu-movil .menu-movil-side--right > * {
        pointer-events: auto !important;
    }

    /* Link = solo texto; centrado exacto en viewport. Ave absolute a la izquierda. */
    #main-header #menu-movil.menu-movil .logo-desktop.menu-logo-link {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        z-index: 3 !important;
        overflow: visible !important;
        pointer-events: auto !important;
        flex: 0 0 auto !important;
    }

    #main-header #menu-movil.menu-movil .logo-desktop.menu-logo-link .menu-small-logo {
        position: absolute !important;
        right: 100% !important;
        top: 50% !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        margin: 0 0.35rem 0 0 !important;
        flex: 0 0 auto !important;
    }

    #main-header #menu-movil.menu-movil .logo-desktop.menu-logo-link .menu-logo-text {
        position: relative !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Dibujos al inicio de cada caja: el hueco se mide entre iconos, no entre paddings */
    #main-header #menu-movil.menu-movil #carrp-movil,
    #main-header #menu-movil.menu-movil #login-sticky-movil,
    #main-header #menu-movil.menu-movil .menu-movil-side--right #idiomas-movil {
        margin: 0 !important;
        justify-content: flex-start !important;
        flex: 0 0 auto !important;
    }

    /* Bolsa→login / login→idiomas = mismo hueco visual */
    #main-header #menu-movil.menu-movil #login-sticky-movil,
    #main-header #menu-movil.menu-movil .menu-movil-side--right #idiomas-movil {
        margin-left: calc(var(--ficha-hdr-gap) - min(1.28vw, 0.62rem)) !important;
    }

    #main-header #menu-movil.menu-movil #botmenu img,
    #main-header #menu-movil.menu-movil .menu-movil-side--right #idiomas-movil img {
        margin: 0 !important;
    }
}

/* 450–991: botones repartidos a los lados; el texto del logo sigue en el centro. ≤449 queda el grupo compacto. */
@media (min-width: 450px) and (max-width: 991px) {
    #main-header #menu-movil.menu-movil .menu-izq {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        align-items: center !important;
        justify-content: stretch !important;
        padding: 0 0.6rem !important;
    }

    #main-header #menu-movil.menu-movil .menu-movil-side--left,
    #main-header #menu-movil.menu-movil .menu-movil-side--right {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        justify-content: space-evenly !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    /* El ave sale del texto hacia la izquierda y no debe tapar el corazón. */
    #main-header #menu-movil.menu-movil .menu-movil-side--left {
        padding-right: calc(var(--ficha-logo-bird-w) + 0.35rem) !important;
    }

    #main-header #menu-movil.menu-movil .logo-desktop.menu-logo-link {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }

    #main-header #menu-movil.menu-movil #login-sticky-movil,
    #main-header #menu-movil.menu-movil .menu-movil-side--right #idiomas-movil {
        margin-left: 0 !important;
    }

    /* Cajas al tamaño del dibujo: si siguen en 12.8vw se comen el hueco y los iconos quedan pegados. */
    #main-header #menu-movil.menu-movil {
        --ficha-side-box: 5.5rem;
    }

    #main-header #menu-movil.menu-movil .menu-movil-side--right #carrp-movil,
    #main-header #menu-movil.menu-movil .menu-movil-side--right #login-sticky-movil,
    #main-header #menu-movil.menu-movil .menu-movil-side--right #idiomas-movil {
        flex: 0 0 auto !important;
        width: max(2.75rem, var(--ficha-side-box)) !important;
        height: max(2.75rem, var(--ficha-side-box)) !important;
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        max-width: none !important;
        max-height: none !important;
        justify-content: center !important;
    }
}

/* Tras el bloque ≤991: variables de dibujo por rango (si van antes, las pisa el 5rem/5.9rem) */
@media (max-width: 639px) {
    #main-header #menu-movil.menu-movil .menu-movil-side--left {
        --ficha-burger-draw: 3rem;
        --ficha-heart-draw: 3.55rem;
    }

    #main-header #menu-movil.menu-movil {
        --ficha-side-box: 3.5rem;
    }
}

@media (max-width: 320px) {
    #main-header #menu-movil.menu-movil .menu-movil-side--left {
        --ficha-burger-draw: 2rem;
        --ficha-heart-draw: 2.35rem;
    }
}

/* Menú celular y tablet: bloques blancos como el de PC. Cerrado solo el título; al pulsar, foto y opciones. */
@media (max-width: 991px) {
    #cssmenuMobile.cssmenu-mobile--viewport {
        background: #fff !important;
    }

    #cssmenuMobile .menu-m-strip {
        padding: 1.2rem 1.2rem calc(2rem + env(safe-area-inset-bottom, 0px));
        background: #fff;
    }

    #cssmenuMobile .menu-m-search {
        width: 100%;
        max-width: none;
        margin: 0 0 1.2rem;
        padding: 0;
    }

    #cssmenuMobile .menu-m-search .busqueda-contenedor {
        min-height: 4.4rem;
        padding: 0 1rem 0 0.2rem;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        background: #fff;
        box-shadow: none;
    }

    #cssmenuMobile .menu-m-search .busqueda-contenedor input {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 1.6rem;
        color: #111;
        padding: 1rem 0.4rem;
    }

    #cssmenuMobile .menu-m-list {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }

    #cssmenuMobile .menu-m-item,
    #cssmenuMobile .menu-m-toggle--link {
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    #cssmenuMobile .menu-m-item.is-open {
        box-shadow: 0 4px 14px rgba(68, 113, 130, 0.16);
    }

    #cssmenuMobile .menu-m-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        min-height: 4.4rem;
        margin: 0;
        padding: 1rem 1.2rem;
        box-sizing: border-box;
        border: 0;
        background: transparent;
        color: #000;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.25;
        text-transform: uppercase;
    }

    #cssmenuMobile .menu-m-title {
        flex: 0 1 auto;
        min-width: 0;
        max-width: calc(100% - 2.8rem);
        border-bottom: none;
        overflow-wrap: anywhere;
    }

    #cssmenuMobile .menu-m-chevron {
        flex: 0 0 auto;
        width: 1.8rem;
        height: 1.8rem;
        margin-left: auto;
        color: #447182;
        transition: transform 0.28s ease;
    }

    #cssmenuMobile .menu-m-item.is-open .menu-m-chevron {
        transform: rotate(180deg);
    }

    #cssmenuMobile .menu-m-chevron--go {
        transform: none;
    }

    #cssmenuMobile .menu-m-panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.32s ease;
    }

    #cssmenuMobile .menu-m-item.is-open .menu-m-panel {
        grid-template-rows: 1fr;
    }

    #cssmenuMobile .menu-m-panel-inner {
        overflow: hidden;
        min-height: 0;
    }

    #cssmenuMobile .menu-m-item.is-open .menu-m-panel-inner {
        padding: 0.2rem 1.2rem 1rem;
    }

    #cssmenuMobile .menu-m-photo {
        display: block;
        margin: 0.8rem 0 0.6rem;
        border-radius: 4px;
        overflow: hidden;
    }

    #cssmenuMobile .menu-m-photo img {
        display: block;
        width: 100%;
        height: 12rem;
        object-fit: cover;
        object-position: center;
        border-radius: 4px;
        background: #f3f3f3;
    }

    #cssmenuMobile .menu-m-links {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        margin-top: 0.4rem;
    }

    #cssmenuMobile .menu-m-link {
        display: block;
        padding: 0.55rem 0.6rem;
        border-radius: 3px;
        color: #000;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 1.35rem;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.35;
        text-decoration: none;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    #cssmenuMobile .menu-m-panel-inner--foto .menu-m-link--main {
        display: none;
    }

    #cssmenuMobile .menu-m-link:active {
        color: #fff;
        background: #447182;
    }
}

@media (min-width: 450px) and (max-width: 991px) {
    #cssmenuMobile .menu-m-strip {
        padding: 1.6rem 2rem calc(2.4rem + env(safe-area-inset-bottom, 0px));
    }

    #cssmenuMobile .menu-m-toggle {
        font-size: 1.6rem;
        padding: 1.1rem 1.4rem;
    }

    #cssmenuMobile .menu-m-photo img {
        height: 14rem;
    }

    #cssmenuMobile .menu-m-link {
        font-size: 1.45rem;
    }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
    #cssmenuMobile .menu-m-panel,
    #cssmenuMobile .menu-m-chevron {
        transition: none;
    }
}

/*
 * Tablet táctil en ancho de escritorio (p. ej. iPad horizontal):
 * la barra del buscador fijo no crece hasta 700px.
 * Un PC con ratón no entra en esta media query.
 */
@media (hover: none) and (pointer: coarse) and (min-width: 992px) {
    #menu-fixed > .menu-izq > #formBusqueda.busqueda-info {
        flex: 0 1 420px;
        width: 420px;
        max-width: min(420px, 36vw);
        min-width: 0;
        box-sizing: border-box;
    }

    #menubuscar .menu-busqueda-form {
        width: 100%;
        max-width: min(420px, 36vw);
        box-sizing: border-box;
    }
}