/* ===========================================================================
   SITIO PÚBLICO — SKY BAR (2026-09-24)
   La identidad pública nueva. Se carga DESPUÉS de publico.css (base heredada)
   y solo usa clases `sb-*`: nada de lo de aquí reutiliza la piel del hotel.

   Efectos (ninguno viene de la portada heredada):
     · slider   — foto a pantalla completa; cambia con cortina lateral
     · tira     — fila horizontal que se arrastra; cada foto se revela al entrar
     · ventana  — la panorámica se abre al ancho mientras se baja
     · duotono  — noche/turquesa que recupera el color en el centro de la vista
     · abanico  — las dos fotos del cierre se separan al llegar
   Con `prefers-reduced-motion` todo queda quieto y a la vista.
   =========================================================================== */

:root{
  --sb-barra-alto:72px;
  --sb-canal:clamp(16px,4vw,56px);
  --sb-curva:cubic-bezier(.22,.9,.24,1);
}

body{background:var(--sb-noche);color:var(--sb-texto-noche);
  font-family:var(--fuente-titular);-webkit-font-smoothing:antialiased}
main{padding-top:var(--sb-barra-alto)}
::selection{background:var(--sb-turquesa);color:var(--sb-noche)}

/* ------------------------------------------------------------ la barra -- */
.sb-barra{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--sb-barra-alto);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--sb-canal);
  background:rgba(11,18,21,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--sb-linea-noche);
  transition:background .35s var(--sb-curva),border-color .35s}
.sb-barra--suelta:not(.sb-barra--posada){background:transparent;border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.sb-barra__marca{display:inline-flex;align-items:center;gap:12px;color:#fff;
  text-decoration:none;min-width:0}
.sb-barra__marca img{width:40px;height:40px;flex:none}
.sb-barra__marca span{font-weight:700;font-size:14px;letter-spacing:.34em;white-space:nowrap}
.sb-barra__nav{display:flex;gap:clamp(14px,3vw,32px)}
.sb-barra__nav a{position:relative;color:var(--sb-gris-noche);text-decoration:none;
  font-size:14px;font-weight:600;padding:6px 0;transition:color .2s}
.sb-barra__nav a:hover,.sb-barra__nav a[aria-current]{color:#fff}
.sb-barra__nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--sb-turquesa);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--sb-curva)}
.sb-barra__nav a:hover::after,.sb-barra__nav a[aria-current]::after{transform:scaleX(1)}
@media (max-width:420px){ .sb-barra__marca span{letter-spacing:.22em} }

/* ------------------------------------------------------------- botones -- */
.sb-boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 30px;border-radius:999px;
  background:var(--sb-turquesa);color:var(--sb-noche);text-decoration:none;
  font-weight:700;font-size:15px;letter-spacing:.01em;
  transition:background .25s,transform .25s var(--sb-curva),box-shadow .25s}
.sb-boton:hover{background:#fff;transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(27,212,222,.55)}
.sb-boton:focus-visible{outline:2px solid #fff;outline-offset:4px}
.sb-boton--claro{background:#fff}
.sb-boton--claro:hover{background:var(--sb-turquesa)}

/* ---------------------------------------------------------------- hero -- */
/* A pantalla completa: la foto es el fondo y cambia sola. El paso entre
   láminas es una cortina lateral —la nueva entra de derecha a izquierda y se
   asienta—, no el fundido con zoom lento de la portada heredada. */
.sb-hero{position:relative;min-height:100vh;min-height:100svh;margin-top:calc(-1 * var(--sb-barra-alto));
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--sb-barra-alto) + 40px) var(--sb-canal) 112px;
  background:var(--sb-noche);overflow:hidden;isolation:isolate}
.sb-hero__fondo{position:absolute;inset:0;z-index:-2}
.sb-hero__lamina{position:absolute;inset:0;margin:0;overflow:hidden;
  clip-path:inset(0 0 0 100%);z-index:0}
.sb-hero__lamina img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.14) translateX(5%)}
.sb-hero__lamina.on{clip-path:inset(0 0 0 0);z-index:2;
  transition:clip-path 1.25s var(--sb-curva)}
.sb-hero__lamina.on img{transform:none;transition:transform 2.4s var(--sb-curva)}
/* La que se va se queda debajo, quieta, hasta que la nueva la tapa */
.sb-hero__lamina.sale{clip-path:inset(0 0 0 0);z-index:1}
.sb-hero__lamina.sale img{transform:none}
/* El velo: noche abajo a la izquierda, donde va la marca */
.sb-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(11,18,21,.92) 0%,rgba(11,18,21,.45) 38%,rgba(11,18,21,0) 65%),
    linear-gradient(to right,rgba(11,18,21,.7) 0%,rgba(11,18,21,.15) 55%,rgba(11,18,21,0) 80%),
    linear-gradient(to bottom,rgba(11,18,21,.55) 0%,rgba(11,18,21,0) 22%)}

.sb-hero__texto{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.sb-hero__sello{width:clamp(64px,7vw,88px);height:auto;animation:sbSello 1.4s var(--sb-curva) .1s both}
@keyframes sbSello{from{opacity:0;transform:rotate(-120deg) scale(.6)}to{opacity:1;transform:none}}

.sb-hero__marca{margin:0;font-weight:700;line-height:.84;letter-spacing:-.045em;
  font-size:clamp(72px,14vw,200px);color:#fff;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.sb-hero__marca span{display:block;overflow:hidden;padding-bottom:.04em}
.sb-hero__marca span:last-child{color:transparent;text-shadow:none;
  -webkit-text-stroke:2px var(--sb-turquesa)}
.sb-js .sb-hero__marca span{animation:sbSube 1.1s var(--sb-curva) both}
.sb-js .sb-hero__marca span:first-child{animation-delay:.25s}
.sb-js .sb-hero__marca span:last-child{animation-delay:.42s}
@keyframes sbSube{from{clip-path:inset(0 0 100% 0);transform:translateY(40%)}
  to{clip-path:inset(0 0 0 0);transform:none}}
.sb-js .sb-hero__texto .sb-boton{animation:sbAparece .9s var(--sb-curva) .8s both}
@keyframes sbAparece{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* El mando: contador, progreso y flechas, abajo a la derecha */
.sb-hero__mando{position:absolute;right:var(--sb-canal);bottom:36px;z-index:3;
  display:flex;align-items:center;gap:14px;color:#fff}
.sb-hero__cuenta{font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--sb-gris-noche);
  font-variant-numeric:tabular-nums}
.sb-hero__cuenta b{color:#fff;font-weight:700}
.sb-hero__progreso{position:relative;width:clamp(64px,10vw,140px);height:2px;
  background:rgba(255,255,255,.22);overflow:hidden;border-radius:2px}
.sb-hero__progreso i{position:absolute;inset:0;background:var(--sb-turquesa);
  transform:scaleX(0);transform-origin:left}
.sb-hero__progreso i.corre{animation:sbCorre var(--sb-cada,6500ms) linear forwards}
.sb-hero__progreso i.quieta{animation-play-state:paused}
@keyframes sbCorre{to{transform:scaleX(1)}}
.sb-hero__flecha{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(11,18,21,.35);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .25s,border-color .25s,color .25s}
.sb-hero__flecha svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sb-hero__flecha:hover{background:var(--sb-turquesa);border-color:var(--sb-turquesa);color:var(--sb-noche)}
.sb-hero__flecha:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:640px){
  .sb-hero{padding-bottom:104px}
  .sb-hero__mando{left:var(--sb-canal);right:var(--sb-canal);bottom:28px;justify-content:space-between}
  .sb-hero__progreso{flex:1}
  .sb-hero__flecha{width:42px;height:42px}
}

/* --------------------------------------------------------- los rótulos -- */
.sb-bloque{padding:clamp(72px,10vw,140px) 0 0}
.sb-rotulo{display:flex;align-items:baseline;gap:18px;padding:0 var(--sb-canal);
  margin-bottom:clamp(24px,4vw,44px)}
.sb-rotulo__num{font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--sb-turquesa)}
.sb-rotulo h2,.sb-cierre h2{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1;
  font-size:clamp(40px,7vw,96px);color:#fff}

/* ------------------------------------------------------------- la tira -- */
.sb-tira{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding:0 var(--sb-canal);
  padding:4px var(--sb-canal) 24px;cursor:grab;scrollbar-width:none}
.sb-tira::-webkit-scrollbar{display:none}
.sb-tira.arrastra{cursor:grabbing;scroll-snap-type:none}
.sb-tira:focus-visible{outline:2px solid var(--sb-turquesa);outline-offset:-2px}
.sb-tira__foto{flex:0 0 clamp(230px,27vw,380px);aspect-ratio:3/4;margin:0;
  border-radius:22px;overflow:hidden;scroll-snap-align:start;background:var(--sb-noche-2);
  transition:transform .5s var(--sb-curva)}
.sb-tira__foto img{width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;user-select:none;transition:transform 1.2s var(--sb-curva)}
.sb-tira__foto:hover{transform:translateY(-8px)}
.sb-tira__foto:hover img{transform:scale(1.05)}
/* Revelado: cada foto sube desde abajo, en cascada */
.sb-js [data-revela]{clip-path:inset(100% 0 0 0 round 22px);
  transition:clip-path 1.1s var(--sb-curva) calc(var(--i,0) * 90ms),transform .5s var(--sb-curva)}
.sb-js [data-revela] img{transform:scale(1.25) translateY(6%);
  transition:transform 1.6s var(--sb-curva) calc(var(--i,0) * 90ms)}
.sb-js [data-revela].visto{clip-path:inset(0 0 0 0 round 22px)}
.sb-js [data-revela].visto img{transform:none}
.sb-js [data-revela].visto:hover img{transform:scale(1.05)}

/* ---------------------------------------------------------- la ventana -- */
.sb-ventana{position:relative;height:170vh;margin-top:clamp(56px,8vw,120px)}
.sb-ventana__marco{position:sticky;top:0;height:100vh;height:100svh;
  display:grid;place-items:center;overflow:hidden}
.sb-ventana__marco img{width:min(94vw,1280px);aspect-ratio:21/10;height:auto;max-height:86vh;
  object-fit:cover;object-position:50% 0;display:block; /* recorta abajo: ahí va la marca de agua */
  /* --p va de 0 a 1 mientras se baja (sitio.js). Sin script: abierta. */
  clip-path:inset(calc((1 - var(--p,1)) * 26%) calc((1 - var(--p,1)) * 34%)
                  round calc(24px + (1 - var(--p,1)) * 180px));
  transform:scale(calc(1.18 - var(--p,1) * .18));
  will-change:clip-path,transform}

/* --------------------------------------------------------- el duotono -- */
.sb-rejilla{display:grid;gap:12px;padding:0 var(--sb-canal);
  grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(150px,42vw,240px)}
.sb-rejilla__foto{position:relative;margin:0;border-radius:18px;overflow:hidden;
  background:var(--sb-turquesa-hondo);isolation:isolate}
.sb-rejilla__foto--1{grid-column:span 2}
.sb-rejilla__foto img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.15) brightness(.85);
  transition:filter 1s var(--sb-curva),transform 1.4s var(--sb-curva)}
.sb-rejilla__foto::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,var(--sb-noche) 0%,var(--sb-turquesa-hondo) 60%,var(--sb-turquesa) 100%);
  mix-blend-mode:color;opacity:1;transition:opacity 1s var(--sb-curva)}
.sb-rejilla__foto.vivo img,.sb-rejilla__foto:hover img{filter:none;transform:scale(1.04)}
.sb-rejilla__foto.vivo::after,.sb-rejilla__foto:hover::after{opacity:0}
/* PILOTO-01: el nombre del platillo de la carta, sobre su foto (sin precio). */
.sb-rejilla__nombre{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:36px 16px 14px;color:#fff;font-weight:700;font-size:clamp(15px,1.6vw,20px);line-height:1.2;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);overflow-wrap:anywhere}
@media (min-width:760px){
  .sb-rejilla{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(170px,17vw,270px)}
  .sb-rejilla__foto--1{grid-column:span 4;grid-row:span 2}
  .sb-rejilla__foto--2,.sb-rejilla__foto--3{grid-column:span 2}
  .sb-rejilla__foto--4,.sb-rejilla__foto--5{grid-column:span 3}
}

/* ---------------------------------------------------------- el cierre -- */
.sb-cierre{display:grid;gap:48px;align-items:center;
  padding:clamp(96px,12vw,180px) var(--sb-canal) clamp(96px,12vw,160px)}
@media (min-width:900px){ .sb-cierre{grid-template-columns:1fr 1fr} }
.sb-cierre__fotos{position:relative;height:clamp(300px,40vw,460px)}
.sb-cierre__fotos img{position:absolute;width:min(72%,440px);height:auto;aspect-ratio:4/3;
  object-fit:cover;border-radius:20px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
  transition:transform 1.4s var(--sb-curva)}
.sb-cierre__fotos img:first-child{left:0;top:0;z-index:2}
.sb-cierre__fotos img:last-child{right:0;bottom:0}
/* El abanico: juntas y rectas; al llegar se separan */
.sb-js .sb-cierre__fotos img:first-child{transform:translate(18%,14%) rotate(0)}
.sb-js .sb-cierre__fotos img:last-child{transform:translate(-18%,-14%) rotate(0)}
.sb-js .sb-cierre.abierto .sb-cierre__fotos img:first-child{transform:rotate(-5deg)}
.sb-js .sb-cierre.abierto .sb-cierre__fotos img:last-child{transform:rotate(4deg)}
.sb-cierre__in{display:flex;flex-direction:column;align-items:flex-start;gap:24px}

/* -------------------------------------------------------------- el pie -- */
.sb-pie{border-top:1px solid var(--sb-linea-noche);background:var(--sb-noche)}
.sb-pie__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 32px;padding:32px var(--sb-canal)}
.sb-pie__nav{display:flex;gap:24px}
.sb-pie__nav a{color:var(--sb-gris-noche);text-decoration:none;font-size:14px;font-weight:600}
.sb-pie__nav a:hover{color:#fff}
.sb-pie__fin{color:var(--sb-gris-noche);font-size:13px}

/* ------------------------------------------------ quien pidió quietud -- */
@media (prefers-reduced-motion:reduce){
  .sb-js [data-revela]{clip-path:none!important}
  .sb-hero__lamina.on,.sb-hero__lamina.on img{transition:none!important}
  .sb-js [data-revela] img,
  .sb-js .sb-cierre__fotos img{transform:none!important}
  .sb-ventana{height:auto}
  .sb-ventana__marco{position:static;height:auto;padding:24px 0}
  .sb-ventana__marco img{clip-path:none;transform:none}
  .sb-hero__marca span,.sb-hero__sello,.sb-boton{animation:none!important}
}

/* PILOTO-02 (2026-09-25): la carta WEB (/carta) sobre la noche del sitio. El
   escenario es el componente del menú de mesa (claro): aquí se le da la
   tinta clara para que grupos, «ver las N» y flechas se lean en lo oscuro. */
.mm--web{--hsv-tinta:#f3f6f7;color:var(--hsv-tinta);padding-top:clamp(24px,4vw,48px)}
.mm--web .mm__top{padding-inline:16px}
.mm--web .mm__top h1{margin:0 0 8px;font-size:clamp(30px,4vw,44px)}
.mm--web .mm__ir>summary{border-color:rgba(255,255,255,.22)}
.mm--web .esc__pasa{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.mm--web .esc__datos h2{color:#fff}
/* MENU-05: sin foto, la tarjeta compacta va sobre el fondo oscuro del sitio (no marfil) */
.mm--web .esc__uno--sinfoto{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}

/* ------------------------------------------------ la experiencia -- */
/* 2026-09-25: reemplaza «Atardecer» (dos fotos encimadas + botón). Tres
   momentos en foto a sangre dentro de su tarjeta, con su nombre encima;
   entran uno tras otro al llegar a la vista (data-revela). */
.sb-exp{padding:clamp(88px,11vw,160px) var(--sb-canal) clamp(88px,11vw,150px)}
.sb-nowrap{white-space:nowrap}
.sb-exp__cab{max-width:980px;margin:0 auto clamp(36px,5vw,64px);text-align:center}
.sb-exp__cab h2{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1;
  font-size:clamp(40px,6.4vw,84px);color:#fff}
.sb-exp__cab p{margin:18px auto 0;max-width:46ch;font-size:clamp(16px,1.6vw,20px);line-height:1.5;
  color:rgba(255,255,255,.72)}
.sb-exp__momentos{display:grid;gap:14px;max-width:1280px;margin:0 auto;
  grid-template-columns:1fr}
.sb-exp__uno{position:relative;margin:0;border-radius:22px;overflow:hidden;
  aspect-ratio:4/3;background:var(--sb-turquesa-hondo,#0E4A52);isolation:isolate}
.sb-exp__uno img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--sb-curva)}
.sb-exp__uno::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(5,9,11,.82) 0%,rgba(5,9,11,.2) 48%,transparent 70%)}
.sb-exp__uno figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:6px}
.sb-exp__uno figcaption b{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;color:#fff}
.sb-exp__uno figcaption span{font-size:clamp(14px,1.2vw,16px);color:rgba(255,255,255,.82)}
.sb-exp__uno:hover img{transform:scale(1.05)}
@media (min-width:760px){
  .sb-exp__momentos{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .sb-exp__uno{aspect-ratio:3/4}
  /* El del centro, un poco más abajo: el ritmo de una tira de fotos */
  .sb-exp__uno:nth-child(2){transform:translateY(40px)}
}
@media (prefers-reduced-motion:reduce){
  .sb-exp__uno img{transition:none}
  .sb-exp__uno:hover img{transform:none}
}