/* ============================================================
   Romeri Romero — barra superior + menú lateral + panel de contacto
   Archivo compartido por todas las páginas (se edita una sola vez)
   ============================================================ */

/* BARRA SUPERIOR */
.site-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:24px 5vw;
  max-width:1800px;
  margin:0 auto;
}
.site-nav .nav-left{justify-self:start;}
.site-nav .nav-logo{justify-self:center;}
.site-nav .nav-logo a{display:block;}
.site-nav .nav-logo img{height:36px;width:auto;display:block;}

.menu-toggle{
  width:44px;height:44px;
  margin-left:-11px;
  padding:0 11px;
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;
  color:var(--ink);opacity:0.78;
}
.menu-toggle span{display:block;width:100%;height:1.5px;background:currentColor;}
.menu-toggle:hover{opacity:1;}
.menu-toggle:focus-visible,
.drawer-close:focus-visible,
.menu-link:focus-visible,
.menu-sub a:focus-visible,
.contact-row:focus-visible,
.site-nav .nav-logo a:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;
}
@media(max-width:560px){
  .site-nav{padding:18px 5vw;}
  .site-nav .nav-logo img{height:28px;}
}

/* FONDO OSCURO */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(10,14,24,0.45);
  opacity:0;pointer-events:none;transition:opacity 0.25s ease;z-index:100;
}
.drawer-overlay.active{opacity:1;pointer-events:auto;}

/* PANELES LATERALES */
.drawer{
  position:fixed;top:0;
  height:100vh;height:100dvh;
  width:min(380px,88vw);
  background:var(--bone);
  padding:56px 40px;
  overflow-y:auto;
  z-index:101;
  visibility:hidden;
  transition:transform 0.3s ease, visibility 0s linear 0.3s;
}
.drawer-left{left:0;transform:translateX(-100%);}
.drawer-right{right:0;transform:translateX(100%);}
.drawer.active{
  transform:translateX(0);
  visibility:visible;
  transition-delay:0s;
}
.drawer-left.active{box-shadow:10px 0 40px rgba(0,0,0,0.2);}
.drawer-right.active{box-shadow:-10px 0 40px rgba(0,0,0,0.2);}

.drawer-close{
  position:absolute;top:24px;right:28px;
  background:none;border:none;font-size:26px;line-height:1;
  cursor:pointer;color:var(--ink);opacity:0.7;
}
.drawer-close:hover{opacity:1;}
.drawer-title{
  font-family:'Fraunces',serif;font-size:24px;font-weight:400;
  margin-bottom:36px;color:var(--ink);
}

/* MENÚ */
.menu-item{border-bottom:1px solid rgba(17,19,24,0.12);}
.menu-link{
  display:block;width:100%;
  font-family:'Fraunces',serif;font-size:26px;font-weight:400;line-height:1.2;
  color:var(--ink);text-decoration:none;text-align:left;
  padding:16px 0;
  background:none;border:none;cursor:pointer;
  opacity:0.9;
}
.menu-link:hover{opacity:1;}
.menu-sub{padding:0 0 14px 2px;}
.menu-sub a{
  display:block;
  font-family:'Space Grotesk',sans-serif;font-size:15px;letter-spacing:0.04em;
  color:var(--ink);text-decoration:none;
  padding:8px 0 8px 14px;
  opacity:0.72;
}
.menu-sub a:hover{opacity:1;}
.menu-link[aria-current="page"],
.menu-sub a[aria-current="page"]{
  opacity:1;
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-underline-offset:6px;
  text-decoration-thickness:1px;
}

/* CONTACTO */
.contact-row{
  display:block;
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  padding:16px 0;
  border-bottom:1px solid rgba(17,19,24,0.12);
  opacity:0.85;
}
.contact-row:hover{opacity:1;}

@media(prefers-reduced-motion:reduce){
  .drawer,.drawer-overlay{transition:none;}
}