/* El Toro y la Luna, public site. Tokens live in tokens.css. */

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font:400 17px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;animation:page-in .7s var(--ease-out) both}
@keyframes page-in{from{opacity:0}to{opacity:1}}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.005em;text-wrap:balance}
h2{font-size:clamp(2.1rem,1.2rem + 3.2vw,3.7rem)}
h3{font-size:1.35rem}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:var(--radius-pill);font-weight:600;text-decoration:none;transition:top var(--t-fast) var(--ease-out)}
.skip:focus{top:16px}
main:focus{outline:none}

.wrap{width:min(var(--maxw),100%);margin-inline:auto;padding-inline:var(--gutter)}
.kicker{font:600 .78rem/1.2 var(--font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.mantel .kicker{color:var(--accent-ink)}
.lede{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.6;max-width:56ch;color:var(--text-secondary)}
.mantel .lede{color:var(--ink-2)}
.small{font-size:.95rem;color:var(--text-secondary)}
.mantel .small{color:var(--ink-2)}

/* ---------- Environment layer (fixed, behind everything) ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas)}
.env-glow{position:absolute;width:70vmax;height:70vmax;left:-15vmax;top:-20vmax;border-radius:50%;background:radial-gradient(circle,rgba(200,16,46,.20),rgba(200,16,46,0) 62%);animation:drift 90s var(--ease-soft) infinite alternate;animation-delay:-30s}
.env-glow.b{left:auto;right:-20vmax;top:auto;bottom:-25vmax;background:radial-gradient(circle,rgba(242,194,48,.10),rgba(242,194,48,0) 60%);animation-duration:120s;animation-delay:-70s}
.env-grain{position:absolute;inset:-50%;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{to{transform:translate3d(12vmax,9vmax,0) scale(1.12)}}

/* ---------- Buttons ---------- */
.btn{--bg:transparent;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:.7em 1.35em;border-radius:var(--radius-pill);border:1.5px solid transparent;background:var(--bg);font-weight:600;font-size:1rem;line-height:1.1;text-decoration:none;cursor:pointer;transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),box-shadow var(--t-med) var(--ease-out);text-shadow:none;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-accent{--bg:var(--accent);color:var(--on-accent);box-shadow:0 8px 28px rgba(242,194,48,.22)}
.btn-accent:hover{--bg:var(--accent-hover);box-shadow:0 10px 36px rgba(242,194,48,.34)}
.btn-ghost{border-color:var(--line-strong);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--text-primary);background:rgba(246,237,228,.06)}
.mantel .btn-ghost,.btn-ghost-ink{border-color:rgba(36,19,17,.42);color:var(--ink)}
.mantel .btn-ghost:hover,.btn-ghost-ink:hover{border-color:var(--ink);background:rgba(36,19,17,.05)}
.btn-sm{min-height:40px;padding:.55em 1.1em;font-size:.94rem}
.btn-lg{min-height:54px;padding:.85em 1.7em;font-size:1.06rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.link-under{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.28em;text-decoration-color:var(--accent);transition:color var(--t-fast) var(--ease-out),text-decoration-color var(--t-fast) var(--ease-out)}
.link-under:hover{color:var(--accent)}
.mantel .link-under{text-decoration-color:var(--accent-ink)}
.mantel .link-under:hover{color:var(--accent-ink)}
@media (pointer:coarse){.btn,.lang-btn,.burger{min-height:var(--tap)}}

/* ---------- Header ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:40;height:var(--header-h);transition:background-color var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out)}
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,7,7,.62),rgba(18,7,7,0));opacity:1;transition:opacity var(--t-med) var(--ease-out);pointer-events:none}
.nav.solid{background:rgba(30,13,13,.84);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.nav.solid::before{opacity:0}
.nav-in{position:relative;height:100%;width:min(1400px,100%);margin:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand .mark{width:38px;height:38px;flex:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.brand-name{font-family:var(--font-display);font-size:1.3rem;line-height:1;white-space:nowrap}
.bn-2{color:var(--accent)}
.menu{display:flex;gap:4px}
.menu a{position:relative;white-space:nowrap;padding:10px 12px;font-weight:500;font-size:.96rem;text-decoration:none;color:var(--text-primary);opacity:.86;transition:opacity var(--t-fast) var(--ease-out)}
.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease-out)}
.menu a:hover,.menu a[aria-current="true"]{opacity:1}
.menu a:hover::after,.menu a[aria-current="true"]::after{transform:scaleX(1)}
.nav-tools{display:flex;align-items:center;gap:10px}
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:rgba(20,8,8,.25);cursor:pointer;font-weight:600;font-size:.86rem;letter-spacing:.06em;transition:border-color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--text-primary);background:rgba(246,237,228,.08)}
.lang-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:6px;border-radius:14px;background:var(--canvas-2);border:1px solid var(--line);box-shadow:var(--shadow-2);transform-origin:top right;animation:pop .22s var(--ease-out)}
.lang-menu[hidden]{display:none}
.lang-menu button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:0;border-radius:9px;background:none;text-align:left;cursor:pointer;font-size:.96rem}
.lang-menu button:hover{background:rgba(246,237,228,.07)}
.lang-menu button[aria-pressed="true"]{color:var(--accent)}
.lang-menu button[aria-pressed="true"]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
/* Admin padlock, as in Sidex.EsmeraldsGlass: opens the password dialog, or goes straight to /admin/ once signed in. */
.lock-btn{position:relative;flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-strong);background:rgba(20,8,8,.25);color:var(--text-secondary);text-decoration:none;transition:border-color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.lock-btn:hover{border-color:var(--text-primary);background:rgba(246,237,228,.08);color:var(--text-primary)}
.lock-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lock-btn .i-unlock{display:none}
.lock-btn.is-open{color:var(--accent);border-color:var(--accent)}
.lock-btn.is-open .i-lock{display:none}
.lock-btn.is-open .i-unlock{display:block}
@media (pointer:coarse){.lock-btn{width:44px;height:44px}}
.lock-dlg{width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--line);border-radius:24px;background:var(--canvas-2);color:var(--text-primary);box-shadow:var(--shadow-2)}
.lock-dlg[open]{animation:pop .25s var(--ease-out)}
.lock-dlg::backdrop{background:rgba(12,4,4,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lock-form{display:grid;gap:14px;padding:clamp(22px,5vw,32px)}
.lock-mark{width:48px;height:48px}
.lock-title{font-size:1.9rem}
.lock-lede{font-size:.97rem;color:var(--text-secondary)}
.lock-field{display:grid;gap:7px}
.lock-field label{font-weight:600;font-size:.93rem}
.lock-field input{width:100%;min-height:48px;padding:11px 14px;border-radius:12px;border:1.5px solid var(--line-strong);background:var(--canvas);color:var(--text-primary);font:inherit;font-size:1rem}
.lock-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}
.lock-field input[aria-invalid="true"]{border-color:var(--red-soft)}
.lock-err{min-height:1.3em;font-size:.9rem;font-weight:600;color:#FF8A9B}
.lock-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:4px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(20,8,8,.25);cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:transform var(--t-med) var(--ease-out),top var(--t-med) var(--ease-out)}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}

@media (max-width:1240px){
  .menu{position:fixed;inset:var(--header-h) 0 auto;flex-direction:column;gap:0;padding:12px var(--gutter) 24px;background:rgba(30,13,13,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px rgba(0,0,0,.4);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out),visibility 0s linear var(--t-med)}
  .menu.open{opacity:1;transform:none;visibility:visible;transition-delay:0s}
  .menu a{padding:14px 4px;font-size:1.15rem;border-bottom:1px solid var(--line)}
  .menu a::after{display:none}
  .burger{display:block}
}
@media (max-width:560px){
  .nav-cta{display:none}
  .brand-name{font-size:1.12rem}
  .brand .mark{width:32px;height:32px}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-stage{position:absolute;inset:0;z-index:-1;background:#170909}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-poster{background:#170909 url("../img/hero-poster.jpg") center/cover no-repeat;transform:scale(1.04);animation:poster-in 2.4s var(--ease-out) both}
@keyframes poster-in{from{transform:scale(1.1)}to{transform:scale(1.04)}}
.hero-video{opacity:0;transition:opacity 1.2s var(--ease-out);will-change:opacity;transform:translateZ(0)}
.hero.video-ready .hero-video{opacity:1}
.hero-scrim{position:absolute;inset:0;background:
  radial-gradient(ellipse 72% 90% at 12% 62%,rgba(14,5,5,.84) 0%,rgba(14,5,5,.58) 42%,rgba(14,5,5,0) 74%),
  linear-gradient(0deg,rgba(14,5,5,.86) 0%,rgba(14,5,5,.28) 34%,rgba(14,5,5,0) 58%),
  linear-gradient(180deg,rgba(14,5,5,.52) 0%,rgba(14,5,5,0) 22%)}
.hero-content{position:relative;padding-top:calc(var(--header-h) + 40px);padding-bottom:clamp(56px,10vh,110px);text-shadow:var(--tshadow)}
.hero-kicker{color:var(--accent)}
.hero-title{font-family:var(--font-display);font-weight:400;letter-spacing:-.005em;text-wrap:balance;font-size:clamp(3rem,1.2rem + 7vw,7.4rem);line-height:.98;max-width:9.5ch;margin:0 0 22px}
.hero-sub{font-size:clamp(1.08rem,1rem + .5vw,1.35rem);line-height:1.55;max-width:40ch;color:#F1E3D8;margin-bottom:30px}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-bottom:26px}
.hero-ctas .link-under{text-shadow:var(--tshadow)}
.hero-proof{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:.95rem;color:#E4D2C6}
.hero-review{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.25em}
.hero-review::before{content:"·";display:inline-block;margin-right:10px;text-decoration:none}
.hero-review:hover{color:var(--accent)}
.stars{color:var(--accent);letter-spacing:.12em;font-size:.9rem}
/* Load choreography: the kicker lights like a candle, the title rises word by word. */
.js .hero-kicker{opacity:0;animation:flicker 1.3s var(--ease-out) .25s forwards}
@keyframes flicker{0%{opacity:0;filter:blur(3px)}40%{opacity:.7}55%{opacity:.35}100%{opacity:1;filter:none}}
.js .hero-title .w{display:inline-block;opacity:0;transform:translateY(.45em);animation:rise .95s var(--ease-out) forwards;animation-delay:calc(.45s + var(--i) * .12s)}
@keyframes rise{to{opacity:1;transform:none}}
.js .hero-sub,.js .hero-ctas,.js .hero-proof{opacity:0;transform:translateY(14px);animation:rise .9s var(--ease-out) forwards}
.js .hero-sub{animation-delay:1.05s}.js .hero-ctas{animation-delay:1.2s}.js .hero-proof{animation-delay:1.35s}
@media (max-width:720px){
  .hero{align-items:flex-end}
  .hero-poster{background-image:url("../img/hero-poster-mobile.jpg");background-position:center 30%}
  .hero-scrim{background:linear-gradient(0deg,rgba(14,5,5,.94) 0%,rgba(14,5,5,.74) 34%,rgba(14,5,5,.1) 62%,rgba(14,5,5,.45) 100%)}
  .hero-content{padding-bottom:84px}
  .hero-title{max-width:8ch}
}

/* ---------- Sections ---------- */
.sec{position:relative;padding-block:clamp(84px,11vw,150px)}

/* ---------- Key figures, between the hero and the evening ---------- */
.kpis{position:relative;padding-block:clamp(40px,6vw,64px);border-block:1px solid var(--line);background:rgba(20,7,7,.35)}
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin:0 auto;list-style:none}
.kpi{display:grid;gap:10px;align-content:start;text-align:center}
.kpi-val{font:600 clamp(1.9rem,1.3rem + 1.6vw,2.6rem)/1 var(--font-label);letter-spacing:.04em;font-variant-numeric:lining-nums;color:var(--accent);white-space:nowrap}
/* Cinzel has no lower case: the hour mark is set in the text face so it stays a small "h" */
.kpi-unit{font-family:var(--font-body);font-weight:600;font-size:.72em;letter-spacing:0;text-transform:none;margin-left:.06em}
.kpi-txt::before{content:"";display:block;width:28px;height:1px;margin:0 auto 12px;background:var(--accent);opacity:.6}
.kpi-txt{font-size:.95rem;line-height:1.4;color:var(--text-secondary);max-width:22ch;margin-inline:auto}
@media (max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr);gap:28px 16px}.kpi:last-child{grid-column:1 / -1}}
.sala{color:var(--text-primary)}
.mantel{background:var(--mantel);color:var(--ink)}
.mantel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(ellipse 60% 40% at 80% 0%,rgba(242,194,48,.12),transparent 70%),radial-gradient(ellipse 50% 40% at 0% 100%,rgba(200,16,46,.06),transparent 70%)}
.sec-head{margin-bottom:clamp(36px,5vw,64px)}
.sec-head.center{text-align:center}
.sec-head.center h2{margin-inline:auto;max-width:20ch}
.sec-head h2{max-width:18ch}
/* Long titles that carry the name of the tablao: a step smaller, so they do not run to six lines. */
#show-title{font-size:clamp(2rem,1.3rem + 2.2vw,3rem);max-width:22ch}
.sec-head.split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* Reveal choreography. Container-prefixed so it wins the cascade. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}

/* Trencadís divider: broken tiles that settle into place */
.tiles{height:46px;position:relative;z-index:2;margin-block:-23px;overflow:visible;pointer-events:none}
.tiles svg{width:100%;height:100%;overflow:visible}
.tiles polygon{transform-box:fill-box;transform-origin:center;transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.js .tiles polygon{opacity:0;transform:translateY(calc(var(--dy) * 1px)) rotate(calc(var(--dr) * 1deg)) scale(.6)}
.js .tiles.in polygon{opacity:1;transform:none;transition-delay:calc(var(--d) * 1ms)}

/* ---------- The evening ---------- */
/* The four cards of the evening, one under the other, joined by a rail that fills as the visitor scrolls from the
   first to the last, an arrow riding its tip and each dot lighting up as it is reached (site.js initTimeline). */
.timeline{--rail-x:21px;position:relative}
.tl-steps{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,56px)}
.tl-step{position:relative;padding-left:clamp(64px,7vw,84px)}
.tl-rail{position:absolute;left:var(--rail-x);top:var(--rail-top,11px);height:var(--rail-h,0px);width:2px;margin-left:-1px;border-radius:2px;background:var(--line)}
.tl-fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--tl-p,0) * 100%);border-radius:inherit;background:var(--accent);box-shadow:0 0 14px rgba(242,194,48,.45)}
.tl-arrow{position:absolute;z-index:2;left:var(--rail-x);top:calc(var(--rail-top,11px) + var(--tl-p,0) * var(--rail-h,0px));width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;background:var(--accent);box-shadow:0 0 0 6px rgba(242,194,48,.16),0 8px 20px rgba(0,0,0,.45)}
.tl-arrow svg{width:16px;height:16px;fill:none;stroke:var(--on-accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* Each stop of the evening has its icon: greyed while ahead, lit once the arrow gets there. The arrow passes behind it. */
.tl-dot{position:absolute;z-index:3;top:-9px;left:calc(var(--rail-x) - 21px);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;line-height:1;background:var(--canvas);border:2px solid var(--line);filter:grayscale(1);opacity:.6;transition:filter .5s var(--ease-out),opacity .5s var(--ease-out),border-color .5s var(--ease-out),box-shadow .5s var(--ease-out),background-color .5s var(--ease-out)}
@keyframes glow{0%,100%{opacity:.35}50%{opacity:1}}
.tl-step.reached .tl-dot{filter:none;opacity:1;border-color:var(--accent);background:#3a1a12;box-shadow:0 0 0 7px rgba(242,194,48,.18),0 0 22px rgba(242,194,48,.35)}
/* While the arrow has not reached a card, the card waits dimmed; it comes up as the arrow arrives. */
.timeline.live .tl-step > :not(.tl-dot){transition:opacity .6s var(--ease-out)}
.timeline.live .tl-step:not(.reached) > :not(.tl-dot){opacity:.32}
/* The end of the way: the question and the booking, lit when the last stop is reached. */
.tl-end{margin-top:clamp(36px,5vw,56px);padding-left:clamp(64px,7vw,84px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.tl-end-title{margin:0;font:400 clamp(1.5rem,1.2rem + 1vw,2rem)/1.2 var(--font-display);color:var(--text-primary)}
.timeline.live:not(.done) .tl-end{opacity:.32;transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){.timeline.live .tl-step > :not(.tl-dot),.tl-dot,.tl-end{transition:none}.timeline.live:not(.done) .tl-end{transform:none}}
.tl-time{font:600 .8rem/1 var(--font-label);letter-spacing:.14em;color:var(--accent);margin-bottom:12px}
/* Cinzel has no lowercase: the h of 1:30h is set in the body face, as in the key figures. */
.tl-unit{font-family:var(--font-body);letter-spacing:0;text-transform:none;margin-left:.06em}
.tl-step h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin-bottom:12px}
.tl-time-line{display:block}
.tl-time-line + .tl-time-line{margin-top:6px}
.tl-text{color:var(--text-secondary)}
.tl-text p{margin:0 0 12px}
.tl-text > :last-child{margin-bottom:0}
.tl-text .tl-lead{color:var(--text-primary);font-weight:600}
.tl-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;color:var(--text-primary)}
.note{display:flex;align-items:baseline;gap:12px;margin-top:clamp(40px,5vw,64px);padding:16px 20px;border-radius:var(--radius);border:1px solid var(--line);background:rgba(51,23,22,.5);max-width:62ch;color:var(--text-secondary)}
.note-ico{color:var(--accent);font-size:1.2rem}
/* The timetable of the evening in plain words: days on the left, times on the right, impossible to miss. */
.night-hours{margin-top:clamp(40px,5vw,64px);max-width:760px;padding:clamp(20px,3vw,28px) clamp(20px,3vw,32px);border-radius:var(--radius);border:1px solid rgba(242,194,48,.38);background:rgba(51,23,22,.62)}
.night-hours-title{margin:0 0 14px;font:600 .85rem/1.2 var(--font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.night-hours-list{list-style:none;margin:0;padding:0}
.night-hours-list li{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--line)}
.night-hours-list li:first-child{padding-top:0;border-top:0}
.nh-days,.nh-times{font-size:clamp(1.05rem,.95rem + .4vw,1.25rem);font-weight:600}
.nh-days{color:var(--text-primary)}
.nh-times{color:var(--accent);font-variant-numeric:tabular-nums}
.nh-moon{color:var(--accent)}
/* The timetable band, a light one between the dark evening and the dark show (colors in the alternation block). */
.hours-wrap{display:grid;justify-items:start}
.hours-band .night-hours{width:100%;max-width:760px;margin:0}
.nh-reco,.nh-close{margin:14px 0 0;color:var(--text-secondary)}
.nh-close{color:var(--text-primary);font-weight:600}
.nh-book{margin-top:20px}
@media (max-width:640px){.timeline{--rail-x:17px}.tl-step,.tl-end{padding-left:50px}.tl-dot{width:34px;height:34px;top:-6px;left:calc(var(--rail-x) - 17px);font-size:1.05rem}.tl-arrow{width:26px;height:26px;margin:-13px 0 0 -13px}}

/* ---------- The show ---------- */
.show-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
.show .lede{margin-bottom:34px}
.pillars{display:grid;gap:4px;margin-bottom:28px;border-top:1px solid var(--mantel-line)}
.show-lede p{margin:0 0 14px}
.show-lede p:last-child{margin-bottom:0}
.show-close{margin:0 0 34px;color:var(--ink-2)}
.show-close p{margin:0 0 12px}
.show-close p:last-child{margin-bottom:0}
/* The name over its paragraph: the texts of the three are long. */
.pillar{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--mantel-line);color:var(--ink-2);transition:color .6s var(--ease-out)}
.pillar-name{font-family:var(--font-display);font-size:1.6rem;color:var(--ink);transition:color .6s var(--ease-out)}
.pillars.lit .pillar{color:var(--ink)}
.pillars.lit .pillar-name{color:var(--red)}
.pillars.lit .pillar:nth-child(2),.pillars.lit .pillar:nth-child(2) .pillar-name{transition-delay:.18s}
.pillars.lit .pillar:nth-child(3),.pillars.lit .pillar:nth-child(3) .pillar-name{transition-delay:.36s}
.quote{margin:0;padding-left:22px;border-left:3px solid var(--red)}
.quote p{font-family:var(--font-display);font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);line-height:1.3;margin-bottom:10px}
.quote cite{font:600 .74rem/1 var(--font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-style:normal}

/* The one interactive moment: light the stage */
.spot{position:relative;display:grid;gap:18px;justify-items:center}
.spot-stage{position:relative;margin:0;width:100%;max-width:470px;aspect-ratio:969/1640;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-2);background:#0d0505}
.spot-stage img{width:100%;height:100%;object-fit:cover}
.spot-dark{position:absolute;inset:0;--r:0;background:radial-gradient(circle at 50% 38%,rgba(10,3,3,0) calc(var(--r) * 78%),rgba(10,3,3,.9) calc(var(--r) * 78% + 16%),rgba(10,3,3,.97) 100%);transition:opacity .8s var(--ease-out)}
.spot.done .spot-dark{opacity:0}
.spot-done{position:absolute;left:0;right:0;bottom:0;padding:48px 24px 22px;font-family:var(--font-display);font-size:1.5rem;color:var(--text-primary);text-align:center;background:linear-gradient(0deg,rgba(14,5,5,.85),rgba(14,5,5,0));opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease-out) .3s,transform .8s var(--ease-out) .3s}
.spot.done .spot-done{opacity:1;transform:none}
.hold{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:6px 22px 6px 6px;border-radius:var(--radius-pill);border:1.5px solid rgba(36,19,17,.4);background:var(--mantel);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:border-color var(--t-fast) var(--ease-out),opacity .6s var(--ease-out)}
.hold:hover{border-color:var(--ink)}
.hold-ring{width:44px;height:44px;transform:rotate(-90deg)}
.hold-ring circle{fill:none;stroke:rgba(36,19,17,.18);stroke-width:4}
.hold-ring .hold-prog{stroke:var(--red);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));stroke-linecap:round}
.hold-label{font-weight:600;color:var(--ink)}
.spot.done .hold{opacity:.4;pointer-events:none}
@media (max-width:900px){.show-grid{grid-template-columns:1fr}.spot{order:-1}}

/* ---------- Gallery ---------- */
/* The gallery grid, as in Sidex.EsmeraldsGlass: rows are sized from the column width (container units), so every tile
   keeps 3:4, wide photos take two columns (a 3:2 cell) and the feature takes 2x2. Each photo carries its own focus point
   (object-position, editable in the admin) so the crop always keeps faces and guitars in frame. */
.pf-wrap{container-type:inline-size}
.pf-grid{--n:2;--g:10px;--rh:calc((100cqi - (var(--n) - 1) * var(--g)) / var(--n) * 4 / 3);display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-auto-flow:row dense;gap:var(--g)}
@media (min-width:700px){.pf-grid{--n:3;--g:clamp(14px,1.6vw,20px)}}
@media (min-width:1200px){.pf-grid{--n:4;--g:20px}}
.pf-item{position:relative;height:var(--rh);min-width:0}
.pf-feature{grid-column:span 2;grid-row:span 2;height:calc(2 * var(--rh) + var(--g))}
.pf-wide{grid-column:span 2}
.pf-zoom{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:16px;overflow:hidden;background:var(--panel);cursor:zoom-in;box-shadow:0 26px 50px -34px rgba(0,0,0,.7)}
.pf-zoom::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(246,237,228,.14);pointer-events:none}
.pf-zoom img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .6s var(--ease-out);filter:saturate(.94)}
.pf-zoom:hover img,.pf-zoom:focus-visible img{transform:scale(1.045);filter:saturate(1.05)}
.pf-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pf-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;text-align:left;font-family:var(--font-display);font-size:1.05rem;line-height:1.25;color:var(--text-primary);background:linear-gradient(0deg,rgba(14,5,5,.86),rgba(14,5,5,0));opacity:0;transform:translateY(8px);transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out)}
.pf-feature .pf-cap{font-size:clamp(1.2rem,1rem + .6vw,1.5rem);padding:60px 22px 18px}
.pf-ico{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(20,8,8,.55);border:1px solid rgba(246,237,228,.25);opacity:0;transform:translateY(-6px);transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out)}
.pf-ico svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.pf-zoom:hover .pf-cap,.pf-zoom:focus-visible .pf-cap,.pf-zoom:hover .pf-ico,.pf-zoom:focus-visible .pf-ico{opacity:1;transform:none}
@media (hover:none){.pf-cap{opacity:1;transform:none}.pf-ico{display:none}}
@media (max-width:699px){.pf-cap{padding:34px 10px 9px;font-size:.92rem}.pf-zoom{border-radius:12px}}
.pf-empty{min-height:120px}
.js .pf-item.reveal{transition-property:opacity,transform}
/* Filter chips on the gallery page */
.pf-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.pf-filters button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:6px 16px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:rgba(20,8,8,.25);color:var(--text-secondary);font-weight:600;font-size:.95rem;cursor:pointer;transition:all var(--t-fast) var(--ease-out)}
.pf-filters button:hover{color:var(--text-primary);border-color:var(--text-primary)}
.pf-filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pf-filters .n{font:600 .75rem/1 var(--font-body);opacity:.75}
/* Two filter groups side by side (kind, then category): they combine, and wrap one under the other on a phone. */
.pf-bars{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-bottom:28px}
.pf-bars .pf-filters{margin-bottom:0}
.pf-kinds{padding-right:28px;border-right:1px solid var(--line-strong)}
@media (max-width:699px){.pf-kinds{padding-right:0;border-right:0}}
.pf-none{grid-column:1/-1;padding:48px 8px;text-align:center;color:var(--text-secondary)}
/* A video tile: its poster, a play badge in the middle and a tag with its length. */
.pf-play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;display:grid;place-items:center;background:rgba(20,8,8,.62);border:1.5px solid rgba(246,237,228,.7);box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none;transition:transform var(--t-med) var(--ease-out),background-color var(--t-med) var(--ease-out)}
.pf-play svg{width:26px;height:26px;margin-left:3px;fill:#fff}
.pf-zoom:hover .pf-play,.pf-zoom:focus-visible .pf-play{transform:scale(1.08);background:var(--accent)}
.pf-zoom:hover .pf-play svg,.pf-zoom:focus-visible .pf-play svg{fill:var(--on-accent)}
.pf-tag{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:var(--radius-pill);background:rgba(20,8,8,.62);border:1px solid rgba(246,237,228,.25);font:600 .75rem/1 var(--font-body);letter-spacing:.04em;color:var(--text-primary);pointer-events:none}
.pf-video .pf-ico{display:none}
@media (max-width:699px){.pf-play{width:48px;height:48px;margin:-24px 0 0 -24px}.pf-play svg{width:20px;height:20px}.pf-tag{left:7px;top:7px;padding:4px 8px;font-size:.7rem}}
.lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,3,3,.94);color:var(--text-primary)}
.lightbox::backdrop{background:rgba(10,3,3,.6)}
.lightbox[open]{display:grid;place-items:center;animation:fade .3s var(--ease-out)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb-fig{margin:0;display:grid;gap:14px;justify-items:center;padding:64px 72px}
.lb-fig img{max-width:min(92vw,1400px);max-height:calc(100dvh - 170px);width:auto;height:auto;border-radius:10px;box-shadow:var(--shadow-2)}
.lb-fig video{max-width:min(92vw,1400px);max-height:calc(100dvh - 170px);width:auto;height:auto;border-radius:10px;background:#000;box-shadow:var(--shadow-2)}
.lb-fig video[hidden],.lb-fig img[hidden]{display:none}
.lb-cap{font-size:.95rem;color:var(--text-secondary);text-align:center;max-width:60ch}
.lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(30,13,13,.7);cursor:pointer;display:grid;place-items:center;transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.lb-btn:hover{background:rgba(246,237,228,.12);border-color:var(--text-primary)}
.lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-prev{left:16px;top:50%;margin-top:-24px}.lb-next{right:16px;top:50%;margin-top:-24px}.lb-close{right:16px;top:16px}
@media (max-width:640px){.lb-fig{padding:64px 12px 90px}.lb-prev,.lb-next{top:auto;bottom:20px;margin:0}.lb-prev{left:calc(50% - 60px)}.lb-next{right:calc(50% - 60px)}}

/* ---------- Dinner ---------- */
.dinner-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.dinner-photos{position:relative;aspect-ratio:1/1.08}
.dp{position:absolute;border-radius:18px;object-fit:cover;box-shadow:var(--shadow-2)}
.dp1{left:0;top:0;width:72%;height:64%}
.dp2{right:0;top:30%;width:56%;height:40%;border:6px solid var(--mantel)}
.dp3{left:10%;bottom:0;width:58%;height:36%;border:6px solid var(--mantel)}
.js .dinner-photos .dp2{transition-delay:.14s}.js .dinner-photos .dp3{transition-delay:.28s}
.js .dinner-photos .dp.in{transition-delay:0s}
.menu-card{position:relative;padding:clamp(28px,4vw,48px);border-radius:22px;background:#FBF6EF;border:1px solid var(--mantel-line);box-shadow:0 1px 0 #fff inset,var(--shadow-1)}
.menu-card::after{content:"";position:absolute;inset:10px;border:1px solid var(--mantel-line);border-radius:14px;pointer-events:none}
/* The title of the menu card: the name of the dinner, smaller than the section heading over it. */
.menu-card-title{margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--mantel-line);font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.2;color:var(--ink)}
.carta h3{font:600 .8rem/1.2 var(--font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:22px 0 10px}
.carta h3:first-child{margin-top:0}
.carta li{font-family:var(--font-display);font-size:1.18rem;line-height:1.35;padding:6px 0;border-bottom:1px dotted var(--mantel-line)}
.carta-note{display:block;font-family:var(--font-body);font-size:.88rem;color:var(--ink-2);margin-top:2px}
.carta-drink{margin:22px 0 14px;padding:12px 16px;border-radius:12px;background:rgba(242,194,48,.18);font-weight:600}
.menu-card .small{margin-bottom:16px}
.special-menus{margin-top:clamp(40px,6vw,72px)}
.sm-head{display:grid;gap:4px;justify-items:center;text-align:center;margin-bottom:24px}
.sm-head .kicker{margin-bottom:0}
.sm-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),420px));justify-content:center;gap:clamp(20px,3vw,36px)}
.sm-item{min-width:0;display:grid;gap:10px;align-content:start;justify-items:center;text-align:center}
.sm-title{font:400 clamp(1.3rem,1.1rem + .8vw,1.7rem)/1.2 var(--font-display);color:var(--ink);margin:0;overflow-wrap:anywhere}
.sm-dates{margin:0;font:600 .8rem/1.3 var(--font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.sm-photo{display:block;width:100%;padding:0;border:1px solid var(--mantel-line);border-radius:14px;background:#FBF6EF;box-shadow:var(--shadow-1);overflow:hidden;cursor:zoom-in}
.sm-photo:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sm-photo img{display:block;width:100%;height:auto}
@media (max-width:900px){.dinner-grid{grid-template-columns:1fr}.dinner-photos{max-width:560px;width:100%;margin-inline:auto}}

/* ---------- Prices ---------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.price{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 24px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.price h3{font-size:1.25rem;margin-bottom:6px}
.price .amount{font-family:var(--font-display);font-size:3rem;line-height:1;color:var(--text-primary)}
.price p:last-child{color:var(--text-secondary);font-size:.97rem;margin-top:auto;padding-top:10px}
.price.featured{background:linear-gradient(160deg,#4A1D1B,#331716 70%);border-color:rgba(242,194,48,.5);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.price.featured::before{content:"";position:absolute;inset:-1px;border-radius:20px;box-shadow:0 0 40px rgba(242,194,48,.22);opacity:.5;animation:breathe 6s var(--ease-soft) infinite;animation-delay:-2s;pointer-events:none}
@keyframes breathe{0%,100%{opacity:.25}50%{opacity:.75}}
.badge{position:absolute;top:-12px;left:24px;padding:4px 12px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:600 .7rem/1.4 var(--font-label);letter-spacing:.12em;text-transform:uppercase}
.js .price-grid .price:nth-child(2){transition-delay:.08s}.js .price-grid .price:nth-child(3){transition-delay:.16s}.js .price-grid .price:nth-child(4){transition-delay:.24s}
.js .price-grid .price.in{transition-delay:0s}
.prices-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line);color:var(--text-secondary)}
.prices-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:1000px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.price-grid{grid-template-columns:1fr}}

/* ---------- Story ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.chapters{position:relative;border-left:2px solid var(--mantel-line);padding-left:32px;display:grid;gap:40px}
.chapter{position:relative}
.chapter::before{content:"";position:absolute;left:-41px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--mantel);border:2px solid var(--red)}
.year{font:600 .82rem/1 var(--font-label);letter-spacing:.16em;color:var(--red);margin-bottom:10px}
.chapter h3{font-size:clamp(1.45rem,1.2rem + .8vw,1.9rem);margin-bottom:10px}
.story-intro{margin-bottom:40px;color:var(--ink);font-size:1.08rem}
.story-intro p,.chapter-text p{margin:0 0 12px;max-width:58ch}
.story-intro p:last-child,.chapter-text p:last-child{margin-bottom:0}
.chapter-text{color:var(--ink-2)}
.album{position:sticky;top:calc(var(--header-h) + 24px);display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:62px;gap:10px}
.ph{margin:0;border-radius:6px;overflow:hidden;background:#d9ccbc;box-shadow:0 1px 0 #fff inset,0 10px 28px rgba(36,19,17,.2);border:5px solid #FBF6EF}
.ph img{width:100%;height:100%;object-fit:cover}
.ph1{grid-column:1/5;grid-row:1/5}
.ph2{grid-column:5/7;grid-row:1/4;transform:rotate(1.4deg)}
.ph3{grid-column:5/7;grid-row:4/8;transform:rotate(-1.2deg)}
.ph4{grid-column:1/3;grid-row:5/8;transform:rotate(-1deg)}
.ph5{grid-column:3/5;grid-row:5/8;transform:rotate(.8deg)}
.album-cap{grid-column:1/7;font-size:.92rem;color:var(--ink-2);padding-top:10px}
/* Sepia prints that develop as they come into view */
.js .develop img{filter:sepia(1) contrast(.7) brightness(1.25) blur(2px);opacity:.3;transition:filter 2.2s var(--ease-out),opacity 1.6s var(--ease-out)}
.js .develop.in img{filter:sepia(.35) contrast(1) brightness(1) blur(0);opacity:1}
.js .album .ph2 img{transition-delay:.2s}.js .album .ph3 img{transition-delay:.4s}.js .album .ph4 img{transition-delay:.3s}.js .album .ph5 img{transition-delay:.5s}
@media (max-width:900px){.story-grid{grid-template-columns:1fr}.album{position:relative;top:0;grid-auto-rows:13vw}}

/* ---------- Reviews ---------- */
.seals{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;margin-bottom:48px}
.seals li{display:flex;align-items:baseline;gap:10px;color:var(--text-secondary)}
.seals strong{font-family:var(--font-display);font-weight:400;font-size:2.1rem;color:var(--accent)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:20px;width:max-content;padding-block:6px}
.marquee.run .mq-track{animation:marquee 70s linear infinite;animation-delay:-8s}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 10px))}}
.rv{flex:none;width:min(420px,80vw);padding:26px 28px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.rv p{font-family:var(--font-display);font-size:1.25rem;line-height:1.35;margin-bottom:14px}
.review-ask{display:grid;justify-items:center;gap:10px;margin-top:clamp(40px,6vw,64px);text-align:center}
.review-ask-title{font-family:var(--font-display);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);color:var(--text-primary)}
.review-ask-text{max-width:48ch;color:var(--text-secondary);margin-bottom:8px}
.google-review .g-icon{width:18px;height:18px;flex:none;fill:currentColor}
.rv cite{font:600 .72rem/1 var(--font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);font-style:normal}

/* ---------- Social ---------- */
.social-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:center}
.social .lede{margin-bottom:30px}
.social-links{display:grid;gap:10px}
.social-links a{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:16px;border:1px solid var(--mantel-line);background:#FBF6EF;text-decoration:none;color:var(--ink-2);transition:border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.social-links a:hover{border-color:var(--ink);transform:translateX(3px)}
.social-links strong{display:block;color:var(--ink);font-weight:600}
.social-links svg{width:32px;height:32px;flex:none}
.yt{display:grid;gap:10px}
.yt-play,.yt-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:0;padding:0;background:#0d0505;box-shadow:var(--shadow-2);cursor:pointer}
.yt-play img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease-out),filter .6s var(--ease-out);filter:brightness(.78)}
.yt-play:hover img{transform:scale(1.06);filter:brightness(.9)}
.yt-btn{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px}
.yt-btn svg{width:100%;height:100%}
.yt-btn circle{fill:rgba(200,16,46,.92);stroke:rgba(255,255,255,.7);stroke-width:1.5}
.yt-btn path{fill:#fff}
.yt-btn::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);animation:ring 3.6s var(--ease-out) infinite;animation-delay:-1s}
@keyframes ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.yt-label{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-weight:600;color:#fff;text-shadow:var(--tshadow)}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-note{font-size:.85rem;color:var(--ink-2)}
@media (max-width:900px){.social-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,96px);align-items:start}
.faq-grid .sec-head{position:sticky;top:calc(var(--header-h) + 24px)}
.faq-aside{margin:18px 0 20px;max-width:32ch}
.qa details{border-bottom:1px solid var(--line)}
.qa details:first-child{border-top:1px solid var(--line)}
.qa summary{position:relative;list-style:none;cursor:pointer;padding:22px 48px 22px 0;font-family:var(--font-display);font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem);line-height:1.3;transition:color var(--t-fast) var(--ease-out)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;margin-top:-10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform var(--t-med) var(--ease-out)}
.qa details[open] summary::after{transform:translateY(6px) rotate(-135deg)}
.qa summary:hover{color:var(--accent)}
.qa details p{padding:0 48px 24px 0;color:var(--text-secondary);max-width:62ch}
.qa details[open] p{animation:rise-sm .45s var(--ease-out)}
@keyframes rise-sm{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-grid .sec-head{position:static}}

/* ---------- Booking ---------- */
.book-cta{max-width:760px;text-align:center}
.book-cta h2{margin-bottom:18px}
.book-cta .lede{margin:0 auto 30px;max-width:56ch}
.book-cta .book-alt{margin-top:40px;justify-items:center;text-align:center}
.book-cta .reach{justify-content:center}
.hero-ask{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.book-alt{display:grid;gap:14px;padding-top:24px;border-top:1px solid var(--mantel-line)}
.alt-link{border:0;background:none;padding:0;cursor:pointer;text-align:left;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-ink);text-underline-offset:.25em;font-size:1rem}
.alt-link:hover{color:var(--accent-ink)}
/* Call and WhatsApp, side by side wherever the page offers a human */
.reach{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.reach svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.reach .app-icon{stroke:none}
.reach-contact{margin:-12px 0 36px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:stretch}
.facts{display:grid;gap:18px;margin:0 0 36px}
.facts div{display:grid;grid-template-columns:11em 1fr;gap:12px;align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--line)}
.facts dt{font:600 .75rem/1.3 var(--font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.facts dd{margin:0;font-size:1.08rem}
.facts a{text-decoration:none;border-bottom:1px solid var(--accent)}
.facts a:hover{color:var(--accent)}
.hours h3{margin-bottom:14px}
.hours table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours th,.hours td{text-align:left;padding:10px 8px 10px 0;border-bottom:1px solid var(--line);font-weight:400}
.hours thead th{font:600 .72rem/1 var(--font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.hours tbody th{font-weight:600}
.hours tr.closed{color:var(--text-secondary)}
.hours tr.today th::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;border-radius:50%;background:var(--accent);vertical-align:middle;box-shadow:0 0 12px var(--accent)}
.map{position:relative;min-height:420px;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-2);background:var(--panel)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) sepia(.25) contrast(.95)}
.map-btn{position:absolute;right:16px;bottom:16px;background:rgba(30,13,13,.85);backdrop-filter:blur(8px)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}.facts div{grid-template-columns:1fr;gap:4px}}

/* ---------- Show page (espectaculo.html) ---------- */
.st-hero-bg.sp-hero-bg{background:linear-gradient(90deg,rgba(20,7,7,.94) 0%,rgba(20,7,7,.78) 45%,rgba(20,7,7,.4) 100%),url("../img/galeria/cuadro-flamenco-1400.jpg") center/cover}
.sp-body .chap-text h3{font-size:clamp(1.7rem,1.25rem + 1.5vw,2.5rem);margin-bottom:16px}
.sp-artists .sec-head .lede{margin-inline:auto;max-width:56ch}
.sp-fig img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;box-shadow:var(--shadow-2)}
.sp-hours-in{display:grid;justify-items:center}
.sp-hours .hours{width:min(560px,100%)}
.sp-hours .hours h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);margin-bottom:22px}
/* Artists: a row that snaps, arrows on wide screens, a swipe on phones */
.artists{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:clamp(28px,4vw,48px)}
.artists-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * 24px) / 5);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-block:8px;outline-offset:6px}
.artists-track::-webkit-scrollbar{display:none}
.artist{display:grid;justify-items:center;align-content:start;gap:10px;text-align:center;scroll-snap-align:start}
.artist img{width:100%;max-width:190px;aspect-ratio:1;object-fit:cover;border-radius:50%;border:2px solid var(--accent);box-shadow:var(--shadow-1)}
.artist-name{font-family:var(--font-display);font-size:1.2rem;line-height:1.2;color:var(--text-primary)}
.artist-role{font-size:.9rem;color:var(--text-secondary)}
.artists-nav{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);cursor:pointer;transition:border-color var(--t-fast) var(--ease-out),opacity var(--t-fast) var(--ease-out)}
.artists-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.artists-nav:hover{border-color:var(--text-primary)}
.artists-nav[disabled]{opacity:.3;cursor:default}
@media (max-width:900px){.artists-track{grid-auto-columns:calc((100% - 2 * 16px) / 3);gap:16px}}
@media (max-width:560px){.artists{grid-template-columns:1fr}.artists-nav{display:none}.artists-track{grid-auto-columns:42%}}

/* ---------- Blog (server-rendered into blog.html) and the news on the home page ---------- */
.wrap-narrow{width:min(760px,100%);margin-inline:auto;padding-inline:var(--gutter);box-sizing:border-box}
.blog-main{background:var(--mantel);color:var(--ink);padding-top:var(--header-h);min-height:70vh}
.blog-head{padding-block:clamp(56px,8vw,96px) clamp(28px,4vw,44px)}
.blog-head h1{font-size:clamp(2.4rem,1.4rem + 4vw,4.4rem);max-width:16ch;margin-bottom:16px}
.blog-head .lede{max-width:56ch;color:var(--ink-2)}
.blog-main .kicker{color:var(--accent-ink)}
.blog-head .kicker a,.post-header .kicker a{color:inherit;text-decoration:none}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,32px);padding-bottom:clamp(48px,7vw,96px)}
.post-card a{display:grid;gap:10px;align-content:start;height:100%;padding-bottom:18px;border-radius:20px;background:#FBF6EF;border:1px solid var(--mantel-line);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.post-card a:hover{transform:translateY(-3px);box-shadow:var(--shadow-1)}
.post-cover{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.post-card .post-date,.post-card .post-title,.post-card .post-excerpt,.post-card .post-more{margin-inline:20px}
.post-card .post-date:first-child{margin-top:20px}
.post-date{font:600 .74rem/1.2 var(--font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.post-title{font-family:var(--font-display);font-weight:400;font-size:1.4rem;line-height:1.2}
.post-excerpt{color:var(--ink-2);font-size:.98rem;line-height:1.55}
.post-more{font-weight:600;text-decoration:underline;text-decoration-color:var(--accent-ink);text-underline-offset:.25em}
.blog-empty{padding-bottom:96px;color:var(--ink-2)}
.blog-pager{display:flex;justify-content:space-between;gap:16px;padding-bottom:96px}
.blog-pager a{font-weight:600;color:var(--ink)}
.post{padding-bottom:clamp(40px,6vw,72px)}
.post-header{padding-block:clamp(56px,8vw,96px) 28px}
.post-header h1{font-size:clamp(2.2rem,1.4rem + 3.2vw,3.8rem);margin-bottom:16px}
.post-hero{margin-block:0 36px}
.post-hero img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow-2)}
.post-body{font-size:1.1rem;line-height:1.75;color:#3E2A25}
.post-body>*+*{margin-top:1.1em}
.post-body h2,.post-body h3,.post-body h4{margin-top:1.8em;color:var(--ink)}
.post-body h2{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem)}
.post-body h3{font-size:1.4rem}
.post-body ul,.post-body ol{padding-left:1.4em;list-style:revert}
.post-body a{color:var(--ink);text-decoration-color:var(--accent-ink);text-underline-offset:.2em}
.post-body img{max-width:100%;height:auto;border-radius:14px}
.post-body blockquote{margin-inline:0;padding-left:20px;border-left:3px solid var(--red);font-family:var(--font-display);font-size:1.3rem;color:var(--ink)}
.post-cta{display:grid;justify-items:start;gap:14px;margin-top:48px;padding:28px;border-radius:20px;background:#FBF6EF;border:1px solid var(--mantel-line)}
.post-cta p{font-family:var(--font-display);font-size:1.5rem;color:var(--ink)}
.post-related h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);margin-bottom:24px}
/* The news of the home page sit on a dark section: dark cards there. */
.news .post-card a{background:rgba(30,13,13,.55);border-color:var(--line);color:var(--text-primary)}
.news .post-excerpt{color:var(--text-secondary)}
.news .post-date{color:var(--accent)}
.news .post-more{text-decoration-color:var(--accent)}
.news .blog-grid{padding-bottom:0}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr}}

/* ---------- Newsletter: the band above every footer, and its page ---------- */
.foot-news{padding-bottom:48px;margin-bottom:48px;border-bottom:1px solid var(--line)}
.nl-form{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(20px,4vw,56px);align-items:start}
.nl-title{font-family:var(--font-display);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--text-primary);margin-bottom:6px}
.nl-text{color:var(--text-secondary);max-width:44ch}
.nl-fields{display:grid;gap:12px}
.nl-row{display:flex;gap:10px}
.nl-row input{flex:1;min-width:0;min-height:48px;padding:0 18px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:rgba(246,237,228,.06);color:var(--text-primary);font:inherit}
.nl-row input::placeholder{color:var(--text-secondary)}
.nl-row input:focus{outline:2px solid var(--accent);outline-offset:1px}
.nl-row input[aria-invalid="true"]{border-color:var(--danger)}
.nl-consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--text-secondary)}
.nl-consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.nl-consent input[aria-invalid="true"]{outline:2px solid var(--danger);outline-offset:2px}
.nl-consent a{color:var(--text-primary)}
.nl-msg{min-height:1.4em;font-size:.95rem;color:var(--text-secondary)}
.nl-msg.ok{color:var(--accent)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.st-hero-bg.nl-hero-bg{background:linear-gradient(90deg,rgba(20,7,7,.96) 0%,rgba(20,7,7,.8) 50%,rgba(20,7,7,.55) 100%),url("../img/galeria/guitarras-trencadis-1400.jpg") center/cover}
.np-status{min-height:3.2em}
@media (max-width:820px){.nl-form{grid-template-columns:1fr}}
@media (max-width:460px){.nl-row{flex-direction:column}.nl-row .btn{width:100%}}

/* Jobs: the compact form at the very end of the home page. Two columns on a desktop, one on a phone. */
.jobs{padding-block:clamp(56px,8vw,96px)}
.jobs-in{max-width:880px}
.jobs .sec-head h2{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem);max-width:26ch;margin-inline:auto}
.jobs-lede{margin:10px auto 0;color:var(--text-secondary);max-width:46ch}
.jobs-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:clamp(24px,4vw,36px)}
.jobs-field{display:grid;gap:6px;min-width:0}
.jobs-wide{grid-column:1/-1}
.jobs-field label{font:600 .78rem/1.2 var(--font-label);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.jobs-opt{font-family:var(--font-body);font-weight:400;letter-spacing:0;text-transform:none;opacity:.8}
.jobs-field input,.jobs-field select,.jobs-field textarea{width:100%;min-width:0;min-height:48px;padding:11px 16px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(246,237,228,.06);color:var(--text-primary);font:inherit}
.jobs-field textarea{resize:vertical;min-height:112px}
.jobs-field select option{color:#1d0f0f;background:#fbf6ef}
.jobs-field input:focus,.jobs-field select:focus,.jobs-field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.jobs-field [aria-invalid="true"]{border-color:var(--danger)}
.jobs-form .nl-consent{align-items:flex-start}
.jobs-send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.jobs-msg{margin:0;flex:1 1 220px;min-height:1.4em;font-size:.95rem;color:var(--text-secondary)}
.jobs-msg.ok{color:var(--accent)}
.jobs-msg.err{color:#ffb4a8}
@media (max-width:640px){.jobs-form{grid-template-columns:minmax(0,1fr)}.jobs-send .btn{width:100%}}

/* ---------- Final call ---------- */
.final{position:relative;overflow:hidden;text-align:center;padding-block:clamp(110px,15vw,200px);isolation:isolate}
.final-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(20,7,7,.92),rgba(20,7,7,.62)),url("../img/sala-escenario.jpg") center/cover no-repeat}
.final-in h2{font-size:clamp(2.4rem,1.4rem + 4vw,4.6rem);margin:0 auto 18px;max-width:14ch;text-shadow:var(--tshadow)}
.final-in p{color:#E9D8CC;margin-bottom:30px;font-size:1.12rem;text-shadow:var(--tshadow)}

/* ---------- Footer ---------- */
.foot{background:#150808;border-top:1px solid var(--line);padding-top:56px;color:var(--text-secondary);font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;padding-bottom:40px}
.foot-brand{display:flex;gap:14px;align-items:flex-start}
.foot-brand .mark{width:44px;height:44px;flex:none}
.foot-brand strong{color:var(--text-primary);font-weight:600}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;align-content:start}
.foot-links a,.foot-contact a{text-decoration:none;transition:color var(--t-fast) var(--ease-out)}
.foot-links a:hover,.foot-contact a:hover{color:var(--accent)}
.foot-cookie{padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.foot-cookie:hover{color:var(--accent)}
.foot-contact{display:grid;gap:8px;align-content:start}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px 28px;border-top:1px solid var(--line);font-size:.86rem}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr}}

/* ---------- The moon: reading progress + Luna launcher ---------- */
.moon{position:fixed;right:20px;bottom:20px;z-index:60;width:64px;height:64px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45));transition:transform var(--t-med) var(--ease-out);opacity:0;transform:translateY(12px) scale(.9);animation:rise .8s var(--ease-out) 1.6s forwards}
.moon:hover{transform:scale(1.06)}
.moon svg{width:100%;height:100%;overflow:visible}
.moon-track{fill:#1E0D0D;stroke:rgba(242,194,48,.18);stroke-width:4}
.moon-prog{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--read,0));transform:rotate(-90deg);transform-origin:50% 50%}
.moon::before{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 34px rgba(242,194,48,.45);opacity:0;transition:opacity .8s var(--ease-out)}
.moon.full::before{opacity:1;animation:breathe 5s var(--ease-soft) infinite;animation-delay:-1s}
.moon-tip{position:absolute;right:76px;top:50%;margin-top:-18px;height:36px;display:flex;align-items:center;padding:0 16px;border-radius:var(--radius-pill);background:var(--mantel);color:var(--ink);font-weight:600;font-size:.94rem;white-space:nowrap;box-shadow:var(--shadow-1);opacity:0;transform:translateX(8px);transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out);pointer-events:none}
.moon.full .moon-tip,.moon:hover .moon-tip,.moon:focus-visible .moon-tip{opacity:1;transform:none}
.moon[aria-expanded="true"] .moon-tip{opacity:0}
@media (max-width:640px){.moon{right:14px;bottom:14px;width:58px;height:58px}.moon-tip{right:68px}}

/* ---------- A new version was deployed while the page was open (site.js initVersionCheck) ---------- */
.reload-bar{position:fixed;left:50%;bottom:24px;z-index:61;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;border-radius:var(--radius-pill);background:var(--panel);color:var(--text-primary);border:1px solid var(--line);box-shadow:var(--shadow-2);font-weight:500;font-size:.95rem;animation:reload-in .5s var(--ease-out) both}
.reload-bar .btn{min-height:38px;padding:.5em 1.1em;font-size:.95rem}
@keyframes reload-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
/* On a phone it leaves the moon launcher its corner. */
@media (max-width:640px){.reload-bar{left:14px;right:84px;bottom:14px;transform:none;animation:none;justify-content:space-between;gap:10px;padding:6px 6px 6px 14px;border-radius:22px;font-size:.88rem}}
@media (prefers-reduced-motion:reduce){.reload-bar{animation:none}}

/* ---------- Home sections alternate dark and light ----------
   From the key figures on, every section takes the other tone of the one before it: figures light, evening dark,
   timetable light, show dark, dinner light, gallery dark, story light, reviews dark, social light, news dark,
   questions light, booking dark, contact light, the final call dark and jobs light. The rules below adapt the
   sections that sit on a tone other than the one they were first drawn for. */
/* Key figures, on light. */
.kpis.mantel{border-block-color:var(--mantel-line)}
.kpis.mantel .kpi-val{color:var(--accent-ink)}
.kpis.mantel .kpi-txt{color:var(--ink-2)}
.kpis.mantel .kpi-txt::before{background:var(--accent-ink)}
/* Timetable, on light: the timetable on paper, framed in gold. */
.hours-band.mantel .nh-moon{color:var(--accent-ink)}
.hours-band.mantel .night-hours{background:#FBF6EF;border-color:rgba(122,92,0,.45);box-shadow:var(--shadow-1)}
.hours-band.mantel .night-hours-title,.hours-band.mantel .nh-times{color:var(--accent-ink)}
.hours-band.mantel .night-hours-list li{border-top-color:var(--mantel-line)}
.hours-band.mantel .nh-days,.hours-band.mantel .nh-close{color:var(--ink)}
.hours-band.mantel .nh-reco{color:var(--ink-2)}
/* Show, on dark: the three pillars, the closing and the quote in light text; the spotlight button goes dark. */
.show.sala .pillars{border-top-color:var(--line)}
.show.sala .pillar{border-bottom-color:var(--line);color:var(--text-secondary)}
.show.sala .pillar-name{color:var(--text-primary)}
.show.sala .pillars.lit .pillar{color:var(--text-primary)}
.show.sala .pillars.lit .pillar-name{color:var(--accent)}
.show.sala .show-close{color:var(--text-secondary)}
.show.sala .quote{border-left-color:var(--accent)}
.show.sala .quote cite{color:var(--text-secondary)}
.show.sala .hold{background:rgba(246,237,228,.06);border-color:var(--line-strong)}
.show.sala .hold:hover{border-color:var(--text-primary)}
.show.sala .hold-ring circle{stroke:rgba(246,237,228,.22)}
.show.sala .hold-ring .hold-prog{stroke:var(--accent)}
.show.sala .hold-label{color:var(--text-primary)}
/* Questions, on light. */
.faq.mantel .qa details{border-bottom-color:var(--mantel-line)}
.faq.mantel .qa details:first-child{border-top-color:var(--mantel-line)}
.faq.mantel .qa summary::after{border-color:var(--accent-ink)}
.faq.mantel .qa summary:hover{color:var(--accent-ink)}
.faq.mantel .qa details p{color:var(--ink-2)}
/* Booking, on dark. */
.book.sala .book-alt{border-top-color:var(--line)}
.book.sala .alt-link{color:var(--text-primary);text-decoration-color:var(--accent)}
.book.sala .alt-link:hover{color:var(--accent)}
.book.sala .book-alt > li > span{color:var(--text-secondary)}
/* Contact, on light: the facts and the timetable in ink, the map framed on paper. */
.contact.mantel .facts div,.contact.mantel .hours th,.contact.mantel .hours td{border-bottom-color:var(--mantel-line)}
.contact.mantel .facts dt,.contact.mantel .hours thead th,.contact.mantel .hours tr.closed{color:var(--ink-2)}
.contact.mantel .facts a{border-bottom-color:var(--accent-ink)}
.contact.mantel .facts a:hover{color:var(--accent-ink)}
.contact.mantel .hours tr.today th::after{background:var(--red);box-shadow:0 0 10px rgba(200,16,46,.45)}
.contact.mantel .map{border-color:var(--mantel-line);background:#FBF6EF;box-shadow:var(--shadow-1)}
.contact.mantel .map-btn{background:rgba(251,246,239,.92)}
/* Jobs, on light: paper fields with ink. */
.jobs.mantel .jobs-lede,.jobs.mantel .jobs-field label,.jobs.mantel .jobs-msg,.jobs.mantel .nl-consent{color:var(--ink-2)}
.jobs.mantel .nl-consent a{color:var(--ink)}
.jobs.mantel .jobs-field input,.jobs.mantel .jobs-field select,.jobs.mantel .jobs-field textarea{background:#FBF6EF;border-color:rgba(36,19,17,.28);color:var(--ink)}
.jobs.mantel .jobs-field input::placeholder,.jobs.mantel .jobs-field textarea::placeholder{color:rgba(36,19,17,.45)}
.jobs.mantel .jobs-field input:focus,.jobs.mantel .jobs-field select:focus,.jobs.mantel .jobs-field textarea:focus{outline-color:var(--accent-ink)}
.jobs.mantel .jobs-msg.ok{color:var(--accent-ink)}
.jobs.mantel .jobs-msg.err{color:var(--red)}

/* ---------- Pausing and reduced motion ---------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
.off *,.off *::before,.off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .js .reveal,.js .hero-kicker,.js .hero-title .w,.js .hero-sub,.js .hero-ctas,.js .hero-proof,.moon{opacity:1!important;transform:none!important}
  .js .tiles polygon{opacity:1!important;transform:none!important}
  .js .develop img{filter:sepia(.35)!important;opacity:1!important}
  .hero-poster{transform:none}
  .ph2{transform:rotate(1.4deg)!important}.ph3{transform:rotate(-1.2deg)!important}.ph4{transform:rotate(-1deg)!important}.ph5{transform:rotate(.8deg)!important}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .mq-track{flex-wrap:wrap;width:auto;justify-content:center}
  .mq-track .rv[aria-hidden="true"]{display:none}
}

/* ---------- Language-only blocks (long texts written per language) ---------- */
html[lang="es"] [data-lang-only]:not([data-lang-only="es"]),
html[lang="en"] [data-lang-only]:not([data-lang-only="en"]),
html[lang="fr"] [data-lang-only]:not([data-lang-only="fr"]),
html[lang="de"] [data-lang-only]:not([data-lang-only="de"]),
html[lang="it"] [data-lang-only]:not([data-lang-only="it"]){display:none}

/* ---------- "See more" links under a home section ---------- */
.more-row{display:flex;justify-content:flex-start;margin-top:clamp(28px,4vw,44px)}
.more-row.center{justify-content:center}
.more-link{display:inline-flex;align-items:center;gap:10px}
.more-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast) var(--ease-out)}
.more-link:hover svg{transform:translateX(3px)}

/* ---------- History page ---------- */
.st-hero{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--header-h) + clamp(72px,10vw,130px)) 0 clamp(64px,8vw,110px)}
.st-hero-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,7,7,.96) 0%,rgba(20,7,7,.84) 45%,rgba(20,7,7,.55) 100%),url("../img/historia/pared-fotos.jpg") center/cover no-repeat;filter:sepia(.35)}
.st-hero-in h1{font-size:clamp(2.8rem,1.4rem + 5vw,5.6rem);max-width:12ch;margin-bottom:22px;text-shadow:var(--tshadow)}
/* The show page title carries the name of the tablao: smaller and wider, so it does not fill the screen. */
.sp-hero .st-hero-in h1{font-size:clamp(2.2rem,1.2rem + 3.4vw,4rem);max-width:20ch}
.st-lede{font-size:clamp(1.08rem,1rem + .5vw,1.35rem);line-height:1.55;max-width:48ch;color:#EBDCD1;margin-bottom:40px}
.st-years{display:flex;flex-wrap:wrap;gap:14px}
.st-years li{display:grid;gap:4px;min-width:150px;padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(30,13,13,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.st-years b{font-family:var(--font-display);font-weight:400;font-size:1.7rem;color:var(--accent)}
.st-years span{font-size:.92rem;color:var(--text-secondary)}
.st-body{background:var(--mantel);color:var(--ink);padding-block:clamp(72px,9vw,120px)}
.chap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,90px);align-items:start;padding-block:clamp(36px,5vw,64px)}
.chap.flip .chap-text{order:2}
.chap-text h2{font-size:clamp(1.9rem,1.3rem + 2vw,3rem);margin-bottom:22px;max-width:20ch}
.chap-text p{font-size:1.08rem;line-height:1.75;color:#3E2A25;margin-bottom:18px;max-width:62ch}
.chap-text .sp-beats{font-family:var(--font-display);font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);line-height:1.5;color:var(--ink);padding-left:18px;border-left:3px solid var(--red)}
.chap-text p:last-child{margin-bottom:0}
.chap-n{font:600 .9rem/1 var(--font-label);letter-spacing:.2em;color:var(--red);margin-bottom:14px}
.chap-figs{display:grid;gap:26px;position:sticky;top:calc(var(--header-h) + 28px)}
.chap-figs.two{grid-template-columns:1fr 1fr;align-items:start}
.chap-fig{margin:0;position:sticky;top:calc(var(--header-h) + 28px)}
.chap-figs .chap-fig{position:static}
.print{padding:10px 10px 14px;background:#FBF6EF;border-radius:6px;box-shadow:0 1px 0 #fff inset,0 18px 40px rgba(36,19,17,.22)}
.print img{width:100%;height:auto;border-radius:2px}
.print figcaption{padding:12px 4px 0;font-family:var(--font-display);font-size:1.02rem;line-height:1.3;color:var(--ink)}
.tilt-l{transform:rotate(-1.2deg)}.tilt-r{transform:rotate(1.1deg)}
.js .print.reveal{transform:translateY(26px) rotate(0deg)}
.js .print.reveal.in.tilt-l{transform:rotate(-1.2deg)}
.js .print.reveal.in.tilt-r{transform:rotate(1.1deg)}
.st-quote{margin:clamp(24px,4vw,48px) auto;text-align:center}
.st-quote p{font-family:var(--font-display);font-size:clamp(1.8rem,1.2rem + 2.4vw,3.2rem);line-height:1.15;color:var(--red);max-width:22ch;margin:0 auto 14px}
.st-quote cite{font:600 .78rem/1 var(--font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-style:normal}
.st-wide{margin:clamp(24px,4vw,56px) auto}
.st-wide img{width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow-2);filter:sepia(.25)}
.st-wide figcaption{margin-top:12px;text-align:center;font-family:var(--font-display);font-size:1.1rem;color:var(--ink-2)}
.st-final-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.story-page .final-bg{background:linear-gradient(0deg,rgba(20,7,7,.9),rgba(20,7,7,.66)),url("../img/historia/pepe-hoy.jpg") center/cover no-repeat}
@media (max-width:900px){
  .chap{grid-template-columns:1fr}
  .chap.flip .chap-text{order:0}
  .chap-figs,.chap-fig{position:static}
}
@media (max-width:520px){.chap-figs.two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.js .print.reveal.tilt-l{transform:rotate(-1.2deg)!important}.js .print.reveal.tilt-r{transform:rotate(1.1deg)!important}}

/* ---------- Gallery page ---------- */
.gp{padding-top:calc(var(--header-h) + clamp(56px,7vw,96px))}
.gp-head h1{font-size:clamp(2.6rem,1.4rem + 4.4vw,5rem);max-width:14ch;margin-bottom:18px}
.gp-head .lede{max-width:52ch}
.gallery-page .final-bg{background:linear-gradient(0deg,rgba(20,7,7,.9),rgba(20,7,7,.62)),url("../img/galeria/fin-de-fiesta-1400.jpg") center/cover no-repeat}

/* Credit line, as in Sidex.EsmeraldsGlass: the SIDEX mark keeps its own brand colours */
.powered{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--text-secondary);opacity:.85;transition:opacity var(--t-med) var(--ease-out)}
.powered:hover,.powered:focus-visible{opacity:1}
.pw-txt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.sidex-mark{width:16px;height:16px;flex:none}
.pw-name{font:600 .8rem/1 var(--font-body);letter-spacing:.14em;color:var(--text-primary)}