:root{
  --ink:#1f2f2e; --muted:#5b6a68; --line:#e4d9c8;
  --sand:#f4ede2; --sand2:#eadfce; --gold:#d6a75e; --gold-soft:#f1e2c4; --gold-deep:#8a5d14;
  --sea:#1f7a80; --wa:#1faa59;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 1.0625rem/1.7 'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);background:#fff}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(2.5rem,5.4vw,4.2rem)}
:focus-visible{outline:3px solid var(--sea);outline-offset:3px}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--ink);padding:.6rem 1rem;z-index:50}
.skip:focus{left:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 1rem 'Hanken Grotesk',sans-serif;text-decoration:none;border:1.5px solid transparent;border-radius:4px;padding:.9rem 1.7rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#e2b877}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--gold-soft)}
.btn-out{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-out:hover{background:var(--ink);color:#fff}

/* Header */
.head{background:#fff}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding-block:1.1rem}
.addr-top{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;line-height:1.4}
.addr-top svg{width:1.15rem;height:1.15rem;flex:none;margin-top:.15rem;color:var(--gold-deep)}
.logo{text-align:center;text-decoration:none;font:400 2.6rem/1 'Instrument Serif',Georgia,serif}
.logo small{display:block;font:500 .78rem/1.2 'Hanken Grotesk',sans-serif;letter-spacing:.08em;color:var(--gold-deep);margin-top:.3rem}
.contact-top{display:flex;justify-content:flex-end;align-items:center;gap:1rem}
.contact-top .tel{color:var(--gold-deep);font-weight:600;font-size:1.15rem;text-decoration:none}
.contact-top .res{border-left:1px solid var(--line);padding-left:1rem;font-weight:500;text-decoration:none}
.contact-top .res:hover{color:var(--gold-deep)}
.navrow{border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.navrow ul{display:flex;justify-content:center;flex-wrap:wrap;gap:.25rem clamp(1.25rem,4vw,3.5rem);list-style:none;padding-block:.95rem}
.navrow a{text-decoration:none;font-weight:500}
.navrow a:hover{color:var(--gold-deep)}
.menu-btn{display:none;justify-self:end;background:none;border:1.5px solid var(--ink);color:var(--ink);border-radius:4px;padding:.5rem 1rem;font:600 .95rem 'Hanken Grotesk',sans-serif;cursor:pointer}

/* Hero */
.hero{position:relative;min-height:clamp(520px,80svh,780px);display:grid;place-items:center;text-align:center;color:#fff;background:var(--sand2);overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:settle 2.4s cubic-bezier(.2,.7,.2,1) both}
.hero::after{content:"";position:absolute;inset:0;background:rgba(15,30,30,.3)}
.hero-copy{position:relative;z-index:1;padding:5rem 1.25rem 8rem;max-width:940px;animation:rise .9s .2s cubic-bezier(.2,.7,.2,1) both}
.hero .kick{font:italic 400 clamp(1.5rem,3vw,2.1rem)/1 'Instrument Serif',Georgia,serif;margin-bottom:.9rem}
.hero h1{font-size:clamp(3.4rem,10vw,7.4rem);text-shadow:0 2px 26px rgba(0,0,0,.3)}
.hero .sub{margin-top:1.1rem;font-size:clamp(1.05rem,2vw,1.3rem)}
.hero .btn{margin-top:2rem}
@keyframes settle{from{transform:scale(1.07)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Quote bar */
.quote{position:relative;z-index:2;margin-top:-4rem}
.quote form{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.25rem;display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1rem;align-items:end;box-shadow:0 22px 44px -26px rgba(31,47,46,.4)}
.quote label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:.3rem}
.quote input,.quote select{width:100%;font:500 1rem 'Hanken Grotesk',sans-serif;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:4px;padding:.7rem .8rem;min-height:3rem}
.quote .err{grid-column:1/-1;color:#b3261e;font-weight:500}
.quote .err:empty{display:none}

/* Sections */
.section{padding-block:clamp(4rem,9vw,7.5rem)}
.sand{background:var(--sand)}
.section .intro{max-width:54ch;color:var(--muted);margin-top:1rem;font-size:1.15rem}

/* Welcome */
.welcome{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.welcome img{width:100%;aspect-ratio:4/5;object-fit:cover}
.welcome p{color:var(--muted);margin-top:1.25rem;max-width:56ch}
.pull{border-left:2px solid var(--gold);padding-left:1.5rem;margin-top:2rem;font:400 clamp(1.7rem,3.2vw,2.4rem)/1.15 'Instrument Serif',Georgia,serif}
.pull cite{display:block;font:500 .9rem 'Hanken Grotesk',sans-serif;color:var(--muted);margin-top:.6rem;font-style:normal}
.amenities{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:1.5rem}
.amenities li{position:relative;padding-left:1.6rem;font-weight:500;color:var(--muted)}
.amenities li::before{content:"";position:absolute;left:0;top:.45em;width:.85rem;height:.85rem;border-radius:50%;background:var(--gold)}
.welcome .btn{margin-top:2rem}

/* Experiences */
.exp{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:clamp(3rem,7vw,5rem)}
.exp img{width:100%;aspect-ratio:4/5;object-fit:cover}
.exp h3{font-size:2rem;margin-top:1rem}
.exp p{color:var(--muted);margin-top:.35rem}

/* Stays */
.stays{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2.5rem,5vw,4rem) 2rem;margin-top:clamp(2.5rem,6vw,4rem)}
.stay .img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:var(--sand2)}
.stay .img img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;right:.9rem;bottom:.9rem;background:#fff;color:var(--ink);font:600 .9rem 'Hanken Grotesk',sans-serif;padding:.4rem .9rem;border-radius:999px}
.stay .cap{margin-top:1.1rem;color:var(--gold-deep);font-weight:600;font-size:.95rem}
.stay h3{font-size:clamp(1.9rem,3.2vw,2.5rem);margin-top:.1rem}
.stay .lead{color:var(--muted);margin-top:.4rem}
.specs{margin-top:1.1rem}
.specs div{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.55rem 0;border-top:1px solid var(--line);font-size:.98rem}
.specs div:last-child{border-bottom:1px solid var(--line)}
.specs dt{font-weight:600;color:var(--gold-deep)}
.stay .btn{margin-top:1.25rem}

/* Gallery */
.mosaic{columns:3 260px;column-gap:.6rem;margin-top:2.5rem}
.mosaic a{display:block;margin-bottom:.6rem;border-radius:8px;overflow:hidden;background:var(--sand2);break-inside:avoid}
.mosaic img{width:100%;height:auto}

/* Promo */
.promo{background:var(--gold-soft)}
.promo .intro{color:#4c4030}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:3rem;border-top:1px solid rgba(31,47,46,.25)}
.tier{padding:1.75rem 1.5rem 1.75rem 0}
.tier + .tier{border-left:1px solid rgba(31,47,46,.25);padding-left:1.5rem}
.tier .n{font:400 clamp(4rem,10vw,7.5rem)/1 'Instrument Serif',Georgia,serif;color:var(--gold-deep)}
.tier .d{font-size:1.2rem;font-weight:500;margin-top:.3rem}
.terms{margin-top:2rem;padding-left:1.1rem;max-width:64ch;color:#4c4030;font-size:.98rem}
.terms li{margin-top:.35rem}
.promo .btn{margin-top:2rem}

/* Location */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.addr{font-size:1.25rem;margin-top:1.25rem;line-height:1.5}
.loc-map{width:100%;max-width:380px;height:auto;border-radius:12px;border:1px solid var(--line);margin-top:1.5rem}
.split .btn{margin-top:1.5rem}
.contact{list-style:none;border-top:1px solid var(--line)}
.contact li{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.contact b{color:var(--gold-deep)}
.contact a{font-weight:600;text-underline-offset:4px}
.how h3{font-size:clamp(2rem,3.6vw,2.8rem);margin-top:clamp(3rem,7vw,5rem)}
.routes{display:grid;grid-template-columns:repeat(4,1fr);margin-top:1.25rem;border-top:1px solid var(--line)}
.route{padding:1.5rem 1.5rem 1.5rem 0}
.route + .route{border-left:1px solid var(--line);padding-left:1.5rem}
.route .t{font:400 clamp(2.2rem,4.5vw,3.4rem)/1.05 'Instrument Serif',Georgia,serif;color:var(--gold-deep)}
.route .f{margin-top:.4rem;font-weight:500}
.route-note{margin-top:.5rem;color:var(--muted);max-width:62ch}
.route-note a{font-weight:600;text-underline-offset:4px}

/* Footer + FAB */
footer{background:var(--sand2);color:var(--ink);padding-block:2rem;font-size:.95rem}
.fab{position:fixed;right:1rem;bottom:1rem;z-index:30;display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
.fab svg{width:1.9rem;height:1.9rem}

/* Lightbox */
dialog{border:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;padding:0;color:var(--ink)}
dialog::backdrop{background:rgba(255,255,255,.97)}
dialog figure{height:100%;display:grid;grid-template-rows:1fr auto;place-items:center;padding:3.5rem 1rem 1rem}
dialog img{max-width:92vw;max-height:78vh;object-fit:contain}
dialog figcaption{padding-top:.75rem;font-size:.95rem;text-align:center}
.lb-btn{position:absolute;background:var(--sand);color:var(--ink);border:0;border-radius:4px;font:600 1rem 'Hanken Grotesk',sans-serif;padding:.7rem 1.1rem;cursor:pointer}
.lb-btn:hover{background:var(--sand2)}
.lb-close{top:1rem;right:1rem}
.lb-prev{left:1rem;top:50%}
.lb-next{right:1rem;top:50%}

/* Responsive */
@media (max-width:900px){
  .quote form{grid-template-columns:1fr 1fr}
  .quote form .btn{grid-column:1/-1}
  .welcome,.split{grid-template-columns:1fr}
  .stays{grid-template-columns:1fr}
  .routes{grid-template-columns:1fr 1fr}
  .route:nth-child(odd){border-left:0;padding-left:0}
  .route:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:820px){
  .topbar{grid-template-columns:1fr auto}
  .addr-top,.contact-top{display:none}
  .logo{text-align:left;font-size:2.2rem}
  .menu-btn{display:inline-block}
  .navrow{display:none}
  .navrow.open{display:block}
  .navrow ul{flex-direction:column;align-items:center;gap:.6rem;padding-block:1.1rem}
}
@media (max-width:760px){
  .exp{grid-template-columns:1fr}
  .tiers,.routes{grid-template-columns:1fr}
  .tier + .tier{border-left:0;border-top:1px solid rgba(31,47,46,.25);padding-left:0}
  .route + .route{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .contact li{grid-template-columns:1fr;gap:.2rem}
  .lb-prev,.lb-next{top:auto;bottom:1rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Multi-page additions: nav active state, breadcrumbs, room list cards, room detail pages */
.navrow a[aria-current="page"]{color:var(--gold-deep);font-weight:600}
.page-hero{background:var(--sand);padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem)}
.page-hero .crumbs{font-size:.9rem;color:var(--muted)}
.page-hero .crumbs a{text-decoration:underline;text-underline-offset:3px}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);margin-top:.5rem}
.page-hero .intro{max-width:56ch;color:var(--muted);margin-top:.75rem;font-size:1.15rem}

/* Alojamientos: list of cards, each linking to its own page */
.room-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 2rem;margin-top:clamp(2.5rem,6vw,4rem)}
.room-card{display:block;text-decoration:none;color:inherit}
.room-card .img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:var(--sand2)}
.room-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.room-card:hover .img img{transform:scale(1.04)}
.room-card .cap{margin-top:1.1rem;color:var(--gold-deep);font-weight:600;font-size:.95rem}
.room-card h3{font-size:clamp(1.7rem,3vw,2.2rem);margin-top:.1rem}
.room-card .lead{color:var(--muted);margin-top:.35rem}
.room-card .see{display:inline-block;margin-top:.75rem;font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* Room detail page */
.room-detail-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:clamp(2rem,5vw,3rem)}
.room-detail-gal a{position:relative;display:block;overflow:hidden;border-radius:10px;background:var(--sand2);aspect-ratio:1}
.room-detail-gal a:first-child{grid-column:1/3;grid-row:1/3;aspect-ratio:1}
.room-detail-gal img{width:100%;height:100%;object-fit:cover}
.room-detail-body{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,4rem);margin-top:clamp(2.5rem,6vw,4rem);align-items:start}
.room-detail-body .lead{font-size:1.2rem;color:var(--muted)}
.room-detail-body .specs{margin-top:1.5rem}
.room-detail-body .btn{margin-top:1.5rem}
.other-rooms{margin-top:clamp(3rem,7vw,5.5rem);border-top:1px solid var(--line);padding-top:clamp(2rem,5vw,3rem)}
.other-rooms h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.other-rooms .room-cards{grid-template-columns:repeat(3,1fr)}

@media (max-width:900px){
  .room-cards,.other-rooms .room-cards{grid-template-columns:1fr}
  .room-detail-body{grid-template-columns:1fr}
}
@media (max-width:700px){
  .room-detail-gal{grid-template-columns:repeat(2,1fr)}
  .room-detail-gal a:first-child{grid-column:1/3;grid-row:auto;aspect-ratio:16/10}
}