:root {
  --ink: #1f2d2c;
  --cream: #f7f4ec;
  --sand: #e7ddc8;
  --sea: #496f73;
  --sea-dark: #274b50;
  --coral: #d97962;
  --line: #dcd7ca;
  --muted: #6d746e;
  --white: #fffdf8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.6; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.site-header { height: 76px; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(24px, 5vw, 80px); background: var(--cream); }
.brand { font-family: "Playfair Display", serif; font-size: 26px; font-weight: 700; letter-spacing: -.05em; }
.brand em { color: var(--sea); font-weight: 500; }
.site-header nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.header-cta { border: 1px solid var(--ink); border-radius: 999px; padding: 8px 14px; }

.hero { min-height: 590px; display: grid; grid-template-columns: 47% 53%; background: var(--sea-dark); color: var(--white); }
.hero-copy { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding: 74px clamp(28px, 8vw, 132px); }
.hero img { min-height: 590px; object-position: center; }
.eyebrow { margin: 0 0 13px; color: var(--coral); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: "Playfair Display", serif; letter-spacing: -.055em; line-height: 1.07; }
h1 { margin-bottom: 23px; font-size: clamp(45px, 5.1vw, 78px); font-weight: 600; }
h2 { margin-bottom: 20px; font-size: clamp(36px, 3.6vw, 56px); font-weight: 600; }
.hero-text { max-width: 430px; margin-bottom: 30px; color: #dce9e7; font-size: 18px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 12px 21px; border: 0; border-radius: 2px; font-weight: 700; transition: transform .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-light { background: var(--white); color: var(--ink); }
.button-dark { background: var(--ink); color: var(--white); }
.button-whatsapp { width: 100%; background: #2c836a; color: white; }
.button.is-disabled { background: #aebcb8; pointer-events: none; }

.quick-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1220px; margin: -42px auto 0; padding: 25px 34px; position: relative; z-index: 2; background: var(--white); box-shadow: 0 16px 40px #1e373415; }
.quick-facts div { padding-left: 18px; border-left: 1px solid var(--line); }
.quick-facts div:first-child { border: 0; padding-left: 0; }
.quick-facts strong, .quick-facts span { display: block; }
.quick-facts strong { font-size: 15px; }
.quick-facts span { color: var(--muted); font-size: 13px; }

.section { max-width: 1220px; margin: 0 auto; padding: 120px 28px; }
.intro { display: grid; grid-template-columns: .92fr 1fr; gap: clamp(48px, 10vw, 155px); }
.intro-text { max-width: 530px; color: #46504b; font-size: 17px; }
.text-link { display: inline-flex; gap: 12px; margin-top: 16px; padding-bottom: 4px; border-bottom: 1px solid var(--ink); color: var(--ink); font-weight: 700; }

.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 325px 255px; gap: 14px; padding-top: 0; }
.gallery-main { grid-row: span 2; }
.gallery-main img { object-position: 47% 50%; }
.gallery-side.top img { object-position: 50% 28%; }
.gallery-note { display: flex; align-items: end; padding: 30px; background: var(--sand); color: var(--sea-dark); font-family: "Playfair Display", serif; font-size: 25px; font-style: italic; line-height: 1.17; }

.amenities { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-top: 110px; padding-bottom: 112px; }
.amenities ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; padding: 0; list-style: none; }
.amenities li { padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.amenities li span { margin-right: 7px; color: var(--coral); font-size: 20px; vertical-align: -1px; }

.booking { max-width: none; padding: 112px max(28px, calc((100vw - 1164px)/2)); background: #dce6e0; display: grid; grid-template-columns: .82fr 1.18fr; align-items: start; gap: clamp(40px, 7vw, 110px); }
.booking-heading { padding-top: 20px; }
.booking-heading > p:not(.eyebrow) { max-width: 405px; color: #40514e; }
.sync-status { font-size: 13px; font-weight: 600; }
.sync-status.is-warning { color: #9c3f2a; }
.booking-card { background: var(--white); padding: clamp(22px, 4vw, 42px); box-shadow: 0 16px 35px #38534e20; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; text-transform: capitalize; }
.calendar-toolbar strong { font-family: "Playfair Display", serif; font-size: 21px; }
.round-button { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); }
.round-button:hover { background: var(--cream); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; color: var(--muted); font-size: 12px; }
.calendar-legend span { display: flex; align-items: center; gap: 5px; }
.calendar-legend i { width: 11px; height: 11px; display: inline-block; border-radius: 50%; }
.legend-free { border: 1px solid var(--sea); }
.legend-selected { background: var(--sea); }
.legend-blocked { background: #d8d4ca; }
.calendar-months { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.month-name { margin: 0 0 8px; font-size: 14px; font-weight: 700; text-transform: capitalize; }
.weekday-row, .date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.weekday-row { margin-bottom: 4px; color: var(--muted); font-size: 10px; text-align: center; }
.day { min-width: 0; min-height: 43px; padding: 4px 1px; border: 1px solid transparent; background: transparent; color: var(--ink); font-size: 12px; text-align: center; }
.day:not(:disabled):hover { border-color: var(--sea); }
.day small { display: block; margin-top: 1px; color: var(--sea); font-size: 8px; }
.day.is-blocked, .day:disabled { color: #aaa69c; background: #f0eee9; cursor: not-allowed; text-decoration: line-through; }
.day.is-blocked small, .day:disabled small { color: inherit; }
.day.is-selected { background: var(--sea); color: white; }
.day.is-selected small { color: #d8ece8; }
.day.is-in-range { background: #dae9e5; }
.booking-summary { min-height: 91px; margin: 26px 0 15px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary-prompt { margin: 10px 0; color: var(--muted); font-size: 14px; }
.summary-line { display: flex; justify-content: space-between; gap: 16px; margin: 4px 0; font-size: 14px; }
.summary-total { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 16px; font-weight: 700; }
.booking-note { margin: 15px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

.location { display: grid; grid-template-columns: 1.2fr .8fr; padding-top: 112px; padding-bottom: 112px; }
.location-image { min-height: 460px; }
.location-copy { display: flex; justify-content: center; flex-direction: column; padding: 55px clamp(32px, 6vw, 90px); background: var(--sand); }
.location-copy p:not(.eyebrow) { color: #4d514b; }
.small-note { margin-top: 16px; font-size: 13px; font-style: italic; }

.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px max(28px, calc((100vw - 1164px)/2)); background: var(--ink); color: #e6e5dd; font-size: 13px; }
.site-footer p { margin: 0; }
.site-footer div { display: flex; gap: 20px; }
.site-footer a { text-decoration: underline; text-underline-offset: 4px; }
.site-footer button { padding: 0; border: 0; background: transparent; color: inherit; text-decoration: underline; text-underline-offset: 4px; }

.cookie-banner { position: fixed; right: 24px; bottom: 24px; z-index: 20; width: min(460px, calc(100vw - 32px)); padding: 23px; border: 1px solid var(--line); box-shadow: 0 18px 55px #152b2c35; background: var(--white); color: var(--ink); }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin-bottom: 10px; color: #4d5650; font-size: 13px; line-height: 1.5; }
.cookie-banner .cookie-title { margin-bottom: 5px; color: var(--ink); font-size: 16px; font-weight: 700; }
.cookie-banner a { text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 17px; }
.cookie-button { min-height: 38px; padding: 7px 13px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); font-size: 13px; font-weight: 700; }
.cookie-button-muted { background: transparent; color: var(--ink); }

.confirmation-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: var(--sea-dark); }
.confirmation-page > .brand { position: absolute; top: 25px; left: 32px; color: var(--white); }
.confirmation-card { width: min(590px, 100%); padding: clamp(34px, 7vw, 70px); background: var(--white); text-align: center; }
.confirmation-card h1 { font-size: clamp(42px, 5vw, 60px); }
.confirmation-card .button { margin-top: 13px; }

.policy-page { min-height: 100vh; padding: 34px 28px 70px; background: var(--sea-dark); }
.policy-page > .brand { display: inline-block; margin: 0 auto 50px; color: var(--white); }
.policy-card { width: min(820px, 100%); margin: 0 auto; padding: clamp(30px, 6vw, 70px); background: var(--white); }
.policy-card h1 { font-size: clamp(42px, 5vw, 64px); }
.policy-card h2 { margin-top: 43px; margin-bottom: 12px; font-size: 30px; }
.policy-card p { max-width: 690px; color: #46504b; }
.policy-card a:not(.button) { text-decoration: underline; text-underline-offset: 3px; }
.policy-back { margin-top: 38px; }

.admin-dialog { width: min(700px, calc(100vw - 30px)); max-height: min(830px, calc(100vh - 30px)); padding: clamp(25px, 5vw, 46px); border: 0; background: var(--white); color: var(--ink); box-shadow: 0 24px 80px #0005; overflow-y: auto; }
.admin-dialog::backdrop { background: #1d3130b8; }
.admin-dialog h2 { font-size: 42px; }
.dialog-close { position: absolute; top: 18px; right: 20px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); font-size: 25px; line-height: 1; }
.admin-dialog label, .payment-panel label { display: grid; gap: 6px; color: #4d5650; font-size: 14px; font-weight: 700; }
.admin-dialog input, .admin-dialog select, .payment-panel input { min-height: 43px; padding: 8px 10px; border: 1px solid #c5c6bc; border-radius: 2px; background: white; color: var(--ink); }
#admin-login { max-width: 390px; }
#admin-login .button { margin-top: 4px; }
.form-message { min-height: 24px; margin: 8px 0; color: #a73b28; font-size: 13px; font-weight: 600; }
.form-message.is-success { color: #23715c; }
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.range-manager { margin: 25px 0; padding-top: 21px; border-top: 1px solid var(--line); }
.range-manager h3 { margin-bottom: 11px; font-size: 16px; }
.range-hint { margin: -5px 0 12px; color: var(--muted); font-size: 12px; }
.range-list { display: grid; gap: 7px; margin-bottom: 12px; }
.range-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: var(--cream); font-size: 13px; }
.range-item button, .add-range button { border: 0; background: var(--ink); color: white; padding: 7px 10px; font-size: 12px; font-weight: 700; }
.direct-reservation-item > div { display: grid; gap: 2px; }
.direct-reservation-item span { color: var(--muted); font-size: 12px; }
.add-range { display: grid; grid-template-columns: 1fr 1fr .8fr auto; gap: 7px; }
.add-range.two-dates { grid-template-columns: 1fr 1fr auto; }
.checkbox-label { display: flex !important; align-items: center; align-self: end; gap: 8px !important; min-height: 43px; padding-bottom: 4px; }
.checkbox-label input { min-height: 0 !important; width: 17px; height: 17px; margin: 0; }
.is-muted { opacity: .48; }
.calendar-export { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.calendar-export input { min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid #c5c6bc; border-radius: 2px; background: #f7f4ec; color: var(--ink); font-size: 12px; }
.calendar-export button { border: 0; background: var(--ink); color: white; padding: 7px 10px; font-size: 12px; font-weight: 700; }
.calendar-export button:disabled { cursor: not-allowed; opacity: .45; }

.payment-panel { margin-top: 16px; padding: 19px; border: 1px solid var(--line); background: #f4f7f4; }
.payment-panel[hidden] { display: none; }
.payment-title { margin-bottom: 3px; font-weight: 700; }
.payment-description { margin-bottom: 16px; color: var(--muted); font-size: 13px; }
.payment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.payment-panel .button { width: 100%; }

@media (max-width: 820px) {
  .site-header nav a:not(.header-cta) { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { min-height: 455px; padding: 65px 30px; }
  .hero img { min-height: 400px; }
  .quick-facts { grid-template-columns: 1fr 1fr; margin: 0; box-shadow: none; }
  .quick-facts div:nth-child(3) { border-left: 0; padding-left: 0; }
  .intro, .amenities, .booking, .location { grid-template-columns: 1fr; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 280px 225px 210px; }
  .gallery-main { grid-column: span 2; grid-row: auto; }
  .gallery-note { display: none; }
  .amenities { gap: 8px; }
  .booking { padding-top: 78px; padding-bottom: 78px; }
  .location-image { min-height: 340px; }
}

@media (max-width: 540px) {
  .site-header { height: 66px; padding: 0 20px; }
  .site-header nav { gap: 0; }
  .brand { font-size: 23px; }
  .header-cta { padding: 7px 10px; font-size: 12px; }
  h1 { font-size: 46px; }
  h2 { font-size: 38px; }
  .quick-facts { gap: 15px; padding: 22px 20px; }
  .quick-facts div { padding-left: 10px; }
  .quick-facts strong { font-size: 13px; }
  .quick-facts span { font-size: 11px; }
  .section { padding-left: 20px; padding-right: 20px; }
  .intro { gap: 25px; }
  .amenities ul { grid-template-columns: 1fr; }
  .booking { padding-left: 20px; padding-right: 20px; gap: 25px; }
  .booking-card { margin: 0 -5px; padding: 21px 16px; }
  .calendar-months { grid-template-columns: 1fr; gap: 22px; }
  .day { min-height: 43px; }
  .location { padding: 0; }
  .location-copy { padding: 57px 20px; }
  .site-footer { align-items: flex-start; flex-direction: column; padding: 27px 20px; }
  .site-footer div { gap: 17px; }
  .cookie-banner { right: 16px; bottom: 16px; padding: 20px; }
  .settings-grid, .add-range, .add-range.two-dates { grid-template-columns: 1fr; }
  .calendar-export { grid-template-columns: 1fr; }
  .payment-fields { grid-template-columns: 1fr; }
}