/* =============================================================================
   PENUMBRA — styles.css
   Editorial Dark Warm · Malasaña, Madrid
   ============================================================================= */

/* =============================================================================
   1. TOKENS
   ============================================================================= */
:root {
  /* Palette */
  --bg:           #0B0B14;
  --bg-2:         #0f0f1c;
  --bg-3:         #131326;
  --surface:      #16162a;
  --surface-2:    #1e1e36;
  --border:       rgba(255,255,255,0.07);
  --cream:        #f0ece3;
  --text:         #ccc8bf;
  --text-muted:   #7a7870;
  --accent-pink:  #FF3D8B;
  --accent-cyan:  #3DE2FF;
  --accent-gold:  #C9A35B;
  --accent:       var(--accent-pink);

  /* Typography */
  --serif:  'Bodoni Moda', 'Times New Roman', Georgia, serif;
  --sans:   'Manrope', 'Inter', system-ui, sans-serif;
  --mono:   'Space Mono', 'Courier New', monospace;

  /* Spacing */
  --gutter:   clamp(1.25rem, 4vw, 2.5rem);
  --section-py: clamp(5rem, 10vw, 9rem);

  /* Easings */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Nav */
  --nav-h: 72px;
}

/* =============================================================================
   2. RESET & BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; object-fit: cover; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1,h2,h3,h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.025em; }
ul { list-style: none; }
::selection { background: var(--accent-pink); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; border-radius: 3px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--cream); color: var(--bg);
  z-index: 10000; border-radius: 6px; font-weight: 600; font-size: .85rem;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* =============================================================================
   3. AURORA BACKGROUND (global animated gradient)
   ============================================================================= */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(255,61,139,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(61,226,255,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 55% 40%, rgba(201,163,91,0.04) 0%, transparent 50%);
  animation: aurora-shift 18s ease-in-out infinite alternate;
}
@keyframes aurora-shift {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(2%,1.5%) scale(1.03); }
  66%  { transform: translate(-1.5%,2%) scale(0.98); }
  100% { transform: translate(1%,-1%) scale(1.02); }
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* =============================================================================
   4. CURSOR
   ============================================================================= */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9998;
  pointer-events: none; display: none;
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }

.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 5px; height: 5px; margin: -2.5px;
  background: var(--cream); border-radius: 50%;
  will-change: transform; pointer-events: none;
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 34px; height: 34px; margin: -17px;
  border: 1.5px solid rgba(255,255,255,0.4); border-radius: 50%;
  will-change: transform; pointer-events: none;
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              margin .35s var(--ease-out), border-color .25s;
}
.cursor-label {
  position: fixed; top: 0; left: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cream); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(20px, 20px);
  transition: opacity .2s;
}
.cursor.has-label .cursor-label { opacity: 1; }
.cursor.is-interactive .cursor-ring {
  width: 52px; height: 52px; margin: -26px;
  border-color: var(--accent-pink);
}
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor [role="button"] { cursor: none; }

/* =============================================================================
   5. SPLASH
   ============================================================================= */
#splash {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  animation: splash-hide 0s forwards 4.5s;  /* CSS safety net */
}
@keyframes splash-hide { to { opacity: 0; pointer-events: none; visibility: hidden; } }
#splash.is-gone { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .5s; }

.splash-inner { text-align: center; position: relative; }

.splash-letters {
  display: flex; gap: .05em;
  font-family: var(--serif); font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 700; color: var(--cream); letter-spacing: -.02em;
}
.sl {
  opacity: 0; transform: translateY(30px);
  animation: sl-in .6s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 0.07s + 0.2s);
}
@keyframes sl-in {
  to { opacity: 1; transform: translateY(0); }
}

.splash-bar {
  width: clamp(200px, 50vw, 400px); height: 1px;
  background: var(--border); margin: 2rem auto 1rem; overflow: hidden; border-radius: 1px;
}
.splash-progress {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-cyan));
  animation: sp-fill 3.2s var(--ease-soft) forwards 0.8s;
}
@keyframes sp-fill { to { width: 100%; } }

.splash-sub {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0; animation: fade-in .6s var(--ease-out) forwards 1.2s;
}
@keyframes fade-in { to { opacity: 1; } }

/* =============================================================================
   6. NAV
   ============================================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 var(--gutter);
  transition: background .4s, backdrop-filter .4s;
}
.nav.is-scrolled {
  background: rgba(11,11,20,0.85);
  backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid var(--border);
}
.nav-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.nav-logo-text {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
  color: var(--cream); letter-spacing: -.02em; line-height: 1;
}
.nav-links {
  display: none;
  flex: 1; justify-content: center;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  list-style: none;
}
.nav-links a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); display: flex; align-items: center; gap: .4em;
  transition: color .25s;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--accent-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav-links a:hover { color: var(--cream); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-num { color: var(--text-muted); font-size: .6rem; opacity: .6; }

.nav-cta {
  margin-left: auto;
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem 1.2rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bg); background: var(--cream);
  border-radius: 2px; transition: background .25s, color .25s, transform .2s var(--ease-out);
}
.nav-cta:hover { background: var(--accent-gold); color: var(--bg); transform: translateY(-1px); }

.nav-burger {
  display: flex; flex-direction: column; gap: 5px; padding: 8px;
  margin-left: auto;
}
.nav-burger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--cream); border-radius: 2px;
  transition: transform .35s var(--ease-out), opacity .25s, width .3s;
  transform-origin: center;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; width: 0; }

/* Mobile nav overlay */
.nav-mobile {
  position: fixed; inset: 0; z-index: 199;
  background: var(--bg-2);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) var(--gutter);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .4s var(--ease-out), visibility .4s;
}
.nav-mobile.is-open {
  opacity: 1; pointer-events: all; visibility: visible;
}
.nav-mobile ul { list-style: none; width: 100%; }
.nm-link {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--border);
  transition: color .2s;
}
.nm-link:hover { color: var(--cream); }
.nm-num { font-family: var(--mono); font-size: .65rem; color: var(--text-muted); }
.nm-text {
  font-family: var(--serif); font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 700; color: var(--cream); letter-spacing: -.02em;
}
.nm-cta {
  margin-top: 2rem;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-pink); display: inline-block;
  border-bottom: 1px solid var(--accent-pink); padding-bottom: 2px;
}
.nm-footer {
  margin-top: auto; padding-top: 2rem;
  display: flex; flex-direction: column; gap: .4rem;
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}

/* =============================================================================
   7. SIDE BAR
   ============================================================================= */
.side-bar {
  position: fixed; right: 0; top: 50%; z-index: 100;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  display: none;
  align-items: center; gap: .6rem;
  pointer-events: none;
}
.side-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-pink);
  animation: pulse-dot 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.7); }
}
.side-text {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}

/* =============================================================================
   8. SECTION COMMON
   ============================================================================= */
section[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

.section-tag {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted); display: inline-block;
}
.section-num-bg {
  position: absolute; right: var(--gutter); top: 0;
  font-family: var(--serif); font-size: clamp(8rem, 22vw, 18rem);
  font-weight: 700; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.04);
  line-height: 1; pointer-events: none; user-select: none; z-index: 0;
  letter-spacing: -.05em;
}

/* REVEAL SYSTEM */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Critical safety: data-split elements must never stay invisible */
.reveal[data-split] { opacity: 1; transform: none; }

/* =============================================================================
   9. BUTTONS
   ============================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.8rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 2px;
  transition: background .25s, color .25s, transform .2s var(--ease-out), box-shadow .25s;
  white-space: nowrap; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent-pink); color: #fff;
  box-shadow: 0 0 0 0 rgba(255,61,139,0);
}
.btn-primary:hover {
  background: #ff5599;
  box-shadow: 0 6px 30px rgba(255,61,139,0.35);
}
.btn-ghost {
  background: transparent; color: var(--cream);
  border: 1px solid rgba(255,255,255,0.2);
}
.btn-ghost:hover { border-color: var(--cream); background: rgba(255,255,255,0.05); }
.btn-outline {
  background: transparent; color: var(--cream);
  border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.btn-full { width: 100%; justify-content: center; padding: 1.1rem; }

/* =============================================================================
   10. HERO
   ============================================================================= */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.hero-aurora, .hero-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.hero-aurora {
  background:
    radial-gradient(ellipse 70% 80% at 0% 100%, rgba(255,61,139,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(61,226,255,0.07) 0%, transparent 50%);
}
.hero-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px; opacity: .03;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: brightness(.55) saturate(.7);
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11,11,20,0.3) 0%,
    rgba(11,11,20,0.05) 35%,
    rgba(11,11,20,0.5) 70%,
    rgba(11,11,20,0.92) 100%
  );
}
.hero-content {
  position: relative; z-index: 2; max-width: 900px;
}
.hero-kicker {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 1.5rem;
}
.hero-title {
  font-family: var(--serif); font-size: clamp(4rem, 14vw, 13rem);
  font-weight: 700; color: var(--cream); line-height: .96;
  letter-spacing: -.04em; margin-bottom: 1.5rem;
}
.ht-line { display: block; }
.ht-line-2 {
  padding-left: clamp(2rem, 10vw, 8rem);
  color: transparent; -webkit-text-stroke: 1.5px var(--cream);
}
.ht-word { display: inline-block; }

.hero-tagline {
  font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-style: italic; color: var(--accent-gold);
  margin-bottom: 2.5rem;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center;
}
.hero-scroll {
  position: absolute; right: var(--gutter); bottom: 3rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
}
.scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, transparent, var(--text-muted));
  animation: scroll-hint 2s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%,100% { opacity: .4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(.6) translateY(12px); }
}
.scroll-text {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted); writing-mode: vertical-rl;
}

/* =============================================================================
   11. MARQUEE NEÓN
   ============================================================================= */
.marquee-wrap {
  position: relative; z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  padding: .9rem 0;
}
.marquee-track {
  display: inline-flex; align-items: center; gap: 2rem;
  white-space: nowrap;
  animation: marquee-roll 28s linear infinite;
  will-change: transform;
}
@keyframes marquee-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-text {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-muted);
}
.marquee-dot {
  color: var(--accent-pink); font-size: .9rem; opacity: .7;
}

/* =============================================================================
   12. SECCIÓN LOCAL (01)
   ============================================================================= */
.section-local {
  position: relative; z-index: 2;
  padding: var(--section-py) var(--gutter);
  overflow: hidden;
}
.local-grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}
/* Collage */
.local-collage {
  position: relative;
  height: clamp(400px, 60vw, 600px);
}
.lc-frame {
  position: absolute; overflow: hidden; border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lc-frame img { width: 100%; height: 100%; object-fit: cover; }
.lc-frame-1 {
  width: 65%; aspect-ratio: 3/4;
  top: 0; left: 0;
  transform: rotate(-1.5deg);
  border: 1px solid var(--border);
}
.lc-frame-2 {
  width: 50%; aspect-ratio: 4/3;
  bottom: 10%; right: 0;
  transform: rotate(2deg);
  border: 1px solid var(--border);
}
.lc-frame-3 {
  width: 38%; aspect-ratio: 1;
  top: 8%; right: 5%;
  transform: rotate(-.8deg);
  border: 1px solid var(--border);
}
.lc-ribbon {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  background: var(--accent-gold); color: var(--bg);
  padding: .3rem .8rem; white-space: nowrap; z-index: 2;
}
/* Content */
.local-kicker {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.8rem;
}
.local-aside {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted);
}
.local-title {
  font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700; color: var(--cream); line-height: 1.1; margin-bottom: 1.8rem;
}
.local-title em { font-style: italic; color: var(--accent-gold); }
.local-quote {
  border-left: 2px solid var(--accent-pink); padding-left: 1.2rem;
  margin-bottom: 1.8rem;
}
.local-quote p {
  font-family: var(--serif); font-size: 1rem; font-style: italic;
  color: var(--text-muted); line-height: 1.6;
}
.local-lead {
  font-size: 1.05rem; color: var(--cream); font-weight: 500;
  margin-bottom: 1rem;
}
.local-body { margin-bottom: 2.5rem; }
.local-meta { margin-top: 2rem; }
.lm-row {
  display: grid; grid-template-columns: 6rem 1fr;
  gap: .5rem; padding: .75rem 0;
  border-top: 1px solid var(--border);
  font-size: .88rem;
}
.lm-row:last-child { border-bottom: 1px solid var(--border); }
.lm-row dt {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.lm-row dd { color: var(--cream); }

/* =============================================================================
   13. SECCIÓN CÓCTELES (02)
   ============================================================================= */
.section-cocktails {
  position: relative; z-index: 2;
  padding-top: var(--section-py);
  overflow: hidden;
}
.cocktails-header {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding: 0 var(--gutter) 2rem;
}
.cocktails-progress {
  display: flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .75rem; color: var(--text-muted); margin-left: auto;
}
.cp-current { color: var(--cream); font-weight: 700; }
.cocktails-series-toggle {
  display: flex; gap: .5rem;
}
.series-btn {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .75rem;
  border: 1px solid var(--border); border-radius: 2px;
  color: var(--text-muted); background: transparent;
  transition: all .2s;
}
.series-btn:hover, .series-btn.active {
  border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(201,163,91,.07);
}

/* Viewport & track */
.cocktails-viewport {
  position: relative; width: 100%; overflow: hidden;
  touch-action: pan-y;
}
.cocktails-track {
  display: flex;
  transition: transform .5s var(--ease-out);
  will-change: transform;
  cursor: grab;
}
.cocktails-track:active { cursor: grabbing; }

/* Card */
.cocktail-card {
  flex: 0 0 100%; min-height: clamp(480px, 85vh, 700px);
  position: relative; overflow: hidden;
  display: flex; align-items: stretch;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cc-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 60% 80% at 20% 100%, color-mix(in srgb, var(--liquid) 12%, transparent), transparent 70%);
  transition: opacity .4s;
}
.cc-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 2rem; padding: 3rem var(--gutter);
  width: 100%;
}
.cc-glass-wrap {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: clamp(120px, 25vw, 200px);
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.cocktail-card.is-active .cc-glass-wrap { opacity: 1; transform: translateY(0); }
.glass-svg { width: 100%; height: auto; }
/* SVG path animation — draw in on activation */
.glass-path {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 1.2s var(--ease-out) .15s;
}
.cocktail-card.is-active .glass-path { stroke-dashoffset: 0; }
.glass-liquid { opacity: 0; transition: opacity .6s var(--ease-out) .5s; }
.cocktail-card.is-active .glass-liquid { opacity: 1; }
.glass-shine, .glass-steam, .glass-garnish, .glass-ice, .glass-bubble, .glass-foam {
  opacity: 0; transition: opacity .5s var(--ease-out) .7s;
}
.cocktail-card.is-active .glass-shine,
.cocktail-card.is-active .glass-steam,
.cocktail-card.is-active .glass-garnish,
.cocktail-card.is-active .glass-ice,
.cocktail-card.is-active .glass-bubble,
.cocktail-card.is-active .glass-foam { opacity: 1; }

.cc-info {
  flex: 1; display: flex; flex-direction: column; gap: .75rem;
  max-width: 480px; text-align: center;
}
.cc-series {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); align-self: center;
  padding: .2rem .7rem; border: 1px solid var(--accent); border-radius: 2px;
}
.cc-name {
  font-family: var(--serif); font-size: clamp(2.2rem, 8vw, 4.5rem);
  font-weight: 700; color: var(--cream); letter-spacing: -.03em; line-height: 1;
}
.cc-subtitle {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(.9rem, 1.5vw, 1.05rem); color: var(--accent-gold);
}
.cc-ingredients {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .8rem;
  list-style: none;
}
.cc-ingredients li {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); padding: .2rem .5rem;
  border: 1px solid var(--border); border-radius: 2px;
}
.cc-desc { font-size: .92rem; color: var(--text); line-height: 1.7; }

/* Nav arrows */
.cocktails-prev, .cocktails-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 44px; height: 44px;
  border: 1px solid var(--border); border-radius: 50%;
  background: rgba(11,11,20,0.6); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  color: var(--cream); transition: border-color .2s, background .2s;
}
.cocktails-prev:hover, .cocktails-next:hover {
  border-color: var(--accent-gold); background: rgba(201,163,91,.1);
}
.cocktails-prev { left: 1rem; }
.cocktails-next { right: 1rem; }

/* Ingredients marquee (reverse) */
.cocktails-marquee-wrap {
  overflow: hidden; padding: .8rem 0;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.cocktails-marquee-track {
  display: inline-flex; align-items: center; gap: 1.5rem; white-space: nowrap;
  animation: marquee-rev 22s linear infinite;
}
@keyframes marquee-rev {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.cocktails-marquee-track span {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.m-sep { color: var(--accent-pink); }

/* =============================================================================
   14. SECCIÓN MÚSICA (03)
   ============================================================================= */
.section-music {
  position: relative; z-index: 2;
  padding: var(--section-py) var(--gutter);
  overflow: hidden;
}
.music-container { max-width: 900px; margin: 0 auto; }
.music-header { margin-bottom: 3.5rem; }
.music-title {
  font-family: var(--serif); font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700; color: var(--cream); line-height: 1.1;
  margin: .8rem 0 1rem;
}
.music-title em { font-style: italic; color: var(--accent-pink); }
.music-lead { font-size: .95rem; max-width: 480px; }

.music-sessions { display: flex; flex-direction: column; }
.ms-row {
  display: grid;
  grid-template-columns: 3.5rem 3rem 1fr auto;
  align-items: center; gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  transition: background .2s;
}
.ms-row:last-child { border-bottom: 1px solid var(--border); }
.ms-row:hover { background: rgba(255,255,255,0.02); padding-left: .5rem; border-radius: 2px; }
.ms-day {
  display: flex; flex-direction: column; gap: .1rem;
}
.ms-day-name {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--session-accent);
}
.ms-day-full {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--cream);
}
.ms-icon { color: var(--session-accent); flex-shrink: 0; }
.ms-genre {
  font-family: var(--serif); font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700; color: var(--cream);
}
.ms-tagline {
  font-family: var(--serif); font-style: italic;
  font-size: .88rem; color: var(--text-muted);
  text-align: right;
}
.music-cta { margin-top: 3rem; }

/* =============================================================================
   15. SECCIÓN GALERÍA (04)
   ============================================================================= */
.section-gallery {
  position: relative; z-index: 2;
  padding: var(--section-py) 0;
  overflow: hidden;
}
.gallery-header { padding: 0 var(--gutter) 2rem; }
.gallery-lanes {
  display: flex; flex-direction: column; gap: 1.2rem;
}
.gallery-lane { overflow: hidden; }
.gallery-lane-inner {
  display: flex; gap: 1.2rem; width: max-content;
}
.lane-fast .gallery-lane-inner  { animation: gallery-fwd 25s linear infinite; }
.lane-slow .gallery-lane-inner  { animation: gallery-fwd 40s linear infinite; }
.lane-reverse .gallery-lane-inner { animation: gallery-rev 30s linear infinite; }
@keyframes gallery-fwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes gallery-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.gi {
  flex-shrink: 0;
  width: clamp(160px, 28vw, 320px);
  aspect-ratio: 4/3;
  border-radius: 3px; overflow: hidden;
  border: 1px solid var(--border);
}
.gi img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.gi:hover img { transform: scale(1.06); }
.gallery-credits-note {
  padding: 1.5rem var(--gutter) 0;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.gallery-credits-note a { color: var(--accent-gold); border-bottom: 1px solid currentColor; }

/* =============================================================================
   16. SECCIÓN PRIVADOS (05)
   ============================================================================= */
.section-private {
  position: relative; z-index: 2;
  padding: var(--section-py) var(--gutter);
  overflow: hidden;
}
.private-card {
  position: relative; min-height: clamp(480px, 70vh, 700px);
  display: flex; align-items: flex-end;
  border-radius: 3px; overflow: hidden;
  padding: 3rem clamp(1.5rem, 5vw, 4rem);
  transition: transform .1s;
}
.pc-bg {
  position: absolute; inset: 0; z-index: 0;
}
.pc-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) saturate(.6); }
.pc-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,20,.95) 0%, rgba(11,11,20,.4) 60%, rgba(11,11,20,.1) 100%);
}
.pc-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 1.2rem;
  max-width: 580px;
}
.pc-title {
  font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700; color: var(--cream); line-height: 1.1;
}
.pc-title em { font-style: italic; color: var(--accent-pink); }
.pc-lead { font-size: 1rem; }
.pc-list { display: flex; flex-direction: column; gap: .45rem; list-style: none; }
.pc-list li {
  padding-left: 1.2rem; position: relative; font-size: .9rem;
}
.pc-list li::before {
  content: '→'; position: absolute; left: 0;
  color: var(--accent-gold); font-size: .75rem;
}

/* =============================================================================
   17. SECCIÓN RESERVA (06)
   ============================================================================= */
.section-reserva {
  position: relative; z-index: 2;
  padding: var(--section-py) var(--gutter);
  overflow: hidden;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.reserva-grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.reserva-title {
  font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700; color: var(--cream); line-height: 1.1;
  margin: 1rem 0 2.5rem;
}
.reserva-title em { font-style: italic; color: var(--accent-pink); }

/* Form */
.reserva-form { display: flex; flex-direction: column; gap: 1.5rem; }
.rf-field { display: flex; flex-direction: column; gap: .5rem; }
.rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rf-label {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-muted); display: flex; align-items: center; gap: .6rem;
}
.rf-num { color: var(--accent-gold); }
.rf-optional { color: var(--text-muted); font-size: .6rem; opacity: .7; }
.rf-input {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: 2px;
  padding: .9rem 1rem; color: var(--cream);
  font-family: var(--sans); font-size: .9rem;
  transition: border-color .2s, background .2s;
  appearance: none; -webkit-appearance: none;
}
.rf-input::placeholder { color: var(--text-muted); }
.rf-input:focus { outline: none; border-color: var(--accent-gold); background: var(--surface-2); }
.rf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7870' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem; cursor: pointer;
}
.rf-select option { background: var(--bg-2); color: var(--cream); }
.rf-textarea { resize: vertical; min-height: 90px; }
.rf-alt {
  text-align: center; font-size: .82rem; color: var(--text-muted); margin-top: .5rem;
}
.rf-alt a { color: var(--accent-gold); border-bottom: 1px solid currentColor; }

/* Info panel */
.reserva-info { display: flex; flex-direction: column; gap: 1.8rem; }
.ri-block { display: flex; flex-direction: column; gap: .3rem; }
.ri-label {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted);
}
.ri-value {
  font-family: var(--serif); font-size: 1.1rem; color: var(--cream); line-height: 1.4;
}
a.ri-value { transition: color .2s; }
a.ri-value:hover { color: var(--accent-gold); }
.ri-sub {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}

/* =============================================================================
   18. FOOTER
   ============================================================================= */
.footer {
  position: relative; z-index: 2;
  background: var(--bg-3);
  border-top: 1px solid var(--border);
  overflow: hidden;
}
/* Display title marquee */
.footer-display {
  overflow: hidden; border-bottom: 1px solid var(--border); padding: 1rem 0;
}
.footer-display-track {
  display: inline-flex; align-items: center; gap: 1.5rem; white-space: nowrap;
  animation: footer-roll 20s linear infinite;
}
@keyframes footer-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.footer-display-track span {
  font-family: var(--serif); font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 700; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.12);
  letter-spacing: -.04em; line-height: 1;
}
.fd-sep { color: var(--accent-pink); font-size: clamp(2rem, 5vw, 4rem); opacity: .4; }

/* Grid */
.footer-grid {
  display: grid;
  gap: 3rem;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.footer-col-title {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 1.2rem;
}
.footer-col p { line-height: 1.8; }
.footer-metro { font-size: .85rem; color: var(--text-muted); margin-top: .5rem; }
.footer-contact-list { display: flex; flex-direction: column; gap: .6rem; list-style: none; }
.footer-contact-list a { transition: color .2s; font-size: .95rem; }
.footer-contact-list a:hover { color: var(--accent-gold); }
.footer-schedule {
  margin-top: 1.5rem; display: flex; flex-direction: column; gap: .2rem;
}
.schedule-days {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-muted);
}
.schedule-hours {
  font-family: var(--serif); font-size: 1.5rem; color: var(--cream); font-weight: 700;
}
.footer-map-wrap {
  border-radius: 3px; overflow: hidden; border: 1px solid var(--border);
}

/* Legal */
.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: 1.5rem var(--gutter);
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.footer-legal a { transition: color .2s; }
.footer-legal a:hover { color: var(--cream); }
.footer-up { margin-left: auto; color: var(--accent-gold); }

/* =============================================================================
   19. PLACEHOLDER IMAGES (gradient fallbacks while real photos load)
   ============================================================================= */
.hero-bg img:not([src*="."]),
.lc-frame img:not([src*="."]),
.gi img:not([src*="."]),
.pc-bg img:not([src*="."]) {
  background: linear-gradient(135deg, var(--bg-3) 0%, var(--surface-2) 100%);
}

/* Image fallback when src missing */
img[src=""], img:not([src]) {
  background: var(--surface);
  min-height: 100%;
}

/* =============================================================================
   20. RESPONSIVE — MÓVIL (<720px)
   ============================================================================= */
@media (max-width: 719px) {
  .nav {
    gap: .75rem;
    padding: 0 calc(var(--gutter) * .7);
  }
  .nav-logo-text { font-size: 1.1rem; }
  .nav-cta { padding: .5rem .85rem; font-size: .65rem; }
  .nav-cta svg { display: none; }
  .nav-cta span { display: inline; }

  .hero-title {
    font-size: clamp(2.8rem, 13vw, 5rem);
    letter-spacing: -.03em;
  }
  .ht-line-2 { padding-left: clamp(1rem, 8vw, 4rem); }
  .hero-kicker { font-size: .6rem; }
  .hero-tagline { font-size: clamp(.9rem, 3.5vw, 1.1rem); }
  .hero-scroll { display: none; }

  .section-num-bg {
    font-size: clamp(5rem, 20vw, 8rem);
    right: var(--gutter);
    top: .5rem;
  }

  .local-collage {
    height: clamp(300px, 70vw, 450px);
  }
  .lc-frame-1 { width: 60%; }
  .lc-frame-2 { width: 48%; bottom: 8%; }
  .lc-frame-3 { width: 35%; top: 6%; right: 4%; }
  .local-title {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }

  .cocktail-card { min-height: clamp(400px, 90vh, 600px); }
  .cc-name { font-size: clamp(1.8rem, 10vw, 2.8rem); }
  .cc-inner { padding: 2rem var(--gutter); gap: 1.5rem; }
  .cc-glass-wrap { width: clamp(90px, 30vw, 150px); }
  .cocktails-header { flex-wrap: wrap; gap: .5rem; }
  .cocktails-progress { margin-left: 0; width: auto; }
  .cocktails-series-toggle { width: 100%; justify-content: flex-start; }

  .ms-row {
    grid-template-columns: 2.5rem 2rem 1fr;
    gap: .75rem;
    padding: 1rem 0;
  }
  .ms-day-full { display: none; }
  .ms-tagline { display: none; }
  .ms-icon { width: 30px; height: 30px; }
  .ms-icon svg { width: 30px; height: 30px; }
  .ms-genre { font-size: clamp(.95rem, 3.5vw, 1.2rem); }

  .gi { width: clamp(130px, 40vw, 200px); }

  .private-card {
    min-height: clamp(350px, 70vh, 500px);
    padding: 2rem 1.25rem;
  }
  .pc-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }

  .rf-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .reserva-title { font-size: clamp(1.6rem, 6vw, 2.5rem); }

  .footer-grid { gap: 2rem; }
  .footer-map-wrap iframe { height: 140px; }
  .schedule-hours { font-size: 1.2rem; }

  .music-title { font-size: clamp(1.6rem, 7vw, 2.6rem); }
}

/* =============================================================================
   21. RESPONSIVE — TABLET (720px+)
   ============================================================================= */
@media (min-width: 720px) {
  .nav-links { display: flex; }
  .nav-burger { display: none; }
  .nav-cta { margin-left: 0; }

  .side-bar { display: flex; }

  .local-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .local-collage { height: clamp(500px, 55vw, 700px); }

  .cc-inner {
    flex-direction: row; align-items: center;
    padding: 4rem clamp(3rem, 8vw, 6rem);
    text-align: left;
  }
  .cc-info { text-align: left; }
  .cc-series, .cc-subtitle { align-self: flex-start; }
  .cc-ingredients { justify-content: flex-start; }
  .cc-glass-wrap { width: clamp(160px, 22vw, 260px); flex-shrink: 0; }

  .cocktails-prev, .cocktails-next { display: flex; }

  .ms-row { gap: 2.5rem; }

  .reserva-grid { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
   22. RESPONSIVE — DESKTOP (1280px+)
   ============================================================================= */
@media (min-width: 1280px) {
  .section-num-bg { right: calc(var(--gutter) + 2rem); }
  .footer-grid { grid-template-columns: 1fr 1fr 1.5fr; }

  .ms-row {
    grid-template-columns: 5rem 3.5rem 1fr 1fr;
  }

  .cocktail-card { min-height: clamp(500px, 75vh, 750px); }
  .cc-glass-wrap { width: 280px; }
}

/* =============================================================================
   23. REDUCED MOTION — only gate truly intrusive effects
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  /* Only autoplay loops — NOT tilts, hovers, fades */
  .marquee-track,
  .cocktails-marquee-track,
  .gallery-lane-inner,
  .footer-display-track { animation-play-state: paused; }
  body::before { animation: none; }
  .splash-progress { animation-duration: 0.1s; }
  /* All other micro-interactions: intentionally NOT gated */
}