:root{
  --carbon:#0f0e0d;
  --obsidian:#13120f;
  --card:#1a1815;
  --ink:#ece7dd;
  --ink-soft:#dfd8cb;
  --muted:#bdb6aa;
  --agave:#2e7d32;
  --barro:#c7a277;
  --line:#2a2926;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Barlow', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans";
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(46,125,50,.12), transparent 60%),
    linear-gradient(180deg, var(--obsidian) 0%, var(--carbon) 100%);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Type scale */
h1,h2,h3,.btn,.tag,.section-title,.price,.pill,nav.socials a{
  font-family: 'Barlow Condensed', 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing:.03em;
}
h1,h2,h3{margin:0}
h2{font-size: clamp(22px, 3.6vw, 30px)}
h3{font-size: clamp(18px, 2.4vw, 20px)}

a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding: clamp(16px,3vw,28px)}

/* Header */
header{display:grid;place-items:center;padding: clamp(40px,8vw,96px) 0 24px;text-align:center;gap:16px}
.logo-box{
  width:min(820px,92vw);aspect-ratio:16/7;display:grid;place-items:center;
  background: linear-gradient(180deg, #191715, #13120f);
  border:1px solid var(--line); border-radius:20px; position:relative; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  animation: rise 600ms ease both;
}
.logo-box:after{content:"";position:absolute;inset:0;background: radial-gradient(600px 200px at 50% 0%, rgba(255,255,255,.05), transparent 60%)}
.logo{width:85%;max-width:680px;height:auto;filter: drop-shadow(0 6px 20px rgba(0,0,0,.45))}
.h1{font-size: clamp(28px, 5vw, 46px);font-weight:800;letter-spacing:.04em}
.tag{
  color:var(--ink-soft);
  font-size: clamp(15px, 2.4vw, 17px);
  text-transform: uppercase;
  letter-spacing:.12em;
  animation: fadeUp 500ms ease 100ms both;
}

/* Buttons */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:12px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:999px;
  border:1px solid var(--line);background:#1a1917;color:#fff;
  font-weight:700; letter-spacing:.04em;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px); background:#22211e; border-color:#3a392f }
.btn--accent{ background: linear-gradient(180deg, var(--agave), #256927); border-color:#2c6f2d }
.btn--accent:hover{ background: linear-gradient(180deg, #318a35, #2a752c) }
.btn svg{ width:20px; height:20px; flex:0 0 20px }

/* Sections & Cards */
section{ padding: clamp(26px,6vw,52px) 0; position:relative }
.card{
  background:linear-gradient(180deg, var(--card), #151412);
  border:1px solid var(--line); border-radius:16px; padding: clamp(16px,2.6vw,22px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  animation: fadeUp 500ms ease both;
}
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){ .grid{grid-template-columns:1.2fr .8fr} }
.hr{height:1px;background:linear-gradient(90deg, transparent, rgba(199,162,119,.55), transparent);margin: 16px 0}

/* Menu */
.menu{position:relative}
.menu .section-title{
  display:flex;align-items:center;gap:10px;font-weight:800;text-transform:uppercase;letter-spacing:.10em;color:var(--barro)
}
.menu .section-title:before,.menu .section-title:after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg, transparent, var(--barro), transparent)
}
.menu-grid{display:grid;gap:12px;grid-template-columns: repeat(1, minmax(0,1fr))}
@media(min-width:760px){ .menu-grid{grid-template-columns: repeat(2, minmax(0,1fr))} }
@media(min-width:1100px){ .menu-grid{grid-template-columns: repeat(3, minmax(0,1fr))} }
.dish{background:#151411;border:1px solid var(--line);border-radius:14px;padding:14px}
.dish h3{margin:0 0 6px}
.dish .desc{color:var(--muted);font-size:15px}
.pill{
  display:inline-block; padding:6px 10px; border:1px solid #3a392f; border-radius:999px;
  font-size:13px; letter-spacing:.10em; color:#efe9dd; background:#1c1b18; margin-right:6px;
}

/* Price dot leaders */
.row{display:flex;align-items:flex-start;gap:8px}
.row h3{flex:1; font-weight:700}
.price{white-space:nowrap;font-weight:800;color:#efe9dd;font-size: clamp(18px, 2.2vw, 20px)}
.row .dots{
  flex:0 0 auto; align-self:center; height:1em; width:100%;
  background-image: radial-gradient(currentColor 1.1px, transparent 1px);
  background-size: 7px 7px; background-repeat: repeat-x; background-position: left center; opacity:.35
}

/* Vertical ribbons */
.ribbon{
  position:absolute; inset:auto 8px auto auto; right:-6px; top:18px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: rgba(199,162,119,.08); border:1px solid rgba(199,162,119,.35); color:var(--barro);
  padding:8px 6px; border-radius:10px; font-size:12px; letter-spacing:.10em; text-transform:uppercase
}
.ribbon--left{ left:-6px; right:auto }

/* Footer */
footer{margin-top:40px;border-top:1px solid #262521;background:var(--obsidian)}
.footer-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:700px){ .footer-grid{grid-template-columns:1fr auto} }
.socials{display:flex;gap:14px;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:#181714}
.copy{color:#a8a39a;font-size:13px}

/* Floating WhatsApp */
.wa{position:fixed;right:16px;bottom:16px;z-index:50}
.wa a{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;background:#25D366;color:#0b2213;font-weight:800;border-radius:999px;box-shadow:0 10px 24px rgba(0,0,0,.35)}

/* Helpers */
.muted{color:var(--muted)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.spacer{height:6px}

/* Keyframes */
@keyframes fadeUp{
  from{opacity:0; transform: translateY(8px)}
  to{opacity:1; transform: translateY(0)}
}
@keyframes rise{
  from{opacity:0; transform: translateY(10px) scale(.98)}
  to{opacity:1; transform: translateY(0) scale(1)}
}