/* ============================================================
   MANBYS · Hamburguesería — sistema visual «RÓTULO Y MOSTRADOR»
   ------------------------------------------------------------
   El mundo real de Manbys: rótulo luminoso, toldo, toneles,
   manteles rojos a cuadros y 30 años de bar de barrio.
   Papel crema + tinta chocolate + dorado de neón + rojo salsa.
   Tipos: Bevan (rótulo/wordmark) · Caveat (manuscrita) ·
   Barlow / Barlow Condensed (texto y rótulos pequeños).
   ============================================================ */

/* ---------- 1 · Variables ---------- */
:root{
  --brasa:#221510;          /* chocolate de caja (fondos profundos) */
  --carbon:#2C1C13;
  --grafito:#3A2719;
  --dorado:#E9B63F;         /* neón de la casa */
  --dorado-oscuro:#B98522;
  --salsa:#C64A31;          /* tomate / mantel */
  --crema:#F7EFDD;          /* papel */
  --marfil:#FCF7EA;         /* papel claro */
  --piedra:#8B7A63;
  --tinta:#2A1A11;          /* tinta chocolate */
  --tinta-suave:#5D4936;
  --linea:#E5D6B8;          /* líneas de papel */
  --font-display:"Bevan",Georgia,serif;
  --font-wordmark:"Bevan",Georgia,serif;
  --font-head:"Barlow Condensed",sans-serif;
  --font-body:"Barlow",system-ui,sans-serif;
  --font-script:"Caveat",cursive;
  --r:16px;                 /* radio de diner */
  --sh-soft:0 12px 30px rgba(34,21,16,.10);
  --sh-off:4px 4px 0 rgba(34,21,16,.88);
  --sh-gold:5px 6px 0 var(--dorado);
}

/* ---------- 2 · Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--crema);color:var(--tinta);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:.98;text-transform:uppercase;letter-spacing:-.005em}
h1{font-size:clamp(2.4rem,7vw,4.6rem)}
h2{font-size:clamp(1.85rem,4.6vw,3rem)}
h3{font-size:1.12rem}
::selection{background:var(--dorado);color:var(--tinta)}
:focus-visible{outline:3px solid var(--dorado);outline-offset:2px;border-radius:4px}

/* ---------- 3 · Utilidades ---------- */
.wrap{width:min(1160px,92%);margin-inline:auto}
.dark{background:var(--brasa);color:var(--crema)}
.dark h2,.dark h3{color:var(--crema)}
.dark .muted{color:#CDBBA3}
section{padding:4.4rem 0;position:relative}
.center{text-align:center}
.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mb2{margin-bottom:2rem}
.lead{font-size:1.06rem;color:var(--tinta-suave);max-width:62ch}
.dark .lead{color:#DECDBA}
.muted{color:var(--piedra)}
.tagrow{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}

/* textura de papel (antes «grano») */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(42,26,17,.06) .6px,transparent .7px);background-size:4px 4px}
.dark.grain::after{opacity:.28;background-image:radial-gradient(rgba(255,255,255,.14) .5px,transparent .6px)}

/* rayas finas de toldo */
.pinstripe{background-image:repeating-linear-gradient(90deg,transparent 0 26px,rgba(42,26,17,.045) 26px 27px)}
.dark.pinstripe{background-image:repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.05) 26px 27px)}

/* etiqueta de sección (manuscrita) */
.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-script);font-size:1.45rem;font-weight:700;color:var(--salsa);line-height:1}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;opacity:.55}
.dark .eyebrow{color:var(--dorado)}

/* franja de puntitos (separador festivo, sustituye a la cinta) */
.hazard{height:16px;background-image:radial-gradient(circle,var(--dorado) 2.8px,transparent 3.2px);
  background-size:20px 16px;background-position:center;opacity:.9}

/* tarjeta genérica */
.card{background:var(--marfil);color:var(--tinta);border:1.5px solid rgba(42,26,17,.14);border-radius:var(--r);box-shadow:var(--sh-soft)}

/* sellos */
.badge{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  background:var(--dorado);color:var(--tinta);border-radius:999px;padding:.28rem .75rem}
.badge.salsa{background:var(--salsa);color:var(--marfil)}
.sticker{display:inline-block;font-family:var(--font-script);font-weight:700;font-size:1.3rem;line-height:1.05;color:var(--salsa);
  border:2px solid currentColor;border-radius:12px;padding:.32rem .7rem;transform:rotate(-6deg);
  background:rgba(252,247,234,.92);box-shadow:2px 2px 0 rgba(34,21,16,.14);white-space:nowrap}
.sticker.alt{color:var(--dorado-oscuro);transform:rotate(4deg)}
.sticker.tail{color:var(--tinta);transform:rotate(-3deg)}
@keyframes spinSeal{to{transform:rotate(360deg)}}
.spin-seal{position:absolute;z-index:6;width:128px;height:128px;animation:spinSeal 22s linear infinite;pointer-events:none}
.spin-seal text{font-family:var(--font-head);font-weight:700;font-size:13.5px;letter-spacing:2.5px;fill:var(--tinta);text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.spin-seal{animation:none}}

/* ---------- 4 · Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;gap:1.1rem;
  padding:.6rem max(4vw,1rem);transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(252,247,234,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--linea),0 10px 26px rgba(34,21,16,.07)}
.brandmark{display:flex;align-items:center;gap:.65rem;margin-right:auto}
.bm-logo{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2.5px solid var(--dorado);box-shadow:2px 2px 0 rgba(34,21,16,.2)}
.bm-txt{display:flex;flex-direction:column;line-height:1}
.bm-script{font-family:var(--font-display);font-size:1.3rem;color:var(--tinta)}
.bm-sub{font-family:var(--font-script);font-size:1rem;color:var(--piedra);margin-top:-2px}
.nav-links{display:flex;gap:1.35rem;list-style:none;font-family:var(--font-head);font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;font-size:.92rem}
.nav-links a{color:var(--tinta-suave);padding:.35rem 0;border-bottom:2.5px solid transparent;transition:color .2s,border-color .2s}
.nav-links a.on{color:var(--tinta);border-bottom-color:var(--dorado)}
.nav-links a:hover{color:var(--tinta)}
.lang{display:flex;border:1.5px solid rgba(42,26,17,.28);border-radius:999px;overflow:hidden;background:rgba(252,247,234,.5)}
.lang button{font:700 .72rem var(--font-head);letter-spacing:.06em;padding:.34rem .52rem;background:transparent;border:0;
  color:var(--tinta-suave);cursor:pointer;transition:.2s}
.lang button.on{background:var(--tinta);color:var(--marfil)}
.nav-burger{display:none;background:var(--tinta);color:var(--marfil);border:0;border-radius:10px;font-size:1.05rem;padding:.4rem .65rem;cursor:pointer}

/* ---------- 5 · Botones (chapa con sombra de 2 tintas) ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-head);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:1rem;background:var(--dorado);color:var(--tinta);border:0;border-radius:999px;
  padding:.8rem 1.5rem;cursor:pointer;box-shadow:var(--sh-off);transition:transform .16s,box-shadow .16s;position:relative}
.btn:hover{transform:translate(-1px,-2px);box-shadow:6px 7px 0 rgba(34,21,16,.88)}
.btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(34,21,16,.88)}
.btn.sm{padding:.52rem 1.02rem;font-size:.85rem;box-shadow:2.5px 2.5px 0 rgba(34,21,16,.88)}
.btn.ghost{background:transparent;border:2px solid var(--tinta);box-shadow:3px 3px 0 var(--dorado)}
.btn.ghost:hover{background:var(--tinta);color:var(--marfil)}
.btn.night{background:var(--tinta);color:var(--marfil);box-shadow:3px 3px 0 var(--dorado-oscuro)}
.btn.night:hover{box-shadow:6px 7px 0 var(--dorado-oscuro)}
.btn.on-dark{background:var(--dorado);color:var(--tinta)}
.btn.on-dark.ghost{background:transparent;border:2px solid var(--crema);color:var(--crema);box-shadow:3px 3px 0 rgba(233,182,63,.85)}
.btn.on-dark.ghost:hover{background:var(--crema);color:var(--tinta)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- 6 · Tarjetas de plato ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.35rem}
.pcard{position:relative;background:var(--marfil);border:1.5px solid rgba(42,26,17,.15);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-soft);transition:transform .25s,box-shadow .25s}
.pcard:hover{transform:translateY(-5px) rotate(-.35deg);box-shadow:var(--sh-gold),var(--sh-soft)}
.ph{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--carbon)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.pcard:hover .ph img{transform:scale(1.06)}
.ph.noimg{background:
  radial-gradient(78% 78% at 50% 42%,rgba(233,182,63,.15),transparent 72%),
  repeating-linear-gradient(135deg,var(--carbon) 0 15px,var(--grafito) 15px 30px)}
.ph.noimg::after{content:"";position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;
  border:2.5px solid rgba(233,182,63,.75);box-shadow:inset 0 0 0 12px rgba(233,182,63,.12)}
.pcard .tag{position:absolute;top:.75rem;left:.75rem;z-index:4}
.pcard .body{padding:1rem 1.15rem 1.15rem}
.pcard .name{font-family:var(--font-display);font-size:1.02rem}
.pcard .desc{font-size:.9rem;color:var(--tinta-suave);margin-top:.35rem;min-height:2.4em}
.pcard .foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.95rem}
.pcard .price{font-family:var(--font-head);font-weight:700;font-size:1.3rem;color:var(--tinta);white-space:nowrap}
.pcard .price::before{content:"· ";color:var(--dorado-oscuro)}
.pcard .plate{position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(120% 60% at var(--mx,50%) var(--my,0%),rgba(233,182,63,.14),transparent 55%)}

/* ---------- 7 · Carta resumen (puntos de menú) ---------- */
.menu-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.menu-col{background:var(--marfil);color:var(--tinta);border:1.5px solid rgba(42,26,17,.14);border-radius:var(--r);box-shadow:var(--sh-soft);padding:1.35rem 1.45rem 1.2rem}
.menu-col h3{font-family:var(--font-head);font-weight:700;font-size:1.02rem;letter-spacing:.13em;color:var(--salsa);margin-bottom:.75rem}
.menu-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.menu-col li{display:flex;align-items:baseline;gap:.55rem;font-size:.95rem}
.menu-col li .it{font-weight:500}
.menu-col li .dots{flex:1;border-bottom:2px dotted rgba(42,26,17,.28);transform:translateY(-4px)}
.menu-col li .pp{font-family:var(--font-head);font-weight:700;white-space:nowrap}

/* ---------- 8 · Reseñas (mantelitos a cuadros) ---------- */
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.revcard{position:relative;color:var(--tinta);background:#FDFAF2;border:1.5px solid rgba(42,26,17,.15);border-radius:var(--r);
  padding:1.35rem 1.4rem 1.15rem;box-shadow:var(--sh-soft);
  background-image:linear-gradient(rgba(198,74,49,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(198,74,49,.065) 1px,transparent 1px);
  background-size:26px 26px}
.revcard::before{content:"“";font-family:var(--font-display);font-size:2.7rem;line-height:1;color:var(--dorado);
  display:block;height:.55em;text-shadow:2px 2px 0 rgba(34,21,16,.12)}
.revcard p{font-size:.96rem}
.revcard .who{margin-top:1rem;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;color:var(--piedra)}

/* ---------- 9 · Local (postales) ---------- */
.locs{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.locs.one{grid-template-columns:minmax(0,760px);justify-content:center}
.loc{background:var(--marfil);color:var(--tinta);border:1.5px dashed rgba(42,26,17,.32);border-radius:var(--r);padding:1.6rem 1.6rem 1.5rem;box-shadow:var(--sh-soft)}
.loc h3{font-size:1.7rem;color:var(--salsa)}
.loc .addr{color:var(--tinta-suave);font-size:.95rem;margin-top:.3rem}
.loc .hrs{margin:.9rem 0 1.15rem;font-size:.93rem;color:var(--tinta-suave)}
.loc .hrs b{display:block;font-family:var(--font-head);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;color:var(--piedra);margin-bottom:.2rem}
.loc .btnrow{display:flex;gap:.6rem;flex-wrap:wrap}
.loc .postcard{position:relative;margin:-0.4rem -0.4rem 1.1rem;border-radius:calc(var(--r) - 4px);overflow:hidden;border:1.5px solid rgba(42,26,17,.2)}
.loc .postcard img{width:100%;aspect-ratio:21/9;object-fit:cover}
.loc .postcard .pin{position:absolute;top:.6rem;right:.6rem;background:var(--salsa);color:var(--marfil);font-family:var(--font-head);
  font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:.28rem .6rem}

/* ---------- 10 · CTA final (sol de la casa) ---------- */
.cta-final{background:var(--dorado);color:var(--tinta);overflow:hidden;position:relative;padding:3.8rem 0 4rem}
.cta-final::before{content:"";position:absolute;inset:-45% -18%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(34,21,16,.07) 0 6deg,transparent 6deg 12deg);
  -webkit-mask:radial-gradient(46% 46% at 50% 50%,#000 34%,transparent 72%);
  mask:radial-gradient(46% 46% at 50% 50%,#000 34%,transparent 72%)}
.cta-final>*{position:relative}
.cta-final h2{font-size:clamp(2.2rem,6vw,3.8rem)}
.cta-final p{margin:.65rem auto 1.5rem;max-width:54ch;font-weight:500}

/* ---------- 11 · Marquee (franja de toldo) ---------- */
.marquee{overflow:hidden;background:var(--tinta);border-top:2px solid var(--dorado);border-bottom:2px solid var(--dorado)}
.marquee .track{display:flex;gap:2.6rem;padding:.8rem 0;white-space:nowrap;width:max-content;
  animation:slideL 26s linear infinite}
@keyframes slideL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee span{font-family:var(--font-display);font-size:1.02rem;color:var(--crema);letter-spacing:.04em;text-transform:uppercase}
.marquee .sep{color:var(--dorado);font-family:var(--font-body)}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* ---------- 12 · Footer ---------- */
.foot{background:var(--marfil);border-top:1px solid var(--linea);padding:3.4rem 0 1.7rem;color:var(--tinta-suave)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2.2rem}
.foot h4{font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--piedra);margin-bottom:.65rem}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:.4rem;font-size:.94rem}
.foot a:hover{color:var(--salsa)}
.foot .bm-script{font-size:1.6rem;color:var(--tinta)}
.foot .bm-sub{font-size:1.15rem}
.foot .sello-foot{display:flex;align-items:center;gap:.8rem;margin-top:1rem}
.legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px dotted var(--linea);
  margin-top:2.4rem;padding-top:1.1rem;font-size:.78rem;color:var(--piedra)}
.legal a{text-decoration:underline dotted}

/* ---------- 13 · Reveals (entrada suave con asentado) ---------- */
.rv{opacity:0;transform:translateY(24px) scale(.99);transition:opacity .7s ease,transform .75s cubic-bezier(.2,.8,.2,1.04)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- 14 · Responsive ---------- */
@media (max-width:980px){
  .revgrid{grid-template-columns:1fr}
  .locs{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  .nav{padding:.55rem 4vw}
  .nav-links{position:fixed;top:0;right:0;bottom:0;width:min(320px,84%);background:var(--marfil);
    flex-direction:column;gap:1.6rem;padding:5.4rem 2rem;font-size:1.15rem;
    transform:translateX(106%);transition:transform .32s cubic-bezier(.2,.8,.2,1);box-shadow:-14px 0 40px rgba(34,21,16,.16)}
  .nav-links.open{transform:none}
  .nav-burger{display:block}
  .nav .btn{display:none}
  .lang button{padding:.3rem .45rem}
}
@media (max-width:640px){
  section{padding:3.2rem 0}
  .pgrid{grid-template-columns:1fr 1fr;gap:.9rem}
  .pcard .desc{display:none}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:430px){
  .pgrid{grid-template-columns:1fr}
  .pcard .desc{display:block}
}