/* Mega Menu base styles - kept theme-neutral */
.megamenu {
    width: 100%;
    background: #fff;
    /* border-bottom: 1px solid #e7e7e7; */
    /*position: relative;*/
    z-index: 100;
}

.megamenu--full {
    /* full width: no inner constraint */
}

.megamenu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.megamenu--center .megamenu__list {
    justify-content: center;
}

.megamenu__item {
    position: static;
}

.megamenu__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color .15s ease, color .15s ease;
}

.megamenu__link:hover,
.megamenu__item:hover > .megamenu__link {
    background: #f5f5f5;
    color: #000;
    text-decoration: none;
}

.megamenu__icon {
    height: 18px;
    max-width: 28px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}
.megamenu__icon-class {
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}

.megamenu__label {
    background: #ff5252;
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
}

.megamenu__arrow {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg) translateY(-2px);
    transform-origin: 50% 50%;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
    margin-left: 6px;
    opacity: .7;
    font-size: 0;
    line-height: 0;
}
.megamenu__item--has-submenu:hover > .megamenu__link .megamenu__arrow,
.megamenu__item--has-submenu:focus-within > .megamenu__link .megamenu__arrow {
    transform: rotate(-135deg) translateY(-2px);
    opacity: 1;

    margin-left: 6px;
}

.megamenu__submenu-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    /* top: 100%; */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.megamenu__submenu {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-top: 2px solid var(--color3);
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.megamenu--content .megamenu__submenu {
    max-width: 1280px;
    margin: 0 auto;
    /* border-radius: 16px; */
}
.megamenu__item--has-submenu:hover > .megamenu__submenu-wrapper,
.megamenu__item--has-submenu:focus-within > .megamenu__submenu-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1) rotateX(0);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

/* Initial transform per animation (when hidden) */
.megamenu__submenu-wrapper--anim-0 { transition: none; }
.megamenu__submenu-wrapper--anim-2 { transform: translate3d(0, -15px, 0); }
.megamenu__submenu-wrapper--anim-3 { transform: translate3d(0, 15px, 0); }
.megamenu__submenu-wrapper--anim-4 { transform: scale(.92); transform-origin: top center; }
.megamenu__submenu-wrapper--anim-5 { transform: perspective(800px) rotateX(-18deg); transform-origin: top center; }
.megamenu__submenu-wrapper--anim-6 { transform: translate3d(-15px, 0, 0); }
.megamenu__submenu-wrapper--anim-7 {
    transform: scale(.4);
    transform-origin: top center;
    transition: opacity .25s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .45s;
}
.megamenu__item--has-submenu:hover > .megamenu__submenu-wrapper--anim-7,
.megamenu__item--has-submenu:focus-within > .megamenu__submenu-wrapper--anim-7 {
    transition: opacity .25s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear 0s;
}

.megamenu__submenu-arrow {
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #333;
    opacity: 0;
    transition: opacity .2s ease, bottom .2s ease;
    pointer-events: none;
    z-index: 1001;
}
.megamenu__item--has-submenu:hover > .megamenu__link .megamenu__submenu-arrow,
.megamenu__item--has-submenu:focus-within > .megamenu__link .megamenu__submenu-arrow {
    opacity: 1;
    bottom: -8px;
}

.megamenu__row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
}

.megamenu__col {
    flex: 0 0 auto;
}

/* 12-column grid */
.megamenu__col--1  { width: calc(8.3333% - 18.34px); }
.megamenu__col--2  { width: calc(16.6666% - 18.34px); }
.megamenu__col--3  { width: calc(25% - 17.5px); }
.megamenu__col--4  { width: calc(33.3333% - 16.66px); }
.megamenu__col--5  { width: calc(41.6666% - 16.04px); }
.megamenu__col--6  { width: calc(50% - 15px); }
.megamenu__col--7  { width: calc(58.3333% - 13.34px); }
.megamenu__col--8  { width: calc(66.6666% - 11.66px); }
.megamenu__col--9  { width: calc(75% - 10px); }
.megamenu__col--10 { width: calc(83.3333% - 8.34px); }
.megamenu__col--11 { width: calc(91.6666% - 6.66px); }
.megamenu__col--12 { width: 100%; }

.megamenu__col-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #222;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
}
a.megamenu__col-title {
    display: none;
}

a.megamenu__col-title:hover {
    color: #000;
    text-decoration: none;
}

.megamenu__col-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.megamenu__col-list li {
    margin: 0;
}

.megamenu__col-list li a {
    display: block;
    padding: 4px 0;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    transition: color .15s ease, padding-left .15s ease;
}

/* Columna tipo "Productos": miniatura + nombre + precio.
   Sólo se activa si el item trae imagen o precio; si no, el enlace se pinta
   como cualquier otro de la lista. */
.megamenu__col-list li.megamenu__col-item--product {
    margin-bottom: 4px;
    break-inside: avoid;
}

.megamenu__col-list li a.megamenu__prod {
    display: flex;
    align-items: center;
    gap: 12px;
}

.megamenu__prod-img {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: #fff;
}

.megamenu__prod-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.megamenu__prod-name {
    line-height: 1.25;
}

.megamenu__prod-price {
    font-size: 12px;
    opacity: .7;
}
.megamenu__col-list--cols-2,
.megamenu__col-list--cols-3,
.megamenu__col-list--cols-4,
.megamenu__col-list--cols-5,
.megamenu__col-list--cols-6 { column-gap: 20px; }
.megamenu__col-list--cols-2 { column-count: 2; }
.megamenu__col-list--cols-3 { column-count: 3; }
.megamenu__col-list--cols-4 { column-count: 4; }
.megamenu__col-list--cols-5 { column-count: 5; }
.megamenu__col-list--cols-6 { column-count: 6; }
.megamenu__col-list--cols-2 li,
.megamenu__col-list--cols-3 li,
.megamenu__col-list--cols-4 li,
.megamenu__col-list--cols-5 li,
.megamenu__col-list--cols-6 li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
@media (max-width: 991px) {
    .megamenu__col-list--cols-3,
    .megamenu__col-list--cols-4,
    .megamenu__col-list--cols-5,
    .megamenu__col-list--cols-6 { column-count: 2; }
}
@media (max-width: 600px) {
    .megamenu__col-list--cols-2,
    .megamenu__col-list--cols-3,
    .megamenu__col-list--cols-4,
    .megamenu__col-list--cols-5,
    .megamenu__col-list--cols-6 { column-count: 1; }
}

.megamenu__col-list li a:hover {
    color: #000;
    padding-left: 4px;
    text-decoration: none;
}

.megamenu__col-html {
    font-size: 13px;
    color: #555;
}

.megamenu__col-html img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

/* Predefined tabs inside submenu */
.megamenu__tabs {
    display: flex;
    align-items: stretch;
    min-height: 240px;
    margin: -20px;
    border-radius: 8px!important;
    overflow: hidden;
}
.megamenu__tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 0 220px;
    border-right: 1px solid #eee;
    padding-right: 15px;
    background: #f9f9f9;
    padding: 20px;
}
.megamenu__tabs-nav li { margin: 0; }
.megamenu__tabs-link {
    display: block;
    padding: 8px 12px;
    color: #444;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
}
.megamenu__tabs-link:hover {
    background: #f5f5f5;
    color: #000;
    text-decoration: none;
}
.megamenu__tabs-link.is-active {
    background: #f2ede6;
    color: black;
    font-weight: 600;

}
.megamenu__tabs-content {
    flex: 1 1 auto;
    padding-left: 20px;
    padding: 20px;
}
.megamenu__tabs-pane { display: none; }
.megamenu__tabs-pane.is-active { display: block; }
@media (max-width: 768px) {
    .megamenu__tabs { flex-direction: column; }
    .megamenu__tabs-nav { flex: 0 0 auto; border-right: none; border-bottom: 1px solid #eee; padding-right: 0; padding-bottom: 10px; margin-bottom: 10px; }
    .megamenu__tabs-content { padding-left: 0; }
}

.megamenu-extras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    flex-wrap: wrap;
}
.megamenu-extras__lang,
.megamenu-extras__social { display: inline-flex; align-items: center; }
.megamenu-extras--mobile {
    flex-direction: column;
    align-items: stretch;
    border-top: 1px solid #eee;
    background: #fff;
    padding: 12px 16px;
    gap: 12px;
}
.megamenu-langs__list,
.megamenu-social__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.megamenu-langs__item a {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
}
.megamenu-langs__item a:hover { background: #f5f5f5; color: #000; text-decoration: none; }
.megamenu-langs__item.is-active a { background: #333; color: #fff; border-color: #333; }
.megamenu-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #333;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.megamenu-social__link:hover { background: #555; color: #fff; text-decoration: none; }
.megamenu-social__link--facebook { background: #3b5998; }
.megamenu-social__link--twitter { background: #000; }
.megamenu-social__link--youtube { background: #c4302b; }
.megamenu-social__link--instagram { background: #e1306c; }
.megamenu-social__link--pinterest { background: #bd081c; }
.megamenu-social__link--vimeo { background: #1ab7ea; }
.megamenu-social__link--rss { background: #ee802f; }

/* Sticky behaviour
 * `.megamenu--sticky` es la marca de configuración (la pinta la plantilla).
 * El fijado real lo activa el JS añadiendo `.megamenu--fixed`, porque el menú
 * está anidado en el grid del header y `position: sticky` no tiene recorrido. */
.megamenu--fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    animation: megamenuStickyDown .25s ease;
}

@keyframes megamenuStickyDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Espaciador que reserva el alto del menú al fijarse (evita el salto) */
.megamenu__sticky-spacer {
    width: 100%;
}

@media (max-width: 768px) {
    .megamenu__list { flex-direction: column; }
    .megamenu__submenu-wrapper { position: static; transform: none !important; left: auto; right: auto; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
    .megamenu__submenu { box-shadow: none; padding: 12px; }
    .megamenu__col { width: 100% !important; }
}

/* Vertical menu (displayLeftColumn) */
.megamenu--vertical {
    width: 100%;
    background: #fff;
    border: 1px solid #e7e7e7;
    margin-bottom: 20px;
    padding: 0;
}
.megamenu__v-title {
    background: #f5f5f5;
    padding: 12px 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #e7e7e7;
}
.megamenu__v-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.megamenu__v-item {
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}
.megamenu__v-item:last-child {
    border-bottom: none;
}
.megamenu__v-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}
.megamenu__v-link:hover,
.megamenu__v-item:hover > .megamenu__v-link {
    background: #f7f7f7;
    color: #000;
    text-decoration: none;
}
.megamenu__v-arrow {
    color: #888;
    font-size: 12px;
}
.megamenu__v-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-left: 2px solid #333;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    display: none;
    z-index: 1000;
    min-width: 480px;
}
.megamenu__v-item--has-submenu:hover > .megamenu__v-submenu,
.megamenu__v-item--has-submenu:focus-within > .megamenu__v-submenu {
    display: block;
}
@media (max-width: 768px) {
    .megamenu__v-submenu { position: static; box-shadow: none; padding: 12px; min-width: 0; border-left: none; }
}

/* Mobile/desktop visibility - 991px = mobile, 992px+ = desktop */
.megamenu-mobile-wrapper.mm-show-mobile { display: none; }
.megamenu-mobile-wrapper.mm-show-mobile.mm-show-mobile--always { display: inline-block; }
@media (max-width: 991px) {
    .megamenu--horizontal { display: none !important; }
    .megamenu-mobile-wrapper.mm-show-mobile { display: inline-block; }
}

/* Mobile menu drawer */
.megamenu-mobile-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: transparent;
    border: 0;
    color: #333;
    cursor: pointer;
}
/* Icono hamburguesa (SVG de fotoruanopro incrustado como máscara: 3 líneas,
   la central más corta). El color lo pone background-color (currentColor),
   así hereda el color del botón .megamenu-mobile-trigger. */
.megamenu-mobile-trigger__icon {
    width: 20px;
    height: 21px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21'%3E%3Cpath d='M0 .5h20' fill='none' stroke='%23000'/%3E%3Cpath d='M0 10.5h14' fill='none' stroke='%23000'/%3E%3Cpath d='M0 20.5h20' fill='none' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21'%3E%3Cpath d='M0 .5h20' fill='none' stroke='%23000'/%3E%3Cpath d='M0 10.5h14' fill='none' stroke='%23000'/%3E%3Cpath d='M0 20.5h20' fill='none' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}

.megamenu-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 9998;
}
.megamenu-mobile-wrapper {
    position: relative;
    display: inline-block;
}
.megamenu-mobile-wrapper--dropdown {
    display: block;
    width: 100%;
}

.megamenu-mobile-drawer {
    position: fixed;
    top: 0;
    left: -20px;
    width: 320px;
    max-width: 90vw;
    height: 100vh;
    background: #fff;
    box-shadow: 4px 0 16px rgba(0, 0, 0, .15);
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 9999;
    overflow-y: auto;
}
.megamenu-mobile-drawer--right {
    left: auto;
    right: 0;
    box-shadow: -4px 0 16px rgba(0, 0, 0, .15);
    transform: translateX(100%);
}
.megamenu-mobile-drawer--dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    max-height: 70vh;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .25s ease, opacity .25s ease;
    opacity: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
    z-index: 9999;
}

body.megamenu-mobile-open .megamenu-mobile-overlay {
    opacity: 1;
    visibility: visible;
}
body.megamenu-mobile-open .megamenu-mobile-drawer {
    transform: translateX(20px);
}
body.megamenu-mobile-open .megamenu-mobile-drawer--right {
    transform: translateX(0);
}
body.megamenu-mobile-open .megamenu-mobile-drawer--dropdown {
    transform: scaleY(1);
    opacity: 1;
}
.megamenu-mobile-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    background: #f7f7f7;
}
.megamenu-mobile-drawer__title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    color: #333;
}
.megamenu-mobile-drawer__close {
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0 4px;
}
.megamenu-mobile-drawer__close:hover { color: #000; }

.megamenu-mobile-stack {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.megamenu-mobile-panel {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.megamenu-mobile-panel.is-active { transform: translateX(0); z-index: 2; }
.megamenu-mobile-panel.is-out { transform: translateX(-100%); z-index: 1; }
.megamenu-mobile-drawer--right .megamenu-mobile-panel { transform: translateX(-100%); }
.megamenu-mobile-drawer--right .megamenu-mobile-panel.is-active { transform: translateX(0); }
.megamenu-mobile-drawer--right .megamenu-mobile-panel.is-out { transform: translateX(100%); }

.megamenu-mobile-panel__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
    flex: 0 0 auto;
}
.megamenu-mobile-panel__title {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 14px;
    color: #333;
    text-align: center;
}
.megamenu-mobile-panel__back {
    background: transparent;
    border: 0;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 3px;
}
.megamenu-mobile-panel__back:hover { background: #ececec; color: #000; }
.megamenu-mobile-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}
.megamenu-mobile-panel__item {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f0f0f0;
}
.megamenu-mobile-panel__link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
}
.megamenu-mobile-panel__link:hover { background: #f5f5f5; color: #000; text-decoration: none; }
.megamenu-mobile-panel__next {
    flex: 0 0 50px;
    width: 50px;
    background: transparent;
    border: 0;
    border-left: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 22px;
    color: #888;
    line-height: 1;
}
.megamenu-mobile-panel__next:hover { background: #f5f5f5; color: #333; }

.megamenu-mobile__list,
.megamenu-mobile__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.megamenu-mobile__item {
    border-bottom: 1px solid #f0f0f0;
}
.megamenu-mobile__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.megamenu-mobile__link {
    flex: 1 1 auto;
    display: block;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
}
.megamenu-mobile__link:hover { background: #f5f5f5; color: #000; text-decoration: none; }
.megamenu-mobile__toggle {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    border-left: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 18px;
    color: #888;
}
.megamenu-mobile__toggle.is-open { color: #333; transform: rotate(45deg); }

.megamenu-mobile__sub {
    display: none;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    padding: 8px 16px;
}
.megamenu-mobile__item.is-open > .megamenu-mobile__sub { display: block; }

.megamenu-mobile__group { padding: 8px 0; border-bottom: 1px dashed #e8e8e8; }
.megamenu-mobile__group:last-child { border-bottom: 0; }
.megamenu-mobile__group-title,
.megamenu-mobile__col-title {
    display: block;
    font-weight: 600;
    color: #222;
    margin-bottom: 6px;
    font-size: 13px;
    text-decoration: none;
}
.megamenu-mobile__sublist li a {
    display: block;
    padding: 6px 8px;
    color: #555;
    text-decoration: none;
    font-size: 13px;
}
.megamenu-mobile__sublist li a:hover { color: #000; background: #f0f0f0; padding-left: 10px;}
.megamenu-mobile__html { font-size: 13px; color: #555; }
.megamenu-mobile__html img { max-width: 100%; height: auto; }

/* === Contract / Ofertas / Profesionales en el panel movil ===
   En escritorio son tres pildoras que pinta assets/css/header.css a partir de
   la clase que el back-office asigna al item. La plantilla del tema propaga esa
   clase al panel movil, asi que aqui se reproducen las mismas pildoras. Los
   valores replican los del escritorio; si cambian alli, cambialos aqui.

   En movil va una por linea: el li ocupa la fila completa (display: flex) y el
   enlace de dentro se queda con el ancho de su contenido. */
.megamenu-mobile-panel__item.contract,
.megamenu-mobile-panel__item.ofertas,
.megamenu-mobile-panel__item.b2b {
    display: flex;
    margin: 8px 16px 0;
    border-bottom: 0;
}
.megamenu-mobile-panel__item.contract > .megamenu-mobile-panel__link,
.megamenu-mobile-panel__item.ofertas > .megamenu-mobile-panel__link,
.megamenu-mobile-panel__item.b2b > .megamenu-mobile-panel__link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
/* Profesionales: pildora blanca, la misma que el item por defecto de escritorio.
   El peso sube a 800 (Outfit lo trae) porque el texto oscuro sobre blanco se
   percibe mas fino que el blanco sobre las otras dos pildoras. */
.megamenu-mobile-panel__item.b2b > .megamenu-mobile-panel__link {
    background: #ffffff;
    border: 1px solid #ece2d7;
    box-shadow: 0 6px 16px rgba(37, 31, 26, .05);
    color: #5d4f43;
    font-weight: 800;
}
.megamenu-mobile-panel__item.contract > .megamenu-mobile-panel__link {
    background: linear-gradient(135deg, var(--color3), #28446f);
    border: 1px solid var(--color3);
    box-shadow: 0 10px 22px rgba(159, 187, 212, 0.22);
    color: #fff;
}
.megamenu-mobile-panel__item.ofertas > .megamenu-mobile-panel__link {
    background: linear-gradient(135deg, #d83a34, #b91d27);
    border: 1px solid #be2a2a;
    box-shadow: 0 10px 22px #b91d273d;
    color: #fff;
}


/* =========================================================================
   Desplegables de escritorio (>= 992px): panel compacto anclado a cada item
   -------------------------------------------------------------------------
   El modulo pinta un panel a todo el ancho del contenedor (li static +
   wrapper left/right 0). Este menu solo tiene listas cortas de subcategorias
   (2-8 enlaces), asi que se convierte en un panel compacto bajo cada item,
   con el estilo del resto de la tienda (pildoras, radios amplios, azul
   var(--color3), tostados y sombras azuladas suaves).

   La cabecera del panel (.megamenu__panel-head) la anade la plantilla del
   tema (views/templates/hook/megamenu.tpl). Todos los selectores llevan
   #header .megamenu--horizontal para ganar a las reglas genericas de
   assets/css/header.css (p. ej. "#header li:not(.contract,.ofertas) a:hover").
   ========================================================================= */
@media (min-width: 992px) {

    /* --- Item de primer nivel: pildora suave al pasar o mientras el panel esta abierto --- */
    #header .megamenu--horizontal > .megamenu__list > .megamenu__item {
        position: relative;
    }
    #header .megamenu--horizontal > .megamenu__list > .megamenu__item:not(.contract):not(.ofertas):not(:has(.megamenu__label)) > .megamenu__link:hover,
    #header .megamenu--horizontal > .megamenu__list > .megamenu__item:not(.contract):not(.ofertas):not(:has(.megamenu__label)):hover > .megamenu__link,
    #header .megamenu--horizontal > .megamenu__list > .megamenu__item:not(.contract):not(.ofertas):not(:has(.megamenu__label)):focus-within > .megamenu__link {
        background: #eef4f9;
        color: var(--color3);
        box-shadow: none;
    }
    #header .megamenu--horizontal > .megamenu__list > .megamenu__item > .megamenu__link:focus-visible {
        outline: 2px solid var(--color3);
        outline-offset: 2px;
    }

    /* --- Wrapper: compacto, bajo el item, con puente transparente para no perder el hover --- */
    #header .megamenu--horizontal .megamenu__submenu-wrapper {
        top: 100%;
        left: 0;
        right: auto;
        width: max-content;
        min-width: 300px;
        max-width: min(760px, calc(100vw - 32px));
        padding-top: 10px;
        transform: translate3d(0, 10px, 0);
        /* Al cerrar: pequeno retardo para tolerar salidas breves del puntero */
        transition: opacity .18s ease .12s, transform .18s ease .12s, visibility 0s linear .3s;
    }
    /* Los ultimos items estan en la mitad derecha: el panel se alinea a su derecha para no salirse */
    #header .megamenu--horizontal > .megamenu__list > .megamenu__item:nth-last-child(-n+3) .megamenu__submenu-wrapper {
        left: auto;
        right: 0;
    }
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover > .megamenu__submenu-wrapper,
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within > .megamenu__submenu-wrapper {
        transform: translate3d(0, 0, 0);
        transition: opacity .22s cubic-bezier(.2, .7, .2, 1) .04s, transform .26s cubic-bezier(.2, .7, .2, 1) .04s, visibility 0s linear 0s;
    }

    /* Pico que une el panel con el item */
    #header .megamenu--horizontal .megamenu__submenu-wrapper::before {
        content: "";
        position: absolute;
        top: 4px;
        left: 30px;
        width: 14px;
        height: 14px;
        background: #ffffff;
        border-top: 1px solid #e6edf4;
        border-left: 1px solid #e6edf4;
        border-radius: 3px 0 0 0;
        transform: rotate(45deg);
        z-index: 2;
    }
    #header .megamenu--horizontal > .megamenu__list > .megamenu__item:nth-last-child(-n+3) .megamenu__submenu-wrapper::before {
        left: auto;
        right: 30px;
    }

    /* --- Panel --- */
    #header .megamenu--horizontal .megamenu__submenu,
    #header .megamenu--horizontal.megamenu--content .megamenu__submenu {
        position: relative;
        max-width: none;
        margin: 0;
        padding: 0;
        background: #ffffff;
        border: 1px solid #e6edf4;
        border-radius: 22px;
        overflow: hidden;
        box-shadow:
            0 30px 60px -28px rgba(159, 187, 212, .45),
            0 12px 28px -14px rgba(37, 31, 26, .14);
    }

    /* Cabecera: nombre de la categoria + boton "Ver todo" */
    #header .megamenu--horizontal .megamenu__panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 20px 24px 16px 24px;
        background: linear-gradient(135deg, #f4f8fc 0%, #fdfaf5 100%);
        border-bottom: 1px solid #eef2f6;
    }
    #header .megamenu--horizontal .megamenu__panel-heading {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }
    #header .megamenu--horizontal .megamenu__panel-title {
        display: inline-block;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.15;
        color: #28446f;
        text-decoration: none;
        white-space: nowrap;
        transition: color .18s ease;
    }
    #header .megamenu--horizontal .megamenu__panel-title:hover {
        color: var(--color3);
        background: transparent;
        box-shadow: none;
    }
    #header .megamenu--horizontal .megamenu__panel-all {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 14px 9px 16px;
        border-radius: 999px;
        background: var(--color3);
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        transition: background-color .2s ease, transform .2s ease;
    }
    #header .megamenu--horizontal .megamenu__panel-all:hover,
    #header .megamenu--horizontal .megamenu__panel-all:focus-visible {
        background: #28446f;
        color: #ffffff;
        transform: translateY(-1px);
    }
    /* Flecha del boton: SVG incrustado como mascara, hereda el color del texto */
    #header .megamenu--horizontal .megamenu__panel-all-arrow {
        display: inline-block;
        width: 14px;
        height: 14px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
        transition: transform .2s ease;
    }
    #header .megamenu--horizontal .megamenu__panel-all:hover .megamenu__panel-all-arrow {
        transform: translateX(3px);
    }

    /* --- Cuerpo: lista de subcategorias --- */
    #header .megamenu--horizontal .megamenu__row {
        display: block;
        gap: 0;
        margin: 0;
        padding: 12px 12px 14px 12px;
    }
    #header .megamenu--horizontal .megamenu__col {
        width: 100% !important;
    }
    /* Las variantes --cols-N del modulo usan column-count; aqui manda un grid que
       crece con el numero de enlaces: 1 columna hasta 4, 2 columnas a partir de 5,
       3 a partir de 11. */
    #header .megamenu--horizontal .megamenu__col-list {
        display: grid;
        grid-template-columns: minmax(276px, auto);
        column-count: auto;
        column-gap: 0;
        gap: 2px 8px;
        width: auto;
        margin: 0;
        padding: 0;
    }
    #header .megamenu--horizontal .megamenu__col-list:has(> li:nth-child(5)) {
        grid-template-columns: repeat(2, minmax(230px, auto));
    }
    #header .megamenu--horizontal .megamenu__col-list:has(> li:nth-child(11)) {
        grid-template-columns: repeat(3, minmax(210px, auto));
    }
    #header .megamenu--horizontal .megamenu__col-list > li {
        margin: 0;
        break-inside: auto;
    }
    #header .megamenu--horizontal .megamenu__col-list li a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px 10px 14px;
        border-radius: 12px;
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.25;
        color: #3d2f24;
        white-space: nowrap;
        text-decoration: none;
        transition: background-color .18s ease, color .18s ease;
    }
    /* Punto tostado que se vuelve azul al pasar */
    #header .megamenu--horizontal .megamenu__col-list li a::before {
        content: "";
        flex: 0 0 auto;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #d0b99c;
        transition: background-color .18s ease, transform .18s ease;
    }
    /* Chevron que entra desde la izquierda al pasar (SVG como mascara, color del texto) */
    #header .megamenu--horizontal .megamenu__col-list li a::after {
        content: "";
        flex: 0 0 auto;
        margin-left: auto;
        width: 14px;
        height: 14px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity .18s ease, transform .18s ease;
    }
    #header .megamenu--horizontal .megamenu__col-list li a:hover,
    #header .megamenu--horizontal .megamenu__col-list li a:focus-visible {
        background: #eef4f9;
        color: var(--color3);
        box-shadow: none;
        padding-left: 14px;
        outline: none;
    }
    #header .megamenu--horizontal .megamenu__col-list li a:hover::before,
    #header .megamenu--horizontal .megamenu__col-list li a:focus-visible::before {
        background: var(--color3);
        transform: scale(1.35);
    }
    #header .megamenu--horizontal .megamenu__col-list li a:hover::after,
    #header .megamenu--horizontal .megamenu__col-list li a:focus-visible::after {
        opacity: 1;
        transform: translateX(0);
    }
    /* Los enlaces con miniatura de producto (columnas tipo "Productos") no llevan punto ni chevron */
    #header .megamenu--horizontal .megamenu__col-list li a.megamenu__prod::before,
    #header .megamenu--horizontal .megamenu__col-list li a.megamenu__prod::after {
        display: none;
    }
    /* Subniveles (si algun dia se activan): sangria y texto mas ligero */
    #header .megamenu--horizontal .megamenu__col-sublist {
        display: block;
        margin: 0 0 6px 24px;
        padding: 0;
    }
    #header .megamenu--horizontal .megamenu__col-sublist li a {
        font-size: 13.5px;
        font-weight: 500;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    /* --- Aparicion escalonada de los enlaces al abrir --- */
    #header .megamenu--horizontal .megamenu__col-list > li {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .22s ease, transform .22s ease;
    }
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover .megamenu__col-list > li,
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within .megamenu__col-list > li {
        opacity: 1;
        transform: translateY(0);
    }
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover .megamenu__col-list > li:nth-child(1),
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within .megamenu__col-list > li:nth-child(1) { transition-delay: .06s; }
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover .megamenu__col-list > li:nth-child(2),
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within .megamenu__col-list > li:nth-child(2) { transition-delay: .09s; }
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover .megamenu__col-list > li:nth-child(3),
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within .megamenu__col-list > li:nth-child(3) { transition-delay: .12s; }
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover .megamenu__col-list > li:nth-child(4),
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within .megamenu__col-list > li:nth-child(4) { transition-delay: .15s; }
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover .megamenu__col-list > li:nth-child(5),
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within .megamenu__col-list > li:nth-child(5) { transition-delay: .18s; }
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover .megamenu__col-list > li:nth-child(6),
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within .megamenu__col-list > li:nth-child(6) { transition-delay: .21s; }
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover .megamenu__col-list > li:nth-child(7),
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within .megamenu__col-list > li:nth-child(7) { transition-delay: .24s; }
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover .megamenu__col-list > li:nth-child(n+8),
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within .megamenu__col-list > li:nth-child(n+8) { transition-delay: .27s; }

    /* Bloques HTML dentro del panel: mismo margen que la lista */
    #header .megamenu--horizontal .megamenu__col-html {
        padding: 4px 12px 8px 12px;
        font-size: 14px;
        color: #3d2f24;
    }
}

/* Sin animaciones para quien las tiene desactivadas en el sistema */
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    #header .megamenu--horizontal .megamenu__submenu-wrapper,
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover > .megamenu__submenu-wrapper,
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within > .megamenu__submenu-wrapper {
        transform: none;
        transition: opacity .12s ease, visibility 0s linear 0s;
    }
    #header .megamenu--horizontal .megamenu__col-list > li,
    #header .megamenu--horizontal .megamenu__item--has-submenu:hover .megamenu__col-list > li,
    #header .megamenu--horizontal .megamenu__item--has-submenu:focus-within .megamenu__col-list > li {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
    #header .megamenu--horizontal .megamenu__col-list li a,
    #header .megamenu--horizontal .megamenu__col-list li a::before,
    #header .megamenu--horizontal .megamenu__col-list li a::after,
    #header .megamenu--horizontal .megamenu__panel-all,
    #header .megamenu--horizontal .megamenu__panel-all-arrow {
        transition: none;
    }
}