/* ═══════════ Can Roque Formentera ═══════════ */
:root{
  --sand:#efe6d8;
  --sand-2:#e6dac7;
  --ink:#2a241c;
  --ink-soft:#5d5449;
  --white:#fdfbf7;
  --accent:#b98d5f;
  --serif:"Fraunces",serif;
  --sans:"Inter",system-ui,sans-serif;
  --gutter:clamp(24px,5vw,80px);
}
*{margin:0;padding:0;box-sizing:border-box}
html.lenis{height:auto}
body{
  font-family:var(--sans);
  background:var(--sand);
  color:var(--ink);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%}
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
.zoomable{cursor:zoom-in}

/* ─────────── Loader ─────────── */
.loader{
  position:fixed;inset:0;z-index:100;
  background:var(--sand);
}
.loader-logo{
  position:absolute;top:50%;left:50%;
  width:min(380px,64vw);
  transform:translate(-50%,-50%);
  opacity:0;
}
.loader-hairline{
  position:absolute;top:calc(50% + min(200px,36vw));left:50%;
  width:min(220px,40vw);height:1px;background:var(--ink);
  transform:translateX(-50%) scaleX(0);transform-origin:center;
}
.loader-progress{
  position:absolute;top:calc(50% + min(224px,40vw));left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.35em;color:var(--ink-soft);
}

/* ─────────── Nav ─────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter);
  transition:background .5s ease, box-shadow .5s ease, padding .5s ease;
}
.nav.is-solid{background:rgba(239,230,216,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(42,36,28,.08);padding:12px var(--gutter)}
.nav-side{display:flex;align-items:center;gap:28px}
.nav-link{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);
  opacity:0;cursor:pointer;transition:opacity .3s;position:relative;
}
.nav.is-solid .nav-link{color:var(--ink)}
.nav-link:hover{opacity:.65 !important}
.nav-cta{border:1px solid currentColor;border-radius:99px;padding:8px 18px}
.wordmark{opacity:0;line-height:0}
.wordmark-img{height:54px;width:auto;transition:opacity .4s}
.wordmark-b{display:none}
.nav.is-solid .wordmark-w{display:none}
.nav.is-solid .wordmark-b{display:block}
.lang-toggle{display:flex;align-items:center;gap:4px;color:var(--white)}
.nav.is-solid .lang-toggle{color:var(--ink)}
.lang-btn{
  background:none;border:none;cursor:pointer;color:inherit;
  font:inherit;font-size:12px;letter-spacing:.15em;opacity:.55;padding:4px 2px;
}
.lang-btn.is-active{opacity:1;border-bottom:1px solid currentColor}
.lang-sep{opacity:.4;font-size:11px}

/* ─────────── Hero ─────────── */
.hero{position:relative;height:100vh;height:100svh;overflow:hidden;background:#d8ccb8}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%}

/* intro estática */
.intro{background:var(--sand);padding:clamp(90px,12vw,160px) 0}
.intro-inner{max-width:820px;margin:0 auto;text-align:center}
.intro-body{color:var(--ink-soft);font-size:17px;max-width:56ch;margin:0 auto}

/* ─────────── Cinema ─────────── */
.cinema{position:relative}
.cinema-a{height:300vh}
.cinema-c{height:500vh}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--sand);
}
.panel{
  position:absolute;top:0;left:0;width:100%;height:100%;
  padding:0;border-radius:0;
  border:1px solid rgba(42,36,28,0);
  overflow:hidden;
}
.media{position:relative;width:100%;height:100%;border-radius:0;overflow:hidden;background:#d8ccb8}
.media-item{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:opacity;
}
.media-item.is-on{opacity:1}
.media-veil{position:absolute;inset:0;background:#14100a;opacity:0;pointer-events:none;z-index:3}

/* hero copy */
.hero-copy{
  position:absolute;inset:0;z-index:5;
  text-align:center;pointer-events:none;
  background:linear-gradient(rgba(20,16,10,.18),rgba(20,16,10,.30));
}
.hero-logo{
  position:absolute;top:50%;left:50%;
  width:min(380px,64vw);
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.25));
}
.hero-scroll{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  color:var(--white);font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.85;
}
.hero-scroll::after{
  content:"";display:block;width:1px;height:34px;background:var(--white);
  margin:10px auto 0;animation:drip 2s ease-in-out infinite;
}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* escena B — sección separada */
.scene-b{background:var(--white)}
.grid-sceneb{align-items:center}
.scene-b-media{aspect-ratio:4/5;max-width:480px}
.scene-b .txt p:not(.eyebrow){color:var(--ink-soft)}

/* cinematic copy */
.copy{position:absolute;z-index:6;pointer-events:none}
.copy-left{
  top:50%;transform:translateY(-50%);
  left:var(--gutter);width:min(460px,40vw);
}
.copy-center{
  inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;padding:0 var(--gutter);
}
.copy-center .pill{pointer-events:auto}
.copy > *{opacity:0;visibility:hidden}
.eyebrow{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
  margin-bottom:14px;font-weight:400;
}
.copy .title{
  font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,42px);
  line-height:1.14;margin-bottom:18px;letter-spacing:-.01em;
}
.title-light{color:var(--white);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.eyebrow-light{color:var(--sand);text-shadow:0 1px 10px rgba(0,0,0,.4);margin:0}
.copy .body{font-size:14.5px;color:var(--ink-soft);max-width:46ch}
.copy .subtext{color:var(--white);font-size:16px;text-shadow:0 1px 14px rgba(0,0,0,.4);max-width:46ch}
.pill{
  display:inline-block;margin-top:16px;
  border:1px solid var(--white);border-radius:99px;color:var(--white);
  padding:14px 34px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  background:rgba(253,251,247,.06);backdrop-filter:blur(4px);
  cursor:pointer;transition:background .35s,color .35s;
}
.pill:hover{background:var(--white);color:var(--ink)}
.pill-dark{border-color:var(--ink);color:var(--ink);background:none}
.pill-dark:hover{background:var(--ink);color:var(--sand)}
.pill-sm{padding:9px 22px;margin-top:0}

/* ─────────── Sections ─────────── */
.section{padding:clamp(80px,11vw,150px) 0;position:relative}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
.flip .ph{order:2}
.sec-head{max-width:720px;margin-bottom:clamp(40px,6vw,80px)}
.sec-head-center{margin-left:auto;margin-right:auto;text-align:center}
.sec-sub{color:var(--ink-soft);margin-top:18px}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,50px);line-height:1.1;letter-spacing:-.01em;margin-bottom:22px}
.sec-head .h2{margin-bottom:0}
.h2-light{color:var(--white);text-shadow:0 2px 24px rgba(0,0,0,.4)}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.12;margin-bottom:16px}
.h4{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.18;margin:18px 0 8px}
.txt p{margin-bottom:14px;color:var(--ink-soft)}
.ph{overflow:hidden;border-radius:14px}
.ph img,.ph video{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.ph:hover img{transform:scale(1.045)}
.firma{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);margin-top:22px}

.historia{background:var(--sand)}
.grid-hist{align-items:start;grid-template-columns:0.75fr 1.25fr}
.ph-hist{aspect-ratio:4/5;position:sticky;top:110px}

.detalle{background:var(--white)}
.feature{margin-bottom:clamp(56px,8vw,110px)}
.feature:last-child{margin-bottom:0}
.feature .ph{aspect-ratio:4/3}
.feature.grid-2{align-items:start}
.feature.grid-2 .ph{position:sticky;top:110px}
.feature-full .ph{aspect-ratio:21/9;margin-bottom:clamp(26px,3.5vw,44px)}
.feature-full .txt{max-width:none}
.feature-full .txt p:not(.eyebrow){max-width:75ch}
.txt-cols .h3{margin-bottom:20px}
.ph-tall{aspect-ratio:16/9 !important}
@media (min-width:901px){
  .colflow{columns:2;column-gap:clamp(30px,4vw,56px)}
  .colflow p{max-width:none !important}
  .colflow p:last-child{margin-bottom:0}
}

/* rooms */
.rooms{background:var(--sand)}
.rooms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.room{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:3/4;cursor:pointer}
.room img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.room:hover img{transform:scale(1.06)}
.room figcaption{
  position:absolute;top:14px;left:16px;
  font-family:var(--serif);font-size:15px;color:var(--white);
  letter-spacing:.12em;text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.room-hint{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--white);text-align:center;
  background:linear-gradient(transparent,rgba(20,16,10,.55));
  opacity:0;transition:opacity .4s;
}
.room:hover .room-hint{opacity:1}
.specs{
  display:flex;flex-wrap:wrap;gap:10px 30px;list-style:none;
  color:var(--ink-soft);font-size:14px;
}
.specs li::before{content:"·";color:var(--accent);margin-right:10px;font-weight:600}

/* bands */
.band{
  min-height:64vh;position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.band-tall{min-height:100vh;padding:clamp(80px,10vw,140px) 0}
.band-parallax{background-size:cover;background-position:center 30%;background-attachment:fixed}
@media (hover:none){.band-parallax{background-attachment:scroll}}
.band-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.band::before{content:"";position:absolute;inset:0;background:rgba(24,19,12,.38);z-index:1}
.band-inner{position:relative;z-index:2;padding:0 var(--gutter);max-width:860px;text-align:center}
.band-inner-wide{max-width:900px}
.band-quote{
  font-family:var(--serif);font-size:clamp(24px,3.4vw,42px);line-height:1.25;color:var(--white);
  text-shadow:0 2px 22px rgba(0,0,0,.4);
}
.band-body{
  color:rgba(253,251,247,.92);font-size:15px;line-height:1.8;margin-top:26px;
  text-shadow:0 1px 12px rgba(0,0,0,.45);text-align:left;
}

/* tesoro */
.tesoro{background:var(--white)}
.tesoro .grid-2{align-items:start}
.tesoro-media .ph{aspect-ratio:4/5}
.tesoro-wide{aspect-ratio:16/9;margin-top:clamp(26px,3.5vw,44px)}
.tesoro-wide img{object-position:50% 50%}

/* experiencias */
.exp{background:var(--sand)}
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px)}
.card .ph{aspect-ratio:4/3;border-radius:12px}
.card p{color:var(--ink-soft);font-size:15px;max-width:56ch}

/* galería — rejilla uniforme: siempre completa, sin huecos */
.galeria{background:var(--white)}
.masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.masonry img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:10px}

/* ubicación */
.ubicacion{background:var(--sand)}
.map-big{
  max-width:1000px;margin:0 auto;border-radius:16px;overflow:hidden;
  background:var(--white);box-shadow:0 8px 40px rgba(42,36,28,.08);
}
.map-big img{width:100%}
.map-foot{max-width:760px;margin:clamp(30px,4vw,50px) auto 0;text-align:center;color:var(--ink-soft)}
.addr{font-style:normal;line-height:1.9;margin-top:16px}
.coords{font-size:12px;letter-spacing:.14em;color:var(--accent)}

/* reserva */
.reserva{background:var(--sand-2)}
.form{max-width:760px;margin:0 auto}
.reserva .check{justify-content:center}
.reserva .pill-dark{display:block;margin:18px auto 0;width:fit-content}
.reserva .form-ok,.reserva .form-err{text-align:center}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.row-ages{grid-template-columns:repeat(3,1fr) !important}
.form label{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.form input,.form select,.form textarea{
  font:15px/1.5 var(--sans);font-weight:300;color:var(--ink);
  background:var(--white);border:1px solid rgba(42,36,28,.16);border-radius:10px;
  padding:13px 15px;outline:none;transition:border-color .3s;
}
.form input:focus,.form select:focus{border-color:var(--accent)}
.form .invalid{border-color:#b3423a}
.check{
  flex-direction:row !important;align-items:center;gap:12px !important;
  text-transform:none !important;letter-spacing:0 !important;font-size:14px !important;
  cursor:pointer;
}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.check a{text-decoration:underline}
.form-note{font-size:13px;color:var(--ink-soft);margin-top:16px}
.form-ok{margin-top:16px;color:#2c6e49;font-size:15px}
.form-err{margin-top:16px;color:#b3423a;font-size:14px}

/* footer */
.footer{
  background:var(--sand);text-align:center;padding:70px var(--gutter) 46px;
  border-top:1px solid rgba(42,36,28,.09);
}
.footer-logo{width:150px;margin:0 auto 18px}
.footer-line{font-size:13px;color:var(--ink-soft)}
.footer-mail{font-size:14px;color:var(--ink);border-bottom:1px solid rgba(42,36,28,.3)}
.footer-legal{display:flex;gap:26px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.footer-legal a{font-size:12px;letter-spacing:.08em;color:var(--ink-soft);border-bottom:1px solid transparent;transition:border-color .3s}
.footer-legal a:hover{border-color:var(--ink-soft)}
.footer-copy{font-size:11px;letter-spacing:.14em;color:var(--ink-soft);margin-top:22px;opacity:.7}

/* ─────────── Lightbox ─────────── */
.lightbox{
  position:fixed;inset:0;z-index:90;background:rgba(20,16,10,.93);
  display:flex;align-items:center;justify-content:center;
}
.lb-img{max-width:min(92vw,1400px);max-height:88vh;object-fit:contain;border-radius:6px}
.lb-close,.lb-prev,.lb-next{
  position:absolute;background:none;border:none;color:var(--sand);cursor:pointer;
  font-family:var(--sans);font-weight:300;line-height:1;opacity:.8;transition:opacity .3s;z-index:2;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{opacity:1}
.lb-close{top:22px;right:30px;font-size:40px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%);font-size:56px;padding:20px}
.lb-next{right:18px;top:50%;transform:translateY(-50%);font-size:56px;padding:20px}

/* ─────────── Room modal ─────────── */
.modal{
  position:fixed;inset:0;z-index:85;background:rgba(20,16,10,.6);
  display:flex;align-items:center;justify-content:center;padding:4vh var(--gutter);
}
.modal-card{
  background:var(--white);border-radius:18px;max-width:1040px;width:100%;
  max-height:92vh;overflow-y:auto;position:relative;
}
.modal-close{
  position:sticky;top:14px;margin-left:calc(100% - 58px);
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(42,36,28,.75);color:var(--sand);font-size:24px;line-height:1;z-index:3;
}
.modal-gallery{
  display:grid;grid-template-columns:2fr 1fr;gap:10px;
  padding:0 22px;margin-top:-26px;
}
.modal-gallery img{width:100%;height:100%;object-fit:cover;border-radius:10px;cursor:zoom-in}
.modal-gallery img:first-child{grid-row:span 2;aspect-ratio:4/5}
.modal-gallery img:not(:first-child){aspect-ratio:4/3}
.modal-body{padding:30px clamp(22px,4vw,46px) 42px}
.modal-body p{color:var(--ink-soft);margin:0 0 20px}
.modal-body .specs{margin-top:4px;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}

/* ─────────── Cookies ─────────── */
.cookies{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:95;
  background:var(--white);border:1px solid rgba(42,36,28,.14);border-radius:14px;
  box-shadow:0 10px 40px rgba(42,36,28,.18);
  max-width:640px;width:calc(100% - 40px);
  padding:18px 22px;display:flex;align-items:center;gap:18px;
}
.cookies p{font-size:13px;color:var(--ink-soft);line-height:1.5;flex:1}
.cookies a{text-decoration:underline}

/* reveals */
.reveal{opacity:0;transform:translateY(34px)}

/* ─────────── Legal pages ─────────── */
.legal-page{background:var(--sand);min-height:100vh}
.legal-wrap{max-width:820px;margin:0 auto;padding:140px var(--gutter) 90px}
.legal-wrap h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,46px);line-height:1.1;margin-bottom:34px}
.legal-wrap h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:34px 0 12px}
.legal-wrap p,.legal-wrap li{color:var(--ink-soft);font-size:15px;margin-bottom:12px}
.legal-wrap ul{padding-left:22px;margin-bottom:12px}
.legal-back{display:inline-block;margin-bottom:30px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

/* ─────────── Responsive ─────────── */
@media (max-width:900px){
  .nav-left{display:none}
  .nav-right .nav-link:not(.nav-cta){display:none}
  .wordmark-img{height:40px}
  .copy-left{
    top:auto;bottom:4vh;transform:none;
    left:var(--gutter);right:var(--gutter);width:auto;
  }
  .copy .title{font-size:21px;margin-bottom:10px}
  .copy .eyebrow{margin-bottom:8px}
  .copy .body{font-size:13px;max-width:none;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .grid-2{grid-template-columns:1fr}
  .flip .ph{order:0}
  .ph-hist,.feature.grid-2 .ph,.feature .ph{position:static !important}
  .scene-b-media{aspect-ratio:3/4;max-width:none}
  .feature-full .ph,.ph-tall{aspect-ratio:4/3 !important}
  .rooms-grid{grid-template-columns:1fr 1fr}
  .exp-grid{grid-template-columns:1fr}
  .masonry{grid-template-columns:1fr 1fr}
  .form .row{grid-template-columns:1fr 1fr}
  .row-ages{grid-template-columns:1fr 1fr !important}
  .modal-gallery{grid-template-columns:1fr;margin-top:-20px}
  .modal-gallery img:first-child{grid-row:auto;aspect-ratio:4/3}
  .modal-body .specs{grid-template-columns:1fr}
  .tesoro-media{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .masonry{grid-template-columns:1fr}
  .rooms-grid{grid-template-columns:1fr 1fr}
  .form .row{grid-template-columns:1fr}
  .cookies{flex-direction:column;align-items:flex-start}
}