@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

:root{color-scheme:light;--paper:#faf7ee;--white:#fffdf8;--dark:#163733;--muted:#3c5651;--line:#cacebf;--wash:#e8efe8;--serif:"Instrument Serif",Georgia,serif;--sans:Inter,system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--dark);font:16px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:3px solid #b36536;outline-offset:4px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3,.logo{font-family:var(--serif);font-weight:400;line-height:.99;letter-spacing:-.022em}
h2{font-size:clamp(3.1rem,6.4vw,5.6rem)}
h3{font-size:clamp(2.4rem,4vw,3.5rem)}
img{display:block;width:100%;height:auto;object-fit:cover}
.shell{width:min(1200px,calc(100% - 96px));margin-inline:auto}
.skip{position:fixed;background:var(--paper);padding:12px;top:8px;left:8px;z-index:3;transform:translateY(-150%)}
.skip:focus{transform:none}
.bar{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:85px}
.logo{font-size:clamp(1.8rem,4vw,2.65rem);white-space:nowrap}
.logo span{display:block;margin-top:.3rem;font:700 .57rem/1.25 var(--sans);letter-spacing:.19em}
nav{display:flex;gap:clamp(15px,3vw,38px);font-size:.9rem}
nav a:hover,.text-link:hover,footer details a:hover{text-decoration:underline;text-underline-offset:4px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:var(--dark);color:var(--white);min-height:52px;padding:12px 19px;font-size:.88rem;font-weight:700}
.button:hover{background:#28524c}
.small{min-height:43px;font-size:.78rem}
.paper{background:var(--paper);color:var(--dark)}.paper:hover{background:#e7e8db}
.arrow{display:inline-block;width:.67em;height:.67em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;position:relative;flex:none}
.arrow::after{content:"";position:absolute;right:-.025em;top:-.025em;width:.83em;height:1.5px;background:currentColor;transform:rotate(-45deg);transform-origin:right center}
.hero{position:relative;isolation:isolate;background:#426c72;display:grid;align-items:center;min-height:clamp(480px,67vh,700px);color:var(--white)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(87deg,#0d302de8 0%,#103435b8 36%,#102c3533 75%),url('assets/mare.webp') center 48%/cover}
.hero-content{padding-block:64px 82px}
.label{font-size:.7rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;margin-bottom:14px}
.hero h1{font-size:clamp(5.2rem,12vw,11rem);letter-spacing:-.035em}
.subtitle{font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3.35rem);font-style:italic;margin:.5rem 0 1.55rem}
.photo-label{position:absolute;right:25px;bottom:19px;font-size:.69rem;background:#163733e8;padding:3px 8px}
.intro,.arrive{display:grid;grid-template-columns:1.18fr .82fr;align-items:end;gap:30px 70px;padding-block:90px}
.intro-body p,.arrive address,.end p,.place-body p{color:var(--muted);font-size:1rem}
.text-link{display:inline-flex;align-items:center;gap:10px;margin-top:17px;font-size:.89rem;font-weight:700}
.details{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:8px 0 0;padding:0;border-block:1px solid var(--line)}
.details li{padding:15px 12px;text-align:center;font-size:.86rem;font-weight:600}
.details li+li{border-left:1px solid var(--line)}
.around{background:var(--wash);padding-block:75px 85px}
.places{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:28px}
.places article{background:var(--white)}
.places img{aspect-ratio:1.8}
.place-body{padding:23px 26px 27px}.place-body p{margin-top:8px}
.visit-filters:not([hidden]){display:flex;flex-wrap:wrap;gap:16px;margin-top:24px}
.visit-filters label{display:grid;gap:4px;font-size:.9rem;font-weight:700;flex:1 1 12rem;max-width:19rem}
.visit-filters select{min-height:44px;border:1px solid var(--line);background:var(--white);color:var(--dark);padding:8px;font:inherit}
.visit-count:not(:empty){margin-top:12px;font-size:.85rem;color:var(--muted)}
.visit-count:not(:empty)+.places{margin-top:12px}
.place-body .visit-place-location{font-size:.8rem;font-weight:700;margin:0 0 7px}
.visit-links{display:flex;flex-wrap:wrap;gap:5px 18px;margin-top:10px}
.visit-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.arrive address{font-size:1.1rem;font-style:normal}
.end{background:var(--dark);color:var(--white);padding-block:60px}
.end-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
.end h2{font-size:clamp(3rem,6vw,4.8rem)}
.end p{color:var(--white);margin-top:12px}
.end .button{flex-shrink:0}
.footer{display:flex;gap:20px;align-items:start;justify-content:space-between;padding-block:32px}
.footer-info{display:grid;gap:12px;font-size:.9rem}
.footer-info address{font-style:normal}
.footer-info address a{text-decoration:underline;text-underline-offset:3px}
.footer details{font-size:.8rem;max-width:420px}.footer summary{cursor:pointer}.footer details p{margin-top:8px}.footer details a{text-decoration:underline}
@media(max-width:900px){.shell{width:calc(100% - 56px)}.intro,.arrive{gap:24px 35px}}
@media(max-width:680px){
.shell{width:calc(100% - 36px)}.bar{display:grid;grid-template-columns:1fr auto;gap:10px;min-height:auto;padding-top:12px}.bar .button{grid-column:2;grid-row:1;font-size:.68rem;padding-inline:9px;gap:8px}.bar nav{grid-column:1/-1;grid-row:2;border-top:1px solid var(--line);justify-content:space-between;padding:8px 0 11px;font-size:.82rem}
.hero{min-height:460px}.hero::before{background-position:center,56% center;background-image:linear-gradient(82deg,#0d302de0,#10343585 65%,#102c3533),url('assets/mare.webp')}.hero h1{font-size:clamp(4.65rem,15vw,6.8rem)}.photo-label{right:11px;bottom:11px}.intro,.arrive,.places{grid-template-columns:1fr}.intro,.arrive,.around{padding-block:54px}.details{grid-template-columns:1fr 1fr}.details li:nth-child(3){border-left:0}.details li:nth-child(n+3){border-top:1px solid var(--line)}.places{gap:16px}.place-body{padding:20px}.end-inner,.footer{flex-direction:column;align-items:start}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.home-photos{padding-block:72px 48px}
.home-photos+.intro{border-top:1px solid var(--line);padding-block-start:54px}
.photo-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}
.photo-heading h1{font-size:clamp(4rem,9vw,7.4rem)}
.photo-heading p{color:var(--muted);margin-top:10px}
.photo-heading .button{flex-shrink:0}
.photo-preview,.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.photo-preview img,.photo-grid img{aspect-ratio:4/3}
.photo-page{padding-block:38px 75px}
.photo-page .back{margin:0 0 24px}
.photo-grid figure{background:var(--white);border:1px solid var(--line)}
.photo-grid a{display:block}
.photo-grid a:hover img{filter:brightness(.93)}
.photo-grid figcaption{padding:10px 13px;font-weight:600;font-size:.85rem}
.photo-page+.footer{border-top:1px solid var(--line)}
.photo-viewer{background:var(--white);color:var(--dark);border:1px solid var(--line);padding:0;width:min(900px,calc(100% - 24px));max-height:calc(100% - 24px)}
.photo-viewer::backdrop{background:rgba(10,27,24,.88)}
.viewer-frame{padding:12px}
.viewer-toolbar,.viewer-controls{display:flex;justify-content:space-between;align-items:center;gap:8px}
.viewer-toolbar p{font-size:.86rem;font-weight:600}
.viewer-frame img{width:100%;height:min(68vh,660px);object-fit:contain;background:var(--wash);margin-block:10px}
.viewer-frame button{border:1px solid var(--line);background:var(--paper);color:inherit;font:600 .82rem var(--sans);padding:8px 11px;min-height:40px;cursor:pointer}
.viewer-frame button:hover{background:var(--wash)}
.viewer-frame button:focus-visible{outline:3px solid #b36536;outline-offset:2px}
@media(max-width:680px){
  .bar nav{gap:8px;flex-wrap:wrap}
  .home-photos,.photo-page{padding-block:24px 48px}
  .home-photos+.intro{padding-block-start:32px}
  .photo-heading{align-items:start;flex-direction:column}
  .photo-grid,.photo-preview{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .photo-preview img:first-child{grid-column:1/-1}
}

.gallery-section + .gallery-section{margin-top:48px}
.gallery-section h2{font-size:clamp(2.25rem,4vw,3.65rem);margin-bottom:16px}

.arrive .directions{margin-top:15px}
.arrival-map{grid-column:1/-1;display:block;width:100%;height:clamp(280px,42vw,390px);border:1px solid var(--line);background:var(--wash)}

.contact-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.end .contact-actions{justify-content:flex-end}
.whatsapp{background:#176347;color:var(--white)}
.whatsapp:hover{background:#0f5038}
@media(max-width:680px){.end .contact-actions{justify-content:flex-start}}

.booking-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(25px,6vw,80px);align-items:center}
.booking-layout>div .whatsapp{margin-top:20px}
.booking-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:clamp(15px,3vw,28px);background:var(--white);color:var(--dark)}
.booking-form label{display:grid;gap:5px;min-width:0;font-size:.85rem;font-weight:700}
.booking-form input,.booking-form select{min-height:45px;width:100%;min-width:0;border:1px solid var(--line);background:var(--paper);color:var(--dark);padding:8px;font:inherit;font-size:1rem}
.booking-name,.booking-stay,.booking-extra,.booking-form button,.booking-form p{grid-column:1/-1}
.booking-form button{border:0;cursor:pointer;font-family:var(--sans);text-align:left}
.booking-form button:disabled{opacity:.65;cursor:default}
.booking-form p{color:var(--muted);font-size:.82rem;margin:0}
.booking-form #booking-price{background:var(--paper);padding:12px;font-size:.9rem;font-weight:700}
.booking-form :is(input,select,button):focus-visible{outline:3px solid #b36536;outline-offset:2px}
@media(max-width:760px){.booking-layout{grid-template-columns:1fr}}

.stay-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.stay-card{display:flex;flex-direction:column;align-items:start;gap:12px;padding:clamp(18px,3vw,30px);background:var(--white);border:1px solid var(--line)}
.stay-card h3{font-size:clamp(2rem,3.6vw,3.15rem)}
.stay-card p{color:var(--muted)}
.stay-card .text-link{margin-top:auto;min-height:44px}
.stay-prices{width:100%;margin-block-start:4px;border-block:1px solid var(--line)}
.stay-prices summary{min-height:44px;padding:10px 0;cursor:pointer;font-weight:700;font-size:.9rem}
.price-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.price-filters label{display:grid;gap:4px;font-size:.85rem;font-weight:700}
.price-filters label:first-child{grid-column:1/-1}
.price-filters select{width:100%;min-width:0;min-height:44px;border:1px solid var(--line);background:var(--paper);color:var(--dark);padding:8px;font:inherit;font-size:1rem}
.price-filters select:focus-visible{outline:3px solid #b36536;outline-offset:2px}
.stay-prices .price-result{margin-block:12px;font-size:.9rem;font-weight:700}
@media(max-width:760px){.stay-grid{grid-template-columns:1fr;gap:12px}}

.reviews{background:var(--wash);padding-block:clamp(48px,7vw,86px)}
.reviews h2+p{margin-top:14px;color:var(--muted)}
.review-form .review-comment,.review-form noscript{grid-column:1/-1}
.review-form textarea{min-height:115px;width:100%;border:1px solid var(--line);background:var(--paper);color:var(--dark);padding:8px;font:inherit;font-size:1rem;resize:vertical}
.review-form textarea:focus-visible{outline:3px solid #b36536;outline-offset:2px}
.review-form a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:420px){.review-form{grid-template-columns:1fr}}

#review-feedback:empty,#review-list-status:empty,.review-list:empty{display:none}
.guest-reviews{grid-column:1/-1}
.guest-reviews h3{margin-bottom:16px}
.guest-reviews>p{color:var(--muted)}
.review-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px;list-style:none;margin:0;padding:0}
.review-list li{background:var(--white);border:1px solid var(--line);padding:20px;overflow-wrap:anywhere}
.review-list li>p{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.review-stars{color:#815820;white-space:nowrap;letter-spacing:.1em}
.review-list time{font-size:.79rem;color:var(--muted)}
.review-list blockquote{margin:12px 0 0;white-space:pre-wrap}
#more-reviews{margin-top:16px;border:0;cursor:pointer;font-family:var(--sans)}
#more-reviews[hidden]{display:none}

.review-invite{grid-column:1/-1;border-top:1px solid var(--line);max-width:650px;width:100%}
.review-invite summary{padding:15px 0;cursor:pointer;font-weight:700}
.review-invite p,.review-invite noscript,.review-invite-ready{grid-column:1/-1}
.review-invite label span{font-size:.8rem;font-weight:400;color:var(--muted)}
.review-invite-ready label{margin-bottom:12px}
.review-invite-ready textarea{width:100%;padding:8px;border:1px solid var(--line);background:var(--paper);color:var(--dark);font:400 1rem/1.5 var(--sans);resize:vertical}
.review-invite-ready textarea:focus-visible{outline:3px solid #b36536;outline-offset:2px}
.review-invite-ready p{margin-top:8px}
@media(max-width:520px){.review-invite .booking-form{grid-template-columns:1fr}}