:root{
  --bg:#fff; --text:#1f2937; --muted:#6b7280; --card:#ffffff; --line:#eee;
  --brand:#ff385c; --brand-2:#ffd6e7;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--text);background:var(--bg);scroll-behavior:smooth}
img{max-width:100%;display:block;border-radius:14px}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:28px 18px}
.btn{display:inline-block;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.whats{background:#25d366;color:#fff;border-color:#25d366}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin:18px 0}
.address{color:var(--muted)}

.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.logo{font-weight:700}
.actions{display:flex;gap:10px;align-items:center}
.hamburger{display:none}
#lang{padding:6px 8px;border-radius:10px;border:1px solid var(--line);background:#fff}
#darkToggle{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 10px}

#mobileMenu{position:fixed;inset:0 0 0 auto;width:76%;max-width:380px;background:rgba(255,214,231,.92);backdrop-filter: blur(8px);transform:translateX(100%);transition:transform .4s ease;z-index:40;display:flex;flex-direction:column;padding:20px;gap:12px}
#mobileMenu.open{transform:translateX(0)}
#mobileMenu a{text-decoration:none;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line)}

.hero{height:86vh;position:relative;background:url('images/pool.jpg') center/cover fixed no-repeat}
.hero .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.35))}
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:0 12px}
.hero h1{font-size:clamp(28px,5vw,48px);margin:.1em 0}
.hero p{opacity:.92}

.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-left:18px}
.features li{list-style:'✔ ';background:#fafafa;border:1px solid var(--line);border-radius:12px;padding:10px}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

.map-card iframe{width:100%;height:360px;border:0;border-radius:12px;border:1px solid var(--line)}

.footer{padding:20px;border-top:1px solid var(--line);text-align:center;color:var(--muted)}

.fade{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.fade.show{opacity:1;transform:none}

/* Loader */
#loader{position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:9999}
.sun{width:70px;height:70px;border-radius:50%;background: radial-gradient(circle at 30% 30%, #ffd27a, #ffb347);box-shadow:0 0 0 10px rgba(255,224,178,.6), 0 0 40px rgba(255,179,71,.5);animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast confirmation */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#22c55e;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);opacity:0;pointer-events:none;transition:opacity .4s ease}
#toast.show{opacity:1}

/* Thank you / 404 */
.center{min-height:80vh;display:grid;place-items:center;text-align:center;padding:24px}
.beach-illu{width:220px;height:140px;border-radius:16px;background:linear-gradient(135deg,#ffd6e7,#e2f0fd)}
.parasol{margin-bottom:8px}

/* Dark mode */
body.dark{--bg:#0d0f13; --text:#e5e7eb; --muted:#9ca3af; --card:#111318; --line:#23262b}
body.dark .topbar{background:rgba(13,15,19,.85)}
body.dark .hero .tint{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.5))}

/* Responsive */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .hamburger{display:inline-flex}
  .actions select{display:none}
  .features{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}