/* ==========================================================================
   SOTM site header — réplica del header del website (demo.soundsofthemultiverse.com)
   para la tienda WooCommerce (tema Sober). TODO scopeado bajo #sotm-hdr para no
   chocar con Sober/WooCommerce. Medidas en PX (Sober usa html{font-size:62.5%}).
   ========================================================================== */

/* Oculta el header nativo del tema Sober (masthead) y su topbar viejo. */
#masthead.site-header,
.sotm-topbar { display: none !important; }

/* El header va fixed: empujar el contenido para que no quede tapado. */
html { scroll-padding-top: 72px; }
body { padding-top: 64px !important; }
@media (min-width: 768px) { body { padding-top: 72px !important; } }

/* ---------- Reset insular (aísla del CSS del tema) ---------- */
#sotm-hdr, #sotm-hdr * , #sotm-hdr *::before, #sotm-hdr *::after { box-sizing: border-box; }
#sotm-hdr a { text-decoration: none; color: inherit; }
#sotm-hdr ul { list-style: none; margin: 0; padding: 0; }
#sotm-hdr button { background: none; border: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: 1; }
#sotm-hdr img { max-width: none; height: auto; display: block; }
#sotm-hdr svg { display: block; }

/* ---------- Barra ---------- */
#sotm-hdr .sh-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9990;
  height: 64px;
  background-color: rgba(6, 7, 12, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  box-shadow: 0 8px 32px rgba(76, 176, 228, 0.06);
  isolation: isolate;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
#sotm-hdr .sh-bar::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 58%, rgba(6,6,8,0.55) 100%);
}
@media (min-width: 768px) { #sotm-hdr .sh-bar { height: 72px; } }

#sotm-hdr .sh-inner {
  position: relative; z-index: 1;
  height: 100%; max-width: 1280px; margin: 0 auto;
  padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
@media (min-width: 768px) { #sotm-hdr .sh-inner { padding: 0 32px; } }
@media (min-width: 1280px) { #sotm-hdr .sh-inner { padding: 0 48px; } }

/* ---------- Logo + marca ---------- */
#sotm-hdr .sh-logo { display: inline-flex; align-items: center; gap: 12px; }
#sotm-hdr .sh-logo-glow { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
@media (min-width: 768px) { #sotm-hdr .sh-logo-glow { width: 44px; height: 44px; } }
/* halo alienígena cónico (logo-alien-glow del website) detrás del anillo */
#sotm-hdr .sh-logo-glow::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, #c026d3, #db2777, #0891b2, #059669, #ea580c, #dc2626, #c026d3);
  filter: blur(14px); opacity: 0.85; animation: sh-alien-rotate 8s linear infinite;
}
#sotm-hdr .sh-logo-glow::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(192,38,211,0.6), transparent 70%);
  filter: blur(22px); opacity: 0.7; animation: sh-alien-pulse 4s ease-in-out infinite;
}
#sotm-hdr .sh-logo:hover .sh-logo-glow::before { opacity: 1; animation-duration: 4s; }
#sotm-hdr .sh-logo:hover .sh-logo-glow::after { opacity: 0.95; }
@keyframes sh-alien-rotate { to { transform: rotate(360deg); } }
@keyframes sh-alien-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.05); } }
/* anillo cósmico animado (logo-cosmic-rainbow::before del website) */
#sotm-hdr .sh-logo-ring { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: #0c0c12; border: 1px solid rgba(76, 176, 228, 0.30); transition: border-color .25s ease; }
#sotm-hdr .sh-logo-ring::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; z-index: 0;
  background: linear-gradient(90deg, #0f3460 0%, #533483 12.5%, #6c5ce7 25%, #a29bfe 37.5%, #dfe6e9 50%, #a29bfe 62.5%, #6c5ce7 75%, #533483 87.5%, #0f3460 100%);
  background-size: 200% 100%; filter: blur(16px); opacity: 0.65;
  animation: sh-cosmic 4s ease-in-out infinite;
}
#sotm-hdr .sh-logo:hover .sh-logo-ring { border-color: rgba(76, 176, 228, 0.85); }
#sotm-hdr .sh-logo:hover .sh-logo-ring::before { opacity: 0.95; filter: blur(20px); }
#sotm-hdr .sh-logo-img { position: relative; z-index: 1; width: 36px; height: 36px; object-fit: contain; }
@media (min-width: 768px) { #sotm-hdr .sh-logo-img { width: 40px; height: 40px; } }
@keyframes sh-cosmic { 0% { background-position: 0% 0; } 50% { background-position: 200% 0; } 100% { background-position: 0% 0; } }

#sotm-hdr .sh-brand { display: flex; flex-direction: column; line-height: 1.05; }
#sotm-hdr .sh-brand-tag  { font-weight: 700; text-transform: uppercase; color: #fff; font-size: 9px;  letter-spacing: 0.18em; }
#sotm-hdr .sh-brand-name { font-weight: 700; text-transform: uppercase; color: #fff; font-size: 12px; letter-spacing: 0.10em; }
@media (min-width: 640px) { #sotm-hdr .sh-brand-tag { font-size: 10px; } #sotm-hdr .sh-brand-name { font-size: 14px; } }

/* ---------- Nav desktop ---------- */
#sotm-hdr .sh-nav { display: none; align-items: center; height: 100%; }
@media (min-width: 1024px) { #sotm-hdr .sh-nav { display: flex; } }
#sotm-hdr .sh-link {
  position: relative; display: inline-flex; align-items: center; height: 100%;
  padding: 0 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 12px; color: #e4e1ee; transition: color .25s ease; white-space: nowrap;
}
#sotm-hdr .sh-link:hover { color: #4CB0E4; }
#sotm-hdr .sh-link-active { color: #6fc0ee; }
#sotm-hdr .sh-underline {
  position: absolute; left: 12px; right: 12px; top: calc(50% + 0.62em + 4px); height: 2px;
  background: linear-gradient(90deg, #d89be8 0%, #8fd9f8 35%, #93eeb4 68%, #ffe093 100%);
  box-shadow: 0 0 9px rgba(255,255,255,0.55), 0 0 5px rgba(79,198,243,0.5);
  filter: saturate(1.25) brightness(1.18);
  transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.16,1,.3,1); pointer-events: none;
}
#sotm-hdr .sh-link:hover .sh-underline,
#sotm-hdr .sh-link-active .sh-underline { transform: scaleX(1); }

/* ---------- Lado derecho ---------- */
#sotm-hdr .sh-right { display: flex; align-items: center; gap: 8px; }
@media (min-width: 768px) { #sotm-hdr .sh-right { gap: 12px; } }
#sotm-hdr .sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; width: 40px; padding: 0; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); color: #e4e1ee;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
#sotm-hdr .sh-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.30); transform: translateY(-1px); }
#sotm-hdr .sh-btn svg { width: 16px; height: 16px; }
/* Sober fuerza fill:#23232c en svg/path globalmente → el ícono salía gris.
   Forzar blanco (el botón compartir es el único svg de fill del header). */
#sotm-hdr .sh-btn svg,
#sotm-hdr .sh-btn svg path { fill: #fff !important; }
#sotm-hdr .sh-lang { position: relative; }
#sotm-hdr .sh-lang .sh-btn { width: auto; padding: 0 10px; font-size: 11px; letter-spacing: 0.12em; }
#sotm-hdr .sh-lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 130px;
  background: rgba(19,19,22,0.92); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(76,176,228,0.20); border-radius: 10px; padding: 4px; z-index: 20;
}
#sotm-hdr .sh-lang-menu[hidden] { display: none; }
#sotm-hdr .sh-lang-opt {
  display: block; width: 100%; text-align: left; padding: 8px 12px; border-radius: 7px;
  font-size: 13px; color: #e4e1ee; letter-spacing: 0.02em;
}
#sotm-hdr .sh-lang-opt:hover { background: rgba(76,176,228,0.14); color: #fff; }

#sotm-hdr .sh-side-logo { width: 36px; height: 36px; object-fit: contain; display: none; }
@media (min-width: 768px) { #sotm-hdr .sh-side-logo { display: inline-block; width: 40px; height: 40px; } }
#sotm-hdr .sh-ser { background: #031f5b; border-radius: 50%; padding: 4px; }

/* ---------- Burger (mobile) ---------- */
/* Réplica exacta del #menu-toggle del website (header.hbs):
   w-10 h-10 rounded-lg border-primary/30 text-primary hover:bg-primary/10.
   GOTCHA Sober: button{padding:6px 50px;background:#23232c;border:0} ensanchaba
   el botón a ~102px (padding > width con border-box) y
   svg{stroke:#23232c;stroke-width:0;fill:#23232c;width:20px} dejaba las 3 líneas
   invisibles → de ahí padding:0 y los overrides !important del svg. */
#sotm-hdr .sh-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; box-sizing: border-box; flex: 0 0 auto;
  border-radius: 8px; border: 1px solid rgba(76,176,228,0.30);
  background: transparent; color: #4CB0E4; transition: background .25s ease;
}
#sotm-hdr .sh-burger:hover { background: rgba(76,176,228,0.10); }
#sotm-hdr .sh-burger svg {
  width: 18px; height: 18px;
  fill: none !important; stroke: #4CB0E4 !important; stroke-width: 2px !important;
}
#sotm-hdr .sh-burger svg line { stroke: #4CB0E4 !important; stroke-width: 2px !important; }
@media (min-width: 1024px) { #sotm-hdr .sh-burger { display: none; } }

/* ---------- Menú mobile (slide) ---------- */
#sotm-hdr .sh-mobile {
  position: fixed; left: 0; right: 0; top: 64px; z-index: 9989;
  overflow: hidden; max-height: 0; opacity: 0;
  background: rgba(7,8,14,0.97); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-top: 1px solid transparent;
  transition: max-height .42s cubic-bezier(.16,1,.3,1), opacity .25s ease, border-top-color .25s ease;
  pointer-events: none;
}
@media (min-width: 768px) { #sotm-hdr .sh-mobile { top: 72px; } }
#sotm-hdr .sh-mobile.is-open { max-height: 80vh; opacity: 1; overflow-y: auto; pointer-events: auto; border-top-color: rgba(76,176,228,0.15); }
@media (min-width: 1024px) { #sotm-hdr .sh-mobile { display: none; } }
#sotm-hdr .sh-mobile nav { max-width: 1280px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; }
#sotm-hdr .sh-mobile a {
  display: block; padding: 14px 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em;
  font-size: 15px; color: #e4e1ee; border-bottom: 1px solid rgba(76,176,228,0.10); transition: color .2s ease;
}
#sotm-hdr .sh-mobile a:hover { color: #4CB0E4; }