/* =====================================================================
   NFKings · LAS 20 PLANTILLAS NUEVAS (personalidad de cada una)
   La composición (encabezado y productos) sale de plantillas-base.css según
   js/plantillas.js. Aquí solo van variables y detalles propios.
   Los colores siempre vienen del panel: --brand, --accent, --bg (y --ink, --brand-ink,
   --accent-ink, que se calculan solos para que el texto siempre se lea).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. MINIMAL MODERNO — aire, líneas finas, lista limpia
   --------------------------------------------------------------------- */
.v-modern { --radius: 14px; --shadow: none; --hw: 800; --track: -.02em; --cat-size: 1.25rem; --photo-r: 12px; }
.v-modern .menu { padding-inline: 22px; }
.v-modern .eyebrow { color: var(--muted); letter-spacing: .16em; font-weight: 600; font-size: .72rem; }
.v-modern .hero h1 { font-weight: 800; }
.v-modern .logo { width: 64px; height: 64px; box-shadow: none; border: 1px solid var(--line); }
.v-modern .notice { background: none; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; font-weight: 500; }
.v-modern .action { background: none; border: 1px solid var(--line); font-weight: 600; }
.v-modern .action-wa { background: var(--wa); border-color: var(--wa); }
.v-modern .cat-nav { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.v-modern .chip { background: none; border-color: transparent; color: var(--muted); font-weight: 600; }
.v-modern .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.v-modern .cat { padding-top: 40px; }
.v-modern .cat-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 4px; }
.v-modern .cat-num { display: block; order: 2; margin-left: auto; font: 600 .75rem/1 var(--font-body); color: var(--muted); letter-spacing: .1em; }
.v-modern .cat-head p { width: 100%; order: 3; }
.v-modern .card h3 { font-size: 1.05rem; font-weight: 700; }
.v-modern .price { font-weight: 700; }
.v-modern .add { background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------------
   2. PREMIUM OSCURO — negro profundo, dorado fino, platillo estrella
   --------------------------------------------------------------------- */
.v-premium-dark {
  --radius: 4px; --shadow: 0 18px 40px -20px rgb(0 0 0 / .9); --hw: 500; --cat-size: clamp(1.8rem, 8vw, 2.2rem);
  --surface: color-mix(in srgb, var(--bg) 92%, #fff); --line: color-mix(in srgb, var(--brand) 22%, transparent);
  --price: var(--brand); --chip-r: 0; --btn-r: 2px; --photo-r: 2px; --band-r: 0;
  --tex: radial-gradient(90% 40% at 50% 0, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%);
}
.v-premium-dark .hero h1 { font-weight: 500; letter-spacing: .01em; }
.v-premium-dark .eyebrow { letter-spacing: .4em; font-size: .7rem; font-weight: 500; }
.v-premium-dark .hero:not(.has-cover) { background: none; color: var(--ink); text-align: center; padding-top: 64px; }
.v-premium-dark .hero:not(.has-cover) .hero-inner { align-items: center; }
.v-premium-dark .hero:not(.has-cover) h1 { color: var(--ink); }
.v-premium-dark .hero:not(.has-cover) :is(.eyebrow) { color: var(--brand); }
.v-premium-dark .hero:not(.has-cover) :is(.desc, .hours) { color: var(--muted); }
.v-premium-dark .hero:not(.has-cover) .hero-deco { display: block; inset: auto 30% 6px 30%; height: 1px; background: var(--brand); }
.v-premium-dark .desc { font-family: var(--font-head); font-style: italic; font-size: 1.15rem; }
.v-premium-dark .logo { box-shadow: 0 0 0 1px var(--brand), 0 0 0 6px var(--bg), 0 0 0 7px color-mix(in srgb, var(--brand) 45%, transparent); }
.v-premium-dark .notice { background: none; border: 0; border-block: 1px solid var(--brand); border-radius: 0; text-align: center; font-family: var(--font-head); font-style: italic; font-weight: 500; }
.v-premium-dark .actions { justify-content: center; }
.v-premium-dark .action { background: none; border-color: var(--brand); color: var(--brand); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600; }
.v-premium-dark .action-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.v-premium-dark .cat-nav-inner { justify-content: safe center; gap: 22px; }
.v-premium-dark .chip { background: none; border: 0; padding: 8px 0; color: var(--muted); text-transform: uppercase; letter-spacing: .24em; font-size: .7rem; font-weight: 600; }
.v-premium-dark .chip.on { background: none; color: var(--brand); box-shadow: inset 0 -1px 0 var(--brand); }
.v-premium-dark .cat { padding-top: 48px; }
.v-premium-dark .cat-head { text-align: center; margin-bottom: 18px; }
.v-premium-dark .cat-num { display: block; color: var(--brand); font: italic 500 1rem/1 var(--font-head); margin-bottom: 6px; }
.v-premium-dark .cat-head p { font-family: var(--font-head); font-style: italic; }
.v-premium-dark .card h3 { font-size: 1.3rem; font-weight: 500; }
.v-premium-dark .price { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; }
.v-premium-dark .add { background: none; border: 1px solid var(--brand); color: var(--brand); border-radius: 2px; font-weight: 400; }
.v-premium-dark .cart-fab { background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand), 0 16px 30px rgb(0 0 0 / .6); letter-spacing: .06em; }
.v-premium-dark .foot { letter-spacing: .24em; text-transform: uppercase; font-size: .66rem; }

/* ---------------------------------------------------------------------
   3. CAFÉ ARTESANAL — papel kraft, sellos, foto a la izquierda
   --------------------------------------------------------------------- */
.v-coffee {
  --radius: 18px; --cat-size: 1.8rem; --photo-r: 50%; --chip-r: 10px; --btn-r: 12px;
  --card-bg: color-mix(in srgb, var(--bg) 55%, #fff); --card-border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  --shadow: 0 10px 24px -16px color-mix(in srgb, var(--brand) 70%, transparent); --price: var(--brand);
  --tex: radial-gradient(color-mix(in srgb, var(--brand) 10%, transparent) .8px, transparent 1.2px) 0 0 / 9px 9px,
         radial-gradient(color-mix(in srgb, var(--accent) 9%, transparent) .8px, transparent 1.2px) 4px 5px / 13px 13px;
}
.v-coffee .hero h1 { font-weight: 800; color: var(--brand); }
.v-coffee .eyebrow { color: var(--accent); font-family: var(--font-head); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 500; }
.v-coffee .desc { font-size: 1rem; }
.v-coffee .logo { box-shadow: 0 0 0 5px var(--card-bg), 0 0 0 7px color-mix(in srgb, var(--brand) 35%, transparent); }
.v-coffee .notice { background: var(--card-bg); border: 1.5px dashed var(--accent); border-radius: 14px; text-align: center; }
.v-coffee .chip { background: var(--card-bg); border-color: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--brand); }
.v-coffee .chip.on { background: var(--brand); color: var(--brand-ink); }
.v-coffee .cat-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Aro de taza de café junto al título */
.v-coffee .cat-head h2::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .35em; border-radius: 50%; vertical-align: .05em;
  border: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 30%, transparent); }
.v-coffee .cat-head h2 { color: var(--brand); }
.v-coffee .cat-head p { width: 100%; font-style: italic; }
.v-coffee .card h3 { font-size: 1.15rem; }
/* Foto como sello: aro punteado */
.v-coffee .card-photo { outline: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 4px; margin: 6px; }
.v-coffee .add { background: var(--brand); color: var(--brand-ink); border-radius: 10px; }

/* ---------------------------------------------------------------------
   4. STREET FOOD — cartel, bordes gruesos, stickers, cuadrícula
   --------------------------------------------------------------------- */
.v-street-food {
  --radius: 14px; --hw: 400; --case: uppercase; --track: .02em; --cat-size: clamp(2rem, 10vw, 2.6rem); --chip-r: 8px; --btn-r: 12px;
  --card-bg: #fff; --card-border: 3px solid var(--ink); --shadow: 5px 5px 0 var(--ink); --shadow-hover: 8px 8px 0 var(--ink);
  --tex: repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--accent) 12%, transparent) 22px 26px);
}
.v-street-food .card { box-shadow: var(--shadow); }
.v-street-food .card.has-photo .card-photo { border-bottom: 3px solid var(--ink); }
.v-street-food .hero h1 { color: var(--brand); text-shadow: 4px 4px 0 var(--ink); }
.v-street-food .eyebrow { display: inline-block; padding: 4px 10px; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--ink); border-radius: 6px; transform: rotate(-3deg); }
.v-street-food .logo { border-radius: 14px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--brand); transform: rotate(-4deg); }
.v-street-food .notice { background: var(--accent); color: var(--accent-ink); border: 3px solid var(--ink); border-radius: 10px; transform: rotate(-1deg); text-transform: uppercase; font-weight: 800; }
.v-street-food .action { border: 2.5px solid var(--ink); background: #fff; color: #111; box-shadow: 3px 3px 0 var(--ink); font-weight: 800; text-transform: uppercase; font-size: .82rem; }
.v-street-food .action-wa { background: var(--wa); color: #fff; }
.v-street-food .cat-nav { border-bottom: 3px solid var(--ink); }
.v-street-food .chip { border: 2.5px solid var(--ink); background: #fff; color: #111; font-family: var(--font-head); font-size: 1.15rem; padding: 4px 14px; }
.v-street-food .chip.on { background: var(--brand); color: var(--brand-ink); }
.v-street-food .cat-head h2 { line-height: .95; }
.v-street-food .cat-head h2::after { content: ""; display: block; width: 70px; height: 7px; margin-top: 6px; background: var(--accent); border: 2px solid var(--ink); }
.v-street-food .card h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.35rem; line-height: 1; letter-spacing: .02em; color: #111; }
.v-street-food .card-desc { color: #555; }
.v-street-food .price { display: inline-block; padding: 2px 9px; border: 2px solid var(--ink); border-radius: 6px; background: var(--accent); color: var(--accent-ink); transform: rotate(-2deg); font-weight: 800; }
.v-street-food .menu .grid .card.no-photo .price { color: var(--accent-ink); }
.v-street-food .menu .grid .card.no-photo h3 { color: var(--ink); }
.v-street-food .menu .grid .card.no-photo .card-desc { color: var(--muted); }
.v-street-food .add { background: var(--brand); color: var(--brand-ink); border: 2px solid var(--ink); border-radius: 8px; }
.v-street-food .cart-fab { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); text-transform: uppercase; }

/* ---------------------------------------------------------------------
   5. MEXICANO MODERNO — franja con grecas geométricas, fotos grandes
   --------------------------------------------------------------------- */
.v-mexican-modern {
  --radius: 20px; --cat-size: 1.5rem; --card-border: 0; --band-r: 0;
  --card-bg: color-mix(in srgb, var(--bg) 40%, #fff); --shadow: 0 12px 28px -18px color-mix(in srgb, var(--brand) 65%, transparent);
  --price: var(--brand);
}
.v-mexican-modern .card { box-shadow: var(--shadow); }
.v-mexican-modern .hero { padding-bottom: 54px; }
.v-mexican-modern .hero h1 { font-weight: 700; letter-spacing: -.01em; }
/* Greca geométrica (rombos y triángulos) al pie de la franja */
.v-mexican-modern .hero-deco {
  display: block; inset: auto 0 0 0; height: 24px; z-index: 1;
  background:
    linear-gradient(135deg, var(--bg) 25%, transparent 25%) -12px 0 / 24px 24px repeat-x,
    linear-gradient(225deg, var(--bg) 25%, transparent 25%) -12px 0 / 24px 24px repeat-x,
    linear-gradient(315deg, var(--accent) 25%, transparent 25%) 0 0 / 24px 24px repeat-x,
    linear-gradient(45deg, var(--accent) 25%, var(--bg) 25%) 0 0 / 24px 24px repeat-x;
}
.v-mexican-modern .eyebrow { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); letter-spacing: .1em; }
.v-mexican-modern .hero .eyebrow { color: var(--accent-ink); }
.v-mexican-modern .notice { background: var(--card-bg); border: 0; border-top: 5px solid var(--accent); border-radius: 14px; box-shadow: var(--shadow); }
.v-mexican-modern .action { background: var(--card-bg); border: 0; box-shadow: var(--shadow); }
.v-mexican-modern .action-wa { background: var(--wa); }
.v-mexican-modern .chip { background: transparent; border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); color: var(--brand); font-weight: 700; }
.v-mexican-modern .chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.v-mexican-modern .cat { padding-top: 34px; }
.v-mexican-modern .cat-head h2 { display: flex; align-items: center; gap: 12px; }
.v-mexican-modern .cat-head h2::before { content: ""; flex: none; width: 18px; height: 18px; transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.v-mexican-modern .card.has-photo .card-photo { border-bottom: 5px solid var(--accent); }
.v-mexican-modern .card h3 { font-size: 1.12rem; }
.v-mexican-modern .add { background: var(--accent); color: var(--accent-ink); border-radius: 12px; }

/* ---------------------------------------------------------------------
   6. TAQUERÍA URBANA — oscura, letras de cartel, texto sobre la foto
   --------------------------------------------------------------------- */
.v-taqueria {
  --radius: 8px; --hw: 900; --case: uppercase; --track: .01em; --cat-size: clamp(1.9rem, 9.5vw, 2.6rem); --chip-r: 4px; --btn-r: 6px; --photo-r: 6px;
  --surface: color-mix(in srgb, var(--bg) 90%, #fff); --price: var(--brand); --card-border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  --tex: linear-gradient(105deg, transparent 0 62%, color-mix(in srgb, var(--brand) 7%, transparent) 62% 70%, transparent 70%);
}
.v-taqueria .hero { padding-bottom: 36px; }
.v-taqueria .hero h1 { color: var(--brand); line-height: .88; }
.v-taqueria .hero-deco { display: block; inset: auto 18px 14px 18px; height: 6px; background: repeating-linear-gradient(90deg, var(--accent) 0 26px, transparent 26px 34px); }
.v-taqueria .eyebrow { display: inline-block; padding: 3px 10px; background: var(--accent); color: var(--accent-ink); font-weight: 800; letter-spacing: .14em; }
.v-taqueria .logo { border-radius: 8px; border: 3px solid var(--brand); }
.v-taqueria .notice { background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 4px; text-transform: uppercase; font-weight: 800; letter-spacing: .04em; }
.v-taqueria .action { background: transparent; border: 2px solid var(--brand); color: var(--brand); text-transform: uppercase; font-weight: 700; letter-spacing: .06em; font-size: .82rem; }
.v-taqueria .action-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.v-taqueria .chip { background: transparent; border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .04em; padding: 5px 14px; }
.v-taqueria .chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.v-taqueria .cat-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.v-taqueria .cat-num { display: block; font-family: var(--font-head); font-weight: 900; font-size: 2.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
.v-taqueria .cat-head h2 { line-height: .95; }
.v-taqueria .cat-head p { width: 100%; }
.v-taqueria .card h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.55rem; line-height: 1; letter-spacing: .01em; }
.v-taqueria .price { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; }
.v-taqueria .card.has-photo .price { padding: 0 8px; background: var(--brand); color: var(--brand-ink); border-radius: 4px; }
.v-taqueria .card.has-photo .card-title .price { color: var(--brand-ink); }
.v-taqueria .add { background: var(--brand); color: var(--brand-ink); border-radius: 6px; }
.v-taqueria .cart-fab { text-transform: uppercase; letter-spacing: .06em; }

/* ---------------------------------------------------------------------
   7. SUSHI / ASIÁTICO — sello rojo, líneas finas, mucho blanco
   --------------------------------------------------------------------- */
.v-asian { --radius: 4px; --shadow: none; --hw: 700; --cat-size: 1.5rem; --chip-r: 2px; --btn-r: 4px; --photo-r: 3px; --price: var(--ink); }
.v-asian .menu { padding-inline: 22px; }
.v-asian .hero { border-bottom-color: var(--brand); }
/* Sello rojo (hanko) en lugar del logo redondo */
.v-asian .logo { border-radius: 6px; box-shadow: none; outline: 2px solid var(--brand); outline-offset: 3px; }
.v-asian .logo-text { background: var(--brand); color: var(--brand-ink); }
.v-asian .eyebrow { color: var(--brand); letter-spacing: .3em; font-weight: 500; }
.v-asian .hero h1 { font-weight: 700; letter-spacing: .02em; }
.v-asian .desc { font-size: .95rem; }
.v-asian .notice { background: none; border: 0; border-left: 3px solid var(--brand); border-radius: 0; font-weight: 500; }
.v-asian .action { background: none; border: 1px solid var(--line); font-weight: 500; }
.v-asian .action-wa { background: var(--wa); border-color: var(--wa); }
.v-asian .chip { background: none; border: 1px solid transparent; color: var(--muted); font-weight: 500; letter-spacing: .08em; }
.v-asian .chip.on { background: none; color: var(--brand); border-color: var(--brand); }
.v-asian .cat { padding-top: 38px; }
.v-asian .cat-head { position: relative; padding-left: 16px; }
.v-asian .cat-head::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--brand); }
.v-asian .cat-num { display: block; color: var(--brand); font: 500 .72rem/1 var(--font-body); letter-spacing: .3em; margin-bottom: 6px; }
.v-asian .card h3 { font-size: 1.08rem; }
.v-asian .card-photo { box-shadow: 0 0 0 1px var(--line); }
.v-asian .price { font-weight: 700; }
.v-asian .add { background: var(--brand); color: var(--brand-ink); border-radius: 2px; }
.v-asian .cart-fab { border-radius: 4px; }

/* ---------------------------------------------------------------------
   8. ITALIANO — toldo a rayas, mantel sutil, platos redondos
   --------------------------------------------------------------------- */
.v-italian {
  --radius: 18px; --hw: 400; --cat-size: 2.1rem; --card-border: 0; --price: var(--accent);
  --card-bg: color-mix(in srgb, var(--bg) 35%, #fff); --shadow: 0 10px 26px -16px rgb(0 0 0 / .3);
  --tex: repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 5%, transparent) 0 14px, transparent 14px 28px),
         repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent) 0 14px, transparent 14px 28px);
}
.v-italian .card { box-shadow: var(--shadow); }
.v-italian .hero { padding-top: 72px; }
/* Toldo a rayas con orilla ondulada */
.v-italian .hero-deco {
  display: block; inset: 0 0 auto 0; height: 44px; z-index: 2;
  background:
    repeating-linear-gradient(90deg, var(--brand) 0 28px, color-mix(in srgb, var(--bg) 60%, #fff) 28px 56px);
  -webkit-mask: radial-gradient(14px at 14px 30px, #000 99%, transparent) 0 0 / 28px 44px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 30px no-repeat;
          mask: radial-gradient(14px at 14px 30px, #000 99%, transparent) 0 0 / 28px 44px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 30px no-repeat;
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / .15));
}
.v-italian .hero.has-cover { padding-top: 190px; }
.v-italian .hero h1 { color: var(--brand); font-weight: 400; }
.v-italian .eyebrow { color: var(--accent); letter-spacing: .3em; }
.v-italian .desc { font-style: italic; }
.v-italian .logo { box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--brand), 0 10px 22px rgb(0 0 0 / .2); }
.v-italian .notice { background: var(--card-bg); border: 0; border-block: 3px double var(--brand); border-radius: 0; color: var(--brand); }
.v-italian .action { background: var(--card-bg); border: 1.5px solid var(--brand); color: var(--brand); }
.v-italian .action-wa { background: var(--wa); color: #fff; border-color: var(--wa); }
.v-italian .chip { background: transparent; border: 1.5px solid color-mix(in srgb, var(--brand) 35%, transparent); color: var(--brand); font-weight: 700; }
.v-italian .chip.on { background: var(--brand); color: var(--brand-ink); }
.v-italian .cat { padding-top: 38px; }
.v-italian .cat-head h2 { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--brand); font-weight: 400; }
.v-italian .cat-head h2::before, .v-italian .cat-head h2::after { content: ""; flex: 0 1 50px; height: 2px; background: linear-gradient(90deg, var(--brand) 33%, #fff 33% 66%, var(--accent) 66%); }
.v-italian .cat-head p { font-style: italic; }
/* Plato: aro blanco con sombra */
.v-italian .card-photo { border: 6px solid #fff; box-shadow: 0 6px 16px -4px rgb(0 0 0 / .35); }
.v-italian .card h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.15rem; color: var(--ink); }
.v-italian .price { font-weight: 700; }
.v-italian .add { background: var(--brand); color: var(--brand-ink); }

/* ---------------------------------------------------------------------
   9. MARINO / SEAFOOD — portada amplia, ondas finas, fresco
   --------------------------------------------------------------------- */
.v-seafood {
  --radius: 22px; --band-r: 0; --cat-size: 1.55rem; --track: .04em; --case: uppercase; --card-border: 0; --price: var(--brand);
  --card-bg: #fff; --shadow: 0 14px 30px -20px color-mix(in srgb, var(--brand) 80%, transparent);
  --tex: radial-gradient(140% 60% at 50% 120%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%);
}
.v-seafood .card { box-shadow: var(--shadow); }
.v-seafood .hero:not(.has-cover) { padding-bottom: 52px; }
.v-seafood .hero:not(.has-cover) .hero-deco {
  display: block; inset: auto 0 0 0; height: 22px; z-index: 1;
  background: radial-gradient(circle at 50% 100%, var(--bg) 11px, transparent 12px) 0 100% / 24px 14px repeat-x;
}
.v-seafood .hero h1 { font-weight: 700; letter-spacing: .03em; }
.v-seafood .eyebrow { letter-spacing: .26em; font-weight: 700; }
.v-seafood .logo { box-shadow: 0 0 0 4px rgb(255 255 255 / .9), 0 12px 26px rgb(0 0 0 / .3); }
.v-seafood .notice { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); border: 0; border-radius: 16px; }
.v-seafood .action { background: #fff; border: 0; box-shadow: var(--shadow); color: var(--brand); }
.v-seafood .action-wa { background: var(--wa); color: #fff; }
.v-seafood .chip { background: #fff; border: 0; box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--brand) 60%, transparent); color: var(--brand); font-weight: 700; }
.v-seafood .chip.on { background: var(--brand); color: var(--brand-ink); }
.v-seafood .cat { padding-top: 36px; }
.v-seafood .cat-head h2 { color: var(--brand); font-weight: 700; }
.v-seafood .cat-head h2::after { content: ""; display: block; width: 80px; height: 8px; margin-top: 8px;
  background: radial-gradient(circle at 50% 0, transparent 4px, var(--accent) 4.5px 6px, transparent 6.5px) 0 0 / 12px 8px repeat-x; }
.v-seafood .card h3 { text-transform: none; letter-spacing: 0; font-size: 1.12rem; color: var(--brand); }
.v-seafood .card.has-photo .card-photo { border-bottom: 4px solid var(--accent); }
.v-seafood .price { font-weight: 800; }
.v-seafood .add { background: var(--accent); color: var(--accent-ink); }
.v-seafood .cart-fab { border-radius: 999px; }

/* ---------------------------------------------------------------------
   10. BAKERY / PANADERÍA — costuras, festón, platos redondos
   --------------------------------------------------------------------- */
.v-bakery {
  --radius: 22px; --hw: 400; --cat-size: 1.85rem; --card-border: 0; --price: var(--brand); --chip-r: 999px;
  --card-bg: color-mix(in srgb, var(--bg) 35%, #fff); --shadow: 0 12px 26px -18px color-mix(in srgb, var(--brand) 70%, transparent);
  --tex: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 2px, transparent 2.5px) 0 0 / 34px 34px;
}
.v-bakery .card { box-shadow: var(--shadow); outline: 1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: -7px; }
.v-bakery .hero-inner { outline: 1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: -8px; }
.v-bakery .hero h1 { color: var(--brand); font-weight: 400; }
.v-bakery .eyebrow { color: var(--brand); background: color-mix(in srgb, var(--accent) 30%, var(--bg)); display: inline-block; padding: 4px 12px; border-radius: 999px; }
.v-bakery .logo { box-shadow: 0 0 0 5px var(--card-bg), 0 0 0 7px var(--accent); }
.v-bakery .notice { background: color-mix(in srgb, var(--accent) 25%, var(--bg)); border: 0; border-radius: 18px; text-align: center; }
.v-bakery .action { background: var(--card-bg); border: 0; box-shadow: var(--shadow); }
.v-bakery .action-wa { background: var(--wa); }
.v-bakery .chip { background: var(--card-bg); border: 0; color: var(--brand); font-weight: 700; box-shadow: var(--shadow); }
.v-bakery .chip.on { background: var(--brand); color: var(--brand-ink); }
.v-bakery .cat-head { text-align: center; }
.v-bakery .cat-head h2 { color: var(--brand); font-weight: 400; }
/* Festón (orilla de pastel) bajo el título */
.v-bakery .cat-head h2::after { content: ""; display: block; width: 110px; height: 10px; margin: 8px auto 0;
  background: radial-gradient(circle at 50% 0, var(--accent) 5px, transparent 5.5px) 0 0 / 11px 10px repeat-x; }
.v-bakery .card-photo { border: 5px solid #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); }
.v-bakery .card h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.1rem; }
.v-bakery .price { display: inline-block; padding: 1px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 30%, var(--bg)); color: var(--ink); font-weight: 800; }
.v-bakery .menu .grid .card.no-photo { outline: 0; }
.v-bakery .menu .grid .card.no-photo .price { color: var(--ink); }
.v-bakery .add { background: var(--brand); color: var(--brand-ink); }
.v-bakery .cart-fab { border-radius: 999px; }

/* ---------------------------------------------------------------------
   11. FITNESS / SALUDABLE — energía, mosaico, etiquetas tipo app
   --------------------------------------------------------------------- */
.v-fitness {
  --radius: 24px; --hw: 800; --track: -.03em; --cat-size: 1.7rem; --card-border: 0; --card-bg: #fff; --btn-r: 16px;
  --shadow: 0 2px 4px rgb(0 0 0 / .04), 0 16px 32px -20px rgb(0 0 0 / .35); --gap: 12px;
}
.v-fitness .card { box-shadow: var(--shadow); }
.v-fitness .hero h1 { font-size: clamp(2.4rem, 11vw, 3.6rem); }
.v-fitness .hero h1::after { content: ""; display: block; width: 64px; height: 8px; margin-top: 12px; border-radius: 99px; background: var(--accent); }
.v-fitness .eyebrow { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); letter-spacing: .08em; }
.v-fitness .logo { border-radius: 22px; box-shadow: var(--shadow); }
.v-fitness .notice { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 18px; font-weight: 700; }
.v-fitness .action { background: #fff; color: #111; border: 0; box-shadow: var(--shadow); }
.v-fitness .action-wa { background: var(--wa); color: #fff; }
.v-fitness .chip { background: #fff; color: #111; border: 0; box-shadow: 0 2px 10px -6px rgb(0 0 0 / .4); font-weight: 600; }
.v-fitness .chip.on { background: var(--brand); color: var(--brand-ink); }
.v-fitness .cat { padding-top: 34px; }
.v-fitness .cat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v-fitness .cat-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: 700 .8rem/1 var(--font-body); }
.v-fitness .cat-head p { width: 100%; }
.v-fitness .card h3 { color: #111; letter-spacing: -.01em; }
.v-fitness .card-desc { color: #5b6170; }
.v-fitness .price { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .95rem; }
.v-fitness .menu .grid .card.no-photo .price { color: var(--accent-ink); }
.v-fitness .menu .grid .card.no-photo h3 { color: var(--ink); }
.v-fitness .menu .grid .card.no-photo .card-desc { color: var(--muted); }
.v-fitness .add { background: var(--brand); color: var(--brand-ink); border-radius: 12px; }

/* ---------------------------------------------------------------------
   12. ORGÁNICO / NATURAL — hojas, papel, formas orgánicas
   --------------------------------------------------------------------- */
.v-organic {
  --radius: 28px; --cat-size: 1.9rem; --card-border: 0; --price: var(--brand); --chip-r: 999px;
  --card-bg: color-mix(in srgb, var(--brand) 6%, color-mix(in srgb, var(--bg) 60%, #fff));
  --shadow: none; --photo-r: 58% 42% 55% 45% / 50% 55% 45% 50%;
  --tex: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--brand) 6%, transparent) 1px, transparent 1.6px) 0 0 / 7px 7px,
         radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1.6px) 0 0 / 11px 11px;
}
.v-organic .card { border-radius: 30px 12px 30px 12px; }
.v-organic .hero { overflow: hidden; }
.v-organic .hero-deco { display: block; top: -70px; left: 50%; width: 360px; height: 200px; transform: translateX(-50%);
  border-radius: 50% 50% 46% 54% / 60% 60% 40% 40%; background: color-mix(in srgb, var(--brand) 10%, transparent); }
.v-organic .hero.has-cover .hero-deco { display: none; }
.v-organic .hero h1 { color: var(--brand); font-weight: 600; }
.v-organic .eyebrow { color: var(--accent); font-family: var(--font-head); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.05rem; font-weight: 500; }
.v-organic .logo { border-radius: var(--photo-r); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 18%, var(--bg)); }
.v-organic .notice { background: var(--card-bg); border: 0; border-radius: 22px 8px 22px 8px; }
.v-organic .action { background: var(--card-bg); border: 0; color: var(--brand); }
.v-organic .action-wa { background: var(--wa); color: #fff; }
.v-organic .chip { background: transparent; border: 1.5px solid color-mix(in srgb, var(--brand) 30%, transparent); color: var(--brand); font-weight: 500; }
.v-organic .chip.on { background: var(--brand); color: var(--brand-ink); }
.v-organic .cat { padding-top: 38px; }
/* Hojita junto al título */
.v-organic .cat-head h2::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .4em; vertical-align: .1em;
  border-radius: 0 100% 0 100%; background: var(--accent); transform: rotate(-10deg); }
.v-organic .cat-head h2 { color: var(--brand); font-weight: 600; }
.v-organic .cat-head p { font-family: var(--font-head); font-style: italic; }
.v-organic .card h3 { font-weight: 600; font-size: 1.15rem; }
.v-organic .add { background: var(--accent); color: var(--accent-ink); border-radius: 0 50% 50% 50%; }
.v-organic .cart-fab { border-radius: 26px 10px 26px 10px; }

/* ---------------------------------------------------------------------
   13. LUJO ELEGANTE — mayúsculas espaciadas, marco fino, carta
   --------------------------------------------------------------------- */
.v-luxury {
  --radius: 0; --shadow: none; --hw: 500; --track: .12em; --cat-size: 1.45rem; --chip-r: 0; --btn-r: 0; --photo-r: 0;
  --price: var(--ink); --line: color-mix(in srgb, var(--accent) 35%, transparent);
}
.v-luxury .menu { padding-inline: 26px; }
.v-luxury .hero { padding: 64px 34px 40px; }
.v-luxury .hero-deco { display: block; inset: 14px; z-index: 1; border: 1px solid var(--accent); outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -7px; }
.v-luxury .hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.9rem); font-weight: 500; letter-spacing: .14em; line-height: 1.15; }
.v-luxury .eyebrow { color: var(--accent); letter-spacing: .5em; font-weight: 400; font-size: .66rem; }
.v-luxury .desc { font-weight: 300; letter-spacing: .02em; }
.v-luxury .hours { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; }
.v-luxury .logo { box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px var(--bg), 0 0 0 7px color-mix(in srgb, var(--accent) 50%, transparent); }
.v-luxury .notice { background: none; border: 0; border-block: 1px solid var(--accent); border-radius: 0; font-weight: 400; letter-spacing: .04em; }
.v-luxury .action { background: none; border: 1px solid var(--accent); font-weight: 500; text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; }
.v-luxury .action-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.v-luxury .cat-nav-inner { justify-content: safe center; gap: 24px; }
.v-luxury .chip { background: none; border: 0; padding: 9px 0; color: var(--muted); text-transform: uppercase; letter-spacing: .28em; font-size: .66rem; font-weight: 500; }
.v-luxury .chip.on { background: none; color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); }
.v-luxury .cat { padding-top: 56px; }
.v-luxury .cat-head { margin-bottom: 10px; }
.v-luxury .cat-head h2::after { content: "◆"; display: block; margin-top: 10px; color: var(--accent); font-size: .5rem; letter-spacing: 0; }
.v-luxury .cat-head p { font-weight: 300; }
.v-luxury .card h3 { font-family: var(--font-head); font-size: 1rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.v-luxury .card-desc { font-weight: 300; }
.v-luxury .leader { border-bottom: 1px dotted color-mix(in srgb, var(--accent) 70%, transparent); }
.v-luxury .menu .grid .card.no-photo .leader { border-bottom: 1px dotted color-mix(in srgb, var(--accent) 70%, transparent); }
.v-luxury .price { font-family: var(--font-head); font-weight: 500; letter-spacing: .04em; }
.v-luxury .add { background: none; border: 1px solid var(--accent); color: var(--accent); border-radius: 0; font-weight: 300; }
.v-luxury .add-label { text-transform: uppercase; letter-spacing: .2em; font-size: .62rem; font-weight: 500; }
.v-luxury .cart-fab { box-shadow: 0 0 0 1px var(--accent), 0 14px 30px rgb(0 0 0 / .25); letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; }
.v-luxury .foot { text-transform: uppercase; letter-spacing: .3em; font-size: .62rem; }

/* ---------------------------------------------------------------------
   14. NEÓN URBANO — nocturno, brillos, cuadrícula tecnológica
   --------------------------------------------------------------------- */
.v-neon {
  --radius: 14px; --hw: 800; --case: uppercase; --track: .04em; --cat-size: 1.45rem; --chip-r: 8px; --btn-r: 10px; --band-r: 0;
  --surface: color-mix(in srgb, var(--bg) 92%, #fff); --price: var(--accent);
  --card-border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  --shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 22px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  --shadow-hover: 0 0 0 1px var(--accent), 0 0 30px -4px color-mix(in srgb, var(--accent) 75%, transparent);
  --tex: linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
         linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px;
}
.v-neon .card { box-shadow: var(--shadow); }
.v-neon .hero { background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 30%, var(--bg)), var(--bg) 75%); color: var(--ink);
  border-bottom: 1px solid var(--brand); box-shadow: 0 10px 30px -14px var(--brand); }
.v-neon .hero h1 { color: var(--ink); text-shadow: 0 0 6px var(--brand), 0 0 22px var(--brand); }
.v-neon .hero :is(.eyebrow, .desc, .hours) { color: color-mix(in srgb, var(--ink) 80%, var(--bg)); }
.v-neon .hero .eyebrow { color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); letter-spacing: .3em; }
.v-neon .logo { box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--accent); }
.v-neon .notice { background: none; border: 1px solid var(--brand); border-radius: 10px; box-shadow: inset 0 0 18px -6px var(--brand), 0 0 18px -8px var(--brand); }
.v-neon .action { background: transparent; border: 1px solid var(--accent); color: var(--accent); box-shadow: 0 0 14px -6px var(--accent); }
.v-neon .action-wa { background: var(--wa); color: #fff; border-color: var(--wa); }
.v-neon .chip { background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); font-family: var(--font-head); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.v-neon .chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); box-shadow: 0 0 16px var(--brand); }
.v-neon .cat-head h2 { text-shadow: 0 0 14px color-mix(in srgb, var(--brand) 70%, transparent); }
.v-neon .cat-head h2::after { content: ""; display: block; width: 80px; height: 2px; margin-top: 10px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.v-neon .card h3 { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.02rem; }
.v-neon .price { font-family: var(--font-head); font-weight: 700; text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); }
.v-neon .card.has-photo .card-photo { border-bottom: 1px solid var(--accent); }
.v-neon .add { background: var(--brand); color: var(--brand-ink); border-radius: 8px; box-shadow: 0 0 14px var(--brand); }
.v-neon .cart-fab { background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 30px var(--brand); }

/* ---------------------------------------------------------------------
   15. RETRO — diner de los 70: franjas, instantáneas, letras redondas
   --------------------------------------------------------------------- */
.v-retro {
  --radius: 16px; --hw: 400; --cat-size: 2rem; --chip-r: 999px; --btn-r: 999px; --band-r: 0; --price: var(--brand);
  --card-bg: color-mix(in srgb, var(--bg) 50%, #fff); --card-border: 2px solid color-mix(in srgb, var(--ink) 80%, transparent);
  --tex: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand) 8%, transparent) 2px, transparent 2.5px) 0 0 / 22px 22px;
}
.v-retro .hero { padding-bottom: 58px; }
/* Tres franjas de colores al pie del encabezado */
.v-retro .hero-deco { display: block; inset: auto 0 0 0; height: 30px; z-index: 1;
  background: linear-gradient(var(--accent) 0 33%, #e9c46a 33% 66%, var(--bg) 66%); }
.v-retro .hero h1 { color: var(--brand-ink); text-shadow: 3px 3px 0 color-mix(in srgb, var(--brand) 55%, #000); font-weight: 400; }
.v-retro .logo { box-shadow: 0 0 0 4px #e9c46a, 0 0 0 8px var(--accent); }
.v-retro .notice { background: #e9c46a; color: #1d1d1d; border: 2px solid #1d1d1d; border-radius: 999px; text-align: center; }
.v-retro .action { background: var(--card-bg); border: 2px solid var(--ink); font-weight: 700; }
.v-retro .action-wa { background: var(--wa); color: #fff; border-color: var(--wa); }
.v-retro .chip { background: transparent; border: 2px solid var(--ink); font-family: var(--font-head); font-size: .98rem; font-weight: 400; }
.v-retro .chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.v-retro .cat { padding-top: 36px; }
.v-retro .cat-head { text-align: center; }
.v-retro .cat-head h2 { color: var(--brand); }
.v-retro .cat-head h2::after { content: ""; display: block; width: 120px; height: 12px; margin: 8px auto 0;
  background: linear-gradient(var(--brand) 0 33%, #e9c46a 33% 66%, var(--accent) 66%); border-radius: 99px; }
.v-retro .card h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.1rem; }
.v-retro .price { font-weight: 700; }
.v-retro .menu .grid .card.no-photo .leader { border-bottom-style: dashed; }
.v-retro .add { background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------------
   16. POP COLOR — confeti, tarjetas de colores, título enorme
   --------------------------------------------------------------------- */
.v-pop {
  --radius: 24px; --hw: 800; --track: -.01em; --cat-size: 2rem; --card-border: 2.5px solid var(--ink); --btn-r: 16px;
  --shadow: 4px 4px 0 var(--ink); --shadow-hover: 7px 7px 0 var(--ink); --card-bg: #fff;
  --tex: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent) 3px, transparent 3.5px) 0 0 / 60px 70px,
         radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 2.5px, transparent 3px) 30px 35px / 60px 70px,
         radial-gradient(circle, color-mix(in srgb, #ffd23f 45%, transparent) 2px, transparent 2.5px) 15px 52px / 60px 70px;
}
.v-pop .card { box-shadow: var(--shadow); }
.v-pop .grid > .card.has-photo:nth-child(3n+1) { --card-bg: color-mix(in srgb, var(--brand) 16%, #fff); }
.v-pop .grid > .card.has-photo:nth-child(3n+2) { --card-bg: color-mix(in srgb, var(--accent) 16%, #fff); }
.v-pop .grid > .card.has-photo:nth-child(3n) { --card-bg: color-mix(in srgb, #ffd23f 28%, #fff); }
.v-pop .card.has-photo .card-photo { border-bottom: 2.5px solid var(--ink); }
.v-pop .card.has-photo h3, .v-pop .card.has-photo .price { color: #151515; }
.v-pop .card.has-photo .card-desc { color: #444; }
.v-pop .hero h1 { color: var(--brand); text-shadow: 4px 4px 0 var(--accent); }
.v-pop .eyebrow { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #ffd23f; color: #151515; border: 2px solid #151515; transform: rotate(-3deg); }
.v-pop .logo { border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--brand); }
.v-pop .notice { background: #ffd23f; color: #151515; border: 2.5px solid #151515; border-radius: 18px; transform: rotate(-1deg); font-weight: 700; }
.v-pop .action { background: #fff; color: #151515; border: 2.5px solid #151515; box-shadow: 3px 3px 0 #151515; font-weight: 700; }
.v-pop .action-wa { background: var(--wa); color: #fff; }
.v-pop .chip { background: #fff; color: #151515; border: 2.5px solid #151515; font-weight: 700; }
.v-pop .chip.on { background: var(--brand); color: var(--brand-ink); }
.v-pop .cat-head h2 { display: inline-block; padding: 2px 14px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); transform: rotate(-1.5deg); border: 2.5px solid var(--ink); }
.v-pop .cat-head p { margin-top: 10px; }
.v-pop .price { font-weight: 800; }
.v-pop .add { background: var(--brand); color: var(--brand-ink); border: 2px solid #151515; }
.v-pop .cart-fab { border: 2.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }

/* ---------------------------------------------------------------------
   17. MONOCROMÁTICO — todo en tonos de un solo color
   --------------------------------------------------------------------- */
.v-monochrome {
  --radius: 16px; --hw: 800; --track: -.02em; --cat-size: clamp(1.3rem, 6.2vw, 1.6rem); --card-border: 0; --price: var(--brand);
  --surface: color-mix(in srgb, var(--brand) 7%, var(--bg)); --line: color-mix(in srgb, var(--brand) 20%, transparent);
  --muted: color-mix(in srgb, var(--brand) 55%, var(--ink));
  --veil: color-mix(in srgb, var(--brand) 55%, #000);
  --shadow: none; --tex: linear-gradient(color-mix(in srgb, var(--brand) 6%, transparent), transparent 380px) no-repeat;
}
.v-monochrome .hero h1 { color: var(--brand); }
.v-monochrome .eyebrow { color: color-mix(in srgb, var(--brand) 70%, var(--bg)); letter-spacing: .2em; }
.v-monochrome .logo { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, var(--bg)); }
.v-monochrome .logo-text { background: var(--brand); }
.v-monochrome .notice { background: color-mix(in srgb, var(--brand) 12%, var(--bg)); border: 0; border-radius: 14px; color: var(--brand); }
.v-monochrome .action { background: color-mix(in srgb, var(--brand) 10%, var(--bg)); border: 0; color: var(--brand); }
.v-monochrome .action-wa { background: var(--wa); color: #fff; }
.v-monochrome .chip { background: color-mix(in srgb, var(--brand) 8%, var(--bg)); border: 0; color: var(--brand); font-weight: 600; }
.v-monochrome .chip.on { background: var(--brand); color: var(--brand-ink); }
.v-monochrome .cat-head h2 { color: var(--brand); }
.v-monochrome .cat-num { display: block; color: color-mix(in srgb, var(--brand) 45%, var(--bg)); font: 800 2.4rem/1 var(--font-head); margin-bottom: -6px; }
.v-monochrome .card { background: color-mix(in srgb, var(--brand) 8%, var(--bg)); }
.v-monochrome .menu .grid .card.no-photo h3 { color: var(--brand); }
.v-monochrome .menu .grid .card.no-photo .leader { border-bottom-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.v-monochrome .add { background: var(--brand); color: var(--brand-ink); }

/* ---------------------------------------------------------------------
   18. EDITORIAL — como revista: números grandes, títulos protagonistas
   --------------------------------------------------------------------- */
.v-editorial { --radius: 0; --shadow: none; --hw: 400; --track: -.01em; --cat-size: clamp(1.7rem, 7.4vw, 2.6rem); --chip-r: 0; --btn-r: 0; --photo-r: 0; --price: var(--ink); }
.v-editorial .menu { padding-inline: 22px; }
.v-editorial .hero { border-top: 8px solid var(--ink); border-bottom: 2px solid var(--ink); }
.v-editorial .hero h1 { font-weight: 400; line-height: .98; }
.v-editorial .eyebrow { color: var(--accent); letter-spacing: .24em; font-weight: 800; }
.v-editorial .desc { font-family: var(--font-head); font-style: italic; font-size: 1.15rem; color: var(--ink); }
.v-editorial .logo { border-radius: 0; box-shadow: none; }
.v-editorial .notice { background: var(--ink); color: var(--bg); border: 0; border-radius: 0; font-weight: 600; }
.v-editorial .action { background: none; border: 1.5px solid var(--ink); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }
.v-editorial .action-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.v-editorial .cat-nav { border-bottom: 2px solid var(--ink); }
.v-editorial .chip { background: none; border: 0; padding: 9px 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 800; }
.v-editorial .chip.on { background: none; color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.v-editorial .cat { padding-top: 44px; }
.v-editorial .cat-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 14px; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.v-editorial .cat-num { display: block; grid-row: span 2; font: 400 clamp(3rem, 13vw, 4.2rem)/.8 var(--font-head); color: var(--accent); }
.v-editorial .cat-head p { grid-column: 2; font-family: var(--font-head); font-style: italic; color: var(--ink); }
.v-editorial .card h3 { font-size: 1.3rem; font-weight: 400; }
.v-editorial .card-desc { font-size: .88rem; }
.v-editorial .price { font-weight: 800; font-size: 1rem; }
.v-editorial .add { background: var(--ink); color: var(--bg); border-radius: 0; }

/* ---------------------------------------------------------------------
   19. CARD MODERNO — cada categoría en su panel, tarjetas bien separadas
   --------------------------------------------------------------------- */
.v-cards {
  --radius: 20px; --hw: 800; --track: -.02em; --cat-size: 1.35rem; --card-border: 0; --card-bg: #fff; --gap: 12px; --btn-r: 14px;
  --shadow: 0 1px 2px rgb(16 24 40 / .06), 0 8px 20px -8px rgb(16 24 40 / .18);
  --shadow-hover: 0 2px 4px rgb(16 24 40 / .08), 0 18px 34px -12px rgb(16 24 40 / .3);
}
.v-cards .card { box-shadow: var(--shadow); }
.v-cards .hero h1 { color: #101828; }
.v-cards .hero :is(.desc, .hours) { color: #475467; }
.v-cards .eyebrow { color: var(--brand); }
.v-cards .notice { background: #fff; border: 0; border-left: 4px solid var(--accent); border-radius: 14px; box-shadow: var(--shadow); color: #101828; }
.v-cards .action { background: #fff; color: #101828; border: 0; box-shadow: var(--shadow); }
.v-cards .action-wa { background: var(--wa); color: #fff; }
.v-cards .chip { background: #fff; color: #344054; border: 0; box-shadow: 0 1px 3px rgb(16 24 40 / .12); font-weight: 600; }
.v-cards .chip.on { background: var(--brand); color: var(--brand-ink); }
/* Cada categoría vive en su propio panel */
.v-cards .menu { padding-inline: 12px; }
.v-cards .cat { margin-top: 16px; padding: 18px 14px 16px; border-radius: 26px; background: color-mix(in srgb, var(--bg) 45%, #fff); }
.v-cards .cat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v-cards .cat-num { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: var(--brand-ink); font: 700 .78rem/1 var(--font-body); }
.v-cards .cat-head p { width: 100%; }
.v-cards .card h3 { color: #101828; }
.v-cards .card-desc { color: #667085; }
.v-cards .price { color: #101828; }
.v-cards .menu .grid .card.no-photo { background: #fff; border-radius: 14px; padding: 12px 14px; border-bottom: 0; box-shadow: var(--shadow); }
.v-cards .menu .grid .card.no-photo + .card.no-photo { margin-top: 0; }
.v-cards .menu .grid .card.no-photo :is(h3, .price) { color: #101828; }
.v-cards .menu .grid .card.no-photo .card-desc { color: #667085; }
.v-cards .add { background: var(--brand); color: var(--brand-ink); border-radius: 12px; }

/* ---------------------------------------------------------------------
   20. PREMIUM DINÁMICO — elegancia moderna con movimiento sutil
   --------------------------------------------------------------------- */
.v-premium-dynamic {
  --radius: 22px; --hw: 700; --track: -.02em; --cat-size: 1.9rem; --card-border: 0; --btn-r: 999px; --band-r: 30px;
  --shadow: 0 20px 40px -24px rgb(0 0 0 / .5); --shadow-hover: 0 28px 50px -22px rgb(0 0 0 / .6);
  --price: var(--brand);
}
.v-premium-dynamic .hero:not(.has-cover) { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--accent))); }
.v-premium-dynamic .hero h1 { font-weight: 800; }
.v-premium-dynamic .eyebrow { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgb(255 255 255 / .16); backdrop-filter: blur(6px); letter-spacing: .14em; }
.v-premium-dynamic .hero:not(.has-cover) .eyebrow { background: color-mix(in srgb, var(--brand-ink) 14%, transparent); }
.v-premium-dynamic .logo { box-shadow: 0 0 0 3px var(--accent), 0 14px 30px rgb(0 0 0 / .35); }
.v-premium-dynamic .notice { background: var(--surface); border: 0; border-radius: 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.v-premium-dynamic .notice::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(var(--accent), var(--brand)); }
.v-premium-dynamic .action { background: var(--surface); border: 0; box-shadow: var(--shadow); }
.v-premium-dynamic .action-wa { background: var(--wa); color: #fff; }
.v-premium-dynamic .chip { background: transparent; border: 1.5px solid var(--line); font-weight: 600; }
.v-premium-dynamic .chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); box-shadow: 0 8px 18px -8px var(--brand); }
.v-premium-dynamic .cat { padding-top: 40px; }
.v-premium-dynamic .cat-head h2::after { content: ""; display: block; width: 46px; height: 4px; margin-top: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--brand)); transition: width .4s ease; }
.v-premium-dynamic .cat:hover .cat-head h2::after { width: 90px; }
.v-premium-dynamic .card.has-photo { box-shadow: var(--shadow); }
.v-premium-dynamic .card.has-photo .price { padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.v-premium-dynamic .card.has-photo .card-title .price { color: var(--accent-ink); }
.v-premium-dynamic .add { background: var(--accent); color: var(--accent-ink); }
/* Las tarjetas aparecen suavemente al bajar (solo en navegadores que lo soportan; si no, se ven normal) */
@supports (animation-timeline: view()) {
  @keyframes tpl-rise { from { opacity: 0; transform: translateY(26px) scale(.98); } }
  .v-premium-dynamic .grid > .card { animation: tpl-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
.v-premium-dynamic .cart-fab { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--accent))); }