/* Variantes del encabezado para comparar G1 y F1. */
.brand-header.brand-header-light { background: #fff; }
.brand-header.brand-header-projects { background: #FAF8F5; }
.brand-header.brand-header-dark { background: #101c31; border-color: #ffffff20; }
.brand-header .brand-home { gap: 12px; }
.brand-header .brand-icon { display: block; flex: 0 0 auto; width: 48px; height: 48px; object-fit: contain; }
.brand-header .brand-wordmark { color: #101c31; }
.brand-header .brand-wordmark span { color: #bb9567; }
.brand-header .brand-descriptor { color: #687487; }
.brand-header-original-suave .brand-icon { border-radius: 10px; background: #142033; }
.brand-header-original-suave .brand-home { gap: 14px; }
.brand-header-original-suave .brand-home.space-x-3 > span { margin-left: 0; }
.brand-header-original-suave .brand-wordmark { font-size: 24px; line-height: 1; font-weight: 800; letter-spacing: -.045em; }
.brand-header-original-suave .brand-wordmark span { color: #C5A079; }
.brand-header-original-suave .brand-descriptor { font-size: 9px; font-weight: 500; color: #85909e; margin-top: 6px; letter-spacing: .1em; }
.brand-header-dark .brand-wordmark,
.brand-header-dark .brand-wordmark span { color: #fff; }
.brand-header-dark .brand-descriptor { color: #d1d9e6; }
.brand-header-dark .service-nav-link,
.brand-header-dark nav[aria-label="Navegación principal"] > a,
.brand-header-dark #mobile-navigation > a { color: #fff; }
.brand-header-dark .nav-caret { color: #cbd5e1; }
.brand-header-dark .service-nav-toggle:hover { background: #ffffff16; }
.brand-header-dark .service-nav-toggle:focus-visible,
.brand-header-dark a:focus-visible,
.brand-header-dark button:focus-visible { outline-color: #e4c49d; }
.brand-header-dark .nav-dropdown-menu { color: #101c31; }
.brand-header-dark .service-nav-mobile [id] a { color: #e2e8f0; }
.brand-header-dark .service-nav-mobile,
.brand-header-dark #mobile-navigation,
.brand-header-dark #mobile-navigation > a { border-color: #ffffff20; }
.brand-header-dark .shop-online-label { color: #e4c49d !important; }
.brand-header-dark .header-quote { background: #fff; color: #101c31; }
.brand-header-dark .header-quote:hover { background: #f3ece4; }
.brand-header-dark .header-cart { color: #fff; }
.brand-header-dark .header-cart:hover { background: #ffffff16; color: #fff; }
.brand-header-dark #mobile-menu-button { background: transparent; color: #fff; border-color: #ffffff40; }
.brand-header-dark #mobile-menu-button:hover { border-color: #e4c49d; }
.brand-header.brand-header-crema { background: #142033; border-color: #faf8f526; color: #FAF8F5; }
.brand-header-crema .brand-wordmark,
.brand-header-crema .brand-wordmark span,
.brand-header-crema .brand-descriptor,
.brand-header-crema .service-nav-link,
.brand-header-crema .nav-caret,
.brand-header-crema nav a,
.brand-header-crema .header-cart,
.brand-header-crema #mobile-menu-button { color: #FAF8F5; }
.brand-header-crema .shop-online-label { color: #FAF8F5 !important; }
.brand-header-crema .nav-dropdown-menu { background: #fff; border-color: #e7e5e4; color: #101c31; }
.brand-header-crema .nav-dropdown-menu a { color: #101c31; }
.brand-header-crema .nav-dropdown-menu a:hover { background: #F9F6F0; color: #8C5A32; }
.brand-header-crema .service-nav-toggle:hover,
.brand-header-crema .header-cart:hover { background: #faf8f514; color: #FAF8F5; }
.brand-header-crema .header-quote { background: transparent; color: #FAF8F5; border: 1px solid #faf8f580; }
.brand-header-crema .header-quote:hover { background: #faf8f514; }
.brand-header-crema #mobile-menu-button { background: transparent; border-color: #faf8f540; }
.brand-header-crema [data-cart-count] { color: #FAF8F5; }
.brand-header-crema .service-nav-mobile [id] { background: #fff; border-radius: 12px; padding: 8px 16px; margin-bottom: 12px; }
.brand-header-crema .service-nav-mobile [id] a { color: #101c31; }
.brand-header-crema .service-nav-mobile [id] a:hover { background: #F9F6F0; color: #8C5A32; }
@media (max-width: 639px) {
  .brand-header .brand-home { gap: 8px; }
  .brand-header .brand-icon { width: 36px; height: 36px; }
  .brand-header-original-suave .brand-home .brand-wordmark { font-size: 19px; }
}
@media (max-width: 380px) {
  .brand-header .brand-home { gap: 6px; }
  .brand-header .brand-icon { width: 32px; height: 32px; }
  .brand-header-original-suave .brand-home .brand-wordmark { font-size: 18px; }
}