:root{
  --container: 1140px;
  --text: #222;
  --muted: #8b8b8b;
  --light: #f6f6f6;
  --accent: #ff3b5c;
  --mint: #dff3f1;
  --navH: 110px;
}

/* Melhor comportamento responsivo para links âncora (evita ficar escondido atrás da nav fixa) */
section[id]{
  scroll-margin-top: calc(var(--navH) + 18px);
}

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

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
  overflow-x:hidden; /* evita scroll horizontal acidental */
}
img{max-width:100%;display:block}
a{color:inherit}

.container{
  width:min(var(--container), calc(100% - 48px));
  margin-inline:auto;
}

/* padding lateral mais confortável em mobile */
@media (max-width: 560px){
  .container{width:min(var(--container), calc(100% - 32px));}
}

/* ---------- NAV ---------- */
.topbar{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--navH);
  z-index:50;
  display:flex;
  align-items:center;
  transition: background .25s ease, box-shadow .25s ease;
}
.topbar.is-solid{
  background:rgba(72, 51, 14, 0.98);
  box-shadow:0 8px 30px rgba(255, 255, 255, 0.08);
}

.nav-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:var(--navH)}

.nav-toggle{
  display:none;
  position:absolute;
  right:0;
  width:44px;height:44px;
  border:0;background:transparent;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  margin:6px 0;
  background:#ffffff;
  transition:background .25s ease;
}
.topbar.is-solid .nav-toggle span{background:#ffffff}

.nav{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nav ul{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:60px}
.nav-left{justify-content:flex-end}
.nav-right{justify-content:flex-start}

/*
  IMPORTANTE:
  O logo mobile tem tambem a classe .nav-logo. Como a regra .nav-logo vem
  depois, ela sobrepoe o display:none se a especificidade for igual.
  Por isso escondemos explicitamente o logo mobile com seletor combinado.
*/
.nav-logo.nav-logo--mobile{display:none}

.nav-link{
  text-decoration:none;
  letter-spacing:.20em;
  font-size:12px;
  font-weight:400;
  color:rgba(255,255,255,.92);
  text-transform:uppercase;
  transition:color .2s ease;
}
.topbar.is-solid .nav-link{color:#ffffff}
.nav-link:hover{color:#fff}
.topbar.is-solid .nav-link:hover{color:#111}

@media (max-width: 1024px) {
  .topbar.is-solid .nav.is-open .nav-link {
    color: #000000;
  }
}

.nav-logo{
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav-logo img{
  height: 130px;
  width:auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}
.topbar.is-solid .nav-logo img{filter:none}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  isolation:isolate;
  min-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:var(--navH);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url('background.jpeg') center/cover no-repeat;
  transform:scale(1.02);  z-index:-1;
}

.hero .hero-inner{position:relative;text-align:center;color:#fff;max-width:920px;padding:64px 0}


.hero-video{
  position: relative;
  min-height: 70vh; /* ajusta */
  overflow: hidden;
}

.hero-video-carousel{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}

.hero-video-slide.is-active{
  opacity: 1;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,.35); /* ajusta */
}

.hero-inner{
  position: relative;
  z-index: 2;
  /* mantém o teu styling atual; se precisares: */
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* controlos */
.hero-controls{
  display:flex;
  gap: 10px;
  margin-top: 14px;
}

.hero-controls button{
  border: 1px solid currentColor;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

/* dots */
.hero-dots{
  display:flex;
  gap: 8px;
  margin-top: 10px;
}

.hero-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  opacity: .7;
  cursor: pointer;
}

.hero-dot.is-active{
  opacity: 1;
}


.play{
  width:78px;height:78px;border-radius:999px;
  border:2px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.08);
  display:grid;place-items:center;
  margin:0 auto 28px;
}
.play .triangle{
  width:0;height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:16px solid rgba(255,255,255,.9);
  margin-left:3px;
}

.hero-title{
  font-family: "Playfair Display", serif;
  font-weight:500;
  font-size:clamp(40px, 6vw, 72px);
  line-height:1.05;
  margin:0 0 18px;
}
.hero-sub{
  color:rgba(255,255,255,.85);
  font-size:18px;
  line-height:1.85;
  margin:0 auto 26px;
  max-width:760px;
}


.hero { position: relative; }
.hero-swiper { width: 100%; }

.hero-swiper .swiper-slide{
  min-height: 70vh; /* ajusta à tua medida */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 12px;
  padding: 24px 16px;
}

/* opcional: melhora visibilidade das setas/paginação por cima do hero */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next{
  color: currentColor;
}

.hero-swiper .swiper-pagination-bullet{
  opacity: .6;
}
.hero-swiper .swiper-pagination-bullet-active{
  opacity: 1;
}




.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 26px;
  border:1px solid rgba(255,255,255,.6);
  color:rgba(255, 255, 255, 0.98);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.25em;
  text-transform:uppercase;
  background:rgba(72, 51, 14, 0.98);
}

/* ---------- SECTION HELPERS ---------- */
.section{padding:44px 0}
.section-title{
  text-align:center;
  font-size:clamp(28px, 3.6vw, 44px);
  letter-spacing:.35em;
  font-weight:300;
  color:#111;
  margin:0 0 32px;
}
.section-title.small{font-size:32px;margin-bottom:34px}

/* ---------- ABOUT ---------- */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:60px;
  align-items:center;
}
.about-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.about-photos .ph{
  aspect-ratio: 1 / 1;
  background:#ddd;
  overflow:hidden;
}
.about-photos img{
  width:100%;height:100%;object-fit:cover;
}

.kicker{
  font-size:clamp(34px, 4.8vw, 54px);
  letter-spacing:.35em;
  line-height:1.1;
  margin:0 0 22px;
  font-weight:300;
}
.body{
  color:#8b8b8b;
  line-height:2.05;
  font-size:16px;
  margin:0 0 18px;
}
.link-accent{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  color:var(--accent);
  text-decoration:none;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
}
.link-accent .down{font-size:18px;transform:translateY(1px)}

/* ---------- MENU ---------- */
.menu-wrap{width:min(980px, 100%);margin:0 auto}
.tabs{
  display:flex;
  justify-content:center;
  gap:18px;
  margin:0 0 48px;
  flex-wrap:wrap;
}
.tab{
  border:1px solid #ececec;
  background:#fff;
  height:46px;
  padding:0 34px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.tab.is-active{border-color:#111}

.menu-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px 70px;
}



.menu-pdf-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.menu-pdf-modal.is-open {
  display: block;
}

.menu-pdf-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
}

.menu-pdf-dialog {
  position: relative;
  width: 90%;
  max-width: 1000px;
  height: 90vh;
  margin: 5vh auto;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.menu-pdf-dialog iframe {
  width: 100%;
  height: 100%;
}

.menu-pdf-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
}



/* Evita overflow em descrições longas */
.menu-grid h3, .menu-grid p{overflow-wrap:anywhere;}
/* No HTML os itens do menu usam .mi (mantemos compatibilidade) */
.menu-item,
.mi{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:start;
}
.menu-item h4,
.mi h3{
  margin:0;
  font-size:20px;
  font-weight:400;
}
.menu-item p,
.mi p{
  grid-column:1 / -1;
  margin:6px 0 0;
  color:#9a9a9a;
}
.menu-item .price,
.mi .price{font-weight:400;color:#222}

/* ---------- BANNER / PARALLAX ---------- */
.banner{
  position: relative;
  padding: 110px 0;
  color: #fff;
  text-align: center;
  isolation: isolate; /* força o stacking correto */
}

/* fundo + overlay */
.banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url("background.jpeg") center / cover no-repeat;
  background-attachment: fixed;
  z-index: -1;          /* fica atrás do texto */
  pointer-events: none;
}

/* conteúdo do banner (EXISTE no teu HTML) */
.banner > .container{
  position: relative;
  z-index: 1;
}

.banner h2{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size:clamp(36px, 5.6vw, 70px);
  margin: 0 0 12px;
}

.banner p{
  margin: 0 auto;
  max-width: 760px;
  color: rgba(255,255,255,.82);
  line-height: 1.9;
}

/* ---------- GALLERY ---------- */
/* GALERIA */
.gallery-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.gallery-img {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-img video {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.gallery-img video:hover {
  transform: scale(1.05);
}


.gallery-img img {
  width: 100%;
  height: 220px;      /* dá altura real às células */
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.gallery-img img:hover {
  transform: scale(1.05);
}

/* Esconder extras */
.gallery-img.extra {
  display: none;
}

/* Botão */
#loadMore {
  margin: 30px auto 0;
  display: block;
}

/* MODAL */
.gallery-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,.85);
  align-items: center;
  justify-content: center;
}

.gallery-modal img {
  max-width: 90%;
  max-height: 85%;
  border-radius: 10px;
}

.gallery-modal .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
}

/* Garantir que o botão "Ver mais" aparece */
#loadMore{
  display: inline-block !important;
  margin: 24px auto 0 !important;
  padding: 12px 22px !important;
  position: relative;
  z-index: 2;
}

#gallery .container{
  text-align: center;
}

/* ---------- TESTIMONIALS ---------- */
.testimonials{background-color: #ffffff;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;align-items:start}
.testi{
  text-align:center;
  padding:10px 10px 0;
}
.quote{
  font-size:90px;
  line-height:1;
  color:#111;
  margin:0 0 10px;
  font-family: "Playfair Display", serif;
}
.testi p{margin:0 auto 22px;max-width:320px;color:#222;line-height:2}
.avatar{width:74px;height:74px;border-radius:999px;overflow:hidden;margin:0 auto 10px;border:4px solid rgba(255,255,255,.7)}
.avatar img{width:100%;height:100%;object-fit:cover}
.name{margin:0;color:#666;letter-spacing:.04em}

/* ---------- EVENTS ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border:1px solid #efefef}
.card .img{aspect-ratio: 16/9;overflow:hidden;background:#ddd}
.card .img img{width:100%;height:100%;object-fit:cover}
.card .body{padding:28px 26px 30px}
.date{font-size:12px;letter-spacing:.08em;color:#bcbcbc;margin:0 0 10px;text-transform:uppercase}
.card h3{margin:0 0 14px;font-family:"Playfair Display", serif;font-weight:500;color:var(--accent);font-size:34px;line-height:1.05}
.card p{margin:0;color:#9a9a9a;line-height:2}

/* ---------- RESERVA ---------- */
.reserve .reserve-wrap{max-width:790px;margin:0 auto}
.reserve-form{border:1px solid #efefef;padding:26px 26px 22px;background:#fff}
.reserve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.reserve .field{gap:8px;margin-bottom:14px}
.reserve label{font-size:13px}
.reserve input,
.reserve select,
.reserve textarea{padding:10px 12px}
.reserve textarea{min-height:70px;resize:vertical}
.reserve-form select{border:1px solid #e6e6e6;padding:10px 12px;font:inherit;outline:none;background:#fff}
.reserve-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:8px;margin-left:30%;margin-right:30%;}
.btn-email{color:#111;border-color:#111}
.reserve-note{display:flex;margin:10px 0 0;color:#9a9a9a;line-height:1.8;font-size:12px;margin-left:30%;margin-right:30%;}
.reserve-success{margin-top:14px;padding:12px 14px;border:1px solid #cfe7cf;background:#f4fff4;color:#1f6a1f}

/* Reservas (Apps Script) - estado + iframe escondido */
.reserve-status{margin-top:12px;font-weight:600;min-height:1.2em}
.reserve-status.ok{color:#1f8a3b}
.reserve-status.err{color:#b42318}
.reserve-iframe{display:none}

/* ---------- CONTACT ---------- */
.contact .contact-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "form map";
  gap: 40px;
  align-items: start; /* nao estica as colunas */
}

.contact-kicker{
  margin:0 0 18px;
  font-size:18px;
  font-weight:400;
  color:#555;
}

.contact-left{
  grid-area: form;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.contact-right{
  grid-area: map;
  background:#e9ecef;
  position:relative;
  border-radius: 14px;
  overflow:hidden;
  height: 420px; /* mapa mais pequeno */
}

.contact-status{margin-top:12px;font-weight:600;min-height:1.2em}
.contact-status.ok{color:#1f8a3b}
.contact-status.err{color:#b42318}


/* Contact: stack form + map below desktop */
@media (max-width: 1200px){
  .contact .contact-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "form"
      "map";
  }
}

/* ---------- LANGUAGE SWITCHER ---------- */
.lang{display:flex;align-items:center;gap:10px}
.lang-select{
  height:34px;
  border:1px solid rgba(185, 163, 163, 0.65);
  background:rgba(255, 255, 255, 0.98);
  color:#000000;
  border-radius:999px;
  padding:0 10px;
  font:inherit;
  font-size:13px;
}
.topbar.is-solid .lang-select{border:1px solid #e6e6e6;color:#111;background:#fff}

@media (max-width: 980px){
  .lang-select{border:1px solid #e6e6e6;color:#111;background:#fff}
}

.gm-embed{
  border:0;
  width:100%;
  height:100%;
  min-height:0;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
label{color:#a8a8a8;font-size:14px}
input, textarea{
  border:1px solid #e6e6e6;
  padding:12px 14px;
  font:inherit;
  outline:none;
}
textarea{min-height:180px;resize:vertical}
.btn-submit{
  align-self:flex-start;
  margin-top:18px;
  height:46px;
  padding:0 26px;
  border:1px solid #111;
  background:#fff;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:12px;
  cursor:pointer;
}

.map-error{
  text-align:center;
  width:min(520px, 90%);
}
.map-error .icon{
  width:74px;height:74px;border-radius:999px;
  background:#6c757d;
  display:grid;place-items:center;
  color:#fff;font-size:40px;
  margin:0 auto 18px;
  opacity:.6;
}
.map-error h4{margin:0 0 10px;font-size:28px;font-weight:500;color:#111}
.map-error p{margin:0;color:#444;line-height:1.6;font-size:12px}
/* ---------- FOOTER ---------- */
footer{padding:20px 0;text-align:center;color:#654925}

.footer-inner{display:flex;flex-direction:column;align-items:center;justify-content:center}

.footer-social{
  margin-top:12px;
  display:flex;
  justify-content:center;
  gap:16px;
}

.footer .social-link{
  color:inherit;
  width:22px;
  height:22px;
  opacity:0.85;
}

.footer .social-link svg{
  width:22px;
  height:22px;
}

.footer .social-link:hover{
  opacity:1;
  transform:translateY(-1px);
  color:#000000;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1060px){
  .hero-title{font-size:58px}
  .banner h2{font-size:56px}
  .about-grid{grid-template-columns:1fr;gap:48px}
  .kicker{text-align:center}
  .about-text{max-width:680px;margin:0 auto;text-align:center}
  .menu-grid{grid-template-columns:1fr}
  .gallery-row{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;grid-template-areas:"form" "map"}
  .contact-left{padding:74px 28px}
  .contact-right{min-height:420px}
  .reserve-grid{grid-template-columns:1fr 1fr}

  /* reduz espaçamento do menu desktop antes do breakpoint mobile */
  .nav ul{gap:34px}
}

/*
  NAV mobile mais cedo:
  Em tablets (ex: 768–1024) o menu desktop podia estourar e criar scroll horizontal.
  Por isso ativamos o menu hamburger a partir de ~980px.
*/
@media (max-width: 980px){
  :root{--navH: 86px;}
  .topbar{background:rgba(72, 51, 14, 0.98);box-shadow:0 8px 30px rgba(0,0,0,.08)}
  .nav-toggle{display:block}

  /* keep the logo visible in the header like the reference */
  .nav-logo.nav-logo--mobile{
    display:flex;
    position:absolute;
    left:0;
    align-items:center;
    height:var(--navH);
  }
  .nav-logo--mobile img{height: 90px;filter:none}

  /* hide the centered (desktop) logo inside the dropdown */
  .nav-logo--desktop{display:none}

  .reserve-form{padding:26px 18px}
  .reserve-grid{grid-template-columns:1fr}

  .nav{
    position:fixed;
    inset:var(--navH) 0 auto 0;
    background:rgba(255,255,255,.98);
    transform:translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    padding:18px 0 22px;
    box-shadow:0 14px 30px rgba(0,0,0,.12);
    display:block;
  }
  .nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
  .nav ul{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:22px;
    padding:18px 0 8px;
    margin-left:24px;
  }
  .nav-right{margin-top:12px}
  .nav-link{color:#523b3b;font-size:12px;letter-spacing:.32em}
  .nav-link:hover{color:#111}

  /* redes sociais não estouram em 1 linha */
  .nav-social{display:flex;gap:12px;flex-wrap:wrap;margin-left:24px;padding-bottom:8px}
}

@media (max-width: 560px){
  .hero-sub{font-size:16px;}
  .banner{padding:84px 0}
  .section{padding:56px 0}
  .about-photos{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}

  /* galeria em 1 coluna no telemóvel */
  .gallery-row{grid-template-columns:1fr}

  /* tabs do menu mais compactas */
  .tab{padding:0 18px;font-size:11px;letter-spacing:.22em}
}

/* Ajustes extra para telemóveis pequenos */
@media (max-width: 420px){
  :root{--navH: 78px;}

  .nav-logo--mobile img{height:72px;}

  .hero .hero-inner{padding:54px 0}
  .play{width:66px;height:66px;margin-bottom:22px}
  .hero-title{letter-spacing:.02em}

  .section-title{letter-spacing:.24em}
  .kicker{letter-spacing:.24em}

  /* mantém os botões/tabs usáveis sem ocupar demasiado */
  .tabs{gap:12px;margin-bottom:34px}
  .tab{height:42px;padding:0 14px}

  /* formulário de contacto e reservas mais confortáveis */
  .reserve-form{padding:22px 14px}
  .contact-left{padding:58px 18px}
  .gm-embed{min-height:420px}
}

/* Evita o efeito "fixed" no mobile (melhor performance/compatibilidade) */
@media (max-width: 980px){
  .banner::before{background-attachment: scroll;}
}

@media (max-width: 768px){
  .nav-toggle span{background:#ffffff !important;}
  .topbar.is-solid .nav-toggle span{background:#ffffff !important;}
}


/* ---------- VIDEO MODAL (MP4) ---------- */
.video-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.video-modal.is-open{display:block;}

.video-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

.video-modal__dialog{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(92vw, 980px);
  background:#000;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}

.video-modal__body{
  display:flex;
  flex-direction:column;
}

.video-modal__body video{
  width:100%;
  height:auto;
  max-height:70vh;
  display:block;
  background:#000;
}

.video-modal__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px 14px;
  background:#0b0b0b;
}

.video-modal__controls button{
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);
  color:#fff;
  width:44px;
  height:34px;
  border-radius:999px;
  cursor:pointer;
}

.video-dots{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.video-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:transparent;
  opacity:.7;
  cursor:pointer;
}

.video-dot.is-active{
  opacity:1;
  background:rgba(255,255,255,.85);
}

.video-modal__close{
  position:absolute;
  top:10px;
  right:12px;
  width:40px;
  height:40px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:26px;
  line-height:40px;
  cursor:pointer;
  z-index:2;
}


/* ---------- RESERVA MODAL ---------- */
.reserve-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.reserve-modal.is-open{display:block;}

.reserve-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.reserve-modal__dialog{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(92vw, 520px);
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}

.reserve-modal__content{
  padding:22px 20px 18px;
}

.reserve-modal__title{
  margin:0 0 8px;
  font-size:18px;
  letter-spacing:.02em;
  color:#111;
}

.reserve-modal__text{
  margin:0 0 14px;
  color:#333;
  line-height:1.4;
}

.reserve-modal__actions{
  display:flex;
  justify-content:center;
}

.reserve-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  color:#111;
  font-size:24px;
  line-height:38px;
  cursor:pointer;
}

/* play como link */
.play{
  text-decoration:none;
  cursor:pointer;
}


/* ---------- NAV: redes sociais à direita ---------- */
.nav-right-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
}

.nav-social{
  display:flex;
  align-items:right;
  gap:10px;
}

.social-link{
  display:inline-flex;
  width:18px;
  height:18px;
  opacity:.92;
  transition:opacity .2s ease, transform .2s ease, color .2s ease;
  color:rgba(255,255,255,.92);
  text-decoration:none;
}

@media (max-width: 1024px) {
  .nav.is-open .social-link {
    color: #000000;
  }
}

.social-link svg{
  width:18px;
  height:18px;
  fill:currentColor;
  display:block;
}

.topbar.is-solid .social-link{
  color:#ffffff;
}

.social-link:hover{
  opacity:1;
  transform:translateY(-1px);
  color:#fff;
}
.topbar.is-solid .social-link:hover{
  color:#111;
}


#loadMore{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  margin-top: 26px !important;
  padding: 12px 22px !important;

  border: 1px solid currentColor !important;
  background: transparent !important;
  color: inherit !important;

  position: relative;
  z-index: 99999 !important;
}