/* =========================================================
   LA FALTRIQUERA — Bar Restaurante · Gijón
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --ink:#17110c;
  --ink-2:#241a12;
  --ink-3:#3a2a1d;
  --paper:#fbf7f0;
  --cream:#f4ebe0;
  --cream-2:#e9dccb;
  --sand:#d9c9b4;
  --ember:#c0532b;
  --ember-2:#a13f1e;
  --ember-soft:#f0d9cc;
  --brass:#c79a4e;
  --brass-2:#e3c583;
  --olive:#5e6b4a;
  --open:#2f8f56;
  --open-bg:#e4f3e9;
  --closed:#b23a2e;
  --closed-bg:#f8e4e1;
  --txt:#2a2018;
  --txt-soft:#6b5b4c;
  --txt-inv:#f6efe4;
  --txt-inv-soft:#c6b7a5;

  --serif:'Cormorant Garamond', 'Didot', 'Georgia', 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --r-s:8px; --r-m:18px; --r-l:28px; --r-xl:40px;
  --shadow-s:0 2px 10px rgba(23,17,12,.06);
  --shadow-m:0 14px 40px rgba(23,17,12,.12);
  --shadow-l:0 30px 80px rgba(23,17,12,.22);
  --maxw:1240px;
  --header-h:78px;

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--txt);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:4px}
::selection{background:var(--ember); color:#fff}

/* ---------- Typo ---------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.02; margin:0; letter-spacing:-.01em}
.eyebrow{
  font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color:var(--ember); margin:0 0 1.1rem;
}
.eyebrow.light{color:var(--brass-2)}
.display{font-size:clamp(2.6rem,7vw,5.6rem)}
.h2{font-size:clamp(2rem,4.2vw,3.5rem)}
.lead{font-size:clamp(1.02rem,1.5vw,1.22rem); line-height:1.7; color:var(--txt-soft); font-weight:300}
.serif-it{font-family:var(--serif); font-style:italic; font-weight:400}
.rule{width:64px; height:2px; background:var(--ember); border:0; margin:1.6rem 0}
.rule.center{margin-left:auto; margin-right:auto}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem)}
section{position:relative}
.pad{padding-block:clamp(4.5rem,9vw,8rem)}
.center{text-align:center}
.grid{display:grid; gap:clamp(1.4rem,3vw,2.4rem)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ember); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:100px; font-weight:600; font-size:.9rem;
  letter-spacing:.02em; background:var(--bg); color:var(--fg);
  box-shadow:0 8px 24px rgba(192,83,43,.28);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(192,83,43,.36)}
.btn:active{transform:translateY(-1px)}
.btn.ghost{--bg:transparent; --fg:var(--txt); box-shadow:inset 0 0 0 1.5px rgba(42,32,24,.22)}
.btn.ghost:hover{--bg:rgba(42,32,24,.05); box-shadow:inset 0 0 0 1.5px rgba(42,32,24,.5)}
.btn.ghost-light{--bg:transparent; --fg:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.btn.ghost-light:hover{--bg:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1.5px #fff}
.btn.whats{--bg:var(--ember)}
.btn.whats:hover,.btn.whats:focus-visible{--bg:#1f9d55; box-shadow:0 14px 34px rgba(31,157,85,.36)}
.btn .ic{width:18px; height:18px; flex:0 0 auto}
.btn-row{display:flex; flex-wrap:wrap; gap:.9rem; align-items:center}

/* ---------- Status pill ---------- */
.status{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem .95rem .5rem .7rem; border-radius:100px;
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  line-height:1.25; white-space:nowrap;
  background:var(--closed-bg); color:#7d2a20;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  transition:background .3s, color .3s;
}
.status .dot{
  position:relative; width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--closed);
}
.status .dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid currentColor; opacity:.35; animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.6); opacity:.55}70%{transform:scale(1.35); opacity:0}100%{opacity:0}}
.status strong{font-weight:700; letter-spacing:.09em; font-size:.72rem; text-transform:uppercase}
.status .sep{opacity:.35}
.status time,.status .when{font-weight:500; opacity:.85; font-variant-numeric:tabular-nums}
.status.is-open{background:var(--open-bg); color:#1c6137}
.status.is-open .dot{background:var(--open)}
.status.on-dark{background:rgba(0,0,0,.34); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); backdrop-filter:blur(8px)}
.status.on-dark.is-open{background:rgba(20,80,45,.5)}
.status.on-dark .dot{background:currentColor}
.status.big{
  font-size:.95rem; padding:.7rem 1.25rem .7rem .95rem; gap:.7rem;
  white-space:normal; text-align:left; max-width:100%;
}
.status.big .dot{width:11px; height:11px}
.status.big strong{font-size:.8rem}
.status .when{display:block; font-size:.9em; font-weight:400; opacity:.8; white-space:normal}

/* ---------- Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:80; height:var(--header-h);
  display:flex; align-items:center;
  transition:background .4s, box-shadow .4s, height .4s, backdrop-filter .4s;
  background:linear-gradient(to bottom, rgba(23,17,12,.55), rgba(23,17,12,0));
}
.hdr.solid{
  background:rgba(251,247,240,.92); backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 rgba(23,17,12,.08), 0 10px 30px rgba(23,17,12,.06);
  height:68px;
}
.hdr .wrap{display:flex; align-items:center; gap:1rem; width:100%}
.brand{display:flex; flex-direction:column; line-height:1; margin-right:auto}
.brand .n{
  font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:.01em;
  color:#fff; transition:color .4s;
}
.brand .s{
  font-size:.55rem; letter-spacing:.34em; text-transform:uppercase; font-weight:600;
  color:var(--brass-2); margin-top:.3rem; transition:color .4s;
}
.hdr.solid .brand .n{color:var(--ink)}
.hdr.solid .brand .s{color:var(--ember)}
.nav{display:flex; gap:1.7rem}
.nav a{
  font-size:.83rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.82); position:relative; padding:.3rem 0; transition:color .3s;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--brass); transition:right .35s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.hdr.solid .nav a{color:var(--txt-soft)}
.hdr.solid .nav a:hover,.hdr.solid .nav a.active{color:var(--ink)}
.hdr.solid .nav a.active::after{right:0}
.hdr-actions{display:flex; align-items:center; gap:.85rem}
.hdr .btn{padding:.7rem 1.15rem; font-size:.8rem}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh; display:flex; align-items:flex-end;
  padding-top:calc(var(--header-h) + 3rem); padding-bottom:clamp(2rem,5vw,3.5rem);
  position:relative; overflow:hidden; background:var(--ink); isolation:isolate;
}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg .sl{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06); transition:opacity 1.8s ease, transform 9s linear;
}
.hero-bg .sl.on{opacity:1; transform:scale(1.16)}
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(23,17,12,.28), transparent 60%),
    linear-gradient(to bottom, rgba(23,17,12,.72) 0%, rgba(23,17,12,.30) 34%, rgba(23,17,12,.80) 76%, rgba(23,17,12,.96) 100%);
}
.hero::after{content:''; position:absolute; inset:0; z-index:-1; background-image:var(--noise); opacity:.16; mix-blend-mode:overlay; pointer-events:none}
.hero .wrap{position:relative; color:var(--txt-inv)}
.hero-inner{max-width:900px}
.hero h1{
  color:#fff; font-size:clamp(3.4rem,11vw,8.5rem); font-weight:600; line-height:.9;
  letter-spacing:-.02em; text-shadow:0 20px 60px rgba(0,0,0,.4);
}
.hero h1 .amp{font-style:italic; font-weight:400; color:var(--brass-2)}
.hero .kicker{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2.4vw,1.7rem);
  color:var(--brass-2); margin:.9rem 0 0; font-weight:400;
}
.hero .desc{
  max-width:52ch; margin:1.6rem 0 2rem; color:rgba(246,239,228,.86);
  font-size:clamp(1rem,1.5vw,1.16rem); font-weight:300; line-height:1.7;
}
.hero .btn-row{margin-bottom:2.2rem}
.hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 2rem;
  padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.16);
}
.hero-meta .it{display:flex; align-items:center; gap:.55rem; font-size:.86rem; color:rgba(246,239,228,.8)}
.hero-meta .it b{color:#fff; font-weight:600}
.stars{display:inline-flex; gap:2px; color:var(--brass-2)}
.stars svg{width:14px; height:14px; fill:currentColor}
.scroll-cue{
  position:absolute; left:50%; bottom:1.2rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.55rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.scroll-cue i{display:block; width:1px; height:44px; background:linear-gradient(to bottom, rgba(255,255,255,.6), transparent); animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4); opacity:.4; transform-origin:top}50%{transform:scaleY(1); opacity:1; transform-origin:top}}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--ink); color:var(--cream); overflow:hidden;
  border-block:1px solid rgba(199,154,78,.22); padding:.95rem 0;
  display:flex; gap:0; user-select:none;
}
.marquee .track{display:flex; gap:0; flex:0 0 auto; animation:slide 34s linear infinite; will-change:transform}
.marquee:hover .track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.marquee span{
  font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.5rem); font-weight:600;
  letter-spacing:.02em; padding:0 1.6rem; white-space:nowrap; color:var(--cream);
  display:inline-flex; align-items:center; gap:1.6rem;
}
.marquee span::after{content:''; width:5px; height:5px; border-radius:50%; background:var(--brass); opacity:.8; flex:0 0 auto}

/* ---------- Manifesto ---------- */
.manifesto{background:var(--cream); position:relative; overflow:hidden}
.manifesto::before{content:''; position:absolute; inset:0; background-image:var(--noise); opacity:.5; mix-blend-mode:multiply; pointer-events:none}
.manifesto .wrap{position:relative; z-index:1}
.manifesto-grid{display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; grid-template-columns:1fr}
@media(min-width:900px){.manifesto-grid{grid-template-columns:1.05fr .95fr}}
.manifesto blockquote{
  margin:0; font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.35rem);
  line-height:1.28; font-weight:400; color:var(--ink);
}
.manifesto blockquote .drop{color:var(--ember)}
.manifesto .sign{
  display:block; margin-top:1.4rem; font-family:var(--sans); font-size:.72rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--txt-soft); font-weight:600;
}
.pillars{display:grid; gap:1px; background:rgba(23,17,12,.12); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--shadow-s)}
.pillar{background:var(--paper); padding:1.7rem 1.6rem}
.pillar .num{
  font-family:var(--serif); font-size:2rem; font-weight:700; color:var(--ember);
  line-height:1; display:block; margin-bottom:.7rem;
}
.pillar h3{font-size:1.35rem; margin-bottom:.5rem}
.pillar p{margin:0; font-size:.92rem; color:var(--txt-soft); line-height:1.65; font-weight:300}

/* ---------- Carta ---------- */
.carta{background:var(--paper)}
.carta-head{display:grid; gap:1.5rem; margin-bottom:clamp(2.5rem,5vw,4rem); align-items:end}
@media(min-width:900px){.carta-head{grid-template-columns:1.1fr .9fr}}
.dish-grid{display:grid; gap:clamp(1.2rem,2.5vw,1.8rem); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.dish{
  position:relative; border-radius:var(--r-m); overflow:hidden; background:var(--ink);
  box-shadow:var(--shadow-m); isolation:isolate; aspect-ratio:4/5;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s;
}
.dish:hover{transform:translateY(-10px); box-shadow:var(--shadow-l)}
.dish img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transform:scale(1.02); transition:transform 1.1s cubic-bezier(.2,.7,.3,1), filter .5s;
  filter:saturate(1.02);
}
.dish:hover img{transform:scale(1.11)}
.dish::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(23,17,12,.94) 0%, rgba(23,17,12,.62) 32%, rgba(23,17,12,.10) 62%, transparent 100%);
}
.dish .body{padding:1.5rem 1.4rem; color:#fff}
.dish h3{font-size:1.55rem; margin-bottom:.45rem; color:#fff}
.dish p{
  margin:.6rem 0 0; font-size:.9rem; line-height:1.62; color:rgba(246,239,228,.86);
  font-weight:300; max-height:9rem; opacity:1; overflow:hidden;
  transition:max-height .5s ease, opacity .4s;
}
.dish .tag{
  position:absolute; top:1.1rem; left:1.1rem; z-index:2;
  font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:.4rem .75rem; border-radius:100px; background:rgba(251,247,240,.94); color:var(--ember-2);
}
.dish .tag.hot{background:var(--ember); color:#fff}
.dish::before{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:3px; z-index:3;
  background:linear-gradient(90deg, var(--ember), var(--brass));
  transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.dish:hover::before,.dish:focus-within::before{transform:scaleX(1)}

.also{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding:clamp(1.6rem,4vw,2.6rem);
  border-radius:var(--r-l); background:var(--cream); box-shadow:var(--shadow-s);
  display:grid; gap:1.6rem;
}
@media(min-width:760px){.also{grid-template-columns:.8fr 1.2fr; align-items:center; gap:2.5rem}}
.also h3{font-size:1.7rem; margin-bottom:.4rem}
.chips{display:flex; flex-wrap:wrap; gap:.55rem; margin:0; padding:0; list-style:none}
.chips li{
  font-size:.82rem; font-weight:500; padding:.48rem .95rem; border-radius:100px;
  background:var(--paper); box-shadow:inset 0 0 0 1px rgba(23,17,12,.1); color:var(--txt);
  transition:transform .25s, background .25s, color .25s;
}
.chips li:hover{transform:translateY(-2px); background:var(--ember); color:#fff; box-shadow:inset 0 0 0 1px var(--ember)}

/* ---------- La casa ---------- */
.casa{background:var(--ink); color:var(--txt-inv); overflow:hidden; position:relative}
.casa::before{content:''; position:absolute; inset:0; background-image:var(--noise); opacity:.22; mix-blend-mode:overlay; pointer-events:none}
.casa .wrap{position:relative; z-index:1}
.casa .h2{color:#fff}
.casa .lead{color:var(--txt-inv-soft)}
.casa-grid{display:grid; gap:clamp(1rem,2vw,1.4rem); margin-top:clamp(2rem,4vw,3.2rem); grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr}
@media(min-width:820px){
  .casa-grid{grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2, clamp(140px,19vw,230px))}
  .casa-grid .big{grid-column:span 2; grid-row:span 2}
}
.casa-grid figure{margin:0; overflow:hidden; border-radius:var(--r-m); position:relative; background:var(--ink-2)}
.casa-grid img{width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.casa-grid figure:hover img{transform:scale(1.07)}
.casa-quote{
  margin:clamp(2.2rem,4vw,3rem) auto 0; max-width:760px; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,2.6vw,1.8rem);
  line-height:1.45; color:var(--brass-2);
}
.casa-quote cite{
  display:block; margin-top:1rem; font-family:var(--sans); font-style:normal;
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--txt-inv-soft); font-weight:600;
}

/* ---------- Galería ---------- */
.galeria{background:var(--cream)}
.gal-head{display:flex; flex-wrap:wrap; gap:1rem; align-items:end; justify-content:space-between; margin-bottom:2rem}
.gal-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.6rem,1.4vw,1rem)}
@media(min-width:640px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.gal-grid{grid-template-columns:repeat(4,1fr)}}
.gal-grid .item{
  position:relative; overflow:hidden; border-radius:var(--r-s); cursor:zoom-in;
  aspect-ratio:3/4; background:var(--sand); box-shadow:var(--shadow-s);
}
.gal-grid .item:nth-child(4n+1){aspect-ratio:4/5}
.gal-grid img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1), filter .5s}
.gal-grid .item:hover img{transform:scale(1.08)}
.gal-grid .item::after{
  content:''; position:absolute; inset:0; background:rgba(23,17,12,.0); transition:background .4s;
}
.gal-grid .item:hover::after{background:rgba(23,17,12,.22)}
.gal-grid .more{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:.3rem; background:rgba(23,17,12,.62); color:#fff; z-index:2;
  font-family:var(--serif); font-size:1.6rem;
}
.gal-grid .more small{font-family:var(--sans); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; opacity:.8}

/* Lightbox */
.lb{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(12,8,5,.95); backdrop-filter:blur(6px); padding:clamp(1rem,4vw,3rem);
}
.lb.open{display:flex; animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb img{max-width:100%; max-height:86vh; border-radius:var(--r-s); box-shadow:var(--shadow-l)}
.lb .close,.lb .nav-b{
  position:absolute; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff; transition:background .25s;
}
.lb .close:hover,.lb .nav-b:hover{background:rgba(255,255,255,.24)}
.lb .close{top:1.2rem; right:1.2rem}
.lb .nav-b{top:50%; transform:translateY(-50%)}
.lb .prev{left:1.2rem} .lb .next{right:1.2rem}
.lb .count{position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:.8rem; letter-spacing:.14em}

/* ---------- Opiniones ---------- */
.opiniones{background:var(--paper)}
.op-top{display:grid; gap:1.6rem; align-items:center; margin-bottom:clamp(2rem,4vw,3rem)}
@media(min-width:860px){.op-top{grid-template-columns:auto 1fr; gap:2.6rem}}
.rating-badge{
  display:flex; align-items:center; gap:1.1rem; padding:1.2rem 1.6rem;
  border-radius:var(--r-m); background:var(--cream); box-shadow:var(--shadow-s); justify-self:start;
}
.rating-badge .n{font-family:var(--serif); font-size:3.2rem; font-weight:700; line-height:.9; color:var(--ink)}
.rating-badge .st{color:var(--brass); display:flex; gap:3px}
.rating-badge .st svg{width:17px; height:17px; fill:currentColor}
.rating-badge .c{font-size:.78rem; color:var(--txt-soft); letter-spacing:.04em}
.op-slider{position:relative}
.op-track{display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:.5rem; -webkit-overflow-scrolling:touch}
.op-track::-webkit-scrollbar{display:none}
.op-card{
  flex:0 0 min(360px, 86vw); scroll-snap-align:start;
  background:var(--paper); border-radius:var(--r-m); padding:1.7rem 1.6rem;
  box-shadow:inset 0 0 0 1px rgba(23,17,12,.09), var(--shadow-s);
  display:flex; flex-direction:column; gap:.9rem; transition:transform .35s, box-shadow .35s;
}
.op-card:hover{transform:translateY(-5px); box-shadow:inset 0 0 0 1px rgba(23,17,12,.14), var(--shadow-m)}
.op-card .st{color:var(--brass); display:flex; gap:2px}
.op-card .st svg{width:14px; height:14px; fill:currentColor}
.op-card p{margin:0; font-family:var(--serif); font-size:1.15rem; line-height:1.5; color:var(--ink); flex:1}
.op-card .who{display:flex; align-items:center; gap:.7rem; padding-top:.9rem; border-top:1px solid rgba(23,17,12,.08)}
.op-card .av{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:var(--ember-soft); color:var(--ember-2); font-weight:700; font-size:.82rem; font-family:var(--serif);
}
.op-card .who b{display:block; font-size:.86rem; font-weight:600}
.op-card .who span{display:block; font-size:.72rem; color:var(--txt-soft); letter-spacing:.05em}
.op-nav{display:flex; gap:.5rem; margin-top:1.4rem}
.op-nav button{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px rgba(23,17,12,.18); transition:background .25s, color .25s, box-shadow .25s;
}
.op-nav button:hover{background:var(--ink); color:#fff; box-shadow:inset 0 0 0 1.5px var(--ink)}
.op-note{font-size:.74rem; color:var(--txt-soft); margin-top:1rem}

/* ---------- Horario ---------- */
.horario{background:var(--cream); position:relative; overflow:hidden}
.horario::before{content:''; position:absolute; inset:0; background-image:var(--noise); opacity:.45; mix-blend-mode:multiply; pointer-events:none}
.horario .wrap{position:relative; z-index:1}
.hr-grid{display:grid; gap:clamp(1.6rem,3vw,2.6rem); margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:900px){.hr-grid{grid-template-columns:1.05fr .95fr}}

.hr-card{
  background:var(--ink); color:var(--txt-inv); border-radius:var(--r-l);
  padding:clamp(1.7rem,3.6vw,2.6rem); box-shadow:var(--shadow-l); position:relative; overflow:hidden;
}
.hr-card::after{content:''; position:absolute; inset:0; background-image:var(--noise); opacity:.2; mix-blend-mode:overlay; pointer-events:none}
.hr-card .now{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-bottom:1.4rem;
}
.hr-card .clock{
  font-family:var(--serif); font-size:clamp(2.6rem,7vw,4rem); font-weight:600; line-height:1;
  color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.hr-card .clock small{display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--txt-inv-soft); font-weight:600; margin-top:.5rem}
.hr-card .verdict{font-family:var(--serif); font-size:clamp(1.6rem,3.6vw,2.3rem); line-height:1.15; color:#fff; margin:0 0 .4rem}
.hr-card .sub{margin:0 0 1.6rem; color:var(--txt-inv-soft); font-size:.95rem; font-weight:300}
.hr-list{list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.12)}
.hr-list li{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.72rem .2rem; border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.9rem; color:rgba(246,239,228,.72); transition:color .3s;
}
.hr-list li b{font-weight:500; letter-spacing:.02em}
.hr-list li .t{font-variant-numeric:tabular-nums; letter-spacing:.04em}
.hr-list li.today{color:#fff; font-weight:600; background:linear-gradient(90deg, rgba(199,154,78,.16), transparent); box-shadow:inset 3px 0 0 var(--brass)}
.hr-list li.today b{font-weight:700}
.hr-list li.today .t{color:var(--brass-2)}
.hr-list li .badge-now{
  font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  background:var(--brass); color:var(--ink); padding:.2rem .5rem; border-radius:100px; margin-left:.6rem;
}
.hr-note{margin:1.2rem 0 0; font-size:.74rem; color:rgba(246,239,228,.5)}

.hr-side{display:grid; gap:1.2rem; align-content:start}
.info-card{
  background:var(--paper); border-radius:var(--r-m); padding:1.6rem; box-shadow:var(--shadow-s);
  display:flex; gap:1.1rem; align-items:flex-start;
}
.info-card .ic{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--ember-soft); color:var(--ember-2);
}
.info-card h4{margin:0 0 .25rem; font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-soft); font-weight:700}
.info-card p,.info-card a{margin:0; font-size:.95rem; line-height:1.55; color:var(--txt); font-weight:500}
.info-card a:hover{color:var(--ember)}
.info-card .muted{font-weight:400; color:var(--txt-soft); font-size:.86rem}
.map-card{
  border-radius:var(--r-m); overflow:hidden; position:relative; display:block;
  aspect-ratio:16/10; background:var(--ink-2); box-shadow:var(--shadow-s);
}
.map-card img{width:100%; height:100%; object-fit:cover; opacity:.85; transition:transform .8s, opacity .4s}
.map-card:hover img{transform:scale(1.05); opacity:.7}
.map-card .pin{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; color:#fff; text-align:center; padding:1rem;
}
.map-card .pin .dot{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--ember); box-shadow:0 0 0 8px rgba(192,83,43,.28), 0 10px 24px rgba(0,0,0,.35);
}
.map-card .pin strong{font-family:var(--serif); font-size:1.3rem; text-shadow:0 2px 12px rgba(0,0,0,.6)}
.map-card .pin span{font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; opacity:.9; text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* ---------- CTA final ---------- */
.cta{
  background:var(--ink); color:var(--txt-inv); text-align:center; position:relative; overflow:hidden;
}
.cta::before{
  content:''; position:absolute; inset:0; background-image:var(--noise); opacity:.2; mix-blend-mode:overlay;
}
.cta::after{
  content:''; position:absolute; width:80vw; height:80vw; max-width:900px; max-height:900px;
  left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(192,83,43,.28), transparent 62%); pointer-events:none;
}
.cta .wrap{position:relative; z-index:2}
.cta .h2{color:#fff; margin-bottom:1rem}
.cta .lead{color:var(--txt-inv-soft); max-width:56ch; margin-inline:auto}
.cta .btn-row{justify-content:center; margin-top:2rem}

/* ---------- Footer ---------- */
.ftr{background:#100b07; color:var(--txt-inv-soft); padding-block:clamp(2.5rem,5vw,4rem) 2rem; font-size:.88rem}
.ftr-grid{display:grid; gap:2.2rem; grid-template-columns:1fr}
@media(min-width:760px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ftr h5{
  font-family:var(--sans); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass); margin:0 0 1rem; font-weight:700;
}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.ftr a{transition:color .25s}
.ftr a:hover{color:#fff}
.ftr .brand .n{font-family:var(--serif); font-size:1.7rem; color:#fff; font-weight:600; line-height:1}
.ftr .brand .s{font-size:.55rem; letter-spacing:.32em; text-transform:uppercase; color:var(--brass); margin-top:.5rem; display:block}
.ftr .about{margin:1.1rem 0 0; max-width:34ch; line-height:1.7; font-weight:300}
.socials{display:flex; gap:.6rem; margin-top:1.3rem}
.socials a{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.07); color:#fff; transition:background .25s, transform .25s;
}
.socials a:hover{background:var(--ember); transform:translateY(-3px)}
.socials a[data-lf="wa"]:hover{background:#1f9d55}
.socials a[data-lf="ig"]:hover{background:linear-gradient(45deg,#f09433,#e6683c 30%,#dc2743 55%,#cc2366 75%,#bc1888)}
.ftr .bottom{
  margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between; font-size:.76rem; color:rgba(246,239,228,.45);
}

/* ---------- Floating / sticky mobile ---------- */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:88; display:none;
  background:rgba(23,17,12,.96); backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.1); padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
}
.mbar .in{display:flex; align-items:center; gap:.6rem; max-width:var(--maxw); margin-inline:auto}
.mbar .status{
  flex:1 1 auto; justify-content:center; font-size:.68rem; padding:.5rem .8rem;
  min-width:0; white-space:normal; text-align:left; overflow:hidden;
}
.mbar .status strong{font-size:.66rem}
.mbar .status .when{font-size:.9em; line-height:1.2}
.mbar a.b{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:var(--ember); box-shadow:0 6px 18px rgba(192,83,43,.32);
  transition:background .25s, box-shadow .25s, transform .25s;
}
.mbar a.b.whats:hover,.mbar a.b.whats:focus-visible{background:#1f9d55; box-shadow:0 8px 22px rgba(31,157,85,.38)}
.mbar a.b.ig:hover,.mbar a.b.ig:focus-visible{background:linear-gradient(45deg,#f09433,#e6683c 30%,#dc2743 55%,#cc2366 75%,#bc1888); box-shadow:0 8px 22px rgba(225,48,108,.38)}
@media(max-width:880px){
  .mbar{display:block}
  .nav{display:none}
  .hdr .status{display:none}          /* la barra inferior ya lo muestra siempre */
  .ftr{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
}
@media(max-width:400px){
  .hdr .btn{padding:.65rem .9rem; font-size:.74rem}
  .brand .n{font-size:1.15rem}
}

/* ---------- Reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Misc ---------- */
.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}