/* MeSobra · Estándar web 2026.09 · Fuente normativa: marca/mesobra-web-2026/MANUAL-DE-MARCA.md
   Five button families. Existing public components are mapped here for compatibility. */
:root{
 --ms-green:#237d30;--ms-green-hover:#1b6525;--ms-forest:#315f3b;--ms-forest-hover:#244a2e;--ms-on-green:#fff;--ms-ink:#203a2e;--ms-muted:#526657;
 --ms-paper:#f6f7f2;--ms-white:#fff;--ms-line:#d5e1cf;--ms-sage:#edf5e9;--ms-mint:var(--ms-sage);--ms-olive:var(--ms-sage);
 --ms-danger:#a63832;--ms-danger-hover:#832822;--ms-radius-button:10px;--ms-radius-card:14px;
 --ms-font:'Raleway',sans-serif;--ms-font-number:'Open Sans',sans-serif;
 --ms-space-1:4px;--ms-space-2:8px;--ms-space-3:12px;--ms-space-4:16px;--ms-space-6:24px;--ms-space-8:32px;--ms-space-12:48px;
 --ms-shadow:0 4px 18px rgba(32,58,46,.06);--ms-motion:180ms ease;
 /* Route earlier shared tokens through one palette. */
 --mesobra-ui-ink:var(--ms-ink);--mesobra-ui-ink-soft:#344b3e;--mesobra-ui-muted:var(--ms-muted);
 --mesobra-ui-green:var(--ms-green);--mesobra-ui-green-dark:var(--ms-forest);--mesobra-ui-green-deep:var(--ms-forest-hover);
 --mesobra-ui-green-soft:var(--ms-sage);--mesobra-ui-canvas:var(--ms-paper);--mesobra-ui-line:var(--ms-line);--mesobra-ui-danger:var(--ms-danger);
 --mesobra-ui-radius-sm:var(--ms-radius-button);--mesobra-ui-radius:var(--ms-radius-button);--mesobra-ui-radius-lg:var(--ms-radius-card);
 --mesobra-shell-green:var(--ms-green);--mesobra-shell-green-dark:var(--ms-forest);--mesobra-footer-background:var(--ms-green);
}
body{font-family:var(--ms-font);font-weight:400;color:var(--ms-ink);background:var(--ms-white);line-height:1.6}
body :is(button,input,select,textarea){font-family:var(--ms-font)}
body :is(h1,h2,h3,h4){font-family:var(--ms-font);font-weight:700;letter-spacing:-.025em;line-height:1.2}
body :is(.mesobra-page,.mesobra-contact-page,.mesobra-catalog-page){color:var(--ms-ink)}
body :is(.mesobra-eyebrow,.mesobra-catalog-eyebrow,.mesobra-section-intro>div>span){color:var(--ms-forest);font-size:11px;line-height:1.4;font-weight:700;letter-spacing:.09em}
body :is(.mesobra-section-intro p,.mesobra-catalog-hero__copy,.mesobra-contact-page p){color:var(--ms-muted)}
/* Button foundation: primary filled, secondary outline, tertiary text, icon, destructive. */
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.button,.mesobra-btn,.mesobra-auth-submit,.mesobra-auth-provider,.mesobra-mobile-filter-button,.mesobra-info-button,.mesobra-cookie-actions button),
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #header :is(.button,.mesobra-auth-submit,.mesobra-auth-provider),
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer .button{
 --ms-btn-bg:var(--ms-green);--ms-btn-fg:var(--ms-on-green);--ms-btn-line:var(--ms-green);
 --ms-btn-hover-bg:var(--ms-green-hover);--ms-btn-hover-fg:var(--ms-on-green);--ms-btn-hover-line:var(--ms-green-hover);
 display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
 padding:10px 18px;border:1px solid var(--ms-btn-line)!important;border-radius:var(--ms-radius-button)!important;
 background:var(--ms-btn-bg)!important;background-image:none!important;color:var(--ms-btn-fg)!important;
 box-shadow:none!important;font-family:var(--ms-font)!important;font-size:14px!important;font-weight:600!important;line-height:1.35!important;
 letter-spacing:0!important;text-decoration:none!important;text-transform:none!important;cursor:pointer;
 transition:background-color var(--ms-motion),color var(--ms-motion),border-color var(--ms-motion)!important;transform:none!important;
}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.button,.mesobra-btn,.mesobra-auth-submit,.mesobra-auth-provider,.mesobra-mobile-filter-button,.mesobra-info-button,.mesobra-cookie-actions button):hover,
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #header :is(.button,.mesobra-auth-submit,.mesobra-auth-provider):hover,
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer .button:hover{background:var(--ms-btn-hover-bg)!important;color:var(--ms-btn-hover-fg)!important;border-color:var(--ms-btn-hover-line)!important;transform:none!important}
/* 2. Secondary / outline. */
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.button.border,.mesobra-btn--secondary,.mesobra-auth-provider,.mesobra-mobile-filter-button,#mesobra-cookie-essential),
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #header :is(.button.border,.mesobra-auth-provider){
 --ms-btn-bg:transparent;--ms-btn-fg:var(--ms-forest);--ms-btn-line:var(--ms-forest);
 --ms-btn-hover-bg:var(--ms-sage);--ms-btn-hover-fg:var(--ms-forest-hover);--ms-btn-hover-line:var(--ms-forest-hover);
}
/* 1. Explicit primary beats compatibility classes such as .border. */
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-btn--primary,.mesobra-home-catalog-cta,.mesobra-button-dark){
 --ms-btn-bg:var(--ms-green);--ms-btn-fg:var(--ms-on-green);--ms-btn-line:var(--ms-green);
 --ms-btn-hover-bg:var(--ms-green-hover);--ms-btn-hover-fg:var(--ms-on-green);--ms-btn-hover-line:var(--ms-green-hover);
}
/* 3. Tertiary / quiet action. */
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-btn--tertiary,.mesobra-info-text-link,.mesobra-auth-back,.mesobra-filter-panel__clear,.mesobra-filter-group__toggle,.mesobra-ad-band__cta){
 display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;min-height:44px;padding:6px 0;
 border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
 color:var(--ms-forest)!important;font-family:var(--ms-font)!important;font-size:13px!important;font-weight:600!important;
 line-height:1.4!important;text-decoration:underline!important;text-underline-offset:4px;cursor:pointer;
}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-btn--tertiary,.mesobra-info-text-link,.mesobra-auth-back,.mesobra-filter-panel__clear,.mesobra-filter-group__toggle):hover{color:var(--ms-forest-hover)!important}
/* 4. Icon-only control; symbol never changes shape or target size. */
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-btn--icon,.mesobra-global-search__submit,.mesobra-filter-panel__close,.mesobra-photo-nav){
 display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;min-width:44px;min-height:44px;
 padding:0;border:1px solid var(--ms-line);border-radius:var(--ms-radius-button)!important;background:var(--ms-white);color:var(--ms-forest);box-shadow:none!important;
}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-global-search__submit{background:var(--ms-green)!important;border-color:var(--ms-forest)!important;color:var(--ms-white)!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-global-search__submit:hover{background:var(--ms-green-hover)!important}
/* 5. Destructive is reserved for actual data/account removal. */
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-btn--danger,.button.mesobra-danger-button,.button.button-red,.mesobra-decision-delete){
 --ms-btn-bg:var(--ms-danger);--ms-btn-fg:var(--ms-white);--ms-btn-line:var(--ms-danger);
 --ms-btn-hover-bg:var(--ms-danger-hover);--ms-btn-hover-fg:var(--ms-white);--ms-btn-hover-line:var(--ms-danger-hover);
}
/* Inverse is a theme modifier, never another button family. */
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-btn--inverse,.mesobra-footer-publish),
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer .mesobra-footer-publish,
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-about-actions .button:not(.border){
 --ms-btn-bg:var(--ms-white);--ms-btn-fg:var(--ms-forest);--ms-btn-line:var(--ms-white);
 --ms-btn-hover-bg:var(--ms-sage);--ms-btn-hover-fg:var(--ms-forest-hover);--ms-btn-hover-line:var(--ms-sage);
}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-about-actions .button.border{
 --ms-btn-bg:transparent;--ms-btn-fg:var(--ms-white);--ms-btn-line:rgba(255,255,255,.8);
 --ms-btn-hover-bg:rgba(255,255,255,.12);--ms-btn-hover-fg:var(--ms-white);--ms-btn-hover-line:var(--ms-white);
}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-ad-band,.mesobra-about-hero) .mesobra-ad-band__cta{color:var(--ms-white)!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.button,.mesobra-btn,button,input[type=submit]):is(:disabled,[aria-disabled=true]){opacity:.5;cursor:not-allowed;box-shadow:none!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(a,button,input,select,textarea):focus-visible{outline:3px solid var(--ms-forest)!important;outline-offset:3px}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(#footer,.mesobra-ad-band,.mesobra-about-hero) :is(a,button):focus-visible{outline-color:var(--ms-white)!important}
/* Common spacing and surfaces. Form geometry remains owned by each working flow. */
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-surface,.mesobra-contact-form,.mesobra-quick-card,.mesobra-about-cta,.mesobra-cms-content){border-radius:var(--ms-radius-card)!important;box-shadow:var(--ms-shadow)!important;border-color:var(--ms-line)!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-field,.mesobra-contact-fields,.mesobra-form-grid,.mesobra-auth-dialog) :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]):not([type=file]),select,textarea){border-radius:var(--ms-radius-button)!important;border:1px solid var(--ms-line)!important;box-shadow:none!important;background:var(--ms-white);color:var(--ms-ink);font-size:16px!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-field,.mesobra-contact-fields) label{font-size:13px;font-weight:600;color:var(--ms-ink)}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #header :is(.button,.button.border){font-size:14px!important;min-height:44px;height:44px;padding:10px 16px}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-home-catalog-cta{width:100%;min-height:48px!important;font-size:15px!important;margin-top:24px!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-section-cta{border-radius:var(--ms-radius-button)!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-catalog-toolbar,.mesobra-filter-panel){border-color:var(--ms-line)}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-filter-panel{background:var(--ms-paper);border-radius:var(--ms-radius-card)}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-filter-group+.mesobra-filter-group{border-top-color:var(--ms-line)}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-filter-check input,.mesobra-auth-dialog input[type=checkbox]){accent-color:var(--ms-green)}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-catalog-toolbar :is(select,.chosen-single){border:1px solid var(--ms-line);border-radius:var(--ms-radius-button);color:var(--ms-ink);box-shadow:none}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-filter-chip{background:var(--ms-sage);border:1px solid var(--ms-line);border-radius:8px;color:var(--ms-forest);font-size:12px}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-view-switcher a{border-radius:8px}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-how-card{border-radius:var(--ms-radius-card);background:var(--ms-paper);border-color:var(--ms-line);box-shadow:none}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-how-card :is(h3,h4){color:var(--ms-ink);font-weight:700}
/* Header segmented selector and menu match the button radius without changing behavior. */
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-global-search{border-radius:14px!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-search-scope :is(label,label>span){border-radius:var(--ms-radius-button)!important;box-shadow:none!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-search-scope input:checked+span{background:var(--ms-green)!important;color:var(--ms-on-green)!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-mobile-nav{border-radius:var(--ms-radius-card);border-color:var(--ms-line)}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-mobile-nav__tiles a{border-radius:var(--ms-radius-button);background:var(--ms-sage);color:var(--ms-ink)}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-mobile-nav__tiles a.is-primary{background:var(--ms-green);color:var(--ms-on-green)}
/* Canonical line icons. Legacy glyphs remain as fallback if mask is unsupported. */
@supports(mask-image:url('')){
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(i.fa-search,i.fa-plus-circle,i.fa-user,i.fa-sliders,i.fa-envelope-o,i.fa-times,i.fa-bars)::before{
  content:'';display:inline-block;width:18px;height:18px;background:currentColor;vertical-align:-3px;mask:var(--ms-icon) center/contain no-repeat;
 }
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) i.fa-search{--ms-icon:url('../images/brand/icons/search.svg')}
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) i.fa-plus-circle{--ms-icon:url('../images/brand/icons/plus.svg')}
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) i.fa-user{--ms-icon:url('../images/brand/icons/user.svg')}
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) i.fa-sliders{--ms-icon:url('../images/brand/icons/filter.svg')}
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) i.fa-envelope-o{--ms-icon:url('../images/brand/icons/mail.svg')}
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) i.fa-times{--ms-icon:url('../images/brand/icons/close.svg')}
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) i.fa-bars{--ms-icon:url('../images/brand/icons/menu.svg')}
}
@media(max-width:1024px){
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #header :is(.button,.button.border){min-height:44px;height:44px;padding:0 10px!important;font-size:12px!important;gap:6px}
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-global-search__submit{width:40px;min-width:40px;height:40px;min-height:40px}
}
@media(max-width:767px){
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.button,.mesobra-btn,.mesobra-auth-submit,.mesobra-mobile-filter-button){font-size:13px!important;padding:10px 14px}
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-home-catalog-cta{font-size:14px!important}
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-catalog-toolbar :is(.mesobra-mobile-filter-button,select){min-height:44px;height:44px}
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-surface{border-radius:12px!important}
}
@media(max-width:419px){
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #header .header-widget:has(#mesobraHeaderLogin) .mesobra-header-publish{width:44px!important;padding:0!important}
 body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #header .header-widget:has(#mesobraHeaderLogin) .mesobra-header-publish span{display:none!important}
}
@media(prefers-reduced-motion:reduce){body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.button,.mesobra-btn){transition:none!important}}

/* Approved color correction: exact reference green, white text on principal surfaces. */
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-global-search-wrap{background:var(--ms-green)!important;border-color:var(--ms-green)!important;background-image:none!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer,body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #mesobraFooterBar,body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #mesobraFooterDetails{background:var(--ms-green)!important;background-image:none!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer :is(h2,h3,h4,p,span,strong,a,button,small,li){color:var(--ms-on-green)!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer :is(.mesobra-footer-description,.mesobra-footer-legal,.mesobra-footer-meta,.mesobra-footer-details__bottom,.mesobra-footer-operator){opacity:1!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer :is(a,button):focus-visible{outline-color:var(--ms-on-green)!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer .mesobra-footer-details__close:is(:hover,:focus-visible){background:var(--ms-white)!important;color:var(--ms-forest)!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer .mesobra-footer-details__close:is(:hover,:focus-visible) :is(span,i){color:inherit!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer a:hover{color:#fff!important;text-decoration:underline}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) .mesobra-product-card :is(.mesobra-card-arrow,.mesobra-material-like){border-radius:8px!important}

/* Final user-specified primary: #237D30 with white text. */
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) :is(.mesobra-btn--primary,.mesobra-header-publish,.mesobra-home-catalog-cta,.mesobra-continue-button,.mesobra-auth-submit,#mesobra-cookie-accept){font-weight:700!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer .mesobra-footer-publish{color:var(--ms-forest)!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer .mesobra-footer-publish :is(span,i){color:inherit!important}
body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #footer :is(p,span,strong,a,small){opacity:1!important}

body :is(#wrapper,.mfp-content,.mesobra-quick-view,.mesobra-publish-panel) #header .mmenu-trigger{border-radius:var(--ms-radius-button)!important}

/* Dialogs are moved outside #wrapper by the existing lightbox. */
body .mfp-content #sign-in-dialog{border-radius:16px!important;color:var(--ms-ink)}
body .mfp-content .mesobra-auth-dialog__close{border-radius:var(--ms-radius-button)!important;background:var(--ms-paper)!important;color:var(--ms-forest)!important;box-shadow:none!important}