/* ============================================================
   HAVANA LENCERÍAS — La cabecera del sitio
   ------------------------------------------------------------
   Una hoja aparte porque la cabecera está en las CUATRO páginas:
   portada, catálogo, blog y nota. Antes cada una tenía su propio
   menú, con su propio marcado y sus propias reglas: el del blog con
   tres enlaces, el del catálogo con dos, el de la portada con
   siete. Quien entraba por el blog no tenía cómo llegar a Modelos
   ni al FAQ.

   Las reglas se movieron desde style.css, no se copiaron: tenerlas
   en dos lugares es cómo un cambio arregla una página y no la otra.

   El contenido lo pinta havana-menu.js, que además resuelve los
   anclas: «#faq» funciona en la portada, y desde el catálogo tiene
   que ser «index.html#faq» o no lleva a ninguna parte.
   Los `var()` llevan valor de reserva porque esta hoja la cargan
   cuatro páginas y no todas definen los mismos tokens:
   catalogo.css no tiene --ink. Si la página define el token, gana
   el de la página; la reserva es para que el menú nunca salga con
   los colores del navegador.
   ============================================================ */

.topbar {
  background: var(--ink, #111010);
  text-align: center;
  padding: 11px 16px;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.topbar p {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.topbar-sep {
  color: var(--gold, #c8a76c);
}

.header {
  background: var(--cream, #efe9e0);
  border-bottom: 1px solid rgba(74, 64, 60, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  min-height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  justify-self: start;
  flex-shrink: 0;
}

.logo img {
  height: 46px;
  width: auto;
  object-fit: contain;
  display: block;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.nav a {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text, #4a403c);
  transition: color 0.3s ease;
}

.nav a:hover {
  color: var(--gold-dark, #ab8850);
}

.header-spacer {
  display: block;
}


@media (max-width: 992px) {


  /* Se desarma la grilla de 3 columnas: en pantallas chicas va apilado */
  .header-content {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 14px;
    padding: 16px 0;
  }


  .header-spacer {
    display: none;
  }


  .nav {
    margin-right: 0;
  }


  .nav {
    justify-content: center;
  }
}


@media (max-width: 768px) {


  .logo img {
    height: 38px;
  }


  .nav {
    gap: 12px;
    flex-wrap: wrap;
  }


  .nav a {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }


  .topbar {
    font-size: 0.72rem;
    padding: 8px 12px;
  }
}


@media (max-width: 480px) {


  .nav {
    gap: 10px;
    font-size: 0.82rem;
  }
}


/* ── La página en la que se está ───────────────────────────── */

/* El menú de la portada no necesitaba esta marca: todos sus
   enlaces eran anclas de la propia página. Ahora el mismo menú
   está en cuatro páginas, y sin marca no hay forma de saber en
   cuál se está parada. */
/* Con borde y no con `::after`: `.nav a` no tiene un `::after` de
   base que escalar, así que un `transform` ahí no pintaba nada. Es
   la misma marca que ya usaba la barra del blog. */
.nav a.activo {
  color: var(--gold-dark, #ab8850);
  border-bottom: 1px solid var(--gold, #c8a76c);
  padding-bottom: 3px;
}


/* ── Lo que se toca con el dedo ────────────────────────────── */

/* Venía de blog.css. Un enlace de 0.72rem en mayúsculas mide unos
   14px de alto: en un celular hay que apuntarle. Con esto el área
   tocable llega a los 44px que pide la guía de accesibilidad, sin
   que el menú se vea distinto en una pantalla con mouse. */
@media (pointer: coarse) {
  .nav a {
    padding: 8px 2px;
  }

  .nav a.activo {
    padding-bottom: 8px;
  }
}


/* ── Impresión ─────────────────────────────────────────────── */

/* También venía de blog.css, donde escondía la barra al imprimir
   una guía de talles. Vale para las cuatro páginas: en papel, un
   menú es tinta gastada en enlaces que no se pueden tocar. */
@media print {
  .header,
  .topbar {
    display: none !important;
  }
}