/* ================================================================
   BRASA & HUMO — DESIGN SYSTEM
   Restaurante Premium · Carne Asada & Cochino Frito
   ================================================================ */

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  --smoke:       #0A0604;
  --ember-black: #1A0F0A;
  --brasa:       #DC2626;
  --amber:       #F59E0B;
  --mostaza:     #CA8A04;
  --cream:       #FEF2F2;
  --stone:       #A8A29E;
  --wood:        #7C2D12;

  --font-display: 'Playfair Display SC', serif;
  --font-accent:  'Bebas Neue', sans-serif;
  --font-body:    'Karla', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --ease-cinema:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);

  --sp-1: 8px;  --sp-2: 16px;  --sp-3: 24px;  --sp-5: 40px;
  --sp-8: 64px; --sp-12: 96px; --sp-20: 160px;
  --nav-h: 72px;
  --max-w: 1440px;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  background: var(--smoke);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}
body.loading { overflow: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { background: none; border: none; font-family: inherit; cursor: none; }
input, select, textarea { font-family: inherit; }

/* ── ACCESSIBILITY ───────────────────────────────────────────── */
.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;
}
.skip-link {
  position: fixed; top: -100%; left: var(--sp-3); z-index: 10000;
  background: var(--brasa); color: var(--cream);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono); font-size: 13px;
  border-radius: 0 0 4px 4px; transition: top 0.2s;
}
.skip-link:focus { top: 0; }
*:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ── GRAIN OVERLAY ───────────────────────────────────────────── */
.grain-overlay {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 998; opacity: 0.038;
  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.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.4s steps(2) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-1%,1%); }
  50%  { transform: translate(1%,-1%); }
  75%  { transform: translate(-1%,-1%); }
  100% { transform: translate(1%,1%); }
}

/* ── CURSOR ──────────────────────────────────────────────────── */
#cursor-dot {
  position: fixed; width: 5px; height: 5px;
  background: var(--cream); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.15s, height 0.15s, background 0.15s;
  mix-blend-mode: difference;
}
#cursor-ring {
  position: fixed; width: 38px; height: 38px;
  border: 1.5px solid rgba(254,242,242,0.45);
  border-radius: 50%; pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease-cinema), height 0.35s var(--ease-cinema),
              border-color 0.2s, background 0.2s;
}
.cursor-hover #cursor-dot  { width: 9px; height: 9px; background: var(--amber); }
.cursor-hover #cursor-ring {
  width: 60px; height: 60px;
  border-color: rgba(245,158,11,0.55);
  background: rgba(245,158,11,0.04);
}

/* ── SCROLL PROGRESS ─────────────────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--brasa); z-index: 1000;
  box-shadow: 0 0 10px rgba(220,38,38,0.7);
  transition: width 0.08s linear;
}

/* ── LOADER ──────────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 10000;
  background: #000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-2);
  overflow: hidden;
}
.loader-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: 0.18;
  pointer-events: none;
}
.loader-logo {
  font-family: var(--font-accent); letter-spacing: 0.35em;
  font-size: clamp(28px,7vw,72px); color: var(--cream);
  display: flex; gap: 0.04em;
}
.loader-char {
  display: inline-block; opacity: 0; transform: translateY(18px);
  transition: opacity 0.45s var(--ease-spring), transform 0.45s var(--ease-spring);
}
.loader-char.in { opacity: 1; transform: translateY(0); }
.loader-amp { color: var(--mostaza); }
.loader-sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.5em; color: var(--stone);
  opacity: 0; transition: opacity 0.5s 0.4s;
  text-transform: uppercase;
}
.loader-sub.in { opacity: 1; }
.loader-pct {
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(168,162,158,0.6); letter-spacing: 0.2em;
  margin-top: var(--sp-5);
}
.loader-bar {
  width: 180px; height: 1px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.loader-bar-fill {
  height: 100%; width: 0%; background: var(--brasa);
  transition: width 0.08s linear;
}
#loader.exit {
  opacity: 0; pointer-events: none;
  transition: opacity 0.55s var(--ease-cinema) 0.2s;
}

/* ── TYPOGRAPHY UTILS ────────────────────────────────────────── */
.mono {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--stone);
}
.section-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--stone); display: block; margin-bottom: var(--sp-3);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px,5.5vw,80px);
  line-height: 1.0; color: var(--cream); letter-spacing: -0.01em;
}

/* ── NAV ─────────────────────────────────────────────────────── */
#navbar {
  position: fixed; top: 20px; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px); max-width: 1360px; z-index: 900;
  background: rgba(10,6,4,0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(254,242,242,0.09);
  border-radius: 100px; padding: 0 var(--sp-3);
  height: var(--nav-h);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
#navbar.scrolled {
  background: rgba(10,6,4,0.82);
  border-color: rgba(254,242,242,0.05);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.nav-inner {
  height: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-3);
}
.nav-logo {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(202,138,4,0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px;
  color: var(--mostaza); letter-spacing: 0.04em; flex-shrink: 0;
}
.nav-links {
  display: flex; align-items: center; gap: var(--sp-5);
}
.nav-links a {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em; color: rgba(254,242,242,0.65);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--cream); }
.nav-cta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.13em; text-transform: uppercase;
  background: var(--brasa); color: var(--cream);
  padding: 10px var(--sp-3); border-radius: 100px;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap; flex-shrink: 0;
}
.nav-cta:hover { background: #ef4444; transform: scale(1.03); }
.nav-ham {
  display: none; flex-direction: column; gap: 5px;
  padding: 6px; border-radius: 4px; flex-shrink: 0;
}
.nav-ham span {
  display: block; width: 22px; height: 1.5px;
  background: var(--cream); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ── MOBILE DRAWER ───────────────────────────────────────────── */
#mob-nav {
  position: fixed; inset: 0; z-index: 960;
  background: var(--smoke); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-cinema);
}
#mob-nav.open { opacity: 1; pointer-events: all; }
#mob-nav ul { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
#mob-nav a {
  font-family: var(--font-display); font-size: clamp(28px,8vw,42px);
  color: var(--cream);
}
#mob-nav a:hover { color: var(--amber); }
.mob-close {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em;
  color: var(--stone); transition: color 0.2s;
}
.mob-close:hover { color: var(--cream); }
.mob-cta {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.15em; text-transform: uppercase;
  background: var(--brasa); color: var(--cream);
  padding: 14px var(--sp-5); border-radius: 100px;
}

/* ── HERO ────────────────────────────────────────────────────── */
#hero {
  position: relative; height: 100vh; min-height: 600px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  animation: ember-breathe 4.5s ease-in-out infinite alternate;
}
@keyframes ember-breathe {
  from { filter: brightness(0.82) saturate(0.88); }
  to   { filter: brightness(1.12) saturate(1.12); }
}
#smoke-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 18%, rgba(10,6,4,0.38) 55%, rgba(10,6,4,0.88) 100%),
    linear-gradient(to bottom, rgba(10,6,4,0.25) 0%, transparent 25%, transparent 65%, rgba(10,6,4,0.9) 100%);
}
.hero-meta { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hero-meta .mono {
  position: absolute; font-size: 10px; letter-spacing: 0.22em;
}
.meta-tl { top: calc(var(--nav-h) + 44px); left: clamp(var(--sp-3),4.5vw,var(--sp-12)); }
.meta-tr { top: calc(var(--nav-h) + 44px); right: clamp(var(--sp-3),4.5vw,var(--sp-12)); }
.meta-bl { bottom: clamp(60px,10vh,110px); left: clamp(var(--sp-3),4.5vw,var(--sp-12)); }
.meta-br { bottom: clamp(60px,10vh,110px); right: clamp(var(--sp-3),4.5vw,var(--sp-12)); }
.hero-content {
  position: relative; z-index: 3; text-align: center;
  padding: 0 var(--sp-3); max-width: 1260px; width: 100%;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5.2vw, 76px);
  line-height: 0.95; letter-spacing: -0.02em;
  color: var(--cream); margin-bottom: var(--sp-5);
}
.hero-line { display: block; overflow: hidden; }
.hero-line-in {
  display: block; transform: translateY(105%);
  transition: transform 0.85s var(--ease-spring);
}
body.loaded .hero-line:nth-child(1) .hero-line-in { transform: translateY(0); }
body.loaded .hero-line:nth-child(2) .hero-line-in { transform: translateY(0); transition-delay: 0.1s; }

.chroma {
  position: relative; display: inline-block;
}
.chroma::before, .chroma::after {
  content: attr(data-text); position: absolute;
  top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
}
.chroma::before {
  color: rgba(220,38,38,0.55);
  animation: ca-top 7s ease-in-out infinite;
  clip-path: polygon(0 0, 100% 0, 100% 48%, 0 48%);
}
.chroma::after {
  color: rgba(56,189,248,0.3);
  animation: ca-bot 7s ease-in-out infinite;
  clip-path: polygon(0 52%, 100% 52%, 100% 100%, 0 100%);
}
@keyframes ca-top {
  0%,100% { transform: translate(-2px,0); }
  50%     { transform: translate(2px,0); }
}
@keyframes ca-bot {
  0%,100% { transform: translate(2px,0); }
  50%     { transform: translate(-2px,0); }
}
/* ── HERO SUB — editorial credit plate (premium glass) ─────── */
.hero-sub {
  display: inline-flex; align-items: stretch;
  margin: 0 auto var(--sp-8);
  padding: 14px clamp(16px,2.2vw,28px);
  background: linear-gradient(180deg, rgba(10,6,4,0.78), rgba(10,6,4,0.62));
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: 100px;
  box-shadow:
    0 18px 50px rgba(0,0,0,0.5),
    0 0 0 1px rgba(254,242,242,0.04) inset,
    0 0 28px rgba(220,38,38,0.12);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  position: relative;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.65s 0.5s, transform 0.65s 0.5s var(--ease-spring);
}
.hero-sub::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.08), transparent);
  pointer-events: none;
}
body.loaded .hero-sub { opacity: 1; transform: translateY(0); }

.hs-rule { display: none; }

.hs-list {
  display: flex; align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: nowrap; justify-content: center;
  position: relative; z-index: 1;
}

.hs-item {
  display: inline-flex; align-items: center; gap: 10px;
  position: relative;
}
.hs-num {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.3em; color: var(--brasa);
  padding: 4px 7px;
  border: 1px solid rgba(220,38,38,0.45);
  border-radius: 3px;
  line-height: 1; font-weight: 500;
  background: linear-gradient(180deg, rgba(220,38,38,0.18), rgba(220,38,38,0.04));
  box-shadow: 0 0 12px rgba(220,38,38,0.25) inset;
}
.hs-txt {
  display: inline-flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
}
.hs-txt b {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(11px, 1.1vw, 13px);
  color: var(--cream);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hs-txt i {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(15px, 1.6vw, 19px);
  color: #FCD34D;
  letter-spacing: 0;
  text-shadow:
    0 0 18px rgba(252,211,77,0.5),
    0 1px 2px rgba(0,0,0,0.8);
  line-height: 1;
}

.hs-sep {
  width: 1px; height: 22px;
  background: linear-gradient(180deg, transparent, rgba(245,158,11,0.45) 30%, rgba(220,38,38,0.55) 70%, transparent);
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 768px) {
  .hero-sub {
    padding: 12px 18px;
    border-radius: 18px;
    max-width: 92vw;
  }
  .hs-list { flex-direction: column; gap: 10px; }
  .hs-sep {
    width: 32px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.5), transparent);
  }
  .hs-item { width: 100%; justify-content: center; }
}
.hero-ctas {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2); flex-wrap: wrap;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.65s 0.7s, transform 0.65s 0.7s var(--ease-spring);
}
body.loaded .hero-ctas { opacity: 1; transform: translateY(0); }
.btn-outline {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  border: 1.5px solid rgba(254,242,242,0.45); color: var(--cream);
  padding: 14px var(--sp-5); border-radius: 100px;
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover { border-color: var(--cream); background: rgba(254,242,242,0.07); }
.btn-primary {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  background: var(--brasa); color: var(--cream);
  padding: 14px var(--sp-5); border-radius: 100px;
  border: 1.5px solid transparent;
  transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: #ef4444; transform: scale(1.03); }
.hero-scroll {
  position: absolute; bottom: var(--sp-5); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-1); z-index: 3;
  opacity: 0; transition: opacity 0.65s 1.1s;
}
body.loaded .hero-scroll { opacity: 1; }
.scroll-line {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, transparent, var(--stone));
  animation: scroll-pulse 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scroll-pulse {
  0%,100% { transform: scaleY(0); opacity: 0; }
  50%     { transform: scaleY(1); opacity: 1; }
}

/* ── REVEAL UTILITY ──────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.75s var(--ease-spring), transform 0.75s var(--ease-spring);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ── FILOSOFÍA ───────────────────────────────────────────────── */
#filosofia {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh;
}
.fil-img-col {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
}
.fil-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.fil-img-col::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 55%, rgba(10,6,4,0.9) 100%);
  pointer-events: none; z-index: 1;
}
.fil-inset {
  position: absolute;
  bottom: 14%; right: 6%;
  width: 42%; z-index: 4;
  border: 3px solid var(--ember-black);
  box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 0 1px rgba(202,138,4,0.15);
  overflow: hidden;
}
.fil-inset img {
  width: 100%; aspect-ratio: 16/10;
  object-fit: cover; display: block;
}
.fil-inset figcaption {
  background: var(--ember-black);
  padding: 7px 12px;
  font-size: 9px; letter-spacing: 0.3em; color: var(--stone);
}
.fil-accent {
  position: absolute;
  top: 6%; left: 5%;
  width: 34%; z-index: 4;
  border: 3px solid var(--ember-black);
  box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(202,138,4,0.1);
  overflow: hidden;
}
.fil-accent img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; display: block;
}
.fil-accent figcaption {
  background: var(--ember-black);
  padding: 7px 12px;
  font-size: 9px; letter-spacing: 0.3em; color: var(--stone);
}
@media (max-width: 1024px) {
  .fil-inset, .fil-accent { display: none; }
}
.fil-img-label {
  position: absolute; bottom: var(--sp-8); left: var(--sp-5);
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(18px,2.5vw,28px); color: rgba(254,242,242,0.92); z-index: 2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
}
.fil-text-col {
  padding: clamp(var(--sp-12),12vh,var(--sp-20)) clamp(var(--sp-5),7vw,var(--sp-12));
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-8);
  background: var(--smoke);
}
.fil-title {
  font-family: var(--font-display);
  font-size: clamp(28px,3.5vw,52px); line-height: 1.0; color: var(--cream);
}
.fil-body {
  font-size: 16px; line-height: 1.85; color: var(--stone); max-width: 460px;
}
.fil-body + .fil-body { padding-top: var(--sp-2); }
.fil-body strong { color: var(--cream); font-weight: 500; }

/* ── CORTES (3D ORBIT) ───────────────────────────────────────── */
#cortes {
  background: var(--ember-black); min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: var(--sp-20) var(--sp-3) calc(var(--sp-20) + 40px); position: relative;
  overflow: hidden;
}
.cortes-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: 0.08;
  filter: saturate(0);
  pointer-events: none;
}
.cortes-header { text-align: center; margin-bottom: var(--sp-12); position: relative; z-index: 2; }

.cortes-universe {
  position: relative;
  width: 640px; height: 640px;
  max-width: min(94vw, 640px); max-height: min(94vw, 640px);
  perspective: 1400px;
  perspective-origin: 50% 45%;
  --orbit-radius: 252px;
  --tilt: 14deg;
  --spin-duration: 36s;
  z-index: 2;
}
@media (max-width: 768px) {
  .cortes-universe { --orbit-radius: 170px; --tilt: 10deg; width: 90vw; height: 90vw; }
}
@media (max-width: 480px) {
  .cortes-universe { --orbit-radius: 120px; width: 86vw; height: 86vw; }
}

/* CENTRAL PLATE */
.cortes-plate {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotateX(var(--tilt));
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, #2d1500 0%, #1A0F0A 70%);
  border: 1px solid rgba(202,138,4,0.22);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    inset 0 0 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(245,158,11,0.08);
}
@media (max-width: 768px) {
  .cortes-plate { width: 160px; height: 160px; }
}
.cortes-plate::before {
  content: ''; position: absolute; inset: -30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,38,38,0.16), transparent 70%);
  animation: glow-pulse 3.5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}
@keyframes glow-pulse {
  from { opacity: 0.55; transform: scale(0.92); }
  to   { opacity: 1;    transform: scale(1.08); }
}
.plate-video {
  position: absolute; top: 50%; left: 50%;
  width: 108%; height: 108%;
  object-fit: cover;
  transform: translate(-50%,-50%);
  filter: saturate(1.2) contrast(1.05);
  z-index: 0;
}
.plate-ring {
  position: relative; z-index: 2;
  width: 100%; height: 100%; border-radius: 50%;
  border: 1.5px solid rgba(202,138,4,0.22);
  background: radial-gradient(circle at 35% 30%, rgba(245,158,11,0.06), transparent 60%);
  display: flex; align-items: center; justify-content: center;
  animation: plate-spin var(--spin-duration) linear infinite;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.7);
}
.plate-ring::after {
  content: ''; position: absolute; inset: 14px; border-radius: 50%;
  border: 1px dashed rgba(245,158,11,0.18);
}
@keyframes plate-spin { to { transform: rotate(360deg); } }
.plate-inner-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 16px rgba(245,158,11,0.9);
  animation: pulse-dot 2s ease-in-out infinite;
  z-index: 3;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.cortes-orbit {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  transform: rotateX(var(--tilt));
  transform-origin: center;
}

/* 3D ORBITING NODES */
.orbit-rotator {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt));
  animation: orbit-spin var(--spin-duration) linear infinite;
  will-change: transform;
}
.orbit-rotator.paused,
.orbit-rotator.paused .corte-card { animation-play-state: paused; }
.orbit-rotator.dragging,
.orbit-rotator.dragging .corte-card { animation: none; }
@keyframes orbit-spin {
  from { transform: rotateX(var(--tilt)) rotateZ(0deg); }
  to   { transform: rotateX(var(--tilt)) rotateZ(360deg); }
}

.corte-node {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--orbit-radius)));
  z-index: 4;
}

.corte-card {
  position: absolute;
  top: 50%; left: 50%;
  width: 140px;
  /* Counter-rotation chain: undo node angle, then continuously undo the orbit spin */
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle)));
  background: rgba(26,15,10,0.85);
  border: 1px solid rgba(245,158,11,0.18);
  padding: 14px 12px;
  border-radius: 8px;
  text-align: center;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.3s, box-shadow 0.3s, scale 0.3s;
  animation: orbit-counter var(--spin-duration) linear infinite;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  user-select: none;
}
@keyframes orbit-counter {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle))) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle))) rotate(-360deg); }
}
.corte-card::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(245,158,11,0.4), transparent 60%, rgba(220,38,38,0.3));
  opacity: 0; transition: opacity 0.3s;
  z-index: -1;
}
.corte-card:hover {
  border-color: rgba(245,158,11,0.6);
  scale: 1.1;
  box-shadow: 0 20px 50px rgba(220,38,38,0.35), 0 0 30px rgba(245,158,11,0.2);
  z-index: 10;
}
.corte-card:hover::before { opacity: 1; }
.corte-card:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 4px;
}
.corte-card.active {
  border-color: var(--amber);
  scale: 1.12;
  background: rgba(26,15,10,0.95);
  box-shadow: 0 22px 55px rgba(245,158,11,0.3);
}

.ct-num  { font-family: var(--font-mono); font-size: 9px; color: var(--amber); letter-spacing: 0.3em; display: block; }
.ct-name { font-family: var(--font-accent); font-size: 17px; color: var(--cream); letter-spacing: 0.06em; margin: 4px 0 2px; line-height: 1.05; }
.ct-wt   { font-family: var(--font-mono); font-size: 9px; color: var(--stone); display: block; margin-bottom: 4px; }
.ct-temp { font-family: var(--font-accent); font-size: 13px; color: var(--mostaza); display: block; }
.ct-price{ font-family: var(--font-accent); font-size: 20px; color: var(--amber); display: block; margin-top: 4px; line-height: 1; }

/* Thumb image inside each orbit card */
.ct-thumb {
  width: 100%;
  height: 78px;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #2d1500 0%, #1A0F0A 60%, #0A0604 100%);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(245,158,11,0.18), 0 4px 12px rgba(0,0,0,0.5);
}
.ct-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  color: transparent; font-size: 0;
  transition: transform 0.6s var(--ease-cinema), filter 0.4s;
}
.corte-card:hover .ct-thumb img,
.corte-card.active .ct-thumb img { transform: scale(1.08); filter: brightness(1.1); }

/* Cortes 3D: compact card sizing for narrow viewports (<=480px) so orbit fits */
@media (max-width: 480px) {
  .cortes-plate { width: 120px; height: 120px; }
  .corte-card { width: 118px; padding: 8px 7px; }
  .ct-thumb { height: 62px; margin-bottom: 6px; }
  .ct-name { font-size: 12px; margin: 2px 0 1px; }
  .ct-price { font-size: 15px; margin-top: 2px; }
  .ct-temp { font-size: 10px; }
  .ct-num { font-size: 8px; }
  .ct-wt { font-size: 8px; margin-bottom: 2px; }
}

/* ORBIT CONTROLS */
.orbit-controls {
  position: absolute;
  bottom: -68px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  z-index: 10;
}
.orbit-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(26,15,10,0.75);
  border: 1px solid rgba(245,158,11,0.3);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.orbit-btn:hover {
  background: rgba(220,38,38,0.5);
  border-color: var(--amber);
  transform: translateY(-2px);
}
.orbit-btn .ic-play { display: none; }
.orbit-btn.paused .ic-pause { display: none; }
.orbit-btn.paused .ic-play { display: block; }
.orbit-hint {
  font-size: 9px;
  color: rgba(168,162,158,0.7);
  margin-left: 10px;
  white-space: nowrap;
  letter-spacing: 0.2em;
}
@media (max-width: 640px) {
  .orbit-hint { display: none; }
  .orbit-controls { bottom: -56px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-rotator,
  .corte-card,
  .plate-ring,
  .plate-inner-dot,
  .cortes-plate::before { animation: none !important; }
}

/* ── MENU ────────────────────────────────────────────────────── */
#menu { background: var(--smoke); padding: var(--sp-20) 0; }
.menu-head { padding: 0 clamp(var(--sp-3),5vw,var(--sp-12)); margin-bottom: var(--sp-8); }
.menu-big-title {
  font-family: var(--font-display);
  font-size: clamp(52px,11vw,150px); line-height: 0.9;
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
}
.mbt-outline {
  -webkit-text-stroke: 1px rgba(254,242,242,0.18);
  color: transparent;
}
.mbt-solid { color: var(--cream); font-style: italic; }
.menu-filters {
  padding: 0 clamp(var(--sp-3),5vw,var(--sp-12));
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.f-btn {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stone); border: 1px solid rgba(168,162,158,0.28);
  padding: 8px 16px; border-radius: 100px; transition: all 0.2s;
}
.f-btn:hover, .f-btn.active {
  color: var(--smoke); background: var(--cream); border-color: var(--cream);
}
.menu-bento {
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: 14px; padding: 0 clamp(var(--sp-3),5vw,var(--sp-12));
}
.mc { /* menu-card */
  position: relative; border-radius: 4px; overflow: hidden;
  background: var(--ember-black); border: 1px solid rgba(254,242,242,0.055);
  cursor: pointer; transition: border-color 0.3s;
}
.mc:hover { border-color: rgba(202,138,4,0.32); }
.mc:hover .mc-img-in { transform: scale(1.06); filter: brightness(1.14); }
.mc.lg { grid-column: span 6; min-height: 420px; grid-row: span 2; }
.mc.md { grid-column: span 4; min-height: 210px; }
.mc.sm { grid-column: span 3; min-height: 175px; display: flex; flex-direction: column; }
.mc-img {
  position: absolute; inset: 0; overflow: hidden;
  /* Skeleton placeholder visible while image loads (slow networks) */
  background:
    linear-gradient(135deg, #2d1500 0%, #1A0F0A 60%, #0A0604 100%);
}
.mc.sm .mc-img { position: relative; inset: auto; height: 90px; flex-shrink: 0; }
.mc.sm .mc-info { position: static; padding: 12px; flex: 1; }
.mc-img-in {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.65s var(--ease-cinema), filter 0.65s, opacity 0.4s;
  /* Hide broken-image icon + alt text while loading/failing so card stays elegant */
  color: transparent; font-size: 0;
}
img.mc-img-in:not([src]),
img.mc-img-in[src=""] { opacity: 0; }
.mc-video { z-index: 0; }
.mc-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(220,38,38,0.85);
  color: var(--cream);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 9px !important;
  letter-spacing: 0.25em !important;
  z-index: 3;
  backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 5px;
}
.mc-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cream);
  animation: pulse-dot 1.5s ease-in-out infinite;
}
.mc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,6,4,0.94) 0%, rgba(10,6,4,0.35) 45%, transparent 100%);
}
.mc.sm .mc-overlay { background: none; }
.mc-info { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--sp-3); z-index: 2; }
.mc-origin { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.3em; color: var(--stone); display: block; margin-bottom: 4px; }
.mc-name { font-family: var(--font-display); font-size: clamp(15px,1.8vw,22px); color: var(--cream); line-height: 1.1; margin-bottom: 4px; }
.mc-desc {
  font-size: 12px; color: var(--stone); line-height: 1.5; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mc.sm .mc-desc { display: none; }
.mc-foot { display: flex; align-items: center; justify-content: space-between; }
.mc-price { font-family: var(--font-accent); font-size: clamp(18px,2.5vw,28px); color: var(--amber); line-height: 1; }
.mc-spice { display: flex; gap: 4px; align-items: center; }
.sd { width: 6px; height: 6px; border-radius: 50%; background: rgba(168,162,158,0.28); }
.sd.on { background: var(--brasa); }

/* img tints */
.im-tomahawk       { background: linear-gradient(155deg,#3a0800,#5c1a00 40%,#2a0600); }
.im-picanha        { background: linear-gradient(140deg,#2d0800,#4a1200 50%,#1a0500); }
.im-vacio          { background: linear-gradient(155deg,#3d1000,#5a1a00 45%,#2a0800); }
.im-costilla       { background: linear-gradient(145deg,#2a0a00,#4a1500 45%,#1a0600); }
.im-pernil         { background: linear-gradient(145deg,#2d0c00,#4a1a00 50%,#1a0800); }
.im-cochino-spiedo { background: linear-gradient(160deg,#3a0c00,#5c2000 40%,#2d0e00); }
.im-provoleta      { background: linear-gradient(155deg,#1a1000,#3a2a00 50%,#1a1200); }
.im-morcilla       { background: linear-gradient(140deg,#150500,#2d0a00 50%,#0f0300); }
.im-yuca           { background: linear-gradient(145deg,#2d2000,#4a3600 50%,#1a1400); }
.im-arroz          { background: linear-gradient(155deg,#1a2000,#2a3a00 50%,#101800); }
.im-flan           { background: linear-gradient(145deg,#2a1800,#4a3000 50%,#1a1000); }
.im-treches        { background: linear-gradient(155deg,#1a1500,#342a00 50%,#120f00); }
.im-mezcal         { background: linear-gradient(140deg,#1a1200,#302200 50%,#0f0a00); }
.im-oldfashioned   { background: linear-gradient(155deg,#1a0e00,#2e1a00 50%,#0f0800); }

/* ── BRASERO ─────────────────────────────────────────────────── */
#brasero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: var(--sp-20) var(--sp-3);
  text-align: center; overflow: hidden;
}
.brasero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: brightness(0.7);
  animation: ember-breathe 3.5s ease-in-out infinite alternate;
}
.brasero-veil { position: absolute; inset: 0; background: rgba(0,0,0,0.52); }
.brasero-content { position: relative; z-index: 2; max-width: 900px; width: 100%; }
.brasero-title {
  font-family: var(--font-display);
  font-size: clamp(28px,4.5vw,64px); color: var(--cream);
  line-height: 1.1; margin-bottom: var(--sp-12);
}
.brasero-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: var(--sp-3); margin-bottom: var(--sp-8);
}
.stat-g {
  background: rgba(254,242,242,0.04);
  border: 1px solid rgba(254,242,242,0.1);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 4px; padding: var(--sp-5) var(--sp-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.stat-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; color: var(--stone); }
.stat-val {
  font-family: var(--font-accent);
  font-size: clamp(44px,7vw,88px); color: var(--cream); line-height: 1;
}
.stat-unit { font-family: var(--font-accent); font-size: 20px; color: var(--amber); }
.fuel-wrap { position: relative; width: 120px; height: 76px; }
.fuel-svg { width: 120px; height: 76px; }
.fuel-bg-arc { stroke: rgba(254,242,242,0.1); stroke-width: 7; fill: none; stroke-linecap: round; }
.fuel-fill-arc {
  stroke: var(--amber); stroke-width: 7; fill: none;
  stroke-linecap: round; stroke-dasharray: 165;
  stroke-dashoffset: 44; /* 73% */
  filter: drop-shadow(0 0 5px rgba(245,158,11,0.55));
  transition: stroke-dashoffset 1.8s var(--ease-cinema);
}
.fuel-pct {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-accent); font-size: 22px; color: var(--amber);
}
.brasero-copy {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--stone);
  max-width: 580px; margin: 0 auto; line-height: 2.1;
}
.brasero-hours { color: var(--amber); }

/* ── GALLERY ─────────────────────────────────────────────────── */
#atmosfera {
  position: relative; height: 100vh; overflow: hidden; background: var(--smoke);
}
.gal-header {
  position: absolute; top: var(--sp-8); left: clamp(var(--sp-3),5vw,var(--sp-12)); z-index: 5;
}
.gal-outer { height: 100%; overflow: hidden; }
.gal-track { display: flex; height: 100%; width: max-content; }
.gal-item {
  position: relative; width: 68vw; max-width: 880px; height: 100%;
  flex-shrink: 0; overflow: hidden; margin-right: 14px;
}
.gal-item:first-child { margin-left: clamp(var(--sp-3),5vw,var(--sp-12)); }
.gal-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.7s var(--ease-cinema);
}
.gal-item:hover .gal-img { transform: scale(1.03); }
.gal-ovl {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,6,4,0.88) 0%, rgba(10,6,4,0.2) 45%, transparent 100%);
}
.gal-cap {
  position: absolute; bottom: var(--sp-8); left: var(--sp-5); right: var(--sp-5); z-index: 2;
}
.gal-cap-num { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.3em; color: var(--stone); display: block; margin-bottom: 6px; }
.gal-cap-text { font-family: var(--font-display); font-style: italic; font-size: clamp(18px,2.8vw,34px); color: var(--cream); line-height: 1.2; }
.ga1 { background: linear-gradient(150deg,#2d1000,#4a2200 40%,#1a0c00); }
.ga2 { background: linear-gradient(140deg,#1a0800,#3a1400 50%,#100400); }
.ga3 { background: linear-gradient(160deg,#1a1200,#3a2800 50%,#0f0a00); }
.ga4 { background: linear-gradient(145deg,#0d0c0c,#1a1a18 50%,#080808); }
.ga5 { background: linear-gradient(155deg,#080f1a,#0f1f35 50%,#040a12); }
.ga6 { background: linear-gradient(140deg,#2a0c05,#4a1a0a 50%,#1a0805); }
.gal-prog {
  position: absolute; bottom: var(--sp-5);
  left: clamp(var(--sp-3),5vw,var(--sp-12));
  right: clamp(var(--sp-3),5vw,var(--sp-12));
  z-index: 5; display: flex; align-items: center; gap: var(--sp-3);
}
.gal-prog-line {
  flex: 1; height: 1px; background: rgba(254,242,242,0.1);
  position: relative; overflow: hidden;
}
.gal-prog-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0%;
  background: var(--amber); transition: width 0.3s var(--ease-cinema);
}
.gal-prog-pct { font-family: var(--font-mono); font-size: 10px; color: var(--stone); letter-spacing: 0.2em; }

/* ── EXPERIENCES ─────────────────────────────────────────────── */
#experiencias { background: var(--ember-black); padding: var(--sp-20) 0; }
.exp-head { padding: 0 clamp(var(--sp-3),5vw,var(--sp-12)); margin-bottom: var(--sp-8); }
.exp-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: var(--sp-3); padding: 0 clamp(var(--sp-3),5vw,var(--sp-12));
}
.exp-card {
  background: rgba(254,242,242,0.03); border: 1px solid rgba(254,242,242,0.08);
  border-radius: 4px; overflow: hidden;
  transition: transform 0.42s var(--ease-cinema), border-color 0.3s, box-shadow 0.42s;
}
.exp-card:hover {
  transform: translateY(-9px);
  border-color: rgba(202,138,4,0.32);
  box-shadow: 0 28px 56px rgba(0,0,0,0.45);
}
.exp-img { height: 230px; position: relative; overflow: hidden; }
.exp-img-in {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.65s var(--ease-cinema);
}
.exp-card:hover .exp-img-in { transform: scale(1.06); }
.ei-chef  { background: linear-gradient(150deg,#2a1200,#4a2200 40%,#1a0c00); }
.ei-taller{ background: linear-gradient(140deg,#3a0c00,#5c1a00 50%,#2a0800); }
.ei-cava  { background: linear-gradient(155deg,#08081a,#10101e 50%,#040410); }
.exp-body {
  padding: var(--sp-5); display: flex; flex-direction: column; gap: 10px;
}
.exp-title { font-family: var(--font-display); font-size: clamp(18px,2.2vw,26px); color: var(--cream); line-height: 1.1; }
.exp-desc  { font-size: 13px; color: var(--stone); line-height: 1.75; }
.exp-price { font-family: var(--font-accent); font-size: 26px; color: var(--amber); }
.btn-exp {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); border: 1px solid rgba(254,242,242,0.28);
  padding: 10px var(--sp-3); border-radius: 100px;
  margin-top: 4px; transition: border-color 0.2s, background 0.2s;
}
.btn-exp:hover { border-color: var(--cream); background: rgba(254,242,242,0.06); }

/* ── PRESS ───────────────────────────────────────────────────── */
#prensa { background: var(--cream); color: var(--smoke); padding: var(--sp-20) 0; }
.press-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 clamp(var(--sp-3),5vw,var(--sp-12));
}
.press-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.35em; color: rgba(10,6,4,0.38); margin-bottom: var(--sp-8); display: block; }
.press-quotes { display: flex; flex-direction: column; gap: 0; }
.press-q {
  border-top: 1px solid rgba(10,6,4,0.1);
  padding: var(--sp-5) 0;
}
.press-q p {
  font-family: var(--font-display); font-size: clamp(20px,3.8vw,46px);
  color: var(--smoke); line-height: 1.15; margin-bottom: 10px; font-style: italic;
}
.press-q footer {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.15em; color: rgba(10,6,4,0.45);
}
.press-stars { color: var(--brasa); }
.press-logos {
  display: flex; gap: var(--sp-8); align-items: center; flex-wrap: wrap;
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid rgba(10,6,4,0.1); opacity: 0.35;
}
.press-logo { font-family: var(--font-display); font-size: clamp(14px,1.8vw,20px); color: var(--smoke); letter-spacing: 0.08em; }

/* ── RESERVA ─────────────────────────────────────────────────── */
#reserva { background: var(--smoke); min-height: 100vh; padding: var(--sp-20) 0; }
.res-head { padding: 0 clamp(var(--sp-3),5vw,var(--sp-12)); margin-bottom: var(--sp-8); }
.res-title { font-family: var(--font-display); font-size: clamp(28px,4.5vw,64px); color: var(--cream); line-height: 1.05; }
.res-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-8); padding: 0 clamp(var(--sp-3),5vw,var(--sp-12));
  align-items: start;
}
.res-form {
  background: rgba(254,242,242,0.03); border: 1px solid rgba(254,242,242,0.09);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 4px; padding: var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.f-grp { display: flex; flex-direction: column; gap: 6px; }
.f-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--stone); }
.f-inp {
  background: rgba(254,242,242,0.06); border: 1px solid rgba(254,242,242,0.12);
  border-radius: 4px; padding: 11px 14px;
  font-family: var(--font-body); font-size: 14px; color: var(--cream);
  width: 100%; outline: none; transition: border-color 0.2s, background 0.2s;
}
.f-inp::placeholder { color: rgba(168,162,158,0.45); }
.f-inp:focus { border-color: rgba(202,138,4,0.5); background: rgba(254,242,242,0.09); }
.f-inp.err { border-color: var(--brasa); animation: shake 0.28s ease; }
.f-inp.ok  { border-color: rgba(34,197,94,0.55); }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-5px); }
  75%     { transform: translateX(5px); }
}
.stepper {
  display: flex; align-items: center; gap: var(--sp-2);
  background: rgba(254,242,242,0.06); border: 1px solid rgba(254,242,242,0.12);
  border-radius: 4px; padding: 6px 14px;
}
.step-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(254,242,242,0.18);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream); font-size: 20px; line-height: 1;
  transition: background 0.2s;
}
.step-btn:hover { background: rgba(254,242,242,0.1); }
.step-val {
  font-family: var(--font-accent); font-size: 26px; color: var(--cream);
  min-width: 36px; text-align: center;
}
.time-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.t-slot {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--stone); border: 1px solid rgba(168,162,158,0.28);
  padding: 7px 14px; border-radius: 100px; transition: all 0.2s;
}
.t-slot:hover, .t-slot.active { color: var(--smoke); background: var(--cream); border-color: var(--cream); }
.btn-submit {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--brasa); color: var(--cream);
  padding: 18px var(--sp-5); border-radius: 4px;
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background 0.2s, transform 0.2s;
}
.btn-submit:hover { background: #ef4444; transform: translateY(-1px); }
.btn-submit.loading { opacity: 0.7; pointer-events: none; }
.btn-submit.success { background: #16a34a; pointer-events: none; }
.f-micro { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--stone); text-align: center; line-height: 1.7; }
.res-img {
  position: sticky; top: var(--sp-12); height: 520px;
  border-radius: 4px; overflow: hidden;
  background: linear-gradient(150deg,#2a1200,#4a2200 40%,#1a0c00);
}
.res-img::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 70%, rgba(220,38,38,0.08), transparent);
}
.res-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,6,4,0.6) 0%, transparent 50%);
}

/* ── LOCATION ────────────────────────────────────────────────── */
#ubicacion { display: grid; grid-template-columns: 1fr 1fr; background: var(--ember-black); min-height: 55vh; }
.map-col {
  position: relative; min-height: 380px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,0.018) 0,rgba(255,255,255,0.018) 1px,transparent 1px,transparent 44px),
    repeating-linear-gradient(90deg,rgba(255,255,255,0.018) 0,rgba(255,255,255,0.018) 1px,transparent 1px,transparent 44px),
    radial-gradient(circle at 50% 50%,#0f1825,#080e18);
}
.map-pin-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.map-pulse {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(220,38,38,0.12);
  animation: mpulse 2.4s ease-out infinite;
}
@keyframes mpulse { from { transform: translate(-50%,-50%) scale(0.7); opacity: 0.8; } to { transform: translate(-50%,-50%) scale(2.8); opacity: 0; } }
.map-pin-icon {
  width: 50px; height: 50px; background: var(--brasa);
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;
  box-shadow: 0 0 0 8px rgba(220,38,38,0.14), 0 0 0 18px rgba(220,38,38,0.06);
}
.map-pin-icon span { transform: rotate(45deg); font-family: var(--font-accent); font-size: 16px; color: var(--cream); }
.map-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.25em; color: var(--stone); }
.loc-info {
  padding: clamp(var(--sp-8),8vh,var(--sp-12)) clamp(var(--sp-5),6vw,var(--sp-12));
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5);
}
.loc-street { font-family: var(--font-display); font-size: clamp(18px,2.5vw,28px); color: var(--cream); line-height: 1.25; }
.loc-hours { display: flex; flex-direction: column; gap: 5px; }
.h-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--stone);
  padding-bottom: 5px; border-bottom: 1px solid rgba(168,162,158,0.1);
}
.h-row.today { color: var(--amber); }
.loc-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 4px; }
.btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; padding: 10px var(--sp-3);
  border-radius: 100px; transition: opacity 0.2s, transform 0.2s;
}
.btn-wa:hover { opacity: 0.9; transform: scale(1.02); }
.btn-social {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.13em; color: var(--stone);
  border: 1px solid rgba(168,162,158,0.28);
  padding: 10px var(--sp-3); border-radius: 100px;
  background: none; transition: color 0.2s, border-color 0.2s;
}
.btn-social:hover { color: var(--cream); border-color: rgba(254,242,242,0.4); }
.loc-coords { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: rgba(168,162,158,0.4); }

/* ── FOOTER ──────────────────────────────────────────────────── */
#footer {
  background: linear-gradient(180deg, var(--smoke) 0%, #060302 100%);
  border-top: 1px solid rgba(254,242,242,0.055);
  overflow: hidden; position: relative;
}
#footer::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80vw; max-width: 1200px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,38,38,0.45), transparent);
}
.footer-eyebrow {
  text-align: left; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.45em; color: var(--brasa); margin-bottom: var(--sp-2);
  text-transform: uppercase;
}

/* ── NEWSLETTER BAND ─────────────────────────────────────────── */
.footer-newsletter {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
  gap: var(--sp-8); padding: var(--sp-12) clamp(var(--sp-3),5vw,var(--sp-12)) var(--sp-8);
  border-bottom: 1px solid rgba(254,242,242,0.055);
}
.fn-title {
  font-family: var(--font-display); font-size: clamp(24px,3vw,40px);
  line-height: 1.1; color: var(--cream); letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
}
.fn-sub {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--stone); text-transform: uppercase;
}
.fn-form {
  display: flex; gap: 8px; background: rgba(254,242,242,0.04);
  border: 1px solid rgba(254,242,242,0.09); border-radius: 100px;
  padding: 6px; transition: border-color 0.3s;
}
.fn-form:focus-within { border-color: rgba(220,38,38,0.5); }
.fn-form input {
  flex: 1; background: transparent; border: 0; outline: 0;
  padding: 0 var(--sp-3); color: var(--cream);
  font-family: var(--font-mono); font-size: 13px; min-width: 0;
}
.fn-form input::placeholder { color: rgba(168,162,158,0.5); }
.fn-form button {
  background: var(--brasa); color: var(--cream); border: 0;
  border-radius: 100px; padding: 14px var(--sp-3);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  cursor: pointer; transition: background 0.2s, transform 0.2s; white-space: nowrap;
}
.fn-form button:hover { background: #B91C1C; transform: translateY(-1px); }

/* ── GIANT WORDMARK — FIRE KINETIC ───────────────────────────── */
.footer-wm-wrap {
  position: relative; overflow: hidden;
  padding: var(--sp-8) var(--sp-3) var(--sp-5);
  isolation: isolate;
}
.footer-wm-wrap::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 90%, rgba(220,38,38,0.22), transparent 60%),
    radial-gradient(ellipse 40% 40% at 30% 70%, rgba(245,158,11,0.10), transparent 60%),
    radial-gradient(ellipse 30% 30% at 70% 80%, rgba(220,38,38,0.12), transparent 60%);
  pointer-events: none; z-index: -1;
  animation: wm-pulse 6s ease-in-out infinite alternate;
}
@keyframes wm-pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.08); }
}

.footer-wordmark {
  position: relative; text-align: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px,10vw,170px); line-height: 0.95;
  letter-spacing: -0.025em; user-select: none;
  margin: 0; white-space: nowrap;
}
.footer-wordmark > span {
  display: block;
}
.footer-wordmark .wm-main,
.footer-wordmark .wm-shine {
  position: absolute; inset: 0;
  text-align: center;
}
.footer-wordmark .wm-glow { position: relative; }

/* Glow halo layer */
.wm-glow {
  color: transparent;
  text-shadow:
    0 0 18px rgba(220,38,38,0.55),
    0 0 42px rgba(220,38,38,0.35),
    0 0 90px rgba(245,158,11,0.25),
    0 0 140px rgba(220,38,38,0.18);
  filter: blur(0.5px);
  animation: wm-flicker 3.6s ease-in-out infinite;
}
@keyframes wm-flicker {
  0%, 100% { opacity: 0.85; }
  45%      { opacity: 1; }
  48%      { opacity: 0.65; }
  52%      { opacity: 1; }
  70%      { opacity: 0.78; }
}

/* Main fire gradient text */
.wm-main {
  background: linear-gradient(
    180deg,
    #FEF2F2 0%,
    #FCD34D 22%,
    #F59E0B 42%,
    #DC2626 68%,
    #7F1D1D 90%,
    #3F0A0A 100%
  );
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  background-size: 100% 200%;
  background-position: 0% 0%;
  animation: wm-fire 8s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 18px rgba(220,38,38,0.35));
}
@keyframes wm-fire {
  0%   { background-position: 0% 0%;   }
  100% { background-position: 0% 100%; }
}

/* Shine sweep layer */
.wm-shine {
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(254,242,242,0.6) 48%,
    rgba(252,211,77,0.85) 50%,
    rgba(254,242,242,0.6) 52%,
    transparent 70%
  );
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  background-size: 300% 100%;
  background-position: 150% 0;
  animation: wm-shine 5.5s ease-in-out infinite;
  animation-delay: 2s;
  mix-blend-mode: screen;
}
@keyframes wm-shine {
  0%   { background-position: 150% 0; }
  50%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}

/* Embers floating up */
.wm-embers {
  position: absolute; inset: 0; pointer-events: none;
  z-index: 0; overflow: hidden;
}
.ember {
  position: absolute; bottom: -10px;
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #FCD34D 0%, #DC2626 50%, transparent 75%);
  box-shadow: 0 0 8px rgba(252,211,77,0.7), 0 0 16px rgba(220,38,38,0.5);
  opacity: 0;
  animation: ember-rise 7s linear infinite;
}
.ember.e1 { left: 8%;  width: 3px; height: 3px; animation-delay: 0s;   animation-duration: 8s; }
.ember.e2 { left: 18%; width: 5px; height: 5px; animation-delay: 1.2s; animation-duration: 6s; }
.ember.e3 { left: 28%; width: 3px; height: 3px; animation-delay: 2.5s; animation-duration: 7s; }
.ember.e4 { left: 42%; width: 4px; height: 4px; animation-delay: 0.6s; animation-duration: 9s; }
.ember.e5 { left: 55%; width: 6px; height: 6px; animation-delay: 3.1s; animation-duration: 7.5s; }
.ember.e6 { left: 65%; width: 3px; height: 3px; animation-delay: 1.8s; animation-duration: 8s; }
.ember.e7 { left: 76%; width: 5px; height: 5px; animation-delay: 4.0s; animation-duration: 6.5s; }
.ember.e8 { left: 87%; width: 4px; height: 4px; animation-delay: 2.2s; animation-duration: 9s; }
.ember.e9 { left: 94%; width: 3px; height: 3px; animation-delay: 5.0s; animation-duration: 7s; }
@keyframes ember-rise {
  0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(-50%) translateX(8px) scale(1); opacity: 0.9; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-100%) translateX(-6px) scale(0.4); opacity: 0; }
}

/* Decorative under-line */
.wm-line {
  position: relative; max-width: 360px; margin: var(--sp-3) auto 0;
  height: 1px;
}
.wm-line span {
  display: block; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(220,38,38,0.8) 30%, rgba(252,211,77,0.95) 50%, rgba(220,38,38,0.8) 70%, transparent);
  box-shadow: 0 0 12px rgba(220,38,38,0.5);
  animation: wm-line-shift 4s ease-in-out infinite alternate;
}
@keyframes wm-line-shift {
  0%   { transform: scaleX(0.7); opacity: 0.7; }
  100% { transform: scaleX(1);   opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .wm-main, .wm-shine, .wm-glow, .ember, .wm-line span, .footer-wm-wrap::before { animation: none !important; }
}

/* ── MAIN GRID ───────────────────────────────────────────────── */
.footer-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.9fr;
  gap: var(--sp-8); padding: var(--sp-8) clamp(var(--sp-3),5vw,var(--sp-12));
  border-top: 1px solid rgba(254,242,242,0.055);
}
.footer-col h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--brasa); margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: 1px solid rgba(254,242,242,0.07);
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 13px; color: rgba(254,242,242,0.55);
  transition: color 0.2s, padding-left 0.2s; display: inline-block;
}
.footer-col a:hover { color: var(--cream); padding-left: 6px; }

/* Brand column */
.footer-brand { gap: var(--sp-3); display: flex; flex-direction: column; }
.footer-logo { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.fl-mark {
  font-family: var(--font-display); font-size: 32px; color: var(--cream);
  letter-spacing: -0.01em; line-height: 1;
}
.fl-est {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.4em;
  color: var(--brasa);
}
.footer-tag {
  font-size: 13px; line-height: 1.7; color: rgba(254,242,242,0.55);
  max-width: 320px;
}
.footer-awards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-2); }
.fa-badge {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em;
  color: var(--stone); border: 1px solid rgba(254,242,242,0.12);
  padding: 6px 10px; border-radius: 100px;
}

/* Contact column */
.footer-contact { font-style: normal; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-contact p {
  font-size: 13px; line-height: 1.55; color: rgba(254,242,242,0.7);
}
.footer-contact a { color: rgba(254,242,242,0.7); transition: color 0.2s; }
.footer-contact a:hover { color: var(--cream); }
.fc-lbl {
  display: block; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.3em; color: var(--stone); margin-bottom: 4px;
  text-transform: uppercase;
}

/* Hours column */
.footer-hours li {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; padding: 8px 0;
  border-bottom: 1px dashed rgba(254,242,242,0.06);
}
.footer-hours span {
  font-family: var(--font-mono); letter-spacing: 0.15em;
  color: var(--stone); text-transform: uppercase; font-size: 10px;
}
.footer-hours b {
  font-weight: 500; color: rgba(254,242,242,0.75);
  font-family: var(--font-mono); font-size: 11px;
}
.footer-hours .fh-closed b { color: var(--brasa); }

/* ── SOCIAL ROW ──────────────────────────────────────────────── */
.footer-social {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-5) clamp(var(--sp-3),5vw,var(--sp-12));
  border-top: 1px solid rgba(254,242,242,0.055);
}
.fs-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 100px;
  border: 1px solid rgba(254,242,242,0.1);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;
  color: rgba(254,242,242,0.65); text-transform: uppercase;
  transition: all 0.25s;
}
.fs-link:hover {
  background: var(--brasa); border-color: var(--brasa);
  color: var(--cream); transform: translateY(-2px);
}
.fs-link svg { opacity: 0.85; }

/* ── BOTTOM STRIP ────────────────────────────────────────────── */
.footer-btm {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) clamp(var(--sp-3),5vw,var(--sp-12));
  border-top: 1px solid rgba(254,242,242,0.055);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.13em; color: rgba(168,162,158,0.5);
  flex-wrap: wrap; gap: var(--sp-2);
}
.fb-legal { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.fb-legal a {
  font-size: 10px; letter-spacing: 0.13em; color: rgba(168,162,158,0.5);
  transition: color 0.2s; text-transform: uppercase;
}
.fb-legal a:hover { color: var(--cream); }
.fb-right { color: var(--brasa); }

/* ── FLOATING ────────────────────────────────────────────────── */
.float-wa {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 800;
  width: 54px; height: 54px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 22px rgba(37,211,102,0.32);
  animation: wa-pulse 3.2s ease-in-out infinite;
  transition: transform 0.3s var(--ease-cinema), opacity 0.3s, box-shadow 0.2s;
}
.float-wa:hover { transform: scale(1.1); box-shadow: 0 6px 32px rgba(37,211,102,0.42); }
.float-wa.is-hidden {
  transform: translateY(120%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  animation: none;
}
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 4px 22px rgba(37,211,102,0.32); }
  50%     { box-shadow: 0 4px 22px rgba(37,211,102,0.32), 0 0 0 14px rgba(37,211,102,0.07); }
}
#music-btn {
  position: fixed; top: calc(var(--nav-h) + 44px); right: var(--sp-5);
  z-index: 800; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(10,6,4,0.72); border: 1px solid rgba(254,242,242,0.1);
  backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center;
  color: var(--stone); transition: color 0.2s, border-color 0.2s;
}
#music-btn:hover, #music-btn.on { color: var(--amber); border-color: rgba(245,158,11,0.4); }

/* ── MODAL ───────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(10,6,4,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-3);
  opacity: 0; pointer-events: none; transition: opacity 0.32s var(--ease-cinema);
}
.modal-bg.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--ember-black); border: 1px solid rgba(254,242,242,0.1);
  border-radius: 4px; width: 100%; max-width: 820px; max-height: 90vh;
  overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr;
  position: relative;
  transform: translateY(18px) scale(0.975);
  transition: transform 0.42s var(--ease-spring);
}
.modal-bg.open .modal-box { transform: translateY(0) scale(1); }
.modal-img-col { position: relative; min-height: 320px; overflow: hidden; }
.modal-img-in { position: absolute; inset: 0; }
.modal-body { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }
.modal-close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(254,242,242,0.1); display: flex; align-items: center;
  justify-content: center; color: var(--cream); z-index: 5;
  transition: background 0.2s;
}
.modal-close:hover { background: rgba(254,242,242,0.2); }
.modal-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; color: var(--stone); }
.modal-name { font-family: var(--font-display); font-size: clamp(22px,3vw,34px); color: var(--cream); line-height: 1.1; }
.modal-price { font-family: var(--font-accent); font-size: 42px; color: var(--amber); line-height: 1; }
.modal-desc { font-size: 13px; color: var(--stone); line-height: 1.85; }
.modal-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--cream); background: rgba(254,242,242,0.06);
  border: 1px solid rgba(254,242,242,0.1); padding: 4px 10px; border-radius: 100px;
}
.modal-pair { font-family: var(--font-mono); font-size: 11px; color: var(--amber); letter-spacing: 0.1em; }
.modal-cta {
  background: var(--brasa); color: var(--cream);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 14px var(--sp-3); border-radius: 4px; border: none;
  transition: background 0.2s; margin-top: auto;
}
.modal-cta:hover { background: #ef4444; }

/* ── COOKIES ─────────────────────────────────────────────────── */
#cookie-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: rgba(26,15,10,0.96); border-top: 1px solid rgba(254,242,242,0.07);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: var(--sp-3) clamp(var(--sp-3),5vw,var(--sp-12));
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  transform: translateY(100%); transition: transform 0.55s var(--ease-spring);
}
#cookie-bar.show { transform: translateY(0); }
.ck-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--stone); max-width: 560px; line-height: 1.65; }
.ck-text a { color: var(--amber); text-decoration: underline; }
.ck-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.ck-ok {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em;
  background: var(--cream); color: var(--smoke);
  padding: 8px var(--sp-3); border-radius: 100px; border: none; transition: opacity 0.2s;
}
.ck-ok:hover { opacity: 0.85; }
.ck-no {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em;
  color: var(--stone); border: 1px solid rgba(168,162,158,0.28);
  padding: 8px var(--sp-3); border-radius: 100px; background: none; transition: color 0.2s;
}
.ck-no:hover { color: var(--cream); }

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .grain-overlay { display: none; }
  #cursor-dot, #cursor-ring { display: none; }
  body { cursor: auto; }
  button { cursor: pointer; }
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .mc.lg { grid-column: span 8; }
  .mc.md { grid-column: span 6; }
  .mc.sm { grid-column: span 6; }
}
@media (max-width: 1024px) {
  #filosofia { grid-template-columns: 1fr; }
  .fil-img-col { height: 52vh; position: relative; }
  .cortes-universe { width: 480px; height: 480px; }
  .exp-grid { grid-template-columns: 1fr 1fr; }
  .res-split { grid-template-columns: 1fr; }
  .res-img { display: none; }
  #ubicacion { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .footer-newsletter { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .nav-ham { display: flex; }
  .mc.lg, .mc.md, .mc.sm { grid-column: span 12; }
  .mc.lg { min-height: 300px; }
  .mc.sm { flex-direction: row; }
  .mc.sm .mc-img { height: auto; width: 110px; flex-shrink: 0; }
  .brasero-stats { grid-template-columns: 1fr; }
  .exp-grid { grid-template-columns: 1fr; }
  /* Mobile: drop GSAP pin trick, let users swipe the gallery natively */
  #atmosfera { height: auto; min-height: 70vh; }
  .gal-outer { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; height: 70vh; }
  .gal-track { width: max-content; height: 100%; }
  .gal-item { width: 82vw; height: 100%; scroll-snap-align: center; }
  .gal-prog { display: none; }
  .gal-header { position: relative; top: auto; left: auto; padding: var(--sp-5) var(--sp-3) var(--sp-3); }
  .modal-box { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .modal-img-col { display: block; min-height: 220px; max-height: 240px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); padding: var(--sp-5) var(--sp-3); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-newsletter { padding: var(--sp-8) var(--sp-3) var(--sp-5); }
  .fn-form { flex-direction: column; border-radius: 14px; padding: 8px; }
  .fn-form input { padding: 12px var(--sp-2); }
  .fn-form button { border-radius: 10px; padding: 14px; }
  .footer-social { padding: var(--sp-3) var(--sp-3); justify-content: center; }
  .footer-btm { flex-direction: column; text-align: center; }
  .fb-legal { justify-content: center; }
  .cortes-universe { width: min(88vw,420px); height: min(88vw,420px); }
  .f-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .fs-link span { display: none; }
  .fs-link { padding: 12px; }
  .fa-badge { font-size: 8px; padding: 5px 8px; }
  .meta-tr, .meta-br { display: none; }
}