/* ==========================================================
   CABECERA · barra con logo + botón de menú + menú lateral
   (base.css anula márgenes/paddings: aquí llevan !important)
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* ---------- Barra superior con el logo ---------- */
.cb {
  height: 76px;
  background: #fff !important;
  border-bottom: 1px solid #efe9e2;
}

.cb > [class*="col"] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.cb-logo { display: inline-flex; line-height: 0; }

.imgTitle {
  height: 48px;
  width: auto;
  display: block;
}

/* ---------- Botón hamburguesa (fijo, centrado con la barra) ---------- */
#menu_on {
  position: fixed;
  top: 28px;
  left: 28px;
  z-index: 1001;
  display: inline-block;
  width: 28px;
  height: 20px;
  margin: 0 !important;
}

#menu_on span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: #1f1d1b;
  transition: all .25s ease;
  transform-origin: 0 100%;
}

#menu_on span:nth-child(1) { top: 0; }
#menu_on span:nth-child(2) { top: calc(50% - 1.5px); }
#menu_on span:nth-child(3) { bottom: 0; }

.visible_menu #menu_on span:nth-child(1) { transform: rotate(45deg) translate(-1px, 0); }
.visible_menu #menu_on span:nth-child(2) { opacity: 0; }
.visible_menu #menu_on span:nth-child(3) { transform: rotate(-45deg) translate(-2px, 2px); }

/* ---------- Menú lateral ---------- */
nav#menu-principal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -360px;
  z-index: 1000;
  width: 340px;
  padding: 90px 44px 40px !important;
  background: #fdfcfa;
  box-shadow: 10px 0 40px rgba(60, 45, 30, .10);
  opacity: 0;
  visibility: hidden;      /* cerrado: que no bloquee clics aunque sea invisible */
  pointer-events: none;
  transition: left .45s ease, opacity .45s ease, visibility .45s;
  overflow-y: auto;
}

.visible_menu nav#menu-principal {
  left: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

nav#menu-principal .menu-logo {
  display: block;
  width: 120px;
  margin-bottom: 34px !important;
}

nav#menu-principal .menu-logo img { width: 100%; height: auto; display: block; }

nav#menu-principal ul { list-style: none; }

nav#menu-principal li + li { border-top: 1px solid #efe9e2; }

nav#menu-principal li a {
  display: block;
  padding: 12px 0 !important;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 30px;
  line-height: 1.2;
  color: #1f1d1b;
  text-decoration: none !important;
  transition: color .2s, padding-left .2s;
}

nav#menu-principal li a:hover { color: #a88a6c; padding-left: 6px !important; }

nav#menu-principal li a.is-active {
  font-style: italic;
  color: #a88a6c;
}

/* ---------- Responsive ---------- */
@media (max-width: 575px) {
  .cb { height: 64px; }
  .imgTitle { height: 38px; }
  #menu_on { top: 22px; left: 18px; width: 26px; height: 19px; }

  nav#menu-principal {
    width: 100%;
    left: -100%;
    padding: 80px 32px 32px !important;
  }
  nav#menu-principal .menu-logo { width: 96px; margin-left: auto !important; margin-right: auto !important; }
  nav#menu-principal li a { font-size: 28px; text-align: center; }
  nav#menu-principal li a:hover { padding-left: 0 !important; }
}