:root{
  --navy:#12203d;
  --navy-2:#1b2d52;
  --cream:#f3ebdd;
  --paper:#ece1cf;
  --clay:#a34a2c;
  --sand:#e8cbb6;
  --peach:#f0d9c8;
  --ink:#1c2233;
  --serif:'Bodoni Moda',Georgia,serif;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --sans:'Figtree',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px}

/* progreso */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60}
.progress span{display:block;height:100%;width:100%;background:var(--clay);transform-origin:left;transform:scaleX(0)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,4vw,3rem);color:var(--cream);transition:background .4s,padding .4s}
.nav.is-solid{background:rgba(18,32,61,.94);backdrop-filter:blur(8px);padding-block:.7rem}
.nav__brand{font-family:var(--serif);font-size:1.25rem;text-decoration:none}
.nav__links{display:flex;gap:1.8rem;font-size:.95rem}
.nav__links a{text-decoration:none;opacity:.85}
.nav__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-block;background:var(--clay);color:#fff;text-decoration:none;padding:.75rem 1.6rem;border-radius:999px;font-weight:600;transition:transform .3s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px);background:#8d3d22}
.btn--small{padding:.55rem 1.2rem;font-size:.9rem}

/* hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--navy);color:var(--cream)}
.hero__img{position:absolute;inset:0;will-change:transform}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.15);animation:settle 2.4s var(--ease) forwards}
@keyframes settle{to{transform:scale(1)}}
.hero__shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(18,32,61,.35),rgba(18,32,61,0) 30%,rgba(18,32,61,.55) 70%,var(--navy))}
.hero__text{position:absolute;inset:auto 0 12svh 0;text-align:center;padding:0 1rem;will-change:transform,opacity}
.hero__place{font-size:1rem;letter-spacing:.12em;color:var(--sand);margin-bottom:.8rem;opacity:0;animation:up 1s .5s var(--ease) forwards}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.6rem,13vw,10rem);line-height:.92;color:var(--peach);opacity:0;animation:up 1.2s .7s var(--ease) forwards}
.hero__tag{margin-top:1.4rem;font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:.14em;opacity:0;animation:up 1s 1.1s var(--ease) forwards}
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero__scroll{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.8rem;letter-spacing:.2em;opacity:.8}
.hero__scroll span{width:1px;height:38px;background:var(--cream);transform-origin:top;animation:line 1.8s infinite}
@keyframes line{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* intro */
.intro{background:var(--navy);color:var(--cream);text-align:center;padding:14vh 1.2rem 16vh}
.intro__title{font-family:var(--cond);font-weight:700;text-transform:uppercase;line-height:.9;font-size:clamp(4rem,19vw,17rem);color:var(--clay);display:flex;flex-wrap:wrap;justify-content:center;gap:0 .25em;overflow:hidden}
.intro__title .w{display:inline-flex}
.intro__title .c{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*45ms)}
.intro__title.in .c{transform:none}
.intro__copy{max-width:34rem;margin:3rem auto 0;font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.4;color:var(--peach)}

/* vigia */
.vigia{background:var(--cream)}
.vigia__inner{display:grid;grid-template-columns:1fr 1fr;max-width:1300px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}
.vigia__item{min-height:85vh;display:flex;flex-direction:column;justify-content:center;padding-right:clamp(1rem,4vw,4rem);opacity:.25;transition:opacity .6s}
.vigia__item.is-on{opacity:1}
.vigia__item h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,5vw,4.2rem);line-height:1;color:var(--navy);margin-bottom:1.2rem}
.vigia__item p{max-width:28rem;font-size:1.15rem;color:#3b4258}
.vigia__mob{display:none}
.vigia__stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem}
.vigia__frame{position:relative;width:min(100%,520px);aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--paper);box-shadow:0 30px 60px -25px rgba(18,32,61,.55)}
.vigia__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.2);transition:clip-path 1s var(--ease),transform 1.4s var(--ease)}
.vigia__frame img.is-on{clip-path:inset(0);transform:scale(1);z-index:2}
.vigia__frame img.was{clip-path:inset(0);z-index:1}
.vigia__dots{display:flex;gap:.6rem}
.vigia__dots i{width:9px;height:9px;border-radius:50%;background:var(--sand);transition:.4s}
.vigia__dots i.is-on{background:var(--clay);transform:scale(1.4)}

/* section head */
.section-head{text-align:center;padding:0 1.2rem}
.section-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,8vw,6rem);line-height:1;color:var(--navy)}
.section-head p{margin-top:1rem;color:var(--clay);font-size:1.1rem}

/* rooms */
.rooms{padding:14vh 0 8vh;background:var(--cream)}
.room{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:clamp(1.5rem,5vw,5rem);max-width:1300px;margin:12vh auto 0;padding:0 clamp(1rem,4vw,3rem)}
.room--flip{grid-template-columns:1fr 1.25fr}
.room--flip .room__media{order:2}
.room__media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:var(--paper)}
.room__media img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;will-change:transform}
.room h3{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--clay);line-height:1.05}
.room__price{font-family:var(--cond);font-weight:600;font-size:clamp(2rem,4vw,3rem);color:var(--navy);margin:.4rem 0 1.2rem}
.room__price small{font-size:1.1rem;font-weight:500;color:#5a6076}
.room ul{list-style:none;display:grid;gap:.5rem;margin-bottom:1.3rem}
.room li{padding-left:1.3rem;position:relative}
.room li::before{content:"";position:absolute;left:0;top:.7em;width:.6rem;height:2px;background:var(--clay)}
.room li.no{color:#8b6a5c;text-decoration:line-through;text-decoration-color:rgba(163,74,44,.45)}
.room__note{color:#4a5066;max-width:26rem}
.room__incl{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}
.room__incl strong{width:100%;font-family:var(--cond);font-size:1.1rem;color:var(--navy);letter-spacing:.06em;text-transform:uppercase}
.room__incl span{background:var(--navy);color:var(--cream);padding:.35rem .9rem;border-radius:999px;font-size:.92rem}
.room__meta{font-size:.95rem;color:#5a6076}

/* cocina */
.cocina{background:var(--navy);color:var(--cream);padding:14vh 0 16vh;position:relative}
.cocina__head{text-align:center;padding:0 1.2rem 8vh}
.cocina__kicker{color:var(--sand);font-size:1rem;letter-spacing:.1em}
.cocina h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(3rem,9vw,7rem);color:var(--sand);line-height:1.05;margin:.4rem 0 1rem}
.cocina__head p:last-child{max-width:30rem;margin:0 auto;color:#cdd3e2}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,6rem);max-width:1100px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}
.menu__col{display:grid;gap:9vh;align-content:start}
.menu__col--drinks{padding-top:16vh}
.dish{will-change:transform;text-align:center}
.dish img{width:100%;max-width:340px;margin:0 auto 1rem;border-radius:18px;transition:transform .8s var(--ease);-webkit-mask-image:radial-gradient(ellipse at center,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse at center,#000 60%,transparent 100%)}
.dish:hover img{transform:scale(1.05) rotate(-1.5deg)}
.dish h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;color:var(--peach);display:flex;justify-content:center;gap:.8rem;align-items:baseline;flex-wrap:wrap}
.dish h3 b{font-family:var(--cond);font-weight:600;font-size:1.4rem;color:var(--sand)}
.dish p{max-width:22rem;margin:.4rem auto 0;color:#cdd3e2;font-size:1rem}

/* tarifas */
.tarifas{background:var(--peach);padding:14vh clamp(1rem,4vw,3rem) 10vh}
.table-wrap{max-width:960px;margin:8vh auto 0;overflow-x:auto;background:var(--cream);border-radius:10px;box-shadow:0 20px 40px -25px rgba(18,32,61,.4)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:1.1rem 1.2rem;text-align:center;border-bottom:1px solid rgba(18,32,61,.12)}
thead th{font-family:var(--cond);font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--paper)}
tbody th{text-align:left;font-family:var(--cond);font-size:1.5rem;color:var(--navy)}
tbody td:nth-child(2){font-family:var(--cond);font-weight:700;font-size:1.7rem;color:var(--clay)}
td.y{color:#2c7a4b;font-weight:600}
td.n{color:#8f8579}
tbody tr:last-child>*{border-bottom:0}
.promos__title{font-family:var(--cond);font-weight:700;text-transform:uppercase;text-align:center;font-size:clamp(2rem,5vw,3.2rem);color:var(--clay);margin:12vh 0 3rem}
.promos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1050px;margin:0 auto}
.promo{background:var(--cream);border:2px solid var(--navy);border-radius:10px;padding:2rem 1.5rem;text-align:center;transition:transform .5s var(--ease)}
.promo:hover{transform:translateY(-8px) rotate(-.6deg)}
.promo h4{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:2rem;line-height:1;color:var(--clay)}
.promo__what{margin:.7rem 0;font-weight:600;color:var(--navy)}
.promo__price{font-family:var(--cond);font-weight:700;font-size:3.4rem;line-height:1;color:var(--navy)}
.promo__desc{margin-top:.8rem;color:#4a5066;font-size:.98rem}
.fine{text-align:center;margin-top:3rem;font-size:.85rem;color:#6b5f55}

/* cierre */
.close{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;color:var(--cream);text-align:center;background:var(--navy)}
.close__img{position:absolute;inset:-10% 0;will-change:transform}
.close__img img{width:100%;height:100%;object-fit:cover}
.close__shade{position:absolute;inset:0;background:rgba(18,32,61,.72)}
.close__body{position:relative;padding:12vh 1.2rem;display:grid;gap:1rem;justify-items:center}
.close__thanks{font-family:var(--serif);font-style:italic;font-size:clamp(2.4rem,7vw,5.5rem);color:var(--peach);line-height:1.1}
.close h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem)}
.close__contact{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2rem;margin-top:1.4rem;font-size:1.05rem}
.close__contact a{text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(232,203,182,.5)}
.close__contact a:hover{text-decoration-color:var(--sand)}
.close__small{margin-top:2rem;font-size:.9rem;color:#b8c0d4}

/* reveals */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-img{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--ease)}
.room--flip .reveal-img{clip-path:inset(0 0 0 100%)}
.reveal-img.in{clip-path:inset(0)}

/* responsive */
@media(max-width:860px){
  .nav__links{display:none}
  .vigia__inner{grid-template-columns:1fr}
  .vigia__stage{display:none}
  .vigia__item{min-height:auto;padding:9vh 0;opacity:1}
  .vigia__mob{display:block;width:100%;margin-top:1.6rem;border-radius:10px;aspect-ratio:4/3;object-fit:cover}
  .room,.room--flip{grid-template-columns:1fr;margin-top:9vh}
  .room--flip .room__media{order:0}
  .menu{grid-template-columns:1fr}
  .menu__col--drinks{padding-top:0;margin-top:9vh}
  .promos{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal-img,.intro__title .c{opacity:1;transform:none;clip-path:none}
  .hero__img img{transform:none}
  .hero__place,.hero h1,.hero__tag{opacity:1}
}