/* ==========================================================
   MASSA · Demo conceptual — módulos nuevos
   Vistas, Club (tarjeta de sellos), Encuesta, Panel del dueño,
   ficha de platillo y acceso desde la portada.
   Usa las variables y tipografías definidas en styles.css
   ========================================================== */

:root { --card: #FBF7EE; }

.dock__item[aria-current="page"] { background: rgba(255, 255, 255, .16); }

/* ---------- Etiquetas de estado: funciona / simulado / pendiente ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; padding: 5px 11px 4px; border: 1.5px solid currentColor; border-radius: 999px;
  font: 700 11.5px/1.15 var(--f-ui); letter-spacing: .05em; text-transform: uppercase;
}
.chip--real { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip--sim { border-style: dashed; background: transparent; color: var(--red); }
.chip--todo { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.vhead .chip--real { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.vhead .chip--sim { color: var(--cream); }

/* ---------- Cabecera de las vistas internas ---------- */
.vhead {
  position: relative; padding: calc(env(safe-area-inset-top) + 60px) 0 70px; background: var(--red); color: var(--cream);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 97% calc(100% - 1px), 94% calc(100% - 6px), 90% calc(100% - 2px), 86% calc(100% - 7px), 82% calc(100% - 1px), 78% calc(100% - 6px), 74% calc(100% - 2px), 70% calc(100% - 7px), 66% calc(100% - 1px), 62% calc(100% - 5px), 58% calc(100% - 2px), 54% calc(100% - 7px), 50% calc(100% - 1px), 46% calc(100% - 6px), 42% calc(100% - 2px), 38% calc(100% - 7px), 34% calc(100% - 1px), 30% calc(100% - 5px), 26% calc(100% - 2px), 22% calc(100% - 7px), 18% calc(100% - 1px), 14% calc(100% - 6px), 10% calc(100% - 2px), 6% calc(100% - 7px), 3% calc(100% - 2px), 0 calc(100% - 5px));
}
.vhead--ink { background: var(--ink); }
.vhead .wrap { display: grid; justify-items: start; gap: 6px; }
.vhead .btn--ghost { margin-bottom: 12px; }
.vhead .melt { color: var(--cream); margin-top: 6px; font-size: clamp(40px, 12vw, 120px); outline: none; }
.vhead__title--dash { font: 400 clamp(46px, 14vw, 104px)/.92 var(--f-display); text-transform: uppercase; margin: 6px 0 2px; outline: none; }
.vhead__lead { max-width: 34ch; margin-top: 6px; font-size: 17px; line-height: 1.45; }

/* ---------- Paneles ---------- */
.panel {
  min-width: 0; padding: 20px 18px; border: 2px solid var(--ink); border-radius: 18px;
  background: var(--card); box-shadow: 4px 5px 0 var(--ink);
}
.panel--sim { border-style: dashed; box-shadow: none; background: transparent; }
.panel__title { margin-bottom: 14px; padding-top: 3px; font: 400 26px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.panel__title small { display: block; margin-top: 5px; font: 400 20px/1.1 var(--f-hand); letter-spacing: .02em; text-transform: none; color: var(--red); }

/* ==========================================================
   CLUB · TARJETA DE SELLOS
   ========================================================== */
.club { display: grid; gap: 34px; padding: 6px 0 130px; }
.club__stage { display: grid; gap: 22px; align-content: start; }
.loyal {
  position: relative; isolation: isolate; width: 100%; max-width: 460px; margin-inline: auto; padding: 18px 18px 16px; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 22px; background: var(--red); color: var(--cream);
  box-shadow: 6px 8px 0 var(--ink); rotate: -1deg;
}
.loyal::before {
  content: ""; position: absolute; z-index: -1; right: -14%; bottom: -6%; width: 62%; aspect-ratio: 414 / 596;
  background: url("../assets/img/hand-white.png") center / contain no-repeat; opacity: .1; rotate: -12deg;
}
.loyal__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.loyal__logo { width: 66px; height: auto; }
.loyal__who { display: flex; align-items: center; gap: 10px; }
.loyal__avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding-top: 3px; border-radius: 50%; background: var(--cream); color: var(--red); font: 400 19px/1 var(--f-display); }
.loyal__id { display: grid; gap: 2px; }
.loyal__id strong { font: 700 15px/1.1 var(--f-ui); }
.loyal__id small { font-size: 12px; line-height: 1.2; opacity: .88; }
.loyal__count { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 14px; }
.loyal__n { font: 400 88px/.8 var(--f-display); }
.loyal__of { font: 400 25px/1 var(--f-hand); letter-spacing: .02em; }

.stamps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.stamp-slot {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 2px dashed rgba(245, 238, 226, .75); border-radius: 50%;
  color: rgba(245, 238, 226, .85); font: 400 24px/1 var(--f-hand);
}
.stamp-slot span { padding-top: 3px; }
.stamp-slot svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.stamp-slot.is-goal { border-style: solid; }
.stamp-slot.is-on { border: 2px solid var(--ink); background: var(--cream); rotate: var(--r, 0deg); }
.stamp-slot.is-on img { width: 44%; height: auto; }
.stamp-slot.is-fresh { animation: stampIn .55s cubic-bezier(.2, 1.4, .3, 1) both; }
.loyal.is-ready .stamp-slot.is-goal { animation: glow 1.6s ease-in-out infinite; background: var(--cream); color: var(--red); border-color: var(--ink); }
.loyal__msg { margin-top: 18px; font-size: 15.5px; line-height: 1.4; }
.loyal__msg small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; opacity: .88; }
.loyal__tag { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; line-height: 1.3; }

.confetti { position: absolute; z-index: 3; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none; }
.confetti i { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 2px; background: var(--c); opacity: 0; }
.confetti.go i { animation: burst 1.1s cubic-bezier(.1, .8, .3, 1) forwards; }

.club__actions { display: grid; gap: 12px; width: 100%; max-width: 460px; margin-inline: auto; }
.club__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.club__row .btn { padding-inline: 12px; font-size: 15px; line-height: 1.05; }
.club__side { display: grid; gap: 20px; align-content: start; }
.rules { display: grid; margin: 0; }
.rules > div { padding: 11px 0; border-bottom: 2px dotted rgba(24, 24, 24, .28); }
.rules > div:last-child { border-bottom: 0; }
.rules dt { font: 700 15px/1.25 var(--f-ui); }
.rules dd { margin-top: 2px; font-size: 14px; line-height: 1.4; opacity: .82; }
.tick { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tick li { font-size: 14.5px; line-height: 1.5; }
.tick .chip { margin-right: 8px; vertical-align: 1px; }

@keyframes stampIn { 0% { scale: 2.4; opacity: 0; rotate: -34deg; } 55% { scale: .9; opacity: 1; } 100% { scale: 1; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 238, 226, .7); } 50% { box-shadow: 0 0 0 9px rgba(245, 238, 226, 0); } }
@keyframes burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(var(--s)); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(var(--s)); }
}

/* ---------- Vista previa de Wallet (demostración) ---------- */
.pass { display: grid; gap: 12px; padding: 16px; border: 2px solid var(--ink); border-radius: 16px; background: var(--red); color: var(--cream); }
.pass__top { display: flex; align-items: center; justify-content: space-between; }
.pass__logo { width: 56px; height: auto; }
.pass__n { font: 400 36px/1 var(--f-display); }
.pass__dots { display: flex; gap: 8px; }
.pass__dots i { width: 22px; height: 22px; border: 2px dashed rgba(245, 238, 226, .75); border-radius: 50%; }
.pass__dots i.on { border: 2px solid var(--cream); background: var(--cream); }
.pass__who { font-size: 14px; }
.pass__demo { padding: 7px 8px 5px; border: 1.5px dashed var(--cream); text-align: center; font: 700 11px/1.2 var(--f-ui); letter-spacing: .12em; }

/* ==========================================================
   ENCUESTA
   ========================================================== */
.survey { max-width: 760px; padding: 0 0 140px; }
.survey__form { display: grid; gap: 20px; }
.privacy {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1.5px dashed var(--ink); border-radius: 12px;
  background: rgba(189, 40, 53, .06); font-size: 13.5px; line-height: 1.4;
}
.ask { min-width: 0; margin: 0; padding: 18px 16px 16px; border: 2px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 3px 4px 0 var(--ink); transition: box-shadow .2s, border-color .2s; }
.ask legend, .ask__title { float: left; width: 100%; padding: 0; margin-bottom: 4px; font: 400 27px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.ask legend + *, .ask__title + * { clear: both; }
.ask__title small { font: 400 17px/1 var(--f-hand); text-transform: none; opacity: .75; }
.ask__hint { margin-bottom: 14px; font-size: 14px; line-height: 1.4; opacity: .75; }
.ask.is-done { box-shadow: 3px 4px 0 var(--red); }
.ask--missing { border-color: var(--red); box-shadow: 3px 4px 0 var(--red); }

.rate { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rate__opt { position: relative; display: grid; place-items: center; min-height: 52px; cursor: pointer; }
.rate__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rate__star {
  display: grid; place-items: center; width: min(56px, 100%); aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%;
  background: var(--cream); color: var(--ink); transition: background .2s, color .2s, transform .25s var(--ease);
}
.rate__star svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.rate__opt.is-on .rate__star { background: var(--red); color: var(--cream); }
.rate__opt:hover .rate__star { transform: translateY(-2px) rotate(-8deg); }
.rate__opt input:focus-visible + .rate__star { outline: 3px solid var(--ink); outline-offset: 3px; }
.ask__scale { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin-top: 12px; font: 400 18px/1 var(--f-hand); letter-spacing: .02em; }
.ask__scale span:last-child { text-align: right; }
.ask__pick { min-width: 6ch; text-align: center; color: var(--red); }
.ask__scale .is-sel { color: var(--red); }

.ask--comment textarea {
  display: block; width: 100%; margin-top: 8px; padding: 12px; border: 2px solid var(--ink); border-radius: 12px; resize: vertical;
  background: var(--cream); color: var(--ink); font: 400 16px/1.4 var(--f-ui);
}
.ask--comment textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ask__count { margin-top: 6px; text-align: right; font-size: 12px; opacity: .7; }
.survey__err { min-height: 1.3em; margin: -6px 0; color: var(--red-deep); font: 700 14.5px/1.3 var(--f-ui); }
.survey__submit { display: grid; justify-items: start; gap: 10px; }
.survey__prog { font-size: 13px; opacity: .75; }

.thanks { display: grid; justify-items: center; gap: 14px; padding: 26px 0 10px; text-align: center; }
.thanks img { width: 70px; height: auto; }
.thanks__title { font: 400 clamp(56px, 19vw, 120px)/.9 var(--f-display); color: var(--red); outline: none; }
.thanks__txt { max-width: 36ch; font-size: 16px; line-height: 1.5; }
.thanks__actions { display: grid; gap: 12px; width: min(100%, 360px); margin-top: 8px; }

/* ==========================================================
   PANEL DEL DUEÑO (datos ficticios)
   ========================================================== */
.exbar { position: sticky; top: 40px; z-index: 20; padding: 9px 0; background: var(--ink); color: var(--cream); border-top: 1px solid rgba(245, 238, 226, .25); font-size: 13.5px; line-height: 1.3; }
.exbar .wrap { display: flex; align-items: center; gap: 10px; }
.dash { display: grid; gap: 20px; padding: 26px 0 140px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpi { display: grid; gap: 8px; align-content: start; padding: 14px 12px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); box-shadow: 3px 4px 0 var(--ink); }
.kpi__n { font: 400 clamp(40px, 11.5vw, 68px)/.9 var(--f-display); color: var(--red); }
.kpi__n small { font-size: .42em; color: var(--ink); }
.kpi__l { font: 700 12px/1.3 var(--f-ui); }
.kpi__l small { font-weight: 500; font-size: 11.5px; opacity: .8; }

.bars { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bars__row { display: grid; grid-template-columns: minmax(96px, 38%) 1fr 36px; align-items: center; gap: 10px; }
.bars__l { font: 600 14px/1.2 var(--f-ui); }
.bars__track { display: block; height: 16px; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
.bars__track i { display: block; height: 100%; border-radius: 999px; background: var(--red); transform-origin: left; animation: grow .9s var(--ease) both; }
.bars__v { font: 700 15px/1 var(--f-ui); text-align: right; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tr { display: block; width: 100%; height: auto; overflow: visible; }
.tr__grid { stroke: rgba(24, 24, 24, .2); stroke-width: 1; }
.tr__ax { fill: #555; font: 600 10.5px var(--f-ui); }
.tr__line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tr__dot { fill: var(--red); stroke: var(--ink); stroke-width: 1.5; }
.tr__val { fill: var(--red); font: 400 17px var(--f-display); }

.comments { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cm { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 12px 14px; border: 2px dashed var(--ink); border-radius: 10px; background: var(--paper); }
.cm--mine { border-style: solid; background: #fff; }
.cm__s { font: 700 12.5px/1 var(--f-ui); opacity: .8; }
.cm p { grid-column: 1 / -1; font: 400 21px/1.15 var(--f-hand); letter-spacing: .02em; }
.legend { display: grid; gap: 20px; margin-bottom: 20px; }
.legend ul { margin: 10px 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.5; }

/* ==========================================================
   FICHA DE PLATILLO
   ========================================================== */
.modal--ficha { padding: 0; }
.modal__card--ficha { width: min(100%, 540px); max-height: 92svh; padding: 0; border-radius: 22px 22px 0 0; border-bottom: 0; }
.modal__close { position: absolute; z-index: 3; top: 12px; right: 12px; box-shadow: 2px 3px 0 var(--ink); }
.ficha__media { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 2px solid var(--ink); background: var(--red); }
.ficha__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ficha__ph { display: grid; place-items: center; width: 100%; height: 100%; }
.ficha__ph.ph--b { background: var(--paper); }
.ficha__media img.ficha__hand, .ficha__ph img { width: 24%; height: auto; }
.ficha__body { display: grid; gap: 8px; padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); }
.ficha__name { font: 400 clamp(38px, 11vw, 52px)/.95 var(--f-display); text-transform: uppercase; outline: none; }
.ficha__desc { font-size: 16px; line-height: 1.5; }
.ficha__h { margin-top: 8px; font: 400 23px/1 var(--f-hand); letter-spacing: .02em; color: var(--red); }
.ing { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ing li { padding: 5px 11px 4px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--cream); font-size: 13.5px; line-height: 1.2; }
.ficha__price { margin-top: 8px; font: 700 28px/1 var(--f-ui); }
.ficha__price sup { color: var(--red); font-size: 16px; }
.ficha__price small { font-weight: 500; font-size: 12px; letter-spacing: .02em; opacity: .75; }
.ficha__note { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; }
.ficha__nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.ficha__nav .btn svg { width: 18px; height: 18px; }

/* ==========================================================
   PORTADA · ACCESO AL CLUB Y A LA ENCUESTA
   ========================================================== */
.more { padding: 76px 0 84px; overflow: hidden; background: var(--red); color: var(--cream); }
.more .melt { color: var(--cream); }
.more__grid { display: grid; gap: 24px; margin-top: 26px; }
.more__card {
  position: relative; display: grid; gap: 8px; padding: 22px 20px 20px; border: 2px solid var(--ink); border-radius: 18px;
  background: var(--cream); color: var(--ink); text-decoration: none; rotate: -1deg; box-shadow: 5px 6px 0 var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.more__card--poll { rotate: 1.2deg; background: var(--ink); color: var(--cream); border-color: var(--cream); box-shadow: 5px 6px 0 var(--cream); }
.more__card:hover { transform: translate(-1px, -3px); }
.more__card:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
.more__card img { position: absolute; top: 16px; right: 18px; width: 52px; height: auto; }
.more__name { padding-top: 3px; font: 400 38px/.95 var(--f-display); letter-spacing: .01em; }
.more__txt { max-width: 21ch; font-size: 15.5px; line-height: 1.45; }
.more__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 18px/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--red); }
.more__card--poll .more__go { color: var(--cream); }
.more__go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.more__card:hover .more__go svg { transform: translateX(4px); }

.foot__owner { margin-top: 22px; font-size: 13px; }

/* ==========================================================
   ESCRITORIO
   ========================================================== */
@media (min-width: 860px) {
  .vhead { padding: 96px 0 90px; }
  .vhead .melt { font-size: clamp(54px, 6.6vw, 100px); }
  .vhead__lead { font-size: 19px; }

  .club { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 60px; align-items: start; padding-top: 24px; }
  .club__stage { position: sticky; top: 60px; }

  .survey { padding-top: 20px; }
  .rate { gap: 12px; }

  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 34px; }
  .kpis, .panel--wide { grid-column: 1 / -1; }
  .legend { grid-template-columns: repeat(3, 1fr); }
  .exbar { top: 44px; }

  .modal--ficha { padding: 20px; place-items: center; }
  .modal__card--ficha { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 900px); max-height: 88svh; overflow: hidden; border-radius: 22px; border-bottom: 2px solid var(--ink); }
  .ficha__media { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 2px solid var(--ink); }
  .ficha__body { align-content: start; overflow-y: auto; max-height: 88svh; padding: 28px 28px 26px; }

  .more { padding: 110px 0 110px; }
  .more__grid { grid-template-columns: 1fr 1fr; gap: 40px; max-width: 900px; }
  .more__card { padding: 30px 28px 26px; }
  .more__name { font-size: 52px; }
}

/* ==========================================================
   V3 · Paleta (rojo protagonista, crema/blanco cálido de fondo; el negro solo contrasta)
   ========================================================== */
.foot { background: var(--red-deep); }
.foot__credit { opacity: .85; }
.vhead--deep { background: var(--red-deep); }
.exbar { background: var(--red-deep); }
.more__card--poll { background: var(--red-deep); }
.exp { background: var(--paper); color: var(--ink); }
.exp .melt, .exp .hand-note { color: var(--red); }
.exp .tile { background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 6px 0 var(--ink); }
.exp .phrase--bella { color: var(--red); text-shadow: 3px 3px 0 var(--card); }
.exp .phrase--madre { background: var(--red); color: var(--cream); box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--ink); }
.demo-pill.is-alert { background: var(--ink); color: var(--cream); border-color: var(--cream); white-space: normal; text-align: center; max-width: calc(100vw - 24px); }

/* ---------- Barra inferior: 5 accesos ---------- */
.dock { grid-template-columns: repeat(5, 1fr); width: min(100% - 16px, 540px); }
.dock__item { padding-inline: 0; font-size: 10px; letter-spacing: .04em; }
@media (max-width: 380px) { .dock__item { font-size: 9px; letter-spacing: .01em; } .dock__item svg { width: 22px; height: 22px; } }
@media (min-width: 860px) { .dock { width: 450px; } }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font: 700 14px/1.2 var(--f-ui); }
.field small { font-weight: 500; opacity: .75; }
.field input {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--cream); color: var(--ink); font: 500 17px/1.2 var(--f-ui);
}
.field input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--red); }
.check small { display: block; margin-top: 3px; font-size: 12.5px; opacity: .8; }
.check--off { cursor: not-allowed; opacity: .7; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__err { min-height: 1.3em; margin: -4px 0; color: var(--red-deep); font: 700 14.5px/1.3 var(--f-ui); }
.fine { font-size: 13px; line-height: 1.45; opacity: .85; }
details.form > summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
  font: 400 21px/1.1 var(--f-display); letter-spacing: .02em; text-transform: uppercase;
}
details.form > summary::-webkit-details-marker { display: none; }
details.form > summary::after { content: "+"; margin-left: auto; font-size: 28px; line-height: 1; transition: rotate .3s var(--ease); }
details.form[open] > summary::after { rotate: 45deg; }
details.form[open] > summary { margin-bottom: 8px; }
details.form summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.notice { display: grid; gap: 10px; justify-items: start; padding: 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); font-size: 15px; line-height: 1.4; }
.club__state { font: 400 24px/1.1 var(--f-hand); letter-spacing: .02em; color: var(--red); }
.chip--link { border-color: var(--cream); background: transparent; color: var(--cream); text-decoration: underline; text-underline-offset: 3px; padding: 12px 13px 11px; }
.chip--link:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

/* ---------- Club: tarjeta del cliente ---------- */
.club__join, .club__mine { display: grid; gap: 22px; align-content: start; }
.club__how { max-width: 36ch; margin-inline: auto; text-align: center; font-size: 14.5px; line-height: 1.45; }
.loyal__idbadge {
  display: grid; justify-items: center; gap: 0; padding: 6px 13px 4px; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--cream); color: var(--red); rotate: 2.5deg; box-shadow: 2px 3px 0 var(--ink);
}
.loyal__idbadge small { font: 700 10.5px/1 var(--f-ui); letter-spacing: .16em; }
.loyal__idbadge strong { font: 400 34px/1 var(--f-display); letter-spacing: .09em; padding-top: 3px; }
.loyal__name { margin-top: 16px; font: 400 27px/1 var(--f-hand); letter-spacing: .02em; word-break: break-word; }
.loyal__count { margin: 8px 0 14px; }
.hist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hist__row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 2px dotted rgba(24, 24, 24, .28); font-size: 14.5px; line-height: 1.3; }
.hist__row:last-child { border-bottom: 0; }
.hist__row time { flex: none; font-size: 12.5px; opacity: .75; }
.hist__row--stamp span::before, .hist__row--redeem span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--red); }
.hist__row--redeem span { font-weight: 700; }

/* ---------- Personal / caja ---------- */
.staff { display: grid; gap: 20px; max-width: 760px; padding: 6px 0 150px; }
.staff__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.staff__bar p { font-size: 16px; }
.subtabs { display: flex; gap: 8px; margin: 0 0 4px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  flex: none; min-height: 46px; padding: 3px 18px 0; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink);
  font: 400 17px/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  transition: background .2s, color .2s, scale .15s;
}
.subtab:active { scale: .95; }
.subtab[aria-selected="true"] { background: var(--red); color: var(--cream); box-shadow: 3px 3px 0 var(--ink); }
.subtab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pane { display: grid; gap: 18px; }
.inline { display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 10px; }
.inline .field input { height: 100%; font: 400 36px/1 var(--f-display); letter-spacing: .22em; text-align: center; padding-top: 14px; }
.scard { display: grid; gap: 14px; }
.scard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.scard__name { font: 400 30px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; word-break: break-word; }
.scard__meta { margin-top: 6px; font-size: 14px; }
.scard__n { flex: none; font: 400 64px/.85 var(--f-display); color: var(--red); }
.scard__n small { font-size: .4em; color: var(--ink); }
.mini { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mini li { width: 28px; height: 28px; border: 2px dashed var(--ink); border-radius: 50%; }
.mini li.on { border: 2px solid var(--ink); background: var(--red); }
.mini li.fresh { animation: stampIn .5s cubic-bezier(.2, 1.4, .3, 1) both; }
.scard__status { font-size: 15px; line-height: 1.4; }
.stampform { display: grid; gap: 12px; }
.stampform .field input { text-transform: uppercase; letter-spacing: .08em; }
.confirm { display: grid; gap: 10px; padding: 12px; border: 2px dashed var(--ink); border-radius: 12px; background: var(--paper); font-size: 15px; line-height: 1.4; }
.codebox { display: grid; gap: 6px; padding: 14px; border: 2px dashed var(--ink); border-radius: 12px; background: var(--paper); text-align: center; }
.codebox__n { font: 400 62px/1 var(--f-display); letter-spacing: .1em; color: var(--red); }
.staff__msg { min-height: 1.4em; font: 600 15px/1.35 var(--f-ui); }
.staff__msg.is-err { color: var(--red-deep); font-weight: 700; }
.staff__msg.is-ok::before { content: "✓ "; color: var(--red); }
.moves { display: grid; margin: 0; padding: 0; list-style: none; }
.moves__row { display: grid; gap: 2px; padding: 11px 0; border-bottom: 2px dotted rgba(24, 24, 24, .28); font-size: 14.5px; line-height: 1.3; }
.moves__row:last-child { border-bottom: 0; }
.moves__row strong { font: 400 19px/1.1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.moves__row--redeem strong, .moves__row--demo_reset strong { color: var(--red); }
.moves__row time { font-size: 12.5px; opacity: .75; }
.empty p { font-size: 15px; line-height: 1.5; max-width: 44ch; }
#pane-res .exbar { position: static; padding: 12px 14px; border-radius: 12px; }
#pane-res .dash { padding: 4px 0 0; }
.demo-tools { display: grid; gap: 12px; justify-items: start; }

/* ---------- Menú: piezas de la marca (se muestran completas) ---------- */
.dish--piece .dish__media { aspect-ratio: 4 / 5; background: var(--cream); }
.dish--piece .dish__media .photo { object-position: 50% 50%; }
.ficha__media.is-piece { aspect-ratio: 4 / 5; max-height: 52svh; background: var(--cream); }
.ficha__media.is-piece img { object-fit: contain; }

/* ---------- Carteles de la marca ---------- */
.pieces { margin-top: 74px; }
.pieces__title { display: block; margin-bottom: 20px; }
.pieces__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; margin: 0; padding: 0; list-style: none; }
.pieces__grid li { rotate: var(--rot, 0deg); }
.pieces__grid figure { margin: 0; padding: 6px; border: 2px solid var(--ink); background: var(--card); box-shadow: 4px 5px 0 var(--ink); }
.pieces__grid img { display: block; width: 100%; height: auto; }

/* ---------- Tarjetas "Vuelve por más" con foto ---------- */
.more__card .more__ph {
  position: absolute; top: -18px; right: 14px; width: 84px; height: 104px; padding: 3px; object-fit: cover; rotate: 6deg;
  border: 2px solid var(--ink); border-radius: 4px; background: var(--cream); box-shadow: 3px 4px 0 var(--ink);
}
.more__card--poll .more__ph { rotate: -5deg; border-color: var(--ink); }

@media (min-width: 860px) {
  .pieces__grid { grid-template-columns: repeat(4, 1fr); gap: 30px 24px; }
  .ficha__media.is-piece { aspect-ratio: auto; max-height: none; min-height: 100%; }
  .more__card .more__ph { width: 110px; height: 136px; right: 20px; top: -24px; }
  .staff { max-width: 900px; }
}

/* ---------- Personal: encabezado compacto para que la caja quede a la vista ---------- */
#view-personal .vhead { padding-top: 64px; padding-bottom: 44px; }
#view-personal .vhead__title { font-size: clamp(46px, 13vw, 92px); }

/* ==========================================================
   Contenido en vivo: agotado, aviso de ejemplo y horarios de D1
   ========================================================== */
.menu-real .demo-only { display: none !important; }
.dishes__empty { grid-column: 1 / -1; padding: 40px 12px; text-align: center; font: 400 26px/1.2 var(--f-hand); color: var(--red-deep); }

.dish__sold {
  position: absolute; inset-inline-start: 10px; inset-block-start: 10px; z-index: 2; padding: 6px 10px 4px; rotate: -4deg;
  background: var(--cream); color: var(--red-deep); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink);
  font: 400 15px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase;
}
.dish--sold .photo, .dish--sold .ph img { filter: grayscale(.85) contrast(.95); opacity: .72; }
.dish--sold .dish__price { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .65; }
.ficha__sold { display: inline-block; margin-inline-start: 8px; padding: 4px 8px 2px; rotate: -3deg; vertical-align: middle; background: var(--red-deep); color: var(--cream); border-radius: 4px; font: 400 14px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }

.board__status { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 20px; font: 400 clamp(20px, 5.6vw, 24px)/1.15 var(--f-hand); color: var(--ink); text-align: center; text-transform: none; }
.board__status[hidden] { display: none; }
.board__status strong { font: 400 clamp(22px, 6vw, 28px)/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.board__status.is-open strong { color: var(--red-deep); }
.board__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: var(--cream); flex: none; }
.board__status.is-open .board__dot { background: var(--red); animation: board-dot 2.4s ease-in-out infinite; }
@keyframes board-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(189, 40, 53, .45); } 50% { box-shadow: 0 0 0 7px rgba(189, 40, 53, 0); } }
.board__row.is-rest dd { opacity: .75; }
.board__extra { margin-top: 10px; padding-top: 14px; border-top: 2px dashed rgba(24, 24, 24, .35); text-align: center; color: var(--ink); }
.board__msg { font: 400 clamp(20px, 5.4vw, 24px)/1.2 var(--f-hand); color: var(--red-deep); margin-bottom: 8px; text-wrap: balance; }
.board__special { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font: 400 clamp(18px, 4.8vw, 21px)/1.15 var(--f-hand); }
.board__sd { text-transform: uppercase; letter-spacing: .04em; color: var(--red); }
.board__note { margin: 14px 4px 0; font: 400 13px/1.4 var(--f-ui); color: rgba(24, 24, 24, .72); text-align: center; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .board__status.is-open .board__dot { animation: none; } }
.board__detail { flex-basis: 100%; font-size: .9em; margin-top: -2px; }