/* =====================================================================
   Carta pública — un único HTML, tres diseños mediante variables:
   .layout-classic · .layout-modern · .layout-premium
   --brand / --brand-2 llegan del negocio (colores corporativos).
   ===================================================================== */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --brand: #F26522;
  --brand-2: #1E2833;
  --bg: #FFFDF8;
  --surface: #FFFFFF;
  --text: #2A231C;
  --text-2: #6A5F53;
  --line: #ECE2D4;
  --price: var(--text);
  --name-font: "Fraunces", Georgia, serif;
  --body-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--body-font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.wrap { width: min(100% - 32px, 720px); margin-inline: auto; }
.notice-bar { background: #1E2833; color: #fff; font-size: 13.5px; text-align: center; padding: 8px 12px; }
.notice-bar a { color: #FFD9C9; }

.m-header { padding: 28px 0 18px; text-align: center; }
.m-cover { width: 100%; height: 180px; object-fit: cover; }
.m-logo { width: 84px; height: 84px; object-fit: contain; margin: 0 auto 12px; border-radius: 18px; background: #fff; }
.m-business { font-family: var(--name-font); font-size: clamp(1.8rem, 7vw, 2.4rem); font-weight: 600; margin: 0; line-height: 1.1; letter-spacing: -.01em; }
.m-title { margin: 6px 0 0; color: var(--text-2); font-size: 1.05rem; }
.m-desc { color: var(--text-2); margin: 10px auto 0; max-width: 52ch; font-size: 15px; }

.m-info { margin: 14px auto 0; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 14px; color: var(--text-2); }
.m-info a { text-decoration: none; border-bottom: 1px solid var(--line); }
.m-hours { white-space: pre-line; font-size: 14px; color: var(--text-2); margin-top: 8px; }

.m-langs { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.m-langs a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: 13.5px; font-weight: 600; background: var(--surface); }
.m-langs a[aria-current=true] { background: var(--text); color: var(--bg); border-color: var(--text); }

.m-nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.m-nav ul { list-style: none; margin: 0; padding: 10px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 720px; margin-inline: auto; }
.m-nav ul::-webkit-scrollbar { display: none; }
.m-nav a { display: block; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--text-2); }
.m-nav a.active, .m-nav a:hover { background: var(--brand); color: #fff; }

.m-cat { padding: 26px 0 8px; }
.m-cat h2 { font-family: var(--name-font); font-size: 1.55rem; font-weight: 600; margin: 0 0 4px; }
.m-cat-desc { color: var(--text-2); margin: 0 0 8px; font-size: 14.5px; }
.m-items { list-style: none; padding: 0; margin: 0; }
.m-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.m-item:last-child { border-bottom: 0; }
.m-item.has-img { grid-template-columns: 1fr 92px; }
.m-item-name { font-weight: 650; font-size: 1.02rem; margin: 0; }
.m-item-desc { color: var(--text-2); font-size: 14.5px; margin: 3px 0 0; }
.m-item-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--price); }
.m-item-name { grid-column: 1; grid-row: 1; }
.m-item-price { grid-column: 2; grid-row: 1; }
.m-item-desc, .m-tags { grid-column: 1 / -1; }
.m-item-img { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; grid-column: 2; grid-row: 1 / span 4; }
.m-item.has-img .m-item-price { grid-column: 1; grid-row: 2; }
.m-item.has-img .m-item-desc, .m-item.has-img .m-tags { grid-column: 1; }
.m-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding: 0; list-style: none; }
.m-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); background: var(--surface); }
.m-tag.allergen b { display: inline-grid; place-items: center; min-width: 20px; height: 16px; border-radius: 4px; background: var(--text); color: var(--bg); font-size: 9.5px; letter-spacing: .02em; }
.m-tag.diet { border-color: color-mix(in srgb, var(--brand-2) 40%, transparent); color: var(--brand-2); }
.m-soldout { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; background: #8C8076; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: 2px; }
.m-item.off .m-item-name, .m-item.off .m-item-price { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.m-untr { font-size: 12px; color: var(--text-2); font-style: italic; }

.m-empty, .m-closed { text-align: center; padding: 48px 16px; color: var(--text-2); }
.m-closed strong { display: block; color: var(--text); font-size: 1.15rem; margin-bottom: 6px; }

.m-legal { font-size: 13px; color: var(--text-2); border-top: 1px solid var(--line); margin-top: 28px; padding: 18px 0 8px; }
.m-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.m-foot { text-align: center; font-size: 13px; color: var(--text-2); padding: 18px 0 40px; }
.m-powered { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; background: var(--surface); }
.m-powered b { color: #E8501C; }

/* ---------- Clásico: papel de carta, líneas de puntos entre plato y precio ---------- */
.layout-classic { --bg: #FFFDF8; --line: #E9DFD0; }
.layout-classic .m-item { grid-template-columns: auto 1fr auto; column-gap: 8px; }
.layout-classic .m-item::before { content: ""; grid-column: 2; grid-row: 1; border-bottom: 2px dotted #CDBFAD; margin-bottom: 7px; align-self: end; }
.layout-classic .m-item-name { grid-column: 1; grid-row: 1; font-family: var(--name-font); font-weight: 600; font-size: 1.12rem; }
.layout-classic .m-item-price { grid-column: 3; grid-row: 1; font-family: var(--name-font); }
.layout-classic .m-item-desc, .layout-classic .m-tags { grid-column: 1 / -1; }
.layout-classic .m-item.has-img { grid-template-columns: auto 1fr auto; }
.layout-classic .m-item.has-img .m-item-price { grid-column: 3; grid-row: 1; }
.layout-classic .m-item.has-img .m-item-desc, .layout-classic .m-item.has-img .m-tags { grid-column: 1 / -1; }
.layout-classic .m-item-img { grid-column: 1 / -1; grid-row: auto; width: 100%; height: 160px; margin-top: 10px; }
.layout-classic .m-cat h2 { text-align: center; color: var(--brand); }
.layout-classic .m-cat h2::after { content: ""; display: block; width: 44px; height: 2px; background: var(--brand); margin: 10px auto 6px; }
.layout-classic .m-cat-desc { text-align: center; }

/* ---------- Moderno: tarjetas limpias, sans-serif ---------- */
.layout-modern { --bg: #F5F4F0; --surface: #FFFFFF; --line: #E6E2DA; --name-font: "Inter", system-ui, sans-serif; }
.layout-modern .m-header { background: var(--brand-2); color: #fff; padding-bottom: 28px; }
.layout-modern .m-header .m-title, .layout-modern .m-header .m-desc, .layout-modern .m-header .m-info, .layout-modern .m-header .m-hours { color: rgba(255, 255, 255, .85); }
.layout-modern .m-header .m-info a { border-color: rgba(255, 255, 255, .4); }
.layout-modern .m-langs a:not([aria-current]) { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.layout-modern .m-langs a[aria-current] { background: #fff; color: var(--brand-2); border-color: #fff; }
.layout-modern .m-business { font-weight: 750; letter-spacing: -.02em; }
.layout-modern .m-cat h2 { font-weight: 750; font-size: 1.35rem; }
.layout-modern .m-items { display: grid; gap: 10px; }
.layout-modern .m-item { background: var(--surface); border: 0; border-radius: var(--radius); padding: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.layout-modern .m-item-price { color: var(--brand-2); }

/* ---------- Premium: fondo oscuro cálido, serif elegante, centrado ---------- */
.layout-premium { --bg: #1B1814; --surface: #24201B; --text: #F3EBDD; --text-2: #BFB2A0; --line: #3A332B; --price: var(--brand); }
.layout-premium .notice-bar { background: #000; }
.layout-premium .m-header { padding-top: 40px; }
.layout-premium .m-business { font-weight: 400; letter-spacing: .01em; font-size: clamp(2rem, 8vw, 2.8rem); }
.layout-premium .m-nav a.active, .layout-premium .m-nav a:hover { background: transparent; color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }
.layout-premium .m-cat { text-align: center; padding-top: 36px; }
.layout-premium .m-cat h2 { font-weight: 400; font-size: 1.7rem; color: var(--brand); }
.layout-premium .m-item { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 20px 0; }
.layout-premium .m-item.has-img { grid-template-columns: 1fr; }
.layout-premium .m-item > * { grid-column: 1 !important; grid-row: auto !important; }
.layout-premium .m-item-img { grid-row: auto; grid-column: auto; width: 100%; max-width: 420px; height: 200px; order: -1; margin-bottom: 10px; }
.layout-premium .m-item.has-img .m-item-price { grid-column: auto; }
.layout-premium .m-item-name { font-family: var(--name-font); font-weight: 500; font-size: 1.2rem; }
.layout-premium .m-item-desc { max-width: 46ch; font-style: italic; }
.layout-premium .m-tags { justify-content: center; }
.layout-premium .m-tag { background: transparent; }
.layout-premium .m-tag.allergen b { background: var(--text-2); color: var(--bg); }
.layout-premium .m-powered { background: transparent; }

/* Estilos de letra (opción avanzada Pro) */
.font-elegant { --name-font: "Fraunces", Georgia, serif; }
.font-rounded { --name-font: ui-rounded, "SF Pro Rounded", "Nunito", "Inter", system-ui, sans-serif; }
.font-mono { --name-font: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* Menú del día: un único precio destacado para todo el menú */
.m-daily-price { display: inline-flex; align-items: baseline; gap: 8px; margin: 14px auto 0; padding: 8px 18px; border-radius: 999px; background: #fff; border: 2px solid var(--brand); color: var(--text); font-size: 1rem; }
.m-daily-price span { color: var(--text-2); font-size: .9rem; }
.m-daily-price strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.menu-daily.layout-classic .m-item::before { content: none; }

/* Botones de contacto (llamar, WhatsApp, cómo llegar, Instagram) */
.m-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px auto 0; }
.m-actions a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.m-actions a:hover { border-color: var(--brand); }
.m-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.layout-modern .m-header .m-actions a { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; }

/* Platos destacados */
.m-badge { grid-column: 1 / -1; justify-self: start; display: inline-block; margin-bottom: 2px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; background: var(--brand); color: #fff; }
.m-badge-new { background: #2F7A2A; }
.m-badge-off_menu { background: var(--brand-2); }
.layout-premium .m-badge { justify-self: center; }

/* Varios precios por plato */
.m-prices { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 15px; }
.m-prices span { color: var(--text-2); }
.m-prices b { font-variant-numeric: tabular-nums; color: var(--price); }
.layout-premium .m-prices { justify-content: center; }
.menu-daily .m-prices { display: none; }

/* Reseña en Google */
.m-review { text-align: center; margin: 32px 0 8px; padding: 22px 16px; border: 1.5px dashed var(--line); border-radius: var(--radius); }
.m-review p { margin: 0 0 10px; color: var(--text-2); }
.m-review-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--brand-2); color: #fff; font-weight: 700; text-decoration: none; }
.m-review-btn .m-ic { fill: #F4B740; stroke: #F4B740; }

/* Detalle de un plato (al tocarlo) */
.m-item[role=button] { cursor: pointer; }
.m-item[role=button]:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; }
.m-sheet { border: 0; padding: 0; width: min(560px, 100%); max-height: 88vh; margin: auto auto 0; border-radius: 22px 22px 0 0; background: var(--surface); color: var(--text); }
@media (min-width: 640px) { .m-sheet { margin: auto; border-radius: 22px; } }
.m-sheet::backdrop { background: rgba(20, 16, 12, .55); }
.m-sheet-body { padding: 20px 20px 28px; }
.m-sheet-body .m-item { display: block; border: 0; padding: 0; text-align: left; box-shadow: none; background: none; }
.m-sheet-body .m-item-img { display: block; width: 100%; height: auto; max-height: 52vh; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; margin: 0 0 14px; }
.m-sheet-body .m-item-name { font-size: 1.4rem; }
.m-sheet-body .m-item-price { display: block; font-size: 1.2rem; margin-top: 4px; }
.m-sheet-close { position: sticky; top: 0; float: right; margin: 10px 10px 0 0; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }

/* Promociones con horario */
.m-promo { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 0; padding: 14px 18px; border-radius: var(--radius); background: var(--surface); border: 2px solid var(--brand); border-left-width: 8px; color: var(--text); text-align: center; }
.m-promo strong { font-size: 1.05rem; }
.m-promo span { font-size: 14.5px; color: var(--text-2); }
.layout-classic .m-item.has-prices::before { content: none; }

/* Buscador y filtro de alergias/dietas */
.m-tools { margin: 18px 0 4px; }
.m-tools-row { display: flex; gap: 8px; align-items: stretch; }
.m-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); min-height: 44px; }
.m-search input { flex: 1; border: 0; background: transparent; font: inherit; color: var(--text); min-width: 0; outline: none; }
.m-search:focus-within { border-color: var(--brand); }
.m-filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 44px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.m-filter-btn[aria-expanded=true] { border-color: var(--brand); }
.m-filter-n[hidden] { display: none; }
.m-filter-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 12px; }
.m-filters { margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.m-filters-h { margin: 0 0 8px; font-weight: 600; font-size: 14px; }
.m-filters-h + .m-chips { margin-bottom: 12px; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chip { padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.m-chip[aria-pressed=true] { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.m-chip[data-allergen][aria-pressed=true]::before { content: "✕ "; }
.m-filters-note { margin: 4px 0 8px; font-size: 13px; color: var(--text-2); }
.m-filters-clear { border: 0; background: none; padding: 0; color: var(--text-2); text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; }
@media (max-width: 360px) { .m-filter-btn .m-filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.m-tools-status { margin: 8px 2px 0; font-size: 14px; color: var(--text-2); min-height: 1em; }
.m-tools-status:empty { margin: 0; }
.m-item[hidden], .m-cat[hidden], .m-nav li[hidden] { display: none; }

/* Wifi y datos útiles */
.m-useful { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px auto 0; font-size: 14px; color: var(--text-2); }
.m-useful > div { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.m-useful b { color: var(--text); font-weight: 600; }
.m-wifi-pass { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.m-copy { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.layout-modern .m-header .m-useful, .layout-modern .m-header .m-useful b { color: rgba(255, 255, 255, .9); }

/* Stories de destacados */
.m-stories { display: flex; gap: 14px; overflow-x: auto; padding: 18px 2px 6px; scrollbar-width: none; }
.m-stories::-webkit-scrollbar { display: none; }
.m-story { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text); }
.m-story-ring { width: 68px; height: 68px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--brand), #FD9D3E, var(--brand)); display: grid; place-items: center; }
.m-story-ring.m-story-new { background: conic-gradient(#2F7A2A, #6DB33F, #2F7A2A); }
.m-story-ring.m-story-off_menu { background: conic-gradient(var(--brand-2), #6A5F53, var(--brand-2)); }
.m-story-ring img, .m-story-ini { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg); object-fit: cover; }
.m-story-ini { display: grid; place-items: center; background: var(--surface); font: 700 1.4rem/1 var(--name-font); color: var(--brand); }
.m-story-name { font-size: 12px; line-height: 1.25; text-align: center; max-width: 72px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-story-view { width: 100%; max-width: 480px; height: 100%; max-height: 100dvh; margin: auto; padding: 0; border: 0; background: #111; color: #fff; overflow: hidden; }
.m-story-view[open] { display: flex; flex-direction: column; }
.m-story-view::backdrop { background: rgba(0, 0, 0, .85); }
.m-sv-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.m-sv-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.m-sv-bars i { display: block; height: 100%; width: 0; background: #fff; }
.m-sv-bars .done i { width: 100%; }
.m-sv-bars .now i { animation: m-sv-fill 5s linear forwards; }
@keyframes m-sv-fill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .m-sv-bars .now i { width: 100%; animation: none; } }
.m-sv-close { position: absolute; top: 20px; right: 12px; z-index: 4; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.m-sv-media { flex: 1; min-height: 0; display: grid; place-items: center; background: #000; }
.m-sv-media img { width: 100%; height: 100%; object-fit: cover; }
.m-sv-media.noimg { background: linear-gradient(160deg, var(--brand), var(--brand-2)); }
.m-sv-text { position: relative; z-index: 2; padding: 20px 20px 28px; background: linear-gradient(transparent, rgba(0, 0, 0, .85) 30%); margin-top: -120px; }
.m-sv-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }
.m-sv-name { margin: 8px 0 4px; font: 700 1.6rem/1.2 var(--name-font); color: #fff; }
.m-sv-price { margin: 0; font-weight: 700; font-size: 1.1rem; }
.m-sv-desc { margin: 6px 0 0; color: rgba(255, 255, 255, .85); }
.m-sv-prev, .m-sv-next { position: absolute; top: 60px; bottom: 140px; width: 35%; border: 0; background: transparent; cursor: pointer; z-index: 1; }
.m-sv-prev { left: 0; } .m-sv-next { right: 0; }