/* ═══════════════ O LAGOS · bright lake theme ═══════════════ */
:root{
  --paper:#FFFDF6;
  --paper-soft:#FFF9EC;
  --ink:#123B3F;
  --ink-soft:#3E6B6E;
  --lagoon:#00A8B5;
  --lagoon-deep:#0077A6;
  --lagoon-pale:#DFF6F8;
  --azulejo:#1B4FA0;
  --azulejo-pale:#E3EDFB;
  --sun:#FFB627;
  --sun-soft:#FFE9B8;
  --coral:#FF6B6B;
  --coral-deep:#E14D4D;
  --palm:#2E9E5B;
  --sand:#F6EAD8;
  --gold:#C9A227;
  --line:#EADFC8;
  --radius:18px;
  --shadow:0 12px 32px rgba(18,59,63,.10);
  --font-d:"Fraunces",Georgia,serif;
  --font-b:"Outfit",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.section{padding:84px 0}
h1,h2,h3{font-family:var(--font-d);line-height:1.12;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:10px}
.hl{color:var(--lagoon-deep);position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:10px;background:var(--sun-soft);z-index:-1;border-radius:6px;transform:rotate(-1deg)}
.kicker{font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;color:var(--azulejo);margin-bottom:10px}
.sec-sub{color:var(--ink-soft);max-width:640px;margin-bottom:34px;font-size:1.06rem}
.fineprint{font-size:.85rem;color:var(--ink-soft)}

/* ── Buttons ── */
.btn{display:inline-block;border:none;cursor:pointer;font-family:var(--font-b);font-weight:600;text-decoration:none;border-radius:999px;padding:13px 28px;font-size:1rem;transition:transform .15s ease,box-shadow .15s ease;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 20px rgba(255,107,107,.35)}
.btn-coral:hover{background:var(--coral-deep)}
.btn-ghost{background:rgba(255,255,255,.16);color:#fff;border:2px solid rgba(255,255,255,.75);backdrop-filter:blur(4px)}
.btn-blue{background:var(--azulejo);color:#fff}
.btn-green{background:#25D366;color:#fff}
.btn-sm{padding:10px 20px;font-size:.9rem}
.btn-lg{padding:15px 34px;font-size:1.08rem}
.btn-block{width:100%}

/* ── Top bar ── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:26px;padding:12px 26px;background:rgba(255,253,246,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-tile svg{width:40px;height:40px}
.brand-text{font-family:var(--font-d);font-weight:700;font-size:1.35rem;line-height:1}
.brand-text small{display:block;font-family:var(--font-b);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{text-decoration:none;font-weight:500;color:var(--ink-soft)}
.nav a:hover{color:var(--lagoon-deep)}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink)}

/* ── Hero ── */
.hero{position:relative;min-height:96vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:linear-gradient(160deg,#0077A6,#00A8B5 55%,#7BDFF2)}
.hero-photo{position:absolute;inset:0}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.hero-slide.active{opacity:1}
.hero-slide.active img{animation:kburns 7.5s ease-out forwards}
@keyframes kburns{from{transform:scale(1)}to{transform:scale(1.09)}}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
  .hero-slide.active img{animation:none}
}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,42,66,.42) 0%,rgba(7,42,66,.18) 40%,rgba(7,42,66,.55) 100%)}
.hero-inner{position:relative;z-index:2;max-width:820px;padding:120px 22px 130px}
.hero-kicker{letter-spacing:.28em;text-transform:uppercase;font-size:.8rem;font-weight:600;color:var(--sun-soft);margin-bottom:14px}
.hero-kicker em{font-family:var(--font-d);text-transform:none;letter-spacing:0}
.hero h1{font-size:clamp(4rem,13vw,8.5rem);font-weight:700;text-shadow:0 6px 30px rgba(0,40,60,.35)}
.hero-sub{font-size:clamp(1.05rem,2.4vw,1.35rem);max-width:640px;margin:16px auto 30px;color:#F4FBFC}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-note{margin-top:26px;font-size:.92rem;color:#EAF6F7}
.hero-wave{position:absolute;bottom:-2px;left:0;right:0;z-index:2}
.hero-wave svg{width:100%;height:74px;display:block}

/* ── Azulejo tile strip ── */
.tile-strip{height:44px;background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='44' viewBox='0 0 88 44'%3E%3Cg fill='none'%3E%3Crect x='1' y='1' width='86' height='42' rx='6' fill='%23FFFFFF' stroke='%231B4FA0' stroke-width='2'/%3E%3Ccircle cx='44' cy='22' r='9' fill='%231B4FA0'/%3E%3Ccircle cx='44' cy='22' r='3.6' fill='%23FFB627'/%3E%3Cpath d='M44 6v6M44 32v6M28 22h6M54 22h6' stroke='%231B4FA0' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%2300A8B5'/%3E%3Ccircle cx='76' cy='12' r='2.4' fill='%2300A8B5'/%3E%3Ccircle cx='12' cy='32' r='2.4' fill='%2300A8B5'/%3E%3Ccircle cx='76' cy='32' r='2.4' fill='%2300A8B5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:auto 44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ── Story ── */
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.story-copy p{margin-bottom:16px;color:var(--ink-soft);font-size:1.05rem}
.story-copy p strong{color:var(--ink)}
.story-points{list-style:none;margin-top:22px;display:grid;gap:12px}
.story-points li{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-weight:500;box-shadow:var(--shadow)}
.story-points li span{font-size:1.4rem}
.arch-frame{position:relative;border-radius:200px 200px var(--radius) var(--radius);overflow:hidden;border:6px solid #fff;box-shadow:var(--shadow);background:linear-gradient(160deg,var(--lagoon-pale),var(--azulejo-pale));aspect-ratio:4/5;max-width:420px;margin-left:auto}
.arch-frame img{width:100%;height:100%;object-fit:cover}
.arch-frame.no-img img{display:none}
.arch-fallback{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--azulejo);font-weight:600}
.arch-frame.no-img .arch-fallback{display:flex}
.doodle-fish{width:130px;height:130px}
.stamp{position:absolute;bottom:26px;left:-14px;background:var(--sun);color:#5A3E00;font-weight:700;font-size:.8rem;text-align:center;padding:12px 18px;border-radius:12px;transform:rotate(-6deg);box-shadow:var(--shadow);line-height:1.4}
.story-art{position:relative}

/* ── Gallery ── */
.gallery-sec{background:var(--paper-soft)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g-item{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:linear-gradient(140deg,var(--lagoon-pale),var(--azulejo-pale));box-shadow:var(--shadow);cursor:zoom-in}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.g-item:hover img{transform:scale(1.06)}
.g-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-size:.88rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(7,42,66,.72))}
.gallery-empty{grid-column:1/-1;text-align:center;color:var(--ink-soft);padding:40px;border:2px dashed var(--line);border-radius:var(--radius)}

/* ── Rooms ── */
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.room-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .18s ease}
.room-card:hover{transform:translateY(-5px)}
.room-photo{height:210px;background:linear-gradient(140deg,var(--lagoon),var(--azulejo));position:relative;overflow:hidden}
.room-photo img{width:100%;height:100%;object-fit:cover}
.room-photo .room-emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4rem}
.room-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.room-body h3{font-size:1.45rem}
.room-body p{color:var(--ink-soft);font-size:.96rem;flex:1}
.room-meta{display:flex;gap:8px;flex-wrap:wrap}
.room-meta span{background:var(--lagoon-pale);color:var(--lagoon-deep);font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:999px}
.room-price{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.room-price strong{font-family:var(--font-d);font-size:1.7rem;color:var(--azulejo)}
.room-price small{color:var(--ink-soft)}
.room-body .btn{margin-top:8px}

/* ── Experiences ── */
.exp-sec{background:linear-gradient(180deg,var(--paper) 0%,var(--lagoon-pale) 100%)}
.exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.exp-card{background:#fff;border-radius:var(--radius);padding:28px 22px;border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}
.exp-card h3{font-size:1.2rem;margin:14px 0 8px}
.exp-card p{color:var(--ink-soft);font-size:.93rem}
.exp-icon svg{width:64px;height:64px;margin:0 auto}

/* ── Booking ── */
.book-sec{background:var(--paper-soft)}
.book-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
.cal-card,.form-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:28px}
.room-pick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.room-pick button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;font-family:var(--font-b);font-weight:600;font-size:.92rem;cursor:pointer;color:var(--ink-soft);transition:all .15s}
.room-pick button.active{background:var(--azulejo);border-color:var(--azulejo);color:#fff}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-head button{background:var(--lagoon-pale);border:none;width:38px;height:38px;border-radius:50%;font-size:1.4rem;cursor:pointer;color:var(--lagoon-deep);line-height:1}
.cal-head button:hover{background:var(--lagoon);color:#fff}
.cal-months{display:flex;gap:40px}
.cal-months h3{font-size:1.15rem;min-width:150px;text-align:center}
.cal-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dow{font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--ink-soft);text-align:center;padding:6px 0;letter-spacing:.06em}
.cal .day{aspect-ratio:1;border:none;background:none;border-radius:10px;font-family:var(--font-b);font-size:.92rem;font-weight:500;cursor:pointer;color:var(--ink);transition:all .12s;min-height:38px}
.cal .day:not(:disabled):hover{background:var(--sun-soft)}
.cal .day:disabled{cursor:not-allowed;color:#B9C6C7;background:#F4F1E8}
.cal .day.booked{text-decoration:line-through;background:#FBE3E3;color:#C08A8A}
.cal .day.in-range{background:var(--sun-soft);border-radius:0}
.cal .day.sel{background:var(--azulejo);color:#fff;font-weight:700}
.cal .day.today{outline:2px solid var(--lagoon);outline-offset:-2px}
.cal .pad{background:none;border:none}
.cal-legend{display:flex;gap:20px;margin-top:18px;font-size:.88rem;color:var(--ink-soft);flex-wrap:wrap}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:baseline}
.dot.avail{background:var(--palm)}
.dot.booked{background:#E2574C}
.dot.sel{background:var(--azulejo)}
.cal-status{margin-top:12px;font-size:.88rem;color:var(--ink-soft);background:var(--lagoon-pale);border-radius:12px;padding:10px 14px}
.form-card h3{font-size:1.4rem;margin-bottom:14px}
.stay-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--azulejo-pale);border-radius:14px;padding:14px;margin-bottom:18px}
.stay-summary div{text-align:center}
.stay-summary span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:600}
.stay-summary strong{font-size:1rem;color:var(--azulejo)}
#bookForm label{display:block;font-weight:600;font-size:.92rem;margin-bottom:12px}
#bookForm input,#bookForm textarea,#bookForm select{width:100%;margin-top:6px;border:2px solid var(--line);border-radius:12px;padding:12px 14px;font-family:var(--font-b);font-size:1rem;background:#fff;color:var(--ink)}
#bookForm input:focus,#bookForm textarea:focus{outline:none;border-color:var(--lagoon)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.book-success{text-align:center;padding:20px 6px}
.big-tick{width:74px;height:74px;border-radius:50%;background:var(--palm);color:#fff;font-size:2.2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}

/* ── Visit ── */
.visit-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.visit-grid p{color:var(--ink-soft);margin-bottom:14px;font-size:1.05rem}
.contact-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.map-frame{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff;min-height:340px}
.map-frame iframe{width:100%;height:380px;border:0;display:block}

/* ── Footer ── */
.footer{background:var(--ink);color:#EAF3F1;margin-top:0}
.foot-inner{display:flex;justify-content:space-between;gap:30px;padding:44px 22px;flex-wrap:wrap;align-items:center}
.foot-brand strong{font-family:var(--font-d);font-size:1.5rem}
.foot-brand p{color:#9DBDBD;font-size:.92rem;max-width:380px}
.foot-note{text-align:right}
.foot-note .fineprint{color:#7FA3A3}

/* ── Booking loader ── */
.book-loader{position:fixed;inset:0;z-index:200;background:rgba(7,42,66,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.book-loader[hidden]{display:none}
.loader-box{background:#fff;border-radius:22px;padding:42px 48px;text-align:center;max-width:380px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.loader-box h3{font-size:1.4rem;margin:20px 0 8px}
.loader-box p{color:var(--ink-soft);font-size:.95rem}
.spinner{width:58px;height:58px;margin:0 auto;border-radius:50%;border:6px solid var(--lagoon-pale);border-top-color:var(--lagoon);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Entire-villa banner ── */
.villa-banner{margin-top:26px;background:linear-gradient(120deg,var(--azulejo),var(--lagoon-deep));color:#fff;border-radius:22px;padding:36px;display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow);position:relative;overflow:hidden}
.villa-banner::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Ccircle cx='44' cy='44' r='10'/%3E%3Cpath d='M44 22v8M44 58v8M22 44h8M58 44h8' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-size:88px}
.villa-banner>*{position:relative;z-index:1}
.villa-banner .kicker{color:var(--sun-soft)}
.villa-banner h3{font-size:1.7rem;margin-bottom:10px;color:#fff}
.villa-banner p{color:#DCEBF5;max-width:540px;margin-bottom:14px}
.villa-banner .room-meta span{background:rgba(255,255,255,.18);color:#fff}
.villa-cta{display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.villa-cta .room-price strong{color:#fff}
.villa-cta .room-price small{color:#BCD6E8}

/* ── Lightbox ── */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(7,30,34,.9);display:flex;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox figcaption{color:#fff;text-align:center;margin-top:10px;font-weight:600}

/* ── Responsive ── */
@media(max-width:1000px){
  .story-grid,.visit-grid{grid-template-columns:1fr}
  .story-art{max-width:420px}
  .room-grid{grid-template-columns:1fr 1fr}
  .exp-grid{grid-template-columns:1fr 1fr}
  .book-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;padding:16px 26px;gap:14px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav-toggle{display:block;margin-left:auto}
  .topbar .btn{display:none}
  .section{padding:60px 0}
  .cal-pair{grid-template-columns:1fr}
  #calB,.cal-months h3#calTitleB{display:none}
  .room-grid,.exp-grid,.gallery-grid{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .stay-summary{grid-template-columns:1fr 1fr}
  .foot-note{text-align:left}
}