/* ── Globals ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { background-color: #FFF8EE; -webkit-font-smoothing: antialiased; }

/* ── Grain texture overlay ───────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── Hero ────────────────────────────────────── */
.hero-bg {
  background:
    radial-gradient(ellipse at 85% 0%,   rgba(232,150,12,.22) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 100%, rgba(200,35,27,.16)  0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%,  rgba(27,107,46,.07)  0%, transparent 60%),
    linear-gradient(155deg, #1A1208 0%, #2D1E0A 55%, #1A1208 100%);
}

/* ── Section shapes ──────────────────────────── */
.clip-top    { clip-path: polygon(0 5%,  100% 0,   100% 100%, 0 100%); }
.clip-both   { clip-path: polygon(0 4%,  100% 0,   100% 96%,  0 100%); }
.clip-bottom { clip-path: polygon(0 0,   100% 0,   100% 95%,  0 100%); }

/* ── Dot pattern ─────────────────────────────── */
.dots {
  background-image: radial-gradient(circle, rgba(232,150,12,.2) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

/* ── Marquee ─────────────────────────────────── */
.no-scroll { overflow: hidden; }

/* ── Card hover lift ─────────────────────────── */
.lift { transition: transform .28s ease, box-shadow .28s ease; will-change: transform; }
.lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(26,18,8,.13), 0 6px 12px rgba(232,150,12,.08);
}

/* ── Tinted shadows ──────────────────────────── */
.shadow-gold  { box-shadow: 0 8px 32px rgba(232,150,12,.30), 0 2px 6px rgba(232,150,12,.15); }
.shadow-ember { box-shadow: 0 8px 32px rgba(200,35,27,.25),  0 2px 6px rgba(200,35,27,.12); }
.shadow-ink   { box-shadow: 0 8px 32px rgba(26,18,8,.22),    0 2px 6px rgba(26,18,8,.10); }
.shadow-deep  { box-shadow: 0 20px 60px rgba(26,18,8,.18),   0 4px 12px rgba(26,18,8,.08); }

/* ── Gradient text ───────────────────────────── */
.text-gradient {
  background: linear-gradient(90deg, #F5B731, #E8960C, #C8231B);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Menu tabs ───────────────────────────────── */
.tab-btn.active {
  background-color: #E8960C; color: #1A1208;
  box-shadow: 0 4px 16px rgba(232,150,12,.35);
}
.tab-btn:not(.active) { background-color: transparent; color: #4A3420; }

/* ── Empanada icon ───────────────────────────── */
.empanada-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, #F5B731, #E8960C);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(232,150,12,.35);
}

/* ── Stars ───────────────────────────────────── */
.star { color: #E8960C; }

/* ── Square order button ─────────────────────── */
.order-btn {
  background: linear-gradient(135deg, #F5B731, #E8960C);
  box-shadow: 0 8px 32px rgba(232,150,12,.45), 0 2px 8px rgba(232,150,12,.20);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.order-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 40px rgba(232,150,12,.55), 0 4px 12px rgba(232,150,12,.25);
  filter: brightness(1.05);
}
.order-btn:active { transform: scale(.98); }

/* ── Facebook feed ───────────────────────────── */
.fb-feed-wrap {
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(26,18,8,.12), 0 4px 12px rgba(26,18,8,.06);
  min-height: 500px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* ── Form fields ─────────────────────────────── */
.field {
  width: 100%; background: #FFF8EE; border: 2px solid #F5E4C0;
  border-radius: 14px; padding: 13px 16px;
  font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 600; color: #1A1208;
  transition: border-color .2s, box-shadow .2s; outline: none;
}
.field:focus { border-color: #E8960C; box-shadow: 0 0 0 4px rgba(232,150,12,.12); }
.field::placeholder { color: #4A3420; opacity: .45; font-weight: 600; }
select.field { appearance: none; cursor: pointer; }
textarea.field { resize: vertical; min-height: 110px; }

/* ── Flavor checkboxes ───────────────────────── */
.flavor-check { display: none; }
.flavor-label {
  display: flex; align-items: center; gap: 10px;
  background: #FFF8EE; border: 2px solid #F5E4C0; border-radius: 12px;
  padding: 10px 14px; cursor: pointer; font-weight: 700; font-size: 13px; color: #4A3420;
  transition: border-color .2s, background .2s; user-select: none;
}
.flavor-check:checked + .flavor-label { border-color: #E8960C; background: rgba(232,150,12,.08); color: #1A1208; }
.flavor-check:checked + .flavor-label .check-box { background: #E8960C; border-color: #E8960C; }
.flavor-check:checked + .flavor-label .check-box::after { display: block; }
.check-box {
  width: 18px; height: 18px; border: 2px solid #C9A96E; border-radius: 5px;
  flex-shrink: 0; position: relative; transition: background .2s, border-color .2s;
}
.check-box::after {
  content: ''; display: none; position: absolute; top: 2px; left: 5px;
  width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(42deg);
}

/* ── Focus ring ──────────────────────────────── */
a:focus-visible, button:focus-visible {
  outline: 2px solid #E8960C; outline-offset: 3px; border-radius: 4px;
}

/* ── Scroll reveal (class added by JS so non-JS render stays visible) ── */
.js-loaded .reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.js-loaded .reveal.revealed { opacity: 1; transform: translateY(0); }