/** Shopify CDN: Minification failed

Line 8:5660 Expected identifier but found whitespace
Line 8:5661 Unexpected "12px"
Line 8:5666 Unexpected "}"

**/
.m-menu{--main-link-px: 16px;--main-link-py: 20px;font-size:calc(var(--font-base-size, 16)*1px);font-weight:500;white-space:nowrap;list-style:none;display:flex;flex-wrap:wrap;justify-content: center;}.m-menu__arrow,.m-menu__sub-arrow{margin-left:8px}.m-menu__sub-arrow svg{width:8px;height:8px}.m-menu__arrow svg{height:8px;width:auto}.m-menu__arrow{transition:var(--m-duration-default, 0.25s) transform}.m-menu__sub-arrow svg{transform:rotate(-90deg)}.m-menu__link--main{display:flex;align-items:center;position:relative;padding:var(--main-link-py) var(--main-link-px)}.m-menu__link--main:after{position:absolute;content:"";width:0;height:2px;background-color:currentColor;left:var(--main-link-px);bottom:calc(var(--main-link-py) - 5px);transition:width var(--m-duration-default, 0.25s) ease-in-out}.m-menu::-webkit-scrollbar{display:none}.m-menu__item--dropdown{position:relative}.m-menu__item--dropdown .m-mega-menu{right:auto;box-shadow:0 5px 15px 0 rgba(0,0,0,.07);transition:all var(--m-duration-default, 0.25s);transform:translate3d(0, 20px, 0);transform-origin:center}.m-menu__item--dropdown .m-mega-menu__inner{padding:16px}.m-menu__item--dropdown .m-mega-menu__column{position:absolute;top:-16px;left:calc(100% + 16px);opacity:0;visibility:hidden;box-shadow:0 5px 15px 0 rgba(0,0,0,.07);transition:all var(--m-duration-default, 0.25s);transform:translate3d(20px, 0, 0);transform-origin:center;min-width:250px;pointer-events:none;padding:16px;background-color:rgb(var(--color-background))}.m-menu__item--dropdown .m-mega-menu__column::before{content:"";position:absolute;width:100%;height:100%;top:0;left:-35px;z-index:-1}.m-menu__item--dropdown .m-sub-menu__item--level-1{position:relative;width:100%}.m-menu__item--dropdown .m-sub-menu__item--level-1:hover .m-mega-menu__column{transform:translate3d(0, 0, 0);pointer-events:auto;opacity:1;visibility:visible}.m-menu__item--dropdown:hover .m-mega-menu{transform:translate3d(0, 0, 0);pointer-events:auto;opacity:1;visibility:visible}.m-menu__item--mega .m-mega-menu{left:0;right:0;overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - var(--m-header-height, 0px));border-top:1px solid rgba(0,0,0,0);transition:all var(--m-duration-default, 0.25s) ease-in}.m-menu__item--mega .m-mega-menu__inner{padding-top:25px;padding-bottom:25px}.m-menu__item--mega .m-mega-menu::-webkit-scrollbar{display:none}.m-menu__item--mega .m-sub-menu__item--level-1>.m-menu__link{font-weight:300;}.m-menu__item--mega .m-sub-menu__item--level-1>.m-menu__link:hover{background:rgba(0,0,0,0)}.m-menu__item--mega .m-mega-menu__column{margin-top:16px}.m-menu__item--has-submenu .m-mega-menu__inner{display:flex}.m-menu__item--active .m-mega-menu{visibility:visible;opacity:1;transition:none;pointer-events:auto}.m-menu__item--active .m-mega-menu.m-show-menu-column-divider{border-top-color:rgb(var(--color-border))}.m-menu__item--active .m-mega-menu__container{animation:menu_slide_in var(--m-slide-trans-duration) both}.m-menu__item:hover>a:after{width:calc(100% - var(--main-link-px)*2)}.m-menu__item:hover .m-menu__arrow{transform:rotate(90deg)}.m-mega-menu{position:absolute;z-index:50;width:100%;min-width:250px;white-space:normal;visibility:hidden;pointer-events:none;opacity:0;transition-property:transform,opacity,visibility;transition-duration:var(--m-duration-default, 0.25s)}.m-mega-menu__container{margin-left:auto;margin-right:auto}.m-mega-menu__container.w-full{padding-left:20px;padding-right:20px}.m-mega-menu__inner{--column-width: 200px;--items-width: calc(var(--total-columns) * var(--column-width, 200px))}@media(min-width: 1680px){.m-mega-menu__inner{--column-width: 250px}}@media(min-width: 1920px){.m-mega-menu__inner{--column-width: 270px}}.m-mega-menu__inner--stretch-width .m-mega-menu__content{width:calc(100% - var(--items-width));flex:1}.m-mega-menu__content{width:33.333%;padding-left:20px;flex:auto}.m-mega-menu .m-header:hover{transition:none}.m-sub-menu{list-style:none}.m-sub-menu--level-1{display:flex}.m-menu__item--mega .m-sub-menu--level-1{width:66.667%;margin-left:-12px;margin-right:-12px}.m-menu__item--mega .m-sub-menu--level-1.m\:w-full{width:100%}.m-menu__item--dropdown .m-sub-menu--level-1{flex-direction:column;width:100%}.m-menu__item--mega .m-mega-menu__inner--stretch-width .m-sub-menu--level-1{width:var(--items-width)}.m-sub-menu__item>a{color:var(--Text-Neutral-Inverse-secondary, #4F4F4F);font-weight:300;display:block;overflow:hidden;white-space:normal;transition:all var(--m-duration-default, 0.25s)}.m-sub-menu__item>a:hover{color:currentColor;text-decoration-line: underline;font-weight: 600;}.m-sub-menu__item--level-1>a{display:flex;align-items:center;justify-content:space-between}.m-mega-menu__inner--stretch-width .m-sub-menu__item--level-1{min-width:200px;padding-right:8px}.m-menu__item--mega .m-sub-menu__item--level-1{width:50%;margin-bottom:16px}.m-menu__item--mega .m-sub-menu__item--level-1>a{color:var(--Text-Neutral-Inverse-primary, #1E1E1E);}@media screen and (min-width: 1536px){.m-menu__item--mega .m-sub-menu__item--level-1{width:25%}}@media screen and (min-width: 1280px){.m-menu__item--mega .m-sub-menu__item--level-1{width:33.333%}}.m-show-menu-column-divider .m-sub-menu__item--level-1 .comentado{padding:0 18px;}.m-show-menu-column-divider .m-sub-menu__item--level-1:first-child{padding-left:0;border-left:none}.logo-left__2l .m-menu{--main-link-px: 20px;--main-link-py: 16px;margin-left:calc(-1*var(--main-link-px));margin-right:calc(-1*var(--main-link-px))}.both-center .m-header__menu:first-child .m-menu{justify-content:flex-end}.logo-center__2l .m-menu{--main-link-px: 32px;justify-content:center}@media(max-width: 1440px){--main-link-px: 12px}}.m-mega-banner{height:100%;position:relative}.m-mega-banner__image{overflow:hidden}.m-mega-banner .m-image{transition:all var(--m-duration-image, 0.65s)}.m-mega-banner__title{font-size:24px;font-weight:400;color:currentColor}.m-mega-banner__description{color:rgba(var(--color-foreground), 0.6);font-size:calc(var(--font-base-size, 16)*1px);margin-top:8px}.m-mega-banner__button{margin-top:8px}.m-mega-banner--outside .m-mega-banner__inner{margin-top:16px}.m-mega-banner--inside .m-mega-banner__inner{position:absolute;top:0;left:0;width:100%;height:100%;padding:24px}.m-mega-banner--inside .m-mega-banner__button{position:absolute !important;bottom:24px;left:24px}.m-mega-banner--no-content .m-mega-banner__inner{display:none;padding:0;margin:0}.m-mega-banner:hover .m-image{transform:scale(1.06)}@media screen and (min-width: 768px){.m-menu__item--has-submenu .m-mega-collection-list{padding-left:1rem}}@media screen and (min-width: 1280px){.m-menu__item--has-submenu .m-mega-collection-list{padding-left:3rem}}.m-mega-collection-list .m-collection-card__link,.m-mega-collection-list .m-collection-card__title{color:currentColor}.m-mega-product-list__header{display:flex;align-items:center;justify-content:space-between;margin-top:-10px;margin-bottom:16px;padding:0 8px}.m-mega-product-list__heading{font-size:24px;font-weight:500;white-space:normal;color:currentColor}.m-mega-product-list .m-product-card__name,.m-mega-product-list .m-product-card__title,.m-mega-product-list .m-price__sale .m-price-item--regular,.m-mega-product-list .m-price{color:currentColor}.m-mega-product-list .m-price__sale .m-price-item--regular{opacity:.6}.m-mega-product-list .m-slider-controls{margin-top:0;margin-left:-16px}.m-mega-product-list .m-slider-controls button{width:40px;height:40px;border-radius:9999px;cursor:pointer}.m-mega-product-list .m-slider-controls button.m-slider-controls__button-next{margin-right:0}.m-mega-product-list .m-product-card__price{font-size:14px}@media screen and (min-width: 768px){.m-menu__item--has-submenu .m-mega-product-list{padding-left:15px}}@media screen and (min-width: 1280px){.m-menu__item--has-submenu .m-mega-product-list{padding-left:50px}}.m-menu__item--has-submenu .m-mega-blog-list{border-left:1px solid rgb(var(--color-border))}@media screen and (min-width: 768px){.m-menu__item--has-submenu .m-mega-blog-list{padding-left:15px}}@media screen and (min-width: 1280px){.m-menu__item--has-submenu .m-mega-blog-list{padding-left:60px}}.m-mega-blog-list__item+.m-mega-blog-list__item{margin-top:32px}.m-mega-article-card__content{padding-left:20px;white-space:normal}.m-mega-article-card__title{font-weight:500}.m-mega-article-card__tag{font-size:.75rem;text-transform:uppercase;margin-bottom:4px;display:block}.m-menu-drawer{position:absolute;top:100%;left:0;right:0;touch-action:none;visibility:hidden;pointer-events:none;z-index:59;height:var(--menu-drawer-height)}.m-menu-drawer.open{pointer-events:auto;cursor:pointer;visibility:visible}.m-menu-drawer__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;z-index:19;transition:all var(--m-duration-default, 0.25s)}.m-menu-drawer.open .m-menu-drawer__backdrop{background-color:rgba(0,0,0,.3);transition-delay:.15s}.m-menu-drawer__wrapper{color:rgb(var(--color-foreground));background-color:rgb(var(--color-background));width:450px;max-width:100%;height:100%;transition:all var(--m-duration-default, 0.25s);transform:translateX(-100%);overflow:hidden;cursor:auto;position:absolute;top:0;left:0;z-index:29}.m-menu-drawer.open .m-menu-drawer__wrapper{transform:translateX(0)}@media(max-width: 767px){.m-menu-drawer__wrapper{width:calc(100%)}}.m-menu-drawer__content{display:flex;flex-direction:column;flex-grow:1;justify-content:space-between;padding-top:5px;height:100%;transition:padding var(--m-duration-default, 0.25s);overflow-y:scroll}.m-menu-drawer__content::-webkit-scrollbar{width:3px}.m-menu-drawer__content::-webkit-scrollbar-thumb{background:#ebebeb}.m-menu-drawer__content::-webkit-scrollbar-thumb:hover{background:#555}.m-header.stuck .m-menu-drawer{height:calc(100vh - var(--m-header-height))}.m-menu-mobile{list-style:none;padding:0;margin:0}.m-menu-mobile__item{display:flex;align-items:center}.m-menu-mobile__item>a{display:flex;align-items:center;justify-content:space-between;flex-grow:1;padding:12px 16px;position:relative}.m-menu-mobile__item--no-submenu .m-menu-mobile__back-button{margin-bottom:30px}.m-menu-mobile__toggle-button{display:flex;align-items:center;justify-content:center;flex:0 0 48px;height:100%;min-height:48px;cursor:pointer}.m-menu-mobile__toggle-button svg{width:16px;height:16px}.m-menu-mobile__back-button{font-weight:500;display:flex;align-items:center;padding:16px 0;margin:0 16px 10px;text-align:left;border-bottom:1px solid rgb(var(--color-border))}.m-menu-mobile__back-button *{pointer-events:none}.m-menu-mobile__back-button svg{width:16px;height:16px}.m-menu-mobile__back-button span{margin-left:12px}.m-menu-mobile .m-mega-banner--inside .m-mega-banner__inner{padding:20px}.m-menu-mobile .m-mega-banner--inside .m-mega-banner__button{bottom:20px;left:20px}.m-menu-mobile .m-mega-article-card__content{padding-left:0;padding-top:12px}.m-megamenu-mobile{position:absolute;top:0;bottom:0;left:0;width:100%;display:flex;flex-direction:column;background-color:rgb(var(--color-background));transform:translateX(100%);z-index:9;visibility:hidden}.m-megamenu-mobile.open{transform:translateX(0)}.m-menu-drawer.open .m-megamenu-mobile{visibility:visible;transition:all var(--m-duration-default, 0.25s)}.m-megamenu-mobile__wrapper{overflow-y:scroll;overflow-x:hidden;display:flex;flex-direction:column}.m-megamenu-mobile__wrapper.open-submenu{overflow:hidden}.m-submenu-open--level-2 .m-megamenu-mobile--level-1{overflow:hidden}.m-submenu-mobile{margin-bottom:16px}.m-megamenu-mobile__block{padding-left:15px;padding-right:15px;padding-bottom:20px}.m-menu-customer{margin-top:40px}.m-menu-customer__wrapper{margin-bottom:15px;padding:16px;display:block}@media(min-width: 1280px){.m-menu-customer__wrapper{display:none}}.m-menu-customer__label{font-size:20px;font-weight:500;margin-bottom:24px}.m-menu-customer__name{width:100%;display:flex;align-items:center;padding-top:12px;padding-bottom:12px;margin-bottom:12px}.m-menu-customer__name svg{width:24px;height:24px}.m-menu-customer__name span{margin-left:8px}.m-menu-customer .m-signin-button{margin-bottom:12px}.m-menu-customer a.m-button{width:100%}.m-menu-customer__language-currency{display:flex;flex-wrap:wrap}.m-menu-customer__language-currency .m-switcher-dropdown{padding-top:10px;padding-bottom:10px;display:block}@media(min-width: 1280px){.m-menu-customer__language-currency .m-switcher-dropdown{display:none}}.m-logo{font-size:1rem;line-height:unset;padding-left:16px;padding-right:16px;display:flex;align-items:center;justify-content:center;position:relative;color:inherit}.m-logo-mobile:before{padding-top:calc(100%/(.0001 + var(--aspect-ratio-mobile, --aspect-ratio))) !important}.m-logo__image{position:relative;padding-top:10px;padding-bottom:10px}.m-logo__image-transparent{display:none}.m-logo a{width:var(--logo-width-desktop, 150px)}.m-logo .m-image{transition:all var(--m-duration-default, 0.25s);line-height:1}.m-logo img{margin:auto}.m-menu-bar{position:relative;z-index:1}.m-header{--m-slide-trans-duration: 0.3s;--m-slide-from-val: -65px;--m-slide-to-val: 65px;min-height:calc(var(--m-topbar-height, 0px) + var(--m-header-height, 40px));position:relative}.m-header.slide-from-right{--m-slide-from-val: 65px;--m-slide-to-val: -65px }.m-header.slide-reveal{--m-slide-from-val: 0;--m-slide-to-val: 0 }.m-header header{transition:all var(--m-duration-default, 0.25s)}.m-header__wrapper{width:100%;transition:transform var(--m-duration-long, 0.5s);will-change:transform;z-index:82;position:relative}.header-sticky-always .m-header__wrapper{position:fixed;top:0}.m-header__desktop{position:relative;display:none}@media screen and (min-width: 1024px){.m-header__desktop{display:block}}.m-header__mobile .m-logo a{text-align:center;width:var(--logo-width-mobile, 100px);white-space:nowrap;pointer-events:auto}.m-header__mobile m-search-popup{padding:10px}.m-header__mobile.m-header__mobile--2l{flex-direction:column;align-items:stretch}.m-header__mobile--2l .m-header__mobile-top{display:flex;align-items:center;width:100%}.m-header__mobile--2l .m-header__mobile-search{width:100%;padding-top:2px;padding-bottom:10px}.m-header__mobile--2l .m-header__mobile-search m-search-popup{padding:0;width:100%}.m-header__mobile--2l .m-header__mobile-search .m-header__search{width:100%}.m-header__mobile--2l .m-header__mobile-search .m-search-form--full{width:100%;justify-content:flex-start}.m-header__mobile--2l .m-header__mobile-search .m-search-form--full>span{flex:0 1 auto}.m-header__mobile--2l .m-header__mobile-search .m-search-form--icon-left{margin-right:0}@media screen and (min-width: 1024px){.m-header__mobile{display:none}}@media(max-width: 480px){.m-header__mobile>*:last-child{padding-right:0}}.m-header__bg{display:block;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;pointer-events:none;transition:all var(--m-duration-default, 0.25s)}.m-mega-active .m-header__bg{opacity:1}.m-header__dropdown-bg{width:100vw;height:calc(var(--sf-dropdown-height, 0px)*1px);position:absolute;left:0;right:0;top:100%;opacity:0;pointer-events:none;transform-origin:top left;transition:all var(--m-duration-default, 0.25s)}.m-mega-active .m-header__dropdown-bg{opacity:1}.m-header__overlay{background-color:rgba(0,0,0,.6);position:fixed;top:calc(var(--m-topbar-height, 0px) + var(--m-announcement-height, 0px));right:0px;bottom:0px;left:0px;opacity:0;visibility:hidden;pointer-events:none;z-index:-1;display:none;transition:all var(--m-duration-default, 0.25s)}.m-mega-active .m-header__overlay{z-index:29;opacity:1;visibility:visible}@media screen and (min-width: 768px){.m-header__overlay{display:block}}.m-header__container{z-index:1}.m-header__inner{display:flex;align-items:center;margin-left:-16px;margin-right:-16px}.m-header__left,.m-header__center,.m-header__right{display:flex;align-items:center}.m-header__left{justify-content:flex-start}.m-header__center{justify-content:center}.m-header__right{justify-content:flex-end}.m-header:not(.m-mega-active,.stuck,.header-sticky-always).transparent-on-top header:not(.header-drawer-open){color:rgb(var(--header-transparent-text-color, #fff))}.m-header:not(.m-mega-active,.stuck,.header-sticky-always).transparent-on-top header:not(.header-drawer-open) .m-hamburger-box{--color-foreground: var(--header-transparent-text-color, #fff)}.transparent-on-top{position:absolute;left:0px;right:0px;z-index:70}.transparent-on-top header:not(.header-drawer-open){background-color:rgba(0,0,0,0);border-bottom:none;box-shadow:none}.transparent-on-top .m-menu-bar{background-color:rgba(0,0,0,0);transition:all var(--m-duration-default, 0.25s)}.transparent-on-top .m-logo__image-default{display:none}.transparent-on-top .m-logo__image-transparent{display:flex}.transparent-on-top .header-drawer-open .m-logo__image-default{display:flex}.transparent-on-top .header-drawer-open .m-logo__image-transparent{display:none}.m-header.stuck .m-header__wrapper{position:fixed;top:0;left:0;transform:none;box-shadow:0px 4px 20px rgba(0,0,0,.04)}.m-header.stuck .m-header__wrapper.m-unset-shadow{box-shadow:none}.m-header.stuck .m-logo a{width:var(--logo-width-sticky, 100px)}.m-header.stuck .m-header__mobile .m-logo a{width:var(--logo-width-mobile, 100px)}.m-header.stuck.transparent-on-top .m-header__mobile,.m-header.stuck.transparent-on-top .m-header__desktop,.m-header.stuck.transparent-on-top .m-menu-bar{background-color:rgb(var(--color-background))}.m-header.stuck.transparent-on-top .m-logo__image-default{display:flex}.m-header.stuck.transparent-on-top .m-logo__image-transparent{display:none}.m-header.scroll-up .m-header__wrapper{transform:none}.m-header.scroll-down.stuck .m-header__wrapper{transform:translate3d(0, -100%, 0)}.m-header.header-sticky-always.transparent-on-top .m-header__mobile .comentado,.m-header.header-sticky-always.transparent-on-top .m-header__desktop,.m-header.header-sticky-always.transparent-on-top .m-menu-bar{background-color:rgb(var(--color-background))}.m-header.header-sticky-always.transparent-on-top .m-logo__image-default{display:flex}.m-header.header-sticky-always.transparent-on-top .m-logo__image-transparent{display:none}.m-header.header-sticky-always .m-header__wrapper:not(.m-unset-shadow){box-shadow:0px 4px 20px rgba(0,0,0,.04)}.m-mega-active header{box-shadow:none}.m-mega-active.transparent-on-top .m-logo__image-default{display:flex}.m-mega-active.transparent-on-top .m-logo__image-transparent{display:none}.both-center .m-header__menu{width:37.5%}.both-center .m-header__logo{width:25%}.logo-left-menu-center .m-header__left,.logo-left-menu-center .m-header__right{flex:1 1 0%}.logo-left-menu-center .m-header__center{flex-shrink:1;flex-grow:2}.logo-left__2l .m-header__inner{padding-bottom:8px;padding-top:8px}.logo-left__2l .m-header__left{flex:0 0 auto}.logo-left__2l .m-header__center{flex:1 1 0%;min-width:0;padding-left:24px;padding-right:24px;position:relative;z-index:2}.logo-left__2l .m-header__center .m-header__search{width:100%;position:relative;z-index:2}.logo-left__2l .m-header__center .m-search-form--full{width:100%;min-width:0;justify-content:flex-start}.logo-left__2l .m-header__center .m-search-form--full>span{flex:0 1 auto}.logo-left__2l .m-header__center .m-search-form--icon-left{margin-right:0}.logo-left__2l .m-header__center .m-search-form__button{padding-left:12px}.logo-left__2l .m-header__center .m-search-form__label{padding-left:8px}.logo-left__2l .m-header__center .m-search-form__button svg{width:16px;height:16px}.logo-left__2l .m-header__right{flex:0 0 auto}.logo-center__2l .m-header__inner{margin-left:0;margin-right:0}.m-hamburger-box{display:inline-block;vertical-align:-1px;position:relative;width:20px;padding:14px 0;border:0;cursor:pointer;pointer-events:auto}.m-hamburger-box__inner{position:absolute;top:50%;left:0;margin-top:-1px;width:100%;height:2px;background:rgb(var(--color-foreground));transition:transform .2s ease}.m-hamburger-box__inner:before,.m-hamburger-box__inner:after{content:"";display:block;position:absolute;width:100%;height:2px;background-color:inherit;background:rgb(var(--color-foreground))}.m-hamburger-box__inner:before{top:-7px;transition:top .2s ease .22s,opacity .2s ease,width .2s ease}.m-hamburger-box__inner:after{bottom:-7px;transition:bottom .2s ease .22s,transform .2s ease,width .2s ease}.m-hamburger-box.active .m-hamburger-box__inner{transform:rotate(45deg);transition-delay:.22s}.m-hamburger-box.active .m-hamburger-box__inner:before{top:0;opacity:0;width:100%;transition:top .2s ease,opacity .2s ease .22s,width .1s ease}.m-hamburger-box.active .m-hamburger-box__inner:after{bottom:0;transform:rotate(-90deg);width:100%;transition:bottom .2s ease,transform .2s ease .22s,width .1s ease}.m-menu-button{pointer-events:none}.m-header .ssw-link-fave-menu,.m-header__compare,.m-header__account,.m-header__wishlist{position:relative;padding:14px 8px}.m-search-wrapper .m-header .ssw-link-fave-menu,.m-search-wrapper .m-header__compare,.m-search-wrapper .m-header__account,.m-search-wrapper .m-header__wishlist{padding:0;margin-left:8px;margin-right:8px}.m-header__account-text{padding:20px 16px}@media screen and (min-width: 1024px){.m-header .m-cart-icon-bubble .comentado{margin-right:22px}}.m-search-form--icon-left{margin-right:16px}.m-search-form--full{border:1px solid rgb(var(--color-border));border-radius:.375rem;transition:border .3s;height:42px}.m-search-form--full:hover{border-color:rgb(var(--color-foreground))}.m-search-form__label{color:rgba(var(--color-foreground), 0.6);padding-left:12px;white-space:nowrap}.m-search-form__button{padding:8px 7px}@media(min-width: 1280px){.m-search-form--full{min-width:250px}.m-search-form--full>span{flex:1}}


/* =========================================================
   Mega menu · Banner block — full-bleed overlay (custom)
   Aplica a "Banner (Mega menu)" con estilo "Content inside"
   ========================================================= */

/* El bloque del banner ocupa todo el lado derecho y se
   extiende hasta el borde de la pantalla, sin espacios.
   El calc((100% - 100vw)/2) es un full-bleed universal:
   funciona con cualquier contenedor (container / fluid / w-full)
   porque el contenido está centrado horizontalmente. */
.m-mega-menu__content:has(.m-mega-banner--inside) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  padding-inline-start: 40px;
  padding-inline-end: 0;
  /* extiende hacia el borde de la pantalla (lado del banner) */
  margin-inline-end: calc((100% - 100vw) / 2);
  /* cancela el padding vertical del inner para llenar todo el alto */
  margin-top: -40px;
  margin-bottom: -40px;
}

/* El banner llena por completo su columna */
.m-mega-menu__content:has(.m-mega-banner--inside) .m-mega-banner--inside {
  width: 100%;
  height: auto;
  min-height: 340px;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

/* La imagen cubre todo el banner */
.m-mega-banner--inside .m-mega-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}
.m-mega-banner--inside .m-mega-banner__image .m-image,
.m-mega-banner--inside .m-mega-banner__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Degradado encima de la imagen (oscurece la parte inferior
   para que el texto se lea sobre la imagen) */
.m-mega-banner--inside .m-mega-banner__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

/* El texto/título va encima de la imagen, anclado abajo */
.m-mega-banner--inside .m-mega-banner__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 40px;
  color: #fff;
}
.m-mega-banner--inside .m-mega-banner__title,
.m-mega-banner--inside .m-mega-banner__description {
  color: #fff;
}

.m-mega-banner--inside .m-mega-banner__title {
  width: 220px;
}

/* El botón queda en el flujo, debajo del texto (sobreescribe
   el posicionamiento absoluto por defecto del estilo inside) */
.m-mega-banner--inside .m-mega-banner__button {
  position: static !important;
  align-self: flex-start;
  margin-top: 12px;
  color: #fff;
}

/* Imagen decorativa absoluta, encima de la imagen del banner */
.m-mega-banner--inside .m-mega-banner__decor {
  position: absolute;
  bottom: 55px;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}
.m-mega-banner__decor svg {
  display: block;
}
/* El decorativo solo aplica al estilo overlay (inside) */
.m-mega-banner:not(.m-mega-banner--inside) .m-mega-banner__decor {
  display: none;
}

/* =========================================================
   Tag / etiqueta sobre la imagen del banner (arriba a la derecha)
   ========================================================= */

/* Ancla la etiqueta a la imagen (necesario para el estilo "outside";
   en "inside" la imagen ya es su propio bloque contenedor) */
.m-mega-banner__image {
  position: relative;
}

.m-mega-banner__tag {
  position: absolute;
  right: 25px;
  top: 18px;
  z-index: 7;
  pointer-events: none;
  display: flex;
  padding: 10px 14px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--Background-Brand-brand-red, #882F12);
  color: var(--Text-Neutral-primary, #FFF);
  font-size: var(--Sub-Heading-title-medium-M-size, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

/* "Ver todos" en el segundo nivel del Mega menu (solo desktop) */
@media screen and (min-width: 1024px) {
  .m-sub-menu__item--level-2.ver-todos-menu {
    margin-top: 40px;
  }
  .m-sub-menu--level-1--collection-img .m-sub-menu__item--level-2.ver-todos-menu {
    margin-top: 0px;
  }
  .m-sub-menu__item--level-2.ver-todos-menu .m-menu__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
  }
}

/* Collection img (Mega menu) — columnas divididas + imagen de colección */
@media screen and (min-width: 1024px) {
  .m-sub-menu--level-1--collection-img {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
  }
  .m-sub-menu__item--collection-img {
    margin-bottom: 0;
  }
}
.m-mega-collection-img__image {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 14px;
}
.m-mega-collection-img__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* =========================================================
   Mega menu · Hover Banner block — master/detail + banner
   (Bloque "Hover Banner (Mega menu)" -> .m-mega-menu--hover)
   ---------------------------------------------------------
   3 zonas en fila:
     1) Izquierda  = items de nivel 2 (hijos de "Sol").
     2) Centro     = items de nivel 3 del item activo/hover.
     3) Derecha    = banner (identico al bloque "Banner (Mega menu)";
                     su CSS no se modifica aqui).
   La zona 3 solo existe si el bloque tiene imagen de banner.
   Solo aplica en DESKTOP; en mobile el menu actual no cambia.
   ========================================================= */
@media screen and (min-width: 1024px) {
  /* Contenedor en fila. El panel de nivel-3 (columna) se posiciona
     de forma absoluta sobre un "slot" reservado en el flujo flex,
     de modo que el banner quede siempre a su derecha. */
  .m-menu__item--mega .m-mega-menu--hover .m-mega-menu__inner {
    --hover-left-w: 280px;
    --hover-detail-w: 320px;
    display: flex;
    position: relative;
    align-items: stretch;
    min-height: 320px;
  }

  /* --- Zona 1 · columna izquierda (nivel 2 real de Shopify) --- */
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu--level-1--hover {
    flex: 0 0 var(--hover-left-w);
    width: var(--hover-left-w);
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0;
    align-self: flex-start;
  }

  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__item--level-1 {
    width: 100%;
    margin: 0;
  }

  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__item--level-1 > .m-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 8px;
    line-height: 1.3;
    transition: background-color var(--m-duration-default, 0.25s);
  }

  /* Fondo suave en el item activo/hover de la columna izquierda */
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__item--level-1.is-active > .m-menu__link,
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__item--level-1 > .m-menu__link:hover {
    background-color: #f8ead2;
    text-decoration: none;
    color: var(--Text-Neutral-Inverse-primary, #1e1e1e);
    font-weight: 400;
  }

  /* Chevron ">" solo en items que tienen hijos */
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__chevron {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
    color: currentColor;
    opacity: 0.65;
    transition: opacity var(--m-duration-default, 0.25s), transform var(--m-duration-default, 0.25s);
  }
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__chevron svg {
    display: block;
    width: 12px;
    height: 7px;
  }
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__item--level-1:hover .m-sub-menu__chevron,
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__item--level-1.is-active .m-sub-menu__chevron {
    opacity: 1;
    transform: rotate(-90deg);
  }

  /* Slot que reserva el ancho de la zona 2 en el flujo flex, para
     que el banner (zona 3) quede a su derecha. Sin banner, se estira
     para llenar el espacio restante. */
  .m-menu__item--mega .m-mega-menu--hover .m-mega-menu__detail-slot {
    flex: 0 0 var(--hover-detail-w);
    align-self: stretch;
  }
  .m-menu__item--mega .m-mega-menu--hover .m-mega-menu__inner:not(:has(.m-mega-menu__content)) .m-mega-menu__detail-slot {
    flex: 1 1 auto;
  }

  /* --- Zona 2 · columna central (nivel 3 real de Shopify) --- */
  /* Cada submenu se posiciona sobre el slot; solo el del item activo
     es visible. Permanece visible aunque el mouse se mueva de la
     columna izquierda hacia la derecha, porque su visibilidad depende
     de la clase `is-active` (controlada por JS), no de :hover. */
  .m-menu__item--mega .m-mega-menu--hover .m-mega-menu__column {
    position: absolute;
    top: 30px;
    bottom: 0;
    left: var(--hover-left-w);
    width: var(--hover-detail-w);
    margin: 0;
    padding-left: 25px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--m-duration-default, 0.25s);
  }
  /* Sin banner, la columna central se estira hasta el borde derecho */
  .m-menu__item--mega .m-mega-menu--hover .m-mega-menu__inner:not(:has(.m-mega-menu__content)) .m-mega-menu__column {
    width: auto;
    right: 0;
  }

  /* La columna de nivel 3 SOLO se revela cuando el megamenu esta
     realmente abierto (el <li> tiene .m-menu__item--active, que anade
     el JS al hacer hover real sobre el item). Sin este gate, el
     item .is-active pre-seleccionado dejaba un panel invisible
     (opacity:0 heredado) pero con visibility:visible y pointer-events:auto,
     que capturaba el mouse y disparaba la apertura del megamenu antes
     de pasar por los items. */
  .m-menu__item--mega.m-menu__item--active .m-mega-menu--hover .m-sub-menu__item--level-1.is-active > .m-mega-menu__column {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* La lista de nivel 3 en columna vertical (no en fila) */
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu--level-2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu--level-2 .m-menu__link {
    padding: 5px 0;
  }

  /* --- Zona 3 · banner --- */
  /* El banner conserva su estilo (bloque "Banner (Mega menu)"). Solo
     se ancla a la derecha del slot; su apariencia no se modifica. */
  .m-menu__item--mega .m-mega-menu--hover .m-mega-menu__content {
    align-self: stretch;
  }

  /* --- Link especial al final de la columna de nivel 2 --- */
  /* Link directo: texto (font-weight 400) + flecha a la derecha. */
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__item--special {
    margin-top: 8px;
  }
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__item--special > .m-sub-menu__special-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0px 16px;
    border-radius: 8px;
    color: var(--Text-Neutral-Inverse-primary, #1e1e1e);
    font-weight: 400;
    line-height: 1.3;
    transition: background-color var(--m-duration-default, 0.25s);
  }
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__item--special > .m-sub-menu__special-link:hover {
    background-color: transparent;
    color: var(--Text-Neutral-Inverse-primary, #1e1e1e);
    text-decoration: none;
    font-weight: 400;
  }
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__special-arrow {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .m-menu__item--mega .m-mega-menu--hover .m-sub-menu__special-arrow svg {
    display: block;
    width: 6px;
    height: 10px;
  }
}