/*
    <header class="header">
        <p class="hd-p-logo">
            [Logo]
        </p>
        
        <button class="hd-bn-modos" type="button" aria-label="Cambiar modo de color">
            <i class="bi bi-sun hd-bn-modos-sun" aria-hidden="true"></i>
            <i class="bi bi-moon hd-bn-modos-moon" aria-hidden="true"></i>
        </button>

        <button class="hd-bn-hamburguesa" type="button" aria-label="Menú de navegación">
            <i class="bi bi-list" aria-hidden="true"></i>
            <i class="bi bi-x-lg" aria-hidden="true"></i>
        </button>

        <nav class="hd-nav" aria-label="Navegación principal">
            <ul class="hd-nav-ul">
                <li class="hd-nav-ul-li">
                    <a class="hd-nav-ul-li-a" href="#Inicio">Inicio</a>
                </li>
                <li class="hd-nav-ul-li">
                    <a class="hd-nav-ul-li-a" href="#Categorias">Categorías</a>
                    <ul class="submenu">
                    </ul>
                </li>
                <li class="hd-nav-ul-li">
                    <a class="hd-nav-ul-li-a" href="#Datos">Información</a>
                </li>
            </ul>
        </nav>
    </header>
*/

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-sm);
  z-index: 1000;
  background:
    radial-gradient(120% 120% at 0% 0%, var(--color-primary-150), transparent 45%),
    radial-gradient(120% 120% at 100% 0%, var(--color-warm-highlight-light), transparent 50%),
    linear-gradient(180deg, var(--color-surface), var(--color-surface-soft));
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lg);
  transition: background var(--transition-medium), box-shadow var(--transition-medium);
}

body.dark .header {
  background:
    radial-gradient(120% 120% at 0% 0%, var(--color-primary-300), transparent 45%),
    radial-gradient(120% 120% at 100% 0%, var(--color-warm-accent-dark), transparent 55%),
    linear-gradient(180deg, var(--color-surface), var(--color-surface-soft));
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
}

.hd-p-logo {
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-title);
  font-size: var(--font-size-lg);
  font-weight: 900;
  letter-spacing: 0.04em;
  margin: 0;
  user-select: none;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-accent),
    var(--color-warm-accent),
    var(--color-warm-highlight)
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform var(--transition-fast), background-position var(--transition-medium);
}

.hd-p-logo:hover {
  background-position: 100% 50%;
}

.hd-bn-modos,
.hd-bn-hamburguesa {
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-alt));
  border: 1px solid var(--color-border-soft);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.hd-bn-modos:hover,
.hd-bn-hamburguesa:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, var(--color-surface-alt), var(--color-bg-soft));
}

.hd-bn-modos i,
.hd-bn-hamburguesa i {
  font-size: 1.25rem;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.hd-bn-modos-sun,
.hd-bn-modos-moon {
  display: none;
}

body:not(.dark) .hd-bn-modos-sun {
  display: inline;
  color: var(--color-warm-accent);
}

body.dark .hd-bn-modos-moon {
  display: inline;
  color: var(--color-warm-highlight);
}

.hd-bn-hamburguesa .bi-list {
  display: inline;
  color: var(--color-primary);
}

.hd-bn-hamburguesa .bi-x-lg {
  display: none;
  color: var(--color-accent);
}

.hd-bn-hamburguesa.activo .bi-list {
  display: none;
}

.hd-bn-hamburguesa.activo .bi-x-lg {
  display: inline;
  transform: rotate(90deg);
}

.hd-nav {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-soft));
  border-top: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xl);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.hd-nav.nav-abierto {
  display: flex;
}

.hd-nav-ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.hd-nav-ul-li-a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-md);
  font-weight: 600;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: linear-gradient(90deg, var(--color-surface-alt), var(--color-bg-soft));
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.hd-nav-ul-li-a:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
  background: linear-gradient(90deg, var(--color-primary-150), var(--color-warm-highlight-light));
  color: var(--color-text-strong);
}

.submenu {
  display: none;
  margin-top: var(--space-xs);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-border-soft);
}

.submenu-abierto {
  display: block;
}

.submenu li a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--color-warm-highlight-light), var(--color-warm-highlight));
  color: var(--color-text-strong);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.submenu li a:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .hd-bn-hamburguesa {
    display: none;
  }

  .hd-nav {
    position: static;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    gap: var(--space-sm);
  }

  .hd-nav-ul {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
  }

  .hd-nav-ul-li {
    position: relative;
  }

  .hd-nav-ul-li-a {
    background: transparent;
  }

  .hd-nav-ul-li:hover > .submenu {
    display: block;
    position: absolute;
    top: calc(85%);
    left: 60%;
    transform: translateX(-50%);
    min-width: 12rem;
    padding: var(--space-xs);
    background: linear-gradient(180deg, var(--color-surface), var(--color-surface-soft));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-soft);
  }

  .submenu {
    border: none;
    padding: var(--space-xs);
  }
}

@media (min-width: 1024px) {
  .hd-p-logo {
    font-size: var(--font-size-xl);
  }

  .hd-nav-ul-li-a {
    padding: var(--space-sm) var(--space-lg);
  }

  .submenu li a {
    padding: var(--space-sm) var(--space-md);
  }
}