/* =========================================================
   Inesperado · restaurante al mar
   Arena, café tostado y un horizonte: el marco del logo y el
   sol sobre la línea (la "O" del logo) mandan en todo.
   ========================================================= */
:root{
  --paper:#f4ece2;
  --paper-2:#ebe0d2;
  --ink:#3a2a20;
  --ink-2:#5a463a;
  --deep:#2a1e17;
  --mute:#8c7767;
  --ghost:#d8c9b8;
  --sun:#e4904a;
  --line:rgba(58,42,32,.16);
  --line-light:rgba(244,236,226,.22);
  --sans:"Josefin Sans","Futura","Avenir Next",system-ui,sans-serif;
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --gutter:clamp(1rem,4vw,3.5rem);
  --max:1320px;
  --nav-h:84px;
  --arch:999px 999px 0 0;
  /* muelle críticamente amortiguado (Apple: damping 1, response .4) */
  --spring:linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.6%, 1.043 24.3%, 1.035 28.9%, 1.007 41.2%, .998 55.9%, 1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --t0:1.15s; /* cuándo entra el hero: justo al abrirse la entrada */
}
@supports not (transition-timing-function:linear(0,1)){
  :root{--spring:cubic-bezier(.22,1,.36,1)}
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 56px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.08rem/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overflow-x:clip;
}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em{font-family:var(--serif);font-style:italic;font-weight:400}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* etiqueta con puntos, como «· RESTAURANTE AL MAR BY PG ·» */
.eyebrow{
  margin:0 0 1.2rem;font-size:.74rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.9em;color:var(--ink);line-height:1;padding-top:.2em;
}
.eyebrow--dots::before,.eyebrow--dots::after{
  content:"";width:2.6em;height:.5em;position:relative;top:-.1em;
  background:linear-gradient(currentColor,currentColor) left center/calc(100% - .9em) 1px no-repeat,
             radial-gradient(circle,currentColor 0 1.6px,transparent 2.2px) right center/.5em .5em no-repeat;
}
.eyebrow--dots::after{transform:scaleX(-1)}
.eyebrow--light{color:var(--paper)}

.display{
  margin:0;font-weight:300;text-transform:uppercase;
  font-size:clamp(2.1rem,5.2vw,4.7rem);line-height:1.04;letter-spacing:.04em;
}
.display em{display:inline-block;margin-top:.12em;text-transform:none;font-size:1.12em;letter-spacing:0;line-height:.95;font-weight:500}

.section-head{max-width:var(--max);margin:0 auto clamp(2.5rem,6vw,4.5rem);padding:0 var(--gutter)}
.section-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}

/* ---------- botones: cápsula con sombra sólida que se despega al pasar ---------- */
.btn{
  --bg:var(--paper);--fg:var(--ink);--bd:var(--ink);--sh:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1.08em 2em .92em;border-radius:10em;border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);text-decoration:none;cursor:pointer;
  font-family:var(--sans);font-size:17px;font-weight:600;line-height:1;letter-spacing:.02em;
  box-shadow:0 0 0 0 var(--sh);
  transition:transform .3s ease-in-out,box-shadow .3s ease-in-out,background-color .3s ease-in-out,color .3s ease-in-out;
}
@media (hover:hover){
  .btn:hover{transform:translateY(-4px) translateX(-2px);box-shadow:2px 5px 0 0 var(--sh)}
}
.btn:active{transform:translateY(2px) translateX(1px);box-shadow:0 0 0 0 var(--sh);transition-duration:.1s}
.btn--clear{--bg:transparent}
/* sobre fondo oscuro: el papel con sombra de sol; el secundario, en línea clara */
.hero .btn,.reserva .btn{--bd:var(--paper);--sh:var(--sun)}
.hero .btn--clear,.reserva .btn--clear{--fg:var(--paper);--sh:var(--paper)}

/* la marca: el sol sobre la línea */
.mk{width:30px;height:36px;color:var(--ink)}

/* =========================================================
   SPLASH · el logo se dibuja y la pantalla se cierra en un horizonte
   ========================================================= */
.splash{
  --lw:min(84vw,720px);
  position:fixed;inset:0;z-index:100;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;
  clip-path:inset(0 0 0 0);
  animation:splashOut .7s cubic-bezier(.7,0,.2,1) 1s forwards;
}
.splash::after{ /* el horizonte que queda al cerrarse */
  content:"";position:absolute;left:0;right:0;top:calc(50% + var(--lw) * .0463);height:1px;background:var(--ink);
  -webkit-mask:linear-gradient(90deg,#000 calc(50% - var(--lw) * .3068),transparent 0 calc(50% + var(--lw) * .3068),#000 0);
          mask:linear-gradient(90deg,#000 calc(50% - var(--lw) * .3068),transparent 0 calc(50% + var(--lw) * .3068),#000 0);
  transform:scaleX(0);animation:horizon .5s var(--ease-out) .75s forwards;
}
.splash__logo{width:var(--lw);height:auto;overflow:visible;position:relative;z-index:1}
.splash__logo path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s var(--ease-out) forwards}
.splash__logo path:nth-child(1){animation-duration:.75s;animation-delay:0s}
.splash__logo path:nth-child(2){animation-delay:0.12s}
.splash__logo path:nth-child(3){animation-delay:0.15s}
.splash__logo path:nth-child(4){animation-delay:0.18s}
.splash__logo path:nth-child(5){animation-delay:0.21s}
.splash__logo path:nth-child(6){animation-delay:0.24s}
.splash__logo path:nth-child(7){animation-delay:0.27s}
.splash__logo path:nth-child(8){animation-delay:0.30s}
.splash__logo path:nth-child(9){animation-delay:0.33s}
.splash__logo path:nth-child(10){animation-delay:0.36s}
.splash__logo path:nth-child(11){animation-delay:0.39s}
.splash__sub{opacity:0;animation:fadeIn .35s ease .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
@keyframes horizon{to{transform:scaleX(1)}}
@keyframes splashOut{to{clip-path:inset(calc(50% + var(--lw) * .0463) 0 calc(50% - var(--lw) * .0463) 0);visibility:hidden}}
.splash.is-done{display:none}
/* segunda visita en la sesión o movimiento reducido: sin entrada, la web aparece ya */
.seen{--t0:.05s}
.seen .splash{display:none}
@media (prefers-reduced-motion:reduce){
  :root{--t0:0s}
  .splash{display:none}
}

/* =========================================================
   NAV · cápsula flotante centrada, de material translúcido
   (Apple: la barra flota sobre el contenido, que pasa por debajo)
   ========================================================= */
.nav{
  position:fixed;top:14px;left:0;right:0;z-index:50;
  display:flex;justify-content:center;padding:0 var(--gutter);pointer-events:none;
  transition:transform .55s var(--spring),opacity .35s ease;
}
.nav.is-hidden{transform:translateY(calc(-100% - 24px));opacity:0}
.nav__bar{
  pointer-events:auto;position:relative;display:flex;align-items:center;gap:clamp(1rem,2vw,1.8rem);
  height:56px;padding:0 8px 0 22px;border-radius:999px;max-width:100%;
  background:rgba(244,236,226,.62);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(58,42,32,.08),0 8px 24px -14px rgba(42,30,23,.35);
  transition:box-shadow .4s ease,background .4s ease;
}
/* al bajar, la cápsula gana cuerpo: más sombra = más separación del contenido */
.nav.is-scrolled .nav__bar{
  background:rgba(244,236,226,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(58,42,32,.1),0 18px 40px -16px rgba(42,30,23,.45);
}
.nav__brand{display:block;color:var(--ink);flex:none}
.nav__logo{width:150px;height:20px;--lgw:7px}
.nav__links{position:relative;display:flex;gap:0}
.nav__links a,.nav__cta{
  position:relative;z-index:1;
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  padding:.85rem .95rem .7rem;line-height:1;border-radius:999px;white-space:nowrap;
  transition:color .3s ease,transform .1s ease-out;
}
.nav__links a:active,.nav__cta:active{transform:scale(.96)}
/* indicador que viaja entre enlaces con un muelle */
.nav__ind{
  position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:999px;
  background:rgba(58,42,32,.09);opacity:0;
  transition:transform .5s var(--spring),width .5s var(--spring),opacity .3s ease;
}
.nav__ind.is-on{opacity:1}
.nav__cta{background:var(--ink);color:var(--paper);padding:.9rem 1.2rem .75rem}
.nav__cta:hover{background:var(--deep)}

/* Botón de Instagram (Uiverse.io, vinodjangid07), adaptado a la cápsula */
.Btn{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:none;
  border:none;background-color:transparent;position:relative;border-radius:7px;cursor:pointer;
  transition:all .3s;text-decoration:none;isolation:isolate;
}
.svgContainer{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background-color:transparent;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  letter-spacing:.8px;border-radius:10px;transition:all .3s;border:1px solid rgba(156,156,156,.466);
}
.svgIcon{width:1.25em;height:auto;fill:#fff}
.BG{
  position:absolute;content:"";inset:0;width:100%;height:100%;
  background:#f09433;
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  z-index:-1;border-radius:9px;pointer-events:none;transition:all .3s;
}
.Btn:hover .BG{transform:rotate(35deg);transform-origin:bottom}
.Btn:hover .svgContainer{background-color:rgba(156,156,156,.466)}
.Btn:active{transform:scale(.94);transition:transform .1s ease-out}
.Btn:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:10px}
.nav__burger{display:none;width:44px;height:44px;position:relative;border-radius:50%;flex:none}
.nav__burger:active{background:rgba(58,42,32,.08)}
.nav__burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);transition:transform .45s var(--spring)}
.nav__burger span:first-child{top:18px}
.nav__burger span:last-child{top:25px}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* el menú móvil nace del botón que lo abre y vuelve a él al cerrarse */
.sheet{
  --ox:50%;--oy:40px;
  position:fixed;inset:0;z-index:40;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--gutter);
  clip-path:circle(0px at var(--ox) var(--oy));visibility:hidden;
  transition:clip-path .6s cubic-bezier(.4,0,.2,1),visibility 0s .6s;
}
.sheet.is-open{clip-path:circle(150vmax at var(--ox) var(--oy));visibility:visible;transition:clip-path .65s cubic-bezier(.22,1,.36,1),visibility 0s}
.sheet nav{display:flex;flex-direction:column;gap:.5rem;align-items:center}
.sheet a{font-size:clamp(2rem,9vw,3rem);font-weight:300;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;line-height:1.2;
  opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .5s var(--spring)}
.sheet.is-open a{opacity:1;transform:none}
.sheet.is-open a:nth-child(2){transition-delay:.04s}.sheet.is-open a:nth-child(3){transition-delay:.08s}
.sheet.is-open a:nth-child(4){transition-delay:.12s}.sheet.is-open a:nth-child(5){transition-delay:.16s}
.sheet a:last-child{margin-top:1.5rem;font-size:.85rem;font-weight:600;letter-spacing:.24em}
.sheet__mark{width:34px;height:40px;margin-top:3rem;color:var(--ink)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  padding:calc(var(--nav-h) + 2rem) var(--gutter) clamp(4.5rem,11vh,7rem);
  display:grid;place-items:center;background:var(--deep);color:var(--paper);
}
/* el vídeo: fotos de la casa en bucle lento; mientras carga, su primer fotograma */
.hero__media{position:absolute;inset:0;z-index:-1;background:var(--deep) url(video/hero-poster.webp) center/cover no-repeat}
.hero__media video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero__media video.is-playing{opacity:1}
.hero__media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 58% at 50% 52%,rgba(42,30,23,.6),rgba(42,30,23,.22) 78%),
             linear-gradient(180deg,rgba(42,30,23,.5) 0%,rgba(42,30,23,.08) 28%,rgba(42,30,23,.1) 62%,rgba(42,30,23,.72) 100%)}
.hero__inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%;text-align:center}
.hero__title{--lw:min(88vw,860px);margin:.6rem auto 0;width:var(--lw);position:relative}
.hero__logo{width:100%;height:auto;aspect-ratio:1708/222;overflow:visible;color:var(--paper);filter:drop-shadow(0 2px 18px rgba(42,30,23,.35))}
/* la línea inferior del marco se prolonga hasta los bordes: el horizonte */
.hero__horizon{
  position:absolute;z-index:-1;left:50%;top:85.6%;width:100vw;height:1px;background:rgba(244,236,226,.55);
  -webkit-mask:linear-gradient(90deg,#000 calc(50% - var(--lw) * .3068),transparent 0 calc(50% + var(--lw) * .3068),#000 0);
          mask:linear-gradient(90deg,#000 calc(50% - var(--lw) * .3068),transparent 0 calc(50% + var(--lw) * .3068),#000 0);
  transform:translateX(-50%) scaleX(0);pointer-events:none;
  animation:horizonIn 1.6s var(--ease-out) calc(var(--t0) + .3s) forwards;
}
@keyframes horizonIn{to{transform:translateX(-50%) scaleX(1)}}
.hero__lede{
  margin:clamp(1.6rem,3.4vw,2.4rem) 0 0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.55rem,3vw,2.4rem);line-height:1.15;text-shadow:0 1px 20px rgba(42,30,23,.45);
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:1rem 1.1rem;justify-content:center;margin-top:clamp(2rem,4vw,2.8rem)}
.hero__toggle{position:absolute;right:var(--gutter);bottom:clamp(1.2rem,4vh,2.2rem);z-index:3}

/* entrada del hero tras el splash */
.hero__inner>*{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease-out) forwards}
.hero__title{animation-delay:var(--t0)!important;transform:none!important}
.hero__eyebrow{animation-delay:calc(var(--t0) + .12s)!important}
.hero__lede{animation-delay:calc(var(--t0) + .22s)!important}
.hero__ctas{animation-delay:calc(var(--t0) + .34s)!important}
@keyframes rise{to{opacity:1;transform:none}}

/* =========================================================
   MANIFIESTO · las frases se entintan con el scroll
   ========================================================= */
.manifesto{height:280vh;position:relative}
.manifesto__sticky{
  position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 var(--gutter);text-align:center;
}
.manifesto__text{margin:0;font-weight:300;text-transform:uppercase;font-size:clamp(1.7rem,4.9vw,4.1rem);line-height:1.12;letter-spacing:.04em}
.ml{display:block;color:var(--ghost);transition:color .5s ease}
.ml.is-ink{color:var(--ink)}
.manifesto__sign{margin:2.2rem 0 0;font-size:clamp(1.3rem,2.3vw,1.75rem);color:var(--mute)}
.mk--top{margin-bottom:clamp(1.5rem,5vh,3rem)}

/* botón de pausa de los vídeos */
.vtoggle{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(42,30,23,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(244,236,226,.3);transition:transform .12s ease-out,background .25s;
}
.vtoggle:hover{background:rgba(42,30,23,.65)}
.vtoggle:active{transform:scale(.94)}
.i-pause,.i-play{display:block;width:12px;height:14px;position:relative}
.i-pause{border-left:3px solid var(--paper);border-right:3px solid var(--paper)}
.i-play{width:0;height:0;border-left:12px solid var(--paper);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}

/* =========================================================
   CARTA
   ========================================================= */
.carta{padding:clamp(5rem,12vw,9rem) 0 clamp(4rem,9vw,7rem)}
.carta .section-head{text-align:center}
.seg{
  position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100% - 2 * var(--gutter),480px);
  margin:0 auto clamp(2.5rem,6vw,4rem);padding:5px;border-radius:999px;background:var(--paper-2);
  border:1px solid var(--line);
}
.seg__thumb{
  position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--ink);
  transition:transform .55s var(--spring);
}
.seg[data-on="1"] .seg__thumb{transform:translateX(100%)}
.seg__btn{
  position:relative;z-index:1;height:48px;border-radius:999px;padding-top:.2em;
  font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;transition:color .3s;
}
.seg__btn.is-on{color:var(--paper)}

.panel{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);
}
.panel[hidden]{display:none}
.panel.is-entering{animation:panelIn .6s var(--ease-out)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel__media{position:sticky;top:calc(var(--nav-h) + 2rem);align-self:start}
.stack{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);border-radius:var(--arch)}
.stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 1.2s var(--ease-out)}
.stack img.is-on{opacity:1;transform:scale(1)}
.panel__note{margin:1.1rem 0 0;font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--mute);text-align:center;transition:opacity .22s ease,transform .3s var(--ease-out)}
.panel__note.is-swap{opacity:0;transform:translateY(6px)}

.chips{
  position:sticky;top:var(--nav-h);z-index:5;display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;
  margin:0 calc(var(--gutter) * -1) 1.5rem;padding:.8rem var(--gutter);
  background:rgba(244,236,226,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
}
.chips::-webkit-scrollbar{display:none}
.chips a{
  flex:none;padding:.65rem 1rem .45rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;line-height:1.2;
  transition:background .25s,color .25s,border-color .25s;
}
.chips a.is-on,.chips a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.cat{padding:1.2rem 0 2.6rem}
.cat__t{
  margin:0 0 .5rem;font-weight:400;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(1.3rem,2.3vw,1.7rem);display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem;
}
.cat__script{text-transform:none;letter-spacing:0;font-size:1.12em;color:var(--mute)}
.cat__sub{margin:0 0 .8rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;color:var(--mute);font-size:1.2rem}
.cols{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;align-self:center}
.items{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.it{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  padding:.95rem 0 .8rem;border-bottom:1px solid var(--line);
}
.it__n{flex:1;min-width:0;line-height:1.35}
.it__n em{display:inline;margin-left:.35em;color:var(--mute);font-size:1.18em;line-height:1}
.it__p{flex:none;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.sweet{
  margin:1.6rem 0 0;padding:1.2rem 1.4rem;background:var(--ink);color:var(--paper);border-radius:2px;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
  font-family:var(--serif);font-style:italic;font-size:1.45rem;
}
.sweet__mk{width:22px;height:27px;color:var(--paper);flex:none}
.carta__foot{max-width:var(--max);margin:1rem auto 0;padding:0 var(--gutter);color:var(--mute);font-size:.92rem}

/* reveal general */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}

/* =========================================================
   DESTACADOS · carril arrastrable con inercia
   ========================================================= */
.picks{padding:clamp(4rem,9vw,7rem) 0;background:var(--deep);color:var(--paper);overflow:hidden}
.picks .eyebrow{color:var(--paper)}
.picks__nav{display:flex;gap:.6rem}
.round{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line-light);font-size:1.1rem;
  transition:background .25s,color .25s,transform .12s ease-out;
}
.round:hover{background:var(--paper);color:var(--ink)}
.round:active{transform:scale(.94)}
.rail{--edge:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));padding:0 var(--gutter) 0 var(--edge);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.rail.is-drag{cursor:grabbing}
.rail__track{list-style:none;margin:0;padding:0;display:flex;gap:clamp(1rem,2vw,1.6rem);will-change:transform}
.card{flex:none;width:clamp(250px,26vw,360px)}
.card figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:#3a2c23;border-radius:var(--arch)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out);pointer-events:none}
.card:hover img{transform:scale(1.05)}
.card__b{padding-top:1.2rem}
.card h3{margin:0;font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;line-height:1.35;display:flex;justify-content:space-between;gap:1rem}
.card h3 span{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.card p{margin:.5rem 0 0;font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.25;color:rgba(244,236,226,.72)}
.rail__bar{max-width:var(--max);margin:2.6rem auto 0;padding:0 var(--gutter)}
.rail__bar::before{content:"";display:block;height:1px;background:var(--line-light)}
.rail__bar span{display:block;height:1px;margin-top:-1px;background:var(--paper);width:20%;transform-origin:left;transition:width .2s linear}

/* =========================================================
   FRASE EN MOVIMIENTO
   ========================================================= */
.band{padding:clamp(2.5rem,6vw,4.5rem) 0;overflow:hidden;border-bottom:1px solid var(--line)}
.band__track{
  display:flex;align-items:center;gap:.45em;width:max-content;white-space:nowrap;
  font-size:clamp(2.8rem,9vw,8rem);font-weight:200;text-transform:uppercase;letter-spacing:.04em;line-height:1.1;
  animation:marquee 42s linear infinite;
}
.band__track span:nth-of-type(even){font-family:var(--serif);font-style:italic;text-transform:none;font-weight:400;letter-spacing:0}
.band__mk{width:.42em;height:.5em;color:var(--mute);margin:0 .2em;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =========================================================
   LA CASA · fotos enmarcadas como el logo
   ========================================================= */
.casa{padding:clamp(5rem,11vw,8.5rem) 0}
.casa__grid{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.8rem)}
.pillar:nth-child(2){margin-top:clamp(0rem,8vw,6rem)}
.pillar:nth-child(3){margin-top:clamp(0rem,3vw,2.5rem)}
.pillar__img{margin:0 0 1.4rem;aspect-ratio:3/4;overflow:hidden;border-radius:var(--arch);background:var(--paper-2);
  clip-path:inset(100% 0 0 0 round var(--arch));transition:clip-path 1.2s var(--ease-out)}
.pillar__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.6s var(--ease-out)}
.pillar.is-in .pillar__img{clip-path:inset(0 0 0 0 round var(--arch))}
.pillar.is-in .pillar__img img{transform:scale(1)}
.pillar__n{font-size:.72rem;font-weight:600;letter-spacing:.26em;color:var(--mute)}
.pillar h3{margin:.4rem 0 .5rem;font-weight:300;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1}
.pillar p{margin:0;color:var(--ink-2);max-width:36ch}

/* =========================================================
   GALERÍA · un día en la casa
   ========================================================= */
.gal{padding:clamp(5rem,11vw,9rem) 0 clamp(5rem,10vw,8rem);background:var(--paper-2)}
.section-head--center{text-align:center}
.gal__grid{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2.4rem);row-gap:clamp(3rem,7vw,6rem);
  align-items:start;
}
.g{margin:0}
.g__img{overflow:hidden;background:var(--ghost)}
.g__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.8s var(--ease-out)}
.g.is-in .g__img img{transform:scale(1)}
.g--arch .g__img{border-radius:var(--arch)}
.g figcaption{margin-top:1rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.3;color:var(--ink-2);max-width:32ch}
.g figcaption span{display:block;margin-bottom:.35rem;font-family:var(--sans);font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.g--1{grid-column:1 / 8}.g--1 .g__img{aspect-ratio:16/10}
.g--2{grid-column:9 / 13;margin-top:clamp(2rem,9vw,8rem)}.g--2 .g__img{aspect-ratio:3/4}
.g--3{grid-column:2 / 6}.g--3 .g__img{aspect-ratio:3/4}
.g--4{grid-column:7 / 13;align-self:center}.g--4 .g__img{aspect-ratio:4/3}
.g--5{grid-column:1 / 7}.g--5 .g__img{aspect-ratio:4/3}
.g--6{grid-column:8 / 12;margin-top:clamp(2rem,7vw,6rem)}.g--6 .g__img{aspect-ratio:4/5}

/* =========================================================
   RESERVA · foto a sangre y cómo pedir mesa
   ========================================================= */
.reserva{position:relative;background:var(--deep);color:var(--paper);overflow:hidden;min-height:100svh;display:flex;align-items:flex-end}
.reserva__img{position:absolute;inset:0;margin:0}
.reserva__img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(calc(1.08 - var(--sp,0) * .08))}
.reserva__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(42,30,23,.6) 0%,rgba(42,30,23,.1) 65%),
             linear-gradient(180deg,rgba(42,30,23,.2) 0%,rgba(42,30,23,.3) 35%,rgba(42,30,23,.85) 78%,rgba(42,30,23,.94) 100%)}
.reserva__inner{position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto;padding:clamp(8rem,20vh,14rem) var(--gutter) clamp(3.5rem,8vw,6rem)}
.reserva__title{margin:0;font-weight:300;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(2.8rem,7vw,6.4rem);line-height:1}
.reserva__title em{text-transform:none;font-size:1.1em;letter-spacing:0;font-weight:500}
.reserva__lede{margin:1.6rem 0 0;max-width:34ch;font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2.3vw,1.8rem);line-height:1.25;color:rgba(244,236,226,.9)}
.reserva__facts{margin:clamp(2rem,5vw,3rem) 0 0;display:grid;gap:0;max-width:600px}
.reserva__facts div{display:grid;grid-template-columns:120px 1fr;gap:1rem;padding:1rem 0 .8rem;border-top:1px solid var(--line-light)}
.reserva__facts div:last-child{border-bottom:1px solid var(--line-light)}
.reserva__facts dt{font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,236,226,.66);padding-top:.3rem}
.reserva__facts dd{margin:0}
.reserva .hero__ctas{justify-content:flex-start}

/* =========================================================
   PIE
   ========================================================= */
.foot{padding:clamp(3.5rem,8vw,6rem) var(--gutter) 1.5rem;max-width:var(--max);margin:0 auto}
.foot__logo{width:min(100%,1000px);margin:0 auto;height:auto;aspect-ratio:1708/222;color:var(--ink);overflow:visible}
.foot__row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.8rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.86rem;color:var(--mute)}
.foot__row p{margin:0}
.foot__row a{text-decoration:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .panel{grid-template-columns:minmax(0,1fr);gap:0}
  .panel__media{position:relative;top:0;margin-bottom:1.5rem}
  .stack{aspect-ratio:4/3;border-radius:240px 240px 0 0}
  .panel__note{display:none}
  .casa__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillar:nth-child(3){grid-column:1 / -1}
  .pillar:nth-child(3) .pillar__img{aspect-ratio:16/9}
}
@media (max-width:760px){
  :root{--nav-h:74px}
  .nav{top:10px}
  .nav__links{display:none}
  .Btn{width:44px;height:44px}
  .nav__burger{display:block}
  .nav__bar{height:52px;padding:0 4px 0 18px;gap:.8rem}
  .nav__logo{width:150px;height:20px}
  .hero__logo,.foot__logo{--lgw:5.5px}
  .section-head--row{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .hero{padding-bottom:5.5rem}
  .hero__media{background-image:url(video/hero-vertical-poster.webp)}
  .hero__title{--lw:min(90vw,860px)}
  .btn{font-size:15px;padding:1.08em 1.6em .92em}
  .gal__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.6rem}
  .g{grid-column:1 / -1!important;margin-top:0!important}
  .g--2,.g--3{grid-column:auto!important}
  .g--2 .g__img,.g--3 .g__img{aspect-ratio:3/4.4}
  .g--2 figcaption,.g--3 figcaption{font-size:1.05rem}
  .g--6 .g__img{aspect-ratio:4/3}
  .it{gap:.8rem}
  .it__n em{display:block;margin:.15rem 0 0;font-size:1.12em}
  .casa__grid{grid-template-columns:minmax(0,1fr)}
  .pillar:nth-child(n){margin-top:0}
  .pillar__img,.pillar:nth-child(3) .pillar__img{aspect-ratio:4/3}
  .reserva__facts div{grid-template-columns:1fr;gap:.2rem}
  .reserva__img::after{background:linear-gradient(180deg,rgba(42,30,23,.25) 0%,rgba(42,30,23,.55) 30%,rgba(42,30,23,.88) 62%,rgba(42,30,23,.95) 100%)}
  .reserva__facts dt{color:rgba(244,236,226,.78)}
  .hero__eyebrow{font-size:.62rem;letter-spacing:.24em}
  .manifesto{height:240vh}
  .sweet{font-size:1.25rem}
}


/* =========================================================
   Ajustes del consejo: accesibilidad y zonas táctiles
   ========================================================= */
/* foco visible también sobre fondos oscuros */
.picks :focus-visible,.reserva :focus-visible,.hero :focus-visible,.sweet :focus-visible{outline-color:var(--paper)}
/* zonas táctiles de 44 px como mínimo */
.chips a{min-height:44px;display:inline-flex;align-items:center}
.foot__row a{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem}
.reserva__facts dd a{display:inline-block;padding:.6rem 0;margin:-.6rem 0}
.sheet a:last-child{padding:.9rem 1rem}
.nav__brand{padding:12px 0}

/* Movimiento reducido: sin recorridos grandes, sólo fundidos.
   Ojo: Windows lo trae activado a menudo, así que no apagamos la web. */
@media (prefers-reduced-motion:reduce){
  .band__track{animation-duration:100s}
  .rv{transform:none;transition:opacity .4s ease}
  .hero__horizon{animation-duration:.01s}
  .btn,.btn:hover,.btn:active{transform:none}
  .g__img img{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav__bar,.nav.is-scrolled .nav__bar,.chips{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .nav__bar{background:var(--paper);box-shadow:0 0 0 1.5px var(--ink)}
  .ml{color:#b9a796}
}
@media (prefers-reduced-motion:reduce){
  .sheet,.sheet.is-open{transition:opacity .25s ease,visibility 0s;clip-path:none}
  .sheet{opacity:0}.sheet.is-open{opacity:1}
}
/* red de seguridad: si el JS no llega, nada queda oculto */
.no-js .rv{opacity:1;transform:none}
.no-js .pillar__img{clip-path:none}.no-js .g__img img{transform:none}.no-js .pillar__img img{transform:none}
.reveal[data-split]{opacity:1;transform:none}