/* ===== Variáveis & Reset ===== */
:root{
  --color-primary:#333;
  --color-secondary:#c0a880;        /* dourado principal */
  --color-highlight:#C0A880;        /* botões principais */
  --color-highlight-hover:#A68C68;  /* hover dos botões */
  --color-bg-light:#f7f7f7;
  --color-text-light:#fff;
  --font-heading:'Playfair Display',serif;
  --font-body:'Inter',sans-serif;
  --vh:1vh;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font-body);line-height:1.7;color:var(--color-primary);background:#fff}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:var(--color-primary);transition:.3s}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--color-primary)}
.container{width:90%;max-width:1100px;margin:0 auto}

/* ===== Header ===== */
.main-header{
  background:var(--color-bg-light);
  padding:14px 0;
  position:sticky;top:0;z-index:1000;
  box-shadow:0 1px 5px rgba(0,0,0,.1);
}
.header-content{display:flex;gap:20px;justify-content:space-between;align-items:center}
.logo img{width:70px;height:70px;object-fit:contain}
.main-nav ul{list-style:none;display:flex;gap:26px}
.main-nav a{font-weight:500;font-size:.9rem;text-transform:uppercase}
.main-nav a:hover{color:var(--color-secondary)}
.header-actions{display:flex;gap:12px}
.btn{display:inline-block;padding:10px 18px;border-radius:6px;font-weight:600;color:var(--color-text-light)}
.btn-wa{background:#25d366}.btn-wa:hover{background:#128c7e}
.btn-reserve{background:var(--color-highlight);color:var(--color-text-light)}
.btn-reserve:hover{background:var(--color-highlight-hover)}

/* ===== Botão Hamburguer (Mobile) ===== */
.menu-toggle{
  display:none; /* aparece no mobile via @media */
  width:46px;height:46px;border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;align-items:center;justify-content:center;gap:5px;
  flex-direction:column;cursor:pointer;transition:.25s;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.menu-toggle .bar{width:22px;height:2px;background:#444;border-radius:2px;transition:transform .25s, opacity .2s}
.menu-toggle.is-open .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle.is-open .bar:nth-child(2){opacity:0}
.menu-toggle.is-open .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ===== Dropdown Mobile ===== */
.mobile-nav{
  position:fixed; top:70px; left:0; right:0; z-index:1200;
  transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s ease;
}
.mobile-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }

.mobile-nav-inner{
  margin:0 auto; width:min(92%,560px); background:#fff; border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.18); padding:18px 18px 14px;
  border:1px solid rgba(0,0,0,.06);
}
.mobile-logo{ width:76px; margin:6px auto 10px; display:block; opacity:.9 }
.mobile-links{ list-style:none; padding:4px 0; margin:0 }
.mobile-links li{ border-bottom:1px solid rgba(0,0,0,.06) }
.mobile-links li:last-child{ border-bottom:none }
.mobile-links a{
  display:block; padding:12px 8px; text-align:center; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
}
.mobile-links a:hover{ color:var(--color-secondary); background:#fafafa }
.mobile-actions{ display:flex; gap:10px; justify-content:center; padding-top:10px }

/* Backdrop quando abre menu */
body.menu-open::before{
  content:""; position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:1100;
}

/* ===== Hero (Slider) ===== */
.hero{position:relative;height:calc(var(--vh) * 100);min-height:650px;overflow:hidden;isolation:isolate}
.slides{position:absolute;inset:0;overflow:hidden}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.05);transition:opacity 1s ease-in-out, transform 3s ease}
.slide.active{opacity:1;transform:scale(1)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.3));z-index:1}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--color-text-light);padding:0 1rem}
.subtitle{font-size:.85rem;letter-spacing:.3em;color:#f1f1f1;margin-bottom:8px}
.hero h2{font-size:clamp(2rem,5vw,4rem);line-height:1.2;margin-bottom:26px;color:#fff;text-shadow:0 4px 25px rgba(0,0,0,.4)}
.btn-hero{background:var(--color-highlight);color:#fff;padding:16px 36px;border-radius:6px;font-weight:800;text-transform:uppercase;letter-spacing:1px;transition:background .3s}
.btn-hero:hover{background:var(--color-highlight-hover)}
.reserve-note{margin-top:10px;font-size:.9rem;color:rgba(255,255,255,.9)}
.arrows{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 18px;z-index:3;pointer-events:none}
.arrow{pointer-events:all;background:rgba(0,0,0,.4);color:#fff;border:none;border-radius:50%;width:48px;height:48px;font-size:1.5rem;cursor:pointer;transition:background .3s}
.arrow:hover{background:rgba(0,0,0,.7)}
.dots{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:10px;z-index:3}
.dot{width:12px;height:12px;border-radius:999px;background:rgba(255,255,255,.6);cursor:pointer;transition:.3s}
.dot.active{background:#fff;transform:scale(1.2)}

/* ===== Sobre ===== */
.about-section{padding:70px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.section-tag{font-size:.8rem;color:var(--color-secondary);letter-spacing:.35em;text-transform:uppercase;margin-bottom:8px}
.about-section h3{font-size:clamp(1.8rem,3.2vw,2.4rem);margin-bottom:14px}
.about-section p{margin-bottom:14px;font-weight:300}
.about-image-content img{border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12)}

/* ===== Comodidades ===== */
.features-section{padding:70px 0;background:var(--color-bg-light);text-align:center}
.features-section h3{font-size:clamp(1.9rem,3.5vw,2.6rem);margin-bottom:28px}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.feature-item{position:relative;height:300px;border-radius:10px;overflow:hidden;display:flex;align-items:end;background-size:cover;background-position:center;box-shadow:0 10px 25px rgba(0,0,0,.22);transition:transform .35s, box-shadow .35s}
.feature-item:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(0,0,0,.35)}
.feature-item::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);transition:.35s}
.feature-item:hover::before{background:rgba(0,0,0,.6)}
.feature-content-overlay{position:relative;z-index:1;width:100%;padding:18px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);color:#fff}
.feature-content-overlay h4{font-size:1.2rem;margin-bottom:6px}
.feature-content-overlay p{font-size:.95rem;color:rgba(255,255,255,.9)}
.feature-piscina{background-image:url('img/piscina 1.jpeg')}
.feature-cozinha{background-image:url('img/cozinha completa.jpeg')}
.feature-banheira{background-image:url('img/hidromassagem.jpeg')}

/* ===== Galeria ===== */
.gallery-section{padding:70px 0;text-align:center}
.gallery-section h3{font-size:clamp(1.9rem,3.5vw,2.6rem);margin-bottom:10px}
.gallery-intro{color:#666;margin-bottom:28px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gallery-item{position:relative;height:240px;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.12);cursor:zoom-in;transition:transform .25s}
.gallery-item:hover{transform:translateY(-2px)}
.gallery-item img{width:100%;height:100%;object-fit:cover}

/* ===== Lightbox ===== */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:9999}
.close-btn{position:absolute;top:16px;right:24px;color:#f1f1f1;font-size:40px;line-height:1;cursor:pointer;z-index:10000}
.lightbox-content-wrapper{margin:70px auto 14px;width:92%;max-width:1200px;height:calc(100% - 110px);overflow:auto;display:grid;place-items:center}
.lightbox-content{max-width:100%;max-height:100%;object-fit:contain;transition:transform .4s}
.lightbox-content.zoomed{transform:scale(1.25);cursor:grab}
.lightbox-caption{color:#ddd;text-align:center;margin:8px auto 18px;width:min(700px,86%)}

/* ===== Footer ===== */
.main-footer{background:var(--color-primary);color:var(--color-text-light);padding:54px 0 20px;font-size:.95rem}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-bottom:24px}
.footer-logo{width:82px;filter:invert(1) brightness(1.5);margin-bottom:10px}
.footer-block h4{color:var(--color-secondary);margin-bottom:8px}
.footer-block a{color:rgba(255,255,255,.85)}
.footer-block a:hover{color:var(--color-highlight)}
.footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;color:rgba(255,255,255,.7)}
.footer-whatsapp{color:#25D366!important;font-weight:600}

/* ===== Responsivo ===== */
@media (max-width:992px){
  .about-grid{gap:32px}
}
@media (max-width:860px){
  .main-nav{display:none}        /* esconde menu desktop */
  .header-actions{display:none}  /* esconde botões desktop */
  .menu-toggle{display:flex}     /* mostra o hambúrguer */
  .header-content{flex-direction:row;justify-content:space-between}
}
@media (max-width:768px){
  .hero-content{padding:0 18px}
  .subtitle{font-size:.75rem;letter-spacing:.25em}
  .hero h2{font-size:clamp(1.6rem,8vw,2.4rem);margin-bottom:18px}
  .btn-hero{padding:14px 22px;font-size:.95rem}
  .reserve-note{font-size:.8rem}
  .arrows{padding:0 10px}
  .arrow{width:40px;height:40px;font-size:1.2rem}
  .dots{bottom:16px;gap:8px}
  .dot{width:9px;height:9px}
  .about-grid{grid-template-columns:1fr}
  .feature-item{height:240px}
  .gallery-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
  .gallery-item{height:220px}
}
@media (max-width:380px){
  .btn-hero{width:100%}
  .dots{bottom:12px}
}