:root{
  --bg:#0f1115; --panel:#121621cc; --text:#e8ecf5; --muted:#aab2c8;
  --accent:#d4af37; --ring:#d4af3733; --card-border:rgba(255,255,255,.12);
  --divider:rgba(255,255,255,.10);
  --shadow:0 24px 80px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); background:var(--bg)}

/* ===== Fondo selector ===== */
.lang-body .bg{position:fixed; inset:0; z-index:-2; overflow:hidden}
.bg-grad{
  position:absolute; inset:-20% -10% -10% -10%;
  background:
    radial-gradient(1200px 600px at 10% -10%, #1b2030 0%, transparent 60%),
    radial-gradient(1200px 600px at 90% 110%, #1b2030 0%, transparent 60%),
    linear-gradient(180deg, #0f1115, #0b0d11 60%, #0f1115 100%);
  animation:bgPulse 18s ease-in-out infinite alternate;
}
@keyframes bgPulse{to{filter:hue-rotate(8deg) brightness(1.03)}}
.bg-noise{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' opacity='.06'><filter id='n'><feTurbulence baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* ===== Tarjeta selector ===== */
.gate{min-height:100%; display:grid; place-items:center; padding:24px}
.card{
  width:min(880px, 92vw);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--card-border);
  border-radius:28px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  padding:28px 22px 22px;
  backdrop-filter:saturate(140%) blur(6px);
}
.card-header{display:flex; flex-direction:column; align-items:center; gap:12px}
.logo-ring{
  width:88px;height:88px;border-radius:24px; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(50px 50px at 50% 55%, rgba(212,175,55,.22), transparent 70%);
  border:1px solid var(--ring); box-shadow:0 0 0 8px rgba(212,175,55,.08);
}
.logo-img{width:78px;height:78px;object-fit:cover;border-radius:18px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.title{margin:0; text-align:center; line-height:1.1}
.title-soft{display:block; color:var(--accent); font-family:"Playfair Display",serif; font-style:italic; font-weight:600; font-size:clamp(20px,3vw,28px)}
.title-strong{display:block; font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(26px,5vw,40px)}
.subtitle{margin:6px 0 0; color:var(--muted); text-align:center}

.actions{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px auto 10px; width:min(600px, 100%)}
@media (max-width:640px){.actions{grid-template-columns:1fr}}
.pill{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 14px; border-radius:18px; cursor:pointer;
  background:#3f4451; color:#fff; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.pill:hover{transform:translateY(-2px); box-shadow:0 20px 34px rgba(0,0,0,.38); background:#4a5060}
.pill:active{transform:translateY(0)}
.flag{font-size:22px}
.pill-main{font-family:"Playfair Display",serif; font-weight:700; letter-spacing:.05em; font-size:clamp(18px,2.6vw,24px)}
.pill-sub{font-size:12px; color:#cfd6e6}

/* Animaciones de entrada */
.enter-fade{opacity:0; animation:fade .8s ease forwards}
.enter-up{opacity:0; transform:translateY(10px); animation:up .7s ease forwards}
.enter-scale{opacity:0; transform:scale(.98); animation:scaleIn .6s ease forwards}
.delay-1{animation-delay:.08s}
.delay-2{animation-delay:.16s}
@keyframes fade{to{opacity:1}}
@keyframes up{to{opacity:1; transform:none}}
@keyframes scaleIn{to{opacity:1; transform:none}}

/* ===== MENÚ (UNA SOLA COLUMNA) ===== */
.layout{max-width:760px; margin:auto; padding:28px 20px 80px}
header{margin-bottom:24px; text-align:center}
.hero{
  border:1px solid var(--divider); border-radius:24px; padding:18px 16px 20px;
  background:radial-gradient(200px 120px at 50% 0%, rgba(212,175,55,.12), transparent 70%),
             linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow:0 14px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.brand-title{font-family:"Playfair Display",serif; font-size:clamp(26px,4vw,40px); color:var(--accent); margin:4px 0 0}
.soft-italic{font-style:oblique 10deg}

/* ======= NUEVO: encabezado en 3 líneas ======= */
/* Línea 2: Marca principal "Gallo Ronco" */
.brand-name{
  margin:4px 0 2px;
  text-align:center;
  font-family:"Playfair Display", serif;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--accent);
  font-size:clamp(32px, 6vw, 48px);
  line-height:1.05;
}
/* Línea 3: Tagline "Restaurant Gallo Ronco" */
.brand-tagline{
  margin:0 0 4px;
  text-align:center;
  font-family:"Playfair Display", serif;
  font-weight:600;
  font-style:italic;
  color:var(--text);
  opacity:.9;
  font-size:clamp(18px, 3.2vw, 24px);
  line-height:1.15;
}
/* (opcional si usas estos) */
.brand-sub{ margin:6px 0 0; text-align:center; color:var(--muted); }
.brand-link{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.brand-link:hover{ filter:brightness(1.1); }

.section{margin-top:26px}
.section-title{
  font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(22px,3vw,28px);
  margin:0 0 12px; border-bottom:1px solid var(--divider); padding-bottom:6px; text-align:left;
}
.list{display:flex; flex-direction:column; gap:10px}     /* SIEMPRE UNA COLUMNA */

.dish{
  display:flex; justify-content:space-between; gap:14px;
  border:1px solid var(--divider); border-radius:12px; padding:12px 14px; background:rgba(255,255,255,.02);
}
.dish > div:first-child{flex:1 1 auto; min-width:0}
.dish-name{font-weight:600; letter-spacing:.2px}
.dish-desc{color:var(--muted); font-size:14px; margin-top:4px}
.price{font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; margin-left:12px; font-size:18px}

/* Precios grandes (si lo quieres aún más notorio) */
/* .price{font-size:20px} */

/* ===== ARREGLO DEL LOGO GIGANTE ===== */
img{max-width:100%; height:auto}

header > img,
.hero > img,
header img.logo,
.hero img.logo {
  display:block;
  width:clamp(96px, 28vw, 220px);   /* min 96px, crece con viewport, tope 220px */
  max-height:220px;
  object-fit:contain;
  margin:0 auto 12px;               /* centrado */
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}