/* La Sangulería · demo IMAN
   Colores del salón: terciopelo petróleo de las cortinas, pared descascarada (yeso, ocre, gris azulado),
   velas cobalto, latón de los candelabros, baldosas calcáreas. Tipos de su carta: Barlow Condensed + Roboto Mono. */
:root {
  --yeso: #EFE8DC;
  --yeso-2: #E3D8C6;
  --papel: #FBF8F2;
  --tinta: #17191A;
  --tinta-2: #55524C;
  --tinta-3: #8A857C;
  --terciopelo: #0B4A5A;
  --terciopelo-2: #12697E;
  --terciopelo-osc: #052A33;
  --cobalto: #2452D6;
  --cobalto-osc: #16389C;
  --laton: #C49A48;
  --laton-claro: #E8C77A;
  --ocre: #E2B13F;
  --sol: #F0C04F;
  --vino: #7A1B2D;
  --verde-ok: #2F8A55;
  --linea: rgba(23, 25, 26, .9);
  --radio: 22px;
  --canto: 0 3px 0 var(--tinta);
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Barlow', system-ui, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace;
  --barra-h: 68px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--yeso); color: var(--tinta);
  font-family: var(--sans); font-size: 16px; line-height: 1.4;
  overflow-x: hidden;
}
body.intro-on { overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 800; }
p { margin: 0; }
.mono { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--tinta); color: var(--papel);
  font-family: var(--cond); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase;
  border: 2px solid var(--tinta); box-shadow: 0 3px 0 rgba(0,0,0,.35);
  transition: transform .12s ease; text-decoration: none; white-space: nowrap;
}
.boton:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.boton.claro { background: var(--papel); color: var(--tinta); box-shadow: var(--canto); }
.boton.claro:active { box-shadow: 0 1px 0 var(--tinta); }
.boton.borde { background: transparent; color: var(--tinta); box-shadow: none; }
.boton.cobalto { background: var(--cobalto); border-color: var(--tinta); box-shadow: var(--canto); color: #fff; }
.boton.chico { min-height: 38px; padding: 0 16px; font-size: 15px; }
.boton.ancho { width: 100%; }
.boton[disabled] { opacity: .45; pointer-events: none; }

.pildora {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
  background: var(--papel); border: 1.5px solid var(--tinta); box-shadow: var(--canto);
  font-family: var(--cond); font-weight: 700; font-size: 15.5px; letter-spacing: .03em; text-transform: uppercase;
}
.pildora svg { width: 18px; height: 18px; flex: none; }
.pildora.on { background: var(--cobalto); color: #fff; }
.pildora:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }

/* ---------- cabecera ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: calc(58px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0;
  background: var(--terciopelo-osc); color: var(--papel); border-bottom: 1.5px solid #000;
}
.top-logo {
  font-family: var(--cond); font-weight: 600; font-size: 21px; letter-spacing: .2em; text-decoration: none;
  white-space: nowrap; padding-left: .2em;
}
body.intro-on .top-logo { opacity: 0; }
.top-der { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tag-mesa {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 8px; background: var(--laton-claro); color: var(--tinta);
}
.ir-mesa {
  font-family: var(--cond); font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--papel);
  background: var(--papel); color: var(--tinta); box-shadow: 0 2px 0 var(--laton); white-space: nowrap;
}

/* ---------- vistas ---------- */
#app { padding-bottom: calc(var(--barra-h) + 40px + var(--seguro-abajo)); max-width: 560px; margin: 0 auto; }
.vista { display: none; }
.vista.activa { display: block; animation: entra .38s cubic-bezier(.2,.7,.2,1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.vista-tit { padding: 22px 16px 8px; }
.vista-tit .mono { color: var(--tinta-2); }
.vista-tit h1 { font-family: var(--cond); font-size: 54px; line-height: .9; text-transform: uppercase; letter-spacing: .01em; margin-top: 6px; }


.mesa-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px 0; }
#v-inicio > .mesa-acciones { padding: 10px 14px 12px; background: var(--terciopelo-osc); }
#v-inicio > .mesa-acciones .pildora { background: rgba(251,248,242,.06); color: var(--papel); border-color: rgba(251,248,242,.55); box-shadow: none; }
#v-inicio > .mesa-acciones .pildora.on { background: var(--cobalto); border-color: var(--cobalto); }

/* ---------- telón (cortinas en tiras: se juntan hacia afuera como un telón de verdad) ---------- */
.tl { position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 3; pointer-events: none; }
.tl-izq { left: 0; }
.tl-der { right: 0; }
.tl .tira {
  position: absolute; top: 0; bottom: 0; width: calc(100% / var(--n) + 1px); left: calc(100% / var(--n) * var(--i));
  background-image: url(assets/telon.jpg); background-size: calc(var(--ancho) * 1px) 100%; background-repeat: repeat-x;
  background-position: calc(var(--ancho) * -1px / var(--n) * var(--i)) 0;
  transform-origin: 0 50%;
  transition: transform var(--dur, .9s) cubic-bezier(.66,.02,.24,1) calc(var(--j) * 28ms);
  will-change: transform;
}
.tl-der .tira { transform-origin: 100% 50%; left: auto; right: calc(100% / var(--n) * var(--i)); background-position: calc(var(--ancho) * 1px / var(--n) * var(--i)) 0; }
.tl .tira::after { /* sombra de cada pliegue para que se lea volumen al juntarse */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.10) 42%, rgba(255,255,255,.04) 55%, rgba(0,0,0,.4));
  opacity: var(--pliegue, 0); transition: opacity var(--dur, .9s) ease;
}
.tl.abierto .tira { transform: translateX(calc(-100% * var(--i) * (1 - var(--k)) )) scaleX(var(--k)); --pliegue: 1; }
.tl-der.abierto .tira { transform: translateX(calc(100% * var(--i) * (1 - var(--k)) )) scaleX(var(--k)); }
.tl-lazo {
  position: absolute; top: 57%; height: 12px; width: calc(100% * var(--k) * 1.08); z-index: 2;
  background: linear-gradient(180deg, var(--laton-claro), var(--laton) 55%, #8C6A2B);
  border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .3s ease;
}
.tl-izq .tl-lazo { left: 0; }
.tl-der .tl-lazo { right: 0; }
.tl-lazo::after { content: ''; position: absolute; top: 9px; width: 10px; height: 26px; border-radius: 3px 3px 6px 6px; background: linear-gradient(180deg, var(--laton), #7C5B22); }
.tl-izq .tl-lazo::after { right: 4px; }
.tl-der .tl-lazo::after { left: 4px; }
.tl.abierto .tl-lazo { opacity: 1; transition-delay: .55s; }

/* ---------- entrada ---------- */
#intro { position: fixed; inset: 0; z-index: 100; background: var(--terciopelo-osc); overflow: hidden; }
#intro .tl { width: 50.5%; }
#intro .tl.abierto .tira { --pliegue: 0; }
#intro.chau { background: transparent; }
.in-luz { position: absolute; inset: 0; background: radial-gradient(46% 26% at 50% 50%, rgba(255,222,160,.42), rgba(255,214,150,.12) 55%, transparent 75%), radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(0,0,0,.55)); z-index: 4; pointer-events: none; transition: opacity .6s ease; animation: in-luz .5s ease-out both; }
@keyframes in-luz { from { opacity: 0; } }
#intro.chau .in-luz { opacity: 0; }
.in-logo { position: absolute; left: 0; right: 0; top: 50%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translateY(-50%); }
.in-marca {
  font-family: var(--cond); font-weight: 600; color: #F6EFE2; font-size: clamp(30px, 10.5vw, 54px); letter-spacing: .2em; padding-left: .2em; white-space: nowrap;
  opacity: 0; animation: in-marca .6s cubic-bezier(.2,.7,.2,1) .05s forwards;
  transform-origin: 0 0;
}
.in-bajada { font-family: var(--mono); color: rgba(246,239,226,.72); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: 0; animation: in-bajada .6s ease .45s forwards; }
@keyframes in-marca { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes in-bajada { to { opacity: 1; } }
#intro.chau .in-bajada { opacity: 0; transition: opacity .25s ease; animation: none; }

/* ---------- el escenario del inicio ---------- */
.escenario {
  --tit: #0C3742; --tit-sombra: rgba(0,0,0,.22);
  position: relative; height: clamp(560px, 152vw, 650px); overflow: hidden; isolation: isolate;
  background: var(--terciopelo-osc); color: var(--papel);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.escenario[data-v="restaurante"] { --tit: #FBF1DE; --tit-sombra: #0D2A7C; }
.escenario[data-v="bodegon"] { --tit: #1A3DA8; --tit-sombra: #A9761F; }
.es-fondos > div { position: absolute; inset: 0; opacity: 0; transition: opacity .2s linear; }
.es-fondos > div.on { opacity: 1; }
.fondo-pared { background: url(assets/pared-a.jpg) center 20% / cover; }
.fondo-pared::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,26,8,.1), rgba(40,26,8,.28)); }
.fondo-cobalto { background: radial-gradient(70% 55% at 50% 28%, #4A78F5, var(--cobalto) 48%, #0F2A78); }
.fondo-cobalto::after { /* velas del salón, desenfocadas al fondo */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(9px 9px at 24% 30%, rgba(255,226,160,.9), transparent),
    radial-gradient(7px 7px at 31% 27%, rgba(255,226,160,.7), transparent),
    radial-gradient(8px 8px at 78% 25%, rgba(255,226,160,.75), transparent),
    radial-gradient(6px 6px at 71% 29%, rgba(255,226,160,.6), transparent),
    radial-gradient(70px 70px at 27% 29%, rgba(255,200,120,.22), transparent),
    radial-gradient(70px 70px at 75% 27%, rgba(255,200,120,.2), transparent);
}
.fondo-sol { background: radial-gradient(85% 60% at 50% 18%, #FFE08A, var(--sol) 46%, #C98A22); }
.fondo-sol::after { /* sombra de la ventana del salón al mediodía */
  content: ''; position: absolute; left: 14%; top: 12%; width: 46%; height: 40%;
  background: repeating-linear-gradient(90deg, rgba(120,70,0,.13) 0 6px, transparent 6px 40px), repeating-linear-gradient(0deg, rgba(120,70,0,.13) 0 6px, transparent 6px 46px);
  transform: skewX(-14deg); opacity: .9;
}
/* cañón de luz: cono desde arriba, charco en el piso, bordes en penumbra */
.es-luz { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 30% 9% at 50% 77%, rgba(255,232,178,.55), transparent 70%),
    radial-gradient(ellipse 34% 78% at 50% -4%, rgba(255,236,196,.42), rgba(255,236,196,.12) 55%, transparent 72%),
    radial-gradient(ellipse 80% 70% at 50% 42%, transparent 46%, rgba(3,16,20,.62) 100%);
}
.escenario[data-v="bodegon"] .es-luz { background:
    radial-gradient(ellipse 30% 9% at 50% 77%, rgba(255,246,214,.5), transparent 70%),
    radial-gradient(ellipse 36% 80% at 50% -4%, rgba(255,250,228,.5), rgba(255,250,228,.14) 55%, transparent 72%),
    radial-gradient(ellipse 80% 70% at 50% 42%, transparent 50%, rgba(60,30,0,.45) 100%); }
.es-luz.prende { animation: prende-luz .9s steps(1, end) both; }
@keyframes prende-luz { 0% { opacity: 0; } 18% { opacity: .85; } 30% { opacity: .2; } 44% { opacity: 1; } 56% { opacity: .55; } 70%, 100% { opacity: 1; } }

/* piso de baldosas calcáreas en perspectiva (el del salón) */
.es-piso { position: absolute; left: 0; right: 0; top: 66%; bottom: 0; z-index: 0; overflow: hidden; perspective: 380px; perspective-origin: 50% 0; }
.es-piso::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,20,24,.75), rgba(5,20,24,.05) 40%, rgba(5,20,24,.35)); }
.es-baldosas { position: absolute; left: -80%; right: -80%; top: 0; height: 330px; transform-origin: 50% 0; transform: rotateX(72deg); background: var(--baldosa) 50% 0 / 58px 58px; }

.saludo { position: absolute; z-index: 4; left: 0; right: 0; top: 60px; text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,248,242,.85); white-space: nowrap; }
.escenario[data-v="aperitivo"] .saludo, .escenario[data-v="bodegon"] .saludo { color: rgba(23,25,26,.72); }
.saludo b { font-weight: 700; }

/* el nombre gigante, detrás del producto */
.es-titulo { position: absolute; z-index: 2; left: 0; right: 0; top: 76px; text-align: center; font-family: var(--cond); font-weight: 900; line-height: .84; font-size: 120px; letter-spacing: -.012em; text-transform: uppercase; color: var(--tit); white-space: nowrap; pointer-events: none; }
.es-titulo .tt { display: inline-block; overflow: hidden; padding: .14em .04em .06em; vertical-align: top; }
.es-titulo .tt-l { display: inline-block; transform: translateY(112%); text-shadow: 0 .045em 0 var(--tit-sombra); transition: transform .26s cubic-bezier(.5,0,.75,0); }
.es-titulo.sube .tt-l { transform: none; transition: transform .75s cubic-bezier(.16,.84,.24,1) calc(var(--d) * 46ms + 80ms); }

/* producto */
.es-corte { position: absolute; z-index: 3; left: 50%; top: 21%; width: 72%; height: 50%; margin-left: -36%; display: flex; align-items: center; justify-content: center; pointer-events: none;
  transform: translateY(36px) scale(.84); opacity: 0; transition: transform .3s cubic-bezier(.5,0,.75,0), opacity .25s ease; }
.es-corte.on { transform: none; opacity: 1; transition: transform .8s cubic-bezier(.16,.84,.24,1) .18s, opacity .35s ease .18s; }
.es-corte img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(0,0,0,.42)); animation: flota 4.2s ease-in-out infinite alternate; will-change: transform; }
.escenario[data-v="aperitivo"] .es-corte { top: 17%; height: 56%; }
.escenario[data-v="bodegon"] .es-corte { width: 86%; margin-left: -43%; top: 25%; height: 44%; }
.escenario[data-v="restaurante"] .es-corte { width: 80%; margin-left: -40%; }
@keyframes flota { from { transform: translateY(4px) rotate(-1.2deg); } to { transform: translateY(-8px) rotate(1.2deg); } }
.es-corte2 { position: absolute; z-index: 4; left: 7%; top: 40%; width: 34%; height: 33%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none;
  transform: translate(-30px, 30px) rotate(-14deg) scale(.8); opacity: 0; transition: transform .3s cubic-bezier(.5,0,.75,0), opacity .25s ease; }
.es-corte2.on { transform: rotate(-8deg); opacity: 1; transition: transform .85s cubic-bezier(.16,.84,.24,1) .34s, opacity .35s ease .34s; }
.es-corte2 img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0,0,0,.4)); animation: flota 3.6s ease-in-out -1.2s infinite alternate; }
.escenario:not([data-v="aperitivo"]) .es-corte2 { display: none; }
.escenario[data-v="aperitivo"] .es-corte { margin-left: -28%; }
.escenario[data-v="aperitivo"] .es-sello { left: auto; right: 7%; top: 50%; }
.es-sombra { position: absolute; z-index: 2; left: 50%; top: 74%; width: 52%; height: 26px; margin-left: -26%; opacity: 0; transition: opacity .4s ease .3s; }
.es-sombra.on { opacity: 1; }
.es-sombra i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); animation: sombra 4.2s ease-in-out infinite alternate; }
@keyframes sombra { from { transform: scale(1.04); opacity: .95; } to { transform: scale(.86); opacity: .7; } }

.es-sello { position: absolute; z-index: 4; left: 13%; top: 47%; width: 92px; height: 92px; pointer-events: none; transition: transform .45s cubic-bezier(.2,.7,.2,1) .35s, opacity .3s .35s; }
.es-sello.sale { opacity: 0; transform: scale(.5) rotate(-40deg); transition-delay: 0s; transition-duration: .22s; }

/* cortinas: se juntan hacia afuera y quedan atadas en reloj de arena */
.escenario .tl { z-index: 5; width: 50.5%; transition: clip-path var(--dur, .9s) cubic-bezier(.66,.02,.24,1); }
.escenario .tl-izq { clip-path: polygon(0 0, 100% 0, 100% 12%, 100% 25%, 100% 40%, 100% 52%, 100% 58%, 100% 64%, 100% 75%, 100% 88%, 100% 100%, 0 100%); }
.escenario .tl-der { clip-path: polygon(100% 0, 0 0, 0 12%, 0 25%, 0 40%, 0 52%, 0 58%, 0 64%, 0 75%, 0 88%, 0 100%, 100% 100%); }
.escenario .tl-izq.abierto { clip-path: polygon(0 0, 23% 0, 22% 12%, 19.5% 25%, 15.5% 40%, 12.5% 52%, 11% 58%, 12.5% 64%, 17% 75%, 24% 88%, 30% 100%, 0 100%); }
.escenario .tl-der.abierto { clip-path: polygon(100% 0, 77% 0, 78% 12%, 80.5% 25%, 84.5% 40%, 87.5% 52%, 89% 58%, 87.5% 64%, 83% 75%, 76% 88%, 70% 100%, 100% 100%); }
.escenario .tl .tl-lazo { display: none; }
.es-lazo { position: absolute; z-index: 6; top: 56.5%; width: 7.4%; height: 13px; border-radius: 7px; background: linear-gradient(180deg, var(--laton-claro), var(--laton) 55%, #7C5B22); box-shadow: 0 3px 5px rgba(0,0,0,.45); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.es-lazo::after { content: ''; position: absolute; top: 10px; width: 9px; height: 30px; border-radius: 3px 3px 8px 8px; background: repeating-linear-gradient(90deg, #E8C77A 0 1.5px, #9C7630 1.5px 3px); }
.es-lazo.izq { left: -2px; transform: rotate(-6deg); }
.es-lazo.izq::after { right: 3px; }
.es-lazo.der { right: -2px; transform: rotate(6deg); }
.es-lazo.der::after { left: 3px; }
.escenario.abierto .es-lazo { opacity: 1; transition-delay: .6s; }

/* bambalina con flecos de latón */
.es-bambalina { position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 7; background: url(assets/telon.jpg) center 30% / 300px auto; box-shadow: 0 10px 16px -6px rgba(0,0,0,.55); }
.es-bambalina::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #8C6A2B, var(--laton-claro) 20%, var(--laton) 50%, var(--laton-claro) 80%, #8C6A2B); }
.es-bambalina::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: repeating-linear-gradient(90deg, rgba(232,199,122,.95) 0 1.5px, transparent 1.5px 4px); }
.es-bambalina i { position: absolute; left: 0; right: 0; top: calc(100% + 8px); height: 16px; background: radial-gradient(circle at 50% 0, #0A3C48 13px, transparent 13.5px) 0 0 / 30px 16px repeat-x; }

/* candilejas: el borde del escenario con luces */
.es-candilejas { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 30px; pointer-events: none;
  background: radial-gradient(ellipse 14px 18px at 50% 100%, rgba(255,214,140,.95) 0 3px, rgba(255,200,120,.35) 6px, transparent 15px) 0 100% / 34px 30px repeat-x; }
.es-candilejas::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #7C5B22, var(--laton-claro) 25%, var(--laton) 50%, var(--laton-claro) 75%, #7C5B22); }

/* datos y botones, sobre el piso */
.es-info { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; padding: 50px 18px 24px; background: linear-gradient(180deg, transparent, rgba(4,18,22,.72) 46%, rgba(4,18,22,.9)); }
.ei-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.ei-fila .estado { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--papel); }
.ei-fila .estado i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--laton-claro); }
.ei-fila .estado.abierto i { background: #5BD08A; }
.ei-fila .estado.abierto i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #5BD08A; animation: latido 1.6s ease-out infinite; }
@keyframes latido { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.ei-fila .deslizar { color: rgba(251,248,242,.72); }
.ei-fila .deslizar::after { background: rgba(251,248,242,.72); }
.ei-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ei-botones .boton { min-height: 50px; white-space: nowrap; }
.boton.fantasma { background: rgba(251,248,242,.08); color: var(--papel); border-color: rgba(251,248,242,.85); box-shadow: none; }
.deslizar { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.deslizar::after { content: ''; width: 30px; height: 1.5px; animation: desliza 1.8s ease-in-out infinite; transform-origin: left; }
@keyframes desliza { 0%, 100% { transform: scaleX(.4); } 50% { transform: scaleX(1); } }

/* sellos */
.sello { position: relative; width: 100%; height: 100%; border-radius: 50%; background: var(--tinta); color: var(--papel); box-shadow: 0 4px 0 rgba(0,0,0,.4); display: grid; place-items: center; transform: rotate(-8deg); }
.sello.cobalto { background: var(--cobalto); }
.sello.ocre { background: var(--ocre); color: var(--tinta); }
.sello.crema { background: var(--papel); color: var(--tinta); }
.sello svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 22s linear infinite; }
.sello text { font-family: var(--mono); font-size: 9.6px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: currentColor; }
.sello b { position: relative; font-family: var(--cond); font-weight: 800; font-size: 24px; letter-spacing: -.01em; line-height: 1; }
.sello b small { display: block; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-align: center; margin-bottom: 2px; opacity: .85; }
@keyframes gira { to { transform: rotate(360deg); } }

/* cinta con sus frases, en movimiento */
.cinta { position: relative; z-index: 9; margin: -20px -12px 0; transform: rotate(-2.4deg); background: var(--cobalto); border-block: 2px solid var(--tinta); overflow: hidden; box-shadow: 0 6px 0 rgba(23,25,26,.18); }
.cinta-in { display: flex; width: max-content; animation: cinta 26s linear infinite; }
.cinta-in span { font-family: var(--cond); font-weight: 800; font-size: 21px; letter-spacing: .06em; text-transform: uppercase; color: var(--papel); padding: 9px 0; white-space: nowrap; }
.cinta-in span::after { content: '✦'; color: var(--laton-claro); margin: 0 16px; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* programa: las tres versiones como entradas de teatro */
.programa { list-style: none; margin: 22px 16px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--tinta); border-radius: 14px; overflow: hidden; background: var(--papel); }
.programa li + li { border-left: 1.5px dashed rgba(23,25,26,.55); }
.programa button { width: 100%; padding: 10px 8px 11px; text-align: left; display: flex; flex-direction: column; gap: 2px; min-height: 76px; transition: background .2s, color .2s; }
.programa .pg-h { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; }
.programa .pg-n { font-family: var(--cond); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.programa .pg-d { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.programa .pg-ahora { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--verde-ok); text-transform: uppercase; }
.programa button.on { background: var(--tinta); color: var(--papel); }
.programa button.on .pg-d { color: rgba(251,248,242,.7); }
.programa button.on .pg-ahora { color: #7FD6A0; }

/* ---------- bloques del inicio ---------- */
.bloque { margin-top: 30px; }
.bloque-tit { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 0 16px 12px; row-gap: 4px; }
.bloque-tit .mono { grid-column: 1 / -1; color: var(--tinta-2); }
.bloque-tit h2 { font-family: var(--cond); font-size: 30px; line-height: .95; text-transform: uppercase; }
.ver-todo { font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid; padding-bottom: 1px; }

.riel { display: flex; gap: 12px; overflow-x: auto; padding: 4px 16px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.riel::-webkit-scrollbar { display: none; }
.afiche { flex: 0 0 72%; max-width: 300px; scroll-snap-align: start; text-align: left; background: var(--papel); border: 1.5px solid var(--tinta); border-radius: 18px; overflow: hidden; box-shadow: var(--canto); display: flex; flex-direction: column; }
.afiche .af-foto { position: relative; aspect-ratio: 4 / 5; background: var(--yeso-2); }
.afiche .af-foto img { width: 100%; height: 100%; object-fit: cover; }
.afiche .af-fecha { position: absolute; left: 10px; bottom: 10px; width: 74px; height: 74px; }
.afiche .af-fecha .sello b { font-size: 21px; }
.afiche .af-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.afiche .af-tipo { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.afiche .af-n { font-family: var(--cond); font-weight: 800; font-size: 23px; line-height: 1; text-transform: uppercase; }
.afiche .af-cuando { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.afiche .af-quedan { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vino); margin-top: 2px; }

/* club en el inicio */
.club-tarjeta {
  position: relative; display: block; width: calc(100% - 32px); margin: 0 16px; min-height: 236px; text-align: left; overflow: hidden;
  border-radius: var(--radio); padding: 20px 18px 18px; color: var(--papel);
  background: linear-gradient(90deg, rgba(5,42,51,.94) 0%, rgba(5,42,51,.7) 60%, rgba(5,42,51,.35)), url(assets/telon.jpg) center / 320px auto;
  border: 1.5px solid var(--tinta); box-shadow: var(--canto);
}
.club-tarjeta .mono { color: var(--laton-claro); }
.ct-tit { display: block; font-family: var(--cond); font-weight: 900; font-size: 34px; line-height: .92; text-transform: uppercase; margin-top: 8px; max-width: 58%; }
.ct-txt { display: block; font-size: 14px; line-height: 1.35; margin-top: 8px; max-width: 58%; color: rgba(251,248,242,.86); }
.ct-velas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; max-width: 62%; }
.ct-velas span { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(251,248,242,.45); }
.ct-velas span.on { background: var(--cobalto); border-color: var(--cobalto); }
.club-tarjeta .candelabro { position: absolute; right: 6px; bottom: 0; width: 42%; height: 92%; }

/* candelabro (svg dibujado por app.js) */
.candelabro svg { width: 100%; height: 100%; overflow: visible; }
.candelabro .llama { transform-box: fill-box; transform-origin: 50% 100%; animation: llama 1.4s ease-in-out infinite alternate; }
.candelabro .llama.b { animation-duration: 1.1s; animation-delay: -.4s; }
.candelabro .llama.c { animation-duration: 1.7s; animation-delay: -.9s; }
.candelabro .halo { transform-box: fill-box; transform-origin: 50% 50%; animation: halo 2.6s ease-in-out infinite alternate; }
.candelabro .apagada .llama, .candelabro .apagada .halo { display: none; }
.candelabro .prende .llama { animation: prende .9s cubic-bezier(.2,.7,.2,1) both, llama 1.4s ease-in-out .9s infinite alternate; }
@keyframes llama { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(.94, 1.08) rotate(2deg); } 100% { transform: scale(1.04, .95) rotate(-1deg); } }
@keyframes halo { from { transform: scale(.92); opacity: .8; } to { transform: scale(1.08); opacity: 1; } }
@keyframes prende { from { transform: scale(0, 0); } 60% { transform: scale(1.1, 1.25); } to { transform: none; } }

/* raspá la pared */
.raspa-tarjeta {
  display: grid; grid-template-columns: 38% 1fr; width: calc(100% - 32px); margin: 0 16px; text-align: left; overflow: hidden;
  border-radius: var(--radio); background: var(--ocre); border: 1.5px solid var(--tinta); box-shadow: var(--canto); min-height: 196px;
}
.rt-pared { position: relative; background: url(assets/pared-b.jpg) center / cover; border-right: 1.5px solid var(--tinta); }
.rt-hueco { position: absolute; left: 22%; top: 24%; width: 58%; aspect-ratio: 1; background: var(--cobalto); border-radius: 46% 54% 42% 58% / 55% 40% 60% 45%; display: grid; place-items: center; box-shadow: inset 0 0 0 3px rgba(255,255,255,.18); transform: rotate(-6deg); }
.rt-hueco b { font-family: var(--cond); font-weight: 900; font-size: 44px; color: #fff; }
.rt-texto { padding: 16px 16px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rt-tit { font-family: var(--cond); font-weight: 900; font-size: 32px; line-height: .92; text-transform: uppercase; }
.rt-txt { font-size: 13.5px; line-height: 1.32; }
.rt-texto .boton { margin-top: 4px; }

/* picoteo para llevar, como su flyer */
.picoteo { position: relative; margin: 0 16px; border-radius: var(--radio); overflow: hidden; border: 1.5px solid var(--tinta); box-shadow: var(--canto); min-height: 380px; color: #fff; }
.picoteo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.picoteo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.25), rgba(10,10,10,.62) 55%, rgba(10,10,10,.78)); }
.pic-marco { position: relative; margin: 16px; min-height: calc(380px - 32px); border: 1.5px solid rgba(255,255,255,.9); padding: 22px 16px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; justify-content: flex-end; }
.pic-marca { font-family: var(--cond); font-weight: 600; letter-spacing: .2em; font-size: 15px; }
.pic-tit { font-family: var(--cond); font-weight: 900; font-size: 40px; line-height: .88; text-transform: uppercase; }
.pic-txt { font-size: 14px; opacity: .92; }
.pic-precios { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 8px 0 10px; }
.pic-precios b { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; padding: 6px 9px; border: 1px solid rgba(255,255,255,.7); border-radius: 6px; font-weight: 500; }

/* catering */
.catering { margin: 0 16px; border-radius: var(--radio); background: var(--cobalto); color: #fff; padding: 20px 18px 18px; border: 1.5px solid var(--tinta); box-shadow: var(--canto); }
.catering .mono { color: rgba(255,255,255,.8); }
.cat-tit { font-family: var(--cond); font-weight: 900; font-size: 34px; line-height: .92; text-transform: uppercase; margin-top: 8px; }
.cat-lista { list-style: none; margin: 14px 0 16px; padding: 0; border-top: 1px solid rgba(255,255,255,.4); }
.cat-lista li { display: grid; grid-template-columns: 34px 1fr; gap: 4px 6px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.4); }
.cat-lista .num { font-family: var(--mono); font-size: 12px; font-weight: 700; padding-top: 3px; }
.cat-lista b { font-family: var(--cond); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1.05; }
.cat-lista small { grid-column: 2; font-size: 13px; line-height: 1.3; opacity: .86; }
.catering .boton.cobalto { background: var(--papel); color: var(--tinta); }

/* pie con la baldosa calcárea del salón */
.info { margin-top: 34px; background: var(--terciopelo-osc); color: var(--papel); padding: 0 0 30px; }
.info::before { content: ''; display: block; height: 46px; background: var(--baldosa) 0 0 / 46px 46px; border-top: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta); }
.info-in { padding: 22px 18px 0; }
.info .marca { font-family: var(--cond); font-weight: 600; font-size: 26px; letter-spacing: .2em; }
.info .dir { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; margin-top: 6px; color: rgba(251,248,242,.78); }
.info table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.info td { padding: 9px 0; border-top: 1px solid rgba(251,248,242,.2); vertical-align: top; }
.info td:first-child { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: .04em; width: 42%; }
.info td:last-child { font-family: var(--mono); font-size: 12px; text-align: right; color: rgba(251,248,242,.85); }
.info .links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.info .links a { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 999px; border: 1.5px solid rgba(251,248,242,.7); text-decoration: none; font-family: var(--cond); font-weight: 700; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; }
.info .links a.lleno { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.info .firma { margin-top: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,248,242,.45); text-align: center; }

/* ---------- barra inferior ---------- */
.barra {
  position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(10px + var(--seguro-abajo)); height: var(--barra-h);
  max-width: 520px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: var(--terciopelo-osc); border-radius: 24px; border: 1.5px solid var(--tinta);
  box-shadow: 0 14px 30px -12px rgba(5,42,51,.65);
}
.barra button { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(251,248,242,.58); transition: color .2s; position: relative; }
.barra button svg { width: 23px; height: 23px; }
.barra button span { font-family: var(--cond); font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.barra button.on { color: var(--papel); }
.barra button.on::after { content: ''; position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--laton-claro); }
.barra .barra-vela { align-self: start; }
.barra .barra-vela::after { display: none; }
.bv-vela { position: relative; display: block; width: 64px; height: 64px; margin-top: -20px; border-radius: 50%; background: var(--papel); border: 1.5px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta); }
.bv-cuerpo { position: absolute; left: 50%; top: 24px; width: 12px; height: 26px; margin-left: -6px; border-radius: 3px 3px 2px 2px; background: linear-gradient(90deg, #1A40B0, var(--cobalto) 45%, #4D78F0 60%, var(--cobalto)); }
.bv-base { position: absolute; left: 50%; top: 48px; width: 24px; height: 6px; margin-left: -12px; border-radius: 3px; background: linear-gradient(180deg, var(--laton-claro), var(--laton)); }
.bv-llama { position: absolute; left: 50%; top: 9px; width: 10px; height: 15px; margin-left: -5px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 50% 72%, #FFF6D6 0 28%, #FFC94A 46%, #F07A1F 80%); transform-origin: 50% 100%; animation: llama 1.3s ease-in-out infinite alternate; }
.barra-vela.on .bv-vela { background: var(--laton-claro); }

/* pedido flotante (mesa) */
.pedido-flota { position: fixed; z-index: 49; left: 16px; right: 16px; bottom: calc(var(--barra-h) + 22px + var(--seguro-abajo)); max-width: 500px; margin: 0 auto; }
.pf-boton { width: 100%; height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 18px 0 8px; border-radius: 999px; background: var(--cobalto); color: #fff; border: 1.5px solid var(--tinta); box-shadow: var(--canto); font-family: var(--cond); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .05em; }
.pf-n { width: 38px; height: 38px; border-radius: 50%; background: var(--papel); color: var(--tinta); display: grid; place-items: center; font-family: var(--mono); font-size: 14px; }
.pf-txt { flex: 1; text-align: left; }
.pf-boton b { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.pf-boton.salta { animation: salta .45s cubic-bezier(.2,.7,.2,1); }
@keyframes salta { 40% { transform: scale(1.04); } }

/* ---------- hoja ---------- */
.velo { position: fixed; inset: 0; z-index: 70; background: rgba(5, 20, 24, .55); opacity: 0; transition: opacity .25s ease; }
.velo.on { opacity: 1; }
.hoja { position: fixed; z-index: 71; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; transform: translateY(105%); transition: transform .38s cubic-bezier(.2,.75,.2,1); }
.hoja.on { transform: none; }
.hoja-in { position: relative; max-height: calc(92vh - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; background: var(--papel); border-radius: 26px 26px 0 0; border: 1.5px solid var(--tinta); border-bottom: 0; padding: 10px 18px calc(22px + var(--seguro-abajo)); }
.manija { width: 44px; height: 5px; border-radius: 3px; background: rgba(23,25,26,.25); margin: 0 auto 12px; }
.hoja-cerrar { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--yeso); border: 1.5px solid var(--tinta); z-index: 3; }
.hoja-cerrar svg { width: 16px; height: 16px; }
.hoja h3 { font-family: var(--cond); font-weight: 900; font-size: 34px; line-height: .95; text-transform: uppercase; padding-right: 44px; }
.hoja .sub { font-size: 14.5px; color: var(--tinta-2); margin-top: 8px; line-height: 1.4; }
.hoja .pie-fijo { position: sticky; bottom: calc(-22px - var(--seguro-abajo)); margin: 16px -18px calc(-22px - var(--seguro-abajo)); padding: 12px 18px calc(16px + var(--seguro-abajo)); background: linear-gradient(180deg, rgba(251,248,242,0), var(--papel) 28%); z-index: 2; }

/* ficha del plato */
.ficha-foto { margin: 0 -6px; border-radius: 16px; overflow: hidden; background: var(--yeso-2); border: 1.5px solid var(--tinta); }
.ficha-foto img { width: 100%; height: auto; max-height: 52vh; object-fit: cover; }
.ficha-foto.corte { background: var(--fondo-corte, var(--terciopelo)); border: 1.5px solid var(--tinta); display: grid; place-items: center; padding: 18px; }
.ficha-foto.corte img { width: auto; max-width: 78%; max-height: 38vh; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0,0,0,.35)); }
.ficha-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 14px; }
.ficha-cab h3 { padding-right: 0; }
.ficha-precio { font-family: var(--mono); font-weight: 700; font-size: 17px; padding-top: 6px; white-space: nowrap; }
.ficha-de { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); margin-top: 4px; }
.ficha-txt { font-size: 15.5px; line-height: 1.45; margin-top: 10px; color: var(--tinta-2); }
.ficha-acciones { display: flex; gap: 10px; align-items: center; }
.cantidad { display: flex; align-items: center; border: 1.5px solid var(--tinta); border-radius: 999px; height: 48px; background: var(--papel); }
.cantidad button { width: 44px; height: 100%; font-size: 22px; font-weight: 600; }
.cantidad b { min-width: 22px; text-align: center; font-family: var(--mono); }
.ficha-acciones .boton { flex: 1; }
.guardar { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1.5px solid var(--tinta); display: grid; place-items: center; background: var(--papel); box-shadow: var(--canto); }
.guardar svg { width: 22px; height: 22px; }
.guardar.on { background: var(--vino); color: #fff; }

/* ---------- carta ---------- */
.cartas-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 6px; scrollbar-width: none; position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 20; background: var(--yeso); }
.cartas-tabs::-webkit-scrollbar { display: none; }
.cartas-tabs button { flex: none; height: 40px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--tinta); font-family: var(--cond); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; background: var(--papel); display: flex; align-items: center; gap: 7px; }
.cartas-tabs button i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-ok); }
.cartas-tabs button.on { background: var(--tinta); color: var(--papel); }
.carta-cab { position: relative; margin: 12px 16px 0; border-radius: 18px; overflow: hidden; border: 1.5px solid var(--tinta); min-height: 178px; padding: 46px 26px 16px; color: var(--tit, var(--tinta)); display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; box-shadow: var(--canto); }
.carta-cab::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 3; background: url(assets/telon.jpg) center 30% / 260px auto; border-bottom: 3px solid var(--laton); box-shadow: 0 6px 10px -4px rgba(0,0,0,.45); }
.carta-cab::after { content: ''; position: absolute; left: 0; right: 0; top: 29px; height: 10px; z-index: 3; background: radial-gradient(circle at 50% 0, #0A3C48 8px, transparent 8.5px) 0 0 / 20px 10px repeat-x; }
.carta-cab .cc-tl { position: absolute; top: 0; bottom: 0; width: 16px; z-index: 2; background: url(assets/telon.jpg) center / 60px auto; }
.carta-cab .cc-tl.izq { left: 0; box-shadow: 4px 0 8px rgba(0,0,0,.35); }
.carta-cab .cc-tl.der { right: 0; box-shadow: -4px 0 8px rgba(0,0,0,.35); }
.carta-cab.pared { --tit: #0C3742; background: radial-gradient(ellipse 60% 90% at 40% 0, rgba(255,236,196,.35), transparent 70%), url(assets/pared-b.jpg) center / cover; }
.carta-cab.cobalto { --tit: #FBF1DE; background: radial-gradient(ellipse 60% 90% at 40% 0, rgba(255,236,196,.3), transparent 70%), radial-gradient(70% 60% at 60% 30%, #4A78F5, var(--cobalto) 50%, #0F2A78); }
.carta-cab.sol { --tit: #1A3DA8; background: radial-gradient(ellipse 60% 90% at 40% 0, rgba(255,250,228,.5), transparent 70%), radial-gradient(85% 70% at 50% 18%, #FFE08A, var(--sol) 50%, #C98A22); }
.carta-cab.bar { --tit: #FBF1DE; background: radial-gradient(ellipse 60% 90% at 40% 0, rgba(255,236,196,.22), transparent 70%), var(--terciopelo); }
.carta-cab .cc-n { position: relative; z-index: 1; font-family: var(--cond); font-weight: 900; font-size: 56px; line-height: .84; text-transform: uppercase; text-shadow: 0 .05em 0 rgba(0,0,0,.2); max-width: 70%; }
.carta-cab.cobalto .cc-n { text-shadow: 0 .05em 0 #0D2A7C; }
.carta-cab.sol .cc-n { text-shadow: 0 .05em 0 #A9761F; }
.carta-cab .cc-h { position: relative; z-index: 1; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; align-self: flex-start; padding: 5px 8px; border-radius: 6px; background: rgba(4,18,22,.82); color: var(--papel); }
.carta-cab img.cc-corte { position: absolute; z-index: 1; right: 14px; top: 34px; bottom: 6px; width: 46%; height: auto; object-fit: contain; object-position: 100% 50%; filter: drop-shadow(0 12px 14px rgba(0,0,0,.35)); pointer-events: none; animation: flota 4.2s ease-in-out infinite alternate; }
.combos { margin: 14px 16px 0; display: grid; gap: 8px; }
.combo { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; background: var(--cobalto); color: #fff; border-radius: 12px; border: 1.5px solid var(--tinta); text-align: left; }
.combo b { font-family: var(--cond); font-weight: 700; font-size: 18px; text-transform: uppercase; line-height: 1.05; letter-spacing: .02em; }
.combo span { font-family: var(--mono); font-weight: 700; font-size: 14px; }

.seccion { display: grid; grid-template-columns: 34px 1fr; margin: 16px 16px 0; border: 1.5px solid var(--tinta); background: var(--papel); border-radius: 4px; }
.seccion-rotulo { border-right: 1.5px solid var(--tinta); display: flex; align-items: center; justify-content: center; padding: 14px 0; }
.seccion-rotulo span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--cond); font-weight: 800; font-size: 16px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.items { padding: 4px 0; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; width: 100%; text-align: left; padding: 12px 12px 12px 14px; }
.item + .item { border-top: 1px dashed rgba(23,25,26,.3); }
.item.con-foto { grid-template-columns: 66px 1fr auto; }
.item.con-mas { grid-template-columns: 1fr auto 36px; }
.item.con-foto.con-mas { grid-template-columns: 66px 1fr auto 36px; }
.item .it-n { grid-column: 1; grid-row: 1; font-family: var(--cond); font-weight: 800; font-size: 19px; line-height: 1.02; text-transform: uppercase; letter-spacing: .015em; }
.item .it-p { grid-column: 2; grid-row: 1; font-family: var(--mono); font-weight: 700; font-size: 13.5px; white-space: nowrap; padding-top: 2px; }
.item .it-d { grid-column: 1; grid-row: 2; font-size: 13.5px; line-height: 1.32; color: var(--tinta-2); }
.item .it-mas { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--tinta); display: grid; place-items: center; font-size: 20px; font-weight: 600; line-height: 1; background: var(--papel); box-shadow: 0 2px 0 var(--tinta); font-family: var(--mono); }
.item.con-foto .it-foto { grid-column: 1; grid-row: 1 / span 2; }
.item.con-foto .it-n, .item.con-foto .it-d { grid-column: 2; }
.item.con-foto .it-p { grid-column: 3; }
.item.con-foto .it-mas { grid-column: 4; }
.item .it-foto { width: 66px; height: 66px; border-radius: 10px; overflow: hidden; background: var(--yeso-2); border: 1px solid rgba(23,25,26,.5); }
.item .it-foto img { width: 100%; height: 100%; object-fit: cover; }
.item .it-foto.corte img { object-fit: contain; padding: 4px; }
.item .it-p small { display: block; font-weight: 400; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); text-align: right; }
.item.en-pedido .it-mas { background: var(--cobalto); color: #fff; }
.item .it-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cobalto); }
.nota-carta { margin: 14px 16px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); line-height: 1.6; }

/* vinos */
.vinos-cab { margin: 22px 16px 0; }
.vinos-cab h2 { font-family: var(--cond); font-size: 40px; line-height: .9; text-transform: uppercase; }
.vinos-cab p { font-size: 14px; color: var(--tinta-2); margin-top: 6px; }
.tipos { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 4px; scrollbar-width: none; }
.tipos::-webkit-scrollbar { display: none; }
.tipos button { flex: none; height: 38px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--tinta); display: flex; align-items: center; gap: 7px; font-family: var(--cond); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; background: var(--papel); }
.tipos button i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.4); }
.tipos button small { font-family: var(--mono); font-size: 10px; opacity: .7; }
.tipos button.on { background: var(--tinta); color: var(--papel); }
.mapa-vinos { display: grid; grid-template-columns: 44% 1fr; gap: 10px; margin: 12px 16px 0; padding: 14px 12px 14px 8px; background: var(--terciopelo-osc); border-radius: 18px; border: 1.5px solid var(--tinta); color: var(--papel); }
.mapa-vinos svg { width: 100%; height: auto; display: block; }
.mapa-vinos path { fill: rgba(251,248,242,.1); stroke: rgba(251,248,242,.35); stroke-width: .8; transition: fill .25s; }
.mapa-vinos path.vino { fill: rgba(196,154,72,.45); cursor: pointer; }
.mapa-vinos path.vino.on { fill: var(--laton-claro); }
.mapa-vinos .vm-punto { fill: var(--cobalto); stroke: #fff; stroke-width: 2; }
.mapa-vinos .vm-txt { font-family: var(--mono); font-size: 15px; font-weight: 700; fill: #fff; letter-spacing: .04em; }
.provs { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.provs .mono { color: var(--laton-claro); margin-bottom: 4px; }
.provs button { display: flex; justify-content: space-between; align-items: center; gap: 6px; text-align: left; padding: 7px 10px; border-radius: 10px; font-family: var(--cond); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .03em; border: 1px solid rgba(251,248,242,.22); }
.provs button b { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: rgba(251,248,242,.14); }
.provs button.on { background: var(--laton-claro); color: var(--tinta); border-color: var(--laton-claro); }
.provs button.on b { background: rgba(0,0,0,.12); }
.vino-item .it-d { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.vino-item .it-n { display: flex; align-items: center; gap: 8px; }
.vino-item .it-n i { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.35); }

/* ---------- club ---------- */
.socio { position: relative; margin: 18px 16px 0; border-radius: 24px; overflow: hidden; color: var(--papel); min-height: 300px; padding: 20px 18px 18px; border: 1.5px solid var(--tinta); box-shadow: var(--canto);
  background: linear-gradient(180deg, rgba(5,42,51,.55), rgba(5,42,51,.92) 70%), url(assets/telon.jpg) center / 330px auto; }
.socio .marca { font-family: var(--cond); font-weight: 600; letter-spacing: .2em; font-size: 22px; }
.socio .mono { color: var(--laton-claro); margin-top: 4px; display: block; }
.socio .num { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; margin-top: 14px; }
.socio .qr { position: absolute; right: 16px; top: 16px; width: 92px; height: 92px; background: var(--papel); border-radius: 10px; padding: 7px; }
.socio .qr svg { width: 100%; height: 100%; }
.socio .candelabro { display: block; width: 100%; height: 170px; margin-top: 8px; }
.socio .velas-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; text-align: center; }
.socio .velas-lista span { font-family: var(--cond); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.socio .velas-lista small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: rgba(251,248,242,.7); font-weight: 400; margin-top: 2px; }
.premio-velas { margin: 12px 16px 0; padding: 14px 16px; border-radius: 16px; background: var(--papel); border: 1.5px solid var(--tinta); display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.premio-velas .pv-n { font-family: var(--cond); font-weight: 900; font-size: 34px; line-height: 1; }
.premio-velas p { font-size: 14px; line-height: 1.35; }
.premio-velas.listo { background: var(--cobalto); color: #fff; }
.club-sec { margin: 26px 16px 0; }
.club-sec h2 { font-family: var(--cond); font-size: 28px; text-transform: uppercase; line-height: .95; }
.club-sec .sub { font-size: 14px; color: var(--tinta-2); margin-top: 4px; }
.lista-simple { margin-top: 10px; border: 1.5px solid var(--tinta); border-radius: 14px; background: var(--papel); overflow: hidden; }
.lista-simple > * { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 12px 14px; width: 100%; text-align: left; }
.lista-simple > * + * { border-top: 1px dashed rgba(23,25,26,.3); }
.lista-simple b { font-family: var(--cond); font-weight: 800; font-size: 18px; text-transform: uppercase; line-height: 1.05; }
.lista-simple small { grid-column: 1; font-size: 13px; color: var(--tinta-2); }
.lista-simple .der { grid-row: span 2; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.vacio { padding: 16px; font-size: 14px; color: var(--tinta-2); text-align: center; border: 1.5px dashed rgba(23,25,26,.4); border-radius: 14px; margin-top: 10px; }
.codigo { display: inline-block; font-family: var(--mono); font-weight: 700; letter-spacing: .14em; padding: 4px 8px; border-radius: 6px; background: var(--tinta); color: var(--papel); font-size: 12px; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 1.5px solid var(--tinta); border-radius: 14px; background: var(--papel); text-align: left; margin-top: 10px; }
.interruptor b { font-family: var(--cond); font-weight: 800; font-size: 18px; text-transform: uppercase; display: block; }
.interruptor small { font-size: 13px; color: var(--tinta-2); }
.interruptor i { flex: none; width: 50px; height: 30px; border-radius: 999px; background: var(--yeso-2); border: 1.5px solid var(--tinta); position: relative; transition: background .2s; }
.interruptor i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--papel); border: 1.5px solid var(--tinta); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.interruptor.on i { background: var(--cobalto); }
.interruptor.on i::after { transform: translateX(20px); }

/* ---------- raspá la pared (juego) ---------- */
.raspa-zona { position: relative; margin: 16px auto 0; width: min(100%, 340px); aspect-ratio: 1; border-radius: 20px; overflow: hidden; border: 1.5px solid var(--tinta); box-shadow: var(--canto); touch-action: none; }
.raspa-premio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px; background: var(--cobalto); color: #fff; gap: 8px; }
.raspa-premio.nada { background: var(--yeso-2); color: var(--tinta); }
.raspa-premio img { width: 46%; height: auto; filter: drop-shadow(0 10px 12px rgba(0,0,0,.3)); }
.raspa-premio b { font-family: var(--cond); font-weight: 900; font-size: 32px; line-height: .92; text-transform: uppercase; }
.raspa-premio small { font-size: 13.5px; line-height: 1.3; opacity: .9; }
.raspa-zona canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity .6s ease; }
.raspa-zona canvas.fuera { opacity: 0; pointer-events: none; }
.raspa-ayuda { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; pointer-events: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; background: var(--papel); padding: 6px 10px; border-radius: 6px; border: 1px solid var(--tinta); transition: opacity .3s; white-space: nowrap; }
.raspa-ayuda.fuera { opacity: 0; }
.cascara { position: absolute; z-index: 3; width: 14px; height: 10px; border-radius: 40% 60% 50% 50%; pointer-events: none; animation: cae 1.1s cubic-bezier(.4,0,.8,.6) forwards; }
@keyframes cae { to { transform: translate(var(--dx), 260px) rotate(var(--rot)); opacity: 0; } }
.raspa-resultado { margin-top: 16px; text-align: center; }
.raspa-resultado p { font-size: 14.5px; color: var(--tinta-2); margin-top: 6px; }

/* ---------- agenda ---------- */
.proximo { margin: 14px 16px 0; border: 1.5px solid var(--tinta); border-radius: 22px; overflow: hidden; background: var(--papel); box-shadow: var(--canto); }
.proximo .px-fotos { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1.5px solid var(--tinta); }
.proximo .px-fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.proximo .px-fotos img + img { border-left: 1.5px solid var(--tinta); }
.proximo .px-in { padding: 16px; }
.proximo h2 { font-family: var(--cond); font-size: 36px; line-height: .9; text-transform: uppercase; margin-top: 6px; }
.proximo .px-cuando { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-top: 10px; }
.proximo p { font-size: 14.5px; line-height: 1.42; margin-top: 8px; color: var(--tinta-2); }
.proximo .px-quedan { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--vino); padding: 5px 8px; border-radius: 6px; }
.proximo .px-acciones { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 14px; }
.semanal { display: grid; gap: 10px; margin: 14px 16px 0; }
.semanal button { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; text-align: left; padding: 8px; border: 1.5px solid var(--tinta); border-radius: 16px; background: var(--papel); }
.semanal img { width: 92px; height: 92px; border-radius: 10px; object-fit: cover; }
.semanal b { font-family: var(--cond); font-weight: 800; font-size: 21px; text-transform: uppercase; line-height: 1; display: block; }
.semanal .mono { display: block; margin-top: 5px; }
.semanal small { display: block; font-size: 13px; color: var(--tinta-2); margin-top: 4px; line-height: 1.3; }
.asi-fue { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 16px 0; }
.asi-fue figure { margin: 0; border: 1.5px solid var(--tinta); border-radius: 14px; overflow: hidden; background: var(--papel); }
.asi-fue img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.85); }
.asi-fue figcaption { padding: 8px 10px 10px; }
.asi-fue b { font-family: var(--cond); font-weight: 800; font-size: 16px; text-transform: uppercase; line-height: 1.02; display: block; }
.asi-fue small { display: block; font-size: 12px; color: var(--tinta-2); margin-top: 3px; line-height: 1.25; }
.asi-fue .mono { font-size: 9.5px; display: block; margin-top: 4px; color: var(--tinta-3); }
.sub-tit { margin: 30px 16px 0; font-family: var(--cond); font-size: 28px; text-transform: uppercase; line-height: .95; }
.sub-tit + .mono { display: block; margin: 4px 16px 0; color: var(--tinta-2); }

/* ---------- reservas ---------- */
.paso { margin: 16px 16px 0; }
.paso-n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.paso h2 { font-family: var(--cond); font-size: 26px; text-transform: uppercase; margin-top: 2px; line-height: 1; }
.versiones-elegir { display: grid; gap: 8px; margin-top: 10px; }
.v-op { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--tinta); background: var(--papel); min-height: 72px; overflow: hidden; }
.v-op b { font-family: var(--cond); font-weight: 900; font-size: 26px; text-transform: uppercase; line-height: 1; }
.v-op small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); grid-column: 1; }
.v-op .v-check { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--tinta); display: grid; place-items: center; background: var(--papel); }
.v-op.on { box-shadow: var(--canto); }
.v-op.on[data-v="aperitivo"] { background: url(assets/pared-b.jpg) center / cover; }
.v-op.on[data-v="aperitivo"] b, .v-op.on[data-v="aperitivo"] small { background: var(--papel); padding: 1px 5px; justify-self: start; }
.v-op.on[data-v="restaurante"] { background: var(--cobalto); color: #fff; }
.v-op.on[data-v="restaurante"] small { color: rgba(255,255,255,.8); }
.v-op.on[data-v="bodegon"] { background: var(--sol); }
.v-op.on .v-check { background: var(--tinta); color: #fff; }
.v-op.on .v-check::after { content: ''; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.fechas { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 6px; margin: 0 -16px; scrollbar-width: none; }
.fechas::-webkit-scrollbar { display: none; }
.fecha { flex: none; width: 64px; height: 80px; border-radius: 14px; border: 1.5px solid var(--tinta); background: var(--papel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.fecha small { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.fecha b { font-family: var(--cond); font-weight: 900; font-size: 30px; line-height: 1; }
.fecha.on { background: var(--tinta); color: var(--papel); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.turnos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.turno { height: 42px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--tinta); background: var(--papel); font-family: var(--mono); font-weight: 700; font-size: 14px; }
.turno.on { background: var(--tinta); color: var(--papel); }
.turno[disabled] { opacity: .35; text-decoration: line-through; }
.personas { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.personas .cantidad { height: 52px; }
.personas .cantidad b { min-width: 40px; font-size: 20px; }
.personas small { font-size: 13.5px; color: var(--tinta-2); line-height: 1.3; }
.campo { display: block; margin-top: 10px; }
.campo span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea { width: 100%; height: 50px; border-radius: 12px; border: 1.5px solid var(--tinta); background: var(--papel); padding: 0 14px; font: inherit; font-size: 16px; color: var(--tinta); }
.campo textarea { height: 90px; padding: 12px 14px; resize: none; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reserva-final { margin: 22px 16px 0; }
.resumen-reserva { margin: 0 0 12px; font-size: 14.5px; color: var(--tinta-2); line-height: 1.4; }
.resumen-reserva b { color: var(--tinta); }

/* ticket de reserva */
.ticket { position: relative; margin: 14px 16px 0; background: var(--papel); border: 1.5px solid var(--tinta); border-radius: 16px; overflow: hidden; }
.ticket-cab { padding: 14px 16px 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ticket-cab.aperitivo { background: url(assets/pared-b.jpg) center / cover; }
.ticket-cab.aperitivo > * { background: var(--papel); padding: 1px 6px; }
.ticket-cab.restaurante { background: var(--cobalto); color: #fff; }
.ticket-cab.bodegon { background: var(--sol); }
.ticket-cab.evento { background: var(--terciopelo); color: var(--papel); }
.ticket-cab b { font-family: var(--cond); font-weight: 900; font-size: 28px; text-transform: uppercase; line-height: 1; }
.ticket-cab .mono { font-size: 10px; }
.ticket-corte { height: 0; border-top: 1.5px dashed var(--tinta); position: relative; }
.ticket-corte::before, .ticket-corte::after { content: ''; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--yeso); border: 1.5px solid var(--tinta); }
.ticket-corte::before { left: -11px; }
.ticket-corte::after { right: -11px; }
.ticket-cuerpo { padding: 12px 16px 14px; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; }
.ticket-cuerpo div small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.ticket-cuerpo div b { font-family: var(--cond); font-weight: 800; font-size: 21px; text-transform: uppercase; }
.ticket-acciones { display: flex; gap: 8px; padding: 0 16px 14px; flex-wrap: wrap; }
.ticket-acciones .boton { flex: 1; min-width: 120px; }
.hoja .ticket { margin: 16px 0 0; }
.hoja .ticket-corte::before, .hoja .ticket-corte::after { background: var(--papel); }

/* ---------- mi mesa ---------- */
.ronda { margin: 16px 16px 0; border: 1.5px solid var(--tinta); border-radius: 20px; background: var(--papel); overflow: hidden; box-shadow: var(--canto); }
.ronda-cab { display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 16px 10px; background: var(--tinta); color: var(--papel); }
.ronda-cab b { font-family: var(--cond); font-weight: 900; font-style: italic; font-size: 40px; line-height: .85; text-transform: uppercase; }
.ronda-cab span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-align: right; }
.pista { display: grid; grid-template-columns: repeat(4, 1fr); padding: 16px 12px 6px; position: relative; }
.pista::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 29px; height: 3px; background: var(--yeso-2); }
.pista .barra-av { position: absolute; left: 12.5%; top: 29px; height: 3px; background: var(--cobalto); width: calc(75% * var(--av, 0)); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.pista div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pista i { width: 30px; height: 30px; border-radius: 50%; background: var(--papel); border: 1.5px solid var(--tinta); display: grid; place-items: center; z-index: 1; font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.pista div.ok i { background: var(--cobalto); color: #fff; border-color: var(--cobalto); }
.pista div.ahora i { background: var(--tinta); color: #fff; }
.pista small { font-family: var(--cond); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; }
.ronda-estado { padding: 6px 16px 12px; font-family: var(--cond); font-weight: 800; font-size: 24px; text-transform: uppercase; }
.ronda-items { padding: 0 16px 14px; }
.ronda-items div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed rgba(23,25,26,.3); font-size: 14.5px; }
.ronda-items span:last-child { font-family: var(--mono); font-size: 13px; }
.cuenta-total { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 16px 0; padding: 14px 16px; border-radius: 16px; background: var(--terciopelo-osc); color: var(--papel); }
.cuenta-total b { font-family: var(--cond); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.cuenta-total span { font-family: var(--mono); font-size: 20px; font-weight: 700; }
.pedido-lista { margin-top: 14px; }
.pedido-lista .pl-it { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px dashed rgba(23,25,26,.3); }
.pl-it b { font-family: var(--cond); font-weight: 800; font-size: 18px; text-transform: uppercase; line-height: 1.05; }
.pl-it small { display: block; font-size: 12.5px; color: var(--tinta-2); }
.pl-it .cantidad { height: 38px; }
.pl-it .cantidad button { width: 34px; font-size: 18px; }
.pl-it .pl-p { font-family: var(--mono); font-size: 13px; font-weight: 700; min-width: 70px; text-align: right; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.opciones button { height: 42px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--tinta); background: var(--papel); font-family: var(--cond); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.opciones button.on { background: var(--tinta); color: var(--papel); }

/* ---------- aviso ---------- */
.aviso { position: fixed; z-index: 90; left: 16px; right: 16px; top: calc(70px + env(safe-area-inset-top, 0px)); max-width: 460px; margin: 0 auto; padding: 13px 16px; border-radius: 14px; background: var(--tinta); color: var(--papel); font-size: 14.5px; line-height: 1.35; border: 1.5px solid var(--tinta); box-shadow: 0 12px 26px -10px rgba(0,0,0,.5); opacity: 0; transform: translateY(-12px); transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.aviso.ver { opacity: 1; transform: none; }
.aviso b { color: var(--laton-claro); }

/* baldosa calcárea del piso del salón (patrón propio, en svg) */
:root {
  --baldosa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23E6D6B8'/%3E%3Cpath d='M30 0C30 17 17 30 0 30M30 0C30 17 43 30 60 30M30 60C30 43 17 30 0 30M30 60C30 43 43 30 60 30' fill='none' stroke='%239A4E28' stroke-width='3.2'/%3E%3Cpath d='M0 0h60v60H0z' fill='none' stroke='%239A4E28' stroke-width='2.4'/%3E%3Cellipse cx='30' cy='13' rx='3.4' ry='6' fill='%23221C17'/%3E%3Cellipse cx='30' cy='47' rx='3.4' ry='6' fill='%23221C17'/%3E%3Cellipse cx='13' cy='30' rx='6' ry='3.4' fill='%23221C17'/%3E%3Cellipse cx='47' cy='30' rx='6' ry='3.4' fill='%23221C17'/%3E%3Ccircle cx='30' cy='30' r='5' fill='%23B9693A'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23B9693A'/%3E%3Ccircle cx='60' cy='0' r='6' fill='%23B9693A'/%3E%3Ccircle cx='0' cy='60' r='6' fill='%23B9693A'/%3E%3Ccircle cx='60' cy='60' r='6' fill='%23B9693A'/%3E%3C/svg%3E");
}

/* ---------- pantallas anchas (iPad parado, compu) ---------- */
@media (min-width: 700px) {
  #app { max-width: 920px; }
  .top { padding-left: max(24px, calc((100vw - 920px) / 2)); padding-right: max(24px, calc((100vw - 920px) / 2)); }
  .escenario { height: clamp(500px, calc(100vh - 180px), 640px); margin: 20px 24px 0; border-radius: 28px; border: 1.5px solid var(--tinta); box-shadow: 0 26px 50px -26px rgba(5,42,51,.8); }
  .es-titulo { top: 84px; }
  .saludo { top: 62px; }
  .es-corte, .escenario[data-v] .es-corte { width: 56%; margin-left: -28%; top: 31%; height: 45%; }
  .escenario[data-v="aperitivo"] .es-corte { top: 29%; height: 49%; }
  .es-sombra { width: 40%; margin-left: -20%; }
  .es-corte2 { left: 14%; top: 44%; width: 24%; height: 32%; }
  .escenario[data-v="aperitivo"] .es-sello { right: 14%; }
  .es-sello { left: 16%; top: 46%; width: 118px; height: 118px; }
  .sello b { font-size: 28px; }
  .es-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 70px 40px 34px; }
  .ei-fila { flex-direction: column; align-items: flex-start; margin: 0 0 6px; gap: 8px; }
  .ei-botones { width: min(440px, 56%); }
  .es-lazo { width: 6%; }
  .cinta { margin: -22px 8px 0; }
  .programa { margin-left: 24px; margin-right: 24px; }
  .programa .pg-n { font-size: 24px; }
  #v-inicio > .mesa-acciones { padding-left: 24px; padding-right: 24px; }
  .bloque-tit { padding-left: 24px; padding-right: 24px; }
  .riel { padding-left: 24px; padding-right: 24px; }
  .afiche { flex-basis: 260px; }
  .inicio-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 24px 0; }
  .inicio-grilla > .bloque { margin: 0; }
  .inicio-grilla .club-tarjeta, .inicio-grilla .raspa-tarjeta, .inicio-grilla .picoteo, .inicio-grilla .catering { width: 100%; margin: 0; height: 100%; }
  .club-tarjeta, .raspa-tarjeta, .picoteo, .catering { width: calc(100% - 48px); margin-left: 24px; margin-right: 24px; }
  .info-in { max-width: 920px; margin: 0 auto; padding-left: 24px; padding-right: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px; }
  .info .links { align-self: start; }
  .vista-tit { padding-left: 24px; padding-right: 24px; }
  .cartas-tabs { padding-left: 24px; padding-right: 24px; }
  .carta-cab { min-height: 230px; padding: 54px 34px 20px; }
  .carta-cab .cc-n { font-size: 84px; }
  .carta-cab img.cc-corte { width: 38%; right: 40px; }
  .carta-cab, .combos, .nota-carta, .vinos-cab, .mapa-vinos, .proximo, .semanal, .asi-fue, .sub-tit, .paso, .reserva-final, .socio, .premio-velas, .club-sec, .ticket, .ronda, .cuenta-total { margin-left: 24px; margin-right: 24px; }
  .tipos { padding-left: 24px; padding-right: 24px; }
  .secciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0 24px; align-items: start; }
  .secciones .seccion { margin-left: 0; margin-right: 0; }
  .combos { grid-template-columns: 1fr 1fr; }
  .mapa-vinos { grid-template-columns: 240px 1fr; padding: 20px; }
  .proximo { display: grid; grid-template-columns: 1.1fr 1fr; }
  .proximo .px-fotos { border-bottom: 0; border-right: 1.5px solid var(--tinta); }
  .semanal { grid-template-columns: 1fr 1fr; }
  .asi-fue { grid-template-columns: repeat(3, 1fr); }
  .socio { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; min-height: 260px; }
  .socio .candelabro { grid-row: span 3; grid-column: 2; height: 210px; margin-top: 30px; }
  .socio .qr { right: auto; left: 18px; top: auto; bottom: 18px; position: absolute; }
  .club-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0 24px; }
  .club-dos .club-sec { margin-left: 0; margin-right: 0; }
  .versiones-elegir { grid-template-columns: repeat(3, 1fr); }
  .hoja { left: 50%; right: auto; bottom: auto; top: 50%; width: min(620px, calc(100vw - 48px)); transform: translate(-50%, -46%) scale(.98); opacity: 0; transition: transform .3s cubic-bezier(.2,.75,.2,1), opacity .2s; }
  .hoja.on { transform: translate(-50%, -50%); opacity: 1; }
  .hoja-in { border-radius: 26px; border-bottom: 1.5px solid var(--tinta); max-height: 88vh; padding-bottom: 22px; }
  .hoja .pie-fijo { bottom: -22px; margin-bottom: -22px; padding-bottom: 16px; border-radius: 0 0 26px 26px; }
  .barra { max-width: 560px; }
  .ficha-foto img { max-height: 46vh; }
}
@media (min-width: 1100px) {
  .escenario { height: clamp(500px, calc(100vh - 180px), 680px); }
  .afiche { flex-basis: 280px; }
  .secciones { grid-template-columns: 1fr 1fr; }
}

/* entrada: después de juntarse, las cortinas salen de cuadro */
#intro .tl { transition: transform .75s cubic-bezier(.6,0,.3,1); }
#intro .tl-izq.fuera { transform: translateX(-102%); }
#intro .tl-der.fuera { transform: translateX(102%); }
.in-marca.vuela { animation: none; opacity: 1; transition: transform .85s cubic-bezier(.65,0,.25,1); }