:root {
    --canvas:   #E6DEC8;
    --paper:    #F5F0E6;
    --surface:  #FAF6EC;
    --ink:      #0E0E0C;
    --ink-70:   rgba(14,14,12,.7);
    --ink-50:   rgba(14,14,12,.5);
    --ink-30:   rgba(14,14,12,.3);
    --ink-12:   rgba(14,14,12,.12);
    --ink-06:   rgba(14,14,12,.06);
    --terra:    #B85C38;
    --terra-bg: rgba(184,92,56,.10);
    --olive:    #5F6B3B;
    --olive-bg: rgba(95,107,59,.12);
    --wheat:    #C89F5C;
    --border:   #D9CFB8;
    --combo:    #6E4FA0;
    --combo-bg: rgba(110,79,160,.10);
    --combo-border: rgba(110,79,160,.28);

    --display: "Fraunces", "Times New Roman", serif;
    --sans:    "Instrument Sans", system-ui, sans-serif;
    --mono:    "JetBrains Mono", ui-monospace, monospace;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  html.drawer-open { overflow: hidden; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01","ss02";
  }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }

  /* ═══════════════ STICKY HEADER ═══════════════ */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s, background .3s;
  }
  .site-header.scrolled {
    border-bottom-color: var(--border);
    box-shadow: 0 2px 20px -10px rgba(14,14,12,.08);
    background: rgba(245,240,230,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .site-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 56px;
    max-width: 1680px;
    margin: 0 auto;
  }
  .site-nav .logo-s {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--ink-12);
    flex-shrink: 0;
    display: block;
    transition: transform .3s;
  }
  .site-nav .logo-s:hover { transform: rotate(-5deg); }
  /* El SVG vectorizado (favicon.svg) trae su propio circulo paper + S adentro;
     usamos object-fit:contain (no cover) para no croppear la S al rebajar el
     tamano del chip a 44px. */
  .site-nav .logo-s img { width: 100%; height: 100%; object-fit: contain; }
  .site-nav ul {
    display: flex; gap: 32px; list-style: none;
    font-size: 13px;
    letter-spacing: .01em;
  }
  .site-nav ul a {
    color: var(--ink); text-decoration: none;
    position: relative;
    padding-bottom: 3px;
    font-weight: 400;
  }
  .site-nav ul a::after {
    content: "";
    position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--terra);
    transition: right .25s ease;
  }
  .site-nav ul a:hover::after { right: 0; }

  .site-nav .cta {
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: .1em;
    padding: 12px 18px;
    background: var(--ink); color: var(--paper);
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .2s;
  }
  .site-nav .cta:hover { background: var(--terra); }
  .site-nav .cta .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--terra);
    box-shadow: 0 0 0 3px rgba(184,92,56,.25);
    animation: pulse 2s ease-in-out infinite;
  }

  /* Mobile nav toggle (hamburger) — visible solo en mobile via @media */
  .nav-toggle {
    display: none;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--ink-12);
    border-radius: 50%;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    color: var(--ink);
  }
  .nav-toggle span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transition: transform .25s ease, opacity .2s ease;
    transform-origin: center;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* Overlay del drawer mobile — sale del flow del header para cubrir todo */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(14,14,12,.4);
    z-index: 99;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  body.nav-open .nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  /* CTA-mobile dentro del drawer queda oculto en desktop (ya hay un .cta visible afuera) */
  .site-nav ul .nav-cta-mobile { display: none; }

  /* ═══════════════ HERO ═══════════════ */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: calc(100vh - 76px);
  }
  .hero-left {
    padding: 80px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background:
      radial-gradient(circle at 20% 90%, rgba(184,92,56,.06), transparent 50%),
      var(--paper);
  }
  .hero-eyebrow {
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--ink-70);
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 32px;
  }
  .hero-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--terra);
    box-shadow: 0 0 0 4px rgba(184,92,56,.15);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(184,92,56,.15); }
    50% { box-shadow: 0 0 0 8px rgba(184,92,56,.05); }
  }
  .hero h1 {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 320;
    font-size: clamp(72px, 9vw, 140px);
    line-height: .86;
    letter-spacing: -.035em;
    margin-bottom: 32px;
  }
  .hero h1 em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 320;
  }
  .hero-lede {
    font-family: var(--display);
    font-variation-settings: "opsz" 40, "wght" 360;
    font-size: 21px;
    line-height: 1.4;
    max-width: 440px;
    margin-bottom: 40px;
  }
  .hero-lede span { color: var(--terra); font-style: italic; }
  .hero-meta {
    display: flex; gap: 48px;
    flex-wrap: wrap;
  }
  .hero-meta dt {
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-50);
    margin-bottom: 6px;
  }
  .hero-meta dd {
    color: var(--ink); font-weight: 400;
    font-size: 13px;
    line-height: 1.3;
  }
  .hero-meta dd span.city { color: var(--ink-50); font-size: 12px; }

  .sched { font-family: var(--mono); font-size: 12px; line-height: 1.8; letter-spacing: .04em; }
  .sched .row { display: flex; justify-content: space-between; gap: 24px; }
  .sched .row .day { color: var(--ink-50); }
  .sched .row.closed { color: var(--ink-30); }

  .hero-right {
    position: relative;
    overflow: hidden;
    background: #0e0e0c;
  }
  .hero-right .ph {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: contrast(1.04) saturate(.95);
    transition: transform 8s ease;
  }
  .hero-right:hover .ph { transform: scale(1.03); }
  /* Fallback when no hero photo is configured: warm canvas background that lets
     the wheat decoration + caption read on light. The text overlay's color is
     kept (var(--paper) on white reads poorly), so we darken the overlay text
     conditionally with the .no-photo modifier. */
  .hero-right.no-photo {
    background:
      radial-gradient(circle at 70% 30%, rgba(184,92,56,.08), transparent 60%),
      var(--canvas);
  }
  .hero-right.no-photo::after { display: none; }
  .hero-right.no-photo .hero-overlay { color: var(--ink); }
  .hero-right.no-photo .hero-overlay.caption-br small { opacity: .6; }

  /* Event detail page: the customer's flyer is portrait and looks butchered
     when used as a full-cover hero photo. This modifier shows the entire flyer
     centered with paper background and a soft shadow — like a poster on a wall. */
  .hero-right.hero-right--flyer {
    background:
      radial-gradient(circle at 50% 0%, rgba(200,159,92,.18), transparent 65%),
      var(--canvas);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 56px;
  }
  .hero-right.hero-right--flyer::after { display: none; }
  .hero-right--flyer .flyer {
    max-width: 100%;
    max-height: calc(100vh - 180px);
    height: auto;
    object-fit: contain;
    box-shadow:
      0 1px 0 rgba(14,14,12,.04),
      0 18px 50px -12px rgba(14,14,12,.32);
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
  }
  .hero-right--flyer:hover .flyer { transform: translateY(-2px); }
  .hero-right::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, transparent 50%, rgba(14,14,12,.35) 100%),
      linear-gradient(90deg, rgba(14,14,12,.08) 0%, transparent 30%);
    pointer-events: none;
  }
  .hero-overlay {
    position: absolute;
    color: var(--paper);
    z-index: 2;
    pointer-events: none;
  }
  .hero-overlay.corner-tl {
    top: 28px; left: 28px;
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: .16em;
    opacity: .9;
  }
  .hero-overlay.corner-tl::before {
    content: ""; width: 24px; height: 1px; background: currentColor;
  }
  .hero-overlay.wheat-decor {
    bottom: 40px; right: 40px;
    width: 64px;
    opacity: .85;
  }
  .hero-overlay.caption-br {
    bottom: 36px; left: 36px;
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 400;
    font-style: italic;
    font-size: 17px;
    max-width: 240px;
    line-height: 1.3;
  }
  .hero-overlay.caption-br small {
    display: block;
    font-family: var(--mono); font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-style: normal;
    opacity: .7;
    margin-top: 8px;
  }

  /* ═══════════════ MARQUEE ═══════════════ */
  .strip {
    background: var(--ink); color: var(--paper);
    padding: 16px 0;
    overflow: hidden;
  }
  .strip-track {
    display: flex; gap: 40px;
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: .1em;
    white-space: nowrap;
    animation: marquee 40s linear infinite;
  }
  .strip-track span { display: inline-flex; align-items: center; gap: 40px; }
  .strip-track em { color: var(--terra); font-style: normal; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ═══════════════ EVENTO PROTAGÓNICO ═══════════════ */
  .event-hero {
    background: var(--ink);
    color: var(--paper);
    position: relative;
    overflow: hidden;
  }
  .event-hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 15% 30%, rgba(184,92,56,.22), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(200,159,92,.14), transparent 45%);
    pointer-events: none;
  }
  /* Double-line ornamental frame (fileteado style) */
  .event-hero-frame {
    position: relative;
    margin: 28px 28px 0;
    padding-top: 8px;
    border: 1px solid rgba(200,159,92,.35);
  }
  .event-hero-frame::before {
    content: "";
    position: absolute; inset: 6px;
    border: 1px solid rgba(200,159,92,.18);
    pointer-events: none;
  }
  .event-hero-frame .corner {
    position: absolute;
    width: 80px; height: 80px;
    color: var(--wheat);
    opacity: .55;
    pointer-events: none;
  }
  .event-hero-frame .corner.tl { top: -2px; left: -2px; }
  .event-hero-frame .corner.tr { top: -2px; right: -2px; transform: scaleX(-1); }
  .event-hero-frame .corner.bl { bottom: -2px; left: -2px; transform: scaleY(-1); }
  .event-hero-frame .corner.br { bottom: -2px; right: -2px; transform: scale(-1, -1); }

  .event-hero-strip {
    background: var(--terra);
    color: var(--paper);
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }
  .event-hero-strip .track {
    display: flex; gap: 48px;
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: .2em;
    white-space: nowrap;
    animation: marquee 35s linear infinite;
  }
  .event-hero-strip .track span { display: inline-flex; align-items: center; gap: 48px; }
  .event-hero-strip .track em { font-style: normal; opacity: .5; }

  .event-hero-main {
    padding: 72px 56px 48px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 72px;
    align-items: center;
    position: relative;
    z-index: 1;
    max-width: 1680px;
    margin: 0 auto;
  }
  .event-hero-left .label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .28em;
    color: rgba(245,240,230,.75);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .event-hero-left .label .flourish-mini {
    width: 60px; height: 12px;
    color: var(--wheat);
    opacity: .7;
  }
  .event-hero-left h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 300;
    font-size: clamp(80px, 13vw, 180px);
    line-height: .82;
    letter-spacing: -.045em;
    margin-bottom: 12px;
  }
  .event-hero-left h2 em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 300;
    color: var(--wheat);
  }
  .event-hero-left .fil-under-title {
    width: min(280px, 100%);
    height: 20px;
    color: var(--wheat);
    opacity: .6;
    margin-bottom: 32px;
    display: block;
  }
  .event-hero-date {
    display: flex;
    gap: 28px;
    align-items: baseline;
    padding: 20px 0;
    border-top: 1px solid rgba(245,240,230,.2);
    border-bottom: 1px solid rgba(245,240,230,.2);
    margin-bottom: 32px;
    position: relative;
  }
  .event-hero-date::before,
  .event-hero-date::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: rgba(200,159,92,.3);
  }
  .event-hero-date::before { top: 4px; }
  .event-hero-date::after { bottom: 4px; }
  .event-hero-date .big {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 340;
    font-size: 76px;
    line-height: .9;
    letter-spacing: -.03em;
  }
  .event-hero-date .big em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 340;
    color: var(--wheat);
  }
  .event-hero-date .small {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    line-height: 1.7;
    color: rgba(245,240,230,.75);
  }
  .event-hero-date .small strong {
    color: var(--paper);
    display: block;
    font-size: 14px;
    letter-spacing: .08em;
    font-weight: 500;
    margin-top: 4px;
  }
  .event-hero-cta {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
  }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--ink); color: var(--paper);
    font-family: var(--sans); font-size: 14px;
    padding: 16px 24px;
    border-radius: 999px;
    text-decoration: none;
    letter-spacing: .02em;
    transition: all .25s ease;
  }
  .btn-primary:hover { background: var(--terra); }
  .btn-primary .arrow { transition: transform .25s ease; }
  .btn-primary:hover .arrow { transform: translateX(4px); }
  .event-hero-cta .btn-primary {
    background: var(--wheat);
    color: var(--ink);
    padding: 20px 32px;
    font-size: 15px;
    font-weight: 500;
  }
  .event-hero-cta .btn-primary:hover { background: var(--paper); color: var(--ink); }
  .event-hero-cta .ghost {
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--paper);
    text-decoration: none;
    opacity: .7;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(245,240,230,.3);
    transition: opacity .2s, border-color .2s;
  }
  .event-hero-cta .ghost:hover { opacity: 1; border-bottom-color: var(--paper); }

  .event-hero-right {
    position: relative;
    aspect-ratio: 1/1;
    display: flex; align-items: center; justify-content: center;
  }
  .event-rays {
    position: absolute;
    inset: -30px;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    color: var(--wheat);
    pointer-events: none;
    animation: slow-rotate 120s linear infinite;
  }
  .event-roses {
    position: absolute;
    width: 50px; height: 50px;
    color: var(--wheat);
    opacity: .7;
    pointer-events: none;
  }
  .event-roses.top-left { top: -10px; left: -10px; transform: rotate(-20deg); }
  .event-roses.bottom-right { bottom: -10px; right: -10px; transform: rotate(20deg); }
  .event-plate {
    width: 84%;
    aspect-ratio: 1;
    background: var(--paper);
    border-radius: 50%;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1px rgba(245,240,230,.3), 0 0 0 6px rgba(200,159,92,.12);
    z-index: 2;
  }
  .event-plate::before {
    content: "";
    position: absolute; inset: 18px;
    border-radius: 50%;
    border: 1px solid rgba(14,14,12,.15);
  }
  .event-plate::after {
    content: "";
    position: absolute; inset: -38px;
    border-radius: 50%;
    border: 1px dashed rgba(245,240,230,.25);
  }
  @keyframes slow-rotate { to { transform: rotate(360deg); } }
  .event-plate svg.main-ill { width: 80%; height: 80%; color: var(--ink); }
  .event-tag {
    position: absolute;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    white-space: nowrap;
    z-index: 3;
  }
  .event-tag.tag-1 { top: 8%; right: -8%; }
  .event-tag.tag-2 { bottom: 14%; left: -12%; }
  .event-tag.tag-3 { bottom: -2%; right: 6%; background: var(--terra); color: var(--paper); }

  .event-hero-menu {
    padding: 32px 56px 80px;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(245,240,230,.12);
    max-width: 1680px;
    margin: 0 auto;
  }
  .event-menu-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    margin-top: 24px;
  }
  .event-menu-heading h3 {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgba(245,240,230,.75);
    white-space: nowrap;
  }
  .event-menu-heading svg {
    flex: 1;
    height: 14px;
    color: var(--wheat);
    opacity: .5;
  }
  .event-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .event-menu-item {
    padding: 22px 20px;
    border: 1px solid rgba(245,240,230,.2);
    border-radius: 8px;
    background: rgba(245,240,230,.04);
    position: relative;
  }
  .event-menu-item h4 {
    font-family: var(--display);
    font-variation-settings: "opsz" 32, "wght" 400;
    font-size: 19px;
    line-height: 1.15;
    margin-bottom: 4px;
    margin-top: 8px;
    letter-spacing: -.01em;
  }
  .event-menu-item p {
    font-size: 11.5px;
    color: rgba(245,240,230,.6);
    line-height: 1.4;
    font-style: italic;
    min-height: 32px;
  }
  .event-menu-item .price {
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--wheat);
  }

  /* Stock bar (shared) */
  .stock-bar {
    --stock: 0.85;
    width: 64px;
    height: 3px;
    background: var(--ink-12);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    display: inline-block;
  }
  .stock-bar::before {
    content: "";
    position: absolute; inset: 0;
    width: 100%;
    background: var(--ink);
    transform: scaleX(var(--stock));
    transform-origin: left;
    border-radius: 2px;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
  }
  .stock-bar[data-level="low"]::before { background: var(--terra); }
  .stock-bar:not(.animated)::before { transform: scaleX(0); }
  .event-menu-item .stock-bar {
    margin-top: 0; margin-bottom: 12px;
    background: rgba(245,240,230,.18);
  }
  .event-menu-item .stock-bar::before { background: var(--wheat); }
  .event-menu-item .stock-bar[data-level="low"]::before { background: var(--terra); }

  /* ═══════════════ MOSTRADOR ═══════════════ */
  .mostrador {
    padding: 96px 56px 80px;
    background: var(--paper);
    max-width: 1680px;
    margin: 0 auto;
  }
  .mostrador-head {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: end;
    margin-bottom: 20px;
  }
  .mostrador-head .kicker {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ink-50);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px;
  }
  .mostrador-head .kicker::before { content: "◆"; color: var(--terra); }
  .mostrador-head h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 340;
    font-size: clamp(48px, 7vw, 96px);
    line-height: .88;
    letter-spacing: -.035em;
  }
  .mostrador-head h2 em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 340;
    color: var(--terra);
  }
  .mostrador-head .intro {
    font-family: var(--display);
    font-variation-settings: "opsz" 32, "wght" 360;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-70);
    padding-bottom: 12px;
  }
  .mostrador-head .intro em { color: var(--terra); font-style: italic; }

  .mostrador-today {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 44px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-50);
    flex-wrap: wrap;
    gap: 16px;
  }
  .mostrador-today .live {
    display: flex; align-items: center; gap: 10px;
    color: var(--olive);
  }
  .mostrador-today .live::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--olive);
    box-shadow: 0 0 0 3px rgba(95,107,59,.2);
  }
  .mostrador-today .legend {
    display: flex; gap: 24px; flex-wrap: wrap;
  }
  .mostrador-today .legend span { display: inline-flex; align-items: center; gap: 6px; }
  .mostrador-today .legend i {
    width: 6px; height: 6px; border-radius: 50%;
    display: inline-block; font-style: normal;
  }
  .mostrador-today .legend .hoy { background: var(--olive); }
  .mostrador-today .legend .agot-hoy { background: #D4A574; }
  .mostrador-today .legend .enc { background: var(--terra); }
  .mostrador-today .legend .off { background: var(--ink-30); }

  /* Secciones de categoría apiladas full-width; cada una con su propia grilla
     auto-fill balanceada (adiós a las columnas raquíticas del grid 2-col). */
  .mostrador-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .mcat { scroll-margin-top: 80px; }
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    margin-top: 14px;
  }
  .cat-head {
    display: flex; align-items: baseline; justify-content: space-between;
    border-bottom: 1.5px solid var(--ink);
    padding-bottom: 12px;
  }
  .cat-head h3 {
    font-family: var(--display);
    font-variation-settings: "opsz" 72, "wght" 380;
    font-size: 30px;
    letter-spacing: -.01em;
  }
  .cat-head h3 em {
    font-style: italic;
    font-variation-settings: "opsz" 72, "wght" 380;
    color: var(--terra);
  }
  .cat-head .count {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-50);
  }
  /* Mostrador "vidriera": tarjeta bordeada con foto 66×66 a la izquierda,
     info en el medio, precio + quick-add (o chip de estado) a la derecha.
     La card entera es clickeable (abre el lightbox); el botón + navega. */
  .prod-row {
    display: grid;
    grid-template-columns: 66px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
  }
  /* El display:grid de arriba pisa el display:none implícito del atributo
     [hidden], así que el toggle "Solo disponible hoy" (que hace card.hidden=true
     por card en site.js) no ocultaba nada. Forzamos none. Mismo gotcha que
     .prod-modal-primary[hidden] más abajo. */
  .prod-row[hidden] { display: none !important; }
  .prod-row:hover {
    border-color: var(--ink-30);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -14px rgba(14,14,12,.4);
  }
  .prod-row.off { opacity: .55; }
  .prod-row.off:hover { opacity: .72; }
  .prod-ill {
    width: 66px; height: 66px;
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
  }
  .prod-ill svg { width: 50%; height: auto; opacity: .55; }
  .prod-ill img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .prod-row.off .prod-ill { opacity: .6; }
  .prod-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .prod-info h4 {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 400;
    font-size: 18px; line-height: 1.1; margin: 0;
  }
  .prod-row.off h4 {
    text-decoration: line-through;
    text-decoration-thickness: .5px;
    text-decoration-color: var(--ink-50);
  }
  .prod-info p {
    font-size: 12px; color: var(--ink-50);
    line-height: 1.3; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Disponibilidad inline (reemplaza la barra de stock) */
  .prod-avail {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
    color: var(--ink-50); margin-top: 5px;
  }
  .prod-avail i { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); display: inline-block; flex: 0 0 auto; }
  .prod-avail.low { color: var(--terra); }
  .prod-avail.low i { background: var(--terra); }
  .prod-state {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    text-align: right;
  }
  .prod-state .meta-price {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 420;
    font-size: 17px; color: var(--ink);
  }
  .prod-add {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--terra); color: #fff;
    display: grid; place-items: center;
    font-size: 22px; line-height: 1; text-decoration: none;
    transition: background .15s, transform .15s;
  }
  .prod-add:hover { background: #a04e2f; transform: scale(1.06); }
  .prod-state .chip {
    display: inline-block;
    padding: 4px 9px; border-radius: 4px;
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: .14em;
    font-weight: 500; white-space: nowrap;
  }
  .chip.hoy { background: var(--olive); color: var(--paper); }
  /* "Hoy se agotó" — el producto SE OFRECÍA hoy pero ya no queda stock; el
     cliente puede encargarlo para 48hs. Color tan/ámbar para señalizar
     "valido pero con caveat", entre el verde HOY y el gris OFF. */
  .chip.agot-hoy { background: #D4A574; color: var(--paper); }
  .chip.enc { background: var(--terra); color: var(--paper); }
  .chip.fds { background: var(--wheat); color: var(--ink); }
  .chip.off {
    background: transparent;
    color: var(--ink-50);
    border: 1px solid var(--ink-30);
  }

  .mostrador-foot {
    margin-top: 56px;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
  }
  .mostrador-foot p {
    font-family: var(--display);
    font-variation-settings: "opsz" 32, "wght" 360;
    font-size: 19px;
    line-height: 1.4;
    font-style: italic;
  }
  .mostrador-foot p em { color: var(--terra); font-style: italic; }
  .mostrador-foot-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  @media (max-width: 720px) {
    .mostrador-foot { grid-template-columns: 1fr; gap: 16px; }
    .mostrador-foot-actions { flex-direction: column; }
  }

  /* ═══════════════ INFO BAND ═══════════════ */
  .info-band {
    display: grid; grid-template-columns: repeat(3, 1fr);
    padding: 48px 56px;
    gap: 32px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    max-width: 1680px;
    margin: 0 auto;
  }
  .info-item h5 {
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--ink-50);
    margin-bottom: 12px;
  }
  .info-item p {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 360;
    font-size: 17px;
    line-height: 1.3;
  }
  .info-item a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--ink-30);
    transition: border-color .2s;
  }
  .info-item a:hover { border-bottom-color: var(--terra); color: var(--terra); }

  /* ═══════════════ FOOTER ═══════════════ */
  .site-footer {
    background: var(--ink);
    color: var(--paper);
    padding: 64px 56px 40px;
  }
  .site-footer-inner {
    max-width: 1680px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 56px;
    align-items: start;
  }
  .site-footer h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 340;
    font-size: 56px;
    line-height: .9;
    letter-spacing: -.03em;
    margin-bottom: 16px;
  }
  .site-footer h2 em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 340;
    color: var(--wheat);
  }
  .site-footer p {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(245,240,230,.75);
    max-width: 320px;
  }
  .site-footer h6 {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgba(245,240,230,.5);
    margin-bottom: 16px;
    font-weight: 500;
  }
  .site-footer ul { list-style: none; }
  .site-footer ul li { margin-bottom: 10px; }
  .site-footer ul a {
    color: var(--paper);
    text-decoration: none;
    font-size: 14px;
    transition: color .2s;
  }
  .site-footer ul a:hover { color: var(--wheat); }
  .site-footer-bottom {
    max-width: 1680px;
    margin: 64px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(245,240,230,.1);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245,240,230,.4);
  }

  /* ═══════════════ CHECKOUT DRAWER ═══════════════ */
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14,14,12,.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .drawer-backdrop.open {
    opacity: 1;
    visibility: visible;
  }
  .drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(960px, 100%);
    background: var(--paper);
    z-index: 201;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto;
    box-shadow: -20px 0 60px -20px rgba(14,14,12,.3);
  }
  .drawer.open { transform: translateX(0); }
  .drawer-head {
    position: sticky;
    top: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    padding: 20px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
  }
  .drawer-head h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 48, "wght" 400;
    font-size: 22px;
    letter-spacing: -.01em;
  }
  .drawer-head h2 em {
    font-style: italic;
    color: var(--terra);
  }
  .drawer-close {
    width: 40px; height: 40px;
    border: 1px solid var(--ink-12);
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    transition: background .2s, border-color .2s;
  }
  .drawer-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  .drawer-summary {
    padding: 32px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
  }
  .drawer-summary .date-box {
    background: var(--paper);
    border: 1.5px solid var(--ink);
    padding: 18px 22px;
    text-align: center;
    min-width: 120px;
  }
  .drawer-summary .date-box .day {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--terra);
  }
  .drawer-summary .date-box .num {
    font-family: var(--display);
    font-variation-settings: "opsz" 72, "wght" 360;
    font-size: 48px;
    line-height: 1;
    margin: 4px 0;
  }
  .drawer-summary .date-box .month {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink-70);
  }
  .drawer-summary .title {
    font-family: var(--display);
    font-variation-settings: "opsz" 72, "wght" 360;
    font-size: 30px;
    line-height: .95;
    letter-spacing: -.02em;
    margin-bottom: 8px;
  }
  .drawer-summary .title em {
    font-style: italic;
    color: var(--terra);
  }
  .drawer-summary .details {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-70);
    line-height: 1.7;
  }

  .drawer-menu { padding: 32px; }
  .drawer-menu h3 {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-70);
    margin-bottom: 24px;
  }

  .item {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    transition: opacity .3s;
  }
  .item.empty { opacity: .4; }
  .item-ill {
    width: 44px; height: 44px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center; justify-content: center;
    background: var(--surface);
  }
  .item-ill svg { width: 68%; height: 68%; color: var(--ink); }
  .item h4 {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 380;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 2px;
  }
  .item p {
    font-size: 11.5px; color: var(--ink-50); font-style: italic;
    line-height: 1.3;
  }
  .stepper {
    display: flex; align-items: center;
    border: 1px solid var(--ink);
    border-radius: 999px;
    overflow: hidden;
  }
  .stepper button {
    width: 28px; height: 28px;
    font-family: var(--mono); font-size: 14px;
    color: var(--ink);
    transition: background .15s, color .15s;
    user-select: none;
  }
  .stepper button:hover { background: var(--ink); color: var(--paper); }
  .stepper button:active { background: var(--ink) !important; color: var(--paper) !important; }
  .stepper .qty {
    width: 32px; text-align: center;
    font-family: var(--mono); font-size: 12px;
    font-weight: 500;
    display: inline-block;
  }
  .item .price {
    font-family: var(--mono); font-size: 12.5px;
    text-align: right;
    min-width: 70px;
    line-height: 1.2;
  }

  .drawer-totals {
    padding: 32px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
  }
  .total-row {
    display: flex; justify-content: space-between;
    padding: 6px 0;
    font-family: var(--mono); font-size: 13px;
    color: var(--ink-70);
  }
  .total-row.grand {
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--ink);
    font-size: 15px;
  }
  .total-row.grand strong {
    font-family: var(--display);
    font-variation-settings: "opsz" 48, "wght" 400;
    font-size: 26px;
  }
  .pay-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 20px 0;
  }
  .pay-method {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    background: var(--paper);
    position: relative;
    transition: border-color .2s;
  }
  .pay-method.selected { border-color: var(--ink); }
  .pay-method .radio {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .pay-method.selected .radio::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--terra);
  }
  .pay-method h5 {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 380;
    font-size: 14px;
    margin-bottom: 2px;
  }
  .pay-method p { font-size: 11px; color: var(--ink-50); }
  .pay-method .tag {
    margin-left: auto;
    font-family: var(--mono); font-size: 10px;
    background: var(--olive); color: var(--paper);
    padding: 3px 8px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: .08em;
  }
  .fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
  }
  .drawer-form-hint {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--ink-50);
    margin: 4px 0 18px;
    padding-left: 2px;
  }
  .field label {
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-50);
    display: block; margin-bottom: 5px;
  }
  .field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    background: var(--paper);
    font-family: var(--sans); font-size: 13px;
    border-radius: 6px;
    color: var(--ink);
  }
  .field input:focus { outline: none; border-color: var(--ink); }
  .field input.invalid { border-color: var(--terra); }
  .drawer-totals .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 18px;
    font-size: 15px;
  }
  .drawer-totals .btn-primary[disabled] {
    opacity: .5;
    cursor: not-allowed;
  }
  .policy {
    font-size: 11px;
    color: var(--ink-50);
    font-style: italic;
    margin-top: 14px;
    line-height: 1.5;
    text-align: center;
  }

  .prod-row[data-orderable] { cursor: pointer; }
  .prod-row[data-orderable]:hover .prod-info h4 { color: var(--terra); }

  /* ══════════════════════════════════════════════════════════════════════
     Lightbox de detalle de producto (_ProductoModal).
     Foto grande a la izquierda, info y acción a la derecha. Mobile colapsa
     a una sola columna con la foto arriba.
     ══════════════════════════════════════════════════════════════════════ */

  .prod-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14,14,12,.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 210;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .prod-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
  }
  .prod-modal {
    background: var(--paper);
    border: 1px solid var(--border);
    max-width: 960px;
    width: 100%;
    max-height: calc(100vh - 48px);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    transform: scale(.96);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 30px 80px -20px rgba(14,14,12,.5);
    display: flex;
    flex-direction: column;
  }
  .prod-modal-backdrop.open .prod-modal { transform: scale(1); }

  .prod-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(14,14,12,.18);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    cursor: pointer;
    z-index: 2;
    transition: background .15s, border-color .15s, transform .15s;
  }
  .prod-modal-close:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    transform: scale(1.05);
  }

  .prod-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0;
    overflow-y: auto;
  }

  /* ── Columna media (foto principal + galería) ────────────────────── */
  .prod-modal-media {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .prod-modal-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
    background: var(--surface);
  }
  .prod-modal-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .prod-modal-main .prod-modal-icon {
    width: 38%;
    max-width: 180px;
    height: auto;
    color: var(--ink-50);
    opacity: .5;
  }
  .prod-modal-thumbs {
    list-style: none;
    margin: 0;
    padding: 12px 16px 16px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    border-top: 1px solid var(--border);
    background: var(--paper);
  }
  .prod-modal-thumbs li { flex: 0 0 auto; }
  .prod-modal-thumb {
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
  }
  .prod-modal-thumb:hover { border-color: var(--terra); transform: scale(1.04); }
  .prod-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .prod-modal-thumb--active { border-color: var(--terra); }

  /* ── Columna info ─────────────────────────────────────────────────── */
  .prod-modal-info {
    padding: 28px 30px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
  }
  .prod-modal-info-head { display: flex; flex-direction: column; gap: 8px; }
  .prod-modal-chip {
    align-self: flex-start;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    background: var(--hoy, #d3e8d6);
    color: var(--ink);
  }
  .prod-modal-chip[data-state="enc"] { background: var(--enc, #f3e3c6); }
  .prod-modal-chip[data-state="off"] { background: var(--off, #e8d6d6); color: var(--ink-50); }
  .prod-modal-chip[data-state="lowstock"] { background: var(--enc, #f3e3c6); }
  .prod-modal-chip[data-state="agot-hoy"] {
    background: #E8C879;
    color: var(--ink);
  }
  .prod-modal-title {
    font-family: var(--display);
    font-variation-settings: "opsz" 48, "wght" 380;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.01em;
  }
  .prod-modal-desc {
    font-size: 14px;
    color: var(--ink-50);
    font-style: italic;
    line-height: 1.45;
  }
  .prod-modal-price-row {
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    padding: 14px 0;
  }
  .prod-modal-price {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 420;
    font-size: 24px;
    color: var(--ink);
  }
  .prod-modal-qty { display: flex; flex-direction: column; gap: 8px; }
  /* El atributo [hidden] del HTML emite display:none, pero un selector con
     display: inline-flex / flex en .prod-modal-primary / .prod-modal-qty
     gana en specificidad y rompe el efecto. Forzamos none cuando hidden
     está presente. Sin esto, el lightbox mostraba simultáneamente el
     botón "Ver en el pedido" + "Coordinar por WhatsApp" + qty stepper. */
  .prod-modal-primary[hidden],
  .prod-modal-qty[hidden] { display: none !important; }
  .prod-modal-label {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-50);
  }
  .prod-modal-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ink);
    border-radius: 8px;
    overflow: hidden;
    align-self: flex-start;
  }
  .prod-modal-stepper-btn {
    width: 40px;
    height: 40px;
    background: var(--paper);
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--ink);
    transition: background .15s;
  }
  .prod-modal-stepper-btn:hover { background: var(--surface); }
  .prod-modal-stepper-btn:disabled { opacity: .35; cursor: not-allowed; background: var(--paper); }
  .prod-modal-stepper-val {
    min-width: 44px;
    text-align: center;
    font-family: var(--mono);
    font-size: 15px;
    border-left: 1px solid var(--ink);
    border-right: 1px solid var(--ink);
    line-height: 40px;
  }
  .prod-modal-qty-hint { font-size: 12px; color: var(--ink-50); font-style: italic; }
  .prod-modal-note {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--terra);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--ink-70, var(--ink));
    line-height: 1.45;
  }
  .prod-modal-actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
  }
  .prod-modal-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .15s;
  }
  .prod-modal-primary:hover { background: var(--terra); transform: translateY(-1px); }
  .prod-modal-primary--wa { background: #25D366; }
  .prod-modal-primary--wa:hover { background: #1ea356; }
  .prod-modal-primary-icon { width: 18px; height: 18px; }

  /* ── Responsive: mobile colapsa a 1 columna ───────────────────────── */
  @media (max-width: 760px) {
    .prod-modal-backdrop { padding: 0; align-items: stretch; }
    .prod-modal {
      max-height: 100vh;
      border-radius: 0;
      max-width: 100%;
    }
    .prod-modal-grid { grid-template-columns: 1fr; }
    .prod-modal-main { aspect-ratio: 4 / 3; }
    .prod-modal-info { padding: 22px 22px 24px; gap: 14px; }
    .prod-modal-title { font-size: 24px; }
    .prod-modal-close {
      top: 12px; right: 12px;
      background: rgba(255,255,255,.95);
    }
  }

  #toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(180%);
    background: var(--ink);
    color: var(--paper);
    padding: 14px 22px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 13px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 300;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
    max-width: calc(100vw - 32px);
    text-align: center;
    /* When the toast has no text, the empty pill is small enough that
       translateY(180%) does not push it fully off-screen and a black sliver
       peeks up from the bottom. opacity + visibility hide the empty state
       reliably without affecting the slide-in animation when shown. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  #toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* ═══════════════ RESPONSIVE ═══════════════ */
  @media (max-width: 1200px) {
    .event-menu-grid { grid-template-columns: repeat(2, 1fr); }
    .info-band { grid-template-columns: repeat(2, 1fr); }
    .site-footer-inner { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 960px) {
    .site-nav { padding: 12px 20px; gap: 12px; }

    /* Drawer mobile REMOVIDO (2026-05-18). El hamburger se abria solo durante
       scroll en algunos devices Android — touch accidental en el boton chico
       de 44px mientras el dedo recorria la pantalla. El bug se manifestaba
       como un area paper vacia ocupando el lado derecho del viewport mientras
       el contenido principal quedaba cortado a la izquierda.
       Solucion: header mobile minimalista — solo logo + CTA inline visible.
       Los links del menu (Panaderia/Evento) son anchors al home accessibles
       por scroll vertical normal, no necesitan duplicacion en nav. Si en el
       futuro se justifica un menu mobile, considerar bottom-sheet (mas ergonomico
       que side-drawer en mobile) o un button-group inline. */
    .nav-toggle { display: none; }
    .site-nav ul { display: none; }
    .nav-overlay { display: none; }

    /* CTA inline del header (Reservar/Volver) — visible en mobile, mas chico que
       desktop. Es la unica navegacion del header en mobile. */
    .site-nav > .cta {
      display: inline-flex;
      padding: 10px 18px;
      font-size: 11px;
      margin-left: auto;
    }

    /* Safety net: si por alguna razon body queda con la clase nav-open
       (sesion vieja del browser que tenia el drawer abierto antes del deploy,
       cache stale del JS, etc) no debe lockear el scroll. */
    body.nav-open { overflow: visible; position: static; top: auto; }

    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-left { padding: 48px 24px; }
    .hero-right { min-height: 420px; }
    .hero-meta { gap: 24px; }
    .event-hero-main { grid-template-columns: 1fr; gap: 40px; padding: 40px 24px; }
    .event-hero-left h2 { font-size: 72px; }
    .event-hero-date { flex-direction: column; gap: 16px; }
    .event-hero-date .big { font-size: 44px; }
    .event-hero-menu { padding: 32px 24px 56px; }
    .event-menu-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .mostrador { padding: 56px 24px; }
    .mostrador-head { grid-template-columns: 1fr; gap: 24px; }
    .mostrador-today { flex-direction: column; align-items: flex-start; padding: 14px 0 28px; }
    .mostrador-grid { grid-template-columns: 1fr; gap: 44px; }
    .mostrador-foot { grid-template-columns: 1fr; gap: 18px; text-align: center; }
    .info-band { grid-template-columns: 1fr 1fr; padding: 32px 24px; }
    .site-footer { padding: 48px 24px 32px; }
    .site-footer-inner { grid-template-columns: 1fr; gap: 32px; }
    .drawer-summary { grid-template-columns: 1fr; text-align: center; }
    .drawer-summary .date-box { justify-self: center; }
    .fields-row { grid-template-columns: 1fr; }
    .pay-methods { grid-template-columns: 1fr; }
    .item { grid-template-columns: 40px 1fr auto; }
    .item .price { grid-column: 2 / -1; text-align: left; padding-top: 4px; }
    .item .stepper { grid-column: 3; grid-row: 1; }
  }

  /* ═══ Event detail page (Fase 6) ═══ */
  .hero-cta { margin-top: 28px; }

  .event-detail-menu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px 80px;
  }

  .event-menu-heading {
    text-align: center;
    margin-bottom: 36px;
  }

  .event-menu-heading h2 {
    font-family: var(--display);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 10px;
  }

  .event-menu-sub {
    color: var(--ink-70);
    font-size: 14px;
  }

  .event-menu-empty {
    background: var(--surface);
    border: 1px dashed var(--border);
    color: var(--ink-50);
    padding: 40px;
    text-align: center;
    border-radius: 12px;
    max-width: 600px;
    margin: 0 auto;
  }

  .event-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
  }

  .event-detail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
  }

  .event-detail-card h3 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.15;
  }

  .event-detail-card p {
    color: var(--ink-70);
    font-size: 13px;
    line-height: 1.5;
  }

  .event-detail-price {
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .event-detail-cupo .tag {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(200, 159, 92, .18);
    border: 1px solid rgba(200, 159, 92, .45);
    color: #6b4d1e;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
  }

  .event-detail-cupo .tag--agotado {
    background: rgba(184, 92, 56, .15);
    border-color: rgba(184, 92, 56, .4);
    color: var(--terra);
  }

  .event-detail-card--agotado {
    opacity: .6;
  }

  .event-detail-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px;
    background: var(--paper);
    width: fit-content;
    /* Push the stepper to the bottom of the flex column so cards with longer
       titles still line up the controls horizontally across the row. */
    margin-top: auto;
  }

  .event-detail-stepper button {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
  }

  .event-detail-stepper button:disabled {
    opacity: .3;
    cursor: not-allowed;
  }

  .event-detail-stepper button:hover:not(:disabled) {
    background: var(--ink-06);
  }

  .event-detail-stepper .qty {
    min-width: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  .event-detail-cta {
    text-align: center;
  }

  /* ═══ Reserva drawer extras (Fase 6) ═══ */
  .drawer-empty {
    color: var(--ink-50);
    font-size: 14px;
    padding: 16px 0;
    text-align: center;
  }

  .drawer-form-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 10px;
  }

  .drawer-form-error[hidden] {
    display: none;
  }

  .drawer input.invalid {
    border-color: var(--terra) !important;
    background: rgba(184, 92, 56, .08);
  }

  /* ═══ Reserva gracias page (Fase 6) ═══ */
  .gracias-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 24px 80px;
  }

  .gracias-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 44px 40px;
  }

  .gracias-eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(95, 107, 59, .15);
    border: 1px solid rgba(95, 107, 59, .4);
    color: var(--olive);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 16px;
  }

  .gracias-eyebrow--warn {
    background: rgba(184, 92, 56, .15);
    border-color: rgba(184, 92, 56, .45);
    color: var(--terra);
  }

  .gracias-card h1 {
    font-family: var(--display);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 12px;
  }

  .gracias-lede {
    color: var(--ink-70);
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 28px;
  }

  .gracias-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
  }

  .gracias-meta dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 4px;
  }

  .gracias-meta dd {
    font-size: 14px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .gracias-meta code {
    font-family: var(--mono);
    font-size: 12px;
    background: var(--paper);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    word-break: break-all;
  }

  .gracias-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
  }

  .gracias-estado--pendiente {
    background: rgba(200, 159, 92, .2);
    color: #6b4d1e;
  }

  .gracias-estado--confirmada {
    background: rgba(95, 107, 59, .2);
    color: var(--olive);
  }

  .gracias-estado--cancelada {
    background: rgba(184, 92, 56, .18);
    color: var(--terra);
  }

  .gracias-items h2 {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 12px;
  }

  .gracias-items ul {
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
  }

  .gracias-items li {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
  }

  .gracias-items li:last-child {
    border-bottom: none;
  }

  .gracias-items .item-qty {
    color: var(--ink-50);
    font-variant-numeric: tabular-nums;
  }

  .gracias-items .item-price {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .gracias-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    font-size: 16px;
    margin-top: 4px;
  }

  .gracias-total strong {
    font-size: 22px;
    font-family: var(--display);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  .gracias-actions {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* Botones del comprobante público (encargo / reserva). Mantienen el lenguaje
     visual del CTA del navbar pero más livianos. */
  .gracias-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
    cursor: pointer;
    white-space: nowrap;
  }

  .gracias-btn--primary {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .gracias-btn--primary:hover { background: var(--terra); border-color: var(--terra); }

  .gracias-btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink-12, rgba(14, 14, 12, .12));
  }
  .gracias-btn--ghost:hover {
    border-color: var(--ink);
    background: rgba(14, 14, 12, .04);
  }

  @media (max-width: 480px) {
    .gracias-actions { flex-direction: column; align-items: stretch; }
    .gracias-btn { width: 100%; }
  }

  /* CTA prominente de WhatsApp en la gracias page cuando el pedido está en
     estado Pendiente sin email — es el canal por el que el cliente cierra
     la confirmación con el panadero. Verde WhatsApp, ancho completo, lift
     visual marcado para que sea la siguiente acción obvia. */
  .gracias-wa-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    margin: 20px 0 4px;
    border-radius: 14px;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .35);
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
  }
  .gracias-wa-cta:hover {
    background: #1ea356;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(37, 211, 102, .45);
  }
  .gracias-wa-cta svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  /* ═══ Reserva gracias — pagar con MP (Fase 7) ═══ */
  .gracias-flash {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 20px;
    border: 1px solid transparent;
  }

  .gracias-flash--ok {
    background: rgba(95, 107, 59, .12);
    border-color: rgba(95, 107, 59, .4);
    color: var(--olive);
  }

  .gracias-flash--error {
    background: rgba(184, 92, 56, .12);
    border-color: rgba(184, 92, 56, .4);
    color: var(--terra);
  }

  .gracias-pagar {
    margin-top: 24px;
    padding: 18px 20px;
    background: rgba(95, 107, 59, .08);
    border: 1px solid rgba(95, 107, 59, .25);
    border-radius: 12px;
    text-align: center;
  }

  .gracias-pagar .btn-primary {
    font-size: 15px;
    padding: 12px 22px;
  }

  .gracias-pagar-hint {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: var(--ink-50);
  }

  .gracias-pagar-error {
    margin: 10px 0 0 0;
    font-size: 13px;
    color: var(--terra);
  }

  .gracias-pagar-error[hidden] {
    display: none;
  }

  .gracias-transfer {
    margin-top: 24px;
    padding: 16px 18px;
    background: var(--paper);
    border: 1px dashed var(--border);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-70);
  }

  .gracias-transfer p {
    margin: 0 0 6px 0;
  }

  .gracias-transfer p:last-child {
    margin-bottom: 0;
  }

  .gracias-transfer-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--ink);
  }

  .gracias-transfer-lede {
    color: var(--ink-70);
    margin-bottom: 12px;
  }

  .gracias-transfer-fields {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 6px 14px;
    margin: 8px 0 12px 0;
  }

  .gracias-transfer-fields div {
    display: contents;
  }

  .gracias-transfer-fields dt {
    color: var(--ink-50);
    font-size: 13px;
    font-weight: 600;
  }

  .gracias-transfer-fields dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .gracias-transfer-fields code {
    background: var(--surface);
    padding: 3px 8px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", monospace;
    font-size: 13px;
    color: var(--ink);
    word-break: break-all;
  }

  .gracias-copy {
    appearance: none;
    border: 1px solid var(--ink-12);
    background: var(--surface);
    color: var(--ink-70);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 80ms ease-in-out, color 80ms ease-in-out;
  }

  .gracias-copy:hover {
    background: var(--paper);
    color: var(--ink);
  }

  .gracias-copy[data-state="copied"] {
    background: #166534;
    color: #f9fafb;
    border-color: #166534;
  }

  .gracias-copy[data-state="copied"]::after {
    content: " ✓";
  }

  .gracias-transfer-extra {
    margin: 8px 0 12px 0;
    padding: 10px 12px;
    background: var(--surface);
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-70);
  }

  .gracias-transfer-hint {
    color: var(--ink-50);
    font-size: 13px;
    margin-top: 8px;
  }

  .gracias-transfer--warn {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #78350f;
  }
  /* ═══ Pedido público — patrón POS (Fase 12.5 rediseño) ═══════════════════
     Lista lineal con counter +/- inline, sidebar sticky con CTA + cart.
     Mismo patrón que el admin (.pdadmin-*) pero con la paleta del sitio
     público y sin .pd-* prefix para mantener separación.
     ════════════════════════════════════════════════════════════════════ */

  .ppos-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 20px 96px;
  }

  .ppos-hero { margin-bottom: 28px; max-width: 720px; }

  .ppos-eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(184, 92, 56, .12);
    border: 1px solid rgba(184, 92, 56, .35);
    color: var(--terra);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 14px;
  }

  .ppos-title {
    font-family: var(--display);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 8px 0;
    color: var(--ink);
  }

  .ppos-lede {
    color: var(--ink-70);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    max-width: 56ch;
  }

  /* Layout 2 columnas: catálogo + cliente a la izquierda, sticky CTA a la derecha. */
  .ppos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
  }

  @media (max-width: 900px) {
    .ppos-layout {
      grid-template-columns: 1fr;
    }
  }

  .ppos-main-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .ppos-form-error {
    background: rgba(184, 92, 56, .10);
    border: 1px solid rgba(184, 92, 56, .45);
    border-left: 4px solid var(--terra);
    color: var(--terra);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
  }

  /* Section cards */
  .ppos-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 24px;
  }

  @media (max-width: 560px) {
    .ppos-section { padding: 18px 16px; border-radius: 12px; }
  }

  .ppos-section-title {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 16px 0;
    line-height: 1.2;
  }

  /* Section head: title + search bar en la misma fila (catálogo) */
  .ppos-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }

  .ppos-section-head .ppos-section-title {
    margin: 0;
    flex: 0 0 auto;
  }

  .ppos-search {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 360px;
  }

  .ppos-search input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 32px 9px 32px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .ppos-search input[type="search"]::-webkit-search-cancel-button { display: none; }

  .ppos-search input:focus {
    outline: none;
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(184, 92, 56, .18);
  }

  .ppos-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-50);
    font-size: 16px;
    pointer-events: none;
    line-height: 1;
  }

  .ppos-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
    background: transparent;
    border: none;
    color: var(--ink-50);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ppos-search-clear:hover { background: rgba(184, 92, 56, .12); color: var(--terra); }

  .ppos-search-empty {
    padding: 18px 16px;
    font-size: 13px;
    color: var(--ink-50);
    text-align: center;
    line-height: 1.5;
    border-top: 1px solid var(--border);
  }

  /* Catálogo lista */
  /* Grid de cards de productos. 2 cols mobile / 3 desktop. Las custom rows
     (item "a medida" sin foto) usan grid-column: 1 / -1 para spanear toda
     la fila — su contenido es texto largo y queda mejor horizontal. */
  .ppos-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  @media (min-width: 720px) {
    .ppos-list {
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
  }

  .ppos-cat-divider {
    grid-column: 1 / -1;
    padding: 12px 0 4px;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-50);
  }
  .ppos-cat-divider:first-child { padding-top: 4px; }

  .ppos-cat-divider--custom {
    color: #6B4D1E;
  }

  /* Card vertical: foto arriba (4:3), info middle, stepper abajo. */
  .ppos-row {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  }
  .ppos-row:hover {
    border-color: rgba(184, 92, 56, .35);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
  }

  .ppos-row-ill {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ppos-row-ill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ppos-row-ill svg {
    width: 50%;
    height: auto;
    color: var(--ink);
    opacity: .35;
  }

  /* Rows "a medida" inyectadas por JS: spanean toda la fila (texto largo)
     y vuelven a layout horizontal. */
  .ppos-row--custom {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(232, 200, 121, .12);
    border-color: #E8C879;
  }
  .ppos-row--custom .ppos-row-ill { display: none; }
  .ppos-row--custom .ppos-row-info { flex: 1; }
  .ppos-row--custom.ppos-row--active { background: rgba(232, 200, 121, .20); }

  .ppos-row[hidden] { display: none; }

  .ppos-row--active {
    border-color: #5F6B3B;
    box-shadow: 0 0 0 2px rgba(95, 107, 59, .15);
  }

  /* Stock-aware ordering: badges + estados visuales -------------------- */

  /* Fila combinada precio + badge stock dentro de info */
  .ppos-row-meta-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
  }

  /* Badge base */
  .ppos-row-stock {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  /* Hoy con stock: verde olive sutil */
  .ppos-row-stock--ok {
    background: rgba(95, 107, 59, .12);
    color: #4D5530;
  }

  /* Llegaste al limite del stock (te llevas los ultimos) */
  .ppos-row-stock--using {
    background: rgba(232, 200, 121, .30);
    color: #6B4D1E;
  }

  /* Sin stock hoy → encargo 48hs */
  .ppos-row-stock--empty {
    background: rgba(184, 92, 56, .12);
    color: #8E3520;
  }

  /* Producto que solo va por encargo (sin mostrador) */
  .ppos-row-stock--enc {
    background: rgba(184, 92, 56, .10);
    color: #B5651D;
  }

  /* Producto agotado (no se ofrece) */
  .ppos-row-stock--off {
    background: rgba(14, 14, 12, .08);
    color: rgba(14, 14, 12, .55);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }

  /* Filas con estado encargo → leve tinte para distinguir del flow normal */
  .ppos-row--encargo {
    background: rgba(184, 92, 56, .03);
    border-style: dashed;
  }

  .ppos-row--sin-stock .ppos-row-ill { opacity: .6; }

  /* ─── Modal "Te conviene encargarlo" ───────────────────────────────── */
  .ppos-stock-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 14, 12, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: 16px;
    animation: ppos-stock-fade 150ms ease-out;
  }

  @keyframes ppos-stock-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .ppos-stock-modal {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 16px 48px rgba(14, 14, 12, .2);
    animation: ppos-stock-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes ppos-stock-pop {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .ppos-stock-modal h3 {
    margin: 0 0 12px;
    font-family: var(--display);
    font-weight: 400;
    font-size: 22px;
    color: var(--ink);
  }

  .ppos-stock-modal p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
  }

  .ppos-stock-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
    flex-wrap: wrap;
  }

  .ppos-stock-modal-actions .ppos-btn-tonal,
  .ppos-stock-modal-actions .ppos-btn-primary {
    flex: 1;
    min-height: 44px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
  }

  /* Highlight del deep-link (?p=<slug>): pulso terra al llegar con producto
     pre-cargado desde el lightbox del Mostrador. */
  .ppos-row--highlight {
    border-color: var(--terra) !important;
    box-shadow: 0 0 0 2px rgba(184, 92, 56, .25);
    animation: ppos-row-highlight-pulse .9s ease-out;
  }
  @keyframes ppos-row-highlight-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(184, 92, 56, .45); }
    60%  { box-shadow: 0 0 0 10px rgba(184, 92, 56, 0); }
    100% { box-shadow: 0 0 0 2px rgba(184, 92, 56, .25); }
  }

  .ppos-row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px 4px;
  }

  .ppos-row-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.25em * 2);
  }

  .ppos-row-meta {
    font-size: 13px;
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* Stepper pill compacto al pie de la card. */
  .ppos-counter {
    display: inline-flex;
    align-items: center;
    margin: 6px 12px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    align-self: stretch;
    height: 34px;
  }

  .ppos-counter-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--ink-70);
    width: 34px;
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .12s ease, color .12s ease;
    flex-shrink: 0;
  }

  .ppos-counter-btn--inc {
    background: var(--terra);
    color: #fff;
  }
  .ppos-counter-btn--inc:hover { background: var(--ink); }
  .ppos-counter-btn--dec:hover:not([disabled]) {
    background: rgba(184, 92, 56, .08);
    color: var(--terra);
  }

  .ppos-counter-btn[disabled] {
    opacity: .35;
    cursor: not-allowed;
  }

  .ppos-counter-value {
    flex: 1;
    min-width: 28px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-50);
    transition: color .15s ease, background-color .15s ease;
  }

  .ppos-counter-value--on {
    color: var(--ink);
    background: rgba(95, 107, 59, .14);
    font-weight: 600;
    animation: ppos-counter-pop .25s ease;
  }

  @keyframes ppos-counter-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
  }

  .ppos-row-remove {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-50);
    font-size: 20px;
    line-height: 1;
    width: 32px;
    height: 32px;
    margin-left: 6px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }

  .ppos-row-remove:hover {
    background: rgba(184, 92, 56, .08);
    color: var(--terra);
    border-color: rgba(184, 92, 56, .35);
  }

  /* Add custom */
  .ppos-add-custom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 14px;
  }

  .ppos-add-custom input[type="text"] {
    padding: 11px 14px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    box-sizing: border-box;
  }

  .ppos-add-custom input:focus {
    outline: none;
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(184, 92, 56, .18);
  }

  /* Botones de pago en el sidebar de /encargar. Dos botones grandes que
     ARMAN el pedido y disparan el flow correspondiente (al retirar = crea
     pedido pendiente; MP = redirige al checkout de Mercado Pago). El click
     handler en JS setea el hidden #ppos-metodo-pago antes del submit. */
  .ppos-pay-btn {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease, opacity .15s ease;
  }
  .ppos-pay-btn:hover:not([disabled]):not(.ppos-pay-btn--loading) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }
  .ppos-pay-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
  }
  .ppos-pay-btn--loading {
    opacity: .7;
    cursor: progress;
  }
  .ppos-pay-btn--primary {
    background: var(--ink);
    color: var(--paper);
  }
  .ppos-pay-btn--primary:hover:not([disabled]):not(.ppos-pay-btn--loading) {
    background: var(--terra);
  }
  .ppos-pay-btn--mp {
    background: #00b1ea;  /* Mercado Pago blue */
    color: #fff;
  }
  .ppos-pay-btn--mp:hover:not([disabled]):not(.ppos-pay-btn--loading) {
    background: #0095c8;
  }
  .ppos-pay-btn-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
  }
  .ppos-pay-btn-hint {
    font-size: 12px;
    opacity: .82;
    line-height: 1.3;
  }

  .ppos-btn-tonal {
    appearance: none;
    background: var(--terra);
    color: #fff;
    border: 1px solid var(--terra);
    border-radius: 10px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease;
  }

  .ppos-btn-tonal:hover { background: var(--ink); border-color: var(--ink); }
  .ppos-btn-tonal:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(184, 92, 56, .25);
  }
  .ppos-btn-tonal[disabled] { opacity: .55; cursor: not-allowed; }

  /* Cliente fields */
  .ppos-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .ppos-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  @media (max-width: 560px) {
    .ppos-fields-row { grid-template-columns: 1fr; }
  }

  .ppos-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ppos-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
  }

  .ppos-required {
    color: var(--terra);
    font-weight: 600;
    margin-left: 2px;
  }

  .ppos-optional {
    color: var(--ink-50);
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
  }

  .ppos-field-hint {
    font-size: 12px;
    color: var(--ink-50);
    line-height: 1.4;
    margin-top: 2px;
  }

  .ppos-field input[type="text"],
  .ppos-field input[type="tel"],
  .ppos-field input[type="email"],
  .ppos-field input[type="date"],
  .ppos-field select,
  .ppos-field textarea {
    padding: 11px 14px;
    font-size: 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    box-sizing: border-box;
  }

  .ppos-field input:focus,
  .ppos-field select:focus,
  .ppos-field textarea:focus {
    outline: none;
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(184, 92, 56, .18);
  }

  .ppos-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230E0E0C' stroke-width='1.5'><path d='M1 1.5L6 6.5L11 1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 36px;
  }

  .ppos-disclaimer {
    font-size: 12px;
    color: var(--ink-50);
    line-height: 1.5;
    margin: 0;
    text-align: center;
  }

  /* ── Sidebar sticky ─────────────────────────────────────────────────────── */
  /* top: 92px deja respiro debajo del .site-header sticky (~76px alto + 16px). */
  .ppos-aside {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
  }

  @media (max-width: 900px) {
    .ppos-aside {
      position: static;
      max-height: none;
      overflow-y: visible;
    }
  }

  .ppos-cta-card {
    background: var(--surface);
    border: 1px solid rgba(184, 92, 56, .35);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(180deg, var(--surface) 0%, rgba(184, 92, 56, 0.04) 100%);
  }

  .ppos-cta-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }

  .ppos-cta-total-label {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-50);
    font-weight: 500;
  }

  .ppos-cta-total-value {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 500;
    color: var(--terra);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  /* FAB de soporte por WhatsApp en /encargar — flotante bottom-right, no
     entra al flow del checkout. Se diferencia de los pay-btn porque es
     soporte/consulta, no submit. */
  .ppos-fab-wa {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 12px 14px;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .35), 0 2px 6px rgba(0,0,0,.15);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .ppos-fab-wa:hover {
    background: #1ea356;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45), 0 3px 8px rgba(0,0,0,.18);
  }
  .ppos-fab-wa svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .ppos-fab-wa-label {
    line-height: 1;
  }
  @media (max-width: 540px) {
    .ppos-fab-wa {
      bottom: 16px;
      right: 16px;
      padding: 14px;
    }
    .ppos-fab-wa-label { display: none; }
  }

  /* Cart card */
  .ppos-cart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
  }

  .ppos-cart-title {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

  .ppos-cart-empty {
    font-size: 13px;
    color: var(--ink-50);
    text-align: center;
    line-height: 1.5;
    padding: 14px 8px;
  }

  .ppos-cart-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ppos-cart-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: baseline;
    padding: 8px 10px;
    background: rgba(0, 0, 0, .025);
    border-radius: 8px;
    font-size: 13px;
  }

  .ppos-cart-row--custom {
    background: rgba(232, 200, 121, .14);
  }

  .ppos-cart-qty {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
  }

  .ppos-cart-name {
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ppos-cart-price {
    font-variant-numeric: tabular-nums;
    color: var(--ink-70);
    font-size: 12px;
    grid-column: 3;
  }

  .ppos-cart-meta {
    font-size: 10px;
    color: var(--ink-50);
    text-transform: uppercase;
    letter-spacing: .05em;
    grid-column: 3;
  }

  /* Mobile: en pantallas chicas, el aside cae abajo del catálogo. Hacemos
     el CTA-card sticky al bottom del viewport para que el botón "Hacer
     pedido" siga a la mano sin scroll hasta el final. */
  @media (max-width: 900px) {
    .ppos-cta-card {
      position: sticky;
      bottom: 12px;
      z-index: 10;
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }
  }

  /* ═══ Sección "Encargar" (home) ═══ */
  .encargar-cta {
    background: var(--canvas);
    padding: 96px 56px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .encargar-cta-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .encargar-cta-head {
    max-width: 720px;
    margin-bottom: 56px;
  }

  .encargar-cta-head .kicker {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-70);
    margin-bottom: 18px;
  }

  .encargar-cta-head h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "wght" 360;
    font-size: clamp(48px, 6vw, 88px);
    line-height: 1.02;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 20px 0;
  }

  .encargar-cta-head h2 em {
    font-style: italic;
    color: var(--terra);
  }

  .encargar-cta-lede {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-70);
    max-width: 56ch;
    margin: 0;
  }

  .encargar-cta-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0 0 48px 0;
  }

  .encargar-cta-steps li {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px;
    position: relative;
  }

  .encargar-cta-steps .step-num {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--terra);
    margin-bottom: 16px;
  }

  .encargar-cta-steps h3 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 8px 0;
  }

  .encargar-cta-steps p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0;
  }

  .encargar-cta-actions {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
  }

  .encargar-cta-ghost {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-70);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-12);
    padding-bottom: 3px;
    transition: color .2s, border-color .2s;
  }
  .encargar-cta-ghost:hover {
    color: var(--terra);
    border-bottom-color: var(--terra);
  }

  @media (max-width: 900px) {
    .encargar-cta { padding: 64px 24px; }
    .encargar-cta-steps { grid-template-columns: 1fr; gap: 14px; }
    .encargar-cta-head { margin-bottom: 36px; }
  }

  /* ═══ Anuncio banner (Fase 10.3) ═══ */
  .anuncio-banner {
    background: var(--ink);
    color: var(--paper);
    padding: 10px 24px;
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
  }

  .anuncio-banner-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 1200px;
  }

  .anuncio-banner-icon {
    color: var(--terra);
    font-size: 12px;
  }

  .info-cierres {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--ink-70);
  }

  .info-cierres strong {
    color: var(--terra);
    margin-right: 4px;
  }
</style>

/* ───────── Ofertas y combos en /encargar (Build D) — tokens del sitio ───────── */
.ppos-row-meta--oferta {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.ppos-precio-lista {
  color: var(--ink-50);
  text-decoration: line-through;
  font-size: 0.85em;
}
.ppos-precio-oferta {
  color: var(--terra);
  font-weight: 700;
}
.ppos-oferta-badge {
  background: var(--terra-bg);
  color: var(--terra);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 7px;
  border-radius: 999px;
}

.ppos-combos-intro {
  color: var(--ink-70);
  font-size: 0.92rem;
  margin: 0 0 14px;
}
.ppos-combos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ppos-combo-card {
  background: var(--surface);
  border: 1px solid var(--combo-border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ppos-combo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ppos-combo-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.ppos-combo-card-badge {
  background: var(--combo-bg);
  color: var(--combo);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.ppos-combo-card-items {
  color: var(--ink-70);
  font-size: 0.88rem;
}
.ppos-combo-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.ppos-combo-card-old {
  color: var(--ink-50);
  text-decoration: line-through;
  font-size: 0.9rem;
}
.ppos-combo-card-now {
  color: var(--combo);
  font-weight: 700;
  font-size: 1.25rem;
}
/* Combo en modo % de descuento: pill en lugar de monto (el precio final
   depende de qué producto se elija en cada parte "a elección"). */
.ppos-combo-card-pct {
  display: inline-flex;
  background: var(--combo);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.ppos-combo-card-desc {
  color: var(--ink-70);
  font-size: 0.85rem;
}

  /* ═══════════════ MOSTRADOR — barra de filtro (rediseño 2026-06) ═══════════ */
  .mostrador-filter {
    position: sticky;
    top: 67px; /* debajo del .site-header sticky (~76px desktop) */
    z-index: 20;
    background: rgba(245, 240, 230, .94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    margin-bottom: 28px;
  }
  .mostrador-filter-chips {
    display: flex; gap: 8px; align-items: center;
    overflow-x: auto; scrollbar-width: none;
  }
  .mostrador-filter-chips::-webkit-scrollbar { display: none; }
  .mfchip {
    flex: 0 0 auto;
    border: 1px solid var(--ink-12);
    background: var(--surface);
    border-radius: 999px;
    padding: 8px 15px;
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    color: var(--ink-70); cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
  }
  .mfchip:hover { border-color: var(--ink-30); }
  .mfchip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .mfchip-n { opacity: .5; font-weight: 500; margin-left: 5px; }
  .mfchip-hoy {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--olive);
    background: var(--olive-bg);
    color: var(--olive);
    border-radius: 999px;
    padding: 7px 14px 7px 12px;
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    cursor: pointer; margin-left: 4px; white-space: nowrap;
  }
  .mfchip-sw {
    width: 30px; height: 18px; border-radius: 999px;
    background: rgba(95, 107, 59, .3); position: relative;
    transition: background .15s; flex: 0 0 auto;
  }
  .mfchip-sw::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; transition: transform .15s;
  }
  .mfchip-hoy.is-on .mfchip-sw { background: var(--olive); }
  .mfchip-hoy.is-on .mfchip-sw::after { transform: translateX(12px); }
  .mostrador-filter-meta { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
  .mostrador-filter-meta .live {
    font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
    color: var(--olive); display: flex; align-items: center; gap: 8px;
  }
  .mostrador-filter-meta .live::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--olive); box-shadow: 0 0 0 3px rgba(95, 107, 59, .2);
  }
  .mostrador-filter-meta .legend {
    display: flex; gap: 16px; margin-left: auto;
    font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-50);
  }
  .mostrador-filter-meta .legend span { display: inline-flex; align-items: center; gap: 6px; }
  .mostrador-filter-meta .legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
  .mostrador-filter-meta .legend .hoy { background: var(--olive); }
  .mostrador-filter-meta .legend .agot-hoy { background: #D4A574; }
  .mostrador-filter-meta .legend .enc { background: var(--terra); }
  @media (max-width: 720px) {
    .mostrador-filter { top: 60px; }
    .mostrador-filter-meta .legend { display: none; }
  }

  /* ═══════════════ VISITAR / WALK-IN (rediseño 2026-06) ═══════════════ */
  .visitar-block { max-width: 1180px; margin: 0 auto; padding: 72px 56px; }
  .visitar-head .kicker {
    font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-50);
    display: flex; align-items: center; gap: 12px;
  }
  .visitar-head .kicker::before { content: "◆"; color: var(--terra); }
  .visitar-head h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 340;
    font-size: clamp(34px, 4.5vw, 60px); line-height: 1;
    letter-spacing: -.02em; margin: 10px 0 28px;
  }
  .visitar-head h2 em { font-style: italic; color: var(--terra); }
  .visitar-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; align-items: stretch; }
  .visitar-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 18px; padding: 26px; display: flex; flex-direction: column;
  }
  .vb-status { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
  .vb-pulse {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--olive); box-shadow: 0 0 0 4px var(--olive-bg); flex: 0 0 auto;
  }
  .vb-status.is-closed .vb-pulse { background: var(--ink-30); box-shadow: 0 0 0 4px var(--ink-06); }
  .vb-status-text { font-family: var(--display); font-size: 22px; }
  .vb-week { font-family: var(--mono); font-size: 13px; letter-spacing: .03em; margin-bottom: 18px; }
  .vb-week-row {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 7px 0; border-bottom: 1px dotted var(--ink-12);
  }
  .vb-week-row .d { color: var(--ink-50); }
  .vb-week-row.closed, .vb-week-row.closed .d { color: var(--ink-30); }
  .vb-cierres { font-size: 13px; color: var(--ink-70); margin: 0 0 18px; line-height: 1.5; }
  .vb-cierres strong { color: var(--terra); }
  .vb-actions { display: flex; gap: 14px; align-items: center; margin-top: auto; flex-wrap: wrap; }
  .vb-wa {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--olive); color: #fff; border-radius: 999px;
    padding: 13px 20px; font-weight: 600; font-size: 14px;
    text-decoration: none; transition: background .15s;
  }
  .vb-wa:hover { background: #4e5a30; }
  .vb-wa svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .vb-ig { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-70); text-decoration: none; }
  .vb-ig svg { width: 17px; height: 17px; flex: 0 0 auto; }
  .vb-ig span { border-bottom: 1px solid var(--ink-30); transition: border-color .15s; }
  .vb-ig:hover { color: var(--terra); }
  .vb-ig:hover span { border-color: var(--terra); }
  .visitar-map {
    position: relative; border-radius: 18px; overflow: hidden;
    border: 1px solid var(--border); min-height: 320px;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(14,14,12,.05) 39px),
      repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(14,14,12,.05) 39px),
      linear-gradient(135deg, #e9e1cd, #ddd3bb);
  }
  .vb-map-road { position: absolute; background: var(--paper); }
  .vb-map-road--h { top: 46%; left: 0; right: 0; height: 14px; }
  .vb-map-road--v { top: 0; bottom: 0; left: 52%; width: 12px; }
  .vb-map-pin {
    position: absolute; top: 42%; left: 52%;
    width: 20px; height: 20px; border-radius: 50% 50% 50% 0;
    background: var(--terra);
    transform: translate(-50%, -100%) rotate(45deg);
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
  }
  .vb-map-card {
    position: absolute; left: 18px; right: 18px; bottom: 18px;
    background: var(--paper); border-radius: 14px; padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
  .vb-map-addr b { font-family: var(--display); font-size: 16px; display: block; }
  .vb-map-addr span { font-size: 12px; color: var(--ink-50); }
  .vb-map-go {
    background: var(--ink); color: var(--paper); border-radius: 999px;
    padding: 11px 16px; font-weight: 600; font-size: 13px;
    white-space: nowrap; text-decoration: none; transition: background .15s;
  }
  .vb-map-go:hover { background: var(--terra); }
  @media (max-width: 680px) {
    .visitar-block { padding: 48px 24px; }
    .visitar-grid { grid-template-columns: 1fr; }
    .visitar-map { min-height: 240px; }
  }

  /* ═══════════════ /encargar — contacto colapsable + barra/sheet mobile ═══════ */
  .ppos-contact { padding: 0; overflow: hidden; }
  .ppos-contact > summary {
    list-style: none; cursor: pointer;
    padding: 18px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .ppos-contact > summary::-webkit-details-marker { display: none; }
  .ppos-contact-summary-title { font-family: var(--display); font-size: 18px; display: block; }
  .ppos-contact-summary-hint { font-size: 12px; color: var(--ink-50); }
  .ppos-contact-chev { font-size: 22px; color: var(--ink-50); transition: transform .2s; }
  .ppos-contact[open] .ppos-contact-chev { transform: rotate(90deg); }
  .ppos-contact[open] > summary { border-bottom: 1px solid var(--border); }
  .ppos-contact .ppos-fields { padding: 18px 24px 22px; }

  .ppos-mobilebar { display: none; }
  .ppos-mobilebar-badge {
    background: var(--terra); color: #fff;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700; flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
  }
  .ppos-mobilebar-info { display: flex; flex-direction: column; line-height: 1.1; }
  .ppos-mobilebar-label { font-size: 11px; opacity: .8; }
  .ppos-mobilebar-total { font-family: var(--display); font-size: 18px; font-variant-numeric: tabular-nums; }
  .ppos-mobilebar-go { margin-left: auto; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }

  .ppos-sheet-head { display: none; }
  .ppos-sheet-backdrop[hidden] { display: none; }

  @media (max-width: 900px) {
    /* La barra fija solo aparece cuando hay al menos un ítem cargado. */
    body.ppos-cart-active .ppos-mobilebar {
      display: flex; align-items: center; gap: 11px;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
      background: var(--ink); color: var(--paper);
      padding: 14px 18px; cursor: pointer;
      box-shadow: 0 -4px 16px rgba(0,0,0,.18);
    }
    body.ppos-cart-active .ppos-fab-wa { bottom: 84px; }

    /* El aside se vuelve bottom-sheet (override de la regla static previa).
       top:auto anula el top:92px de la regla base — sin él, top+bottom estiran
       el sheet a max-height en vez de abrazar el contenido. */
    .ppos-aside {
      position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 65;
      max-height: 82vh; overflow-y: auto;
      background: var(--paper);
      border-top-left-radius: 20px; border-top-right-radius: 20px;
      padding: 8px 16px 20px; gap: 12px;
      transform: translateY(110%);
      transition: transform .28s cubic-bezier(.2,.8,.2,1);
      box-shadow: 0 -10px 40px rgba(0,0,0,.25);
    }
    .ppos-aside.ppos-aside--open { transform: none; }
    /* Anular el sticky-bottom viejo del cta-card: ahora vive dentro del sheet. */
    .ppos-cta-card { position: static; bottom: auto; box-shadow: none; }

    .ppos-sheet-head {
      display: flex; align-items: center; justify-content: center;
      position: relative; padding: 4px 0 8px;
    }
    .ppos-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-12); }
    .ppos-sheet-close {
      position: absolute; right: 4px; top: 0;
      background: var(--ink-06); border: none;
      width: 30px; height: 30px; border-radius: 50%;
      font-size: 18px; cursor: pointer; color: var(--ink);
    }
    .ppos-sheet-backdrop:not([hidden]) {
      display: block; position: fixed; inset: 0;
      background: rgba(14,14,12,.45); z-index: 60;
    }
    body.ppos-sheet-open { overflow: hidden; }
    body.ppos-sheet-open .ppos-fab-wa { display: none; }
  }

  /* ═══════════════ VISITAR — mapa embebido real ═══════════════ */
  .vb-map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
  /* El card de dirección queda flotando sobre el mapa; el resto del mapa
     sigue siendo interactivo (zoom/drag). */
  .visitar-map .vb-map-card { z-index: 2; }

  /* ═══════════════ /encargar — checkout panel + productos estilo mostrador ═══ */
  /* Datos del cliente dentro del panel sticky (estilo carrito de app de comidas). */
  .ppos-checkout-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 16px 18px;
  }
  .ppos-checkout-title {
    font-family: var(--display); font-size: 16px; font-weight: 400; color: var(--ink);
    margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
  }
  .ppos-checkout-card .ppos-fields { display: flex; flex-direction: column; gap: 12px; }

  /* Cards de catálogo: layout horizontal como el mostrador del home
     (foto chica a la izquierda, info al medio, counter a la derecha). */
  .ppos-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
  @media (min-width: 720px) {
    .ppos-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
  }
  .ppos-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px;
  }
  .ppos-row-ill {
    width: 56px; height: 56px; aspect-ratio: auto;
    border-radius: 8px; flex: 0 0 auto;
  }
  .ppos-row-info { min-width: 0; }
  .ppos-row-name { white-space: normal; }
  /* Rows "a medida" (sin foto): 2 columnas info + counter. */
  .ppos-row--custom { grid-template-columns: minmax(0, 1fr) auto; }