/* ═══════════════════════════════════════
   Rebel Café — Total Redesign
   Rocker vibes · Bebas Neue condensed
═══════════════════════════════════════ */

:root {
  --black:    #0a0a0a;
  --dark:     #141414;
  --espresso: #1A0F0A;
  --white:    #FFFFFF;
  --cream:    #F8F4EE;
  --off:      #F0EAE0;
  --brown:    #8B3A2A;
  --warm:     #C45A32;
  --light:    #D49A82;
  --gray-t:   rgba(10,10,10,.52);
  --gray-l:   rgba(10,10,10,.09);
  --wt:       rgba(255,255,255,.58);
  --wd:       rgba(255,255,255,.14);
  --nav-h:    80px;
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overscroll-behavior:none }
body { font-family:'Montserrat','Helvetica Neue',sans-serif; background:var(--white); color:var(--black); overflow-x:hidden }
a { color:inherit; text-decoration:none }
[id] { scroll-margin-top:calc(var(--nav-h) + 20px) }
img { max-width:100%; display:block }
button { border:none; background:none; cursor:pointer; color:inherit; font-family:inherit }
.container { max-width:1160px; margin:0 auto; padding:0 44px }

/* ── COLORS ── */
.c-brown { color:var(--brown) }
.c-warm  { color:var(--warm)  }

/* ── CUSTOM CURSOR ── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%,-50%);
  transition-property: width, height, border-color, opacity, transform;
  transition-timing-function: var(--ease);
}
.cursor-dot {
  width:30px; height:30px;
  background-image: url("../img/cursor-skull.svg");
  background-size: contain; background-repeat: no-repeat;
  transition-duration:.2s,.2s,.2s,.2s,.2s;
}
.cursor-ring { display:none }

.has-cursor,
.has-cursor *,
.has-cursor a,
.has-cursor button,
.has-cursor input,
.has-cursor textarea,
.has-cursor select,
.has-cursor [role="button"],
.has-cursor iframe { cursor:none !important }

body.cursor-grow .cursor-dot { width:20px; height:20px; opacity:.4 }

/* ── PROGRESS BAR ── */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brown), var(--warm));
  z-index: 9999;
  width: 0;
  transition: width .08s linear;
}

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .85s var(--ease), transform .85s var(--ease) }
.reveal.in { opacity:1; transform:none }
.d1 { transition-delay:.10s }
.d2 { transition-delay:.20s }
.d3 { transition-delay:.30s }

/* ── LOADER ── */
.loader {
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 9999;
  display: flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transition: opacity .6s var(--ease), visibility .6s;
}
.loader.gone { opacity:0; visibility:hidden }
.loader-img {
  height: 32px; width:auto;
  filter: invert(1) brightness(2);
  clip-path: inset(0 100% 0 0);
  animation: logo-reveal 1s var(--ease) .4s forwards;
}
.loader-line  { width:160px; height:1px; background:rgba(255,255,255,.08); overflow:hidden }
.loader-fill  { width:0; height:100%; background:linear-gradient(90deg,var(--brown),var(--warm)); animation:fill 1.3s var(--ease) .6s forwards }
@keyframes logo-reveal { to { clip-path:inset(0 0% 0 0) } }
@keyframes fill { to { width:100% } }

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:200;
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .5s, border-color .5s, backdrop-filter .5s, -webkit-backdrop-filter .5s;
}
.nav.up, .nav-solid { background:rgba(255,255,255,.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom-color:rgba(10,10,10,.06) }
.nav-inner { max-width:1160px; margin:0 auto; padding:0 44px; height:100%; display:flex; align-items:center; justify-content:space-between }
.nav-logo { z-index:10 }
.nav-logo-img { height:48px; width:auto; filter:invert(1) brightness(2); transition:opacity .3s, transform .3s, filter .5s }
.nav-logo:hover .nav-logo-img { opacity:1 }
.nav.up .nav-logo-img, .nav-solid .nav-logo-img { filter:none }
.nav-links { display:flex; gap:6px }
.nav-link {
  font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--white); padding:8px 16px; border-radius:100px;
  transition:color .35s, background .35s;
}
.nav-link:hover { color:var(--white); background:rgba(255,255,255,.1) }
.nav.up .nav-link, .nav-solid .nav-link { color:var(--black) }
.nav.up .nav-link:hover, .nav-solid .nav-link:hover { color:var(--black); background:rgba(10,10,10,.06) }

/* Nav dropdown */
.nav-dropdown { position:relative }
.nav-dropdown .nav-link { display:inline-flex; align-items:center; gap:5px }
.nav-chevron {
  width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.nav-dropdown:hover .nav-chevron { transform:rotate(180deg) }
.nav-dropdown::after {
  content:''; position:absolute; top:100%; left:0; right:0; height:16px;
}
.nav-dropdown-menu {
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  min-width:190px; padding:8px 0;
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(10,10,10,.06); border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.1), 0 0 0 1px rgba(10,10,10,.03);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  transform:translateX(-50%) translateY(6px);
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-drop-item {
  display:block; padding:10px 20px;
  font-size:12px; font-weight:500; letter-spacing:.3px;
  color:rgba(10,10,10,.5); text-transform:none;
  transition:color .2s, background .2s, padding-left .25s var(--ease);
}
.nav-drop-item:hover { color:var(--black); background:rgba(10,10,10,.04); padding-left:24px }

.nav-cta {
  font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  padding:9px 22px; border-radius:100px;
  background:var(--white); color:var(--black);
  transition:all .35s var(--ease);
}
.nav-cta:hover { background:var(--warm); color:var(--white); transform:translateY(-1px); box-shadow:0 8px 24px rgba(196,90,50,.25) }
.nav.up .nav-cta, .nav-solid .nav-cta { background:var(--black); color:var(--white) }
.nav.up .nav-cta:hover, .nav-solid .nav-cta:hover { background:var(--warm); color:var(--white) }
.nav-burger { display:none; flex-direction:column; gap:5px; z-index:102; padding:8px }
.nav-burger span { display:block; width:22px; height:1.5px; background:var(--white); transition:transform .35s var(--ease), opacity .3s, background .35s }
.nav.up .nav-burger span, .nav-solid .nav-burger span { background:var(--black) }
.nav-burger.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px) }
.nav-burger.open span:nth-child(2) { opacity:0 }
.nav-burger.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px) }

/* ── MOBILE NAV ── */
.mobile-nav {
  display: none;
  position: fixed; inset:0;
  background: var(--black);
  z-index: 101;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 44px;
  overflow: hidden;
}
.mobile-nav::after {
  content: 'REBEL';
  position: absolute; right: -0.05em; top: 50%; transform: translateY(-50%);
  font-size: clamp(100px,22vw,200px); font-weight:900; letter-spacing:-4px;
  color: rgba(255,255,255,.025); pointer-events:none; line-height:1; user-select:none;
}
.mobile-nav.open { display:flex }
.m-links-wrap { display:flex; flex-direction:column; gap:4px; width:100% }
.m-link {
  font-size: clamp(36px,9vw,68px);
  font-weight: 900; letter-spacing:-1.5px; text-transform:uppercase;
  color: rgba(255,255,255,.1);
  display: flex; align-items:baseline; gap:16px;
  transform: translateX(-24px); opacity:0;
  transition: color .3s var(--ease), transform .5s var(--ease), opacity .5s var(--ease);
  line-height: 1.1;
}
.mobile-nav.open .m-link { opacity:1; transform:none; color:var(--white) }
.mobile-nav.open .m-links-wrap > :nth-child(1) .m-link,
.mobile-nav.open .m-links-wrap > a:nth-child(1) { transition-delay:.06s }
.mobile-nav.open .m-links-wrap > :nth-child(2) .m-link,
.mobile-nav.open .m-links-wrap > a:nth-child(2) { transition-delay:.12s }
.mobile-nav.open .m-links-wrap > :nth-child(3) .m-link,
.mobile-nav.open .m-links-wrap > a:nth-child(3) { transition-delay:.18s }
.mobile-nav.open .m-links-wrap > :nth-child(4) .m-link,
.mobile-nav.open .m-links-wrap > a:nth-child(4) { transition-delay:.24s }
.m-link span { font-size:11px; font-weight:500; color:var(--warm); letter-spacing:1px; font-family:'Montserrat',sans-serif }
.m-link:hover { color:var(--warm) }

/* ── Mobile nav dropdown ── */
.m-link-group { display:flex; flex-wrap:wrap; align-items:baseline; gap:0; position:relative }
.m-link-group .m-link { flex:1 }
.m-link-toggle {
  background:none; border:none; color:var(--warm); font-size:24px; font-weight:700;
  padding:8px 12px; cursor:pointer; align-self:center; line-height:1;
  font-family:'Bebas Neue',sans-serif; transition:transform .3s var(--ease);
}
.m-link-toggle.open { transform:rotate(45deg) }
.m-sub {
  width:100%; display:none; flex-direction:column; gap:6px;
  padding:8px 0 12px 28px;
}
.m-sub.open { display:flex }
.m-sub-link {
  font-size:16px; font-weight:500; color:rgba(255,255,255,.55);
  letter-spacing:1px; text-transform:uppercase; padding:6px 0;
  transition:color .3s var(--ease);
}
.m-sub-link:hover { color:var(--warm) }

.m-footer { position:absolute; bottom:40px; left:44px; font-size:10px; font-weight:400; letter-spacing:2px; color:rgba(255,255,255,.18); text-transform:uppercase }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items:center; gap:9px;
  font-size: 9px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  padding: 14px 28px; border-radius:100px;
  transition: all .3s var(--ease);
  position: relative;
}
.btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease) }
.btn:hover svg { transform:translateX(4px) }
.btn-white { background:var(--white); color:var(--black) }
.btn-white:hover { background:var(--cream); transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.12) }
.btn-ghost-w { border:1px solid rgba(255,255,255,.22); color:var(--white) }
.btn-ghost-w:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); transform:translateY(-1px) }

/* ── HERO ── */
.hero {
  min-height: 100svh;
  position: relative; overflow:hidden;
  display: flex; flex-direction:column; justify-content:flex-end;
  padding-top: var(--nav-h);
}
.hero-photo {
  position: absolute;
  inset: -12% 0;
  background-size: cover;
  background-position: center 30%;
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.5) 52%, rgba(10,10,10,.18) 100%),
    linear-gradient(to top, rgba(10,10,10,.8) 0%, transparent 55%);
}
/* Film grain overlay — sin request externo */
.hero-noise {
  position: absolute; inset:0;
  opacity: .04;
  pointer-events: none;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.hero-content {
  position: relative; z-index:4;
  max-width: 1160px; margin:0 auto;
  padding: 60px 44px 72px; width:100%;
}
.hero-eyebrow {
  font-size: 9px; font-weight:600; letter-spacing:5px; text-transform:uppercase;
  color: var(--white); margin-bottom:22px;
  display: flex; align-items:center; gap:12px;
}
.eyebrow-line { display:block; width:28px; height:1px; background:var(--white); flex-shrink:0; opacity:.5 }

/* Mixed typography: Montserrat bold + Bebas Neue condensed */
h1.hero-title {
  font-size: clamp(52px, 7.5vw, 96px);
  font-weight: 900;
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: -3px;
  color: var(--white);
  margin-bottom: 32px;
}
.hero-amp {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: 1.15em;
  color: var(--warm);
  letter-spacing: 2px;
  margin-right: 6px;
}

.hero-desc {
  font-size: 14px; font-weight:300; line-height:1.82;
  color: var(--wt); max-width:400px; margin-bottom:40px;
}
.hero-desc strong { color:var(--white); font-weight:600 }
.hero-btns { display:flex; gap:14px; align-items:center }

.hero-scroll {
  position: absolute; bottom:108px; right:44px; z-index:4;
  display: flex; flex-direction:column; align-items:center; gap:12px;
}
.hero-scroll span { font-size:8px; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.2); writing-mode:vertical-rl }
.scroll-line { width:1px; height:56px; background:linear-gradient(180deg,var(--warm),transparent); animation:sl 2.5s ease-in-out infinite }
@keyframes sl {
  0%     { transform:scaleY(0); transform-origin:top }
  45%    { transform:scaleY(1); transform-origin:top }
  46%    { transform:scaleY(1); transform-origin:bottom }
  90%    { transform:scaleY(0); transform-origin:bottom }
  100%   { transform:scaleY(0); transform-origin:bottom }
}

/* marquee */
.marquee { position:relative; z-index:4; overflow:hidden; padding:16px 0; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.4); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px) }
.marquee-track { display:flex; gap:24px; animation:mq 26s linear infinite; white-space:nowrap }
.marquee-track span { font-size:11px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.85); flex-shrink:0 }
.marquee-track .sep { color:var(--warm); opacity:.8 }
@keyframes mq { to { transform:translateX(-50%) } }

/* ── ABOUT ── */
.about { padding:130px 0; position:relative }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start }
.about-left { position:relative }

/* Decorative watermark year */
.about-left::after {
  content: '2017';
  position: absolute;
  bottom: -30px; left: -8px;
  font-size: clamp(96px,13vw,170px);
  font-weight: 900; letter-spacing:-8px;
  color: var(--brown); opacity:.05;
  line-height: 1; pointer-events:none; user-select:none;
}

.sec-label { display:flex; align-items:center; gap:12px; margin-bottom:20px }
.sec-line  { width:28px; height:1px; background:var(--brown); flex-shrink:0 }
.sec-label span { font-size:8px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--brown) }

h2.sec-title {
  font-size: clamp(40px,5vw,68px);
  font-weight: 900; line-height:1;
  text-transform: uppercase; letter-spacing:-1.5px;
}
/* Bebas Neue condensed accent on section titles */
h2.sec-title .accent {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  display: block;
  font-size: 1.35em;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .85;
  letter-spacing: 2px;
}
/* Rust texture fill for titles */
.rust-text,
.hero-amp,
h2.sec-title .accent,
.manifesto-q .accent,
.carta-cat-title,
.bagel-price,
.pack-row-price,
.extra-card-price {
  background:url('../img/rust-texture.jpg') center/cover no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.sec-sub { font-size:13px; font-weight:300; color:var(--gray-t); margin-top:14px; max-width:500px; line-height:1.7 }
.sec-header { margin-bottom:56px }

.about-p { font-size:15px; font-weight:400; line-height:1.85; color:rgba(10,10,10,.6); margin-bottom:16px }
.about-p strong { color:var(--black); font-weight:600 }

.about-stats {
  display: grid; grid-template-columns:repeat(3,1fr);
  margin-top:44px; padding-top:40px;
  border-top: 1px solid var(--gray-l);
}
.stat { padding-right:20px }
.stat-n {
  font-size: 52px; font-weight:900; color:var(--black);
  line-height: .88; margin-bottom:10px;
  display: flex; align-items:baseline; gap:2px;
}
.stat-plus { font-size:26px; font-weight:900; color:var(--brown) }
.stat-l { font-size:8px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gray-t); line-height:1.5 }

/* ── MANIFESTO ── */
.manifesto { padding:84px 0; background:var(--off) }
.manifesto-inner { display:flex; gap:28px; align-items:stretch }
.manifesto-bar { width:2px; flex-shrink:0; background:linear-gradient(180deg,var(--brown),var(--warm)); border-radius:2px; min-height:60px }
.manifesto-q {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  color: var(--black);
  quotes: none;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.manifesto-q .accent { color:var(--brown) }

/* ── SPLIT ── */
.split { display:grid; grid-template-columns:1fr 1fr; min-height:520px }
.split-photo { position:relative; overflow:hidden; min-height:320px }
.split-bg {
  position: absolute; inset:0;
  background-size: cover; background-position:center;
  transform: scale(1.06);
  transition: transform 8s ease;
}
.split:hover .split-bg { transform:scale(1) }
.split-text { background:var(--off); padding:80px 60px; display:flex; flex-direction:column; justify-content:center; gap:20px }
.method-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px }
.method-chips span {
  font-size: 8px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  padding: 7px 14px; border-radius:100px;
  border: 1px solid rgba(14,14,14,.12); color:rgba(14,14,14,.45);
  transition: all .25s var(--ease);
}
.method-chips span:hover { border-color:var(--brown); color:var(--brown); background:rgba(139,58,42,.05) }

/* ── FEATURES ── (fondo claro) */
.features { padding:80px 0; background:var(--off) }
.features-grid {
  display: grid; grid-template-columns:repeat(4,1fr);
  border: 1px solid var(--gray-l);
}
.feat {
  padding: 44px 30px;
  border-right: 1px solid var(--gray-l);
  transition: background .4s;
  position: relative; overflow:hidden;
}
.feat:last-child { border-right:0 }
.feat::after {
  content: ''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg,var(--brown),var(--warm));
  transform: scaleX(0); transition: transform .45s var(--ease);
}
.feat:hover { background:rgba(139,58,42,.04) }
.feat:hover::after { transform:scaleX(1) }
.feat-n { font-size:36px; font-weight:900; color:rgba(10,10,10,.06); line-height:1; margin-bottom:20px; transition:color .3s }
.feat:hover .feat-n { color:rgba(139,58,42,.15) }
.feat h3 { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--black); margin-bottom:12px }
.feat p  { font-size:12px; font-weight:300; line-height:1.65; color:var(--gray-t) }

/* ── CARTA ── */
.carta { padding:130px 0; background:var(--white); position:relative; overflow:hidden }
.carta::before {
  content:'REBEL MENU'; position:absolute; top:160px; right:-60px;
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:220px; color:var(--black); opacity:.018;
  letter-spacing:16px; pointer-events:none; white-space:nowrap;
  transform:rotate(-90deg); transform-origin:right top; line-height:1;
}
.carta .sec-label span { color:var(--brown) }
.carta .sec-line { background:var(--brown) }

/* Carta category titles */
.carta-block { margin-bottom:24px }
.carta-cat-title {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: clamp(40px,6vw,72px);
  color: var(--black);
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: .9;
  display: inline-block;
  position: relative;
}
.carta-cat-title::after {
  content:''; position:absolute;
  bottom:6px; left:-6px; right:-6px; height:10px;
  background:var(--warm); opacity:.12;
  transform:skewX(-8deg); z-index:0;
}
.carta-cat-sub {
  font-size: 14px; font-weight:400; color:rgba(10,10,10,.6);
  margin-top: 8px; line-height:1.6;
}

/* Section separator */
.carta-sep {
  display:flex; align-items:center; gap:20px;
  margin:80px 0 0; padding:0;
}
.carta-sep::before, .carta-sep::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,58,42,.18),transparent);
}
.carta-sep span {
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:13px; letter-spacing:6px; text-transform:uppercase;
  color:var(--brown); opacity:.35; white-space:nowrap;
}

/* Featured tag */
.carta-tag {
  display:inline-block;
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:9px; letter-spacing:2px; text-transform:uppercase;
  background:var(--off); color:var(--brown); border:1px solid var(--gray-l);
  padding:3px 10px 2px; margin-left:12px; border-radius:4px;
  vertical-align:middle;
}

/* ── BAGELS ── */
.bagels-list { display:flex; flex-direction:column; gap:0 }
.bagel {
  display: flex; align-items:flex-start; gap:24px;
  padding: 28px 0; position:relative;
  border-bottom: 1px solid var(--gray-l);
  transition: background .3s, padding-left .35s var(--ease);
  cursor: default;
}
.bagel:first-child { border-top:1px solid var(--gray-l) }
.bagel::after {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:0; background:var(--warm);
  transition:width .35s var(--ease);
}
.bagel:hover { background:rgba(139,58,42,.02); padding-left:16px }
.bagel:hover::after { width:3px }
.bagel-num {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: 54px; color:var(--brown); opacity:.07;
  min-width: 56px; line-height:.8; flex-shrink:0;
  transition: opacity .3s;
}
.bagel:hover .bagel-num { opacity:.16 }
.bagel-info { flex:1; min-width:0 }
.bagel-top { display:flex; align-items:baseline; gap:16px; margin-bottom:6px }
.bagel-top h4 {
  font-size: 16px; font-weight:800; text-transform:uppercase;
  letter-spacing: 1px; color:var(--black); order:0; flex:0 1 auto;
}
.bagel-top::after {
  content:''; order:1; flex:1 0 20px;
  border-bottom:2px dotted rgba(139,58,42,.13);
  position:relative; bottom:4px;
}
.bagel-price {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: 24px; color:var(--brown); letter-spacing:1px;
  flex-shrink: 0; order:2;
}
.bagel-info p { font-size:13px; font-weight:400; color:rgba(10,10,10,.6); line-height:1.6 }

/* ── PACKS DESAYUNO (setlist rows) ── */
.packs-list { display:flex; flex-direction:column }
.pack-row {
  display:flex; align-items:center; gap:24px;
  padding:28px 0; position:relative;
  border-bottom:1px solid var(--gray-l);
  transition:background .3s, padding-left .35s var(--ease);
  cursor:default;
}
.pack-row:first-child { border-top:1px solid var(--gray-l) }
.pack-row::after {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:0; background:var(--warm);
  transition:width .35s var(--ease);
}
.pack-row:hover { background:rgba(139,58,42,.02); padding-left:16px }
.pack-row:hover::after { width:3px }
.pack-row-num {
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:58px; color:var(--warm); opacity:.1;
  line-height:.8; flex-shrink:0; min-width:60px;
  transition:opacity .3s;
}
.pack-row:hover .pack-row-num { opacity:.22 }
.pack-row-body { flex:1; min-width:0 }
.pack-row-body h4 {
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:clamp(28px,4vw,42px); color:var(--black);
  text-transform:uppercase; letter-spacing:2px; line-height:1;
  margin-bottom:6px;
}
.pack-row-body p { font-size:13px; font-weight:500; color:var(--gray-t); line-height:1.5 }
.pack-row-price {
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:clamp(28px,4vw,38px); color:var(--warm);
  flex-shrink:0; letter-spacing:1px;
}

/* ── MENU PANELS (Café / Bebidas / Dulce / Bowls) — rust texture ── */
.menu-panels {
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-top:32px;
}
.menu-panel {
  background:var(--cream); overflow:hidden;
  border:1px solid rgba(139,58,42,.12);
  transition:transform .35s var(--ease), box-shadow .4s;
}
.menu-panel:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.1) }

/* Rust-textured header plate (real photo) */
.menu-panel-head {
  position:relative; overflow:hidden;
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:26px; letter-spacing:4px; text-transform:uppercase;
  color:#FFF; padding:22px 24px;
  background:url('../img/rust-texture.jpg') center/cover no-repeat;
  box-shadow:inset 0 0 40px rgba(0,0,0,.25);
  text-shadow:0 1px 6px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.3);
}
.menu-panel:nth-child(1) .menu-panel-head { background-position:top left }
.menu-panel:nth-child(2) .menu-panel-head { background-position:top right }
.menu-panel:nth-child(3) .menu-panel-head { background-position:center }
.menu-panel:nth-child(4) .menu-panel-head { background-position:bottom right }

/* Clean light body */
.menu-panel-list { list-style:none; padding:12px 24px 24px }
.menu-panel-list li {
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:11px 0;
  border-bottom:1px solid rgba(10,10,10,.07);
  font-size:13px; color:var(--gray-t);
  transition:color .2s, padding-left .25s var(--ease);
}
.menu-panel-list li:last-child { border-bottom:none }
.menu-panel-list li:hover { color:var(--black); padding-left:4px }
.menu-panel-list li span:first-child { font-weight:600; color:var(--black); flex:1 }
.menu-panel-list li span:last-child {
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:18px; color:var(--brown); opacity:.85; flex-shrink:0;
}

/* ── EXTRAS ── */
.extras-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px }
.extra-card {
  padding:28px 28px 28px 32px;
  border-left:3px solid var(--warm);
  background:var(--cream);
  transition:background .3s, transform .35s var(--ease);
}
.extra-card:hover { background:var(--off); transform:translateY(-3px) }
.extra-card-top {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:10px;
}
.extra-card-top h4 {
  font-size:15px; font-weight:800; text-transform:uppercase;
  letter-spacing:1.5px; color:var(--black);
}
.extra-card-price {
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:24px; color:var(--warm); flex-shrink:0;
}
.extra-card p { font-size:13px; font-weight:300; color:var(--gray-t); line-height:1.5 }

/* ── ROASTER SECTION ── */
.roaster-section { padding:130px 0; background:var(--cream) }
.roaster-section .sec-label span { color:var(--brown) }
.roaster-section .sec-line { background:var(--brown) }
.roaster-title-logo {
  height:clamp(36px, 5vw, 52px); width:auto; margin-top:12px; margin-bottom:8px;
}
.roaster-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.roaster-content { max-width:620px }
.roaster-p {
  font-size:15px; font-weight:400; color:rgba(10,10,10,.6); line-height:1.75;
  margin-top:20px;
}
.roaster-p:first-of-type { margin-top:28px }
.roaster-p strong { font-weight:700; color:var(--black) }
.roaster-img-wrap {
  border-radius:20px; overflow:hidden;
  aspect-ratio:4/5;
  transition:transform .5s var(--ease), box-shadow .5s;
}
.roaster-img-wrap:hover { transform:translateY(-4px); box-shadow:0 24px 56px rgba(0,0,0,.1) }
.roaster-img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.roaster-img-wrap:hover .roaster-img { transform:scale(1.03) }
.roaster-link {
  display:inline-flex; align-items:center; gap:8px; margin-top:28px;
  font-size:9px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--brown); transition:color .3s var(--ease);
}
.roaster-link svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease) }
.roaster-link:hover { color:var(--black) }
.roaster-link:hover svg { transform:translateX(3px) }

/* ── GALLERY ── */
.gallery { background:var(--black) }
.gallery-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 300px 300px;
  gap: 3px;
}
.g-item { position:relative; overflow:hidden; cursor:pointer }
.g-big  { grid-column:1; grid-row:1/3 }
.g-bg {
  position: absolute; inset:0;
  background-size: cover; background-position:center;
  transform: scale(1.07);
  transition: transform .75s var(--ease);
}
.g-item:hover .g-bg { transform:scale(1) }
.g-overlay { position:absolute; inset:0; background:rgba(10,10,10,.32); transition:background .5s var(--ease) }
.g-item:hover .g-overlay { background:rgba(10,10,10,.06) }
.g-label {
  position: absolute; bottom:20px; left:20px;
  font-size: 8px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color: var(--white); padding:6px 14px;
  background: rgba(10,10,10,.55); backdrop-filter:blur(10px);
  border-radius: 100px;
  opacity: 0; transform:translateY(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.g-item:hover .g-label { opacity:1; transform:none }

/* ── CTA ── */
.cta { padding:110px 0; background:var(--off) }
.cta-inner {
  display: flex; align-items:center; justify-content:space-between; gap:48px;
  border-bottom: 1px solid var(--gray-l);
  padding-bottom: 90px;
}
.cta h2 {
  font-size: clamp(42px,5.5vw,70px);
  font-weight: 900; text-transform:uppercase;
  letter-spacing: -1.5px; color:var(--black); line-height:.95;
}
.cta h2 .accent {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-weight: 400;
  font-size: 1.3em; display:block;
  text-transform: uppercase; letter-spacing:2px;
  line-height: .85;
  color: var(--brown);
}
.cta-right { display:flex; flex-direction:column; gap:22px; align-items:flex-start }
.cta-right p { font-size:13px; font-weight:300; color:var(--gray-t); line-height:1.72 }
.cta .btn-white { background:var(--black); color:var(--white) }
.cta .btn-white:hover { background:var(--dark); box-shadow:0 14px 36px rgba(0,0,0,.15) }

/* ── CONTACT ── */
.contact { padding:130px 0 0; overflow:hidden }
.contact-header {
  display:flex; align-items:center; justify-content:space-between; gap:48px;
  padding-bottom:80px;
}
.contact-left { flex-shrink:0 }
.contact-left .sec-title { margin-bottom:0 }
.c-items { display:flex; gap:40px }
.c-item { display:flex; gap:14px; align-items:flex-start }
.c-ico  { width:20px; height:20px; fill:var(--brown); flex-shrink:0; margin-top:3px }
.c-item div { display:flex; flex-direction:column; gap:4px }
.c-item strong { font-size:16px; font-weight:800; color:var(--black); letter-spacing:.3px }
.c-item span   { font-size:13px; font-weight:400; color:var(--gray-t) }
.soc-row { display:flex; gap:8px; flex-shrink:0 }
.soc-btn {
  width: 40px; height:40px;
  display: flex; align-items:center; justify-content:center;
  border: 1px solid var(--gray-l); border-radius:10px;
  color: var(--gray-t); transition:all .3s var(--ease);
}
.soc-btn svg { width:17px; height:17px; fill:currentColor }
.soc-btn:hover { border-color:var(--brown); color:var(--brown); background:rgba(139,58,42,.06); transform:translateY(-2px) }

/* ── MAP FULLWIDTH ── */
.map-full { position:relative }
.map-wrap {
  position:relative; width:100%; height:clamp(400px, 50vw, 600px); overflow:hidden;
}
.map-wrap iframe {
  position:absolute; top:-60px; left:-60px;
  width:calc(100% + 120px); height:calc(100% + 120px); border:0;
  filter: sepia(.5) hue-rotate(-15deg) saturate(.6) brightness(.82) contrast(1.1);
  transition: filter .6s var(--ease);
}
.map-wrap:hover iframe {
  filter: sepia(.3) hue-rotate(-10deg) saturate(.7) brightness(.9) contrast(1.05);
}
.map-gradient-top {
  position:absolute; top:0; left:0; right:0; height:120px; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, var(--white) 0%, transparent 100%);
}
.map-gradient-bot {
  position:absolute; bottom:0; left:0; right:0; height:100px; z-index:2; pointer-events:none;
  background: linear-gradient(0deg, var(--black) 0%, transparent 100%);
}
.map-badge {
  position:absolute; bottom:28px; left:clamp(20px, 5vw, 80px); z-index:3;
  display:flex; align-items:center; gap:14px;
  padding:14px 22px; border-radius:14px;
  background:rgba(10,10,10,.65); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);
}
.map-badge svg { width:16px; height:16px; fill:var(--warm); flex-shrink:0 }
.map-badge span {
  font-size:10px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.map-link {
  display:inline-flex; align-items:center; gap:8px;
  margin-left:14px; padding-left:14px;
  border-left:1px solid rgba(255,255,255,.15);
  font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--warm); transition:color .3s var(--ease);
  pointer-events:auto;
}
.map-link svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease) }
.map-link:hover { color:var(--white) }
.map-link:hover svg { transform:translateX(3px) }

/* ── FOOTER ── */
.footer { background:var(--espresso); padding:56px 0 0; position:relative; overflow:hidden }
.footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--warm),transparent);
}
.foot-inner {
  display: flex; justify-content:space-between; align-items:center;
  padding-bottom: 40px; border-bottom:1px solid rgba(196,90,50,.12);
}
.foot-logo { height:42px; width:auto; filter:invert(1) brightness(2); margin-bottom:12px }
.foot-tag  { font-size:11px; font-weight:300; color:var(--light); letter-spacing:1px; opacity:.45 }
.foot-links { display:flex; gap:28px }
.foot-links a { font-size:10px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.35); transition:color .3s }
.foot-links a:hover { color:var(--warm) }
.foot-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0; margin-top:28px;
}
.foot-legal-links { display:flex; gap:22px }
.foot-legal-links a {
  font-size:10px; font-weight:400; letter-spacing:1px;
  color:rgba(212,154,130,.35); transition:color .3s;
}
.foot-legal-links a:hover { color:var(--warm) }
.foot-copy { font-size:10px; color:rgba(212,154,130,.25); letter-spacing:.5px }
.foot-accent { height:3px; background:linear-gradient(90deg,var(--espresso),var(--brown),var(--warm),var(--brown),var(--espresso)) }

/* ── COOKIE BANNER ── */
.cookie-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background:rgba(10,10,10,.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.06);
  padding:24px 0;
  transform:translateY(100%); transition:transform .5s var(--ease);
}
.cookie-banner.show { transform:translateY(0) }
.cookie-inner {
  max-width:1160px; margin:0 auto; padding:0 44px;
  display:flex; align-items:center; gap:32px;
}
.cookie-text { flex:1 }
.cookie-text strong { font-size:13px; font-weight:700; color:var(--white); display:block; margin-bottom:6px }
.cookie-text p { font-size:12px; font-weight:300; color:rgba(255,255,255,.45); line-height:1.5 }
.cookie-actions { display:flex; gap:8px; flex-shrink:0 }
.cookie-btn {
  font-family:inherit; font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  padding:10px 18px; border-radius:100px; border:none; cursor:pointer;
  transition:all .3s var(--ease);
}
.cookie-btn-accept { background:var(--warm); color:var(--white) }
.cookie-btn-accept:hover { background:var(--brown); transform:translateY(-1px) }
.cookie-btn-reject { background:transparent; color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.15) }
.cookie-btn-reject:hover { border-color:rgba(255,255,255,.3); color:var(--white) }
.cookie-btn-config { background:transparent; color:rgba(255,255,255,.35); border:1px solid transparent }
.cookie-btn-config:hover { color:rgba(255,255,255,.6) }
.cookie-config {
  display:none; max-width:1160px; margin:0 auto; padding:16px 44px 0;
}
.cookie-config.show { display:block }
.cookie-option {
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.cookie-option label {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  font-size:12px; color:rgba(255,255,255,.5);
}
.cookie-option strong { color:var(--white); font-weight:600; font-size:12px }
.cookie-option span { font-weight:300 }
.cookie-option input[type="checkbox"] {
  width:16px; height:16px; accent-color:var(--warm); cursor:pointer;
}
.cookie-config .cookie-btn { margin-top:14px }

/* ── LEGAL PAGES ── */
.legal-page { max-width:780px; margin:0 auto; padding:calc(var(--nav-h) + 60px) 44px 80px }
.legal-page h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(36px,5vw,56px); color:var(--brown); margin-bottom:32px }
.legal-page h2 { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--warm); margin:36px 0 12px; letter-spacing:1px }
.legal-page h3 { font-size:15px; font-weight:600; color:var(--black); margin:20px 0 8px }
.legal-page p, .legal-page li { font-size:14px; font-weight:300; line-height:1.8; color:var(--gray-t); margin-bottom:12px }
.legal-page ul { padding-left:20px }
.legal-page table { width:100%; border-collapse:collapse; margin:16px 0 24px; font-size:13px }
.legal-page th { background:var(--off); font-weight:600; text-align:left; padding:10px 14px; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--brown) }
.legal-page td { padding:10px 14px; border-bottom:1px solid var(--off); font-weight:300; color:var(--gray-t) }
.legal-date { margin-top:40px; font-size:12px; color:rgba(10,10,10,.3) }

/* ══════════════════════════
   RESPONSIVE
══════════════════════════ */
@media (max-width:1024px) {
  .features-grid { grid-template-columns:repeat(2,1fr) }
  .feat { border-right:0; border-bottom:1px solid var(--gray-l) }
  .feat:last-child { border-bottom:0 }
  .menu-panels { grid-template-columns:1fr 1fr }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:240px 240px }
  .g-big { grid-column:1; grid-row:1/3 }
}

@media (max-width:768px) {
  :root { --nav-h:60px }
  .container { padding:0 20px }

  /* ── Nav mobile ── */
  .nav-links, .nav-cta { display:none }
  .nav-burger { display:flex }
  .nav-inner { padding:0 20px }
  .nav-logo-img { height:38px }

  /* ── Hero ── */
  h1.hero-title { font-size:clamp(38px,11vw,52px); letter-spacing:-2px }
  .hero-amp { font-size:1.1em }
  .hero-content { padding:50px 20px 70px }
  .hero-eyebrow { font-size:8px; letter-spacing:3px }
  .hero-desc { font-size:13px; margin-bottom:32px }
  .hero-btns { flex-direction:column; align-items:stretch; gap:12px }
  .hero-btns .btn { justify-content:center; width:100% }
  .hero-scroll { display:none }

  /* ── About ── */
  .about-grid { grid-template-columns:1fr; gap:40px }
  .about-left::after { display:none }
  .about-stats { grid-template-columns:repeat(3,1fr); gap:16px }

  /* ── Contact ── */
  .contact-header { flex-direction:column; align-items:flex-start; gap:28px; padding-bottom:50px }
  .c-items { flex-direction:column; gap:20px }
  .c-item strong { font-size:14px }
  .c-item span { font-size:12px }

  /* ── Manifesto ── */
  .manifesto { padding:50px 0 }
  .manifesto-q { font-size:clamp(20px,5.5vw,32px) }

  /* ── Split ── */
  .split { grid-template-columns:1fr }
  .split-photo { height:260px }
  .split-text { padding:44px 20px }

  /* ── Features ── */
  .features-grid { grid-template-columns:1fr }

  /* ── Roaster ── */
  .roaster-grid { grid-template-columns:1fr; gap:40px }
  .roaster-img-wrap { aspect-ratio:3/2; max-height:300px }

  /* ── Carta ── */
  .carta { padding:80px 0 }
  .carta::before { display:none }
  .carta-cat-title { font-size:clamp(32px,8vw,52px) }
  .bagel { gap:16px; padding:22px 0 }
  .bagel-num { font-size:36px; min-width:40px }
  .bagel-top h4 { font-size:14px }
  .bagel-price { font-size:20px }
  .pack-row { gap:16px; padding:22px 0 }
  .pack-row-num { font-size:36px; min-width:40px }
  .pack-row-body h4 { font-size:clamp(24px,6vw,36px) }
  .pack-row-price { font-size:clamp(22px,6vw,28px) }
  .menu-panels { grid-template-columns:1fr; gap:16px }
  .menu-panel-head { font-size:20px; padding:16px 20px }
  .menu-panel-list { padding:8px 20px 18px }
  .extras-row { grid-template-columns:1fr; gap:16px }
  .extra-card { padding:22px 22px 22px 26px }
  .carta-tag { margin-left:8px; font-size:8px }
  .carta-sep { margin-top:60px }

  /* ── Gallery ── */
  .gallery-grid { grid-template-columns:1fr; grid-template-rows:auto }
  .g-big { grid-column:1; grid-row:auto }
  .g-item { height:240px }

  /* ── Map ── */
  .map-wrap { height:clamp(300px,60vw,400px) }
  .map-badge { bottom:16px; left:16px; padding:10px 16px; gap:10px; flex-wrap:wrap }
  .map-link { margin-left:0; padding-left:0; border-left:0; margin-top:2px; width:100% }

  /* ── CTA & Footer ── */
  .cta-inner { flex-direction:column; align-items:flex-start; gap:32px }
  .foot-inner { flex-direction:column; text-align:center; gap:18px }
  .foot-links { flex-wrap:wrap; justify-content:center }
  .foot-bottom { flex-direction:column; text-align:center; gap:12px }
  .foot-legal-links { flex-wrap:wrap; justify-content:center; gap:12px }
  .cookie-inner { flex-direction:column; text-align:center; gap:18px }
  .cookie-actions { justify-content:center; flex-wrap:wrap }

  /* ── Mobile nav overlay ── */
  .mobile-nav { padding:80px 20px }
  .m-link { font-size:clamp(32px,9vw,56px) }
  .m-footer { left:20px; font-size:9px }

  /* ── Legal ── */
  .legal-page { padding:calc(var(--nav-h) + 40px) 20px 60px }
  .legal-page table { font-size:11px }
  .legal-page th, .legal-page td { padding:8px 10px }

  /* Cursor oculto */
  .cursor-dot, .cursor-ring { display:none }
}