:root{
  --nav-h: 56px;
  --nav-bg: rgba(11,18,32,.85);
  --panel-bg: #0b1220;
  --text: #e5e7eb;
  --muted: #a3b1c6;
}

.site-header{
  position: sticky; top:0; z-index:1000;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: var(--nav-h);
  gap: 16px;
}
.brand{ display:inline-flex; align-items:center; gap:10px;
  color: var(--text); text-decoration:none; font-weight:700;
}
.brand img{ border-radius: 6px; }

.site-menu{ display:flex; }
.site-menu ul{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.site-menu a{
  color: var(--text); text-decoration:none; padding:6px 10px; border-radius:8px;
}
.site-menu a:hover{ background: rgba(255,255,255,.06); }

/* Botón hamburguesa */
.nav-toggle{
  display:none; width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  color:var(--text); background:transparent; cursor:pointer;
  align-items:center; justify-content:center; gap:4px;
}
.nav-toggle__bar{
  width:20px; height:2px; background:currentColor; display:block;
}

/* --- Mobile --- */
@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }
  .site-menu{
    position: fixed;
    top:0; right:-110%; bottom:0; z-index:1001;
    width: min(78vw, 320px);
    background: var(--panel-bg);
    padding: 24px;
    transition: right .28s ease;
    display:block;
    box-shadow: -20px 0 60px rgba(0,0,0,.35);
  }
  .site-menu.is-open{ right:0; }
  .site-menu ul{ flex-direction:column; gap:12px; }
  body.menu-open{ overflow:hidden; }

  /* backdrop */
  .nav-backdrop{
    position:fixed; inset:0; background: rgba(0,0,0,.35);
    opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:1000;
  }
  .nav-backdrop.is-active{ opacity:1; pointer-events:auto; }
}

/* Utilidad accesible */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* === Fix de imagen HÉROE de habitaciones (mantener) === */
figure.card > img,
img[src^="/assets/img/habitaciones/"]{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:cover;
  border-radius:12px;
}