/* Menu mobile: mesmo modelo do site da Casa das Conchas (painel que entra pela direita), com a identidade da Villa Rio.
   O botão .vr-menu-btn só aparece até 820px (CSS de cada página); abre e fecha pelo assets/vr-menu.js.
   O painel não usa estilo inline nem <nav>, para não pegar as regras ".vr nav" e ".vr [style*=...]" das páginas. */
.vr-drawer {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; justify-content: flex-end;
  background: rgba(32, 30, 29, .45);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
html.vr-menu-open .vr-drawer { opacity: 1; visibility: visible; transition: opacity .25s ease; }

.vr-drawer__panel {
  position: relative; width: min(86vw, 380px); height: 100%; overflow-y: auto;
  padding: 72px 28px 32px; box-sizing: border-box;
  background: var(--color-surface, #f7f1e7); color: var(--color-text, #201e1d);
  font-family: var(--font-body); font-size: 14px; line-height: 1.5; text-align: left;
  transform: translateX(100%); transition: transform .3s ease;
}
html.vr-menu-open .vr-drawer__panel { transform: translateX(0); }

.vr-drawer__close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer; color: var(--color-accent-700, #6f5a39);
  font-size: 34px; line-height: 1; padding: 0;
}
.vr-menu-btn:focus-visible, .vr-drawer__close:focus-visible { outline: 2px solid var(--color-accent-600, #8a7047); outline-offset: 2px; }

.vr-drawer__nav { display: flex; flex-direction: column; margin: 0 0 28px; }
/* Seletores com .vr-drawer na frente para ganhar das regras de link das páginas */
.vr-drawer .vr-drawer__nav a {
  display: block; padding: 12px 0;
  font-family: var(--font-heading); font-size: 26px; line-height: 1.2;
  color: var(--color-accent-700, #6f5a39); text-decoration: none; border-bottom: 1px solid var(--color-accent-200, #ece1cb);
}
.vr-drawer .vr-drawer__nav a[aria-current="page"] { color: var(--color-accent-900, #372d1d); }

.vr-drawer a.vr-drawer__cta, .vr-drawer a.vr-drawer__cta:hover, .vr-drawer a.vr-drawer__cta:focus {
  display: inline-block; margin: 0 0 28px; padding: 13px 30px; border-radius: 999px;
  background: var(--color-accent-600, #8a7047); color: #fff; text-decoration: none;
  text-transform: uppercase; letter-spacing: .06em; font-size: 14px;
}
.vr-drawer a.vr-drawer__cta:hover { background: var(--color-accent-700, #6f5a39); }

.vr-drawer__info p { margin: 0 0 10px; }
.vr-drawer .vr-drawer__info a, .vr-drawer .vr-drawer__legal a { color: var(--color-text, #201e1d); text-decoration: none; }
.vr-drawer__social { display: flex; gap: 18px; margin: 18px 0 24px; }
.vr-drawer .vr-drawer__social a { color: var(--color-accent-700, #6f5a39); text-decoration: none; font-weight: 600; font-size: 13px; }
.vr-drawer__legal { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }

html.vr-menu-open, html.vr-menu-open body { overflow: hidden; }

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