/* Minimal, clean, inspired by modern property sites */
:root{
  --bg:#ffffff;
  --text:#1b2430;
  --muted:#5e6b7a;
  --brand:#0b8793;    /* oceano */
  --brand-2:#1cd8d2;  /* gradiente */
  --card:#f6f8fa;
  --border:#e5e9ef;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

.container{max-width:1140px;margin:0 auto;padding:0 20px}
.container.narrow{max-width:860px}

.section{padding:72px 0}
.section h2{font-family:Poppins,Inter,sans-serif;font-weight:700;margin:0 0 16px}
.section-intro{color:var(--muted);margin-bottom:32px}

.btn{
  display:inline-block;padding:12px 18px;border-radius:10px;
  background:var(--brand);color:#fff;text-decoration:none;font-weight:600;
  transition:transform .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-1px);opacity:.95}
.btn-outline{
  background:transparent;color:var(--brand);border:2px solid var(--brand);
}
.btn-small{padding:10px 14px;font-size:.95rem}
.btn-whatsapp{background:#25D366;color:#fff}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.03);overflow:hidden;
}

.grid{display:grid;gap:24px}
.features-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rooms-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.gallery-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gallery-grid img,.room img{width:100%;height:220px;object-fit:cover;display:block}

.site-header{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.logo{height:40px;width:auto;border-radius:6px;object-fit:contain;background:#fff}
.nav-toggle{display:none;background:transparent;border:0;font-size:24px}
.nav-list{list-style:none;display:flex;gap:16px;margin:0;padding:0}
.nav-list a{color:var(--text);text-decoration:none;font-weight:600}
.nav-list .btn{padding:10px 14px;border-radius:10px}

@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .nav-list{position:absolute;right:20px;top:64px;background:#fff;border:1px solid var(--border);
    border-radius:12px;padding:12px;display:none;flex-direction:column;min-width:220px}
  .nav-list.show{display:flex}
}

.hero{position:relative;height:min(92vh,760px);}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.hero-content{position:relative;z-index:2;color:#fff;padding-top:18vh}
.hero h1{font-family:Poppins,Inter,sans-serif;font-size:clamp(28px,5.5vw,56px);margin:0 0 12px}
.hero p{max-width:700px;margin:0 0 20px;font-size:1.05rem;color:#f1f7ff}
.hero-ctas .btn{margin-right:10px}

.feature{padding:20px}
.feature h3{margin:0 0 6px}

.room .room-body{padding:16px}
.room h3{margin:0 0 10px}
.room ul{margin:0 0 12px 18px;color:var(--muted)}

.map img, .map iframe{width:100%;height:380px;border:0;border-radius:12px}

.contact .contact-card{padding:24px}
.form-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.form-grid label{display:flex;flex-direction:column;font-weight:600;font-size:.95rem;color:var(--text)}
.form-grid input,.form-grid textarea{
  margin-top:6px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#fff;
  font:inherit;color:var(--text);
}
.form-grid .full{grid-column:1/-1}
.form-grid button,.form-grid .btn{justify-self:start}

.site-footer{padding:36px 0;border-top:1px solid var(--border);background:#fff}
.footer-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:center}
.credits{color:var(--muted)}

.promo{position:sticky;top:0;background:#16a34a;color:#fff;display:flex;gap:12px;
  align-items:center;justify-content:center;padding:10px 16px;z-index:1000;font-weight:600}
.promo a{background:#fff;color:#16a34a;padding:6px 12px;border-radius:6px;text-decoration:none}
.promo.hidden{display:none}
#promo-close{background:transparent;border:0;color:#fff;font-size:20px;margin-left:8px;cursor:pointer}

/* HERO video */
.hero { position: relative; min-height: 70vh; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-content { position: relative; z-index: 1; min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.hero::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.25); } /* leve escurecido */

html, body { height: 100%; margin: 0; }

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;        /* ocupa a altura inteira da tela */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.hero video,
.hero-video,
#heroVideo {
  position: absolute;
  inset: 0;             /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;    /* cobre sem distorcer */
  display: block;
}

/* Se ainda existir imagem/título antigos da capa, esconda */
.hero picture, .hero img { display: none !important; }
.hero h1, .hero p        { display: none !important; }

/* === Reset básico para a capa === */
html, body { height: 100%; }
body { margin: 0; }

/* === Vídeo em tela cheia na capa === */
section.hero {
  position: relative;
  height: 100vh;        /* ocupa a altura toda da janela */
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
}

section.hero > video {
  position: absolute;
  inset: 0;             /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;    /* cobre sem distorcer */
  display: block;
}

/* se sobrar alguma imagem antiga dentro da capa, some com ela */
section.hero img,
section.hero picture { display: none !important; }

/* === VÍDEO EM TELA CHEIA, SEM NADA POR CIMA === */
html, body { height: 100%; margin: 0; }
main { max-width: none !important; margin: 0; padding: 0; }

/* mostra só a seção .hero por enquanto */
main > *:not(.hero), header, footer { display: none !important; }

/* a capa ocupa a tela inteira */
section.hero#inicio {
  position: fixed;          /* gruda na tela */
  inset: 0;                 /* top/right/bottom/left = 0 */
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* vídeo cobre a tela toda */
section.hero#inicio > video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* cobre sem distorcer */
  display: block;
}
.map iframe{
  width:100%;
  height:420px;
  border:0;
}
/* ===== MAPA (responsivo e com tamanho controlado) ===== */
.map-embed{
  position: relative;
  width: 100%;
  max-width: 1100px;     /* largura máxima no desktop */
  margin: 24px auto;     /* centraliza e dá respiro */
  aspect-ratio: 16/9;    /* altura automática (ex.: ~600px no desktop) */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.map-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Se algo da capa estiver cobrindo as seções abaixo, garanta camadas: */
main > section { position: relative; z-index: 1; }

/* ====== HERO em tela cheia (força mesmo) ====== */
html, body { height: 100%; margin: 0; }

section.hero {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;   /* ocupa a altura do visor */
  margin: 0 !important;
  padding: 0 !important;      /* zera qualquer padding que empurre o vídeo */
  overflow: hidden !important;
  background: #000;
}

/* ocupa a altura visível da tela, inclusive no mobile */
section.hero {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;   /* melhor em iOS/Android modernos */
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000;            /* cor das “barras” quando precisar */
}

section.hero video,
.hero-video,
#heroVideo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
 object-fit: cover !important;   /* enche tudo, mas corta um pouco */
  object-position: center top;     /* ou: center bottom */
  display: block !important;
}

/* garantia de que qualquer imagem antiga da capa não apareça */
.hero picture, .hero img { display: none !important; }

/* LOGO FIXO NO TOPO (fora do vídeo) */
#topbar{
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 5;           /* acima do vídeo */
}
#topbar img{
  height: 56px;
  width: auto;
  display: block;
}
@media (max-width: 480px){
  #topbar img{ height: 44px; }
}

/* (opcional) remover qualquer faixa/aviso promocional */
#promo-bar, .promo, .promobar, .announcement,
[id*="promo"], [class*="promo"]{ display:none !important; }

* Logo pequena no topo */
.site-header .brand img { 
  height: 40px;           /* ajuste fino: 32–48px */
  width: auto; 
  display: block;
}

/* Não mostrar logo dentro da capa (hero) */
.hero .logo { display: none !important; }

/* HERO (capa) ocupando a tela toda */
html, body { height: 100%; }
.hero {
  position: relative;
  width: 100%;
  height: 100vh;         /* ocupa a altura do visor */
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;              /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;     /* cobre sem distorcer */
  display: block;
}

/* Garante que qualquer imagem antiga da capa não apareça */
.hero picture, .hero img { display: none !important;} 

/* HERO (capa) ocupando a tela toda */
html, body { height: 100%; }
.hero {
  position: relative;
  width: 100%;
  height: 100vh;         /* ocupa a altura do visor */
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;              /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;     /* cobre sem distorcer */
  display: block;
}

.promo, .promo_hidden { display: none !important; }

.promo, .promo_hidden { display:none !important; }
/* --- Correções gerais de layout/rolagem --- */
html, body { 
  height: auto !important;      /* não trava o body em 100vh */
  min-height: 100% !important;
  overflow-y: auto !important;  /* garante rolagem */
}

/* Capa (hero) ocupa só a primeira tela */
.hero { 
  position: relative !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* Vídeo preenche a capa, mas só dentro da .hero */
.hero video, 
.hero .hero-video {
  position: absolute !important;
  inset: 0 !important;          /* top/right/bottom/left: 0 */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* “corta” para cobrir sem distorcer */
  z-index: 0 !important;
  display: block !important;
}

/* Conteúdo/botões da capa por cima do vídeo */
.hero .hero-ctas, 
.hero .hero-content {
  position: relative !important;
  z-index: 2 !important;
}

/* Nada da capa fica por cima do restante da página */
main > section { 
  position: relative; 
  z-index: 0; 
}

/* Garanta que não exista nada “fixo” cobrindo a tela inteira */
.header, .nav, .promo { z-index: 3; }

/* --- liberar rolagem e cliques --- */
html, body { height: auto !important; min-height: 100% !important; overflow-y: auto !important; }
.hero { position: relative !important; height: 100vh !important; overflow: hidden !important; }

/* vídeo ocupa a capa, mas não intercepta cliques */
.hero video, .hero .hero-video {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  z-index: 0 !important; pointer-events: none !important; display: block !important;
}

/* overlay/botões acima do vídeo e clicáveis */
.hero .hero-ctas, .hero .hero-content { position: relative !important; z-index: 2 !important; }
.hero::after { pointer-events: none !important; } /* se existir um escurecido */

/* suavizar rolagem e evitar cabeçalho cobrindo âncoras */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; } /* ajuste se seu cabeçalho for mais alto/baixo */

/* botões da capa (se quiser) */
.hero-ctas { display:flex; gap:12px; justify-content:center; align-items:center; height:100%; }
.hero-ctas .btn { padding:.8rem 1.1rem; border-radius:6px; text-decoration:none; }
.btn.btn-primary { background:#0a7; color:#fff; }
.btn.btn-outline { border:2px solid #0a7; color:#0a7; background:transparent; }

/* Botão WhatsApp do menu (verde) */
header a[href^="https://wa.me/"],
nav a[href^="https://wa.me/"],
a.btn-whatsapp {
  display: inline-block;
  background: #25D366 !important;   /* verde WhatsApp */
  color: #fff !important;
  border: none !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
header a[href^="https://wa.me/"]:hover,
nav a[href^="https://wa.me/"]:hover,
a.btn-whatsapp:hover {
  background: #1ebe57 !important;
}

/* vídeo preenche a capa, mas não captura cliques */
.hero video, .hero .hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:0; pointer-events:none;
}

/* botões por cima do vídeo */
.hero-ctas{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  gap:12px; padding:0 16px 8vh; z-index:2;
}
.btn{ display:inline-block; padding:.8rem 1.1rem; border-radius:8px; text-decoration:none; font-weight:600; }
.btn-outline{ border:2px solid #fff; color:#fff; background:transparent; }

/* WhatsApp verde */
.btn-whatsapp{ background:#25D366; color:#fff; border:none; }

/* rolagem suave e compensação do cabeçalho fixo */
html{ scroll-behavior:smooth; }
section[id]{ scroll-margin-top:80px; } /* ajuste se seu header for mais alto/baixo */

/* --- liberar rolagem e cliques --- */
html, body { height:auto !important; min-height:100% !important; overflow-y:auto !important; }

/* a capa ocupa só a primeira tela, sem travar o resto */
.hero { position:relative !important; height:100vh !important; overflow:hidden !important; }

/* o vídeo fica por trás e NÃO pega os cliques */
.hero video, .hero .hero-video {
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; object-fit:cover !important;
  z-index:0 !important; pointer-events:none !important; display:block !important;
}

/* botões por cima do vídeo e clicáveis */
.hero-ctas, .hero .hero-content { position:relative !important; z-index:2 !important; }
.hero-ctas{
  position:absolute !important; left:0; right:0; bottom:8vh;
  display:flex; gap:12px; justify-content:center; align-items:center; padding:0 16px;
}

/* header/menu acima de tudo */
header, .site-header, nav { position:relative; z-index:3; }

/* rolagem suave + compensa cabeçalho fixo ao rolar para as âncoras */
html { scroll-behavior:smooth; }
section[id] { scroll-margin-top:80px; }

/* WhatsApp verde (caso tenha sumido) */
.btn-whatsapp { background:#25D366 !important; color:#fff !important; border:none !important; }

/* evita overlays invisíveis bloqueando cliques */
.hero::before, .hero::after, .promo, .announcement { pointer-events:none !important; }

.overlay, .mobile-nav, .drawer { pointer-events:none !important; }

/* === LIBERAR CLIQUES E ROLAGEM === */
html, body { height:auto !important; min-height:100% !important; overflow-y:auto !important; }

/* a capa ocupa só a primeira tela */
.hero { position:relative !important; height:100vh !important; overflow:hidden !important; }

/* o vídeo fica por trás e NÃO pega cliques */
.hero video, .hero .hero-video, #heroVideo{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; object-fit:cover !important;
  z-index:0 !important; pointer-events:none !important; display:block !important;
}

/* botões/menus por cima e clicáveis */
.hero-ctas, .hero .hero-content { position:relative !important; z-index:2 !important; }
header, .site-header, nav { position:relative !important; z-index:3 !important; pointer-events:auto !important; }

/* rolagem suave e compensação do cabeçalho fixo */
html { scroll-behavior:smooth; }
section[id] { scroll-margin-top:80px; }  /* ajuste 80px se seu header for maior/menor */

/* evita overlays invisíveis bloqueando cliques */
.hero::before, .hero::after, .promo, .announcement, .overlay, .drawer, .mobile-nav {
  pointer-events:none !important;
}

/* WhatsApp verde (se sumiu) */
a[href^="https://wa.me/"], .btn-whatsapp {
  background:#25D366 !important; color:#fff !important; border:none !important;
  padding:8px 14px !important; border-radius:8px !important; text-decoration:none !important; font-weight:600;
}
a[href^="https://wa.me/"]:hover { background:#1ebe57 !important; }