/* ─── Typography ─── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6 { font-family: 'Cinzel', 'Playfair Display', serif; }

/* ─── Hamburger Button ─── */
.hamburger {
  display: none; position: fixed; top: 18px; right: 18px; z-index: 1100;
  width: 40px; height: 40px; background: rgba(10,8,6,.92);
  border: 1px solid rgba(212,175,55,.3); border-radius: 8px;
  cursor: pointer; padding: 9px; flex-direction: column;
  justify-content: center; gap: 5px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all .3s;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.hamburger span {
  display: block; width: 100%; height: 3px;
  background: #EEEDEB; border-radius: 2px;
  transition: all .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ─── Mobile Overlay ─── */
.mobile-overlay {
  display: none; position: fixed; inset: 0; z-index: 1001;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .3s;
}
.mobile-overlay.open { opacity: 1; }

@media (max-width: 768px) {
  .hamburger { display: flex !important; }
  .mobile-overlay.open { display: block; }

  .encabezado {
    position: relative !important;
    z-index: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 4%;
    height: 64px;
  }
  .encabezado .logo {
    width: 110px;
    height: 44px;
  }
  .encabezado nav,
  .main-nav {
    position: fixed; top: 0; right: -280px; width: 260px; height: 100vh;
    background: rgba(10,8,6,.97); border-left: 1px solid rgba(212,175,55,.1);
    z-index: 1050; padding: 80px 20px 20px;
    transition: right .35s cubic-bezier(.16,1,.3,1);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  .encabezado nav.open,
  .main-nav.open { right: 0; }
  .encabezado nav ul,
  .main-nav ul { flex-direction: column; gap: 4px; }
  .encabezado nav ul li a,
  .main-nav ul li a {
    font-size: .85rem; padding: 10px 14px; display: block;
    border-radius: 8px;
  }
  .encabezado nav ul li a:hover,
  .main-nav ul li a:hover { background: rgba(212,175,55,.08); }

  .band { margin-top: 64px; }
}

@media (max-width: 480px) {
  .hamburger { top: 14px; right: 14px; width: 36px; height: 36px; padding: 7px; }
  .lang-switcher { bottom: 12px; right: 12px; }
}