/* Sal i Fum — editorial oscuro: Cormorant Garamond, oro viejo y mucho aire */
:root { --bg: #0e0c0a; --bg2: #16130f; --crema: #efe5d3; --gris: #a99f8e; --oro: #c9a462; --linea: #2e2820; --libre: #7fb38a; --ocupada: #6b5f50; --reservada: #c9a462; }
body { background: var(--bg); color: var(--crema); font: 400 17px/1.65 "Lato", system-ui, sans-serif; }
a { color: inherit; }
.serif { font-family: "Cormorant Garamond", Georgia, serif; }
.cap { font: 600 .72rem/1 "Outfit", sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--oro); }
.wrap { width: min(1240px, 100% - 40px); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }

/* cabecera: logo centrado, enlaces a los lados */
.site-header { position: fixed; top: 40px; left: 0; right: 0; z-index: 60; transition: background-color .4s; }
.site-header.is-scrolled { background: rgba(14,12,10,.92); backdrop-filter: blur(10px); }
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 74px; border-bottom: 1px solid var(--linea); }
.brand { grid-column: 2; grid-row: 1; position: relative; z-index: 1; text-decoration: none; text-align: center; font: italic 400 1.9rem/1 "Cormorant Garamond", serif; letter-spacing: .02em; }
.brand small { display: block; font: 600 .55rem/1 "Outfit", sans-serif; letter-spacing: .4em; color: var(--oro); margin-top: 6px; font-style: normal; }
.site-nav { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; pointer-events: none; }
.site-nav a { pointer-events: auto; text-decoration: none; font: 600 .7rem/1 "Outfit", sans-serif; letter-spacing: .26em; text-transform: uppercase; padding: 10px 0; margin-right: 28px; }
.site-nav a:hover { color: var(--oro); }
.site-nav .nav-r { margin-left: auto; }
.site-nav .reserva { color: var(--oro); border: 1px solid var(--oro); padding: 10px 16px; margin-right: 0; }
.menu-toggle { display: none; }

/* portada partida: texto a la izquierda, ventana en arco a la derecha */
.portada { min-height: 100svh; padding: 150px 0 60px; display: grid; align-items: center; }
.portada .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 6vw; align-items: center; }
.portada h1 { font: 300 clamp(3.6rem, 10vw, 9rem)/.86 "Cormorant Garamond", serif; margin: 22px 0 28px; letter-spacing: -.02em; }
.portada h1 em { color: var(--oro); }
.portada p { color: var(--gris); max-width: 38ch; font-size: 1.1rem; }
.arco { position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; overflow: hidden; border: 1px solid var(--linea); }
.arco img { width: 100%; height: 100%; object-fit: cover; animation: respira 14s ease-in-out infinite alternate; }
@keyframes respira { to { transform: scale(1.08); } }
.en-vivo { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; padding: 14px 20px; border: 1px solid var(--linea); text-decoration: none; }
.en-vivo:hover { border-color: var(--oro); }
.en-vivo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #e25c4a; box-shadow: 0 0 0 0 rgba(226,92,74,.6); animation: latido 1.8s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 12px rgba(226,92,74,0); } 100% { box-shadow: 0 0 0 0 rgba(226,92,74,0); } }
.en-vivo b { color: var(--oro); font-weight: 700; }

.sec { padding: clamp(80px, 11vw, 150px) 0; border-top: 1px solid var(--linea); }
.titular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: end; margin-bottom: 56px; }
.titular h2 { font: 300 clamp(2.6rem, 6vw, 5rem)/.95 "Cormorant Garamond", serif; margin: 14px 0 0; }
.titular p { color: var(--gris); margin: 0; max-width: 46ch; }

/* ---------- La sala en directo ---------- */
.sala { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.sala__plano { background: radial-gradient(circle at 50% 40%, #1d1913, #0e0c0a 70%); border: 1px solid var(--linea); position: relative; }
.sala__plano svg { width: 100%; height: auto; display: block; }
/* sala en 3D (sala-3d.js): el lienzo ocupa el sitio del plano y los números de mesa van encima */
.sala__plano.con-3d { aspect-ratio: 4 / 3; overflow: hidden; }
.sala__plano.con-3d svg { display: none; }
.sala__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.sala__lienzo:active { cursor: grabbing; }
.sala__aviso { position: absolute; right: 18px; bottom: 14px; margin: 0; font-size: .8rem; color: var(--gris); }
.sala__pines { position: absolute; inset: 0; pointer-events: none; }
.pin-mesa { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 1px solid rgba(239,229,211,.55); background: rgba(14,12,10,.72); color: var(--crema); font: 700 .78rem/1 "Outfit", sans-serif; display: grid; place-items: center; cursor: pointer; pointer-events: auto; backdrop-filter: blur(3px); transition: background .5s, border-color .5s, transform .1s; box-shadow: 0 0 0 0 rgba(127,179,138,0); }
.pin-mesa[data-estado="libre"] { background: rgba(127,179,138,.92); border-color: #bfe0c6; color: #0e0c0a; }
.pin-mesa[data-estado="reservada"] { background: var(--oro); border-color: #f1dcaa; color: #14110c; }
.pin-mesa:hover, .pin-mesa:focus-visible, .pin-mesa.is-sel { outline: 2px solid #fff; outline-offset: 2px; }
.pin-mesa.is-destello { animation: aviso-libre 1.6s ease; }
@keyframes aviso-libre { 0% { box-shadow: 0 0 0 0 rgba(127,179,138,.9); } 100% { box-shadow: 0 0 0 22px rgba(127,179,138,0); } }
@media (prefers-reduced-motion: reduce) { .pin-mesa.is-destello { animation: none; } }
@media (max-width: 600px) { .pin-mesa { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: .66rem; } }
.leyenda { position: absolute; left: 18px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .82rem; color: var(--gris); }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda i { width: 12px; height: 12px; border-radius: 50%; }
.s-suelo { fill: #2a231b; } .s-tabla { stroke: #33291f; stroke-width: 1; }
.s-pared { fill: #1e1a15; stroke: #3a3126; } .s-pared--lado { fill: #181510; }
.s-ventana { fill: #2c3a44; stroke: #4b5a62; stroke-width: 1.5; } .s-marco { stroke: #4b5a62; stroke-width: 1.5; }
.s-horno { fill: #3a2a1c; stroke: #5a4330; } .s-fuego { fill: #e0762f; opacity: .85; animation: fuego 1.4s ease-in-out infinite alternate; }
@keyframes fuego { to { opacity: .45; } }
.s-rotulo { fill: var(--oro); font: 600 9px "Outfit", sans-serif; letter-spacing: .2em; }
.s-planta { fill: #3d5a3a; stroke: #2a3f28; }
.s-sombra { fill: rgba(0,0,0,.35); }
.s-silla { fill: #5a4a38; stroke: #3c3125; }
.mesa { cursor: pointer; outline: none; }
.mesa__tapa { fill: var(--libre); stroke: rgba(0,0,0,.35); stroke-width: 1; transition: fill .6s; }
.mesa__canto { fill: #3d5e44; transition: fill .6s; } .mesa__canto--os { filter: brightness(.8); }
.mesa__num { fill: #0e0c0a; font: 700 11px "Outfit", sans-serif; pointer-events: none; }
.mesa[data-estado="ocupada"] .mesa__tapa { fill: var(--ocupada); } .mesa[data-estado="ocupada"] .mesa__canto { fill: #4a4136; }
.mesa[data-estado="ocupada"] .mesa__num { fill: var(--crema); }
.mesa[data-estado="reservada"] .mesa__tapa { fill: var(--reservada); } .mesa[data-estado="reservada"] .mesa__canto { fill: #8a6d3b; }
.persona { fill: #e9d8bd; opacity: 0; transform: translateY(6px); transform-box: fill-box; transition: opacity .5s, transform .5s; }
.persona.is-on { opacity: 1; transform: none; }
.mesa:hover .mesa__tapa, .mesa:focus-visible .mesa__tapa, .mesa.is-sel .mesa__tapa { stroke: #fff; stroke-width: 2.5; }
.mesa.is-destello .mesa__tapa { animation: destello 1.6s ease; }
@keyframes destello { 30% { fill: #d8f5dd; } }
.sala__lado { display: grid; gap: 18px; }
.ocupacion { border: 1px solid var(--linea); padding: 22px; }
.ocupacion strong { display: block; font: 300 3.4rem/1 "Cormorant Garamond", serif; color: var(--oro); margin: 10px 0 4px; }
.ocupacion span { color: var(--gris); font-size: .92rem; }
.panel { border: 1px solid var(--linea); padding: 22px; background: var(--bg2); }
.panel:not(.is-on) .panel__mesa { display: none; }
.panel.is-on .panel__vacio { display: none; }
.panel h3 { font: 400 2rem/1 "Cormorant Garamond", serif; margin: 0 0 6px; }
.panel__vacio { color: var(--gris); margin: 0; }
.estado { display: inline-block; font: 700 .7rem/1 "Outfit", sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px; margin: 10px 0 14px; background: var(--libre); color: #0e0c0a; }
.estado[data-estado="ocupada"] { background: var(--ocupada); color: var(--crema); } .estado[data-estado="reservada"] { background: var(--oro); }
.panel label { display: block; font-size: .82rem; color: var(--gris); margin-bottom: 10px; }
.panel select { width: 100%; margin-top: 4px; padding: 10px; background: var(--bg); border: 1px solid var(--linea); color: var(--crema); }
.boton { display: inline-block; width: 100%; margin-top: 6px; padding: 14px; border: 1px solid var(--oro); background: var(--oro); color: #14110c; font: 700 .74rem/1 "Outfit", sans-serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; text-decoration: none; text-align: center; }
.boton:hover { background: transparent; color: var(--oro); }
.boton--borde { background: transparent; color: var(--oro); }
.panel__nota { font-size: .88rem; color: var(--gris); margin: 8px 0 0; }
.eventos { list-style: none; padding: 0; margin: 0; border: 1px solid var(--linea); }
.eventos li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--linea); font-size: .88rem; animation: entra .5s ease; }
.eventos li:last-child { border-bottom: 0; }
.eventos time { color: var(--oro); font: 600 .78rem/1.6 "Outfit", sans-serif; }
.ev--libre span::before { content: "● "; color: var(--libre); } .ev--llega span::before { content: "● "; color: #a89782; } .ev--tuya span::before { content: "★ "; color: var(--oro); }
@keyframes entra { from { opacity: 0; transform: translateY(-8px); } }
.aviso-sim { font-size: .8rem; color: var(--gris); margin: 14px 0 0; }

/* ---------- Menú degustación: scroll vertical que mueve los platos en horizontal ---------- */
.degustacion { height: 420vh; position: relative; border-top: 1px solid var(--linea); }
.degustacion__fijo { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-content: center; }
.degustacion__cabecera { position: absolute; top: 140px; left: 0; right: 0; }
.degustacion__cabecera h2 { font: 300 clamp(2.4rem, 5vw, 4.2rem)/1 "Cormorant Garamond", serif; margin: 10px 0 0; }
.pista { display: flex; gap: 5vw; padding: 120px 8vw 0; width: max-content; will-change: transform; }
.pase { width: min(62vw, 720px); display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: end; }
.pase figure { margin: 0; width: min(30vw, 340px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 0 0; }
.pase img { width: 100%; height: 100%; object-fit: cover; }
.pase__n { font: italic 300 clamp(4rem, 9vw, 8rem)/.8 "Cormorant Garamond", serif; color: var(--oro); opacity: .9; }
.pase h3 { font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.05 "Cormorant Garamond", serif; margin: 14px 0 10px; }
.pase p { color: var(--gris); margin: 0 0 10px; max-width: 32ch; }
.pase .vino { font: 600 .72rem/1.4 "Outfit", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.degustacion__barra { position: absolute; left: 8vw; right: 8vw; bottom: 50px; height: 1px; background: var(--linea); }
.degustacion__barra i { display: block; height: 1px; background: var(--oro); width: 0; }
.precio-menu { position: absolute; right: 8vw; top: 150px; text-align: right; }
.precio-menu strong { font: 300 2.6rem/1 "Cormorant Garamond", serif; color: var(--oro); }

/* visita y pie */
.visita { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.visita h3 { font: 400 1.7rem/1 "Cormorant Garamond", serif; margin: 12px 0; }
.visita p { color: var(--gris); margin: 0; }
.site-footer { border-top: 1px solid var(--linea); padding: 44px 0 50px; font-size: .85rem; color: var(--gris); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.site-footer a { color: var(--crema); }
.credits { width: 100%; font-size: .78rem; line-height: 1.7; }

@media (max-width: 1000px) {
  .site-nav { display: none; }
  .portada .wrap, .titular, .sala, .visita { grid-template-columns: minmax(0, 1fr); }
  .arco { max-width: 420px; }
  .pase { width: 82vw; grid-template-columns: minmax(0, 1fr); }
  .pase figure { width: 60vw; }
}
@media (prefers-reduced-motion: reduce) {
  .degustacion { height: auto; } .degustacion__fijo { position: static; height: auto; padding: 120px 0 80px; }
  .degustacion__cabecera { position: static; } .pista { width: auto; flex-wrap: wrap; transform: none !important; }
}