/* Header fijo: logo, menú (desktop) y switch de tema. */

/* =========================================================
   HEADER
   Base compartida + un bloque DESKTOP y otro MOBILE separados.
   Los tamaños (alto del header, alto del logo) se definen solo
   dentro de cada bloque, así tocar uno no rompe el otro.
   ========================================================= */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .25s, box-shadow .25s;
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); }
.top .logo { display: block; flex: none; line-height: 0; }
.top .logo img { width: auto; max-width: none; display: none; }
.top .acciones { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: #fff; border-radius: 50%;
  transition: background .2s, color .2s;
}
.icon-btn:hover { background: rgba(127,127,127,.18); }
.icon-btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.icon-btn svg { width: 24px; height: 24px; }
.top nav a {
  font-family: "Bebas Neue", sans-serif; letter-spacing: .05em;
  text-decoration: none; color: #fff;
  transition: background .2s, color .2s;
}

/* Logo: blanco sobre el hero; color u oscuro cuando el header es sólido */
.top .logo .blanco { display: block; }
.top.solid .logo .blanco, .top.open .logo .blanco { display: none; }
.top.solid .logo .color, .top.open .logo .color { display: block; }
:root[data-theme="dark"] .top.solid .logo .color, :root[data-theme="dark"] .top.open .logo .color { display: none; }
:root[data-theme="dark"] .top.solid .logo .oscuro, :root[data-theme="dark"] .top.open .logo .oscuro { display: block; }

.top.solid, .top.open { background: var(--header-bg); box-shadow: 0 1px 0 var(--linea); }
.top.solid nav a, .top.solid .icon-btn, .top.open .icon-btn { color: var(--tinta); }

/* Switch de tema: muestra la luna en claro y el sol en oscuro */
.theme-btn .sol { display: none; }
:root[data-theme="dark"] .theme-btn .sol { display: block; }
:root[data-theme="dark"] .theme-btn .luna { display: none; }

/* ---------- Header DESKTOP ---------- */
@media (min-width: 821px) {
  :root { --header-h: 88px; }
  .top .logo img { height: 58px; }
  .top nav { display: flex; gap: 6px; margin-left: auto; }
  .top nav a { font-size: 20px; padding: 6px 12px 4px; border-radius: var(--radio-chico); }
  .top nav a:hover { background: var(--azul); color: #fff; }
}

/* ---------- Header MOBILE ----------
   Solo logo + switch de tema. La navegación va en la barra inferior (.bottom-nav). */
@media (max-width: 820px) {
  :root { --header-h: 64px; }
  .top .logo img { height: 40px; }
  .top nav { display: none; }
}