/* NYE 2026 bookings — shared styles, themed per venue */

* { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; }

[hidden] { display: none !important; }

:root {
  --navh: 54px;
}

/* ---- Spoons: TEMA 7 elegido por Robert — crema clara + dorado viejo,
        Playfair Display (elegante de Nochevieja) + Jost ---- */
body.theme-spoons {
  --gold: #a5761c; --gold2: #c99a34; --gold3: #8a6414; --onacc: #fffaf0;
  --bg: #f4eee1; --ink: #2c2415; --muted: #7a6a4c; --dim: #a2926f;
  --line: rgba(90,70,30,.18); --panel: rgba(90,70,30,.06);
  --bgfx: radial-gradient(125% 78% at 50% -6%, #fdf8ec 0%, #f4eee1 46%, #e7ddc8 100%);
  --cardbg: linear-gradient(150deg, #fffdf6, #faf4e6);
  --navbg: rgba(252,248,238,.96);
  --font-head: Fraunces, "Playfair Display", serif;
  --font-body: Jost, system-ui, sans-serif;
}

/* ---- Kings: base clara verde pero UN PUNTO más oscura que Spoons
        (local más nocturno — petición de Robert) ---- */
body.theme-kings {
  --gold: #8a6a10; --gold2: #ad8a24; --gold3: #6d520b; --onacc: #fdfbef;
  --bg: #e3e8d6; --ink: #1d2718; --muted: #56684c; --dim: #7f9173;
  --line: rgba(40,65,35,.24); --panel: rgba(40,65,35,.09);
  --bgfx: radial-gradient(125% 78% at 50% -6%, #eef2e0 0%, #e3e8d6 46%, #ccd4b9 100%);
  --cardbg: linear-gradient(150deg, #fbfcf3, #eef2df);
  --navbg: rgba(240,244,228,.96);
  --font-head: "Playfair Display", serif;
  --font-body: Jost, system-ui, sans-serif;
}
body.theme-kings.light .ptable { background: linear-gradient(160deg, #fdfef7, #e5ead5); }

/* ---- 5 propuestas de color (previsualizar con ?theme=1..5) ---- */
/* 1 · Burgundy pub: granate profundo + dorado */
body.alt1 {
  --bg: #170a0d; --bgfx: radial-gradient(125% 78% at 50% -6%, #4a1620 0%, #2a0e13 46%, #10060a 100%);
  --cardbg: linear-gradient(150deg, rgba(74,22,32,.85), rgba(26,10,14,.9));
  --navbg: rgba(26,10,14,.92); --panel: rgba(255,255,255,.05); --line: rgba(255,255,255,.1);
  --ink: #f4ece6; --muted: #c4a8a0; --dim: #8d6f68;
  --gold: #f0cf6e; --gold2: #ffe9a8; --gold3: #c9a94b; --onacc: #1a1407;
}
/* 2 · Plateado y azul: azul noche + acentos plata */
body.alt2 {
  --bg: #0b1226; --bgfx: radial-gradient(125% 78% at 50% -6%, #1e2f5c 0%, #131c3a 46%, #070b1a 100%);
  --cardbg: linear-gradient(150deg, rgba(30,47,92,.6), rgba(12,18,40,.9));
  --navbg: rgba(9,14,32,.93); --panel: rgba(255,255,255,.06); --line: rgba(200,215,235,.14);
  --ink: #edf2f9; --muted: #a3b1c8; --dim: #71809b;
  --gold: #c8d4e4; --gold2: #eef3fa; --gold3: #93a5bd; --onacc: #101a2c;
}
/* 3 · Verde oliva con gris */
body.alt3 {
  --bg: #14170c; --bgfx: radial-gradient(125% 78% at 50% -6%, #333a1e 0%, #202512 46%, #0d0f07 100%);
  --cardbg: linear-gradient(150deg, rgba(51,58,30,.75), rgba(18,21,10,.92));
  --navbg: rgba(16,19,9,.93); --panel: rgba(255,255,255,.05); --line: rgba(230,235,215,.12);
  --ink: #eef0e4; --muted: #b3b9a0; --dim: #7d8468;
  --gold: #cfd4c3; --gold2: #eef0e6; --gold3: #9aa284; --onacc: #1c2010;
}
/* 4 · Black & Gold: negro carbón + oro brillante (glam Nochevieja) */
body.alt4 {
  --bg: #070706; --bgfx: radial-gradient(125% 78% at 50% -6%, #2b2416 0%, #151109 46%, #040404 100%);
  --cardbg: linear-gradient(150deg, rgba(43,36,22,.7), rgba(12,10,6,.92));
  --navbg: rgba(8,7,5,.94); --panel: rgba(255,255,255,.05); --line: rgba(255,215,94,.16);
  --ink: #f5f1e6; --muted: #b8ad8e; --dim: #837a60;
  --gold: #ffd75e; --gold2: #ffe9a8; --gold3: #d4a83c;
}
/* 5 · Gris y blanco suave: carbón elegante + blanco roto */
body.alt5 {
  --bg: #141517; --bgfx: radial-gradient(125% 78% at 50% -6%, #2c2e33 0%, #1d1f23 46%, #0e0f11 100%);
  --cardbg: linear-gradient(150deg, rgba(44,46,51,.8), rgba(18,19,22,.92));
  --navbg: rgba(15,16,18,.94); --panel: rgba(255,255,255,.06); --line: rgba(255,255,255,.12);
  --ink: #f2f3f4; --muted: #b4b7bc; --dim: #82868c;
  --gold: #e8e8e6; --gold2: #ffffff; --gold3: #b5b7ba; --onacc: #1a1b1d;
}
/* 6 · Tonos cálidos: marrón ámbar + crema, muy legible */
body.alt6 {
  --bg: #1a120b; --bgfx: radial-gradient(125% 78% at 50% -6%, #4a331d 0%, #2d1f12 46%, #120c06 100%);
  --cardbg: linear-gradient(150deg, rgba(74,51,29,.75), rgba(26,18,10,.92));
  --navbg: rgba(22,15,8,.93); --panel: rgba(255,235,210,.06); --line: rgba(255,225,180,.14);
  --ink: #f7efe4; --muted: #cbb391; --dim: #94805f;
  --gold: #f4b95e; --gold2: #ffdfae; --gold3: #c98f3a; --onacc: #241505;
}

/* 7 · CLARO crema cálida: página clara, tarjetas blancas, dorado viejo */
body.alt7 {
  --bg: #f4eee1; --bgfx: radial-gradient(125% 78% at 50% -6%, #fdf8ec 0%, #f4eee1 46%, #e7ddc8 100%);
  --cardbg: linear-gradient(150deg, #fffdf6, #faf4e6);
  --navbg: rgba(252,248,238,.96); --panel: rgba(90,70,30,.06); --line: rgba(90,70,30,.18);
  --ink: #2c2415; --muted: #7a6a4c; --dim: #a2926f;
  --gold: #a5761c; --gold2: #c99a34; --gold3: #8a6414; --onacc: #fffaf0;
}
/* 8 · CLARO gris y blanco suave */
body.alt8 {
  --bg: #eef0f3; --bgfx: radial-gradient(125% 78% at 50% -6%, #ffffff 0%, #eef0f3 46%, #dde1e6 100%);
  --cardbg: linear-gradient(150deg, #ffffff, #f4f6f8);
  --navbg: rgba(255,255,255,.96); --panel: rgba(30,40,55,.06); --line: rgba(30,40,55,.16);
  --ink: #22262c; --muted: #5f6a78; --dim: #8b95a3;
  --gold: #4c5866; --gold2: #8494a3; --gold3: #37424e; --onacc: #ffffff;
}
/* 9 · CLARO fusión cálida: crema + terracota + toques dorados */
body.alt9 {
  --bg: #f7f0e6; --bgfx: radial-gradient(125% 78% at 50% -6%, #fdf6e8 0%, #f7f0e6 46%, #eadfcb 100%);
  --cardbg: linear-gradient(150deg, #fffdf8, #faf2e6);
  --navbg: rgba(253,248,240,.96); --panel: rgba(150,80,40,.07); --line: rgba(150,80,40,.2);
  --ink: #33231a; --muted: #8a6a55; --dim: #b09480;
  --gold: #c25e35; --gold2: #e08b5c; --gold3: #9c4423; --onacc: #fff8f2;
}
body.alt9 .ptable { background: linear-gradient(160deg, #ffffff, #f3e8da); }

/* ajustes comunes de los temas CLAROS */
body.light .card, body.light .slot, body.light .topt { box-shadow: 0 8px 22px rgba(60, 50, 20, .12); }
body.light .plan {
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(255,255,255,.6), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(0,0,0,.045) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,0,0,.045) 22px 23px);
}
body.light .ptable {
  background: linear-gradient(160deg, #ffffff, #efeade);
  border: 1px solid rgba(0,0,0,.22);
  box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 #fff;
}
body.alt8 .ptable { background: linear-gradient(160deg, #ffffff, #e9edf1); }
body.light .pmark { background: rgba(255,255,255,.85); border: 1px solid rgba(0,0,0,.15); }
body.light .pdecor-zone { background: rgba(0,0,0,.03); }
body.light .pdecor-room { background: rgba(0,0,0,.04); box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); }
body.light .veg, body.light .opt-name .veg { color: #1d7a43 !important; }
body.light .sum-diner .allergy { color: #b91c1c; }
body.light .diner-status.ok, body.light .slot-info .ok { color: #15803d; }
body.light .hold-bar { background: rgba(200,150,40,.14); }
body.light .modal-scrim { background: rgba(40,35,20,.45); }

/* ---- 3 propuestas de letra (previsualizar con ?font=1..3) ---- */
body.font1 { --font-head: "Playfair Display", serif; --font-body: Jost, system-ui, sans-serif; }   /* elegante */
body.font2 { --font-head: "Bebas Neue", sans-serif; --font-body: Jost, system-ui, sans-serif; }    /* moderna */
body.font3 { --font-head: Fraunces, serif; --font-body: Jost, system-ui, sans-serif; }             /* cálida */
body.font4 { --font-head: Poppins, sans-serif; --font-body: Jost, system-ui, sans-serif; }         /* profesional */
body.font4 .step-title, body.font4 .hero-year { letter-spacing: 0; font-weight: 700; }

/* solo scroll vertical: sin desplazamiento ni rebote lateral (iPhone incluido) */
html { scrollbar-gutter: stable; overflow-x: clip; max-width: 100%; overscroll-behavior-x: none; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
}
body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: -1;
  height: 100vh; height: 100lvh;
  background: var(--bgfx);
  background-size: cover; background-position: center;
}
/* fondo quieto: la animación de deriva mareaba (quitada a petición de Robert) */

/* ---- test banner ---- */
.test-banner {
  background: repeating-linear-gradient(45deg, #7a1d1d, #7a1d1d 14px, #5d1414 14px, #5d1414 28px);
  color: #ffd9d9; text-align: center; font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 5px 10px; font-weight: 600;
}

/* ---- top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  height: var(--navh); padding: 0 14px;
  background: var(--navbg); backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
.topbar-logo { height: 36px; width: auto; }
.topbar-title { display: flex; flex-direction: column; line-height: 1.15; }
.topbar-name { font-family: var(--font-head); font-size: 17px; letter-spacing: 1.2px; color: var(--gold); }
.topbar-event { font-size: 11px; color: var(--muted); letter-spacing: .8px; text-transform: uppercase; }
.topbar-total { margin-left: auto; text-align: right; display: flex; flex-direction: column; line-height: 1.1; }
.tt-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.tt-amount { font-family: var(--font-head); font-size: 18px; color: var(--gold2); letter-spacing: .5px; }

/* ---- progress ---- */
.progress { position: sticky; top: calc(var(--navh) + var(--noticeH, 0px)); z-index: 39; height: 3px; background: var(--panel); }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold3), var(--gold)); transition: width .35s ease; }

/* ---- layout ---- */
.wrap { max-width: 640px; margin: 0 auto; padding: 20px 16px 56px; }
.step { animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- hero (limpio; preparado para imagen de fondo cuando Robert la pase) ---- */
.hero { text-align: center; padding: 22px 0 10px; position: relative; z-index: 0; }
.hero-happy {
  margin-top: 6px;
  font-family: var(--font-head); font-style: italic; font-weight: 700;
  font-size: clamp(26px, 7.5vw, 36px); line-height: 1.15;
  color: #a32530;
}
.hero-logo { height: 92px; width: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
.hero-kicker { margin-top: 16px; font-size: 14px; letter-spacing: 5px; text-transform: uppercase; color: var(--muted); }
.hero-year {
  font-family: var(--font-head); font-size: clamp(64px, 20vw, 110px); line-height: 1;
  background: linear-gradient(180deg, var(--gold2), var(--gold3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 3px;
}
.hero-date { margin-top: 8px; font-size: 17px; color: var(--ink); }
.hero-band { margin-top: 4px; font-size: 15px; color: var(--muted); }
.hero-band strong { color: var(--gold); font-weight: 600; }

/* ---- cards ---- */
.card {
  background: var(--cardbg); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; margin-top: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.card-title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-size: 15px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}
.card-title::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(120deg, var(--gold2), var(--gold3));
  box-shadow: 0 0 0 2.5px rgba(165, 118, 28, .2);
}
.note-card p { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---- precios en medallones dorados ---- */
.price-card { text-align: center; }
.price-row { display: flex; align-items: center; justify-content: center; gap: 28px; }
.price-item { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.price-div { width: 1px; align-self: stretch; background: var(--line); }
.price-num { font-family: var(--font-head); font-size: 32px; font-weight: 700; color: var(--gold3); letter-spacing: .5px; }
.price-lbl { font-size: 13.5px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.price-note { margin-top: 14px; font-size: 13px; color: var(--dim); }
.price-note span { display: block; line-height: 1.55; }

/* remate decorativo bajo el 2026 */
.hero-flourish { margin-top: 12px; color: var(--gold3); font-size: 13px; letter-spacing: 6px; opacity: .8; }

/* ---- included ---- */
.included { list-style: none; }
.included li { padding: 7px 0 7px 28px; position: relative; font-size: 15px; }
.included li::before { content: "★"; position: absolute; left: 2px; color: var(--gold3); font-size: 15px; top: 9px; }
/* Spoons: el redondel del logo como viñeta, en vez de estrellas (Robert) */
body.poster.theme-spoons .included li::before {
  content: ""; width: 19px; height: 19px; top: 11px;
  background: url("img/seal_spoons_v1.png") center/contain no-repeat;
}
/* Kings: corona dorada como viñeta, su marca (Robert) — SVG en línea */
body.poster.theme-kings .included li::before {
  content: ""; width: 16px; height: 16px; top: 12px; left: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e9c778' d='M2.5 7.2 7 11l4.2-5.6a1 1 0 0 1 1.6 0L17 11l4.5-3.8a.6.6 0 0 1 .97.6L20 16.5H4L1.53 7.8a.6.6 0 0 1 .97-.6Z'/%3E%3Crect x='4' y='17.8' width='16' height='2.4' rx='1.2' fill='%23e9c778'/%3E%3Ccircle cx='12' cy='4.6' r='1.3' fill='%23f7e6bd'/%3E%3Ccircle cx='2.6' cy='6.4' r='1.1' fill='%23f7e6bd'/%3E%3Ccircle cx='21.4' cy='6.4' r='1.1' fill='%23f7e6bd'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- landing menu: lista clara, un plato por línea ---- */
/* un solo bloque, mismo color que el resto; los tiempos se separan con aire
   y su filete — sin recuadros de otro color ni lineas de puntos (Robert) */
.lm-course { margin: 28px 0 0; }
.lm-course:first-child { margin-top: 2px; }
/* cabecera de tiempo como carta de restaurante, y una línea de puntitos
   SEPARANDO cada tiempo del siguiente (Robert: que no quede todo al aire) */
/* título de tiempo: banda suave de lado a lado con líneas finísimas
   que se desvanecen en las puntas (idea de Robert) */
.lm-course h3 {
  text-align: center; font-family: var(--font-head);
  font-size: 21px; font-weight: 600; letter-spacing: 1.5px;
  color: var(--gold);
  margin: 0 -18px; padding: 9px 0;
  background:
    linear-gradient(90deg, transparent, rgba(240, 205, 110, .3), transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(240, 205, 110, .3), transparent) bottom / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(240, 205, 110, .07) 22%, rgba(240, 205, 110, .07) 78%, transparent);
}
.lm-course + .lm-course { margin-top: 30px; }
/* la explicación va UNA vez arriba del menú, no debajo de cada burbuja */
.lm-intro {
  text-align: center; font-size: 13.5px; font-style: italic;
  color: var(--muted); margin: 2px 0 16px;
}
.lm-course h3 { margin-bottom: 12px; }
.lm-list { list-style: none; }
.lm-list li { padding: 8px 0 8px 18px; position: relative; }
.lm-list li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 6px rgba(240, 205, 110, .5);
}
.lm-name { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.lm-name .veg { font-size: 13px; font-weight: 500; }
.lm-desc { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); line-height: 1.45; font-style: italic; }
.veg { color: #7ee2a8; }
.dietary-note { margin-top: 16px; font-size: 13px; color: var(--muted); font-style: italic; line-height: 1.5; }
.kids-note { text-align: center; }

/* ---- buttons ---- */
.btn-primary {
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  background: linear-gradient(120deg, var(--gold2), var(--gold3));
  color: var(--onacc); border: none; border-radius: 12px;
  padding: 13px 26px; cursor: pointer; letter-spacing: .5px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.btn-primary:hover:not(:disabled), .btn-primary:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 18px rgba(240,205,110,.35);
  filter: brightness(1.06);
}
.btn-primary:active { transform: scale(.97); }
.btn-primary:disabled { opacity: .4; cursor: default; }
.btn-big { display: block; width: 100%; margin-top: 22px; padding: 16px; font-size: 18px; }
.btn-ghost {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 22px; cursor: pointer;
}
.btn-ghost { transition: color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn-ghost:hover, .btn-ghost:focus-visible {
  color: var(--gold2); border-color: var(--gold3);
  box-shadow: 0 0 12px rgba(240,205,110,.2); transform: translateY(-1px);
}
.btn-ghost:active { background: var(--panel); transform: scale(.97); }
.nav-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.nav-row .btn-primary { flex: 1; max-width: 260px; }
.nav-row-solo { justify-content: flex-start; margin-top: 14px; }
/* "Selling fast" de la portada: solo sale si alguna hora va al 80%+ de aforo */
.selling-fast {
  text-align: center; margin: 18px 0 -6px; font-size: 14.5px; font-weight: 600;
  color: #f2c063; letter-spacing: .4px;
}
/* pastilla flotante de reservar (móvil): aparece al pasar el hero y se
   esconde cuando el botón grande real está a la vista — sin barra de fondo */
.float-book {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 84px); z-index: 60;
  font-family: var(--font-body); font-weight: 700; font-size: 15.5px; letter-spacing: .6px;
  background: linear-gradient(120deg, var(--gold2), var(--gold3)); color: var(--onacc);
  border: none; border-radius: 999px; padding: 14px 34px; cursor: pointer;
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 22px rgba(240,205,110,.28);
  opacity: 0; pointer-events: none; white-space: nowrap;
  transition: transform .35s ease, opacity .35s ease;
}
.float-book.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
@media (min-width: 761px) { .float-book { display: none; } }

.small-print { text-align: center; margin-top: 12px; font-size: 12.5px; color: var(--dim); }
.small-print span { display: block; line-height: 1.7; }
.small-print a { color: var(--muted); }

/* ---- step headers ---- */
.step-title { font-family: var(--font-head); font-size: 26px; letter-spacing: 1.5px; color: var(--ink); margin-top: 10px; }
.step-sub { margin-top: 6px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }

/* ---- counters ---- */
.counter-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.counter-row:last-child { border-bottom: none; }
.counter-info { display: flex; flex-direction: column; }
.counter-name { font-size: 16px; font-weight: 500; }
.counter-sub { font-size: 12.5px; color: var(--muted); }
.counter { display: flex; align-items: center; gap: 4px; }
.cbtn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--gold); font-size: 22px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.cbtn:active { background: var(--line); }
.cval { min-width: 36px; text-align: center; font-family: var(--font-head); font-size: 20px; color: var(--ink); }

/* ---- arrival slots ---- */
.slot-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.slot {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cardbg); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; cursor: pointer; transition: border-color .15s;
}
.slot.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 8px 22px rgba(0,0,0,.35); }
.slot-time { font-family: var(--font-head); font-size: 24px; letter-spacing: 1px; color: var(--gold2); }
.slot-info { text-align: right; font-size: 13px; color: var(--muted); }
.slot-info .ok { color: #7ee2a8; }
/* hora casi llena (80%+ del aforo real): aviso ámbar, sigue reservable */
.slot-info .slot-almost { color: #f2c063; font-weight: 600; }
/* hora sin sitio: apagada y sin click */
.slot.slot-full { opacity: .55; cursor: not-allowed; }
.slot-fullmsg { color: #e89c9c; font-weight: 600; }

/* aviso de Robert (desde el panel): BARRA arriba del todo, roja y con
   destello que la cruza — que se note que es un aviso, no decoración */
.site-notice {
  position: relative; overflow: hidden; text-align: center;
  padding: 6px 14px;
  background: linear-gradient(100deg, #6e0f1c, #b3262e 45%, #6e0f1c);
  color: #ffece8; font-weight: 600; font-size: 12.5px;
  letter-spacing: 1.8px; text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 195, 160, .35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.site-notice .sn-star { font-size: 10px; vertical-align: 1px; }
.site-notice::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38%;
  left: -60%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  animation: noticeShine 3.6s ease-in-out infinite;
}
@keyframes noticeShine { 0% { left: -60%; } 55%, 100% { left: 135%; } }
.site-notice .sn-star { display: inline-block; color: #ffc9a3; animation: snPulse 1.6s ease-in-out infinite; }
@keyframes snPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* entra deslizándose desde arriba cuando carga, y cada pocos segundos hace
   un toc-toc de campanita. OJO: las animaciones van en .sn-inner, NUNCA en
   .site-notice — con animación encima, Chrome no deja que la barra se pegue
   (position sticky deja de funcionar). */
@keyframes noticeIn {
  from { transform: translateY(-140%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.site-notice .sn-inner {
  display: inline-block;
  animation: noticeIn .65s cubic-bezier(.2, .9, .35, 1.15),
             noticeNudge 6.5s ease-in-out 2.5s infinite;
}
@keyframes noticeNudge {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(1.6deg); }
  93% { transform: rotate(-1.4deg); }
  96% { transform: rotate(.8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .site-notice::after, .site-notice .sn-star, .site-notice .sn-inner { animation: none; }
}
/* el aviso se queda fijo junto con la cabecera al hacer scroll (móvil y
   ordenador — decisión de Robert). --noticeH lo mide app.js en vivo. */
.site-notice { position: sticky; top: 0; z-index: 41; }
.topbar { top: var(--noticeH, 0px); }

/* ---- room tabs ---- */
.room-tabs { display: flex; gap: 8px; margin-top: 16px; }
.room-tab {
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: 99px; padding: 9px 22px; cursor: pointer; letter-spacing: .5px;
}
.room-tab.sel {
  background: linear-gradient(120deg, var(--gold2), var(--gold3));
  color: var(--onacc); border-color: transparent;
}

/* ---- floor plan ---- */
.plan-card { padding: 8px; margin-top: 10px; }
/* selector de sala a lo ancho, tipo interruptor, que se entienda que hay 2 salas */
.plans-tabs {
  display: flex; gap: 4px; margin: 6px 0 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(0, 0, 0, .35);
}
.room-tab {
  flex: 1; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; text-align: center;
  padding: 12px 0; border-radius: 999px; cursor: pointer;
  background: none; color: var(--muted); border: none;
  transition: all .15s ease;
}
.room-tab.on {
  background: linear-gradient(120deg, var(--gold2), var(--gold3));
  color: var(--onacc); font-weight: 700;
  box-shadow: 0 0 14px rgba(240,205,110,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
/* la pestaña que NO está elegida guiña cada pocos segundos, para que se vea
   que se puede cambiar de sala (petición de Robert) */
.room-tab:not(.on) { animation: tabHint 4.5s ease-in-out infinite; }
@keyframes tabHint {
  0%, 62%, 100% {
    background: rgba(240, 205, 110, 0); color: var(--muted);
    transform: none;
    box-shadow: 0 0 0 rgba(240, 205, 110, 0), inset 0 0 0 1px rgba(240, 205, 110, 0);
  }
  69%, 81% {
    background: rgba(240, 205, 110, .32); color: #ffedb8;
    transform: scale(1.07);
    box-shadow: 0 0 20px rgba(240, 205, 110, .6), inset 0 0 0 1px rgba(240, 205, 110, .65);
  }
  75% {
    background: rgba(240, 205, 110, .1); color: var(--gold2);
    transform: scale(1);
    box-shadow: 0 0 6px rgba(240, 205, 110, .2), inset 0 0 0 1px rgba(240, 205, 110, .25);
  }
  90% {
    background: rgba(240, 205, 110, .08); color: var(--gold2);
    transform: none;
    box-shadow: 0 0 0 rgba(240, 205, 110, 0), inset 0 0 0 1px rgba(240, 205, 110, 0);
  }
}
@media (prefers-reduced-motion: reduce) { .room-tab:not(.on) { animation: none; } }
.plan-title {
  font-family: var(--font-head); font-size: 14px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold); text-align: center;
  margin-bottom: 8px;
}
.legend-bar { margin-top: 12px; }
.plan {
  position: relative; width: 100%; max-width: none; margin: 0 auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.022) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.022) 22px 23px);
}
.pmark {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: var(--font-head); font-size: clamp(8px, 2.2vw, 12px); letter-spacing: 1.5px;
  color: var(--gold3); white-space: nowrap; pointer-events: none;
  background: rgba(0,0,0,.4); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px 6px; z-index: 2;
}
.pmark .ic { font-size: clamp(11px, 3.2vw, 16px); line-height: 1; }
.pmark .tx { font-size: clamp(6px, 1.6vw, 8px); letter-spacing: 1px; color: var(--muted); }
.pmark.vert { transform: translate(-50%, -50%) rotate(-90deg); }
.pmark.vert .ic { transform: rotate(90deg); }
.pmark.mini {
  background: none; border: none; padding: 0;
  font-size: clamp(12px, 3.4vw, 18px); opacity: .9;
}

/* elementos fijos del local dibujados en el plano */
.pdecor {
  position: absolute; display: grid; place-items: center;
  font-family: var(--font-head); font-size: clamp(7px, 2vw, 11px);
  letter-spacing: 2px; pointer-events: none; border-radius: 6px;
}
.pdecor span.vert { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
/* escenario: tarima dorada con marco y brillo */
.pdecor-stage {
  background: linear-gradient(135deg, #f7e3a4 0%, #e4bd63 55%, #bd9138 100%);
  border: 2px solid rgba(110, 78, 20, .75); border-radius: 10px;
  color: #241a05; font-weight: 600;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .35),
    0 0 24px rgba(240, 207, 110, .5),
    0 6px 16px rgba(0, 0, 0, .45);
  overflow: visible; z-index: 2;
}
.pdecor-stage span { font-size: clamp(10px, 3vw, 14px); letter-spacing: 2px; white-space: nowrap; }
/* barra: mostrador de madera con canto iluminado */
.pdecor-bar {
  background: linear-gradient(180deg, #8a5527 0%, #6b3f1a 55%, #52300f 100%);
  border: 2px solid rgba(200, 140, 80, .7); border-radius: 12px;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .28),
    inset 0 -8px 14px rgba(0, 0, 0, .4),
    0 4px 12px rgba(0, 0, 0, .35);
  color: #f6dfc0; font-weight: 600; align-items: center;
}
.pdecor-sea {
  background: linear-gradient(180deg, rgba(96, 170, 255, .22), rgba(96, 170, 255, .08));
  border: 1px dashed rgba(140, 195, 255, .4); color: #a9d3ff;
}
.pdecor-zone {
  border: 1.5px dashed var(--line); color: var(--muted);
  background: rgba(255,255,255,.02); place-items: end;
  padding: 3px 7px 3px 3px;
  font-size: clamp(6px, 1.8vw, 10px);
}
.pdecor-door {
  background: linear-gradient(180deg, rgba(172, 112, 56, .45), rgba(118, 74, 34, .3));
  border: 1px solid rgba(190, 132, 74, .55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  color: #f0d3ab; font-size: clamp(6.5px, 1.8vw, 10px);
}
/* habitación (baños, etc.): recuadro tipo "casita" */
.pdecor-room {
  border: 1.5px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.15);
  color: var(--muted); font-size: clamp(7px, 1.9vw, 10px);
}
/* mesas con relieve 3D, como los mapas nuevos de Robert */
.ptable {
  position: absolute; transform: translate(-50%, -50%);
  width: 8.5%; aspect-ratio: 1; border-radius: 24%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.3);
  background: linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.04) 48%, rgba(0,0,0,.28));
  box-shadow:
    0 5px 11px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -3px 6px rgba(0,0,0,.35);
  color: var(--muted); transition: all .15s ease; line-height: 1;
}
.ptable .ppre { font-size: clamp(5px, 1.5vw, 8px); letter-spacing: .5px; color: var(--muted); }
.ptable .pnum { font-family: var(--font-head); font-size: clamp(8px, 2.4vw, 12px); letter-spacing: .3px; color: var(--ink); }
.ptable.sel .ppre { color: var(--onacc); }
.ptable.shape-rect-v { aspect-ratio: 0.52; width: 7.6%; border-radius: 14%; }
.ptable.shape-rect-h { aspect-ratio: 1.8; width: 13%; border-radius: 14%; }
.ptable.shape-round { border-radius: 50%; }

/* contenedor del zoom del plano: el pellizco se queda dentro */
.plan-zoom {
  overflow: hidden; border-radius: 14px; position: relative;
  touch-action: pan-y;
}
.plan-zoom .plan { will-change: transform; }

/* plano con la imagen dibujada de Robert: los puntos de toque van invisibles
   encima del dibujo y solo se ven al elegir (dorado) o si está ocupada (✕) */
.plan.plan-img {
  background-size: 100% 100%; background-repeat: no-repeat;
  border: none; border-radius: 3.5%;
}
.plan-img .ptable, .plan-img .ptable.shape-round {
  width: 8.2%; background: none; border: 2px solid transparent;
  box-shadow: none; border-radius: 18%;
}
.plan-img .ptable.shape-round { border-radius: 50%; width: 7.6%; }
.plan-img .ptable .ppre, .plan-img .ptable .pnum { opacity: 0; }
.plan-img .ptable.sel {
  border-color: var(--gold); background: rgba(240, 205, 110, .26);
  box-shadow: 0 0 16px rgba(240, 205, 110, .55);
}
.plan-img .ptable.taken {
  opacity: 1; border: none; background: rgba(8, 5, 3, .55); border-style: solid;
}
.plan-img .ptable.taken::after {
  content: "✕"; position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255, 128, 118, .9); font-size: clamp(11px, 3vw, 17px); font-weight: 700;
}

/* en móvil el plano ocupa todo el ancho posible */
@media (max-width: 600px) {
  .plan-card { margin-left: -14px; margin-right: -14px; padding: 4px; border-radius: 12px; }
  .ptable { width: 9.3%; }
  .ptable.shape-rect-v { width: 8.2%; }
}
.ptable.na { opacity: .3; border-style: dotted; background: transparent; box-shadow: none; width: 7.2%; }
.ptable.na .pnum { color: var(--dim); font-size: clamp(7px, 2vw, 10px); }
.ptable.taken { opacity: .25; border-style: dashed; background: transparent; box-shadow: none; }
.ptable.taken .pnum { text-decoration: line-through; }
.ptable.sel {
  background: linear-gradient(120deg, var(--gold2), var(--gold3)); border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(0,0,0,.45), 0 0 14px rgba(240,207,110,.35);
}
.ptable.sel .pnum { color: var(--onacc); }
.plan-legend { display: flex; gap: 15px; justify-content: center; margin-top: 12px; font-size: 13.5px; color: var(--ink); flex-wrap: wrap; }
.plan-legend span { display: flex; align-items: center; gap: 7px; }
/* leyenda grande y con las señales DE VERDAD, para que se entienda (Robert) */
.lg { width: 21px; height: 21px; border-radius: 5px; display: inline-grid; place-items: center; flex: none; }
.lg-free {
  background: linear-gradient(160deg, rgba(255,255,255,.15), rgba(0,0,0,.28));
  border: 1px solid rgba(255,255,255,.4);
}
.lg-sel {
  background: linear-gradient(120deg, var(--gold2), var(--gold3));
  border: 1px solid var(--gold); box-shadow: 0 0 8px rgba(240,205,110,.5);
}
.lg-taken { background: rgba(8,5,3,.75); border: 1px solid rgba(255,128,118,.45); }
.lg-taken::after { content: "✕"; color: rgba(255,128,118,.95); font-size: 12px; font-weight: 700; font-style: normal; }
.lg-na { background: transparent; border: 1px dotted var(--line); opacity: .6; }
/* con los planos dibujados, las mesas no reservables ya vienen explicadas
   en el propio dibujo: ni punto de toque ni entrada en la leyenda */
.plan-img .ptable.na { display: none; }
.plan-legend span:last-child { display: none; }

/* ---- ficha de la mesa elegida ---- */
.tdetail { animation: fadein .25s ease; }
.tdetail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tdetail-name { font-family: var(--font-head); font-size: 20px; letter-spacing: 1px; color: var(--gold2); }
.tdetail-zone { margin-top: 3px; font-size: 13.5px; color: var(--gold); }
.tphotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 14px; }
.tphoto {
  aspect-ratio: 4 / 3; border-radius: 10px; border: 1px dashed var(--line);
  background: var(--panel); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; text-align: center; padding: 4px;
  position: relative; overflow: hidden;
}
/* con foto real: la imagen llena el hueco y la etiqueta va encima, abajo */
.tphoto.has-img { border-style: solid; padding: 0; justify-content: flex-end; }
.tphoto.has-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.tphoto.has-img .tphoto-lbl {
  position: relative; z-index: 2; width: 100%; padding: 10px 4px 5px;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  background: linear-gradient(transparent, rgba(0, 0, 0, .62));
}
.tphoto-lbl { font-size: 11px; font-weight: 600; color: var(--ink); }
.tphoto-soon { font-size: 8.5px; color: var(--dim); }
.tdetail-note { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* ---- table options ---- */
.option-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.topt {
  display: flex; gap: 14px; align-items: center;
  background: var(--cardbg); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; cursor: pointer; transition: border-color .15s;
}
.topt.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.topt-photo {
  width: 74px; height: 58px; flex: none; border-radius: 10px;
  background: var(--panel); border: 1px dashed var(--line);
  display: grid; place-items: center; font-size: 10px; color: var(--dim);
  text-align: center; line-height: 1.2; padding: 4px;
}
.topt-info { flex: 1; min-width: 0; }
.topt-name { font-weight: 600; font-size: 15.5px; }
.topt-zone { font-size: 13px; color: var(--gold); }
.topt-desc { font-size: 12.5px; color: var(--muted); }
.topt-cap { font-family: var(--font-head); font-size: 15px; color: var(--gold2); white-space: nowrap; }
.no-options { text-align: center; color: var(--muted); padding: 20px; font-size: 14.5px; }

/* ---- diner menu cards ---- */
.diner { margin-top: 16px; }
.diner-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.diner-title { font-family: var(--font-head); font-size: 16px; letter-spacing: 1.5px; color: var(--gold); }
.diner-tag { font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); padding: 2px 10px; border-radius: 99px; text-transform: uppercase; letter-spacing: 1px; }
.diner-status { font-size: 12px; }
.diner-status.ok { color: #7ee2a8; }
.diner-status.todo { color: var(--muted); }
.course { margin-top: 14px; }
.course-lbl { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px;
  cursor: pointer; background: var(--panel); transition: border-color .12s;
}
.opt.sel { border-color: var(--gold); background: rgba(240, 207, 110, .1); }
.opt-radio { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--dim); display: grid; place-items: center; }
.opt.sel .opt-radio { border-color: var(--gold); }
.opt.sel .opt-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.opt-name { font-size: 14.5px; font-weight: 500; }
.opt-name .veg { color: #7ee2a8; font-size: 11.5px; margin-left: 4px; }
.opt-desc { font-size: 12px; color: var(--muted); }
.doneness { margin-top: 10px; padding: 12px; border: 1px dashed var(--gold3); border-radius: 11px; }
.doneness-lbl { font-size: 12px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 99px; padding: 7px 14px; font-size: 13.5px; cursor: pointer;
  font-family: var(--font-body);
}
.chip.sel { background: linear-gradient(120deg, var(--gold2), var(--gold3)); color: var(--onacc); border-color: transparent; font-weight: 600; }
.copy-btn {
  margin-top: 12px; width: 100%; border: 1px dashed var(--line); background: transparent;
  color: var(--muted); border-radius: 11px; padding: 10px; font-size: 13.5px; cursor: pointer;
  font-family: var(--font-body);
}
.copy-btn:active { background: var(--panel); }

/* ---- dietary ---- */
.diet-toggle { margin-top: 12px; font-size: 13.5px; color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: underline; font-family: var(--font-body); padding: 4px 0; }
.diet-box { margin-top: 8px; }
.diet-box .chip-row { margin-bottom: 8px; }
.diet-box textarea { width: 100%; }

/* ---- forms ---- */
.form-card { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; color: var(--muted); letter-spacing: .5px; }
.field em { font-style: normal; color: var(--dim); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 14px; outline: none; width: 100%;
}
input:focus, textarea:focus { border-color: var(--gold3); }
input.err, textarea.err { border-color: #f87171; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); cursor: pointer; line-height: 1.45; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--gold3); flex: none; }
.check a { color: var(--gold); }
.venue-name-inline { font-weight: 600; }

/* ---- hold bar ---- */
.hold-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 10px 16px; border-radius: 12px;
  background: rgba(240, 207, 110, .12); border: 1px solid var(--gold3);
  font-size: 14px; color: var(--gold2);
}
.hold-bar strong { font-family: var(--font-head); font-size: 18px; letter-spacing: 1px; }

/* ---- summary ---- */
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.sum-row:last-child { border-bottom: none; }
.sum-row .k { color: var(--muted); }
.sum-row .v { text-align: right; font-weight: 500; }
.sum-total { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gold3); }
.sum-total .k { font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.sum-total .v { font-family: var(--font-head); font-size: 24px; color: var(--gold2); }
.sum-diner { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.sum-diner:last-child { border-bottom: none; }
.sum-diner .nm { font-weight: 600; color: var(--gold); font-size: 13px; letter-spacing: .5px; }
.sum-diner .dishes { color: var(--muted); line-height: 1.45; }
.sum-diner .allergy { color: #fca5a5; font-weight: 600; }
.policy { list-style: none; }
.policy li { padding: 6px 0 6px 24px; position: relative; font-size: 14px; color: var(--ink); }
.policy li::before { content: "•"; position: absolute; left: 6px; color: var(--gold3); }

/* ---- confirmation ---- */
.done-hero { text-align: center; padding-top: 20px; }
.done-check {
  width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(120deg, var(--gold2), var(--gold3)); color: var(--onacc);
  display: grid; place-items: center; font-size: 38px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.done-hero .step-title { text-align: center; }
.done-hero .step-sub { text-align: center; }
.ref-card { text-align: center; }
.ref-label { display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.ref-code { display: block; margin-top: 6px; font-family: var(--font-head); font-size: 34px; letter-spacing: 4px; color: var(--gold2); }
.proto-tag { color: var(--dim); font-size: 12px; }

/* ---- modal ---- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.65);
  display: grid; place-items: center; padding: 20px;
}
.modal {
  position: relative; width: 100%; max-width: 460px; max-height: 80vh; overflow: auto;
  background: var(--cardbg); border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.modal h3 { font-family: var(--font-head); letter-spacing: 1.5px; color: var(--gold); margin-bottom: 12px; }
.modal-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font-size: 15px; cursor: pointer;
}

/* ---- footer ---- */
.foot { text-align: center; padding: 30px 16px 44px; color: var(--dim); font-size: 13px; border-top: 1px solid var(--line); }
.foot-logo { height: 44px; opacity: .8; }
.foot p { margin-top: 8px; }
.foot-links a { color: var(--muted); }

/* ---- desktop ---- */
@media (min-width: 900px) {
  .wrap { max-width: 720px; }
  .hero-logo { height: 110px; }
  .ptable .pnum { font-size: 11px; }
  .ptable.na .pnum { font-size: 9px; }
  .pmark { font-size: 11px; }
  .nav-row .btn-primary { max-width: 300px; }
}

/* ---- legibilidad reforzada (público 40+, petición de Robert) ---- */
.step-sub { font-size: 15.5px; line-height: 1.6; }
.card-title { font-size: 19px; justify-content: center; text-align: center; }
.included li { font-size: 16px; padding: 9px 0 9px 30px; }
.price-lbl { font-size: 14px; }
.price-note, .small-print { font-size: 13.5px; }
.counter-name { font-size: 17px; }
.counter-sub { font-size: 13.5px; }
.slot-info { font-size: 14px; }
.opt { padding: 12px 14px; gap: 12px; }
.opt-name { font-size: 16px; }
.opt-desc { font-size: 13.5px; margin-top: 1px; }
.opt-radio { width: 22px; height: 22px; }
.opt.sel .opt-radio::after { width: 11px; height: 11px; }
.chip { font-size: 14.5px; padding: 8px 16px; }
.course-lbl { font-size: 13px; }
.diner-title { font-size: 18px; }
.field span { font-size: 14px; }
.check { font-size: 15px; }
.sum-row { font-size: 15.5px; }
.sum-diner { font-size: 14.5px; padding: 9px 0; }
.policy li { font-size: 15px; }
.tdetail-zone { font-size: 14.5px; }
.dietary-note { font-size: 14px; }

/* ============================================================
   PORTADA "PÓSTER" — solo en la landing (clase body.poster).
   Spoons: noche cálida de velas + oro. Kings: azul noche estrellado.
   Los pasos de reserva siguen en el tema claro legible.
   ============================================================ */
/* Spoons: negro con partículas de oro y haz de luz cálida (referencia Robert) */
body.poster.theme-spoons {
  --bg: #0b0805; --ink: #f3ead9; --muted: #cbb58c; --dim: #93805f;
  --line: rgba(232,197,107,.28); --panel: rgba(255,235,200,.07);
  --gold: #e8c56b; --gold2: #f7e3a4; --gold3: #c9a94b; --onacc: #241a06;
  --bgfx:
    linear-gradient(180deg, rgba(8,6,3,.4) 0%, rgba(8,6,3,.62) 60%, rgba(8,6,3,.78) 100%),
    url("img/bg_spoons_v5.jpg");
  --cardbg: linear-gradient(160deg, rgba(28,20,10,.84), rgba(10,7,4,.9));
  --navbg: rgba(15,11,6,.93);
}
/* partículas por TODA la app (capa fija detrás del contenido) — QUIETAS:
   Robert pidió quitar las animaciones del fondo al hacer scroll */
body.poster::after {
  content: ""; position: fixed; left: 0; right: 0; top: -48px; z-index: -1; pointer-events: none;
  height: calc(100vh + 96px); height: calc(100lvh + 96px);
}
body.poster.theme-spoons::after {
  background-image:
    radial-gradient(circle 2px at 7% 12%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 1px at 18% 28%, #ffe9a8 99%, transparent 100%),
    radial-gradient(circle 1.5px at 30% 8%, #e8c56b 99%, transparent 100%),
    radial-gradient(circle 1px at 43% 19%, #fff3cf 99%, transparent 100%),
    radial-gradient(circle 2px at 58% 6%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 1px at 72% 15%, #e8c56b 99%, transparent 100%),
    radial-gradient(circle 1.5px at 86% 24%, #ffe9a8 99%, transparent 100%),
    radial-gradient(circle 1px at 12% 45%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 1.5px at 34% 52%, #e8c56b 99%, transparent 100%),
    radial-gradient(circle 1px at 55% 42%, #fff3cf 99%, transparent 100%),
    radial-gradient(circle 2px at 78% 48%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 1px at 92% 58%, #ffe9a8 99%, transparent 100%),
    radial-gradient(circle 1.5px at 8% 68%, #e8c56b 99%, transparent 100%),
    radial-gradient(circle 1px at 26% 78%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 2px at 47% 86%, #ffe9a8 99%, transparent 100%),
    radial-gradient(circle 1px at 66% 74%, #e8c56b 99%, transparent 100%),
    radial-gradient(circle 1.5px at 84% 84%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 1px at 95% 93%, #fff3cf 99%, transparent 100%),
    radial-gradient(circle 1px at 38% 96%, #e8c56b 99%, transparent 100%),
    radial-gradient(circle 1.5px at 15% 91%, #ffe9a8 99%, transparent 100%);
  opacity: .5; filter: drop-shadow(0 0 3px rgba(242,212,137,.7));
}
body.poster.theme-kings::after {
  background-image:
    radial-gradient(circle 1.5px at 9% 14%, #f4a95e 99%, transparent 100%),
    radial-gradient(circle 1px at 22% 30%, #ffd9a8 99%, transparent 100%),
    radial-gradient(circle 2px at 36% 10%, #ffe6c4 99%, transparent 100%),
    radial-gradient(circle 1px at 52% 22%, #fff 99%, transparent 100%),
    radial-gradient(circle 1.5px at 68% 8%, #f4a95e 99%, transparent 100%),
    radial-gradient(circle 1px at 82% 18%, #ffd9a8 99%, transparent 100%),
    radial-gradient(circle 1px at 94% 30%, #fff 99%, transparent 100%),
    radial-gradient(circle 1.5px at 14% 50%, #ffe6c4 99%, transparent 100%),
    radial-gradient(circle 1px at 42% 46%, #ffd9a8 99%, transparent 100%),
    radial-gradient(circle 2px at 74% 52%, #f4a95e 99%, transparent 100%),
    radial-gradient(circle 1px at 90% 64%, #fff 99%, transparent 100%),
    radial-gradient(circle 1.5px at 10% 76%, #f4a95e 99%, transparent 100%),
    radial-gradient(circle 1px at 30% 88%, #ffd9a8 99%, transparent 100%),
    radial-gradient(circle 2px at 56% 80%, #ffe6c4 99%, transparent 100%),
    radial-gradient(circle 1px at 78% 92%, #f4a95e 99%, transparent 100%),
    radial-gradient(circle 1.5px at 93% 82%, #ffd9a8 99%, transparent 100%);
  opacity: .45; filter: drop-shadow(0 0 3px rgba(244,169,94,.7));
}
/* Kings: BRASA Y CHAMPÁN — botellas con bengalas, ámbar/cobre y negro cálido,
   con el azul del láser como acento (fondo de Robert, música elegante) */
body.poster.theme-kings {
  --bg: #121008; --ink: #f7f3ea; --muted: #d6c9ad; --dim: #a2947a;
  --line: rgba(233,199,120,.3); --panel: rgba(240,220,180,.07);
  --gold: #e9c778; --gold2: #f7e6bd; --gold3: #bb9749; --onacc: #261c08;
  --bgfx:
    linear-gradient(180deg, rgba(9,7,4,.72) 0%, rgba(12,9,6,.6) 28%, rgba(12,9,6,.74) 60%, rgba(9,7,4,.87) 100%),
    url("img/bg_kings_v4.jpg");
  --cardbg: linear-gradient(160deg, rgba(22,18,13,.84), rgba(9,7,5,.91));
  --navbg: rgba(15,12,7,.95);
  --font-head: Marcellus, "Playfair Display", serif;
}
/* presentación distinta a Spoons: tira sin marco para el evento */
body.poster.theme-kings .hero-panel {
  background: rgba(10,8,5,.88);
  border: 1px solid rgba(233,199,120,.4); border-radius: 20px;
  outline: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
/* precios y nota en UN solo bloque redondeado, a juego con el panel del evento */
body.poster.theme-kings .price-card {
  background: rgba(10,8,5,.88);
  border: 1px solid rgba(233,199,120,.4); border-radius: 20px;
  outline: none; box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
body.poster.theme-kings .price-note { padding: 0 16px 15px; margin-top: 8px; }
body.poster.theme-kings #btnStart { animation-name: btnPulseK; }
@keyframes btnPulseK {
  0%, 100% { box-shadow: 0 0 16px rgba(233,199,120,.35), 0 6px 18px rgba(0,0,0,.4); }
  50% { box-shadow: 0 0 38px rgba(233,199,120,.65), 0 6px 18px rgba(0,0,0,.4); }
}
/* Spoons: bloques todos iguales */
body.poster.theme-spoons .kids-note { color: #f7e3a4; }
/* Kings: bloques todos del mismo color (Robert: "no tan de otro color"),
   y con las esquinas más redondas que Spoons para diferenciarse */
body.poster.theme-kings .card, body.poster.theme-kings .feat { border-radius: 20px; }
body.poster.theme-kings .kids-note { color: #f7e6bd; }
.hero-stars { display: none; }
body.poster.theme-kings .hero-swirl { display: none; }

/* barra superior: cada local con su logo dorado, y nada más (lo pidió Robert) */
body.poster .topbar-logo {
  display: block; height: 50px; width: auto;
  filter: drop-shadow(0 0 8px rgba(240,205,110,.25));
}
body.poster .topbar-name { display: none; }
body.poster .topbar-event { display: none; }
/* el logo de Kings es más apaisado: algo menos de alto para que quepa todo */
body.poster.theme-kings .topbar-logo { height: 40px; }
@media (max-width: 520px) {
  body.poster .topbar-logo { height: 38px; }
  body.poster.theme-kings .topbar-logo { height: 26px; }
  body.poster .topbar-event { display: none; }
}
body.poster .topbar-name {
  font-family: var(--font-head); font-size: 21px; font-weight: 700;
  color: var(--gold2); letter-spacing: 1px;
}
body.poster .topbar-event { font-size: 12px; letter-spacing: 1.4px; color: var(--muted); }
body.poster .foot-logo { display: none; }

/* navegación de la barra superior (portada): Conditions + BOOK NOW */
.topnav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topnav-link {
  font-size: 12.5px; color: var(--muted); text-decoration: none; letter-spacing: .5px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 13px; background: var(--panel);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.topnav-link:hover, .topnav-link:focus-visible {
  color: var(--gold2); border-color: var(--gold3); transform: translateY(-1px);
}
.topnav-book {
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(120deg, var(--gold2), var(--gold3));
  color: var(--onacc); border: none; border-radius: 999px;
  padding: 11px 20px; cursor: pointer;
  box-shadow: 0 0 14px rgba(240,205,110,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.topnav-book { animation: bookNudge 6s ease-in-out infinite; }
@keyframes bookNudge {
  0%, 84%, 100% { transform: none; box-shadow: 0 0 14px rgba(240,205,110,.35); }
  87% { transform: rotate(-2.5deg) scale(1.06); box-shadow: 0 0 24px rgba(240,205,110,.6); }
  90% { transform: rotate(2.5deg) scale(1.06); }
  93% { transform: rotate(-1.2deg) scale(1.03); }
  96% { transform: none; }
}
.topnav-book:hover { animation: none; box-shadow: 0 0 22px rgba(240,205,110,.55); transform: translateY(-1px); }
.topnav-book:active { animation: none; transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .topnav-book { animation: none; } }
@media (max-width: 520px) {
  body.poster .topbar-name { font-size: 17px; }
  body.poster .topbar-event { font-size: 10px; letter-spacing: .8px; }
  .topnav { gap: 5px; }
  .topnav-link { font-size: 11px; padding: 7px 9px; }
  .topnav-book { font-size: 11.5px; padding: 9px 12px; letter-spacing: .8px; }
}

body.poster .hero { padding: 8px 0 14px; }
body.poster .hero-kicker { margin-top: 6px; }

/* nombre del local en letras doradas grandes, centrado y sin fondo */
.hero-brand { display: none; }
body.poster .hero-brand {
  display: block; text-align: center; margin-top: 14px;
  font-family: Cinzel, "Playfair Display", serif; font-weight: 800;
  font-size: clamp(36px, 11vw, 56px); letter-spacing: 6px; line-height: 1;
  background: linear-gradient(180deg, #fdf0c0 0%, #e8c56b 45%, #a97e2c 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)) drop-shadow(0 0 22px rgba(240, 205, 110, .3));
  animation: fadeUp .7s ease both;
}
/* la barra pequeña usa el mismo estilo dorado */
body.poster .topbar-name {
  font-family: Cinzel, "Playfair Display", serif; font-weight: 800;
  background: linear-gradient(180deg, #fdf0c0, #c9a94b 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* el bloque del menú: EXACTAMENTE igual que el resto de bloques (Robert: "todos iguales") */
/* la banda: mismo bloque que el resto (todos iguales) */

/* menú infantil: mismo bloque que el resto (Robert: "todos iguales") */
.kids-note {
  text-align: center; font-size: 14.5px; color: var(--gold);
  letter-spacing: .5px; margin-bottom: 8px;
}
.kids-note-sub {
  display: block; margin-top: 2px;
  font-size: 13px; font-style: italic; color: var(--muted); letter-spacing: 0;
}

/* apartado de la banda (con hueco para su foto) */
.band-card { display: flex; align-items: center; gap: 16px; }
.band-photo {
  flex: none; width: 92px; height: 92px; border-radius: 14px;
  border: 1.5px dashed var(--gold3); background: var(--panel);
  display: grid; place-items: center; text-align: center;
  font-size: 10.5px; color: var(--dim); line-height: 1.35; padding: 6px;
}
.band-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.band-name { font-family: var(--font-head); font-size: 25px; color: var(--gold2); }
.band-sub { margin-top: 3px; font-size: 13px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; }
a.band-card { text-decoration: none; color: inherit; cursor: default; }
a.band-card[href] { cursor: pointer; }
a.band-card[href]:hover { border-color: var(--gold); }
.band-photo.has-img { border: 1.5px solid var(--gold3); padding: 0; width: 104px; height: 104px; overflow: hidden; }
.band-more { margin-top: 7px; font-size: 13px; color: var(--gold); letter-spacing: .4px; }
/* con foto real: la foto ENTERA (sin recortar a nadie) pero contenida —
   a la izquierda, tamaño medio, con los datos al lado (Robert: "que no sea tan bruta") */
.band-card.with-photo { display: flex; align-items: center; gap: 15px; padding: 12px; }
.band-card.with-photo .band-photo {
  width: 46%; max-width: 210px; height: auto; flex: none;
  border: 1px solid var(--line); border-radius: 12px; padding: 0; overflow: hidden;
}
.band-card.with-photo .band-photo img {
  width: 100%; height: auto; display: block;
}
.band-card.with-photo .band-info { flex: 1; min-width: 0; }
.band-card.with-photo .band-name { font-size: 21px; line-height: 1.2; }
/* subtítulo en dos líneas limpias, nunca una frase partida fea */
.band-card.with-photo .band-sub span { display: block; line-height: 1.6; }
.band-card.with-photo .band-more { margin-top: 9px; }
.feat-ic { color: var(--gold2); font-size: 16px; }
.feat-ic svg {
  width: 27px; height: 27px; display: block;
  filter: drop-shadow(0 0 7px rgba(240, 205, 110, .4));
}
body.poster .hero-kicker { letter-spacing: 6px; }
body.poster .hero-happy {
  font-family: "Great Vibes", cursive; font-style: normal; font-weight: 400;
  font-size: clamp(54px, 16vw, 88px); line-height: 1.05; margin-top: 8px;
  color: #f2d489; text-shadow: 0 0 26px rgba(242,212,137,.5);
}
body.poster .hero-year {
  background: linear-gradient(180deg, #fdf0c0, #e0b95c 55%, #a97e2c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(240,205,110,.35));
}
body.poster.theme-kings .hero-happy {
  color: #f7e6bd; text-shadow: 0 0 26px rgba(240,215,150,.45);
}
body.poster.theme-kings .hero-year {
  background: linear-gradient(180deg, #ffffff, #f7e6bd 40%, #e9c778 70%, #8f6d2b);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 20px rgba(240,215,150,.4));
}
.hero-invite, .hero-when { display: none; }
body.poster .hero-invite {
  display: block; margin: 12px auto 0;
  font-size: 16.5px; font-style: italic; color: var(--ink); line-height: 1.5;
}
body.poster .hero-invite strong { color: var(--gold2); font-style: normal; }
/* recuadro de información del evento: fecha, hora y lugar EN HORIZONTAL */
.hero-panel { display: none; }
body.poster .hero-panel {
  display: flex; align-items: stretch; justify-content: center;
  max-width: 560px; margin: 22px auto 0; padding: 17px 12px;
  border: 1px solid var(--gold3); border-radius: 10px;
  background: rgba(7, 5, 3, .84);
  outline: 1px solid rgba(240, 205, 110, .3); outline-offset: -5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}
.hp-item { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 12px; text-align: center; justify-content: center; }
.hp-l { font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold3); }
.hp-v { font-family: var(--font-head); font-size: 17.5px; color: var(--ink); font-weight: 600; }
.hp-loc .hp-v { font-family: var(--font-body); font-style: italic; font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.4; }
.hp-div { width: 1px; background: linear-gradient(180deg, transparent, var(--line) 30%, var(--line) 70%, transparent); }
@media (max-width: 560px) {
  body.poster .hero-panel { flex-wrap: wrap; row-gap: 12px; }
  .hp-div2 { display: none; }
  .hp-loc { flex-basis: 100%; border-top: 1px solid var(--line); padding-top: 11px; }
}

/* entrada escalonada suave de la portada + brillo respirando del título */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.poster .hero-kicker { animation: fadeUp .7s .05s ease both; }
body.poster .hero-happy {
  animation: fadeUp .7s .2s ease both, happyGlow 3.6s 1.4s ease-in-out infinite alternate;
}
@keyframes happyGlow {
  from { text-shadow: 0 0 16px rgba(242,212,137,.3); }
  to { text-shadow: 0 0 34px rgba(242,212,137,.75); }
}
body.poster .hero-year { animation: fadeUp .7s .35s ease both; }
body.poster .hero-invite { animation: fadeUp .7s .5s ease both; }
body.poster .hero-panel { animation: fadeUp .7s .6s ease both; }
body.poster .price-card { animation: fadeUp .7s .8s ease both; }
@media (prefers-reduced-motion: reduce) {
  body.poster .hero-kicker, body.poster .hero-happy, body.poster .hero-year,
  body.poster .hero-invite, body.poster .hero-panel,
  body.poster .price-card, body.poster .feat-row { animation: none; }
}

/* probador de letras: ?f=1..10 en la URL cambia la letra de datos y precios
   (Date/Doors/Where, Adult/Child, listas). Los títulos grandes no se tocan. */
body.bf1 { --font-body: Jost, system-ui, sans-serif; }
body.bf2 { --font-body: Outfit, system-ui, sans-serif; }
body.bf3 { --font-body: Manrope, system-ui, sans-serif; }
body.bf4 { --font-body: Montserrat, system-ui, sans-serif; }
body.bf5 { --font-body: Raleway, system-ui, sans-serif; }
body.bf6 { --font-body: "Josefin Sans", system-ui, sans-serif; }
body.bf7 { --font-body: Marcellus, serif; }
body.bf8 { --font-body: "Cormorant Garamond", serif; letter-spacing: .2px; }
body.bf9 { --font-body: "EB Garamond", serif; }
body.bf10 { --font-body: Lora, serif; }
body[class*="bf"] .hp-v, body[class*="bf"] .price-num { font-family: var(--font-body); }
body.bf8 p, body.bf8 li, body.bf9 p, body.bf9 li { font-size: 17px; }

/* contacto discreto bajo el botón principal: enlace de correo, no protagonista */
.contact-inline {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px auto 0; width: fit-content;
  color: var(--muted); font-size: 14.5px; text-decoration: none;
  border-bottom: 1px dashed var(--line); padding-bottom: 3px;
}
.contact-inline svg { width: 17px; height: 17px; flex: none; }
.contact-inline:hover { color: var(--gold); border-bottom-color: var(--gold3); }

/* títulos de sección fuera de los bloques (petición de Robert) */
.sec-title {
  text-align: center; font-family: var(--font-head);
  font-size: 25px; letter-spacing: 1.5px; color: var(--gold2);
  margin: 30px 0 4px;
  text-shadow: 0 0 16px rgba(240,205,110,.3);
}
.sec-title + .card { margin-top: 10px; }

/* sellos de confianza bajo el precio (referencia de Robert) */
.feat-row { display: none; }
body.poster .feat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 16px; animation: fadeUp .7s .95s ease both;
}
body.poster .feat {
  border: 1px solid var(--line); border-radius: 12px; background: var(--cardbg);
  padding: 12px 8px; display: flex; flex-direction: column; align-items: center;
  gap: 7px; text-align: center;
}
.feat-ic { font-size: 21px; }
.feat > div { display: flex; flex-direction: column; gap: 2px; }
.feat b { font-size: 12.5px; color: var(--gold2); letter-spacing: .4px; }
.feat > div > span { font-size: 11px; color: var(--muted); line-height: 1.3; }
/* chispas doradas (Spoons) / cielo estrellado (Kings) */
body.poster .hero::before {
  content: ""; position: absolute; left: -8px; right: -8px; top: -14px; height: 240px;
  pointer-events: none; z-index: -1; opacity: .9;
}
body.poster.theme-spoons .hero::before {
  background-image:
    radial-gradient(circle 2.5px at 6% 18%, #f6d98a 99%, transparent 100%),
    radial-gradient(circle 1.5px at 10% 34%, #e8c56b 99%, transparent 100%),
    radial-gradient(circle 2px at 15% 10%, #fbe7b0 99%, transparent 100%),
    radial-gradient(circle 1.5px at 21% 27%, #f6d98a 99%, transparent 100%),
    radial-gradient(circle 1px at 26% 6%, #fff3cf 99%, transparent 100%),
    radial-gradient(circle 1px at 12% 48%, #e8c56b 99%, transparent 100%),
    radial-gradient(circle 2.5px at 94% 20%, #f6d98a 99%, transparent 100%),
    radial-gradient(circle 1.5px at 90% 36%, #e8c56b 99%, transparent 100%),
    radial-gradient(circle 2px at 85% 9%, #fbe7b0 99%, transparent 100%),
    radial-gradient(circle 1.5px at 79% 28%, #f6d98a 99%, transparent 100%),
    radial-gradient(circle 1px at 74% 13%, #fff3cf 99%, transparent 100%),
    radial-gradient(circle 1px at 89% 50%, #e8c56b 99%, transparent 100%),
    radial-gradient(circle 1px at 40% 5%, #f6d98a 99%, transparent 100%),
    radial-gradient(circle 1.5px at 60% 4%, #e8c56b 99%, transparent 100%);
  filter: drop-shadow(0 0 4px rgba(246,217,138,.65));
}
body.poster.theme-kings .hero::before {
  background-image:
    radial-gradient(circle 2px at 8% 15%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 1px at 16% 30%, #ffe9a8 99%, transparent 100%),
    radial-gradient(circle 1.5px at 24% 8%, #f7e3a4 99%, transparent 100%),
    radial-gradient(circle 1px at 33% 22%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 2px at 44% 6%, #ffe9a8 99%, transparent 100%),
    radial-gradient(circle 1px at 55% 18%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 1.5px at 66% 9%, #f7e3a4 99%, transparent 100%),
    radial-gradient(circle 1px at 74% 26%, #ffe9a8 99%, transparent 100%),
    radial-gradient(circle 2px at 84% 12%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 1px at 92% 32%, #f7e3a4 99%, transparent 100%),
    radial-gradient(circle 1px at 50% 38%, #ffe9a8 99%, transparent 100%),
    radial-gradient(circle 1.5px at 12% 46%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 1px at 88% 48%, #f7e3a4 99%, transparent 100%),
    radial-gradient(circle 1px at 62% 44%, #f2d489 99%, transparent 100%),
    radial-gradient(circle 1.5px at 38% 50%, #ffe9a8 99%, transparent 100%);
  filter: drop-shadow(0 0 3px rgba(242,212,137,.85));
}
/* botón de portada: pastilla dorada con contorno luminoso */
body.poster #btnStart {
  background: linear-gradient(120deg, var(--gold2), var(--gold3));
  color: var(--onacc);
  border: none; border-radius: 999px;
  letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; font-size: 15px;
  box-shadow: 0 0 22px rgba(240,205,110,.35), 0 6px 18px rgba(0,0,0,.4);
}
body.poster #btnStart {
  position: relative; overflow: hidden;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
  animation: btnPulse 2.6s ease-in-out infinite;
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(240,205,110,.3), 0 6px 18px rgba(0,0,0,.4); }
  50% { box-shadow: 0 0 38px rgba(240,205,110,.65), 0 6px 18px rgba(0,0,0,.4); }
}
body.poster #btnStart::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,240,190,.35), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: btnShine 3.4s ease-in-out infinite;
}
@keyframes btnShine { 0% { left: -80%; } 55% { left: 135%; } 100% { left: 135%; } }
body.poster #btnStart:hover, body.poster #btnStart:focus-visible {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 10px 34px rgba(240,205,110,.6);
  filter: brightness(1.06);
  animation: none;
}
body.poster #btnStart:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  body.poster #btnStart, body.poster #btnStart::before { animation: none; }
}
body.poster .veg { color: #8fd6a8; }

/* precios en panel tipo "entrada de gala", a juego con el recuadro del evento */
body.poster .price-card {
  max-width: 560px; margin: 14px auto 0; padding: 4px 0 0;
  border: 1px solid var(--gold3); border-radius: 10px;
  background: rgba(7, 5, 3, .84);
  outline: 1px solid rgba(240, 205, 110, .3); outline-offset: -5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}
body.poster .price-row { display: flex; align-items: stretch; gap: 0; }
body.poster .price-item {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; padding: 18px 10px 15px;
}
body.poster .price-div { display: block; width: 1px; background: linear-gradient(180deg, transparent, var(--line) 30%, var(--line) 70%, transparent); }
body.poster .price-lbl {
  font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold3); white-space: nowrap;
}
body.poster .price-num {
  font-family: var(--font-head); font-size: 32px; font-weight: 700;
  background: linear-gradient(180deg, var(--gold2) 30%, var(--gold) 60%, var(--gold3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
  filter: drop-shadow(0 0 14px rgba(242, 212, 137, .35));
}
body.poster .price-note { color: var(--dim); margin: 0; padding: 0 14px 14px; }

/* ============================================================
   Probador de presentación de fecha/puertas/dónde + precios: ?p=1..10
   (p1 = la actual; cuando Robert elija, se fija y se quita esto)
   ============================================================ */
/* p2 · editorial: sin cajas, solo filetes finos arriba y abajo */
body.poster.hp2 .hero-panel, body.poster.hp2 .price-card {
  background: none; border: none; box-shadow: none; border-radius: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
body.poster.hp2 .price-card { border-top: none; padding: 6px 0 14px; }
body.poster.hp2 .price-num { font-size: 33px; }

/* p3 · tarjeta única: evento y precios unidos en un solo marco */
body.poster.hp3 .hero-panel { border-radius: 14px 14px 0 0; }
body.poster.hp3 .price-card { border-radius: 0 0 14px 14px; border-top: none; margin-top: 0; }

/* p4 · entradas: dos tickets con canto punteado */
body.poster.hp4 .price-card { background: none; border: none; box-shadow: none; }
body.poster.hp4 .price-row { gap: 12px; }
body.poster.hp4 .price-item {
  border: 1px solid var(--gold3); border-left: 4px dotted var(--gold3);
  border-radius: 12px; background: var(--cardbg); padding: 16px 8px;
}
body.poster.hp4 .price-div { display: none; }

/* p5 · libro de cuentas: Adult ······ 49.95 con línea de puntos */
body.poster.hp5 .price-row { display: block; }
body.poster.hp5 .price-item { flex-direction: row; align-items: center; padding: 13px 16px; }
body.poster.hp5 .price-item::after {
  content: ""; flex: 1; order: 2; margin: 0 10px;
  border-bottom: 2px dotted var(--gold3); opacity: .55; align-self: center;
}
body.poster.hp5 .price-lbl { order: 1; margin: 0; }
body.poster.hp5 .price-num { order: 3; font-size: 25px; }
body.poster.hp5 .price-div { display: none; }
body.poster.hp5 .price-note { border-top: 1px dashed var(--line); }

/* p6 · banda dorada: la fecha sobre oro, los precios sobrios debajo */
body.poster.hp6 .hero-panel {
  background: linear-gradient(120deg, var(--gold2), var(--gold3));
  border: none; box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
body.poster.hp6 .hp-l { color: rgba(40,26,6,.65); }
body.poster.hp6 .hp-v, body.poster.hp6 .hp-loc .hp-v { color: #241a06; }
body.poster.hp6 .hp-div { background: rgba(40,26,6,.25); }
body.poster.hp6 .hp-loc { border-top-color: rgba(40,26,6,.3); }

/* p7 · filas apiladas: etiqueta a la izquierda, dato a la derecha */
body.poster.hp7 .hero-panel { flex-direction: column; align-items: stretch; padding: 4px 16px; }
body.poster.hp7 .hp-item {
  flex-direction: row; justify-content: space-between; align-items: center;
  padding: 11px 0; text-align: left; border-bottom: 1px solid var(--line);
}
body.poster.hp7 .hp-item:last-child { border-bottom: none; }
body.poster.hp7 .hp-div { display: none; }
body.poster.hp7 .hp-loc { flex-basis: auto; border-top: none; padding-top: 11px; }
body.poster.hp7 .hp-loc .hp-v { text-align: right; max-width: 62%; }

/* p8 · invitación: marco doble clásico */
body.poster.hp8 .hero-panel, body.poster.hp8 .price-card {
  border: 1px solid var(--gold3); border-radius: 3px;
  outline: 1px solid rgba(240, 205, 110, .35); outline-offset: 4px;
}

/* p9 · píldoras sueltas centradas */
body.poster.hp9 .hero-panel {
  background: none; border: none; box-shadow: none;
  flex-wrap: wrap; gap: 9px; justify-content: center; padding: 0;
}
body.poster.hp9 .hp-div { display: none; }
body.poster.hp9 .hp-item {
  flex: none; flex-direction: row; gap: 8px; align-items: baseline;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--cardbg); padding: 10px 16px;
}
body.poster.hp9 .hp-loc { flex-basis: auto; border-top: none; padding-top: 10px; }
body.poster.hp9 .price-card { background: none; border: none; box-shadow: none; }
body.poster.hp9 .price-row { gap: 10px; justify-content: center; }
body.poster.hp9 .price-item {
  flex: none; flex-direction: row; gap: 9px; align-items: baseline;
  border: 1px solid var(--gold3); border-radius: 999px;
  background: var(--cardbg); padding: 11px 18px;
}
body.poster.hp9 .price-num { font-size: 23px; }
body.poster.hp9 .price-div { display: none; }

/* p10 · minimalista de lujo: sin cajas, números enormes */
body.poster.hp10 .hero-panel {
  background: none; border: none; box-shadow: none;
  flex-direction: column; gap: 3px; padding: 0;
}
body.poster.hp10 .hp-item { flex-direction: row; gap: 9px; justify-content: center; align-items: baseline; }
body.poster.hp10 .hp-div { display: none; }
body.poster.hp10 .hp-loc { flex-basis: auto; border-top: none; padding-top: 4px; }
body.poster.hp10 .price-card { background: none; border: none; box-shadow: none; }
body.poster.hp10 .price-num { font-size: 40px; }

/* ============================================================
   Tanda 2 del probador de panel: ?p=11..18 — tipografía de cartel,
   sin cajitas (la tanda 1 entera fue rechazada por Robert)
   ============================================================ */
/* p11 · invitación centrada: fecha en letra de carta, raya corta, precios en renglones */
body.poster.hp11 .hero-panel { background: none; border: none; box-shadow: none; flex-direction: column; gap: 6px; padding: 4px 0 0; }
body.poster.hp11 .hp-div { display: none; }
body.poster.hp11 .hp-item { padding: 0; }
body.poster.hp11 .hp-item:nth-child(1) .hp-l { display: none; }
body.poster.hp11 .hp-item:nth-child(1) .hp-v { font-family: var(--font-head); font-size: 27px; font-weight: 600; color: var(--gold2); }
body.poster.hp11 .hp-item:nth-child(3) { flex-direction: row; gap: 7px; justify-content: center; align-items: baseline; }
body.poster.hp11 .hp-loc { flex-basis: auto; border-top: none; padding-top: 2px; }
body.poster.hp11 .hp-loc .hp-l { display: none; }
body.poster.hp11 .hero-panel::after { content: ""; width: 54px; height: 1px; background: var(--gold3); margin: 12px auto 0; }
body.poster.hp11 .price-card { background: none; border: none; box-shadow: none; margin-top: 6px; }
body.poster.hp11 .price-row { flex-direction: column; gap: 2px; }
body.poster.hp11 .price-div { display: none; }
body.poster.hp11 .price-item { flex-direction: row; gap: 10px; justify-content: center; align-items: baseline; padding: 3px 0; }
body.poster.hp11 .price-num { font-size: 24px; }

/* p12 · fecha monumental en oro, precios grandes a dos columnas al aire */
body.poster.hp12 .hero-panel { background: none; border: none; box-shadow: none; flex-direction: column; gap: 2px; padding: 4px 0 0; }
body.poster.hp12 .hp-div { display: none; }
body.poster.hp12 .hp-item:nth-child(1) .hp-l { display: none; }
body.poster.hp12 .hp-item:nth-child(1) .hp-v {
  font-family: var(--font-head); font-size: 37px; font-weight: 700;
  background: linear-gradient(180deg, var(--gold2), var(--gold3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.poster.hp12 .hp-item:nth-child(3) { flex-direction: row; gap: 7px; justify-content: center; align-items: baseline; }
body.poster.hp12 .hp-loc { flex-basis: auto; border-top: none; padding-top: 2px; }
body.poster.hp12 .hp-loc .hp-l { display: none; }
body.poster.hp12 .price-card { background: none; border: none; box-shadow: none; }
body.poster.hp12 .price-div { background: var(--line); }
body.poster.hp12 .price-num { font-size: 33px; }

/* p13 · tres columnas al aire: solo las rayitas verticales, valores en letra de carta */
body.poster.hp13 .hero-panel { background: none; border: none; box-shadow: none; padding: 6px 0; }
body.poster.hp13 .hp-v { font-family: var(--font-head); font-size: 19px; }
body.poster.hp13 .hp-loc .hp-v { font-family: var(--font-body); }
body.poster.hp13 .hp-l { color: var(--gold3); }
body.poster.hp13 .hp-loc { border-top: 1px solid var(--line); }
body.poster.hp13 .price-card { background: none; border: none; box-shadow: none; }
body.poster.hp13 .price-num { font-size: 30px; }

/* p14 · programa de teatro: renglones centrados con guion largo */
body.poster.hp14 .hero-panel { background: none; border: none; box-shadow: none; flex-direction: column; gap: 0; padding: 2px 0 0; }
body.poster.hp14 .hp-div { display: none; }
body.poster.hp14 .hp-item { flex-direction: row; justify-content: center; gap: 8px; align-items: baseline; padding: 5px 0; }
body.poster.hp14 .hp-l { text-transform: none; letter-spacing: .4px; font-style: italic; font-size: 13.5px; }
body.poster.hp14 .hp-l::after { content: " \2014"; color: var(--gold3); }
body.poster.hp14 .hp-loc { flex-basis: auto; border-top: none; padding-top: 5px; }
body.poster.hp14 .price-card { background: none; border: none; box-shadow: none; }
body.poster.hp14 .price-row { gap: 22px; justify-content: center; }
body.poster.hp14 .price-div { display: none; }
body.poster.hp14 .price-item { flex: none; flex-direction: row; gap: 8px; align-items: baseline; }
body.poster.hp14 .price-num { font-size: 22px; }

/* p15 · marquesina: solo cantos dorados a los lados, sin marco entero */
body.poster.hp15 .hero-panel, body.poster.hp15 .price-card {
  background: rgba(8, 6, 3, .45); border: none; box-shadow: none; border-radius: 6px;
  border-left: 3px solid var(--gold3); border-right: 3px solid var(--gold3);
}

/* p16 · halo dorado: sin marco, un resplandor suave detrás de cada bloque */
body.poster.hp16 .hero-panel, body.poster.hp16 .price-card {
  border: none; box-shadow: none;
  background: radial-gradient(65% 110% at 50% 50%, rgba(240, 205, 110, .13), transparent 78%);
}
body.poster.hp16 .hero-panel { flex-direction: column; gap: 5px; }
body.poster.hp16 .hp-div { display: none; }
body.poster.hp16 .hp-v { font-family: var(--font-head); font-size: 19px; }
body.poster.hp16 .hp-loc { flex-basis: auto; border-top: none; padding-top: 2px; }
body.poster.hp16 .hp-loc .hp-v { font-family: var(--font-body); }
body.poster.hp16 .price-num { font-size: 30px; }

/* p17 · párrafo de gala: todo seguido bajo el 2027, una raya corta antes del precio */
body.poster.hp17 .hero-panel { background: none; border: none; box-shadow: none; flex-direction: column; gap: 3px; padding: 0; }
body.poster.hp17 .hp-div { display: none; }
body.poster.hp17 .hp-item:nth-child(1) .hp-l { display: none; }
body.poster.hp17 .hp-item:nth-child(1) .hp-v { font-family: var(--font-head); font-size: 20px; color: var(--ink); }
body.poster.hp17 .hp-item:nth-child(3) { flex-direction: row; gap: 7px; justify-content: center; align-items: baseline; }
body.poster.hp17 .hp-loc { flex-basis: auto; border-top: none; padding-top: 1px; }
body.poster.hp17 .hp-loc .hp-l { display: none; }
body.poster.hp17 .hp-loc .hp-v { font-size: 12.5px; }
body.poster.hp17 .price-card { background: none; border: none; box-shadow: none; margin-top: 16px; position: relative; padding-top: 14px; }
body.poster.hp17 .price-card::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 1px; background: var(--gold3); }
body.poster.hp17 .price-row { justify-content: center; gap: 24px; }
body.poster.hp17 .price-div { display: none; }
body.poster.hp17 .price-item { flex: none; flex-direction: row; gap: 8px; align-items: baseline; }
body.poster.hp17 .price-num { font-size: 22px; }

/* p18 · con filete a los lados, como los títulos de sección */
body.poster.hp18 .hero-panel { background: none; border: none; box-shadow: none; flex-direction: column; gap: 6px; padding: 0; }
body.poster.hp18 .hp-div { display: none; }
body.poster.hp18 .hp-item:nth-child(1) { flex-direction: row; align-items: center; gap: 14px; width: 100%; }
body.poster.hp18 .hp-item:nth-child(1)::before, body.poster.hp18 .hp-item:nth-child(1)::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
body.poster.hp18 .hp-item:nth-child(1)::after { background: linear-gradient(90deg, var(--line), transparent); }
body.poster.hp18 .hp-item:nth-child(1) .hp-l { display: none; }
body.poster.hp18 .hp-item:nth-child(1) .hp-v { font-family: var(--font-head); font-size: 23px; color: var(--gold2); letter-spacing: 1px; }
body.poster.hp18 .hp-item:nth-child(3) { flex-direction: row; gap: 7px; justify-content: center; align-items: baseline; }
body.poster.hp18 .hp-loc { flex-basis: auto; border-top: none; padding-top: 2px; }
body.poster.hp18 .hp-loc .hp-l { display: none; }
body.poster.hp18 .price-card { background: none; border: none; box-shadow: none; }
body.poster.hp18 .price-row { align-items: center; gap: 14px; width: 100%; justify-content: center; }
body.poster.hp18 .price-row::before, body.poster.hp18 .price-row::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
body.poster.hp18 .price-row::after { background: linear-gradient(90deg, var(--line), transparent); }
body.poster.hp18 .price-div { display: none; }
body.poster.hp18 .price-item { flex: none; flex-direction: row; gap: 8px; align-items: baseline; }
body.poster.hp18 .price-num { font-size: 23px; }

/* mesas que no sirven para el grupo elegido: apagadas pero visibles (se
   pueden tocar y la app explica por qué no valen) */
.plan .ptable.nofit { opacity: .38; filter: saturate(.4); }
.plan.plan-img .ptable.nofit { opacity: 1; filter: none; box-shadow: inset 0 0 0 200px rgba(0,0,0,.55); border-radius: 22%; }
.plan .ptable.nofit.sel { opacity: 1; filter: none; box-shadow: none; }

/* ---- portada: cómo funciona la reserva + grupos grandes por correo (13-sep-2026) ---- */
.how-card { padding: 18px 20px; }
.how-list { margin: 0; padding-left: 22px; display: grid; gap: 9px; font-size: 14.5px; line-height: 1.5; }
.how-list b { color: var(--gold3, #d7b45a); }
.how-big { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; line-height: 1.5; }
.how-big a { color: var(--gold3, #d7b45a); text-decoration: underline; }
.note-card.big-group p { margin-bottom: 12px; }
.btn-mail { display: inline-block; text-decoration: none; text-align: center; width: 100%; }

/* ---- paso de mesa: reglas claras antes de elegir (Robert, 13-sep-2026) ---- */
.rules-card { margin-top: 14px; padding: 16px 18px; border-color: rgba(215,180,90,.45); }
.rules-title { font-family: Manrope, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: var(--gold3, #d7b45a); margin-bottom: 8px; }
.rules-list { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 14px; line-height: 1.5; }
.rules-list b { color: #fff; }
.rules-list a { color: var(--gold3, #d7b45a); text-decoration: underline; }

/* mesa apagada desde el panel: no existe para el cliente */
.ptable.off { display: none !important; }

/* táctil: que el botón no se quede "iluminado" después de tocarlo */
@media (hover: none) {
  .btn-ghost:hover { color: var(--muted); border-color: var(--line); box-shadow: none; transform: none; }
  .btn-primary:hover:not(:disabled) { transform: none; filter: none; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
}

/* paso de reglas + botón "Table rules" en el plano */
#step-rules .rules-card { margin-top: 16px; }
.rules-btn { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 0; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(215,180,90,.55); background: rgba(215,180,90,.10); color: var(--gold3, #d7b45a); font-family: var(--font-body); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.rules-btn .rules-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; font-family: Georgia, serif; font-style: italic; font-size: 12px; }
#rulesModal .rules-list { padding-left: 18px; }

/* botón "Read the table rules": que se vea que es un botón y que hay que tocarlo */
.btn-rules { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 12px;
  border: 1px solid rgba(240,205,110,.7); background: linear-gradient(120deg, rgba(240,205,110,.22), rgba(201,169,75,.12));
  color: #f3dd9a; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; letter-spacing: .3px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .12s ease, box-shadow .12s ease; }
.btn-rules:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 16px rgba(240,205,110,.25); }
.btn-rules .rules-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold3, #d7b45a); color: #1f1a10; font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 13px; }
.btn-rules-top { margin: 12px 0 0; }
.tdetail-rules { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(240,205,110,.25); text-align: center; }
.tdetail-rules p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.tdetail-rules .btn-rules { width: 100%; max-width: 360px; }
.rules-btn { display: none; }
@media (hover: none) { .btn-rules:hover { transform: none; box-shadow: 0 4px 14px rgba(0,0,0,.3); } }

/* sin mesas para el grupo: texto + botón de correo con plantilla */
.no-options-mail p { margin: 0 0 12px; }
.no-options-mail .btn-mail { max-width: 360px; margin: 0 auto; }

/* subtítulo del paso de mesa: una línea, legible sobre la foto */
#step-table .step-sub { font-size: 15px; color: #f1e6cc; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.6); }

/* menús: se puede cambiar todo después con la referencia */
.menu-later { margin: 12px 0 14px; border-color: rgba(215,180,90,.45); }
.menu-later p { margin: 0; font-size: 14px; line-height: 1.5; }

.tdetail-joined { color: #f3dd9a; }

/* reglas fijas debajo del plano */
.rules-inplan { margin-top: 16px; scroll-margin-top: 80px; }
.rules-inplan.flash { animation: rulesFlash 1.6s ease; }
@keyframes rulesFlash { 0% { box-shadow: 0 0 0 3px rgba(240,205,110,.0); } 25% { box-shadow: 0 0 0 3px rgba(240,205,110,.7); } 100% { box-shadow: 0 0 0 3px rgba(240,205,110,0); } }

/* ficha de mesa: recordatorio + Got it */
.tdetail-rules .btn-gotit { width: 100%; max-width: 360px; margin: 4px auto 0; display: block; }
.tdetail-hint { margin: 8px 0 0 !important; font-size: 12.5px !important; color: var(--muted) !important; }
.tdetail-ok { margin: 4px 0 0 !important; color: #f3dd9a !important; font-weight: 600; }

.topbar-total .tt-label { white-space: nowrap; }

/* cabecera: el grupo claro encima del importe */
.topbar-total .tt-label { font-size: 12px; color: #f3dd9a; text-transform: none; letter-spacing: .2px; font-weight: 600; margin-bottom: 1px; }
.topbar-total .tt-amount small { font-family: var(--font-body); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-right: 5px; vertical-align: middle; }
.topt-cap { font-family: var(--font-body) !important; font-size: 13px !important; color: #f3dd9a !important; white-space: nowrap; }

@media (max-width: 560px) {
  .tdetail-head { flex-wrap: wrap; }
  .topt-cap { flex-basis: 100%; margin-top: 4px; }
}

/* explicación del bloque: mesas en dorado, sillas en tono claro, personas en blanco */
.tdetail-rules .tn, #tableSub .tn { color: #f3dd9a; font-weight: 700; white-space: nowrap; }
.tdetail-rules .ch { color: #cbb58c; white-space: nowrap; }
.tdetail-rules .pp { color: #fff; font-weight: 700; }

/* "Start over" bajo el total: suelta la mesa y limpia lo guardado */
.tt-restart { margin-top: 3px; align-self: flex-end; background: none; border: none; padding: 0; color: var(--muted); font-family: var(--font-body); font-size: 11px; text-decoration: underline; cursor: pointer; letter-spacing: .3px; }
.tt-restart:hover { color: var(--gold2); }

/* comensal que decide después */
.diner-status.later { color: #f3dd9a; border-color: rgba(240,205,110,.5); }
.diner-later { border-color: rgba(240,205,110,.35); }
.later-txt { margin: 10px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.later-btn { display: inline-block; margin-top: 12px; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(240,205,110,.5); background: rgba(240,205,110,.08); color: #f3dd9a; font-family: var(--font-body); font-weight: 600; font-size: 13.5px; cursor: pointer; }







/* ordenador: resumen centrado en la barra — cristal oscuro, borde dorado fino, sin colores extra */
.side-sum, .ss-restart { display: none; }
@media (min-width: 1100px) {
  .topbar { --navh: 72px; position: sticky; }
  .side-sum { display: flex; align-items: stretch; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    max-width: 60vw; padding: 0; border-radius: 14px;
    background: rgba(12,9,4,.55); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(240,205,110,.20);
    box-shadow: 0 8px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05); }
  .side-sum[hidden] { display: none; }
  .ss-row { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 3px; padding: 9px 22px; white-space: nowrap; position: relative; }
  .ss-row + .ss-row::before, .ss-total::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: linear-gradient(180deg, transparent, rgba(240,205,110,.22), transparent); }
  .ss-total { position: relative; }
  .ss-row span, .ss-total span { font-size: 9.5px; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(232,217,176,.55); }
  .ss-row b { font-size: 14.5px; font-weight: 600; color: #e3d8bd; max-width: 320px; overflow: hidden; text-overflow: ellipsis; letter-spacing: .2px; }
  .ss-total { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 8px 24px 8px 22px; }
  .ss-total b { font-family: var(--font-head); font-size: 22px; line-height: 1.05; letter-spacing: .5px; color: #d8bc6b; }
  .ss-restart { display: inline-flex; align-items: center; gap: 7px; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(240,205,110,.18); background: rgba(12,9,4,.3);
    color: rgba(232,217,176,.7); font-family: var(--font-body); font-size: 12.5px; letter-spacing: .3px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
  .ss-restart[hidden] { display: none; }
  .ss-restart:hover { border-color: var(--gold3); color: var(--gold2); background: rgba(240,205,110,.08); }
  .topbar-total, .tt-restart { display: none !important; }
}

/* el pie siempre abajo del todo, aunque el paso tenga poco contenido (ordenador y móvil) */
html { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main.wrap { flex: 1 0 auto; width: 100%; }   /* como hijo de flex, sin esto se encogía al contenido */
body > .topbar, body > .foot { width: 100%; }
.foot { margin-top: auto; }

/* pie compacto: una línea en ordenador, dos en móvil, sin tanto aire */
.foot { padding: 14px 16px 18px; font-size: 12.5px; }
.foot-logo { display: none; }
.foot p { margin-top: 4px; }
@media (min-width: 900px) {
  /* linea 1: empresa · Puerto del Carmen · Lanzarote — linea 2: enlaces */
  .foot p { display: inline; margin: 0; }
  .foot p + p::before { content: " · "; color: var(--dim); }
  .foot .foot-links { display: block; margin-top: 6px; }
  .foot .foot-links::before { content: none; }
}
@media (max-width: 640px) { .topnav-mine { display: none; } }


/* ordenador: cabecera de cada paso más compacta para que el plano y la leyenda entren en pantalla */
@media (min-width: 900px) {
  .topbar { --navh: 64px; }
  .plans-tabs { margin-bottom: 8px; }
  .room-tab { height: 36px; min-height: 0; padding: 0 12px; font-size: 12px; letter-spacing: 1.5px; }
  .plan-legend { margin-top: 8px; }
  .legend-bar { margin-top: 8px; }
  .option-list { margin-top: 10px; }
  .side-sum .ss-row, .side-sum .ss-total { padding-top: 6px; padding-bottom: 6px; }
}

@media (min-width: 900px) {
  .topbar { --navh: 60px; }
  .wrap { padding-top: 12px; }
  .plan-card { padding: 10px; }
  .plans-tabs { margin-bottom: 6px; }
}

/* cabecera del comensal: nombre con su estado debajo · etiqueta del menú en medio · "Decide later" a la derecha */
.diner-head { align-items: center; }
.dh-left { display: flex; flex-direction: column; gap: 2px; }
.dh-left .diner-status { margin: 0; font-size: 12px; }
.later-top { margin: 0 !important; padding: 7px 13px !important; font-size: 12.5px !important; border-radius: 999px !important; white-space: nowrap; }
@media (max-width: 480px) { .diner-head { flex-wrap: wrap; row-gap: 8px; } .later-top { flex-basis: 100%; text-align: center; } }

/* ordenador: cabecera de paso = un panel oscuro limpio, texto a la izquierda, filo dorado lateral */
@media (min-width: 900px) {
  .step:not(#step-landing):not(#step-done) > .step-title {
    margin: 0; padding: 12px 18px 2px 20px; font-size: 22px; letter-spacing: .3px; text-align: left; color: #fff;
    background: rgba(10,7,3,.74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(240,205,110,.22); border-bottom: none; border-left: 4px solid var(--gold3); border-radius: 10px 12px 0 0;
    box-shadow: 0 8px 22px rgba(0,0,0,.35); }
  .step:not(#step-landing):not(#step-done) > .step-title + .step-sub {
    margin: 0 0 12px; padding: 0 18px 12px 20px; font-size: 13.5px; line-height: 1.45; text-align: left; color: #ece3ca;
    background: rgba(10,7,3,.74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(240,205,110,.22); border-top: none; border-left: 4px solid var(--gold3); border-radius: 0 0 12px 10px;
    box-shadow: 0 8px 22px rgba(0,0,0,.35); }
  .step:not(#step-landing):not(#step-done) > .step-title:not(:has(+ .step-sub)) { padding-bottom: 12px; border-bottom: 1px solid rgba(240,205,110,.22); border-radius: 10px 12px 12px 10px; margin-bottom: 12px; }
}

/* cabecera del comensal: dos líneas limpias + nombre opcional */
.diner-head { align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid rgba(240,205,110,.14); margin-bottom: 12px; }
.dh-left { gap: 4px; min-width: 0; }
.diner-title { font-size: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.diner-name { font-family: var(--font-head); font-size: 18px; letter-spacing: .5px; color: #f3dd9a; font-weight: 600; text-transform: capitalize; }
.name-link { background: none; border: none; padding: 0; color: var(--muted); font-family: var(--font-body); font-size: 12px; letter-spacing: 0; text-decoration: underline; cursor: pointer; }
.name-link:hover { color: var(--gold2); }
.name-edit { display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.name-edit input { width: 200px; max-width: 100%; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid rgba(240,205,110,.35); background: rgba(0,0,0,.35); color: var(--ink); font: 16px var(--font-body); }
.name-ok { height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(240,205,110,.5); background: rgba(240,205,110,.12); color: #f3dd9a; font: 600 13px var(--font-body); cursor: pointer; }
.diner-meta { font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.diner-meta .diner-status { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.diner-meta .diner-status.later { color: #f3dd9a; }
.diner-meta .diner-status.todo { color: #e2d3a8; }
.later-top { align-self: center; }

/* menús: un comensal cada vez, con la fila de comensales arriba */
.diner-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.dn-chip { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; height: 48px; padding: 0 8px;
  border-radius: 12px; border: 1px solid rgba(240,205,110,.22); background: rgba(0,0,0,.35); color: var(--muted); cursor: pointer; font-family: var(--font-body); line-height: 1; }
.dn-chip .dn-n { font-family: var(--font-head); font-size: 17px; color: #e6dcc0; }
.dn-chip .dn-t { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 2px; }
.dn-chip.ok { border-color: rgba(126,226,168,.45); }
.dn-chip.ok .dn-n { color: #7ee2a8; }
.dn-chip.later { border-color: rgba(240,205,110,.4); }
.dn-chip.cur { border-color: var(--gold3); background: rgba(240,205,110,.12); box-shadow: 0 0 0 2px rgba(240,205,110,.18); }
.dn-chip.cur .dn-n { color: var(--gold2); }
.dn-ok { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: #2f7a4f; color: #fff; font-size: 10px; display: grid; place-items: center; border: 1px solid rgba(0,0,0,.4); }
.dn-chip.later .dn-ok { background: #8a6414; }
.diner-steps { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 4px; }
.diner-steps .btn-primary { flex: 1; max-width: 300px; }
.diner-steps .btn-primary.ghosted { background: transparent; color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.menu-alldone { margin: 12px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(126,226,168,.08); border: 1px solid rgba(126,226,168,.3); color: #cfeedd; font-size: 14px; text-align: center; }

/* ordenador: cada comensal en una pantalla — entrante, principal y postre en tres columnas */
@media (min-width: 900px) {
  #dinerList .diner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; align-items: start; }
  #dinerList .diner > .diner-head, #dinerList .diner > .diet-toggle, #dinerList .diner > .diet-box, #dinerList .diner > .copy-btn, #dinerList .diner > .later-txt { grid-column: 1 / -1; }
  #dinerList .course { margin: 0; }
  #dinerList .opt { padding: 8px 10px; gap: 8px; }
  #dinerList .opt-name { font-size: 14px; }
  #dinerList .opt-desc { font-size: 11.5px; line-height: 1.3; }
  #dinerList .course-lbl { margin-bottom: 6px; }
  #dinerList .doneness { margin-top: 8px; }
  #dinerList .doneness .chip { padding: 5px 9px; font-size: 12px; }
  #dinerList .copy-btn { margin-top: 4px; }
}

@media (min-width: 900px) {
  .menu-later { margin: 8px 0 10px; padding: 8px 14px; }
  .menu-later p { font-size: 12.5px; line-height: 1.4; }
  #dinerList .opt { padding: 7px 10px; }
  #dinerList .opt-desc { font-size: 11px; }
  #dinerList .diner-head { padding-bottom: 8px; margin-bottom: 8px; }
  .diner-nav { margin-bottom: 10px; }
  .dn-chip { height: 42px; min-width: 48px; }
}

.diner-name { text-transform: none; }
/* móvil: cada comensal en una pantalla — filas compactas, descripción solo en el plato elegido */
@media (max-width: 899px) {
  #step-menu .menu-later { display: none; }
  #dinerList .diner { padding: 12px 12px 10px; }
  #dinerList .diner-head { padding-bottom: 8px; margin-bottom: 8px; }
  #dinerList .course { margin: 0 0 8px; }
  #dinerList .course-lbl { margin-bottom: 4px; font-size: 11px; }
  #dinerList .opts { gap: 5px; }
  #dinerList .opt { padding: 7px 10px; gap: 8px; min-height: 0; }
  #dinerList .opt-name { font-size: 14px; }
  #dinerList .opt:not(.sel) .opt-desc { display: none; }
  #dinerList .opt.sel .opt-desc { font-size: 11px; }
  #dinerList .doneness { margin-top: 6px; }
  #dinerList .doneness .chip { padding: 5px 9px; font-size: 12px; }
  #dinerList .diet-toggle { margin-top: 4px; font-size: 12.5px; }
  .diner-nav { gap: 6px; margin-bottom: 8px; }
  .dn-chip { height: 40px; min-width: 44px; padding: 0 6px; }
  .dn-chip .dn-n { font-size: 15px; }
  .diner-steps { margin-top: 10px; }
}

/* la fila de comensales se queda fija bajo la barra al cambiar de comensal (no se pierde la referencia) */
.diner-nav { position: sticky; top: calc(var(--navh) + var(--noticeH, 0px) + 6px); z-index: 30; padding: 8px 8px 6px; margin: 0 0 10px;
  border-radius: 12px; background: rgba(12,9,4,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(240,205,110,.16); box-shadow: 0 8px 20px rgba(0,0,0,.3); }

/* fila inferior del paso de menús: Back · ← Previous guest · Next guest → (o Continue) */
.nav-row-menu { align-items: center; }
.diner-navbtns { display: flex; gap: 10px; margin-left: auto; align-items: center; }
.diner-navbtns .btn-primary { min-width: 180px; }
.nav-row-menu #btnMenu { margin-left: 10px; }
.diner-steps { display: none; }
@media (max-width: 480px) { .diner-navbtns .btn-primary { min-width: 0; } .diner-navbtns .btn-ghost { padding: 12px 12px; } }

@media (min-width: 900px) {
  .dn-chip { height: 52px; min-width: 62px; padding: 0 10px; border-radius: 13px; }
  .dn-chip .dn-n { font-size: 19px; }
  .dn-chip .dn-t { font-size: 9.5px; margin-top: 3px; }
  .dn-ok { width: 18px; height: 18px; font-size: 11px; top: -7px; right: -7px; }
  #dinerList .course-lbl { text-align: center; margin-bottom: 8px; letter-spacing: 2px; }
}

/* ordenador: el paso de menús más ancho (tres columnas cómodas); el resto se queda a 720 */
@media (min-width: 1100px) {
  main.wrap:has(#step-menu:not([hidden])) { max-width: 960px; }
  #dinerList .opt-name { font-size: 14.5px; }
  #dinerList .opt-desc { font-size: 12px; }
}

/* la fila de comensales siempre en UNA línea: en ordenador se reparten el ancho; en móvil se desliza */
.diner-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.diner-nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .dn-chip { flex: 1 1 0; min-width: 0; max-width: 90px; } }
@media (max-width: 899px) {
  /* pocos comensales: las fichas se reparten el ancho (mas grandes); muchos: se encogen y la fila se desliza */
  .dn-chip { flex: 1 1 0; min-width: 48px; max-width: 110px; height: 50px; }
  .dn-chip .dn-n { font-size: 18px; }
  .dn-chip .dn-t { font-size: 10px; }
}

/* móvil: un plato cada vez dentro del comensal */
.course-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.ctab { flex: 1; height: 36px; border-radius: 10px; border: 1px solid rgba(240,205,110,.22); background: rgba(0,0,0,.3); color: var(--muted); font-family: var(--font-body); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.ctab.done { color: #7ee2a8; border-color: rgba(126,226,168,.4); }
.ctab.cur { color: var(--gold2); border-color: var(--gold3); background: rgba(240,205,110,.12); }
.course-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.course-nav .btn-primary { flex: 1; max-width: 220px; }
.fixed-course { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.fixed-course b { color: var(--ink); font-weight: 600; }
@media (max-width: 899px) {
  #dinerList .opt:not(.sel) .opt-desc { display: block; }   /* con un plato por pantalla sí cabe la descripción */
  #dinerList .opt { padding: 9px 12px; }
}
/* ordenador: todo el comensal y los botones en pantalla */
@media (min-width: 900px) {
  #step-menu .menu-later { display: none; }
  #dinerList .opt { padding: 6px 10px; }
  #dinerList .opt-desc { font-size: 11px; line-height: 1.25; }
  #dinerList .opt-name { font-size: 14px; line-height: 1.2; }
  #dinerList .opts { gap: 5px; }
  #dinerList .diner { padding: 12px 16px 10px; }
  .diner-nav { padding: 6px 8px 4px; }
  .dn-chip { height: 46px; }
  .nav-row-menu { margin-top: 12px; }
}

.menu-deadline-note { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
/* "+ add name": botoncito visible */
.name-link { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(240,205,110,.45); background: rgba(240,205,110,.10); color: #f3dd9a; font-size: 12px; font-weight: 600; text-decoration: none; letter-spacing: .2px; vertical-align: middle; }
.name-link:hover { background: rgba(240,205,110,.2); color: #fff; }

/* platos: letra más grande y legible (público 40+), sin zoom */
#dinerList .opt-name { font-size: 16px !important; font-weight: 600; letter-spacing: .1px; }
#dinerList .opt-desc { font-size: 12.5px !important; line-height: 1.35 !important; color: #cdbf9c; }
#dinerList .opt { padding: 9px 12px !important; }
#dinerList .course-lbl { font-size: 12px; }
.ctab { font-size: 13.5px; height: 38px; }
@media (max-width: 899px) {
  #step-menu > .step-title { font-size: 24px; }
  #step-menu > .step-sub { display: none; }
  .menu-deadline-note { font-size: 12px; margin-bottom: 8px; }
  #dinerList .diner-head { padding-bottom: 8px; margin-bottom: 8px; }
  .later-top { flex-basis: auto !important; }
}
@media (min-width: 900px) {
  #dinerList .opt-name { font-size: 15.5px !important; }
  #dinerList .opt-desc { font-size: 12px !important; }
  #dinerList .opt { padding: 8px 12px !important; }
}

/* ===== móvil: cabeceras legibles y botonera fija abajo ===== */
@media (max-width: 899px) {
  .step:not(#step-landing):not(#step-done) > .step-title {
    margin: 0; padding: 10px 14px 2px 16px; font-size: 21px; line-height: 1.2; letter-spacing: .2px; color: #fff;
    background: rgba(10,7,3,.74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(240,205,110,.22); border-bottom: none; border-left: 4px solid var(--gold3); border-radius: 10px 12px 0 0; }
  .step:not(#step-landing):not(#step-done) > .step-title + .step-sub {
    margin: 0 0 12px; padding: 2px 14px 10px 16px; font-size: 13px; line-height: 1.4; color: #ece3ca;
    background: rgba(10,7,3,.74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(240,205,110,.22); border-top: none; border-left: 4px solid var(--gold3); border-radius: 0 0 12px 10px; }
  .step:not(#step-landing):not(#step-done) > .step-title:not(:has(+ .step-sub)) { padding-bottom: 10px; border-bottom: 1px solid rgba(240,205,110,.22); border-radius: 10px 12px 12px 10px; margin-bottom: 12px; }
  #step-menu > .step-sub { display: block; }
  .menu-deadline-note { margin: 0 0 10px; padding: 0 4px; }
  /* botonera fija abajo: siempre a la vista, sobre el contenido */
  .step:not(#step-landing):not(#step-done) > .nav-row {
    position: sticky; bottom: 0; z-index: 25; margin: 14px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(12,9,4,0) 0%, rgba(12,9,4,.94) 26%); }
  .step:not(#step-landing):not(#step-done) > .nav-row .btn-primary { flex: 1; max-width: none; }
  .nav-row-menu .diner-navbtns { flex: 1; justify-content: flex-end; }
  .nav-row-menu .diner-navbtns .btn-primary { flex: 1; }
  .nav-row-menu .diner-navbtns .btn-ghost { padding: 12px 12px; white-space: nowrap; }
}

/* móvil: una sola botonera. Los platos avanzan solos y las pestañas sirven para volver. */
@media (max-width: 899px) {
  .course-nav { display: none; }
  .step:not(#step-landing):not(#step-done) > .nav-row { gap: 10px; padding-top: 8px; }
  .step:not(#step-landing):not(#step-done) > .nav-row .btn-ghost { flex: 0 0 auto; padding: 0 16px; height: 46px; font-size: 14px; border-color: rgba(240,205,110,.25); color: #d9cfb3; background: rgba(0,0,0,.25); }
  .step:not(#step-landing):not(#step-done) > .nav-row .btn-primary { height: 46px; padding: 0 18px; font-size: 15.5px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
  .nav-row-menu .diner-navbtns .btn-ghost { display: none; }   /* "Previous guest": se vuelve tocando la fila de comensales */
  .nav-row-menu .diner-navbtns .btn-primary { min-width: 0; }
  .diner-nav { top: calc(var(--navh) + var(--noticeH, 0px) + 4px); }
}

/* popup del nombre del comensal */
.modal-name { max-width: 380px; text-align: center; }
.modal-name h3 { font-size: 20px; margin-bottom: 4px; }
.nm-sub { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.nm-sub span { color: #f3dd9a; font-weight: 600; }
#nmInput { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(240,205,110,.45); background: rgba(0,0,0,.4); color: var(--ink); font: 18px var(--font-body); text-align: center; outline: none; }
#nmInput:focus { border-color: var(--gold3); box-shadow: 0 0 0 3px rgba(240,205,110,.18); }
.nm-actions { display: flex; gap: 10px; margin-top: 14px; }
.nm-actions .btn-primary { flex: 1; }
.name-edit { display: none; }

/* selector de idioma */
.lang-sw { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 1px; color: var(--muted); }
.lang-sw button { background: none; border: none; padding: 2px 4px; color: var(--muted); font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 1px; cursor: pointer; }
.lang-sw button.on { color: var(--gold2); text-decoration: underline; text-underline-offset: 3px; }
.topnav .lang-sw { margin-left: 6px; }
/* nota de cambios del menú: en caja, legible, con sitio para dos líneas */
.menu-deadline-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; color: #e6dcc0;
  background: rgba(10,7,3,.6); border: 1px solid rgba(240,205,110,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.menu-deadline-note strong { color: #f3dd9a; }
/* fondo un punto más oscuro para que el texto respire */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.16); pointer-events: none; }
@media (max-width: 899px) { .menu-deadline-note { margin: 0 0 10px; font-size: 13px; } }

/* selector de idioma con banderas */
.lang-sw { gap: 4px; }
.lang-sw button { font-size: 15px; line-height: 1; padding: 6px 7px; border-radius: 999px; border: 1px solid transparent; opacity: .55; filter: grayscale(.4); }
.lang-sw button.on { opacity: 1; filter: none; border-color: rgba(240,205,110,.45); background: rgba(240,205,110,.10); text-decoration: none; }
.foot-lang button { font-size: 12px; letter-spacing: .5px; }
.topnav .lang-sw { margin: 0 4px 0 8px; }
/* textos más largos en español: que ningún botón se salga */
.btn-primary, .btn-ghost, .later-btn, .btn-rules { white-space: normal; line-height: 1.2; }
.nav-row .btn-primary { min-width: 0; }
@media (max-width: 899px) {
  .step:not(#step-landing):not(#step-done) > .nav-row .btn-primary { font-size: 14.5px; padding: 0 12px; }
  .step:not(#step-landing):not(#step-done) > .nav-row .btn-ghost { padding: 0 12px; font-size: 13.5px; }
  .ctab { font-size: 12.5px; padding: 0 4px; }
  .later-top { font-size: 12px !important; padding: 6px 10px !important; }
}

/* móvil: barra superior sin desbordar (Condiciones y banderas están en el pie) */
@media (max-width: 640px) {
  .topnav .lang-sw { display: none; }
  .topnav { gap: 6px; }
  .topnav-book { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
  .topnav-link { padding: 7px 10px; font-size: 12.5px; }
}

/* banderas: pastilla flotante bajo la cabecera, esquina derecha, fija */
.lang-fab { position: fixed; right: 10px; top: calc(var(--navh) + var(--noticeH, 0px) + 8px); z-index: 38;
  display: inline-flex; gap: 2px; padding: 3px 4px; border-radius: 999px;
  background: rgba(12,9,4,.72); border: 1px solid rgba(240,205,110,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.lang-fab button { font-size: 16px; padding: 5px 7px; opacity: .5; }
.lang-fab button.on { opacity: 1; background: rgba(240,205,110,.14); border-color: rgba(240,205,110,.45); }
@media (max-width: 640px) { .topnav .lang-sw { display: none; } }

.lang-fab { top: 70px; transition: top .15s ease; }

/* manage: el asistente de comensales usa los mismos estilos; botonera con Guardar */
#mgNav { margin-top: 14px; }
#mgNav .diner-navbtns { margin-left: 0; }
@media (max-width: 899px) { .nav-row-menu .diner-navbtns .btn-ghost.mg-next { display: inline-flex; align-items: center; justify-content: center; text-align: center; } }
#mgNav #btnSave { margin-left: auto; }
@media (max-width: 899px) {
  #bookingView > .nav-row { position: sticky; bottom: 0; z-index: 25; margin: 14px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(12,9,4,0) 0%, rgba(12,9,4,.94) 26%); }
  #mgNav .diner-navbtns .btn-ghost { padding: 0 12px; height: 46px; font-size: 13.5px; white-space: nowrap; }
  #mgNav #btnSave { flex: 1; height: 46px; }
}

/* escritorio: banderas en la barra de arriba (junto a Contact); la pastilla flotante solo en movil */
@media (min-width: 641px) { .lang-fab { display: none !important; } }
.topnav .nav-lang button { font-size: 15px; padding: 5px 6px; }

/* movil estrecho: que Contacto · Condiciones · RESERVAR quepan tambien en espanol */
@media (max-width: 420px) {
  .topnav { gap: 3px; }
  .topnav-link { padding: 6px 6px; font-size: 11.5px; }
  .topnav-book { padding: 8px 8px; font-size: 11px; letter-spacing: .4px; }
  body.poster .topbar-logo, .topbar-logo { height: 32px; max-width: 30vw; object-fit: contain; object-position: left center; }
  body.poster.theme-kings .topbar-logo { height: 34px; }
}

/* banderas dibujadas (los emoji no se ven en color en Windows) */
.lang-sw button { display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.lang-sw .flag { display: block; width: 21px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.lang-sw button { opacity: .6; filter: none; }
.lang-sw button.on { opacity: 1; }
.lang-sw button:hover { opacity: 1; }
.lang-fab .flag { width: 22px; height: 15px; }

.how-list a { color: var(--gold2); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.how-list a:hover { color: #fff; }

/* movil: en Gestionar mi reserva la pastilla de banderas no debe tapar el titulo */
@media (max-width: 640px) { #lookup.step { padding-top: 46px; } }

/* tematica de la noche (Kings): tarjeta estilo anos 80 / synthwave, solo CSS */
.party-card { position: relative; overflow: hidden; text-align: center; padding: 26px 18px 30px; margin-top: 14px;
  border: 1px solid rgba(255,80,210,.55); border-radius: 18px;
  background: linear-gradient(180deg, #120833 0%, #2b0d5e 55%, #0a0520 100%);
  box-shadow: 0 0 0 1px rgba(0,229,255,.18), 0 0 28px rgba(255,60,200,.28), inset 0 0 60px rgba(120,40,220,.25); }
.party-sun { position: absolute; left: 50%; top: 18px; width: 210px; height: 210px; margin-left: -105px; border-radius: 50%;
  background: linear-gradient(180deg, #ffd166 0%, #ff8a3d 40%, #ff3d9a 75%, #b0269e 100%);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 20px), linear-gradient(#000, #000);
  -webkit-mask-composite: source-in; mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 20px);
  opacity: .55; filter: blur(.2px) drop-shadow(0 0 22px rgba(255,90,160,.55)); }
.party-sun { -webkit-mask: linear-gradient(180deg, #000 0 55%, transparent 55% 60%, #000 60% 66%, transparent 66% 70%, #000 70% 75%, transparent 75% 78%, #000 78% 82%, transparent 82% 84%, #000 84% 87%, transparent 87% 100%);
  mask: linear-gradient(180deg, #000 0 55%, transparent 55% 60%, #000 60% 66%, transparent 66% 70%, #000 70% 75%, transparent 75% 78%, #000 78% 82%, transparent 82% 84%, #000 84% 87%, transparent 87% 100%); }
.party-grid { position: absolute; left: -30%; right: -30%; bottom: -2px; height: 46%; pointer-events: none;
  background-image: linear-gradient(rgba(0,229,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,60,200,.55) 1px, transparent 1px);
  background-size: 100% 22px, 44px 100%; transform: perspective(260px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(180deg, transparent, #000 45%); mask: linear-gradient(180deg, transparent, #000 45%); opacity: .8; }
.party-inner { position: relative; z-index: 1; }
.party-tag { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #7ff6ff; text-shadow: 0 0 8px rgba(0,229,255,.8); }
.party-title { margin-top: 6px; font-family: "Arial Black", Impact, "Segoe UI Black", sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: 46px; letter-spacing: 3px; line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #9be7ff 38%, #2f6bff 50%, #ff4fd8 62%, #ffd0f2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(255,80,220,.9)) drop-shadow(0 0 18px rgba(255,80,220,.45)); }
.party-dress { margin-top: 12px; font-size: 15px; color: #fff; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.party-prize { display: inline-block; margin-top: 12px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #1a0b3a;
  background: linear-gradient(90deg, #7ff6ff, #ffe66d 50%, #ff7ad9); box-shadow: 0 0 18px rgba(255,230,109,.45); }
.party-prize::before { content: "🍾 "; }
@media (max-width: 640px) { .party-title { font-size: 34px; letter-spacing: 2px; } .party-sun { width: 170px; height: 170px; margin-left: -85px; } .party-prize { font-size: 13px; padding: 8px 12px; } }

/* tarjeta 80s con banner de imagen: la imagen sustituye al dibujo CSS */
.party-card.has-img { padding: 0; background: #0b0713; border-color: rgba(240,205,110,.5); box-shadow: 0 0 22px rgba(240,205,110,.18); }
.party-card.has-img .party-sun, .party-card.has-img .party-grid, .party-card.has-img .party-inner { display: none; }
.party-card.has-img .party-img { display: block; width: 100%; height: auto; }
/* texto debajo de la imagen: en español siempre (la imagen va en inglés) y en móvil siempre (el texto de la imagen queda muy pequeño) */
.party-card.has-img .party-tag, .party-card.has-img .party-title { display: none; }
.party-card.has-img .party-dress { margin-top: 0; font-size: 14px; }
.party-card.es-caption .party-inner { display: block; padding: 10px 14px 16px; }
@media (max-width: 640px) { .party-card.has-img .party-inner { display: block; padding: 10px 14px 16px; } }

/* apertura programada: cuenta atras en la portada */
.open-card { text-align: center; padding: 18px 16px 16px; border-color: rgba(240,205,110,.55); box-shadow: 0 0 26px rgba(240,205,110,.16); }
.open-tag { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold3); }
.open-when { font-family: var(--font-head); font-size: 24px; color: var(--ink); margin-top: 4px; }
.open-count { display: flex; justify-content: center; gap: 10px; margin: 12px 0 8px; }
.oc-b { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 8px 6px 6px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(240,205,110,.3); }
.oc-b b { font-family: var(--font-head); font-size: 30px; line-height: 1; color: var(--gold2); font-variant-numeric: tabular-nums; }
.oc-b i { font-style: normal; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.open-sub { font-size: 13.5px; color: var(--muted); max-width: 460px; margin: 0 auto; }
#btnStart:disabled { opacity: .55; cursor: default; filter: grayscale(.3); }
@media (max-width: 480px) { .oc-b { min-width: 56px; } .oc-b b { font-size: 26px; } .open-when { font-size: 21px; } }

/* la cuenta atras va justo encima del panel de fecha/hora/sitio */
.hero .open-card, .open-card { margin: 0 auto 14px; max-width: 560px; }