/* ============ MENU PANEL (compartido) ============
   Panel del menú hamburguesa, compartido por 44 páginas (todas menos
   index.html, que tiene su propia variante ligada al loader de marca).
   Antes vivía duplicado a mano en cada página. Editar solo acá. */
.menu-panel{
  position:fixed; inset:0; z-index:200;
  background:var(--cream);
  color:#111;
  transform: translateY(-100%);
  transition: transform .9s cubic-bezier(0.65,0,0.35,1);
  display:grid; grid-template-columns: 1fr 1fr;
  visibility:hidden; pointer-events:none;
}
.menu-panel.open{ transform: translateY(0); visibility:visible; pointer-events:auto; }
.menu-topbar{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 28px;
  z-index:3;
  pointer-events:none;
}
.menu-topbar > *{ pointer-events:auto; }
.menu-topbar img{ display:block; width:160px; height:auto; filter: brightness(0) invert(1); }
.menu-close{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:#111;
}
.menu-close svg{ width:22px; height:22px; }
.menu-image{ position:relative; overflow:hidden; background:#111; }
.menu-image .mi{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform: scale(1);
  transition: opacity .28s var(--ease), transform 6s ease;
  filter: brightness(0.6) contrast(1.1);
}
.menu-image .mi.active{ opacity:1; transform: scale(1.04); }
.menu-image::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
  pointer-events:none;
}
.menu-right{
  display:flex; flex-direction:column; justify-content:center;
  padding: 120px 8vw 60px; position:relative;
}
.menu-list{ list-style:none; display:flex; flex-direction:column; }
.menu-list li{ border-bottom:1px solid rgba(0,0,0,0.12); }
.menu-list li:first-child{ border-top:1px solid rgba(0,0,0,0.12); }
.menu-list a{
  display:flex; align-items:center; justify-content:flex-end;
  gap:18px;
  padding: clamp(18px, 2.2vw, 28px) 0;
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size: clamp(42px, 5vw, 64px);
  line-height:1; color:#0b0b0b; text-align:right;
  position:relative;
  transition: transform .5s var(--ease), color .3s var(--ease);
}
.menu-list a .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--gold); opacity:0;
  transform: translateX(-8px) scale(0.4);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.menu-list a .lbl{ display:inline-block; transition: transform .5s var(--ease); }
.menu-list a:hover, .menu-list a.is-hover{ color: var(--gold); }
.menu-list a:hover .dot, .menu-list a.is-hover .dot{ opacity:1; transform: translateX(0) scale(1); }
.menu-list a:hover .lbl, .menu-list a.is-hover .lbl{ transform: translateX(-12px); color: var(--gold); }
.menu-list a .num{
  font-family:'Roboto', sans-serif;
  font-weight:300; font-size:12px; letter-spacing:0.3em;
  color:rgba(0,0,0,0.35); margin-left:24px;
  align-self:flex-start; padding-top:10px;
}