/* =====================================================================
   RV25 Relojería · CABECERA Y MENÚ
   ---------------------------------------------------------------------
   Inspirada en Vacheron Constantin:
     ☰ Menú (izquierda) · logo centrado · WhatsApp (derecha)

   Estados (los pone js/secciones/cabecera.js):
     .sobre-portada  transparente sobre la foto, logo e íconos claros
     (sin clase)     fondo crema, logo oscuro
     .escondida      sube y se oculta al bajar por la página

   El menú (#menu) cubre toda la pantalla en azul noche.
   ===================================================================== */

/* ------------------------------- barra ------------------------------- */

.barra {
  position: fixed; left: 0; right: 0; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: calc(64px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(var(--margen), env(safe-area-inset-right, 0px)) 0 max(var(--margen), env(safe-area-inset-left, 0px));
  background: var(--fondo);
  color: var(--tinta);
  transition: background-color .35s ease, color .35s ease, transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.barra:not(.sobre-portada) { box-shadow: 0 1px 0 rgba(6, 26, 40, .06); }

/* Sobre la foto: transparente, con una sombra suave arriba para que se lea */
.barra.sobre-portada {
  background: transparent;
  color: var(--fondo);
  box-shadow: none;
}
.barra.sobre-portada::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1;
  background: linear-gradient(to bottom, rgba(6, 26, 40, .55), rgba(6, 26, 40, 0));
  pointer-events: none;
}

.barra.escondida { transform: translateY(-100%); }

/* --- Botones de los lados (☰ y WhatsApp) --- */
.barra-boton {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 44px; min-height: 44px;
  padding: 0; border: 0; background: none;
  color: inherit; text-decoration: none;
  font: 500 14px/1 var(--letra); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.barra-menu { justify-self: start; }

/* Derecha: ♡ favoritos · bolsa del carrito · WhatsApp (con su numerito) */
.barra-acciones { justify-self: end; display: flex; align-items: center; gap: 2px; margin-right: -10px; }
.barra-icono { position: relative; justify-content: center; min-width: 40px; }   /* 3 caben junto al logo en 360px */
@media (min-width: 720px) { .barra-acciones { gap: 6px; } .barra-icono { min-width: 44px; } }
.barra-icono .icono { width: 22px; height: 22px; }
.barra-menu-texto { display: none; }

/* --- Logo centrado: versión oscura y versión clara, se muestra una --- */
.marca { display: flex; align-items: center; text-decoration: none; }
.marca-oscura, .marca-clara { display: flex; align-items: center; gap: 9px; }
.marca img { width: 34px; height: auto; }
.marca .marca-texto { width: 58px; }
.marca-clara { display: none; }
.sobre-portada .marca-oscura { display: none; }
.sobre-portada .marca-clara  { display: flex; }

/* -------------------------------- menú -------------------------------- */

.menu {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) max(var(--margen), env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(var(--margen), env(safe-area-inset-left, 0px));
  background: var(--noche);
  color: var(--fondo);
  overflow-y: auto;
  animation: menu-entra .3s ease;
}
.menu[hidden] { display: none; }
@keyframes menu-entra { from { opacity: 0; } to { opacity: 1; } }
html.con-menu, html.con-menu body { overflow: hidden; }

.menu-cabeza { display: flex; align-items: center; height: 64px; flex: none; }

.menu-cuerpo { flex: 1; padding: 24px 0 36px; }

.menu-principal, .menu-marcas, .menu-redes { list-style: none; margin: 0; padding: 0; }

.menu-principal a {
  display: block; padding: 8px 0;
  font: 400 clamp(32px, 9vw, 48px)/1.1 var(--titulo); letter-spacing: -0.02em;
  color: var(--fondo); text-decoration: none;
  transition: color .2s ease;
}
.menu a:hover { color: var(--acento); }

.menu-subtitulo {
  margin-top: 34px;
  font: 500 13px/1 var(--letra); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-sobre-noche);
}
.menu-marcas { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 12px; }
.menu-marcas a {
  display: inline-flex; align-items: flex-start; gap: 5px; padding: 6px 0;
  font: 400 24px/1.2 var(--titulo);
  color: var(--fondo); text-decoration: none;
}
.menu-cuenta { font: 700 12px/1 var(--letra); color: var(--acento); padding-top: 3px; }

.menu-redes { display: flex; flex-wrap: wrap; gap: 6px 22px; flex: none; }
.menu-redes a {
  display: inline-block; padding: 8px 0;
  font: 500 15px/1 var(--letra);
  color: var(--tinta-sobre-noche); text-decoration: none;
}

/* ----------------------------- tamaños ----------------------------- */

@media (min-width: 720px) {
  .barra-menu-texto { display: inline; }
  .marca img { width: 38px; }
  .marca .marca-texto { width: 66px; }
}

@media (min-width: 1040px) {
  .barra { height: calc(76px + env(safe-area-inset-top, 0px)); }
  .menu-cabeza { height: 76px; }
  .menu-cuerpo { padding-top: 48px; max-width: 760px; }
}