/* ===========================================================================
   ESTILOS DE LA CARTA DE CHIN-CHIN
   ---------------------------------------------------------------------------
   Hoja unica, ordenada de arriba hacia abajo en el mismo orden en que las
   cosas aparecen en la pagina:

     1. Variables de color y tipografia
     2. Barra superior (buscador, Instagram, mapa)
     3. Caratula
     4. Boton de filtro por categoria
     5. Presentacion del bar
     6. Indice de categorias
     7. Categorias, grupos y filas de platos
     8. Ficha de detalle de un plato
     9. Paleta por categoria
    10. Pie: contacto, calificacion, sugerencias y mapa

   Las fotos ya no estan incrustadas en este archivo: viven en public/fotos/
   y se referencian por ruta.
   =========================================================================== */
  /* Paleta de la marca, tomada del logo oficial: bordo y dorado sobre crema.
     La carta usa siempre estos colores, sin modo oscuro: una carta de bar se
     mira en el local, y conviene que se vea igual en todos los telefonos. */
  :root{
    --bg:#ffffff;
    --surface:#faf5e9;
    --surface-2:#f0e2bd;
    --ink:#211609;
    --ink-muted:#6b5a41;
    --rule:#e3d3a9;
    --maroon:#7c1220;
    --maroon-2:#4f0c16;
    --gold:#a97815;
    --green:#3f6132;
    --navy:#2b3d57;
    --plum:#63325a;
    --teal:#215048;
    --ring: rgba(124,18,32,.5);
    --fill-maroon:#6e0f1c;
    --fill-maroon-dark:#450a12;
    --cream:#fbf0dd;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

  body{
    margin:0;
    background:
      radial-gradient(1200px 500px at 15% -10%, color-mix(in srgb, var(--gold) 10%, transparent), transparent),
      var(--bg);
    color:var(--ink);
    font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{ font-family:'Fraunces', Georgia, serif; text-wrap:balance; margin:0; font-optical-sizing:auto; }
  .hero-subtitle, .cat-note, .callout-name, .merienda-title, .rate-label, .no-results{
    font-variation-settings:'WONK' 1;
  }
  .cur{ font-size:.7em; font-weight:500; opacity:.72; margin-right:.06em; }

  a{ color:inherit; }

  .wrap{ max-width:760px; margin:0 auto; padding:0 1.25rem; }

  /* ---------- Barra superior fija: buscador, Instagram y mapa ---------- */
  header.topbar{
    position:sticky; top:0; z-index:20;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px) saturate(1.1);
    border-bottom:1px solid var(--rule);
  }
  .topbar-row{
    display:flex; align-items:center; gap:.6rem;
    max-width:760px; margin:0 auto; padding:.6rem 1.25rem;
  }
  .topbar-actions{ flex:none; display:flex; gap:.4rem; }
  .icon-btn{
    width:34px; height:34px; flex:none;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--rule); color:var(--ink-muted);
    background:none; padding:0; cursor:pointer;
    text-decoration:none; transition:color .15s ease, background .15s ease, border-color .15s ease;
  }
  .icon-btn svg{ width:16px; height:16px; }
  .icon-btn:hover{ color:var(--surface); background:var(--maroon); border-color:var(--maroon); }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

  .topbar-search{
    flex:1; min-width:0; position:relative;
    display:flex; align-items:center;
  }
  .topbar-search .search-icon{
    position:absolute; left:.7rem; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color:var(--ink-muted); cursor:pointer;
  }
  .topbar-search input{
    width:100%; height:34px;
    font-family:'Work Sans', sans-serif; font-size:.88rem; color:var(--ink);
    background:var(--surface); border:1px solid var(--rule);
    padding:0 2.1rem 0 2.2rem;
  }
  .topbar-search input::placeholder{ color:var(--ink-muted); }
  .topbar-search input:focus-visible{ outline:2px solid var(--ring); outline-offset:1px; }
  .topbar-search .search-clear{
    position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
    width:26px; height:26px; border:none;
  }
  .topbar-search .search-clear[hidden]{ display:none; }

  /* ---------- Caratula: logo, nombre y subtitulo ---------- */
  .caratula{
    padding:3.2rem 1.25rem 2.4rem;
    text-align:center;
    background:var(--surface);
    border-bottom:1px solid var(--rule);
  }
  .hero-logo{
    width:min(190px, 45vw); height:auto; margin:0 auto 1.1rem; display:block;
    filter:drop-shadow(0 6px 16px rgba(33,22,9,.18));
  }
  .hero-title{
    font-size:clamp(1.7rem, 5vw, 2.3rem); font-weight:700; color:var(--maroon-2);
  }
  .hero-subtitle{
    margin-top:.35rem;
    font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem;
    color:var(--ink-muted);
  }

  /* ---------- Boton de filtro dentro de una categoria ---------- */
  .section-filter{
    display:inline-flex; align-items:center; gap:.4rem; margin-top:1.2rem;
    font-family:'Work Sans', sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.02em;
    color:var(--accent); background:#fff; border:1px solid var(--accent);
    padding:.4rem .85rem; cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .section-filter:hover{ background:color-mix(in srgb, var(--accent) 12%, #fff); }
  .section-filter.active{ background:var(--accent); color:var(--surface); }

  .item-tags{ display:flex; flex-wrap:wrap; gap:0 .55rem; margin-top:.2rem; }
  .item-tag{
    font-size:.62rem; font-weight:600; letter-spacing:.02em;
    color:var(--ink-muted); opacity:.85;
  }
  .item-tag + .item-tag{ position:relative; }
  .item-tag + .item-tag::before{ content:"·"; position:absolute; left:-.62rem; }

  /* ---------- Presentacion del bar y datos de contacto ---------- */
  header.hero{
    padding:2.2rem 1.25rem 2.6rem;
    text-align:center;
    background:var(--bg);
    border-bottom:3px solid var(--fill-maroon);
  }
  .hero-copy{
    max-width:48ch; margin:0 auto; text-align:justify; text-align-last:center;
    font-size:1rem; line-height:1.7; color:var(--ink-muted);
  }
  .hero-copy p + p{ margin-top:.85rem; }
  .hero-copy em{ color:var(--ink); font-style:normal; font-weight:600; }
  .hero-meta{
    margin-top:1.3rem; display:flex; flex-direction:column; align-items:center; gap:.35rem;
    font-family:'Work Sans', sans-serif; font-size:.8rem; color:var(--ink-muted); text-align:center;
  }

  .btn{
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:'Work Sans', sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.02em;
    padding:.7rem 1.2rem; border:1.5px solid var(--fill-maroon);
    text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .btn svg{ width:15px; height:15px; flex:none; }
  .btn-primary{ background:var(--fill-maroon); color:var(--cream); box-shadow:0 6px 16px -8px rgba(110,15,28,.7); }
  .btn-primary:hover{ background:var(--fill-maroon-dark); border-color:var(--fill-maroon-dark); transform:translateY(-1px); }
  .btn-ghost{ background:transparent; color:var(--maroon); border-color:var(--maroon); }
  .btn-ghost:hover{ background:var(--fill-maroon); color:var(--cream); border-color:var(--fill-maroon); }
  .hero-cta{ margin-top:0; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }

  .vida{ background:var(--fill-maroon); overflow:hidden; }
  .vida-track{
    display:flex; align-items:center; gap:2.2rem; width:max-content;
    padding:.4rem 0;
    animation:vida-scroll 28s linear infinite;
  }
  .vida-item{
    display:inline-flex; align-items:center; gap:.4rem; flex:none; white-space:nowrap;
    font-size:.68rem; font-weight:500; letter-spacing:.02em;
    color:var(--cream);
  }
  .vida-item svg{ width:13px; height:13px; opacity:.85; flex:none; }
  @keyframes vida-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .vida-track{ animation:none; } }

  .indice{ padding:2.8rem 0 2.6rem; border-bottom:1px solid var(--rule); text-align:center; scroll-margin-top:3.2rem; }
  .indice .kicker{ color:var(--gold); border-color:var(--gold); }
  .indice .cat-title{ color:var(--maroon-2); }
  .indice .cat-note{ color:var(--ink-muted); }
  .indice-grid{
    margin-top:1.6rem; display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem;
    text-align:center;
  }
  .indice-card{
    position:relative; isolation:isolate; overflow:hidden;
    padding:.85rem 1rem;
    display:flex; flex-direction:row; align-items:center; gap:0;
    color:#f6ead9; text-decoration:none;
    box-shadow:0 8px 18px -12px rgba(33,22,9,.55);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .indice-card:hover, .indice-card:focus-visible{ transform:translateY(-2px); box-shadow:0 12px 22px -12px rgba(33,22,9,.6); }
  .indice-card.active{ box-shadow:0 0 0 2px var(--cream) inset; }
  .indice-card::before{ content:""; position:absolute; inset:0; z-index:-2; background-image:var(--foto, none); background-size:cover; background-position:center; }
  .indice-card::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background-image:
      radial-gradient(130% 110% at 50% -10%, rgba(255,255,255,.1), transparent 55%),
      repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px),
      linear-gradient(155deg, color-mix(in srgb, var(--tint) 60%, #1a1108) 0%, color-mix(in srgb, var(--tint) 82%, #1a1108) 100%);
    opacity:.87;
  }
  .indice-icon{ flex:0 0 25%; display:flex; align-items:center; justify-content:center; }
  .indice-icon svg{ width:40px; height:40px; stroke-width:1.4; }
  .indice-text{ flex:0 0 75%; min-width:0; text-align:left; }
  .indice-text h3{ font-family:'Fraunces', serif; font-weight:600; font-size:.95rem; color:#fff; text-wrap:balance; }
  .indice-text p{ margin:.15rem 0 0; font-size:.72rem; line-height:1.35; color:rgba(246,234,217,.88); }


  /* ---------- Categorias: encabezado, grupos y filas de platos ---------- */
  section.cat{ border-bottom:1px solid var(--rule); scroll-margin-top:3.2rem; }
  section.cat:last-of-type{ border-bottom:none; }

  .cat-head{
    position:relative; isolation:isolate; overflow:hidden;
    text-align:center;
    padding:3.4rem 1.25rem 2.2rem;
    background:color-mix(in srgb, var(--accent) 9%, var(--bg));
    border-bottom:1px solid var(--rule);
    color:#f6ead9;
  }
  .cat-head::before{
    content:""; position:absolute; inset:0; z-index:-2;
    background-image:var(--foto, none);
    background-size:cover; background-position:center;
  }
  .cat-head::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, #1a1108) 0%, color-mix(in srgb, var(--accent) 82%, #1a1108) 100%);
    opacity:.87;
  }
  .cat-head-inner{ max-width:760px; margin:0 auto; }
  .cat-head-icon{ width:38px; height:38px; margin:0 auto .8rem; color:#f6ead9; display:block; }
  .kicker{
    display:inline-block;
    font-family:'Work Sans', sans-serif;
    font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:#f6ead9;
    border:1px solid rgba(246,234,217,.7);
    padding:.22rem .6rem;
    margin-bottom:.7rem;
  }
  .cat-title{
    font-size:clamp(1.9rem, 5.5vw, 2.6rem); font-weight:800; color:#fff;
    letter-spacing:-.01em; font-variation-settings:'opsz' 80;
  }
  .cat-note{ margin-top:.35rem; color:rgba(246,234,217,.88); font-style:italic; font-family:'Fraunces', serif; font-size:.95rem; }
  .cat-rule{ margin:1.1rem auto 0; height:3px; width:64px; background:#f6ead9; }

  .cat-body{ padding-top:2rem; padding-bottom:2.6rem; }
  .group{ margin-top:1.8rem; text-align:center; }
  .group:first-child{ margin-top:0; }
  .group-heading{
    font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--accent); margin-bottom:.4rem;
  }
  .group-note{ font-size:.78rem; color:var(--ink-muted); margin-bottom:.6rem; }
  .list{ text-align:left; }

  .back-to-index{
    display:block; margin:2rem auto 0; text-align:center;
    font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-muted); text-decoration:none;
  }
  .back-to-index:hover{ color:var(--accent); }

  .list{ display:flex; flex-direction:column; }
  .item{
    display:flex; justify-content:flex-start; align-items:flex-start; gap:1.1rem;
    padding:.68rem 0;
    border-bottom:1px solid var(--rule);
    cursor:pointer;
  }
  [data-search]{ scroll-margin-top:3.2rem; }
  .item:active{ background:color-mix(in srgb, var(--accent) 6%, transparent); }
  .cat-body > .group:last-of-type .list .item:last-child{ border-bottom:none; }
  .item-thumb{ width:52px; height:52px; object-fit:contain; background:#fff; border-radius:5px; flex:none; box-shadow:0 2px 6px -2px rgba(33,22,9,.35); }
  .item-main{ min-width:0; flex:1 1 auto; text-align:left; }
  .item-name{ font-weight:600; font-size:.94rem; color:var(--ink); }
  .item-desc{ display:block; margin-top:.18rem; font-size:.79rem; line-height:1.5; color:var(--ink-muted); }

  .price-single{
    flex:none; font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-weight:600; font-size:.94rem; font-variant-numeric:tabular-nums;
    color:var(--accent); white-space:nowrap; padding-top:.05rem;
  }
  .price-group{ flex:none; display:flex; gap:1rem; }
  .price-col{ display:flex; flex-direction:column; align-items:flex-end; }
  .price-col .plabel{
    font-family:'Work Sans', sans-serif; font-size:.6rem; font-weight:700;
    letter-spacing:.06em; color:var(--ink-muted); text-transform:uppercase; margin-bottom:.1rem;
  }
  .price-col .pval{
    font-family:'IBM Plex Mono', ui-monospace, monospace; font-weight:600; font-size:.94rem;
    font-variant-numeric:tabular-nums; color:var(--accent); white-space:nowrap;
  }

  .callout{
    margin-top:1.4rem;
    border:1px solid var(--accent);
    padding:1rem 1.1rem;
    display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  }
  .callout-name{ font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem; color:var(--ink); }
  .callout-desc{ font-size:.78rem; color:var(--ink-muted); margin-top:.2rem; max-width:52ch; }
  .callout-price{ font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:1.3rem; color:var(--accent); white-space:nowrap; }

  /* El aire de la sugerencia va ARRIBA DE TODO EL BLOQUE, no entre el rotulo
     y el recuadro. Estaba al reves: el rotulo ("SABADOS Y DOMINGOS") quedaba
     pegado al plato de arriba y despues habia un hueco antes del recuadro,
     asi que el rotulo parecia pertenecer al plato anterior en vez de a su
     propia sugerencia. La separacion es la misma que usan los grupos. */
  .sugerencia{ margin-top:1.8rem; }
  .sugerencia .callout{ margin-top:0; }

  .merienda-standalone{ padding:2rem 0 2.6rem; }
  .merienda-banner{ position:relative; }
  .merienda-banner-img{
    display:block; width:100%; height:auto; border-radius:2px;
    box-shadow:0 16px 32px -18px rgba(33,22,9,.55);
  }
  .merienda-share{
    margin:1.3rem auto 0; display:flex; align-items:center; justify-content:center; gap:.6rem;
    font-family:'Work Sans', sans-serif; font-weight:700; font-size:.88rem; letter-spacing:.02em;
    padding:.8rem 1.5rem; border:none;
    background:var(--fill-maroon); color:var(--cream); cursor:pointer;
    box-shadow:0 6px 16px -8px rgba(110,15,28,.6);
    transition:background .15s ease, transform .15s ease;
  }
  .merienda-share svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; flex:none; }
  .merienda-share:hover{ background:var(--fill-maroon-dark); transform:translateY(-1px); }

  /* ---------- Ficha de detalle que se abre al tocar un plato ---------- */
  body.modal-open{ overflow:hidden; }
  .item-modal-overlay{
    position:fixed; inset:0; background:rgba(26,17,8,.6);
    display:flex; align-items:flex-end; justify-content:center;
    z-index:200; opacity:0; pointer-events:none;
    transition:opacity .18s ease;
  }
  .item-modal-overlay.open{ opacity:1; pointer-events:auto; }
  .item-modal{
    position:relative;
    background:var(--surface); width:100%; max-width:480px;
    max-height:82vh; overflow-y:auto; cursor:default;
    border-radius:14px 14px 0 0;
    box-shadow:0 -12px 32px -8px rgba(33,22,9,.4);
    transform:translateY(16px);
    transition:transform .18s ease;
  }
  .item-modal-overlay.open .item-modal{ transform:translateY(0); }
  .item-modal-close{
    position:absolute; top:.55rem; right:.55rem; z-index:5;
    width:28px; height:28px; padding:0; border:none; border-radius:50%;
    background:var(--maroon); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(20,12,4,.4);
    transition:background .15s ease;
  }
  .item-modal-close:hover{ background:var(--maroon-2); }
  .item-modal-close svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
  .item-modal-img{ display:block; width:100%; height:220px; object-fit:contain; background:var(--surface); }
  .item-modal-img[hidden]{ display:none; }
  .item-modal-body{ padding:1.3rem 1.4rem 1.6rem; text-align:left; }
  .item-modal-name{ font-family:'Fraunces', serif; font-size:1.3rem; font-weight:700; color:var(--ink); margin:0; }
  .item-modal-tags{ display:flex; flex-wrap:wrap; gap:0 .55rem; margin-top:.5rem; }
  .item-modal-tags[hidden]{ display:none; }
  .item-modal-desc{ margin:.7rem 0 0; font-size:.9rem; line-height:1.55; color:var(--ink-muted); }
  .item-modal-desc[hidden]{ display:none; }
  .item-modal-price{ margin-top:1rem; }
  .item-modal-price .price-single{ font-size:1.25rem; }
  .item-modal-price .pval{ font-size:1.1rem; }
  .item-modal-share{
    margin-top:1.3rem; width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem;
    font-family:'Work Sans', sans-serif; font-weight:700; font-size:.88rem; letter-spacing:.02em;
    padding:.8rem 1.5rem; border:none;
    background:var(--fill-maroon); color:var(--cream); cursor:pointer;
    transition:background .15s ease;
  }
  .item-modal-share:hover{ background:var(--fill-maroon-dark); }
  .item-modal-share svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; flex:none; }

  /* Paleta por categoria: el color de acento ya NO se escribe aca.
     Lo pone ArmadoDeLaCarta.js en el estilo de cada seccion, leyendo el campo
     Color de la categoria. Antes habia una regla por categoria con su
     identificador, asi que una categoria nueva nacia sin color y cambiarle el
     color a una existente era editar este archivo. Los colores posibles son
     las variables de la paleta de arriba (--maroon, --gold, --green, --navy,
     --plum, --teal) y la lista vive en js/TextosYEtiquetas.js.
     Este valor es solo la red: si una categoria viniera sin color. */
  /* El color y la foto de cada categoria los pone ArmadoDeLaCarta.js en el
     estilo del elemento, leyendo los campos Color y FotoDeEncabezado. Esto
     es solo la red por si una categoria viniera sin color. */
  .cat, .indice-card{ --accent:var(--maroon); --tint:var(--maroon); }

  /* ---------- Pie: contacto, calificacion, sugerencias y mapa ---------- */
  footer{ padding:2.6rem 1.25rem 2.6rem; text-align:center; }
  .footer-mark{
    width:min(150px, 38vw); height:auto; margin:0 auto; display:block;
  }
  .footer-contact{
    margin-top:.6rem; font-family:'Work Sans', sans-serif; font-size:.78rem;
    color:var(--ink-muted); display:flex; flex-wrap:wrap; gap:.3rem 1rem; justify-content:center;
  }

  .rate-block{ margin-top:2.2rem; }
  .rate-label{ font-family:'Fraunces', serif; font-style:italic; font-size:1.1rem; color:var(--ink); }
  .stars{ margin-top:.7rem; display:flex; gap:.3rem; justify-content:center; }
  .google-rating-live{ display:flex; align-items:center; justify-content:center; gap:.35rem; margin-top:.5rem; font-family:'Work Sans', sans-serif; font-size:.82rem; color:var(--ink-muted); }
  .google-rating-live .grl-star{ width:14px; height:14px; fill:var(--gold); flex-shrink:0; }
  .star{ background:none; border:none; padding:.15rem; margin:0; cursor:pointer; line-height:0; }
  .star svg{ width:34px; height:34px; display:block; fill:none; stroke:var(--ink-muted); stroke-width:1.4; transition:fill .1s ease, stroke .1s ease; }
  .star.filled svg{ fill:var(--gold); stroke:var(--gold); }
  .rate-cta{ margin-top:1rem; }
  .rate-cta p{ margin:0 0 .8rem; font-size:.88rem; color:var(--ink-muted); max-width:40ch; margin-left:auto; margin-right:auto; }
  .rate-cta[hidden]{ display:none; }

  .suggest-block{ margin-top:2.6rem; text-align:left; max-width:420px; margin-left:auto; margin-right:auto; }
  .suggest-block .rate-label{ text-align:center; display:block; }
  .suggest-form{ margin-top:.9rem; display:flex; flex-direction:column; gap:.6rem; }
  .suggest-form textarea, .suggest-form input{
    width:100%; font-family:'Work Sans', sans-serif; font-size:.88rem; color:var(--ink);
    background:var(--surface); border:1px solid var(--rule); padding:.65rem .8rem; resize:vertical;
  }
  .suggest-form textarea{ min-height:88px; }
  .suggest-form textarea::placeholder, .suggest-form input::placeholder{ color:var(--ink-muted); }
  .suggest-form .btn{ align-self:center; margin-top:.2rem; border:1.5px solid var(--fill-maroon); }
  .suggest-status{ margin-top:.6rem; text-align:center; font-size:.82rem; color:var(--ink-muted); }
  .suggest-status[hidden]{ display:none; }

  .mapa{ padding:1.8rem 0 2.4rem; text-align:center; border-bottom:1px solid var(--rule); }
  .mapa .kicker{ color:var(--maroon); border-color:var(--maroon); margin-bottom:.5rem; }
  .mapa .cat-title{ color:var(--maroon-2); }
  .mapa .cat-note{ color:var(--ink-muted); margin-top:.25rem; }
  .mapa .cat-rule{ margin-top:.8rem; }
  .mapa-frame{
    margin-top:1.2rem; border:1px solid var(--rule); overflow:hidden;
    box-shadow:0 10px 24px -14px rgba(33,22,9,.35);
  }
  .mapa-frame iframe{ display:block; width:100%; height:320px; border:0; }

  .no-results{
    display:none; padding:3rem 1.25rem; text-align:center;
    color:var(--ink-muted); font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem;
  }
  .no-results.show{ display:block; }

  @media (max-width:480px){
    .item{ gap:.7rem; }
    .price-group{ gap:.7rem; }
  }

  /* Cuando una categoria termina con un flyer, el "volver al indice" se baja
     a su propio envoltorio porque el afiche va a todo el ancho y el cuerpo de
     la categoria es una columna angosta. Ese envoltorio pone el espacio al
     pie que, en el caso normal, lo pone .cat-body. */
  .cat-cierre{ padding-bottom:2.6rem; }