@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Montserrat:wght@400;500;600&display=swap');

:root{
  --bg:#080808;
  --panel:#0d0d0d;
  --gold:#d7ad55;
  --gold2:#f0cc79;
  --text:#f0eee9;
  --muted:#aaa7a0;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{font-family:Montserrat,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.site-header{
  position:sticky;top:0;z-index:20;
  background:#080808;border-bottom:1px solid rgba(215,173,85,.28);
  padding:14px 18px 12px
}
.brand{text-align:center;max-width:620px;margin:auto}
.brand img{display:block;width:min(78vw,430px);height:auto;margin:0 auto 3px}
.tagline{font-size:9px;letter-spacing:4px;color:#c8c5bd}

.tabs{
  position:sticky;top:92px;z-index:19;display:flex;gap:5px;overflow:auto;
  padding:12px;background:#080808;border-bottom:1px solid rgba(255,255,255,.12)
}
.tab{
  flex:1;min-width:110px;background:none;text-decoration:none;color:#aaa;
  text-align:center;padding:12px 8px;border:1px solid transparent;border-radius:28px;
  font-family:Montserrat,Arial,sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer
}
.tab.active{color:var(--gold2);border-color:var(--gold)}

.page{display:none;max-width:820px;margin:0 auto;padding:34px 16px 70px}
.page.active-page{display:block}

.section-title{
  display:flex;align-items:end;justify-content:space-between;gap:18px;
  padding-bottom:18px;border-bottom:1px solid var(--gold);margin-bottom:28px
}
.eyebrow{font-size:10px;letter-spacing:3px;color:var(--gold2)}
h1{
  font-family:Cinzel,Georgia,serif;font-size:38px;line-height:1;margin:8px 0 0;
  letter-spacing:4px;color:var(--gold2)
}
.section-title p{max-width:170px;text-align:right;color:#c3c0ba;font-size:12px;line-height:1.5;margin:0}

.cards{display:grid;gap:28px}
.card{
  overflow:hidden;border:1px solid rgba(215,173,85,.65);border-radius:24px;background:var(--panel);
  box-shadow:0 14px 45px rgba(0,0,0,.35)
}
.dish-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.card-body{padding:22px}
.name-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
h2{
  font-family:Cinzel,Georgia,serif;font-size:21px;line-height:1.2;margin:0;color:var(--gold2);
  letter-spacing:1.2px
}
.price{font-family:Cinzel,Georgia,serif;font-size:27px;color:var(--gold2);white-space:nowrap}
.card p{margin:13px 0 18px;color:#d2d0cb;font-size:15px;line-height:1.6}
.allergens{
  border-top:1px solid rgba(215,173,85,.35);padding-top:12px;
  color:#c2b9a4;font-size:10px;letter-spacing:1px;text-transform:uppercase
}
.pending{color:#77736b}
.photo-placeholder{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#101010,#070707);
  color:#77736b;letter-spacing:2px;font-size:10px
}

.empty-page{
  min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;border:1px dashed rgba(215,173,85,.45);border-radius:24px;padding:40px
}
.empty-mark{font-size:42px;filter:grayscale(.4);margin-bottom:18px}
.empty-page h2{font-size:25px;margin-bottom:12px}
.empty-page p{max-width:500px;color:#99958d;line-height:1.7;font-size:14px;margin:0}

footer{text-align:center;padding:30px 20px 50px;border-top:1px solid rgba(255,255,255,.08)}
footer img{width:220px;max-width:70%;opacity:.9}
footer p{font-size:10px;letter-spacing:2px;color:#777;margin:12px 0 0}

@media(min-width:760px){
  .site-header{padding-top:20px}
  .tabs{top:102px;max-width:820px;margin:auto}
  .page{padding-top:48px}
  .cards{grid-template-columns:1fr 1fr}
  .card:first-child{grid-column:1/-1}
  h1{font-size:46px}
}

.zoomable{cursor:zoom-in}
.lightbox{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.94)
}
.lightbox.open{display:flex}
.lightbox-inner{width:min(94vw,1100px);text-align:center}
.lightbox-inner img{
  display:block;width:100%;max-height:82vh;object-fit:contain;
  border:1px solid rgba(215,173,85,.7);border-radius:12px
}
#lightbox-title{
  margin-top:14px;color:var(--gold2);font-family:Cinzel,Georgia,serif;
  letter-spacing:2px;font-size:15px
}
.lightbox-close{
  position:absolute;right:18px;top:10px;background:none;border:0;
  color:var(--gold2);font-size:42px;font-weight:300;cursor:pointer;line-height:1
}

/* Raciones: tres columnas en escritorio, sin destacar artificialmente la primera */
@media(min-width:760px){
  .raciones-cards{grid-template-columns:repeat(3,1fr)}
  .raciones-cards .card:first-child{grid-column:auto}
  .raciones-cards .card-body{padding:20px}
  .raciones-cards h2{font-size:18px}
  .raciones-cards .price{font-size:23px}
}
.pending-card{border-style:dashed;border-color:rgba(215,173,85,.45)}
.pending-card .photo-placeholder{color:#8a867d}
.photo-placeholder span{border:1px solid rgba(215,173,85,.35);border-radius:999px;padding:10px 14px}