/* Header único de marca — landing e interiores (mismo chrome).
   Usa --bg/--ink/--gold (landing) con fallback a tokens de app (--ground, etc.). */

.site-header{
  --hm-bg: var(--bg, var(--ground, #090908));
  --hm-ink: var(--ink, #fff9eb);
  --hm-muted: var(--muted, #c3b9a8);
  --hm-gold: var(--gold, #d2ae62);
  --hm-gold-2: var(--gold-2, var(--gold-bright, #f0d487));
  --hm-gold-soft: var(--gold-soft, #312717);
  --hm-line: var(--line, rgba(218,181,103,.25));
  --hm-surface: var(--surface, rgba(19,18,15,.88));
  --hm-serif: var(--serif, "Cormorant Garamond", Georgia, serif);
  --hm-sans: var(--sans, "Manrope", system-ui, sans-serif);
  position:fixed;top:0;width:100%;z-index:50;
  border-bottom:1px solid transparent;transition:.25s;
  font-family:var(--hm-sans);
}
.site-header.scrolled{
  background:color-mix(in srgb,var(--hm-bg) 88%,transparent);
  border-color:var(--hm-line);
  backdrop-filter:blur(16px);
}
.site-header .container{
  width:min(1180px,calc(100% - 42px));
  margin:auto;
}
.header-inner{
  height:72px;
  display:flex;
  align-items:center;
  gap:18px;
}
.brand{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:0;
  color:var(--hm-ink);text-decoration:none;
  font:700 1.45rem var(--hm-serif);white-space:nowrap;
}
.brand .brand-logo{display:none;line-height:0}
.brand .brand-logo .wm-img{height:38px;width:auto;display:block}
html[data-mode="dark"] .brand .brand-logo-oscuro,
html:not([data-mode])[data-theme="dark"] .brand .brand-logo-oscuro,
html:not([data-mode])[data-theme="salon-noche"] .brand .brand-logo-oscuro{display:inline-block}
html[data-mode="light"] .brand .brand-logo-claro,
html:not([data-mode])[data-theme="light"] .brand .brand-logo-claro,
html:not([data-mode])[data-theme="galeria-luz"] .brand .brand-logo-claro,
html:not([data-mode])[data-theme="atelier-ciel"] .brand .brand-logo-claro,
html:not([data-mode])[data-theme="vergel-vivo"] .brand .brand-logo-claro,
html:not([data-mode])[data-theme="sol-mediodia"] .brand .brand-logo-claro,
html:not([data-mode])[data-theme="palito-rosa"] .brand .brand-logo-claro{display:inline-block}

/* Marca | links (una línea) | acciones — sin hueco raro ni wrap. */
.site-header .nav{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:1.15rem;
  min-width:0;
  margin:0;
}
.site-header .nav a,
.site-header .login{
  color:var(--hm-ink);text-decoration:none;
  font-size:.82rem;font-weight:500;line-height:1;
  white-space:nowrap;
  letter-spacing:.01em;
}
.site-header .nav a:hover,
.site-header .login:hover{color:var(--hm-gold)}

.header-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

.lang-switch{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--hm-sans);font-size:.78rem;font-weight:600;
  letter-spacing:.01em;line-height:1;white-space:nowrap;
  color:var(--hm-muted);
}
.lang-sep{opacity:.45;font-weight:500;user-select:none}
.lang-opt{
  color:var(--hm-muted);text-decoration:none;
  transition:color .15s ease,opacity .15s ease;
}
a.lang-opt:hover{color:var(--hm-ink)}
.lang-opt.is-active{color:var(--hm-ink);font-weight:700}

.theme-toggle{
  border:1px solid var(--hm-line);background:var(--hm-surface);color:var(--hm-ink);
  border-radius:99px;width:40px;height:32px;cursor:pointer;display:grid;place-items:center;
  flex:0 0 auto;
}
.theme-toggle .moon,
html[data-mode="dark"] .theme-toggle .sun,
html:not([data-mode])[data-theme="dark"] .theme-toggle .sun,
html:not([data-mode])[data-theme="salon-noche"] .theme-toggle .sun{display:none}
html[data-mode="dark"] .theme-toggle .moon,
html:not([data-mode])[data-theme="dark"] .theme-toggle .moon,
html:not([data-mode])[data-theme="salon-noche"] .theme-toggle .moon{display:inline}

.site-header .btn{
  min-height:40px;padding:0 18px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;font-weight:700;font-size:.84rem;transition:.2s;
  border:1px solid transparent;font-family:var(--hm-sans);
  white-space:nowrap;
}
.site-header .btn:hover{transform:translateY(-1px)}
.site-header .btn-primary{
  background:linear-gradient(135deg,var(--hm-gold-2),var(--hm-gold));
  color:#1b1408;
  box-shadow:0 8px 24px rgba(180,134,49,.22),inset 0 1px rgba(255,255,255,.45);
}
.header-cta{min-height:36px;padding:0 16px}

.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:1px;background:var(--hm-ink);margin:5px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

body.has-marca-header{padding-top:72px}

/* Desktop angosto: menú hamburguesa antes de que los links se partan. */
@media(max-width:1100px){
  .site-header .nav{
    position:fixed;inset:72px 0 auto;background:var(--hm-bg);padding:22px 26px;
    display:none;flex-direction:column;align-items:stretch;
    border-bottom:1px solid var(--hm-line);
    gap:14px;margin:0;z-index:49;flex:none;
  }
  .site-header .nav a{font-size:.95rem;padding:6px 0}
  .site-header .nav.open{display:flex}
  .menu-toggle{display:block}
  .header-actions{gap:8px}
}
@media(max-width:600px){
  .site-header .container{width:min(100% - 28px,1180px)}
  .header-inner{height:64px;gap:12px}
  .brand .brand-logo .wm-img{height:32px;max-width:48vw;object-fit:contain}
  .site-header .nav{top:64px}
  .theme-toggle{width:36px;height:30px}
  body.has-marca-header{padding-top:64px}
}