/* header.css · barra superior sticky con logo, nav, toggle tema y carrito */

.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 24px;
}

.logo-link{display:flex;align-items:center;gap:13px}
.logo-svg{width:44px;height:44px;flex:0 0 auto}
.logo-ring{fill:var(--bg);stroke:var(--orange);stroke-width:3}
.logo-text{fill:var(--yellow);font:600 18px Georgia,serif;letter-spacing:2px}
.brand-txt{line-height:1.2}
.brand-txt strong{
  display:block;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:18px;font-weight:600;
}
.brand-txt small{
  display:block;font-size:9.5px;letter-spacing:3px;
  text-transform:uppercase;color:var(--muted);
}

.main-nav{display:flex;gap:4px}
.main-nav a{
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:10px 13px;
  border-radius:8px;transition:.2s;
}
.main-nav a:hover{color:var(--orange)}

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

.cart-count{
  position:absolute;top:-5px;right:-5px;
  min-width:18px;height:18px;padding:0 4px;
  border-radius:999px;background:var(--orange);color:var(--on-accent);
  font-size:11px;font-weight:800;line-height:18px;text-align:center;
}
.cart-count.zero{display:none}

.reserve-cta{padding:10px 20px;font-size:12px}

/* ---------- Toggle día/noche estilo YouTube ---------- */
.theme-toggle{width:auto;padding:0 10px;gap:7px;display:flex;border-radius:999px}

.toggle-track{
  width:34px;height:18px;border-radius:999px;
  background:var(--line);position:relative;transition:.25s;
}
.toggle-thumb{
  position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;
  background:var(--orange);transition:.25s ease;
}
:root[data-theme="dark"] .toggle-track{background:var(--panel)}
:root[data-theme="dark"] .toggle-thumb{transform:translateX(16px)}

.ico-sun,.ico-moon{flex:0 0 auto}
.ico-sun{color:var(--yellow);display:none}
.ico-moon{color:var(--orange);display:none}

/* en modo noche mostramos la luna; en día, el sol */
:root[data-theme="dark"] .ico-moon{display:block}
:root[data-theme="light"] .ico-sun{display:block}

@media (max-width:900px){
  .main-nav{display:none}
  .reserve-cta{display:none}
  .header-inner{justify-content:space-between}
}