/* ============================================================
   LOS JUANCHOS — menu.css
   Image menu (photo cards) rendered by js/menu.js on the sede pages.
   Loads AFTER brand.css. Reuses tokens + components.
   ============================================================ */

.menu-section{background:var(--cream);padding:clamp(44px,6vw,80px) 0 clamp(56px,8vw,104px)}
.menu-section__head{width:min(1180px,calc(100% - 2*var(--pad)));margin:0 auto clamp(8px,2vw,18px);padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,40px)}
.menu-section__intro{flex:1 1 380px;min-width:0}
.menu-section__head .eyebrow{color:var(--red)}
.menu-section__head h2{font-size:clamp(40px,6vw,84px);color:var(--charcoal);margin:12px 0 0}
.menu-section__head p{color:var(--muted);max-width:54ch;margin:14px 0 0;font-size:15px}

/* express-service pill (shared component, also on homepage hero) */
.menu-section__express{flex:0 0 auto}
.express-banner__pill{display:inline-flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 22px 10px 11px;box-shadow:var(--shadow);font-size:clamp(13.5px,1.2vw,15px);font-weight:600;color:var(--ink);max-width:100%}
.express-banner__pill b{font-weight:800;color:var(--red)}
.express-banner__icon{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center}
.express-banner__icon svg{width:19px;height:19px;display:block}

/* sticky category nav */
.menu-nav{position:sticky;top:78px;z-index:40;display:flex;gap:8px;overflow-x:auto;padding:14px max(var(--pad), calc((100% - 1180px) / 2));margin:clamp(14px,2vw,24px) 0 clamp(24px,3vw,40px);background:rgba(245,239,230,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.menu-nav::-webkit-scrollbar{display:none}
.menu-nav-wrap{position:relative;}
@media(max-width:900px){
  .menu-nav{-webkit-mask-image:linear-gradient(to right,black 0%,black calc(100% - 56px),transparent 100%);mask-image:linear-gradient(to right,black 0%,black calc(100% - 56px),transparent 100%);}
}
.menu-nav a{flex:0 0 auto;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--orange);background:transparent;text-decoration:none;padding:9px 15px;border-radius:999px;border:1px solid var(--orange);white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.menu-nav a:hover{color:#fff;background:var(--orange);border-color:var(--orange)}

.menu-cat{padding:0 var(--pad);scroll-margin-top:150px;margin-bottom:clamp(40px,6vw,70px)}
.menu-cat:last-child{margin-bottom:0}
.menu-cat__title{width:min(1180px,100%);margin:0 auto clamp(20px,3vw,30px);font-size:clamp(30px,4.4vw,52px);color:var(--charcoal);padding-bottom:14px;border-bottom:2px solid var(--line)}
.menu-grid{width:min(1180px,100%);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}

.mcard{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mcard__img{aspect-ratio:4/3;overflow:hidden;background:#e7e1d7}
.mcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.mcard:hover .mcard__img img{transform:scale(1.05)}
.mcard__body{display:flex;flex-direction:column;gap:8px;padding:20px 20px 0;flex:1}
.mcard__head h3{font-family:"Bebas Neue",Impact,sans-serif;font-size:27px;color:var(--charcoal);line-height:1;margin:0;letter-spacing:.01em}
.mcard__desc{font-size:13px;line-height:1.55;color:var(--muted);margin:0}
.mcard__body > :nth-last-child(2){margin-bottom:16px}
.mcard__foot{margin:auto -20px 0;padding:18px 20px;min-height:90px;background:var(--cream);border-radius:0 0 18px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mcard__price{font-family:"Bebas Neue",Impact,sans-serif;font-size:26px;color:var(--red);line-height:1}
.mcard__price--two{display:flex;flex-direction:column;gap:2px;font-size:12px;font-family:Inter,Arial,sans-serif;color:var(--muted);font-weight:600;line-height:1.3}
.mcard__price--two b{font-family:"Bebas Neue",Impact,sans-serif;font-size:19px;color:var(--red);font-weight:400;margin-left:5px;letter-spacing:.01em}
.mcard__price__label{display:inline-block;min-width:54px;}
.mcard__order{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--red);text-decoration:none;border:1.5px solid var(--red);border-radius:999px;padding:8px 14px;transition:background .15s,color .15s;white-space:nowrap}
.mcard__order:hover{background:var(--red);color:#fff}

/* "Ver extras / Ver opciones" trigger, over the image */
.mcard__extras{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:var(--red);border:0;border-radius:999px;padding:8px 13px 8px 10px;font:800 11px/1 Inter,Arial,sans-serif;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;box-shadow:0 6px 18px rgba(27,27,26,.22);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s,color .15s,transform .15s}
.mcard__extras svg{width:14px;height:14px;display:block;flex:0 0 auto}
.mcard__extras:hover{background:var(--red);color:#fff;transform:translateY(-1px)}
.mcard__extras:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* per-card notes (slices / combine) */
.mcard__note{position:relative;margin:0 0 0;padding-left:17px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.mcard__note::before{content:"";position:absolute;left:1px;top:.42em;width:6px;height:6px;border-radius:50%;background:var(--red);opacity:.6}

@media(max-width:980px){.menu-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.menu-grid{grid-template-columns:1fr}.menu-nav{top:70px}.menu-cat{scroll-margin-top:130px}}

/* ============================================================
   Extras / options overlay
   ============================================================ */
body.lj-modal-open{overflow:hidden}
.lj-modal[hidden]{display:none}
.lj-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.lj-modal__overlay{position:absolute;inset:0;background:rgba(20,18,17,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:ljFade .2s ease}
.lj-modal__dialog{position:relative;z-index:1;width:min(420px,100%);max-height:min(82vh,640px);overflow:auto;-webkit-overflow-scrolling:touch;background:var(--paper);border-radius:20px;box-shadow:var(--shadow);padding:clamp(22px,4vw,30px);animation:ljPop .22s cubic-bezier(.2,.8,.3,1)}
.lj-modal__close{position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.lj-modal__close svg{width:20px;height:20px}
.lj-modal__close:hover{background:var(--red);color:#fff;border-color:var(--red)}
.lj-modal__close:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.lj-modal__eyebrow{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--red)}
.lj-modal__body h3{font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(30px,5vw,40px);line-height:1;color:var(--charcoal);margin:8px 48px 0 0;letter-spacing:.01em}
.lj-modal__sub{font-size:13px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.lj-modal__list{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.lj-modal__list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink)}
.lj-modal__name{font-weight:600}
.lj-modal__price{font-family:"Bebas Neue",Impact,sans-serif;font-size:19px;color:var(--red);letter-spacing:.02em;white-space:nowrap}
@keyframes ljFade{from{opacity:0}to{opacity:1}}
@keyframes ljPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lj-modal__overlay,.lj-modal__dialog{animation:none}}