/* ============================================================
   BRASAS — Parrilla argentina de autor
   Paleta: carbón / ceniza / hueso / brasa / oro viejo / vino
   ============================================================ */

:root{
  --ink:        #080706;   /* carbón profundo */
  --ink-2:      #0F0C0A;
  --ash:        #17120F;   /* ceniza caliente */
  --ash-2:      #221A15;
  --bone:       #EDE4D6;   /* hueso */
  --bone-dim:   #A79C8C;
  --muted:      #6E6459;
  --ember:      #E2571F;   /* brasa */
  --ember-hot:  #FF7A18;
  --ember-deep: #A62E0C;
  --gold:       #C9A227;   /* oro viejo */
  --wine:       #5E1A24;

  --grad-ember: linear-gradient(180deg,#FFC24A 0%,#FF7A18 32%,#E2571F 62%,#A62E0C 100%);

  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-sans: "Jost", -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --wrap: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink); color:var(--bone);
  font-family:var(--f-sans); font-weight:300; font-size:16px; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--ember); color:#fff; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:32px; }
.section{ position:relative; padding:clamp(90px,11vw,170px) 0; }
.center{ text-align:center; }
.section p.center{ max-width:none; margin-inline:auto; }

/* ---------- Tipografía ---------- */
.h2{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.3rem,5.4vw,4.6rem); line-height:1.04;
  letter-spacing:-.015em; color:var(--bone);
}
.h2.center{ margin-inline:auto; max-width:16ch; }
.kicker{
  font-size:.7rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ember); font-weight:400; margin-bottom:22px;
}
.lead{ font-size:1.08rem; color:var(--bone-dim); max-width:52ch; margin-top:26px; }
.section p{ color:var(--bone-dim); max-width:56ch; }
.section p + p{ margin-top:16px; }

/* ---------- Grano + viñeta ---------- */
.grain{
  position:fixed; inset:-120%; z-index:9000; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 700ms steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:8990; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* ---------- Cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  width:9px; height:9px; border-radius:50%; background:var(--ember);
  transform:translate(-50%,-50%); mix-blend-mode:screen;
  transition:width .35s var(--ease), height .35s var(--ease), background .3s;
  display:grid; place-items:center;
}
.cursor.is-hover{ width:74px; height:74px; background:rgba(226,87,31,.16); backdrop-filter:blur(2px); }
.cursor__label{
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone);
  opacity:0; transform:scale(.6); transition:opacity .3s, transform .3s var(--ease); white-space:nowrap;
}
.cursor.is-hover .cursor__label{ opacity:1; transform:scale(1); }
.cursor-glow{
  position:fixed; top:0; left:0; z-index:1; pointer-events:none;
  width:520px; height:520px; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(226,87,31,.11) 0%, transparent 62%);
  opacity:0; transition:opacity .8s;
}
body.cursor-ready .cursor-glow{ opacity:1; }
@media (hover:none),(max-width:900px){ .cursor,.cursor-glow{ display:none; } }

/* ---------- Scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:9200; background:rgba(237,228,214,.06); }
.scroll-progress i{ display:block; height:100%; width:0; background:var(--grad-ember); box-shadow:0 0 14px rgba(255,122,24,.7); }

/* ============================ PRELOADER ============================ */
.preloader{
  position:fixed; inset:0; z-index:9800; background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ display:grid; justify-items:center; gap:20px; }
.preloader__ember{ width:44px; height:58px; }
.flame--outer{ fill:var(--ember-deep); animation:flick 1.5s ease-in-out infinite; transform-origin:50% 100%; }
.flame--inner{ fill:var(--ember-hot); animation:flick 1.1s ease-in-out infinite reverse; transform-origin:50% 100%; }
@keyframes flick{
  0%,100%{ transform:scale(1,1) translateX(0) }
  25%{ transform:scale(.94,1.06) translateX(-1px) }
  50%{ transform:scale(1.05,.95) translateX(1px) }
  75%{ transform:scale(.97,1.03) translateX(0) }
}
.preloader__word{ display:flex; gap:.42em; font-family:var(--f-display); font-size:1.6rem; letter-spacing:.3em; color:var(--bone-dim); }
.preloader__word span{ opacity:0; animation:preIn .7s var(--ease) forwards; }
.preloader__word span:nth-child(1){animation-delay:.05s}
.preloader__word span:nth-child(2){animation-delay:.13s}
.preloader__word span:nth-child(3){animation-delay:.21s}
.preloader__word span:nth-child(4){animation-delay:.29s}
.preloader__word span:nth-child(5){animation-delay:.37s}
.preloader__word span:nth-child(6){animation-delay:.45s}
.pre-s{ background:var(--grad-ember); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes preIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.preloader__bar{ width:180px; height:1px; background:rgba(237,228,214,.12); overflow:hidden; }
.preloader__bar i{ display:block; height:100%; width:0; background:var(--grad-ember); }
.preloader__pct{ font-size:.62rem; letter-spacing:.34em; color:var(--muted); }

/* ============================ NAV ============================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:9100;
  display:flex; align-items:center; gap:28px;
  padding:26px clamp(20px,4vw,52px);
  transition:padding .5s var(--ease), background .5s, backdrop-filter .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:14px clamp(20px,4vw,52px);
  background:rgba(8,7,6,.72); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(237,228,214,.07);
}
.nav__brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.nav__mark svg{ width:15px; fill:var(--ember); animation:flick 2.4s ease-in-out infinite; transform-origin:50% 100%; }
.nav__name{ font-family:var(--f-display); font-size:1.32rem; letter-spacing:.34em; }
.nav__name em{
  font-style:normal; background:var(--grad-ember);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav__links{ display:flex; gap:clamp(18px,2.4vw,32px); }
.nav__links a{ white-space:nowrap; }
.nav__links a{
  position:relative; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); padding:4px 0; transition:color .35s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ember); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:hover,.nav__links a.is-current{ color:var(--bone); }
.nav__links a:hover::after,.nav__links a.is-current::after{ transform:scaleX(1); transform-origin:left; }

.nav__burger{ display:none; background:none; border:0; width:34px; height:22px; position:relative; cursor:pointer; }
.nav__burger i{ position:absolute; left:0; height:1px; width:100%; background:var(--bone); transition:.45s var(--ease); }
.nav__burger i:nth-child(1){ top:2px } .nav__burger i:nth-child(2){ top:10px; width:70% } .nav__burger i:nth-child(3){ top:18px }
.nav__burger.is-open i:nth-child(1){ top:10px; transform:rotate(45deg) }
.nav__burger.is-open i:nth-child(2){ opacity:0 }
.nav__burger.is-open i:nth-child(3){ top:10px; transform:rotate(-45deg) }

.mobile-menu{
  position:fixed; inset:0; z-index:9050; background:var(--ink-2);
  display:grid; align-content:center; justify-items:center; gap:8px;
  clip-path:circle(0% at 92% 4%); transition:clip-path .8s var(--ease);
}
.mobile-menu.is-open{ clip-path:circle(150% at 92% 4%); }
.mobile-menu a{ font-family:var(--f-display); font-size:2.4rem; color:var(--bone-dim); transition:color .3s, letter-spacing .5s var(--ease); }
.mobile-menu a:hover{ color:var(--ember); letter-spacing:.04em; }
.mobile-menu__foot{ margin-top:34px; font-size:.68rem; letter-spacing:.24em; color:var(--muted); text-transform:uppercase; }

/* ============================ BOTONES ============================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:16px 34px; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  border-radius:2px; overflow:hidden; cursor:pointer; border:1px solid transparent;
  will-change:transform; transition:color .4s, border-color .4s, box-shadow .5s;
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--grad-ember); transform:translateY(101%);
  transition:transform .58s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn--solid{ background:var(--ember); color:#140A05; border-color:var(--ember); box-shadow:0 10px 40px -14px rgba(226,87,31,.8); }
.btn--solid::before{ background:linear-gradient(180deg,#FFD57A,#FF7A18); }
.btn--solid:hover{ color:#140A05; box-shadow:0 16px 54px -12px rgba(255,122,24,.9); }
.btn--line{ border-color:rgba(237,228,214,.22); color:var(--bone); }
.btn--line:hover{ color:#140A05; border-color:var(--ember); }
.btn--ghost{ border-color:rgba(237,228,214,.2); color:var(--bone); padding:12px 24px; }
.btn--ghost:hover{ color:#140A05; border-color:var(--ember); }
.btn--block{ width:100%; margin-top:14px; }

/* ============================ HERO ============================ */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:center;
  overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(226,87,31,.30) 0%, rgba(166,46,12,.10) 34%, transparent 66%),
    radial-gradient(80% 60% at 50% 0%, rgba(94,26,36,.20), transparent 62%),
    var(--ink);
}
.hero__photo{ position:absolute; inset:-6% 0; z-index:0; will-change:transform; }
.hero__photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 62%;
  opacity:.5; filter:contrast(1.04) saturate(.72) brightness(.55);
  animation:heroPhoto 26s var(--ease-io) infinite alternate;
}
@keyframes heroPhoto{ from{ transform:scale(1.06) } to{ transform:scale(1.16) } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,7,6,.96) 0%, rgba(8,7,6,.5) 30%, rgba(8,7,6,.62) 58%, rgba(8,7,6,.99) 100%),
    linear-gradient(90deg, rgba(8,7,6,.95) 0%, rgba(8,7,6,.62) 42%, rgba(8,7,6,.2) 100%),
    radial-gradient(70% 55% at 30% 46%, rgba(8,7,6,.55), transparent 70%);
}
.hero__three,.hero__embers{ position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.hero__embers{ z-index:2; pointer-events:none; }

.hero__smoke{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.smoke{
  position:absolute; bottom:-30%; border-radius:50%; filter:blur(60px);
  background:radial-gradient(circle, rgba(237,228,214,.055), transparent 70%);
}
.smoke--1{ left:8%;  width:46vw; height:46vw; animation:smokeUp 22s linear infinite; }
.smoke--2{ left:44%; width:38vw; height:38vw; animation:smokeUp 28s linear infinite 6s; }
.smoke--3{ left:72%; width:42vw; height:42vw; animation:smokeUp 25s linear infinite 12s; }
@keyframes smokeUp{
  0%{ transform:translate3d(0,10%,0) scale(.7); opacity:0 }
  22%{ opacity:.9 }
  100%{ transform:translate3d(6vw,-135%,0) scale(1.5); opacity:0 }
}

.hero__silhouette{
  position:absolute; right:2vw; bottom:0; z-index:3; width:min(620px,52vw); opacity:1;
  filter:drop-shadow(0 0 60px rgba(0,0,0,.9));
  pointer-events:none; will-change:transform;
}
.sil-grill{ width:100%; }
.sil-solid{ fill:#020202; }
.sil-grate rect{ fill:#020202; }
.sil-fire path{ fill:var(--ember-hot); filter:drop-shadow(0 0 7px rgba(255,122,24,.8)); transform-origin:50% 100%; }
.sil-fire .f1{ animation:flick 1.3s ease-in-out infinite }
.sil-fire .f2{ animation:flick 1.7s ease-in-out infinite .2s }
.sil-fire .f3{ animation:flick 1.1s ease-in-out infinite .4s }
.sil-smoke-lines path{ fill:none; stroke:rgba(237,228,214,.22); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:5 7; animation:smokeDrift 3.4s linear infinite; }
.sil-smoke-lines path:nth-child(2){ animation-duration:4.2s }
.sil-smoke-lines path:nth-child(3){ animation-duration:3.8s }
@keyframes smokeDrift{ to{ stroke-dashoffset:-48 } }
.sil-arm{ transform-origin:92px 126px; animation:armFlip 4.6s var(--ease-io) infinite; }
@keyframes armFlip{
  0%,58%,100%{ transform:rotate(0deg) }
  66%{ transform:rotate(-16deg) }
  76%{ transform:rotate(6deg) }
  86%{ transform:rotate(-3deg) }
}
.sil-man{ animation:breathe 5s ease-in-out infinite; transform-origin:70px 200px; }
@keyframes breathe{ 0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(-2px) scaleY(1.006)} }

.hero__content{ position:relative; z-index:4; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,4vw,52px); }
.hero__eyebrow{ font-size:.66rem; letter-spacing:.4em; text-transform:uppercase; color:var(--bone-dim); }

.reveal-line{ overflow:hidden; }
.reveal-line span{ display:inline-block; transform:translateY(110%); transition:transform 1.1s var(--ease); }
body.is-ready .reveal-line span{ transform:none; }
.hero__sub .reveal-line span,.hero__sub span{ transition-delay:.9s; }

.hero__title{
  display:flex; margin:.06em 0 .1em; line-height:.86;
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(4.4rem,18.5vw,17rem); letter-spacing:.01em;
}
.ltr{
  position:relative; display:inline-block; opacity:0;
  transform:translateY(60%) rotateX(-60deg); transform-origin:50% 100%;
  transition:opacity 1s var(--ease), transform 1.2s var(--ease);
  color:var(--bone);
}
body.is-ready .ltr{ opacity:1; transform:none; }
.hero__title .ltr:nth-child(1){ transition-delay:.30s }
.hero__title .ltr:nth-child(2){ transition-delay:.38s }
.hero__title .ltr:nth-child(3){ transition-delay:.46s }
.hero__title .ltr:nth-child(4){ transition-delay:.54s }
.hero__title .ltr:nth-child(5){ transition-delay:.62s }
.hero__title .ltr:nth-child(6){ transition-delay:.70s }

/* --- LA S DEL MEDIO: brasa viva --- */
.ltr--fire{
  background:var(--grad-ember);
  background-size:100% 320%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:emberFlow 4.6s ease-in-out infinite;
  /* nota: no usar filter aquí — rompe el background-clip:text en Chromium */
  text-shadow:0 0 30px rgba(255,122,24,.45), 0 0 80px rgba(226,87,31,.30);
}
@keyframes emberFlow{
  0%,100%{ background-position:50% 100% }
  50%{ background-position:50% 0% }
}
.ltr__glow{
  position:absolute; left:50%; top:52%; width:150%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,122,24,.42) 0%, rgba(226,87,31,.16) 38%, transparent 66%);
  border-radius:50%; z-index:-1; pointer-events:none;
  animation:pulseGlow 3.2s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.85 } 50%{ transform:translate(-50%,-50%) scale(1.16); opacity:1 } }
.ltr__flame{
  position:absolute; left:50%; bottom:78%; width:22%; height:34%; transform:translateX(-50%);
  background:var(--grad-ember); border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  filter:blur(7px); opacity:.85; transform-origin:50% 100%;
  animation:tip 1.4s ease-in-out infinite;
}
@keyframes tip{
  0%,100%{ transform:translateX(-50%) scale(1,1) }
  30%{ transform:translateX(-54%) scale(.86,1.22) }
  60%{ transform:translateX(-46%) scale(1.1,.9) }
}
.ltr--fire::after{
  content:""; position:absolute; left:50%; top:0; width:130%; height:100%;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent 20%, rgba(255,220,150,.32) 50%, transparent 80%);
  mix-blend-mode:screen; pointer-events:none;
  animation:sheen 5.4s ease-in-out infinite;
}
@keyframes sheen{ 0%,72%,100%{ opacity:0; transform:translateX(-160%) } 82%{ opacity:1 } 92%{ opacity:0; transform:translateX(60%) } }

.hero__sub{ font-family:var(--f-display); font-style:italic; font-size:clamp(1.1rem,2.3vw,1.7rem); color:var(--bone-dim); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:44px; opacity:0; transform:translateY(20px); transition:opacity .9s 1.15s var(--ease), transform .9s 1.15s var(--ease); }
body.is-ready .hero__actions{ opacity:1; transform:none; }

.hero__meta{
  position:absolute; left:0; right:0; bottom:42px; z-index:4;
  max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,4vw,52px);
  display:flex; gap:clamp(24px,5vw,72px); flex-wrap:wrap;
  opacity:0; transform:translateY(16px); transition:opacity 1s 1.4s var(--ease), transform 1s 1.4s var(--ease);
}
body.is-ready .hero__meta{ opacity:1; transform:none; }
.hero__meta-item{ display:grid; gap:2px; }
.hero__meta-item b{ font-weight:400; font-size:.82rem; letter-spacing:.12em; color:var(--bone); }
.hero__meta-item span{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

.hero__scroll{ position:absolute; left:50%; bottom:38px; z-index:5; transform:translateX(-50%); display:grid; justify-items:center; gap:8px; }
.hero__scroll i{ display:block; width:1px; height:52px; background:linear-gradient(180deg,transparent,var(--ember)); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; top:-100%; left:0; width:1px; height:100%; background:var(--bone); animation:scrollRun 2.2s var(--ease-io) infinite; }
@keyframes scrollRun{ to{ top:100% } }
.hero__scroll span{ font-size:.56rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); }
@media (max-width:900px){ .hero__scroll{ display:none } }

/* ============================ MARQUEE ============================ */
.marquee{ border-block:1px solid rgba(237,228,214,.08); padding:20px 0; overflow:hidden; background:var(--ink-2); }
.marquee__track{ display:flex; gap:44px; align-items:center; width:max-content; white-space:nowrap; will-change:transform; }
.marquee__track span{ font-family:var(--f-display); font-size:clamp(1.1rem,2.2vw,1.7rem); color:var(--bone-dim); letter-spacing:.06em; }
.marquee__track i{ color:var(--ember); font-style:normal; font-size:.8rem; }

/* ============================ HISTORIA ============================ */
.historia{ background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%); }
.historia__grid{ display:grid; grid-template-columns:.85fr 1fr; gap:clamp(40px,7vw,110px); align-items:center; }
.historia__art{ will-change:transform; }

/* --- Stack de fotos --- */
.photo-stack{ position:relative; padding-bottom:60px; padding-right:40px; }
.photo{
  position:relative; overflow:hidden; border-radius:3px;
  border:1px solid rgba(237,228,214,.09);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.95);
  transform-style:preserve-3d;
}
.photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.85) contrast(1.05) brightness(.86);
  transition:transform 1.2s var(--ease), filter .8s var(--ease);
}
.photo:hover img{ transform:scale(1.06); filter:saturate(1) contrast(1.08) brightness(.98); }
.photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,7,6,.15) 0%, transparent 40%, rgba(8,7,6,.85) 100%);
}
.photo--main{ aspect-ratio:4/3; }
.photo--main figcaption{
  position:absolute; left:22px; bottom:18px; z-index:2;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--bone);
}
.photo--sub{
  position:absolute; right:0; bottom:0; width:52%; aspect-ratio:4/3; z-index:3;
  box-shadow:0 40px 80px -40px rgba(0,0,0,1);
}
.photo-stack__glow{
  position:absolute; left:-12%; bottom:-18%; width:70%; aspect-ratio:1; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(226,87,31,.28), transparent 66%);
  animation:pulseGlow 5s ease-in-out infinite;
}
.photo-stack .art-cross{
  position:absolute; left:-6%; top:-8%; width:34%; z-index:4; pointer-events:none;
  opacity:.9; filter:drop-shadow(0 10px 30px rgba(0,0,0,.9));
}

.ember-card{
  position:relative; border:1px solid rgba(237,228,214,.09); border-radius:3px;
  background:linear-gradient(160deg, rgba(34,26,21,.9), rgba(8,7,6,.9));
  padding:34px; transform-style:preserve-3d; transition:box-shadow .6s;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.ember-card:hover{ box-shadow:0 50px 110px -46px rgba(226,87,31,.42); }
.ember-card__glow{
  position:absolute; inset:auto 0 -10% 0; height:60%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, rgba(226,87,31,.30), transparent 70%);
  animation:pulseGlow 4s ease-in-out infinite;
}
.art-cross .stroke-line{ fill:none; stroke:rgba(237,228,214,.30); stroke-width:2.5; }
.art-cross .lamb{ fill:rgba(237,228,214,.05); stroke:rgba(237,228,214,.34); stroke-width:2; animation:swing 6s ease-in-out infinite; transform-origin:200px 170px; }
@keyframes swing{ 0%,100%{transform:rotate(-1.4deg)} 50%{transform:rotate(1.4deg)} }
.cross-smoke path{ fill:none; stroke:rgba(237,228,214,.2); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:6 9; animation:smokeDrift 4s linear infinite; }
.cross-fire path{ transform-origin:50% 100%; animation:flick 1.5s ease-in-out infinite; filter:drop-shadow(0 0 16px rgba(255,122,24,.6)); }
.cross-fire path:nth-child(2){ animation-duration:1.15s }
.coals ellipse{ fill:var(--ember-deep); animation:coalPulse 3s ease-in-out infinite; }
.coals ellipse:nth-child(2){ animation-delay:.5s; fill:var(--ember) }
.coals ellipse:nth-child(3){ animation-delay:1s }
@keyframes coalPulse{ 0%,100%{opacity:.45} 50%{opacity:1} }

.stats{ display:flex; gap:clamp(24px,4vw,56px); margin-top:52px; flex-wrap:wrap; }
.stat b{ display:block; font-family:var(--f-display); font-size:clamp(2.4rem,4.4vw,3.6rem); font-weight:300; color:var(--ember); line-height:1; }
.stat span{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }

/* ============================ BANDA SILUETAS ============================ */
.sil-band{ position:relative; height:200px; overflow:hidden; background:var(--ink-2);
  border-top:1px solid rgba(237,228,214,.05); }
.sil-band::after{
  content:""; position:absolute; inset:auto 0 0 0; height:70%;
  background:linear-gradient(180deg,transparent,rgba(226,87,31,.14));
  pointer-events:none;
}
.sil-band__layer{ position:absolute; bottom:0; left:0; width:220%; will-change:transform; }
.sil-band__layer--back{ opacity:.28; }
.sil-band__layer--back svg{ width:100%; height:160px; fill:#000; }
.sil-band__layer--mid svg{ width:100%; height:200px; fill:#000; }
.sil-band__layer--mid g{ fill:#000; }
.band-fire path{ fill:var(--ember); filter:drop-shadow(0 0 8px rgba(255,122,24,.8)); transform-origin:50% 100%; animation:flick 1.3s ease-in-out infinite; }
.band-fire--b path{ animation-duration:1.7s }
.band-arm{ transform-origin:46px 40px; animation:armFlip 5.2s var(--ease-io) infinite; }
.band-lamb{ animation:swing 7s ease-in-out infinite; transform-origin:42px 46px; }
.band-guest{ animation:breathe 4.4s ease-in-out infinite; transform-origin:50% 100%; }
.band-guest--2{ animation-duration:5.6s; animation-delay:.6s }
.band-tray{ transform-origin:42px 38px; animation:trayTilt 4s ease-in-out infinite; }
@keyframes trayTilt{ 0%,100%{transform:rotate(0) translateY(0)} 50%{transform:rotate(-4deg) translateY(-3px)} }
.band-waiter{ animation:walk 6s ease-in-out infinite; }
@keyframes walk{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-26px)} }

/* ============================ EL FUEGO ============================ */
.fuego{ background:var(--ink); overflow:hidden; }
.fuego__bg{
  position:absolute; inset:0; pointer-events:none; will-change:transform;
  background:radial-gradient(60% 50% at 50% 10%, rgba(94,26,36,.28), transparent 70%);
}
.fuego__photo{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.fuego__photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  opacity:.30; filter:saturate(.6) contrast(1.1) brightness(.75);
  transform:scale(1.08);
}
.fuego__photo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(8,7,6,.72) 0%, rgba(8,7,6,.94) 70%),
    linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 78%, var(--ink) 100%);
}
.fuego .wrap{ position:relative; z-index:2; }
.fuego__steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:70px; perspective:1200px; }
.step{ backdrop-filter:blur(3px); }
.step{
  position:relative; padding:40px 28px 34px; border:1px solid rgba(237,228,214,.08); border-radius:3px;
  background:linear-gradient(165deg, rgba(23,18,15,.9), rgba(8,7,6,.6));
  transform-style:preserve-3d; transition:border-color .5s, background .5s;
}
.step:hover{ border-color:rgba(226,87,31,.5); background:linear-gradient(165deg, rgba(34,26,21,.95), rgba(15,12,10,.7)); }
.step::before{
  content:""; position:absolute; inset:0; border-radius:3px; opacity:0; transition:opacity .5s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(226,87,31,.16), transparent 55%);
  pointer-events:none;
}
.step:hover::before{ opacity:1; }
.step__num{
  font-family:var(--f-display); font-size:.9rem; letter-spacing:.3em; color:var(--ember);
  margin-bottom:26px; transform:translateZ(20px);
}
.step__icon{ width:42px; margin-bottom:22px; transform:translateZ(34px); }
.s-stroke{ fill:none; stroke:var(--bone); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:200; stroke-dashoffset:200; }
.step.is-in .s-stroke{ animation:draw 1.4s var(--ease) forwards; }
.step:nth-child(2).is-in .s-stroke{ animation-delay:.12s }
.step:nth-child(3).is-in .s-stroke{ animation-delay:.24s }
.step:nth-child(4).is-in .s-stroke{ animation-delay:.36s }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.step h3{ font-family:var(--f-display); font-weight:400; font-size:1.6rem; margin-bottom:10px; transform:translateZ(26px); }
.step p{ font-size:.92rem; color:var(--bone-dim); transform:translateZ(12px); }

/* ============================ MENÚ ============================ */
.menu{ background:linear-gradient(180deg,var(--ink) 0%,var(--ash) 55%,var(--ink) 100%); }
.menu__note{ margin:22px auto 0; max-width:44ch; }
.menu__tabs{
  position:relative; display:flex; justify-content:center; flex-wrap:wrap; gap:6px;
  margin:56px auto 46px; border-bottom:1px solid rgba(237,228,214,.09); padding-bottom:0; width:fit-content; max-width:100%;
}
.tab{
  background:none; border:0; cursor:pointer; padding:14px 24px;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  transition:color .4s;
}
.tab:hover{ color:var(--bone-dim) }
.tab.is-active{ color:var(--ember) }
.tab__ink{ position:absolute; top:0; left:0; height:1px; background:var(--grad-ember); transition:transform .55s var(--ease), width .55s var(--ease); box-shadow:0 0 12px rgba(255,122,24,.8); }

.menu__panels{ position:relative; }
.panel{ display:none; grid-template-columns:repeat(2,1fr); gap:14px 46px; perspective:1000px; }
.panel.is-active{ display:grid; }
.dish{
  position:relative; padding:26px 26px 24px; border:1px solid transparent; border-radius:3px;
  transform-style:preserve-3d; transition:border-color .5s, background .5s, transform .5s var(--ease);
  opacity:0; transform:translateY(26px);
}
.panel.is-active .dish{ animation:dishIn .8s var(--ease) forwards; }
.panel.is-active .dish:nth-child(1){animation-delay:.02s} .panel.is-active .dish:nth-child(2){animation-delay:.08s}
.panel.is-active .dish:nth-child(3){animation-delay:.14s} .panel.is-active .dish:nth-child(4){animation-delay:.20s}
.panel.is-active .dish:nth-child(5){animation-delay:.26s} .panel.is-active .dish:nth-child(6){animation-delay:.32s}
@keyframes dishIn{ to{ opacity:1; transform:none } }
.dish:hover{ border-color:rgba(226,87,31,.35); background:rgba(34,26,21,.5); }
.dish::after{
  content:""; position:absolute; left:0; top:0; width:2px; height:100%;
  background:var(--grad-ember); transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--ease);
}
.dish:hover::after{ transform:scaleY(1); transform-origin:top; }
.dish__top{ display:flex; align-items:baseline; gap:10px; }
.dish__top h3{ font-family:var(--f-display); font-weight:400; font-size:1.42rem; color:var(--bone); white-space:nowrap; transform:translateZ(24px); }
.dish__dots{ flex:1; border-bottom:1px dotted rgba(237,228,214,.22); transform:translateY(-4px); }
.dish__top b{ font-weight:400; font-size:.86rem; letter-spacing:.08em; color:var(--gold); white-space:nowrap; transform:translateZ(18px); }
.dish p{ margin-top:8px; font-size:.9rem; color:var(--bone-dim); max-width:46ch; }
.dish__tag{
  display:inline-block; margin-top:12px; font-style:normal;
  font-size:.56rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ember); border:1px solid rgba(226,87,31,.34); padding:4px 10px; border-radius:99px;
}

/* ============================ GALERÍA ============================ */
.galeria{ background:var(--ink); padding-bottom:0; }
.gal{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:14px;
  max-width:1480px; margin:70px auto 0; padding-inline:clamp(20px,3vw,40px);
}
.gal__item{
  position:relative; overflow:hidden; border-radius:3px; grid-row:span 2;
  border:1px solid rgba(237,228,214,.07);
  opacity:0; transform:translateY(34px) scale(.98);
  transition:opacity 1s var(--ease), transform 1s var(--ease), border-color .5s;
}
.gal__item.is-in{ opacity:1; transform:none; }
.gal__item--tall{ grid-row:span 3; }
.gal__item--wide{ grid-column:span 2; }
.gal__item img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.72) contrast(1.06) brightness(.72);
  transform:scale(1.03);
  transition:transform 1.4s var(--ease), filter .9s var(--ease);
}
.gal__item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(8,7,6,.9) 100%);
  opacity:.9; transition:opacity .6s;
}
.gal__item:hover{ border-color:rgba(226,87,31,.45); }
.gal__item:hover img{ transform:scale(1.11); filter:saturate(1.05) contrast(1.08) brightness(.95); }
.gal__item:hover::after{ opacity:.7; }
.gal__item figcaption{
  position:absolute; left:24px; right:24px; bottom:22px; z-index:2;
  transform:translateY(12px); opacity:0; transition:.6s var(--ease);
}
.gal__item.is-in figcaption{ transform:none; opacity:1; transition-delay:.3s; }
.gal__item figcaption b{
  display:block; font-family:var(--f-display); font-weight:400; font-size:1.5rem; color:var(--bone);
}
.gal__item figcaption span{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-dim); }
.gal__item::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; z-index:3;
  background:var(--grad-ember); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease);
}
.gal__item:hover::before{ transform:scaleX(1); }

/* ============================ BANDA PARALLAX ============================ */
.band{ position:relative; height:clamp(340px,52vh,560px); overflow:hidden; display:grid; place-items:center; }
.band__img{ position:absolute; inset:-18% 0; will-change:transform; }
.band__img img{ width:100%; height:100%; object-fit:cover; filter:saturate(.6) brightness(.5) contrast(1.1); }
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(8,7,6,.55) 26%, rgba(8,7,6,.55) 74%, var(--ink) 100%);
}
.band__quote{
  position:relative; z-index:2; text-align:center; padding-inline:24px;
  display:grid; gap:22px; justify-items:center;
}
.band__quote span{
  font-family:var(--f-display); font-style:italic; font-weight:300;
  font-size:clamp(1.6rem,4vw,3.2rem); line-height:1.2; color:var(--bone); max-width:18ch;
  text-shadow:0 4px 40px rgba(0,0,0,.9);
}
.band__quote em{ font-style:normal; font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ember); }

/* ============================ RESERVAS ============================ */
.reservas{ position:relative; background:var(--ink-2); overflow:hidden; }
.reservas__ember{
  position:absolute; left:-10%; bottom:-30%; width:60vw; height:60vw; pointer-events:none;
  background:radial-gradient(circle, rgba(226,87,31,.16), transparent 62%);
  animation:pulseGlow 6s ease-in-out infinite;
}
.reservas__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,6vw,96px); align-items:start; }
.reservas__list{ list-style:none; margin-top:44px; }
.reservas__list li{
  display:flex; justify-content:space-between; gap:20px; padding:16px 0;
  border-bottom:1px solid rgba(237,228,214,.08);
}
.reservas__list b{ font-weight:400; font-size:.86rem; letter-spacing:.1em; }
.reservas__list span{ font-size:.8rem; color:var(--muted); letter-spacing:.06em; }
.reservas__phone{ margin-top:30px; font-size:.9rem; }
.reservas__phone a{ color:var(--ember); border-bottom:1px solid rgba(226,87,31,.4); }

.form{
  position:relative; padding:clamp(28px,4vw,46px);
  border:1px solid rgba(237,228,214,.09); border-radius:3px;
  background:linear-gradient(160deg, rgba(34,26,21,.6), rgba(8,7,6,.75));
  backdrop-filter:blur(6px);
  box-shadow:0 50px 110px -60px rgba(0,0,0,.95);
}
.form__row{ display:grid; gap:0 26px; }
.form__row--2{ grid-template-columns:1fr 1fr; }
.field{ position:relative; padding-top:26px; padding-bottom:26px; }
.field label{ display:block; font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; transition:color .35s; }
.field input,.field select,.field textarea{
  width:100%; background:none; border:0; border-bottom:1px solid rgba(237,228,214,.16);
  padding:8px 0; font-size:.98rem; color:var(--bone); outline:none; border-radius:0;
  transition:border-color .4s;
}
.field textarea{ resize:vertical; }

/* Safari del iPhone hace zoom solo cuando enfocas un campo de menos de 16px, y
   despues NO vuelve: la persona queda escribiendo su telefono en una pagina
   agrandada y corrida. .98rem son 15.68px, justo abajo del limite. En pantalla
   chica se redondea para arriba; en la grande no se toca, que ahi el tamaño es
   una decision de diseño y el zoom no existe. */
@media (max-width:820px){
  .field input,.field select,.field textarea{ font-size:16px; }
}
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 12px) 18px, calc(100% - 7px) 18px; background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.field select option{ background:var(--ash); color:var(--bone); }
.field input::placeholder,.field textarea::placeholder{ color:rgba(110,100,89,.75); }
.field__line{ position:absolute; left:0; bottom:26px; height:1px; width:100%; background:var(--grad-ember); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.field:focus-within label{ color:var(--ember); }
.field:focus-within .field__line{ transform:scaleX(1); }
.field.has-error input,.field.has-error select{ border-bottom-color:#B7361F; }
.field__err{ position:absolute; bottom:8px; left:0; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#D9603F; opacity:0; transform:translateY(-4px); transition:.3s; }
.field.has-error .field__err{ opacity:1; transform:none; }
.field.shake{ animation:shake .4s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }

.pax{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.pax button{
  position:relative; min-width:50px; padding:11px 0; cursor:pointer;
  background:none; border:1px solid rgba(237,228,214,.14); border-radius:2px;
  font-size:.84rem; color:var(--bone-dim); overflow:hidden;
  transition:color .35s, border-color .35s, transform .35s var(--ease);
}
.pax button::before{ content:""; position:absolute; inset:0; background:var(--grad-ember); transform:translateY(101%); transition:transform .45s var(--ease); z-index:-1; }
.pax button:hover{ border-color:rgba(226,87,31,.6); color:var(--bone); transform:translateY(-2px); }
.pax button.is-on{ color:#140A05; border-color:var(--ember); }
.pax button.is-on::before{ transform:translateY(0); }
.pax button{ isolation:isolate; }

/* contador que aparece al elegir +8 */
.pax-more{
  margin-top:14px; padding:16px 18px;
  border:1px solid rgba(226,87,31,.22); border-radius:3px;
  background:linear-gradient(180deg, rgba(226,87,31,.06), rgba(8,7,6,0));
  opacity:0; transform:translateY(-8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.pax-more[hidden]{ display:none }
.pax-more.is-on{ opacity:1; transform:none }
.pax-more > label{
  display:block; margin-bottom:12px;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
}
.pax-more small{ display:block; margin-top:12px; font-size:.7rem; letter-spacing:.04em; color:var(--muted); }

.stepper{ display:flex; align-items:center; gap:10px; }
.stepper button{
  width:42px; height:42px; flex:0 0 auto; cursor:pointer;
  background:none; border:1px solid rgba(237,228,214,.16); border-radius:2px;
  font-family:var(--f-sans); font-size:1.1rem; line-height:1; color:var(--bone-dim);
  transition:color .3s, border-color .3s, background-color .3s;
}
.stepper button:hover{ color:#140A05; border-color:var(--ember); background:var(--ember); }
.stepper input{
  width:82px; padding:10px 0; text-align:center;
  background:none; border:none; border-bottom:1px solid rgba(226,87,31,.45);
  font-family:var(--f-display); font-size:1.7rem; color:var(--bone);
  -moz-appearance:textfield;
}
.stepper input:focus{ outline:none; border-bottom-color:var(--ember-hot) }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }

.form__legal{ margin-top:16px; font-size:.68rem; letter-spacing:.08em; color:var(--muted); text-align:center; }
.form__ok{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; text-align:center;
  background:linear-gradient(160deg, rgba(23,18,15,.98), rgba(8,7,6,.99)); border-radius:3px;
  opacity:0; visibility:hidden; transform:scale(.97); transition:.6s var(--ease); padding:30px;
}
.form__ok.is-on{ opacity:1; visibility:visible; transform:none; }
.form__ok svg{ width:62px; height:62px; }
.ok-c{ fill:none; stroke:var(--ember); stroke-width:2; stroke-dasharray:151; stroke-dashoffset:151; }
.ok-t{ fill:none; stroke:var(--ember); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; }
.form__ok.is-on .ok-c{ animation:draw2 .8s var(--ease) forwards }
.form__ok.is-on .ok-t{ animation:draw2 .5s .55s var(--ease) forwards }
@keyframes draw2{ to{ stroke-dashoffset:0 } }
.form__ok b{ font-family:var(--f-display); font-weight:400; font-size:1.8rem; }
.form__ok span{ font-size:.86rem; color:var(--bone-dim); max-width:34ch; }

/* avisos del turno (día cerrado, sin cupo) y errores de envío */
.form__aviso{
  margin:-6px 0 6px; font-size:.78rem; line-height:1.5; color:var(--gold);
}
.form__aviso[hidden]{ display:none }
.form__error{
  margin-top:18px; padding:13px 16px;
  border:1px solid rgba(183,54,31,.5); border-left-width:2px; border-radius:2px;
  background:rgba(183,54,31,.09);
  font-size:.84rem; line-height:1.5; color:#E88B6C;
}
.form__error[hidden]{ display:none }
.form__error.shake{ animation:shake .4s; }

/* ============================ CUENTA (NAV) ============================ */
.cuenta{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  margin-left:18px; padding:9px 15px;
  border:1px solid rgba(237,228,214,.14); border-radius:2px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim);
  transition:color .35s, border-color .35s;
  max-width:210px;
}
.cuenta:hover,.cuenta:focus-visible{ color:var(--bone); border-color:rgba(226,87,31,.55); outline:none; }
.cuenta__ic{ width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; }
.cuenta span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cuenta.is-in{ color:var(--bone); border-color:rgba(226,87,31,.4); }
.cuenta.is-in .cuenta__ic{ stroke:var(--ember); }
.cuenta__salir{
  background:none; border:0; cursor:pointer; padding:0 0 0 10px; margin-left:2px;
  border-left:1px solid rgba(237,228,214,.16);
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .3s;
}
.cuenta__salir:hover{ color:var(--ember); }
.cuenta__salir[hidden]{ display:none }

/* ============================ MODAL DE ACCESO ============================ */
.auth{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:24px; }
.auth[hidden]{ display:none }
.auth__fondo{
  position:absolute; inset:0; background:rgba(4,3,3,.86); backdrop-filter:blur(7px);
  opacity:0; transition:opacity .5s var(--ease);
}
.auth.is-on .auth__fondo{ opacity:1 }
.auth__caja{
  position:relative; width:100%; max-width:430px; padding:44px 40px 34px;
  background:linear-gradient(165deg, var(--ash) 0%, var(--ink-2) 100%);
  border:1px solid rgba(237,228,214,.1); border-radius:3px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.9);
  opacity:0; transform:translateY(20px) scale(.98);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.auth.is-on .auth__caja{ opacity:1; transform:none }
.auth__x{
  position:absolute; top:12px; right:16px; width:34px; height:34px; cursor:pointer;
  background:none; border:0; font-size:1.7rem; line-height:1; color:var(--muted);
  transition:color .3s, transform .3s var(--ease);
}
.auth__x:hover{ color:var(--ember); transform:rotate(90deg); }
.auth__marca{
  display:block; font-family:var(--f-display); font-size:1.1rem;
  letter-spacing:.34em; color:var(--bone-dim); margin-bottom:16px;
}
.auth__marca em{ font-style:normal; color:var(--ember); }
.auth__titulo{ font-family:var(--f-display); font-weight:300; font-size:2.1rem; line-height:1.1; }
.auth__motivo{ margin-top:14px; font-size:.86rem; line-height:1.6; color:var(--bone-dim); }
/* Sacar la duda antes de que aparezca: el modal se abre desde un boton del
   header, y ahi es facil creer que hay que entrar para poder reservar. */
.auth__aclara{ margin-top:14px; font-size:.86rem; line-height:1.6; color:var(--bone-dim); }
.auth__motivo[hidden]{ display:none }
#authGoogleBloque[hidden]{ display:none }

.auth__google{
  display:flex; align-items:center; justify-content:center; gap:11px;
  width:100%; margin-top:26px; padding:14px; cursor:pointer;
  background:var(--bone); border:0; border-radius:2px;
  font-size:.8rem; letter-spacing:.06em; color:#1a1512;
  transition:background-color .3s, transform .3s var(--ease);
}
.auth__google:hover{ background:#fff; transform:translateY(-1px); }
.auth__google:disabled{ opacity:.5; cursor:wait; transform:none; }

.auth__o{ position:relative; margin:22px 0 6px; text-align:center; }
.auth__o::before{ content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:rgba(237,228,214,.1); }
.auth__o span{
  position:relative; padding:0 12px; background:var(--ash);
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.auth .field{ margin-top:6px; }
.auth .btn{ margin-top:6px; }

.auth__demo{
  margin-top:24px; padding:12px 15px;
  border:1px solid rgba(201,162,39,.3); border-left-width:2px; border-radius:2px;
  background:rgba(201,162,39,.06);
  font-size:.76rem; line-height:1.55; color:var(--bone-dim);
}
.auth__demo[hidden]{ display:none }
.auth__demo b{ display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }

.auth__msg{ margin-top:16px; font-size:.82rem; line-height:1.55; color:var(--bone-dim); }
.auth__msg.is-ok{ color:var(--gold); }
.auth__msg.is-error{ color:#E88B6C; }
.auth__msg b{ color:var(--bone); font-weight:400; }
.auth__legal{ margin-top:20px; font-size:.64rem; letter-spacing:.06em; line-height:1.6; color:var(--muted); }
body.no-scroll{ overflow:hidden }

/* ============================ MIS RESERVAS ============================ */
.mis{ margin-top:clamp(60px,7vw,100px); }
.mis[hidden]{ display:none }
.mis__titulo{
  font-family:var(--f-display); font-weight:300; font-size:clamp(1.7rem,3vw,2.4rem);
  padding-bottom:18px; border-bottom:1px solid rgba(237,228,214,.1); margin-bottom:28px;
}
.mis__vacio{ font-size:.9rem; color:var(--muted); line-height:1.7; }
.mis__entrar{
  display:inline-block; margin-left:8px; padding:7px 16px; border-radius:2px;
  border:1px solid rgba(226,87,31,.5); background:none; color:var(--ember);
  font:inherit; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; transition:background .3s, color .3s;
}
.mis__entrar:hover{ background:var(--ember); color:var(--ink); }
/* Aviso de sesion sin mail: informa, no alarma. Por eso va abajo y en gris. */
.mis__aviso{
  margin-top:22px; padding:16px 18px; border-left:2px solid rgba(226,87,31,.4);
  background:rgba(23,18,15,.6); font-size:.85rem; color:var(--muted); line-height:1.7;
}
.mis__lista{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.mis__item{
  padding:22px 24px; border:1px solid rgba(237,228,214,.1); border-radius:3px;
  background:linear-gradient(170deg, rgba(23,18,15,.85), rgba(8,7,6,.6));
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.mis__item:hover{ border-color:rgba(226,87,31,.35); transform:translateY(-3px); }
.mis__item.is-pasada{ opacity:.5 }
.mis__cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.mis__hora{ font-family:var(--f-display); font-size:1.4rem; letter-spacing:.08em; color:var(--ember); }
.mis__estado{
  padding:4px 9px; border-radius:2px;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.mis__estado.es-pend{ background:rgba(201,162,39,.14); color:var(--gold); }
.mis__estado.es-ok  { background:rgba(226,87,31,.16); color:var(--ember-hot); }
.mis__estado.es-off { background:rgba(237,228,214,.07); color:var(--muted); }
.mis__cuando{ font-family:var(--f-display); font-size:1.25rem; line-height:1.3; color:var(--bone); }
.mis__cuando::first-letter{ text-transform:uppercase }
.mis__pax{ margin-top:4px; font-size:.78rem; letter-spacing:.1em; color:var(--bone-dim); }
.mis__nota{ margin-top:10px; font-size:.76rem; line-height:1.5; color:var(--muted); font-style:italic; }
.mis__cancelar{
  margin-top:18px; padding:9px 14px; cursor:pointer;
  background:none; border:1px solid rgba(237,228,214,.14); border-radius:2px;
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .3s, border-color .3s;
}
.mis__cancelar:hover{ color:#E88B6C; border-color:rgba(183,54,31,.6); }
.mis__cancelar:disabled{ opacity:.6; cursor:wait; }
.mis__historial{ margin-top:26px; }
.mis__historial summary{
  cursor:pointer; padding:12px 0; list-style:none;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  border-top:1px solid rgba(237,228,214,.08); transition:color .3s;
}
.mis__historial summary:hover{ color:var(--bone-dim) }
.mis__historial summary::-webkit-details-marker{ display:none }
.mis__historial[open] summary{ margin-bottom:16px }

/* ============================ AVISO DE MODO DEMO ============================ */
.demo-flag{
  position:fixed; left:16px; bottom:16px; z-index:350; max-width:330px; cursor:pointer;
  padding:14px 17px; border:1px solid rgba(201,162,39,.34); border-left-width:2px; border-radius:2px;
  background:rgba(15,12,10,.95); backdrop-filter:blur(6px);
  animation:demoIn .7s .9s var(--ease) both;
}
.demo-flag b{ display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.demo-flag span{ display:block; font-size:.74rem; line-height:1.55; color:var(--bone-dim); }
.demo-flag code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; color:var(--bone); }
@keyframes demoIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ============================ CONTACTO ============================ */
.contacto{ background:var(--ink); }
.contacto__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(34px,5vw,72px); margin-top:66px; align-items:start; }
.info-block{ padding:22px 0; border-bottom:1px solid rgba(237,228,214,.08); }
.info-block b{ display:block; font-weight:400; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ember); margin-bottom:10px; }
.info-block p{ font-size:.94rem; color:var(--bone-dim); }
.info-block a{ transition:color .3s; }
.info-block a:hover{ color:var(--ember); }
.contacto__info .btn{ margin-top:32px; }

.map-frame{ position:relative; border:1px solid rgba(237,228,214,.1); border-radius:3px; overflow:hidden; height:clamp(380px,52vh,560px);
  box-shadow:0 50px 110px -60px rgba(0,0,0,.95); }
.map-frame iframe{
  width:100%; height:100%; border:0;
  filter:grayscale(1) invert(.92) contrast(.86) sepia(.28) hue-rotate(-14deg) saturate(1.5) brightness(.92);
  transition:filter .8s var(--ease);
}
.map-frame:hover iframe{ filter:grayscale(.55) invert(.9) contrast(.9) sepia(.34) hue-rotate(-10deg) saturate(1.8) brightness(.98); }
.map-frame__pin{ position:absolute; left:50%; top:46%; transform:translate(-50%,-100%); pointer-events:none; display:grid; justify-items:center; }
.map-frame__pin i{ position:absolute; bottom:22px; width:16px; height:16px; border-radius:50%; background:var(--ember); box-shadow:0 0 22px rgba(255,122,24,.9); }
.map-frame__pin i:last-child{ background:rgba(226,87,31,.5); animation:ping 2.2s var(--ease-io) infinite; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.9 } 100%{ transform:scale(4.4); opacity:0 } }
.map-frame__pin span{ margin-bottom:44px; font-size:.6rem; letter-spacing:.3em; background:var(--ink); padding:6px 12px; border:1px solid rgba(226,87,31,.4); border-radius:2px; }

/* ============================ FOOTER ============================ */
.footer{ position:relative; background:var(--ink-2); border-top:1px solid rgba(237,228,214,.07); padding-top:80px; overflow:hidden; }
.footer__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; position:relative; z-index:2; }
.footer__word{ font-family:var(--f-display); font-size:2.2rem; letter-spacing:.3em; display:block; margin-bottom:16px; }
.footer__word em{ font-style:normal; background:var(--grad-ember); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer__brand p{ font-size:.88rem; color:var(--muted); }
.footer__col{ display:grid; align-content:start; gap:11px; }
.footer__col b{ font-weight:400; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--bone); margin-bottom:6px; }
.footer__col a{ font-size:.86rem; color:var(--muted); transition:color .3s, transform .3s var(--ease); }
.footer__col a:hover{ color:var(--ember); transform:translateX(4px); }
.footer__bottom{ position:relative; z-index:2; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:64px; padding-block:26px; border-top:1px solid rgba(237,228,214,.07); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.footer__embers{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.footer__embers b{ position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%; background:var(--ember); box-shadow:0 0 8px var(--ember-hot); animation:rise linear infinite; }
@keyframes rise{ 0%{ transform:translateY(0) scale(1); opacity:0 } 12%{opacity:1} 100%{ transform:translateY(-320px) translateX(var(--dx,20px)) scale(.2); opacity:0 } }

/* ============================ REVEALS ============================ */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word i{ display:inline-block; font-style:inherit; transform:translateY(110%); transition:transform .95s var(--ease); }
[data-split].is-in .word i{ transform:none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  .gal{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px }
  .gal__item--wide{ grid-column:span 2 }
  .fuego__steps{ grid-template-columns:repeat(2,1fr) }
  .historia__grid,.reservas__grid,.contacto__grid{ grid-template-columns:1fr }
  .historia__art{ max-width:440px }
  .footer__grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:820px){
  .nav__links,.nav__cta{ display:none }
  .nav__burger{ display:block }
  .panel.is-active{ grid-template-columns:1fr }
  .form__row--2{ grid-template-columns:1fr }
  .hero__silhouette{ width:78vw; right:-8vw; opacity:.55 }
  .hero__meta{ bottom:26px; gap:20px }
  .hero__meta-item:nth-child(3){ display:none }
  .sil-band{ height:150px }
  .gal{ grid-template-columns:1fr; grid-auto-rows:150px }
  .gal__item,.gal__item--tall,.gal__item--wide{ grid-row:span 2; grid-column:span 1 }
  .photo-stack{ padding-right:24px; padding-bottom:44px }
  .photo-stack .art-cross{ width:28%; left:-2% }
  .dish__top{ flex-wrap:wrap }
  .dish__top h3{ white-space:normal }
  .menu__tabs{
    flex-wrap:nowrap; justify-content:flex-start; width:100%; max-width:100%;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .menu__tabs::-webkit-scrollbar{ display:none }
  .tab{ padding:14px 18px; flex:0 0 auto }
  .footer__grid{ grid-template-columns:1fr }
  /* la cuenta sí se queda: sin ella no hay forma de ver las reservas propias */
  .cuenta{ margin-left:auto; margin-right:14px; max-width:150px; padding:8px 12px }
  .auth__caja{ padding:38px 26px 28px }
  .mis__lista{ grid-template-columns:1fr }
  .demo-flag{ left:12px; right:12px; bottom:12px; max-width:none }
}
@media (max-width:520px){
  .wrap{ padding-inline:22px }
  .cuenta{ max-width:120px; font-size:.66rem; gap:6px }
  .cuenta__salir{ padding-left:8px; font-size:.58rem }
  .hero__title{ letter-spacing:0 }
  .btn{ padding:14px 24px; font-size:.66rem }
  .hero__actions{ gap:10px }
  .stats{ gap:26px }
}

/* ============================ A11Y ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal-line span,.ltr,[data-reveal],.word i,.hero__actions,.hero__meta{ opacity:1 !important; transform:none !important; }
}
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }