/* Més Salut: cabecera blanca del design system, común a todas las páginas. */
:root {
  --surface-page: #f7f3f0; --surface-sand: #e8e2dc; --surface-raised: #fff; --surface-inverse: #4a4440;
  --text-primary: #4a4440; --text-muted: #6b625b; --text-on-inverse: #f7f3f0;
  --brand: #6d5c50; --brand-hover: #5a4b41;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px;
  --radius-sm: 12px; --radius-md: 20px; --radius-pill: 999px;
  --shadow-hover: 0 8px 24px rgba(74, 68, 64, .12); --shadow-header: 0 1px 0 rgba(74, 68, 64, .08);
}

#header .btn {
  min-width: 190px; text-align: center;
  padding: 14px 28px; white-space: nowrap; font-size: 16px; font-weight: 500; line-height: 1.2; border-width: 1.5px;
  background: var(--brand); color: var(--text-on-inverse);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease; opacity: 1;
}
#header .btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--text-on-inverse); opacity: 1; }
#header a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Cabecera */
#header { background: var(--surface-raised); box-shadow: var(--shadow-header); }
#header .widget-section-content-content { flex-wrap: nowrap; align-items: center; gap: var(--space-2); }
#header #column-1206331, #header #column-1206333 { flex: 0 0 auto; }
#header #column-1206332 { flex: 1 1 0; min-width: 0; }
#header #widget-2249304 img { width: 156px; max-width: none; }
#header #widget-2249305 { font-size: 14px; font-weight: 500; letter-spacing: .02em; }
#header #column-1206332 .widget-column-content, #header #widget-2249305 { width: 100%; }
#header #widget-2249305 > ul { flex-wrap: wrap; row-gap: 0; justify-content: flex-end; position: relative; padding-right: 136px; min-height: 40px; }
#header #widget-2249305 > ul > li > a { padding: var(--space-1) 7px; border-bottom: 1.5px solid transparent; white-space: nowrap; }
#header #widget-2249305 > ul > li:hover > a, #header #widget-2249305 > ul > li > a:focus-visible { border-bottom-color: var(--brand); }
#header li.lang-switch { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 0; gap: 4px; }
#header li.lang-switch a, #header li.lang-switch span { display: inline-block; box-sizing: border-box; width: 48px; text-align: center; padding: 6px 10px; border-radius: var(--radius-pill); color: var(--text-primary); text-decoration: none; }
#header li.lang-switch span { background: var(--surface-sand); }
#header li.lang-switch a:hover { background: var(--surface-sand); }
#header #widget-2249305 ul ul { background: var(--surface-raised); border-radius: var(--radius-sm); box-shadow: var(--shadow-hover); overflow: hidden; }


/* El JS del sitio fija la cabecera (position:fixed) y compensa con padding en <body> al cargar,
   lo que desplazaba el contenido (CLS ~0,09 en escritorio). Se adelanta ese estado final en CSS;
   el JS sigue ajustando el padding exacto, con una diferencia pequeña. */
@media screen and (min-width: 1024px) {
  #header[data-fixed] { position: fixed; top: 0; left: 0; right: 0; }
  body { padding-top: 126px; }
}