:root{--ink:#111;--paper:#f5f3ef;--sand:#e8e2d8;--line:#d9d3c9;--mut:#77726b;--white:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-weight:300;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.d{font-family:'League Gothic',Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;font-weight:400;line-height:.92}
.kick{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-bottom:18px}
.btn{display:inline-block;border:1px solid currentColor;padding:13px 26px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;background:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.fill{background:#fff;color:#111;border-color:#fff}
.btn.fill:hover{background:transparent;color:#fff}
.btn.dark{background:#111;color:#fff;border-color:#111}
.btn.dark:hover{background:transparent;color:#111}
.wrap{padding:0 56px}


/* cabecera */
header.top{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:20px 56px;color:#fff;z-index:20;transition:background-color .45s ease,padding .45s ease,color .45s ease,border-color .45s ease;border-bottom:1px solid transparent}
header.top.solid{position:relative;color:var(--ink);background:var(--paper);border-bottom:1px solid var(--line)}
header.top .logo img{height:108px;transition:height .45s ease,filter .45s ease}
header.top nav{display:flex;gap:34px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
header.top nav a{padding:4px 0;border-bottom:1px solid transparent}
header.top nav a:hover,header.top nav a.on{border-bottom-color:currentColor}
.burger{display:none;background:none;border:0;cursor:pointer;width:34px;height:24px;position:relative}
.burger span{position:absolute;left:0;right:0;height:1.5px;background:currentColor}
.burger span:nth-child(1){top:4px}.burger span:nth-child(2){top:11px}.burger span:nth-child(3){top:18px}
.menu{position:fixed;inset:0;background:#111;color:#fff;z-index:40;display:none;flex-direction:column;justify-content:center;padding:40px 28px;gap:14px}
.menu.open{display:flex}
.menu a.d{font-size:56px}
.menu .x{position:absolute;top:22px;right:22px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer}

/* cabecera de página interior */
.phero{height:62vh;min-height:460px;background-size:cover;background-position:center;position:relative;color:#fff;display:flex;align-items:flex-end}
.phero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.05) 40%,rgba(0,0,0,.5))}
.phero .in{position:relative;padding:0 56px 56px}
.phero h1{font-size:120px}
.phero p{max-width:460px;margin-top:14px;font-size:16px;line-height:1.6;color:#eee}

/* portada */
.hero{height:100vh;min-height:760px;background:url(img/fachada.webp) center/cover;position:relative;color:#fff;display:flex;align-items:flex-end}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 35%,rgba(0,0,0,.55))}
.hero .in{position:relative;padding:0 56px 96px;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.hero h1{font-size:150px}
.hero p{max-width:340px;font-size:15px;line-height:1.6;margin-bottom:22px;color:#eee}

/* buscador de reserva */
.book{position:relative;margin:-46px 56px 0;background:#fff;display:grid;grid-template-columns:1fr 1fr 1fr auto;box-shadow:0 20px 40px rgba(0,0,0,.08);z-index:3}
.book label{display:block;padding:18px 26px;border-right:1px solid #eee;cursor:pointer}
.book small{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.book input,.book select{border:0;background:none;font-weight:500;font-size:15px;width:100%;outline:none;cursor:pointer}
.book .go{background:#111;color:#fff;border:0;display:flex;align-items:center;justify-content:center;padding:0 40px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.book .go:hover{background:#333}
.book.flat{margin:0;box-shadow:none;border:1px solid var(--line)}

section{padding:120px 56px}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.intro h2{font-size:84px}
.intro p{font-size:17px;line-height:1.75;color:#333;margin-bottom:18px}
.rooms{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;padding-top:0}
.ph{background-size:cover;background-position:center;position:relative;overflow:hidden}
.ph .cap{position:absolute;left:28px;bottom:26px;color:#fff;z-index:2}
.ph:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45))}
.ph .cap .d{font-size:56px}
.ph .cap span{font-size:12px;letter-spacing:.2em;text-transform:uppercase}
a.ph:hover .cap .d{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.r1{height:760px;background-image:url(img/habitacion.webp)}
.stack{display:grid;grid-template-rows:1fr 1fr;gap:24px}
.r2{background:#111 url(img/isotipo-blanco.png) center 42%/110px no-repeat}.r3{background-image:url(img/piscina.webp)}
.feat{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 56px}
.feat div{padding:34px 26px;border-right:1px solid var(--line)}.feat div:last-child{border:0}
.feat .d{font-size:40px;display:block;margin-bottom:8px}
.feat span{font-size:13px;color:var(--mut);line-height:1.5}
.place{display:grid;grid-template-columns:1fr 1fr;padding:0;margin-top:120px}
.place .ph{min-height:640px;background-image:url(img/fachada.webp)}
.place .ph:after{display:none}
.dark{background:#111;color:#f1eee9}
.place .tx{padding:90px 70px;display:flex;flex-direction:column;justify-content:center}
.place .tx h2{font-size:84px;margin-bottom:28px}
.list{list-style:none;font-size:15px;line-height:1.5}
.list li{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #333;padding:14px 0}
.list.light li{border-color:var(--line)}
.list li b{font-weight:500;white-space:nowrap}
.quote{text-align:center}
.quote p.d{font-size:64px;max-width:980px;margin:0 auto 22px}
.quote .who{font-size:13px;color:var(--mut)}
.dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--line);cursor:pointer}
.dots button.on{background:var(--ink)}

/* habitaciones */
.room{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:center;padding:90px 56px;border-bottom:1px solid var(--line)}
.room:nth-child(even) .pic{order:2}
.room .pic{aspect-ratio:3/2;background-size:cover;background-position:center}
.room h2{font-size:80px;margin-bottom:18px}
.room p{font-size:16px;line-height:1.75;color:#333;margin-bottom:22px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tags span{font-size:12px;letter-spacing:.08em;border:1px solid var(--line);padding:7px 12px}
.price{display:flex;align-items:baseline;gap:10px;margin-bottom:22px}
.price .d{font-size:54px}
.price small{color:var(--mut);font-size:13px}

/* bloques de texto */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.cols h3{font-size:38px;margin-bottom:12px}
.cols p{font-size:15px;line-height:1.7;color:#444}
.split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.split .ph{min-height:560px}
.split .ph:after{display:none}
.split .tx{padding:90px 70px;display:flex;flex-direction:column;justify-content:center}
.split .tx h2{font-size:72px;margin-bottom:22px}
.split .tx p{font-size:16px;line-height:1.75;margin-bottom:16px}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-size:17px;font-weight:400}
.faq summary:after{content:"+";font-size:22px;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq p{margin-top:12px;font-size:15px;line-height:1.7;color:#444;max-width:760px}
.narrow{max-width:900px;margin:0 auto}

/* reserva */
.steps{display:flex;gap:28px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:40px}
.steps .on{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px}
.bk{display:grid;grid-template-columns:1fr 360px;gap:50px;align-items:start}
.opt{display:grid;grid-template-columns:240px 1fr auto;gap:28px;align-items:center;background:#fff;padding:20px;margin-bottom:18px;border:1px solid transparent;cursor:pointer;transition:border-color .2s}
.opt:hover{border-color:var(--line)}
.opt.on{border-color:var(--ink)}
.opt .pic{aspect-ratio:3/2;background-size:cover;background-position:center}
.opt h3{font-size:40px;margin-bottom:6px}
.opt p{font-size:14px;color:var(--mut);line-height:1.6}
.opt .pr{text-align:right}
.opt .pr .d{font-size:40px}
.opt .pr small{display:block;font-size:12px;color:var(--mut)}
.sum{background:#fff;padding:30px;position:sticky;top:20px}
.sum h3{font-size:36px;margin-bottom:18px}
.sum .row{display:flex;justify-content:space-between;font-size:14px;padding:10px 0;border-bottom:1px solid #eee}
.sum .tot{font-size:16px;font-weight:500;border:0;padding-top:16px}
.sum .btn{width:100%;margin-top:20px;text-align:center}
.sum .note{font-size:12px;color:var(--mut);margin-top:14px;line-height:1.5}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .full{grid-column:1/-1}
.form label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:6px}
.form input,.form textarea,.form select{width:100%;border:0;border-bottom:1px solid #bbb;background:transparent;padding:10px 0;font-size:16px;outline:none}
.form input:focus,.form textarea:focus{border-color:var(--ink)}
.ok{text-align:center;padding:40px 0}
.ok .d{font-size:90px;margin-bottom:16px}
.ok p{font-size:16px;line-height:1.7;max-width:560px;margin:0 auto 12px;color:#333}
.hide{display:none!important}

/* contacto */
.map{width:100%;height:460px;border:0;filter:grayscale(1) contrast(1.05)}

footer.foot{background:#111;color:#bdb7ae;padding:70px 56px 90px;display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:60px;font-size:14px;line-height:1.8}
footer.foot img{height:110px}
footer.foot b{color:#fff;font-weight:500;display:block;margin-bottom:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
footer.foot a:hover{color:#fff}
footer.foot .legal{grid-column:1/-1;border-top:1px solid #2a2a2a;padding-top:22px;font-size:12px;color:#77726b;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}


@media (max-width:900px){
 .wrap{padding:0 20px}
 header.top{padding:14px 20px}header.top .logo img{height:80px}header.top nav{display:none}header.top .btn{display:none}.burger{display:block}
 .hero{min-height:640px;height:92vh}.hero .in{flex-direction:column;align-items:flex-start;padding:0 20px 90px;gap:10px}.hero h1{font-size:76px}
 .phero{height:52vh;min-height:380px}.phero .in{padding:0 20px 40px}.phero h1{font-size:68px}
 .book{grid-template-columns:1fr 1fr;margin:-50px 16px 0}.book label{padding:14px}.book .go{grid-column:1/3;padding:16px}
 .book.flat{margin:0}
 section{padding:70px 20px}.intro{grid-template-columns:1fr;gap:20px}.intro h2{font-size:54px}
 .rooms{grid-template-columns:1fr}.r1{height:460px}.stack{grid-template-rows:280px 280px}
 .feat{grid-template-columns:1fr 1fr;margin:0 20px}.feat div{border-bottom:1px solid var(--line)}
 .place,.split{grid-template-columns:1fr}.place{margin-top:70px}.place .ph,.split .ph{min-height:340px}.place .tx,.split .tx{padding:50px 24px}.place .tx h2,.split .tx h2{font-size:54px}
 .quote p.d{font-size:40px}
 .room{grid-template-columns:1fr;gap:26px;padding:50px 20px}.room:nth-child(even) .pic{order:0}.room h2{font-size:58px}
 .cols{grid-template-columns:1fr;gap:34px}
 .bk{grid-template-columns:1fr}.opt{grid-template-columns:1fr;gap:14px}.opt .pr{text-align:left}.sum{position:static}
 .form{grid-template-columns:1fr}
 footer.foot{grid-template-columns:1fr;padding:50px 20px 90px;gap:26px}
}
@media (max-width:900px){.wrap-book{padding:30px 20px 0!important}}

/* ===== efectos v2 (parallax, carga de texto, apariciones) =====
   Todo lo que oculta contenido cuelga de html.fx, que solo pone el JS.
   Sin JS o con reduced-motion, la web se ve entera y quieta. */
[id]{scroll-margin-top:90px}

/* cabecera: transparente sobre la foto, sólida al bajar */
header.top.scrolled{background:rgba(245,243,239,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);padding-top:14px;padding-bottom:14px;border-bottom-color:var(--line)}
header.top.scrolled .logo img{height:62px;filter:brightness(0)}
header.top.scrolled .btn:hover{background:var(--ink);color:#fff}
@keyframes fxDown{from{opacity:0;transform:translate3d(0,-14px,0)}to{opacity:1;transform:none}}
html.fx header.top .logo,html.fx header.top nav a,html.fx header.top>.btn,html.fx header.top .burger{animation:fxDown .9s cubic-bezier(.2,.7,.2,1) both}
html.fx header.top .logo{animation-delay:.05s}
html.fx header.top nav a:nth-child(1){animation-delay:.15s}
html.fx header.top nav a:nth-child(2){animation-delay:.21s}
html.fx header.top nav a:nth-child(3){animation-delay:.27s}
html.fx header.top nav a:nth-child(4){animation-delay:.33s}
html.fx header.top>.btn,html.fx header.top .burger{animation-delay:.4s}

/* capa de foto: parallax (transform) + zoom (propiedad scale) */
.has-px{position:relative;overflow:hidden;isolation:isolate}
.px{position:absolute;left:0;right:0;top:calc(var(--pa,0%) * -1);bottom:calc(var(--pa,0%) * -1);z-index:-1;background-size:cover;background-position:center;transform:translate3d(0,0,0);will-change:transform;transition:scale 1.4s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.hero .px{animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{scale:1.02}to{scale:1.1}}
a.ph:hover .px,.room:hover .pic .px,.opt:hover .px{scale:1.05}

/* titulares por líneas, con máscara */
.ln{display:block;overflow:hidden;padding:.12em 0 .04em;margin:-.12em 0 -.04em}
.ln-i{display:block}
html.fx .split-t .ln-i{transform:translate3d(0,112%,0);transition:transform 1.15s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--d0,0s) + var(--i,0) * .13s)}
html.fx .split-t.on .ln-i{transform:none}

/* párrafos y tarjetas: fundido y subida corta, una vez */
html.fx .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),background-color .2s,color .2s,border-color .2s;transition-delay:var(--d,0s),var(--d,0s),0s,0s,0s}
html.fx .rv.in{opacity:1;transform:none}

/* opiniones: cambio con fundido */
html.fx .quote p.d,html.fx .quote .who{transition:opacity .45s ease}
html.fx .quote.fade p.d,html.fx .quote.fade .who{opacity:0}

@media (max-width:900px){
 header.top.scrolled{padding-top:10px;padding-bottom:10px}
 header.top.scrolled .logo img{height:50px}
 html.fx .rv{transform:translate3d(0,16px,0)}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .px{transform:none!important;animation:none!important;transition:none!important;scale:none!important}
 .rv,.ln-i,header.top *{opacity:1!important;transform:none!important;animation:none!important}
 header.top{transition:none}
}

/* ===== v3: precios, reservas, galería ===== */
.price small:first-child{order:0}
.pdet{font-size:13px;color:var(--mut);letter-spacing:.04em;margin:-12px 0 26px}
.tnote{padding:34px 56px 0;font-size:13px;color:var(--mut)}
.place .tx .ptx{font-size:16px;line-height:1.7;color:#cfc9c0;max-width:440px}
.ptx-l{font-size:20px;line-height:1.7;color:#333;margin-bottom:30px}
.rsv-lead{font-size:17px;line-height:1.7;color:#333;max-width:620px;margin-bottom:40px}
.rsv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:980px}
.rsv-box{display:block;background:#fff;padding:34px 36px;border:1px solid transparent;transition:border-color .2s}
.rsv-box:hover{border-color:var(--ink)}
.rsv-box small{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.rsv-box .d{font-size:64px}
.rsv-mail{font-size:20px;font-weight:400;word-break:break-all}
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:14px}
.gal a{display:block;overflow:hidden;position:relative;background:#ddd}
.gal img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s cubic-bezier(.2,.7,.2,1)}
.gal a:hover img{scale:1.05}
.gal a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.gal .g1{grid-column:span 2;grid-row:span 2}
.gal .g4{grid-row:span 2}
.gal .g8{grid-column:span 2}
.lb{position:fixed;inset:0;z-index:60;background:rgba(10,10,10,.94);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 80px}
.lb img{max-width:100%;max-height:82vh;object-fit:contain}
.lb figcaption{color:#bdb7ae;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font-size:46px;line-height:1;padding:12px 18px;opacity:.8}
.lb button:hover{opacity:1}
.lb-x{top:14px;right:16px;font-size:38px!important}
.lb-p{left:10px;top:50%;transform:translateY(-50%)}
.lb-n{right:10px;top:50%;transform:translateY(-50%)}
@media (max-width:900px){
 .tnote{padding:26px 20px 0}
 .rsv-grid{grid-template-columns:1fr}.rsv-box{padding:26px 22px}.rsv-box .d{font-size:52px}.rsv-mail{font-size:17px}
 .gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:8px}
 .gal .g1{grid-column:span 2;grid-row:span 2}.gal .g4{grid-row:span 1}.gal .g8{grid-column:span 2}
 .lb figure{padding:0 12px}.lb-p,.lb-n{top:auto!important;bottom:18px;transform:none!important}
 .gal-s h2.d{font-size:54px!important}
}
@media (prefers-reduced-motion:reduce){.gal img{transition:none}}