/* Evita a folga visual/overscroll no topo da página inicial. */
html,
body{
  overscroll-behavior-y:none;
}

body:not(.booking-page){
  overflow-x:hidden;
}

body:not(.booking-page) .hero-copy{
  padding-top:34px;
}

/* Cabeçalho minimalista em qualquer largura:
   logo à esquerda e, à direita, tema + conta + menu.
   Os links ficam escondidos e aparecem somente ao abrir o menu. */
body:not(.booking-page) .nav{
  gap:14px;
}

body:not(.booking-page) .theme-toggle{
  margin-left:auto;
}

body:not(.booking-page) .nav-cta{
  display:none!important;
}

body:not(.booking-page) .menu-toggle{
  display:block!important;
  flex:0 0 auto;
  width:44px;
  height:44px;
  padding:7px;
  border:0;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
}

body:not(.booking-page) .menu-toggle span{
  width:25px;
  height:2px;
  margin:5px auto;
  border-radius:999px;
  transition:transform .18s ease,opacity .18s ease;
}

body:not(.booking-page) .menu-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
body:not(.booking-page) .menu-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
body:not(.booking-page) .menu-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

body:not(.booking-page) .nav-links{
  position:fixed;
  top:82px;
  left:0;
  right:0;
  z-index:49;
  display:none;
  flex-direction:column;
  gap:0;
  margin-left:0;
  padding:16px max(20px,calc((100vw - 1180px) / 2));
  border-bottom:1px solid #1b383f;
  background:rgba(7,19,23,.985);
  color:#eff9fa;
  box-shadow:0 18px 38px rgba(0,0,0,.22);
  backdrop-filter:blur(18px);
}

body:not(.booking-page) .nav-links.open{
  display:flex;
}

body:not(.booking-page) .nav-links a{
  width:100%;
  padding:12px 2px;
  color:#eff9fa;
  font-size:13px;
  font-weight:700;
}

body:not(.booking-page) .nav-links a::after{
  display:none;
}

body:not(.booking-page) .nav-links a:hover{
  color:var(--teal);
}

/* No desktop, os pets precisam ocupar melhor a lateral direita da hero.
   A imagem cresce a partir da base para manter os animais apoiados no rodapé,
   preenchendo o espaço vertical sem invadir o bloco de texto. */
@media (min-width:981px){
  body:not(.booking-page) .hero-media{
    overflow:hidden;
  }

  body:not(.booking-page) .hero-media img{
    width:118%!important;
    height:118%!important;
    max-width:760px!important;
    max-height:680px!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    transform-origin:center bottom;
  }
}

@media (min-width:981px) and (max-width:1220px){
  body:not(.booking-page) .hero-media img{
    width:112%!important;
    height:112%!important;
    max-width:650px!important;
    max-height:640px!important;
  }
}

@media (max-width:980px){
  body:not(.booking-page) .hero-copy{
    padding-top:32px;
  }
}

@media (max-width:650px){
  body:not(.booking-page) .hero-copy{
    padding-top:26px;
  }

  body:not(.booking-page) .nav-links{
    top:72px;
    padding:14px 18px 18px;
  }

  body:not(.booking-page) .menu-toggle{
    width:40px;
    height:40px;
    padding:5px;
  }
}