:root{
    --bg:#141414; --card:#1d1d1d; --line:#c9a14a; --text:#f3efe6;
    --muted:#a9a39a; --price:#e0533d; --accent:#f2c230;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;
       line-height:1.35;-webkit-font-smoothing:antialiased}
  .wrap{max-width:560px;margin:0 auto;padding:0 16px 40px}
  header{text-align:center;padding:28px 0 8px}
  .logo{font-family:'Bebas Neue',sans-serif;font-size:58px;letter-spacing:2px;line-height:1}
  .tag{font-family:Pacifico,cursive;font-size:22px;color:var(--accent);margin-top:2px}
  .addr{color:var(--muted);font-size:14px;margin-top:10px}
  .addr a{color:var(--text)}
  .nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto;font-size:13px;color:var(--muted);text-decoration:none;
         border:1px solid #333;border-radius:999px;padding:6px 12px}
  section{background:var(--card);border:1.5px solid var(--line);border-radius:14px;
          padding:14px 16px 8px;margin-top:18px;scroll-margin-top:72px}
  h2{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:1px;margin-bottom:4px}
  .note{color:var(--muted);font-size:12px;margin:-2px 0 6px}
  .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
       padding:9px 0;border-bottom:1px dashed #333}
  .row:last-child{border-bottom:0}
  .row .n{font-size:15px}
  .row .n small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
  .row .p{color:var(--price);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
  .head2{display:flex;justify-content:flex-end;gap:0;font-size:11px;color:var(--muted);
         font-weight:700;letter-spacing:.5px}
  .head2 span,.row .p2{width:64px;text-align:right}
  .row .p2{color:var(--price);font-weight:700;font-variant-numeric:tabular-nums}
  .pp{display:flex}
  h3{font-size:12px;letter-spacing:1px;color:var(--accent);text-transform:uppercase;margin:10px 0 0}
  .banner{margin-top:24px;text-align:center}
  .banner span{display:inline-block;background:var(--accent);color:#141414;font-family:Pacifico,cursive;
          font-size:20px;padding:8px 22px;border-radius:12px}
  footer{text-align:center;color:var(--muted);font-size:13px;margin-top:22px}
  footer a{display:inline-block;margin-top:10px;color:#141414;background:var(--text);
           text-decoration:none;font-weight:700;padding:10px 18px;border-radius:999px}
  .iva{font-size:11px;margin-top:14px}
  .tarifa{display:inline-block;margin-top:12px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border:1px solid #333;border-radius:999px;padding:4px 12px}

/* Barra de secciones fija arriba y títulos que se quedan pegados al bajar */
.nav{position:sticky;top:0;z-index:20;background:var(--bg);padding:10px 0 10px;margin:0 -16px;padding-left:16px;padding-right:16px;
     border-bottom:1px solid #2a2a2a}
.nav a.on{color:#141414;background:var(--line);border-color:var(--line)}
section h2{position:sticky;top:52px;z-index:10;background:var(--card);margin:0 -16px 4px;padding:6px 16px;
           border-radius:14px 14px 0 0}
section{scroll-margin-top:56px}

/* Página de inicio */
.hero{text-align:center;padding:40px 0 10px}
.hero .logo{font-size:72px}
.hero p.lead{margin:18px auto 0;max-width:420px;color:var(--text);font-size:16px;line-height:1.5}
.cta{display:block;text-align:center;margin:26px auto 0;max-width:320px;background:var(--line);color:#141414;
     font-weight:700;font-size:17px;text-decoration:none;padding:15px 20px;border-radius:999px}
.bloque{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:18px 18px;margin-top:18px}
.bloque h2{position:static;margin:0 0 8px;padding:0;background:none}
.bloque p{color:var(--text);font-size:15px;line-height:1.55}
.bloque ul{list-style:none;margin-top:6px}
.bloque li{padding:7px 0;border-bottom:1px dashed #333;font-size:15px}
.bloque li:last-child{border-bottom:0}
.bloque li b{color:var(--accent);font-weight:600}
.mapa{width:100%;height:240px;border:0;border-radius:10px;margin-top:12px;filter:grayscale(.3)}

/* Platos y cervezas con ficha */
button.row{width:100%;background:none;border:0;border-bottom:1px dashed #333;color:inherit;font:inherit;text-align:left;cursor:pointer}
.row.con-ficha{transition:transform .12s}
.row.con-ficha:active{transform:scale(.98)}
.row.con-foto{align-items:center}
.row.con-ficha .n{flex:1}
.row .ver{display:block;width:max-content;font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#141414;background:var(--line);border-radius:99px;padding:3px 9px;margin-top:5px}
.foto{flex:0 0 auto;width:72px;height:54px}
.foto img{width:100%;height:100%;object-fit:contain;display:block}
.fi-brillo{box-shadow:0 0 0 3px var(--accent);border-radius:8px}
html.ficha-abierta{overflow:hidden}

.ficha-capa{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s}
.ficha-capa.on{opacity:1;pointer-events:auto}
.ficha{position:relative;width:calc(100% - 24px);max-width:520px;max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--card);border:1.5px solid var(--line);color:var(--text);border-radius:18px;padding:0 16px 18px;
  transform:scale(.96);transition:transform .2s;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.ficha-capa.on .ficha{transform:none}
.fi-barra{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;padding:10px 0 4px;margin:0 -6px}
.fi-x{width:40px;height:40px;border:0;border-radius:50%;background:#2b2b2b;color:var(--text);font-size:26px;line-height:38px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.fi-top{display:grid;grid-template-columns:36% 1fr;gap:12px;align-items:end;margin-top:-34px}
.fi-vaso{height:200px;display:flex;align-items:flex-end;justify-content:center}
.fi-vaso img{max-height:200px;max-width:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.fi-logo{max-width:130px;max-height:74px;display:block;margin-bottom:8px;background:#f3efe6;border-radius:10px;padding:5px 8px}
.fi-foto{margin-top:-30px}
.fi-foto img{width:100%;height:auto;display:block}
.fi-cab-plato{margin-top:6px}
.ficha h2{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;letter-spacing:1px;color:var(--text);font-size:32px;line-height:1;margin:0 0 8px}
.fi-precios{display:flex;gap:18px;flex-wrap:wrap}
.fi-pr{font-family:'Bebas Neue',Impact,sans-serif;font-size:30px;color:var(--price);line-height:1}
.fi-pr span{display:block;font-family:Inter,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
.fi-datos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 6px}
.fi-datos div{background:#262626;border-radius:10px;padding:7px 10px}
.fi-datos div:last-child:nth-child(odd){grid-column:1/-1}
.fi-datos dt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--line)}
.fi-datos dd{margin:1px 0 0;font-weight:600;font-size:15px}
.ficha h4{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;letter-spacing:1px;color:var(--accent);font-size:20px;margin:16px 0 4px}
.ficha p{margin:0;font-size:15px;line-height:1.5}
.fi-chips{display:flex;flex-wrap:wrap;gap:6px}
.fi-chips span{font-size:13px;border:1px solid #3a3a3a;border-radius:999px;padding:5px 11px}
.fi-chips.al span{border-color:var(--price);color:#f4b3a8}
.fi-mars{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.fi-mar{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;border:0;border-radius:12px;
  background:#2b2b2b;color:var(--text);font:600 15px Inter,sans-serif;padding:12px 14px;cursor:pointer}
.fi-mar b{color:var(--price);white-space:nowrap;margin-left:auto}
.fi-mar:after{content:"›";font-size:22px;margin-left:4px;color:var(--line)}
.fi-volver{display:block;width:100%;margin-top:18px;border:2px solid var(--line);background:transparent;color:var(--line);border-radius:12px;
  font:700 16px Inter,sans-serif;padding:12px;cursor:pointer}

/* Insignia de reseñas de Google (como en JB) */
header,.hero{position:relative}
.g-res{position:absolute;top:22px;right:0;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:5;
  background:#fff;border-radius:12px;padding:7px 9px 6px;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.g-res svg{width:28px;height:28px;display:block}
.g-st{color:#fbbc04;font-size:11px;letter-spacing:1px;line-height:1}
.g-tx{font:700 10px Inter,Arial,sans-serif;color:#202124;text-transform:uppercase;letter-spacing:.04em;line-height:1.1}