/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  --bg:         #0D0C0A;
  --bg-2:       #141210;
  --bg-3:       #1C1916;
  --cream:      #F5EDD8;
  --cream-2:    #D9CEBC;
  --cream-3:    #8A7E6A;
  --accent:     #4CAF82;
  --accent-2:   #3A8F68;
  --gold:       #D4A843;
  --gold-2:     #B8902F;
  --line:       rgba(245,237,216,.1);

  --serif:      'Playfair Display', Georgia, serif;
  --sans:       'Manrope', system-ui, sans-serif;
  --mono:       'Space Mono', monospace;

  --ease-out:   cubic-bezier(0.16,1,0.3,1);
  --ease-soft:  cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);

  --nav-h:      72px;
  --container:  1200px;
  --gutter:     1.5rem;
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*,*::before,*::after { box-sizing:border-box; margin:0; }
html {
  -webkit-text-size-adjust:100%;
  tab-size:2;
  overflow-x:clip;
  scroll-behavior:smooth;
}
body {
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  background:var(--bg);
  color:var(--cream);
  -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.02em; }
ul { list-style:none; padding:0; }
::selection { background:var(--accent); color:var(--bg); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* =============================================================
   3. UTILITIES
   ============================================================= */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip-link { position:fixed; top:-100px; left:1rem; padding:.6rem 1.2rem; background:var(--cream); color:var(--bg); z-index:9999; border-radius:6px; font-weight:600; transition:top .2s; }
.skip-link:focus { top:1rem; }
.container { max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.section-label { font-family:var(--mono); font-size:.75rem; letter-spacing:.15em; color:var(--accent); }

/* =============================================================
   4. REVEALS (defensive: data-split always visible)
   ============================================================= */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible { opacity:1; transform:none; }
.reveal[data-split] { opacity:1; transform:none; }

/* =============================================================
   5. SPLASH
   ============================================================= */
.splash {
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  transition:opacity .8s var(--ease-out), clip-path .8s var(--ease-out);
  /* Safety: auto-hide at 4.5s if JS fails */
  animation:splashSafety .01s 4.5s forwards;
}
@keyframes splashSafety { to { opacity:0; pointer-events:none; clip-path:inset(0 0 100% 0); } }
.splash.is-out { opacity:0; clip-path:inset(0 0 100% 0); pointer-events:none; }

.splash-inner { text-align:center; }
.splash-letters {
  display:flex; gap:.15em; justify-content:center;
  font-family:var(--serif); font-size:clamp(3rem,10vw,7rem); font-weight:700;
  letter-spacing:.05em; color:var(--cream);
}
.splash-letters span {
  opacity:0; transform:translateY(30px);
  animation:splashChar .6s var(--ease-out) forwards;
}
.splash-letters span:nth-child(1) { animation-delay:.1s; }
.splash-letters span:nth-child(2) { animation-delay:.18s; }
.splash-letters span:nth-child(3) { animation-delay:.26s; }
.splash-letters span:nth-child(4) { animation-delay:.34s; }
.splash-letters span:nth-child(5) { animation-delay:.42s; }
.splash-letters span:nth-child(6) { animation-delay:.50s; }
@keyframes splashChar { to { opacity:1; transform:none; } }

.splash-bar { width:140px; height:2px; background:var(--line); margin:1.5rem auto .8rem; border-radius:2px; overflow:hidden; }
.splash-bar-fill { height:100%; background:var(--accent); width:0; animation:splashFill 1.8s .6s var(--ease-soft) forwards; }
@keyframes splashFill { to { width:100%; } }
.splash-sub { font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--cream-3); text-transform:uppercase; opacity:0; animation:splashChar .5s 2.4s forwards; }

/* =============================================================
   6. CURSOR
   ============================================================= */
.cursor { position:fixed; top:0; left:0; pointer-events:none; z-index:9998; opacity:0; transition:opacity .3s var(--ease-out); }
.cursor.is-ready { opacity:1; }
.cursor-dot { width:6px; height:6px; background:var(--cream); border-radius:50%; position:absolute; top:0; left:0; transform:translate(-50%,-50%); transition:transform .1s; }
.cursor-ring {
  width:36px; height:36px; border:1.5px solid rgba(245,237,216,.5);
  border-radius:50%; position:absolute; top:0; left:0;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease-out), height .3s var(--ease-out), border-color .3s;
}
.cursor-label { font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; color:var(--accent); position:absolute; top:22px; left:22px; white-space:nowrap; opacity:0; transform:scale(.8); transition:opacity .25s, transform .25s var(--ease-out); }
.cursor.has-label .cursor-label { opacity:1; transform:scale(1); }
.cursor.is-hover .cursor-ring { width:56px; height:56px; border-color:var(--accent); }
@media (hover:none) { .cursor { display:none; } }

/* =============================================================
   7. SIDE MARK
   ============================================================= */
.side-mark {
  position:fixed; right:1.5rem; top:50%; transform:translateY(-50%);
  z-index:100; display:flex; align-items:center; gap:.6rem;
  writing-mode:vertical-lr; text-orientation:mixed;
  opacity:0; transition:opacity .5s; pointer-events:none;
}
.side-mark.is-visible { opacity:1; }
.side-mark-dot {
  width:6px; height:6px; background:var(--accent);
  border-radius:50%; flex-shrink:0;
  animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.6)} }
.side-mark-text { font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; color:var(--cream-3); white-space:nowrap; }
@media (max-width:960px) { .side-mark { display:none; } }

/* =============================================================
   8. NAV
   ============================================================= */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h); display:flex; align-items:center;
  padding:0 var(--gutter) 0 calc(var(--gutter)*1.5);
  background:transparent;
  transition:background .4s var(--ease-out), backdrop-filter .4s;
}
.nav.is-solid {
  background:rgba(13,12,10,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-logo {
  font-family:var(--serif); font-size:1.3rem; font-weight:700;
  letter-spacing:-.01em; margin-right:auto; color:var(--cream);
}
.nav-links { display:flex; gap:2rem; margin:0 2rem; }
.nav-link { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:var(--cream-3); transition:color .25s; display:flex; align-items:center; gap:.4rem; }
.nav-link:hover { color:var(--cream); }
.nav-num { color:var(--accent); font-size:.65rem; }
.btn-nav { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; padding:.55rem 1.2rem; border:1px solid var(--accent); color:var(--accent); border-radius:4px; transition:background .25s, color .25s; }
.btn-nav:hover { background:var(--accent); color:var(--bg); }
.nav-burger { display:none; flex-direction:column; gap:5px; padding:.5rem; margin-left:1rem; }
.nav-burger span { display:block; width:22px; height:1.5px; background:var(--cream); border-radius:2px; transition:transform .3s var(--ease-out), opacity .3s; }
@media (max-width:960px) { .nav-links, .btn-nav { display:none; } .nav-burger { display:flex; } }

.nav-burger.is-open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity:0; }
.nav-burger.is-open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile nav */
.nav-mobile {
  position:fixed; inset:0; z-index:499; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transform:translateX(100%); transition:transform .5s var(--ease-out);
}
.nav-mobile.is-open { transform:none; }
.nav-mobile nav { display:flex; flex-direction:column; gap:2rem; text-align:center; }
.nm-link { font-family:var(--serif); font-size:clamp(1.5rem,6vw,2.5rem); font-style:italic; color:var(--cream-2); }
.nm-link span { font-family:var(--mono); font-size:.8rem; color:var(--accent); font-style:normal; display:block; margin-bottom:.2rem; }
.nm-cta { color:var(--accent); font-style:normal; font-family:var(--mono); font-size:1rem; letter-spacing:.08em; border:1px solid var(--accent); padding:.8rem 2rem; border-radius:4px; margin-top:1rem; }

/* =============================================================
   9. BUTTONS
   ============================================================= */
.btn { display:inline-flex; align-items:center; gap:.6rem; padding:.75rem 1.8rem; border-radius:4px; font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; font-weight:700; transition:background .25s, color .25s, transform .2s var(--ease-out), box-shadow .25s; cursor:pointer; border:0; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--accent); color:var(--bg); }
.btn-primary:hover { background:var(--accent-2); box-shadow:0 8px 32px rgba(76,175,130,.25); }
.btn-ghost { border:1px solid var(--line); color:var(--cream-2); background:transparent; }
.btn-ghost:hover { border-color:var(--cream-3); color:var(--cream); }

/* =============================================================
   10. HERO
   ============================================================= */
.hero {
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:8vh; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,12,10,.3) 0%,rgba(13,12,10,.55) 40%,rgba(13,12,10,.9) 100%); }

.hero-mesh {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(76,175,130,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 30%, rgba(212,168,67,.08) 0%, transparent 60%);
  animation:meshDrift 20s ease-in-out infinite alternate;
}
@keyframes meshDrift { to { transform:scale(1.15) rotate(8deg); } }

.hero-grain {
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.hero-inner { position:relative; z-index:3; padding:0 var(--gutter) 0 calc(var(--gutter)*2); }
.hero-kicker,.hero-title-line1,.hero-title-line2,.hero-tagline,.hero-actions {
  opacity:0; transform:translateY(30px);
}
.hero-kicker { font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; color:var(--cream-3); margin-bottom:1.5rem; }
.hero-title {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(4.5rem,14vw,12rem);
  font-weight:900; line-height:.92; margin-bottom:1.5rem;
  color:var(--cream);
}
.hero-title-line1 { display:block; }
.hero-title-line2 { display:block; margin-left:min(8vw,8rem); color:var(--accent); }
.hero-tagline { font-family:var(--serif); font-style:italic; font-size:clamp(1rem,2.5vw,1.4rem); color:var(--cream-2); margin-bottom:2.5rem; font-weight:400; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

.hero-scroll-hint { position:absolute; bottom:2rem; right:2rem; z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:.4; }
.hero-scroll-hint span { font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; color:var(--cream-3); writing-mode:vertical-lr; }
.scroll-line { width:1px; height:40px; background:var(--cream-3); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{transform:scaleY(1);opacity:.4} 50%{transform:scaleY(.4);opacity:.1} }

/* =============================================================
   11. MARQUEE
   ============================================================= */
.marquee-wrap { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.85rem 0; background:var(--bg-2); }
.marquee-track { display:flex; }
.marquee-inner {
  display:block; white-space:nowrap;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; color:var(--cream-3);
  animation:marqueeScroll 30s linear infinite;
}
@keyframes marqueeScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* =============================================================
   12. SECTION 01 — EL LOCAL
   ============================================================= */
.section-local { position:relative; padding:10rem 0 8rem; overflow:hidden; }
.section-num-bg {
  position:absolute; top:-2rem; left:-1rem; z-index:0;
  font-family:var(--serif); font-size:clamp(14rem,30vw,28rem);
  font-weight:900; color:rgba(245,237,216,.025);
  line-height:1; pointer-events:none; user-select:none;
  letter-spacing:-.05em;
}
.local-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; position:relative; z-index:1; }
.local-collage { position:relative; height:520px; }
.collage-img { position:absolute; overflow:hidden; border-radius:4px; }
.collage-img img { width:100%; height:100%; }
.collage-img--1 { width:65%; height:75%; top:0; left:0; transform:rotate(-2deg); }
.collage-img--2 { width:50%; height:55%; bottom:0; right:0; transform:rotate(1.5deg); }
.collage-img--3 { width:42%; height:50%; top:25%; right:5%; transform:rotate(-1deg); z-index:2; }
.collage-ribbon {
  position:absolute; bottom:16%; left:-1.5rem; z-index:3;
  background:var(--accent); color:var(--bg);
  font-family:var(--mono); font-size:.65rem; letter-spacing:.18em;
  padding:.35rem .8rem; transform:rotate(-90deg); transform-origin:left center;
}
.local-content { position:relative; z-index:1; }
.local-aside { margin-bottom:1.5rem; }
.local-aside-label { font-family:var(--mono); font-size:.65rem; letter-spacing:.2em; color:var(--cream-3); }
.local-title { font-family:var(--serif); font-size:clamp(2rem,4vw,3.2rem); font-weight:700; line-height:1.1; color:var(--cream); margin-bottom:2rem; }
.local-title em { color:var(--accent); font-style:italic; }
.local-lead { font-size:1.05rem; color:var(--cream-2); margin-bottom:1rem; line-height:1.7; }
.local-body { font-size:.95rem; color:var(--cream-3); margin-bottom:2.5rem; line-height:1.7; }
.local-defs { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.local-def { border-top:1px solid var(--line); padding-top:.6rem; }
.local-def dt { font-family:var(--mono); font-size:.65rem; letter-spacing:.12em; color:var(--accent); margin-bottom:.2rem; }
.local-def dd { font-size:.9rem; color:var(--cream-2); font-style:normal; }

@media (max-width:960px) { .local-grid { grid-template-columns:1fr; gap:3rem; } .local-collage { height:400px; } }
@media (max-width:540px) { .local-collage { height:300px; } .collage-img--3 { display:none; } }

/* =============================================================
   13. SECTION 02 — CARTA
   ============================================================= */
.section-carta { position:relative; overflow:hidden; }
.carta-header {
  display:flex; align-items:center; gap:2rem;
  padding:4rem calc(var(--gutter)*2) 2rem;
  position:relative; z-index:2;
  border-bottom:1px solid var(--line);
}
.carta-header-num { font-family:var(--mono); font-size:.7rem; color:var(--accent); letter-spacing:.18em; }
.carta-header h2 { font-family:var(--serif); font-size:clamp(1.4rem,3vw,2rem); color:var(--cream); font-weight:700; }
.carta-progress { margin-left:auto; font-family:var(--mono); font-size:.8rem; color:var(--cream-3); display:flex; align-items:center; gap:.3rem; }
.carta-progress-current { color:var(--cream); font-weight:700; }

/* Pin wrapper — desktop: full height scroll canvas */
.carta-pin-wrapper { position:relative; }
.carta-track {
  display:flex;
  padding:0;
  /* Desktop: JS controls transform. Mobile: native scroll */
}

/* Each card */
.carta-card {
  flex:0 0 100vw; width:100vw; min-height:100svh;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  padding:4rem calc(var(--gutter)*2);
  position:relative; overflow:hidden;
  background:var(--bg-2);
  transition:none;
}
.carta-card::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(var(--card-r,76),var(--card-g,175),var(--card-b,130),.06) 0%, transparent 70%);
}
.card-svg-wrap { display:flex; align-items:center; justify-content:center; position:relative; z-index:1; }
.card-svg { width:min(260px,40vw); height:auto; }
.card-content { position:relative; z-index:1; padding:2rem; }
.card-serie { font-family:var(--mono); font-size:.65rem; letter-spacing:.18em; color:var(--accent); display:block; margin-bottom:.75rem; }
.card-name { font-family:var(--serif); font-size:clamp(1.8rem,4vw,3rem); font-weight:700; color:var(--cream); line-height:1.1; margin-bottom:.5rem; }
.card-subtitle { font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--cream-3); margin-bottom:1.5rem; }
.card-ingredients { display:flex; flex-wrap:wrap; gap:.4rem .8rem; margin-bottom:1.5rem; }
.card-ingredients li { font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--cream-3); border:1px solid var(--line); padding:.2rem .6rem; border-radius:20px; }
.card-desc { font-size:.95rem; color:var(--cream-2); line-height:1.7; }

/* SVG trace animation */
.card-svg [data-svg-trace] { }
.card-svg polygon, .card-svg path, .card-svg rect, .card-svg ellipse, .card-svg circle {
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  transition:stroke-dashoffset 2s var(--ease-soft);
}
.carta-card.is-active .card-svg polygon,
.carta-card.is-active .card-svg path,
.carta-card.is-active .card-svg rect,
.carta-card.is-active .card-svg ellipse,
.carta-card.is-active .card-svg circle {
  stroke-dashoffset:0;
}

/* Mobile: swipe horizontal */
@media (max-width:960px) {
  .carta-track { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:.5rem; }
  .carta-track::-webkit-scrollbar { display:none; }
  .carta-card { flex:0 0 100vw; scroll-snap-align:start; grid-template-columns:1fr; min-height:auto; padding:3rem var(--gutter) 4rem; }
  .card-svg { width:180px; margin:0 auto 2rem; }
  .carta-card.is-active .card-svg polygon,
  .carta-card.is-active .card-svg path,
  .carta-card.is-active .card-svg rect,
  .carta-card.is-active .card-svg ellipse,
  .carta-card.is-active .card-svg circle {
    stroke-dashoffset:0;
  }
  /* Make all cards active on mobile */
  .carta-card .card-svg polygon,
  .carta-card .card-svg path,
  .carta-card .card-svg rect,
  .carta-card .card-svg ellipse,
  .carta-card .card-svg circle { stroke-dashoffset:0; }
}

/* Carta bottom marquee */
.carta-marquee-wrap { overflow:hidden; border-top:1px solid var(--line); padding:.6rem 0; background:var(--bg); }
.carta-marquee-track { display:flex; white-space:nowrap; }
.carta-marquee-track span { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--cream-3); animation:marqueeScroll 20s linear infinite; }
.carta-marquee-reverse span { animation-direction:reverse; }

/* =============================================================
   14. SECTION 03 — MÚSICA
   ============================================================= */
.section-musica { position:relative; padding:8rem 0; overflow:hidden; }
.musica-header { margin-bottom:4rem; }
.musica-header h2 { font-family:var(--serif); font-size:clamp(2rem,5vw,4rem); font-weight:700; color:var(--cream); margin-top:.5rem; line-height:1.05; }
.musica-header h2 em { color:var(--accent); font-style:italic; }
.musica-sub { font-size:1rem; color:var(--cream-3); margin-top:.75rem; }
.musica-grid { display:flex; flex-direction:column; gap:0; }
.musica-row {
  display:grid; grid-template-columns:64px 1fr auto;
  align-items:center; gap:2rem;
  padding:1.75rem 0;
  border-top:1px solid var(--line);
  transition:background .3s;
}
.musica-row:last-child { border-bottom:1px solid var(--line); }
.musica-row:hover { background:rgba(76,175,130,.03); }
.musica-icon { width:48px; height:48px; color:var(--row-accent, var(--accent)); flex-shrink:0; transition:transform .3s var(--ease-out); }
.musica-row:hover .musica-icon { transform:scale(1.15); }
.musica-day { font-family:var(--mono); font-size:.7rem; letter-spacing:.15em; color:var(--row-accent, var(--accent)); display:block; margin-bottom:.3rem; }
.musica-genre { font-family:var(--serif); font-size:clamp(1.1rem,2.5vw,1.6rem); font-weight:700; color:var(--cream); line-height:1.1; }
.musica-desc { font-size:.9rem; color:var(--cream-3); margin-top:.25rem; }
.musica-tag { font-family:var(--mono); font-size:.65rem; letter-spacing:.15em; color:var(--row-accent, var(--accent)); border:1px solid var(--row-accent, var(--accent)); padding:.3rem .7rem; border-radius:20px; opacity:.6; flex-shrink:0; }
@media (max-width:540px) { .musica-row { grid-template-columns:40px 1fr; } .musica-tag { display:none; } }

/* =============================================================
   15. SECTION 04 — GALERÍA
   ============================================================= */
.section-galeria { position:relative; padding:6rem 0 4rem; overflow:hidden; }
.galeria-header { padding:0 calc(var(--gutter)*2) 3rem; display:flex; align-items:flex-end; gap:1.5rem; }
.galeria-header h2 { font-family:var(--serif); font-size:clamp(2rem,5vw,3.5rem); font-weight:700; color:var(--cream); line-height:1.05; }
.galeria-header h2 em { color:var(--accent); font-style:italic; }
.galeria-lanes { display:flex; flex-direction:column; gap:1rem; overflow:hidden; }
.galeria-lane { overflow:hidden; }
.galeria-track { display:flex; gap:1rem; width:max-content; }
.galeria-lane[data-speed="fast"] .galeria-track { animation:galTrack 18s linear infinite; }
.galeria-lane[data-speed="slow"] .galeria-track { animation:galTrack 28s linear infinite; }
.galeria-lane[data-speed="reverse"] .galeria-track { animation:galTrack 22s linear infinite reverse; }
@keyframes galTrack { to { transform:translateX(-50%); } }
.galeria-item { width:clamp(180px,22vw,320px); height:200px; flex-shrink:0; overflow:hidden; border-radius:4px; }
.galeria-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.galeria-item:hover img { transform:scale(1.07); }

/* =============================================================
   16. SECTION 05 — EVENTOS
   ============================================================= */
.section-eventos { position:relative; padding:8rem 0; overflow:hidden; }
.eventos-card {
  position:relative; border-radius:8px; overflow:hidden;
  min-height:560px; display:flex; align-items:flex-end;
  transform-style:preserve-3d;
}
.eventos-bg { position:absolute; inset:0; }
.eventos-bg img { width:100%; height:100%; object-fit:cover; }
.eventos-veil { position:absolute; inset:0; background:linear-gradient(135deg,rgba(13,12,10,.9) 0%,rgba(13,12,10,.6) 50%,rgba(13,12,10,.85) 100%); }
.eventos-content { position:relative; z-index:1; padding:3.5rem; max-width:640px; }
.eventos-content .section-label { display:block; margin-bottom:1rem; }
.eventos-content h2 { font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); font-weight:700; color:var(--cream); line-height:1.1; margin-bottom:1.5rem; }
.eventos-content h2 em { color:var(--accent); font-style:italic; }
.eventos-desc { font-size:.95rem; color:var(--cream-2); line-height:1.7; margin-bottom:2rem; }
.eventos-features { display:flex; flex-direction:column; gap:.6rem; margin-bottom:2.5rem; }
.eventos-features li { font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; color:var(--cream-3); }
.eventos-features li span { color:var(--accent); margin-right:.5rem; }

@media (max-width:720px) { .eventos-content { padding:2rem; } }

/* =============================================================
   17. SECTION 06 — RESERVA
   ============================================================= */
.section-reserva { position:relative; padding:8rem 0 6rem; overflow:hidden; }
.section-reserva::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 50% at 30% 50%, rgba(76,175,130,.06) 0%, transparent 60%); pointer-events:none; }
.reserva-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:5rem; position:relative; z-index:1; }
.reserva-header { margin-bottom:3rem; }
.reserva-header h2 { font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); font-weight:700; color:var(--cream); line-height:1.1; margin-top:.5rem; }
.reserva-header h2 em { color:var(--accent); font-style:italic; }
.reserva-form { display:flex; flex-direction:column; gap:1.5rem; }
.form-field { display:flex; flex-direction:column; gap:.4rem; position:relative; }
.form-num { font-family:var(--mono); font-size:.65rem; letter-spacing:.15em; color:var(--accent); }
.form-field label { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--cream-3); }
.form-field input, .form-field select {
  background:var(--bg-3); border:1px solid var(--line); color:var(--cream);
  padding:.75rem 1rem; border-radius:4px; font-family:var(--sans); font-size:.95rem;
  transition:border-color .25s, box-shadow .25s;
  -webkit-appearance:none; appearance:none;
}
.form-field input:focus, .form-field select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(76,175,130,.12); outline:none; }
.form-field input::placeholder { color:var(--cream-3); }
.form-opt { color:var(--cream-3); font-size:.65rem; }
.form-field--split { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-field--split .form-num { grid-column:1/-1; }
.btn-submit { margin-top:.5rem; }
.reserva-alt { font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; color:var(--cream-3); margin-top:1rem; }
.link-wa { color:var(--accent); text-decoration:none; }
.link-wa:hover { text-decoration:underline; }
.reserva-info { padding-top:1rem; display:flex; flex-direction:column; gap:2rem; border-left:1px solid var(--line); padding-left:3rem; }
.info-block h3 { font-family:var(--mono); font-size:.65rem; letter-spacing:.15em; color:var(--accent); margin-bottom:.4rem; }
.info-block p, .info-block a { font-size:.95rem; color:var(--cream-2); }
.info-block a:hover { color:var(--cream); }

@media (max-width:960px) { .reserva-grid { grid-template-columns:1fr; gap:3rem; } .reserva-info { border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:2rem; } }

/* =============================================================
   18. FOOTER
   ============================================================= */
.footer { padding:0 0 3rem; overflow:hidden; border-top:1px solid var(--line); }
.footer-display {
  white-space:nowrap; overflow:hidden;
  font-family:var(--serif); font-size:clamp(4rem,12vw,9rem);
  font-weight:900; color:rgba(245,237,216,.04);
  padding:2rem 0 1rem;
  letter-spacing:-.02em; line-height:1;
}
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:3rem; padding:3rem 0; border-top:1px solid var(--line); }
.footer-col h4 { font-family:var(--mono); font-size:.7rem; letter-spacing:.15em; color:var(--accent); margin-bottom:1rem; }
.footer-col p, .footer-col a { font-size:.9rem; color:var(--cream-2); display:block; margin-bottom:.4rem; }
.footer-col a:hover { color:var(--cream); }
.footer-muted { color:var(--cream-3) !important; font-size:.85rem !important; }
.footer-map { border-radius:4px; overflow:hidden; border:1px solid var(--line); margin-top:.5rem; }
.footer-legal {
  display:flex; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; color:var(--cream-3);
  padding-top:2rem; border-top:1px solid var(--line);
  align-items:center;
}
.footer-legal a { color:var(--cream-3); }
.footer-legal a:hover { color:var(--cream); }

@media (max-width:720px) { .footer-grid { grid-template-columns:1fr 1fr; } .footer-col--map { grid-column:1/-1; } }
@media (max-width:540px) { .footer-grid { grid-template-columns:1fr; } }

/* =============================================================
   19. REDUCED-MOTION (only intrusive effects)
   ============================================================= */
@media (prefers-reduced-motion:reduce) {
  .hero-mesh { animation:none; }
  .marquee-inner, .galeria-track, .carta-marquee-track span { animation-play-state:paused; }
  .side-mark-dot { animation:none; }
}

/* =============================================================
   20. YOMILD REWRITE — new layout classes
   ============================================================= */

/* ── logo img ───────────────────────────────────────────── */
.nav-logo { display:flex; align-items:center; }
.nav-logo-img { height:36px; width:auto; object-fit:contain; display:block; }
.nav-logo-text { font-family:var(--serif); font-size:1.2rem; font-weight:700; color:var(--cream); letter-spacing:-.01em; }
.footer-logo-img { height:64px; width:auto; object-fit:contain; margin-bottom:.75rem; }

/* ── section base ────────────────────────────────────────── */
.section { position:relative; padding:8rem 0; overflow:hidden; }
.section-inner {
  max-width:var(--container); margin:0 auto;
  padding:0 calc(var(--gutter)*2);
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
}
@media (max-width:960px) { .section-inner { grid-template-columns:1fr; gap:3rem; } }

/* ── section labels & titles (new HTML uses .section-label,.section-title,.section-copy) */
.section-label { font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--accent); display:block; margin-bottom:.75rem; }
.section-title { font-family:var(--serif); font-size:clamp(2rem,5vw,3.5rem); font-weight:700; color:var(--cream); line-height:1.05; margin-bottom:1.5rem; }
.section-title em { color:var(--accent); font-style:italic; }
.section-copy { font-size:1rem; color:var(--cream-2); line-height:1.75; margin-bottom:1.5rem; }

/* ── el local ────────────────────────────────────────────── */
.section--local { padding:10rem 0 8rem; }
.local-text { position:relative; z-index:1; }
.local-gallery { position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:.75rem; }
.local-img { overflow:hidden; border-radius:4px; }
.local-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.local-img:hover img { transform:scale(1.04); }
.local-img--1 { grid-column:1 / -1; aspect-ratio:16/9; }
.local-img--2, .local-img--3 { aspect-ratio:4/3; }
.local-features { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; margin:1.5rem 0; }
.local-features li { font-size:.9rem; color:var(--cream-2); display:flex; align-items:center; gap:.5rem; }
.feat-icon { font-size:1rem; }
.local-schedule { border-top:1px solid var(--line); padding-top:1.5rem; margin-top:1.5rem; }
.schedule-label { font-family:var(--mono); font-size:.65rem; letter-spacing:.18em; color:var(--accent); margin-bottom:.75rem; }
.schedule-line { font-size:.95rem; color:var(--cream-2); margin-bottom:.3rem; }
@media (max-width:960px) { .local-gallery { grid-template-columns:1fr; } .local-img--1 { aspect-ratio:16/8; } }

/* ── carta cards (new class names: carta-card-img, carta-card-body, carta-svg) ── */
.carta-card { cursor:default; }
.carta-card-img { position:relative; overflow:hidden; aspect-ratio:4/3; }
.carta-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.carta-card.is-active .carta-card-img img { transform:scale(1.04); }
.carta-card-body { display:flex; flex-direction:column; justify-content:center; padding:2rem 2.5rem; min-width:0; }
.carta-svg { width:min(200px,30vw); margin-bottom:2rem; }
.carta-svg .svg-line {
  stroke:var(--accent); stroke-width:1.5; fill:none;
  stroke-dasharray:2000; stroke-dashoffset:2000;
  transition:stroke-dashoffset 2s var(--ease-soft);
}
.carta-card.is-active .carta-svg .svg-line { stroke-dashoffset:0; }
@media (max-width:960px) {
  .carta-svg .svg-line { stroke-dashoffset:0; }
  .carta-card { grid-template-columns:1fr; min-height:auto; }
  .carta-card-img { aspect-ratio:16/9; }
  .carta-card-body { padding:2rem var(--gutter); }
  .carta-svg { width:120px; margin-bottom:1.5rem; }
}
.carta-num { font-family:var(--mono); font-size:.65rem; letter-spacing:.2em; color:var(--accent); margin-bottom:.5rem; }
.carta-name { font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.5rem); font-weight:700; color:var(--cream); margin-bottom:.75rem; word-break:break-word; }
.carta-desc { font-size:.95rem; color:var(--cream-2); line-height:1.7; margin-bottom:1.25rem; word-break:break-word; }
.carta-tag { font-family:var(--mono); font-size:.65rem; letter-spacing:.15em; color:var(--accent); border:1px solid var(--accent); padding:.3rem .7rem; border-radius:20px; display:inline-block; opacity:.7; }
.carta-hint { font-family:var(--mono); font-size:.7rem; color:var(--cream-3); letter-spacing:.08em; }
.carta-header { display:flex; flex-direction:column; padding:4rem calc(var(--gutter)*2) 2rem; border-bottom:1px solid var(--line); }

/* ── esta semana ─────────────────────────────────────────── */
.section--semana { background:var(--bg-2); }
.semana-header { max-width:var(--container); margin:0 auto; padding:0 calc(var(--gutter)*2) 2.5rem; }
.semana-grid {
  max-width:var(--container); margin:0 auto;
  padding:0 calc(var(--gutter)*2);
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1.25rem;
}
@media (max-width:1100px) { .semana-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px)  { .semana-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px)  { .semana-grid { grid-template-columns:1fr; } }
.semana-card {
  background:var(--bg-3); border:1px solid var(--line); border-radius:8px;
  padding:2rem 1.75rem; position:relative;
  transition:border-color .3s, transform .3s var(--ease-out);
}
.semana-card:hover { border-color:rgba(76,175,130,.3); transform:translateY(-4px); }
.semana-day { font-family:var(--mono); font-size:.65rem; letter-spacing:.18em; color:var(--accent); margin-bottom:.5rem; }
.semana-title { font-family:var(--serif); font-size:1.35rem; font-weight:700; color:var(--cream); margin-bottom:.6rem; }
.semana-desc { font-size:.9rem; color:var(--cream-3); line-height:1.6; margin-bottom:1rem; }
.semana-price { font-family:var(--serif); font-size:1.6rem; font-weight:700; color:var(--gold); margin-bottom:.5rem; min-height:2rem; }
.semana-tag { font-family:var(--mono); font-size:.62rem; letter-spacing:.15em; color:var(--accent); border:1px solid var(--accent); padding:.25rem .6rem; border-radius:20px; opacity:.6; }

/* ── galería ─────────────────────────────────────────────── */
.section--galeria { padding:6rem 0 4rem; }
.galeria-header { max-width:var(--container); margin:0 auto; padding:0 calc(var(--gutter)*2) 3rem; }
.galeria-track--fwd { animation:galTrack 24s linear infinite; }
.galeria-track--bwd { animation:galTrack 30s linear infinite reverse; }

/* ── eventos (new two-column layout) ────────────────────── */
.section-inner--eventos {
  grid-template-columns:1.1fr 1fr; align-items:center; gap:5rem;
  max-width:var(--container); margin:0 auto; padding:0 calc(var(--gutter)*2);
}
.eventos-img { position:relative; border-radius:8px; overflow:hidden; aspect-ratio:4/5; }
.eventos-img img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.eventos-img:hover img { transform:scale(1.03); }
.eventos-veil { position:absolute; inset:0; background:linear-gradient(135deg,rgba(13,12,10,.4) 0%, transparent 60%); }
.eventos-text { position:relative; }
.eventos-list { margin:1.5rem 0 2rem; display:flex; flex-direction:column; gap:.6rem; }
.eventos-list li { font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; color:var(--cream-2); padding-left:1.2rem; position:relative; }
.eventos-list li::before { content:'—'; position:absolute; left:0; color:var(--accent); }
@media (max-width:960px) { .section-inner--eventos { grid-template-columns:1fr; } .eventos-img { aspect-ratio:16/9; } }

/* ── reserva (new layout) ────────────────────────────────── */
.section--reserva { background:var(--bg-2); }
.section-inner--reserva {
  grid-template-columns:1fr 1.1fr; gap:5rem; align-items:start;
  max-width:var(--container); margin:0 auto; padding:0 calc(var(--gutter)*2);
}
@media (max-width:960px) { .section-inner--reserva { grid-template-columns:1fr; gap:3rem; } }
.reserva-contact { display:flex; flex-direction:column; gap:.75rem; margin-top:2rem; }
.contact-link { display:flex; align-items:center; gap:.75rem; font-size:1rem; color:var(--cream-2); transition:color .2s; }
.contact-link:hover { color:var(--cream); }
.contact-icon { font-size:1.1rem; }
.reserva-form { display:flex; flex-direction:column; gap:1.25rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-label { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--cream-3); }
.form-input {
  background:var(--bg-3); border:1px solid var(--line); color:var(--cream);
  padding:.8rem 1rem; border-radius:4px; font-family:var(--sans); font-size:.95rem;
  transition:border-color .25s, box-shadow .25s;
  -webkit-appearance:none; appearance:none; width:100%;
}
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(76,175,130,.12); outline:none; }
.form-input::placeholder { color:var(--cream-3); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:540px) { .form-row { grid-template-columns:1fr; } }
.form-textarea { resize:vertical; min-height:80px; }
.btn--full { width:100%; justify-content:center; }

/* ── footer (new layout) ─────────────────────────────────── */
.footer-inner {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem;
  max-width:var(--container); margin:0 auto;
  padding:4rem calc(var(--gutter)*2) 3rem;
}
.footer-brand { }
.footer-logo { font-family:var(--serif); font-size:1.8rem; font-weight:700; color:var(--cream); margin-bottom:.4rem; }
.footer-tagline { font-size:.88rem; color:var(--cream-3); line-height:1.55; max-width:220px; margin-bottom:1.25rem; }
.footer-social { display:flex; gap:.75rem; }
.footer-social a { color:var(--cream-3); transition:color .2s; }
.footer-social a:hover { color:var(--accent); }
.footer-info { }
.footer-label { font-family:var(--mono); font-size:.65rem; letter-spacing:.15em; color:var(--accent); margin-bottom:.6rem; display:block; }
.footer-info p, .footer-info a { font-size:.9rem; color:var(--cream-2); line-height:1.7; display:block; }
.footer-info a:hover { color:var(--cream); }
.footer-map { max-width:var(--container); margin:0 auto; padding:0 calc(var(--gutter)*2); }
.footer-bottom {
  max-width:var(--container); margin:0 auto;
  padding:1.5rem calc(var(--gutter)*2) 0;
  border-top:1px solid var(--line); margin-top:2rem;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.06em; color:var(--cream-3);
}
@media (max-width:960px) { .footer-inner { grid-template-columns:1fr 1fr; } }
@media (max-width:540px) { .footer-inner { grid-template-columns:1fr; } }

/* ── hero scroll hint ────────────────────────────────────── */
.hero-scroll-hint {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--cream-3); font-family:var(--mono); font-size:.65rem; letter-spacing:.15em;
  animation:scrollBob 2.5s ease-in-out infinite;
}
.hero-scroll-line { width:1px; height:40px; background:var(--cream-3); opacity:.4; }
@keyframes scrollBob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }
.hero-scroll-label { writing-mode:vertical-rl; font-size:.6rem; letter-spacing:.2em; }

/* ── section 01/hero new hero elements initial state ─────── */
.hero-kicker,.hero-title-line1,.hero-title-line2,.hero-tagline,.hero-actions {
  opacity:0; transform:translateY(30px);
}

/* =============================================================
   21. MOBILE OPTIMIZATIONS (≤ 768px y ≤ 480px)
   ============================================================= */

/* ── Tablet y móvil grande (≤ 768px) ─── */
@media (max-width:768px) {
  /* Secciones: reducir padding vertical */
  .section { padding:5rem 0; }
  .section--local { padding:6rem 0 5rem; }
  .section--semana { padding:5rem 0; }
  .section--galeria { padding:4rem 0; }
  .section--eventos { padding:5rem 0; }
  .section--reserva { padding:5rem 0 4rem; }

  /* Section inner: menos gap y padding horizontal */
  .section-inner { padding:0 var(--gutter); gap:2.5rem; }
  .section-inner--eventos { padding:0 var(--gutter); gap:2.5rem; }
  .section-inner--reserva { padding:0 var(--gutter); gap:2.5rem; }

  /* Titles */
  .section-title { font-size:clamp(1.7rem,6vw,2.4rem); margin-bottom:1rem; }

  /* Hero */
  .hero-content { padding:0 var(--gutter); }
  .hero-title { font-size:clamp(3.2rem,12vw,5rem); }
  .hero-title-line2 { margin-left:min(5vw,2.5rem); }
  .hero-tagline { font-size:1rem; }
  .hero-actions { flex-direction:column; gap:.75rem; }
  .hero-actions .btn { width:100%; justify-content:center; }

  /* Carta */
  .carta-header { padding:3rem var(--gutter) 1.5rem; }
  .carta-card-body { padding:1.5rem var(--gutter); }
  .carta-name { font-size:clamp(1.4rem,5vw,1.9rem); }

  /* Semana */
  .semana-header { padding:0 var(--gutter) 2rem; }
  .semana-grid { padding:0 var(--gutter); gap:1rem; }
  .section--semana { padding:5rem 0; }

  /* Galería header */
  .galeria-header { padding:0 var(--gutter) 2rem; }

  /* Eventos */
  .eventos-img { aspect-ratio:16/9; }

  /* Footer */
  .footer-inner { padding:3rem var(--gutter) 2rem; gap:2rem; }
  .footer-map { padding:0 var(--gutter); }
  .footer-bottom { padding:1rem var(--gutter) 0; }
}

/* ── Móvil pequeño (≤ 480px) ─── */
@media (max-width:480px) {
  :root { --gutter:1rem; }

  /* Nav */
  .nav { padding:0 var(--gutter); }
  .nav-logo-img { height:28px; }

  /* Hero más compacto */
  .hero { padding-bottom:6vh; }
  .hero-title { font-size:clamp(2.6rem,10vw,4rem); }
  .hero-kicker { font-size:.65rem; margin-bottom:1rem; }
  .hero-tagline { font-size:.9rem; margin-bottom:2rem; }
  .hero-scroll-hint { display:none; }

  /* Secciones */
  .section { padding:4rem 0; }
  .section--local { padding:5rem 0 4rem; }

  /* Carta pin: tarjetas */
  .carta-card { padding:2rem var(--gutter) 3rem; }
  .carta-card-img { aspect-ratio:4/3; }
  .carta-svg { display:none; }
  .carta-name { font-size:1.4rem; }
  .carta-desc { font-size:.9rem; }

  /* Galería: items más pequeños en móvil */
  .galeria-item { width:clamp(140px,60vw,220px); height:160px; }

  /* Semana cards */
  .semana-card { padding:1.5rem 1.25rem; }
  .semana-title { font-size:1.15rem; }
  .semana-price { font-size:1.35rem; }

  /* Eventos */
  .eventos-img { aspect-ratio:4/3; }
  .eventos-list { gap:.5rem; }

  /* Formulario */
  .form-row { grid-template-columns:1fr; }
  .form-input { font-size:1rem; }

  /* Footer */
  .footer-inner { grid-template-columns:1fr; gap:1.75rem; }
  .footer-logo-img { height:48px; }
  .footer-tagline { max-width:100%; }

  /* Splash */
  .splash-letters { font-size:clamp(2.5rem,10vw,4rem); }
}