/* ===== Sevilla Restaurant — Interactive Menu ===== */

:root {
  --green: #2ECC71;
  --green-deep: #1F9D55;
  --green-soft: #6BE89B;
  --orange: #F39C12;
  --orange-deep: #D87B0A;
  --orange-soft: #FFB74D;
  --gold: #d4a24c;
  --sand: #FFF8EE;
  --sand-deep: #f5ead2;
  --cream: #FFFDF7;
  --ink: #2c1810;
  --ink-soft: #6b5544;
  --line: rgba(31, 157, 85, .15);
  --shadow-sm: 0 2px 8px rgba(31, 157, 85, .08);
  --shadow-md: 0 8px 28px rgba(31, 157, 85, .12);
  --shadow-lg: 0 20px 60px rgba(31, 157, 85, .18);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--sand);
  background-image: var(--tex-stone-light), var(--tex-cream);
  background-size: 600px 600px, 200px 200px;
  background-repeat: repeat, repeat;
  background-attachment: scroll, scroll;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* Use fixed bg only on desktop where it's smoother */
@media (min-width: 900px) and (hover: hover) {
  body {
    background-attachment: fixed, fixed;
  }
}

/* DO NOT lock scroll — was causing issues */
/* Scroll lock during the intro splash — guarantees the page is at top when intro fades.
   The fixed positioning during intro makes browser scroll-restoration physically impossible. */
body.intro-active {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
}

a { color: inherit; }

/* Keyboard accessibility — visible focus ring for all interactive elements */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
.chip:focus-visible,
.lcard:focus-visible,
.wine-gate__btn:focus-visible,
.btn:focus-visible,
.back-to-top:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Honor reduced-motion preference — kill all decorative animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keyboard focus visibility (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
.chip:focus-visible,
.wine-gate__btn:focus-visible,
.btn:focus-visible,
.back-to-top:focus-visible,
/* ===== HERO ===== */
.btn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn--lg { padding: 16px 36px; font-size: 16px; }
.btn--primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 8px 22px rgba(243, 156, 18, .4);
}
.btn--primary:hover {
  background: var(--orange-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(243, 156, 18, .5);
}
.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
}

/* ===== INTRO / SPLASH ANIMATION ===== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    var(--tex-stone-dark),
    var(--tex-dark),
    radial-gradient(ellipse at center, rgba(94, 107, 79, .4) 0%, transparent 70%),
    linear-gradient(135deg, #2a3322 0%, #1a2014 50%, #0f1408 100%);
  background-size: 600px 600px, 200px 200px, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  color: #f5efdc;
  overflow: hidden;
  opacity: 1;
  transition: opacity .9s cubic-bezier(0.65, 0, 0.35, 1);
  /* CSS auto-hide as a hard guarantee — fires even if JS fails */
  animation: introAutoHide .01s ease 5s forwards;
}

/* Hard CSS fallback: kill intro after 5s no matter what */
@keyframes introAutoHide {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.intro.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.intro.is-removed {
  display: none;
}

.intro__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(94, 107, 79, .15) 100%);
  pointer-events: none;
  z-index: 1;
}

.intro__inner {
  position: relative;
  z-index: 2;
  padding: 0 24px;
}

.intro__ornament {
  color: #d4a24c;
  display: block;
  margin: 0 auto 22px;
  opacity: 0;
  animation: introFadeUp 1s .25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro__kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(245, 239, 220, .65);
  margin-bottom: 26px;
  opacity: 0;
  animation: introFadeUp 1s .45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro__brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(72px, 14vw, 168px);
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #FFE9B0 0%, #FFB74D 40%, #d4a24c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.5));
  opacity: 0;
  transform: translateY(20px) scale(.92);
  animation: introBrand 1.6s .65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro__tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 26px);
  color: rgba(245, 239, 220, .85);
  margin-bottom: 28px;
  opacity: 0;
  animation: introFadeUp 1s 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro__tag em {
  color: #d4a24c;
  font-weight: 600;
}

.intro__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  animation: introFadeUp 1s 1.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro__divider .line {
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #d4a24c 100%);
}
.intro__divider .line:last-child {
  background: linear-gradient(90deg, #d4a24c 0%, transparent 100%);
}
.intro__divider .diamond {
  color: #d4a24c;
  font-size: 10px;
  opacity: .85;
}

@keyframes introFadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes introBrand {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(.88);
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.5)) blur(8px);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    filter: drop-shadow(0 16px 36px rgba(0,0,0,.55)) blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.5)) blur(0);
  }
}

/* Body lock while intro is showing */
body.intro-active {
  overflow: hidden;
  height: 100vh;
}

/* Landing cards entrance after intro finishes */
.lcard {
  opacity: 0;
  transform: translateY(28px);
}
.lcard.is-entered {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform .8s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing__header {
  opacity: 0;
  transform: translateY(-12px);
}
.landing__header.is-entered {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1), transform .9s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 640px) {
  .intro__brand { font-size: 86px; letter-spacing: -1px; }
  .intro__tag { font-size: 16px; }
  .intro__kicker { font-size: 10px; letter-spacing: 4px; }
}

/* ===== TEXTURE UTILITIES (paper / noise) ===== */
:root {
  /* Higher opacity / more visible noise textures */
  --tex-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 0 0.04  0 0 0 0.28 0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.65'/></svg>");
  --tex-cream: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.45  0 0 0 0 0.25  0 0 0 0.16 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  --tex-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.8  0 0 0 0.09 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  --tex-leaf: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.06'><path d='M60 200 Q40 130 80 60 Q120 -10 160 60 Q200 130 180 200'/><path d='M30 220 Q20 180 60 140'/><path d='M210 30 Q220 90 180 130'/><path d='M120 240 Q100 180 140 120'/></g></svg>");
  /* Linen / weave for elegant overlay */
  --tex-linen: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23000' stroke-width='0.3' opacity='0.05'><path d='M0 20 L80 20 M0 40 L80 40 M0 60 L80 60'/><path d='M20 0 L20 80 M40 0 L40 80 M60 0 L60 80'/></g></svg>");

  /* ELEGANT STONE / MARBLE textures (light and dark variants) */
  --tex-stone-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='5' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/><feGaussianBlur stdDeviation='1'/></filter><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.38  0 0 0 0 0.22  0 0 0 0.12 0'/></filter><rect width='400' height='400' filter='url(%23m)'/><rect width='400' height='400' filter='url(%23g)'/><g stroke='%23ffffff' stroke-width='0.5' fill='none' opacity='0.10'><path d='M0 80 Q120 120 240 90 T400 100'/><path d='M0 200 Q140 230 260 210 T400 230'/><path d='M0 320 Q100 290 220 320 T400 310'/><path d='M50 0 Q70 60 80 140'/><path d='M310 0 Q300 70 320 150'/></g></svg>");
  --tex-stone-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='5' seed='11'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.82  0 0 0 0.16 0'/><feGaussianBlur stdDeviation='1.2'/></filter><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.92  0 0 0 0 0.75  0 0 0 0.10 0'/></filter><rect width='400' height='400' filter='url(%23m)'/><rect width='400' height='400' filter='url(%23g)'/><g stroke='%23d4a24c' stroke-width='0.4' fill='none' opacity='0.12'><path d='M0 90 Q120 130 240 100 T400 110'/><path d='M0 210 Q140 240 260 220 T400 240'/><path d='M0 330 Q100 300 220 330 T400 320'/><path d='M60 0 Q80 60 90 140'/><path d='M320 0 Q310 70 330 150'/></g></svg>");
  --tex-stone-sage: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='5' seed='13'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.98  0 0 0 0 0.85  0 0 0 0.20 0'/><feGaussianBlur stdDeviation='1.4'/></filter><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 0.9  0 0 0 0.09 0'/></filter><rect width='400' height='400' filter='url(%23m)'/><rect width='400' height='400' filter='url(%23g)'/><g stroke='%23ffffff' stroke-width='0.5' fill='none' opacity='0.08'><path d='M0 100 Q130 130 250 100 T400 110'/><path d='M0 230 Q150 260 280 240 T400 250'/><path d='M0 350 Q120 320 240 350 T400 340'/></g></svg>");
}

/* ===== LANDING · ELECCIÓN DE SECCIÓN ===== */
.landing {
  background:
    var(--tex-stone-sage),
    var(--tex-leaf),
    radial-gradient(ellipse at top, rgba(255, 255, 255, .08), transparent 60%),
    linear-gradient(180deg,
      #5e6b4f 0%,
      #5e6b4f 55%,
      #6e7a5e 75%,
      #97a481 88%,
      #c4cab1 94%,
      #e8e3cf 98%,
      var(--sand) 100%);
  background-size: 600px 600px, 240px 240px, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  padding: clamp(20px, 3vh, 36px) clamp(16px, 4vw, 50px) clamp(36px, 5vh, 56px);
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.landing__header {
  text-align: center;
  margin-bottom: clamp(14px, 2.5vh, 24px);
  color: #f5efdc;
  flex-shrink: 0;
}
.landing__kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(245, 239, 220, .65);
  margin-bottom: 6px;
}
.landing__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 4vw, 40px);
  color: #f5efdc;
  line-height: 1.05;
  margin-bottom: 4px;
}
.landing__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(12px, 1.3vw, 15px);
  color: rgba(245, 239, 220, .75);
  letter-spacing: 1px;
}

.landing__cards {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
  flex: 1;
  min-height: 0;
}

.lcard {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr 90px;
  align-items: center;
  background-color: #f5efdc;
  background-image: var(--tex-stone-light), var(--tex-cream);
  background-size: 600px 600px, 200px 200px;
  background-repeat: repeat, repeat;
  border-radius: 14px;
  padding: 10px 18px;
  flex: 1 1 0;
  min-height: 0;
  text-decoration: none;
  color: #3b4533;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  transition: all .35s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(245, 239, 220, .35);
}

.lcard::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  background: #5e6b4f;
  opacity: 0;
  transition: opacity .3s ease;
}

.lcard:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .25);
  background: #fbf6e3;
}
.lcard:hover::before { opacity: 1; }

.lcard__leaves {
  color: #5e6b4f;
  opacity: .55;
  transform: translateX(-6px);
  pointer-events: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  max-height: 100%;
  overflow: hidden;
}
.lcard__leaves svg {
  height: 100%;
  width: auto;
  max-height: 100%;
}

.lcard__content {
  padding-left: 4px;
  min-width: 0;
}

.lcard__title {
  font-family: 'Italianno', 'Cormorant Garamond', 'Playfair Display', cursive;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(54px, 11vw, 96px);
  letter-spacing: 0;
  line-height: 0.85;
  color: #b25538;
  font-feature-settings: 'liga', 'dlig', 'kern', 'swsh';
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  line-height: 1;
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.lcard__title::before {
  content: "·";
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: .35em;
  margin-right: 14px;
  color: rgba(178, 85, 56, .55);
  font-weight: 400;
  vertical-align: middle;
}
.lcard__title::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 22px;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, rgba(178, 85, 56, .8) 0%, rgba(178, 85, 56, 0) 100%);
  transition: width .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.lcard:hover .lcard__title::after { width: 75%; }

.lcard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(36px, 6vw, 64px);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .15));
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lcard:hover .lcard__icon {
  transform: scale(1.12) rotate(-4deg);
}

/* Custom SVG icons — elegant line-art style */
.lcard__icon--svg {
  color: #b25538;
  opacity: .82;
  filter: drop-shadow(0 2px 6px rgba(178, 85, 56, .25));
}
.lcard__icon--svg svg {
  width: clamp(48px, 7vw, 72px);
  height: clamp(48px, 7vw, 72px);
}
.lcard:hover .lcard__icon--svg {
  opacity: 1;
  transform: scale(1.08) rotate(-2deg);
  color: #9a4530;
}

@media (max-width: 720px) {
  .lcard__icon--svg svg { width: 44px; height: 44px; }
}
@media (max-width: 380px) {
  .lcard__icon--svg svg { width: 36px; height: 36px; }
}

/* Variant accents (subtle differentiator on hover via the left bar) */
.lcard--menu::before      { background: #5e6b4f; }
.lcard--desserts::before  { background: #c98a4a; }
.lcard--cocktails::before { background: #a85a5a; }
.lcard--wines::before     { background: #6b2c3a; }
.lcard--events::before    { background: #c9a44a; }

@media (max-width: 720px) {
  .landing { padding: 16px 12px; }
  .landing__header { margin-bottom: 12px; }
  .landing__title { font-size: 22px; }
  .landing__sub { font-size: 11px; letter-spacing: .5px; }
  .lcard {
    grid-template-columns: 50px 1fr 64px;
    padding: 8px 14px;
    gap: 6px;
    border-radius: 12px;
  }
  .lcard__leaves svg { width: 40px; }
  .lcard__title { font-size: 58px; letter-spacing: 0; padding-bottom: 8px; }
  .lcard__icon { font-size: 38px; }
}

@media (max-width: 380px) {
  .lcard { grid-template-columns: 38px 1fr 50px; padding: 6px 10px; }
  .lcard__title { font-size: 48px; letter-spacing: 0; }
  .lcard__icon { font-size: 30px; }
}

/* Back to top floating button */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #46523b;
  color: #f5efdc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(245, 239, 220, .15);
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: #5e6b4f;
  transform: translateY(-3px) scale(1.06);
}

@media (max-width: 640px) {
  .back-to-top { bottom: 16px; right: 16px; width: 46px; height: 46px; }
  .back-to-top svg { width: 18px; height: 18px; }
}

/* ===== STICKY CATEGORY NAV ===== */
.catnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 248, 238, .96);
  background-image: var(--tex-stone-light), var(--tex-cream);
  background-size: 600px 600px, 200px 200px;
  background-repeat: repeat, repeat;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  overscroll-behavior-x: contain;
}

.catnav__scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.catnav__scroll::-webkit-scrollbar { display: none; }

/* Auto-marquee when not interacting */
.catnav.is-auto .catnav__scroll {
  scroll-behavior: auto;
}

.chip {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--green-deep);
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.chip:hover { border-color: var(--green); }
.chip.is-active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 4px 12px rgba(46, 204, 113, .3);
}

/* ===== CHIP DE VINOS (destacado) ===== */
.chip--wine {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px 9px 14px;
  background: linear-gradient(135deg, #2c1810 0%, #1a0e0a 100%);
  border: 1.5px solid var(--gold);
  color: #FFE9B0;
  font-weight: 600;
  letter-spacing: .3px;
  position: relative;
  box-shadow:
    0 4px 16px rgba(212, 162, 76, .35),
    inset 0 0 0 1px rgba(255, 233, 176, .15);
  animation: wineChipPulse 2.8s ease-in-out infinite;
}

.chip--wine:hover {
  background: linear-gradient(135deg, #4a2818 0%, #2c1810 100%);
  border-color: #FFE9B0;
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(212, 162, 76, .5),
    inset 0 0 0 1px rgba(255, 233, 176, .25);
}

.chip--wine.is-active {
  background: linear-gradient(135deg, var(--gold) 0%, #c89438 100%);
  border-color: #FFE9B0;
  color: #1a0e0a;
  box-shadow:
    0 6px 20px rgba(212, 162, 76, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .3);
  animation: none;
}

.chip--wine .chip__icon {
  color: var(--gold);
  transition: color .25s ease;
  flex-shrink: 0;
}
.chip--wine:hover .chip__icon { color: #FFE9B0; }
.chip--wine.is-active .chip__icon { color: #1a0e0a; }

.chip--wine .chip__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 9px;
  background: var(--gold);
  color: #1a0e0a;
  border-radius: 50%;
  margin-left: 2px;
  font-weight: 700;
  flex-shrink: 0;
}
.chip--wine.is-active .chip__badge {
  background: #1a0e0a;
  color: var(--gold);
}

@keyframes wineChipPulse {
  0%, 100% {
    box-shadow:
      0 4px 16px rgba(212, 162, 76, .35),
      inset 0 0 0 1px rgba(255, 233, 176, .15),
      0 0 0 0 rgba(212, 162, 76, .4);
  }
  50% {
    box-shadow:
      0 4px 18px rgba(212, 162, 76, .5),
      inset 0 0 0 1px rgba(255, 233, 176, .25),
      0 0 0 8px rgba(212, 162, 76, 0);
  }
}

@media (max-width: 640px) {
  .chip--wine { padding: 8px 11px 8px 12px; font-size: 12px; gap: 5px; }
  .chip--wine .chip__icon { width: 12px; height: 12px; }
  .chip--wine .chip__badge { width: 14px; height: 14px; font-size: 8px; }
}

@media (max-width: 640px) {
  .catnav { padding: 10px 14px; }
  .chip { font-size: 13px; padding: 8px 14px; }
}

/* ===== MENU SECTIONS ===== */
.menu { padding: 40px 0 60px; }

.section {
  padding: 60px clamp(20px, 5vw, 60px);
  scroll-margin-top: 80px;
  max-width: 100%;
  overflow-x: clip;
  background-color: var(--sand);
  background-image: var(--tex-stone-light), var(--tex-cream);
  background-size: 600px 600px, 200px 200px;
  background-repeat: repeat, repeat;
}
.section--alt {
  background-color: var(--cream);
  background-image: var(--tex-stone-light), var(--tex-cream);
  background-size: 600px 600px, 200px 200px;
  background-repeat: repeat, repeat;
}
.section--feature {
  background:
    var(--tex-stone-sage),
    var(--tex-leaf),
    radial-gradient(ellipse at top, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(135deg, #5e6b4f 0%, #4a553e 100%);
  background-size: 600px 600px, 240px 240px, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  color: var(--cream);
  position: relative;
}
.section--feature .section__kicker { color: var(--orange-soft); }

.section__head {
  max-width: 1200px;
  margin: 0 auto 40px;
  text-align: left;
}
.section__head--center { text-align: center; }
.section__kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.section__head h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  font-style: italic;
  color: #b25538;
  line-height: 1;
  margin-bottom: 12px;
}
.section--feature .section__head h2 { color: #fff; }
.section__head p {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 600px;
}
.section--feature .section__head p { color: rgba(255, 253, 247, .82); }
.section__head em { color: var(--orange-deep); font-weight: 500; }

/* ===== GRID + CARDS ===== */
.grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}

.card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 18px 0;
  cursor: default;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  border-bottom: 1px dashed rgba(31, 157, 85, .18);
}
.section--feature .card { border-bottom-color: rgba(255, 255, 255, .14); }

/* Photo-feature card variant (only for hero items per section) */
.card--photo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 38%) 1fr;
  gap: 28px;
  align-items: center;
  padding: 24px 22px;
  background: rgba(255, 253, 247, .65);
  border: 1px solid rgba(178, 85, 56, .18);
  border-bottom: 1px solid rgba(178, 85, 56, .18);
  border-radius: 16px;
  margin: 8px 0 14px;
  box-shadow: 0 8px 28px rgba(60, 30, 16, .07);
}
.section--feature .card--photo {
  background: rgba(255, 253, 247, .08);
  border-color: rgba(255, 233, 176, .22);
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.card__photo {
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4/5;
  box-shadow: 0 6px 20px rgba(60, 30, 16, .18);
}
.card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.card--photo:hover .card__photo img { transform: scale(1.04); }
.card--photo .card__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card--photo .card__head { min-width: 0; flex-wrap: wrap; }
.card--photo .card__title { min-width: 0; flex-shrink: 1; }
.card--photo .card__price { flex-shrink: 0; }
.card--photo .card__dots { flex-shrink: 1; min-width: 12px; }
@media (max-width: 720px) {
  .card--photo {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }
  .card__photo { aspect-ratio: 16/10; }
}

/* Ambient gallery for events */
.ambient-gallery {
  max-width: 1100px;
  margin: 36px auto 0;
  text-align: center;
}
.ambient-gallery__kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.ambient-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ambient-gallery figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 8px 24px rgba(60, 30, 16, .12);
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ambient-gallery figure:hover { transform: translateY(-4px); }
.ambient-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .ambient-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

.card__head {
  display: flex;
  align-items: baseline;
  gap: 0;
}
.card__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--green-deep);
  line-height: 1.2;
  flex: 0 0 auto;
  max-width: calc(100% - 60px);
}
.section--feature .card__title { color: #fff; }
.card--noprice .card__title { max-width: 100%; }
.card__dots {
  flex: 1 1 auto;
  height: 1px;
  border-bottom: 1.5px dotted rgba(31, 157, 85, .35);
  margin: 0 10px;
  transform: translateY(-5px);
  min-width: 14px;
}
.section--feature .card__dots { border-bottom-color: rgba(255, 255, 255, .35); }
.card__price {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--orange-deep);
  white-space: nowrap;
  flex: 0 0 auto;
}
.section--feature .card__price { color: var(--orange-soft); }
.card__sub {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: -2px;
}
.section--feature .card__sub { color: rgba(255, 253, 247, .7); }
.card__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 6px;
  max-width: 60ch;
}
.section--feature .card__desc { color: rgba(255, 253, 247, .8); }

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sand-deep);
  color: var(--green-deep);
  letter-spacing: .3px;
}
.tag--hot { background: rgba(243, 156, 18, .14); color: var(--orange-deep); }
.tag--star { background: rgba(212, 162, 76, .18); color: #a3771f; }
.section--feature .tag { background: rgba(255, 255, 255, .14); color: var(--cream); }

.sides-note {
  max-width: 1100px;
  margin: 28px auto 0;
  padding: 20px 24px;
  background: rgba(255, 255, 255, .65);
  border: 1px dashed var(--line);
  border-radius: 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.sides-note--dark {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
  color: rgba(255, 253, 247, .85);
}
.sides-note strong {
  display: block;
  color: var(--green-deep);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sides-note--dark strong { color: var(--orange-soft); }
.sides-note > div + div { margin-top: 14px; }
.sides-note em { color: var(--orange-deep); font-style: italic; font-weight: 600; }
.sides-note--dark em { color: var(--orange-soft); }

/* Liquor disclosure (after Cócteles grid) */
.liquor-note {
  max-width: 900px;
  margin: 36px auto 0;
  padding: 18px 22px;
  text-align: center;
  border-top: 1px solid rgba(178, 85, 56, .18);
  font-family: var(--sans);
  color: var(--ink-soft);
}
.liquor-note__brands {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3px;
  line-height: 1.55;
  margin-bottom: 6px;
}
.liquor-note__dist {
  font-size: 11px;
  font-style: italic;
  opacity: .85;
  margin-bottom: 8px;
}
.liquor-note__warn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange-deep);
}

/* ===== WINE LIST (elegante) ===== */
.section--wine {
  background:
    var(--tex-stone-dark),
    var(--tex-dark),
    radial-gradient(ellipse at top left, rgba(212, 162, 76, .12), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(120, 30, 50, .25), transparent 55%),
    linear-gradient(135deg, #1a0e0a 0%, #2a1410 50%, #1a0a14 100%);
  background-size: 600px 600px, 200px 200px, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  color: #f3e9d6;
  position: relative;
  padding: 0;
  overflow: hidden;
}

/* Inner content padding when gate is gone */
.section--wine > .wine-ornament,
.section--wine > .section__head,
.section--wine > .wine-list,
.section--wine > .wine-note {
  padding-left: clamp(24px, 5vw, 60px);
  padding-right: clamp(24px, 5vw, 60px);
}
.section--wine > .wine-ornament { padding-top: 80px; }
.section--wine > .wine-note { padding-bottom: 70px; }

/* Hide content while gate is showing (gate covers it visually with sticky height) */
.section--wine.gate-closed > .wine-ornament,
.section--wine.gate-closed > .section__head,
.section--wine.gate-closed > .wine-list,
.section--wine.gate-closed > .wine-note {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

/* ===== WINE GATE (entrada elegante - full viewport hero-style) ===== */
.wine-gate {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -5%, rgba(46,155,255,.20), transparent 55%),
    radial-gradient(ellipse at center, rgba(0,0,0,.05) 0%, rgba(6,16,31,.45) 70%, rgba(6,16,31,.85) 100%),
    linear-gradient(160deg, #0F2036 0%, #0A1626 55%, #0C1A2E 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Animated subtle blue glow */
.wine-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at center 72%, rgba(46,155,255,.16), transparent 70%);
  animation: wineGlow 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes wineGlow {
  from { opacity: .4; }
  to { opacity: .85; }
}

/* Curtain panels for the reveal animation */
.wine-gate__panels {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.wine-gate__panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, #0A1626 0%, #0C1A2E 100%);
  transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1);
}
.wine-gate__panel--top { top: 0; transform: translateY(-100%); }
.wine-gate__panel--bottom { bottom: 0; transform: translateY(100%); }
.wine-gate.is-leaving .wine-gate__panel--top { transform: translateY(0); }
.wine-gate.is-leaving .wine-gate__panel--bottom { transform: translateY(0); }

.wine-gate__content {
  position: relative;
  z-index: 3;
  max-width: 640px;
  animation: wineGateIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes wineGateIn {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.wine-gate__ornament {
  color: #2E9BFF;
  margin-bottom: 16px;
  opacity: 0;
  animation: gateFadeUp .9s .25s ease-out forwards;
}

.wine-gate__kicker {
  font-family: 'Archivo', var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #2E9BFF;
  margin-bottom: 18px;
  opacity: 0;
  animation: gateFadeUp .9s .4s ease-out forwards;
}

.wine-gate__title {
  font-family: 'Archivo', var(--sans);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(56px, 10vw, 112px);
  line-height: .98;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #EAF2FB 0%, #7CC0FF 48%, #2E9BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 30px rgba(46,155,255,.25));
  opacity: 0;
  animation: gateFadeUp 1.1s .55s ease-out forwards;
}

.wine-gate__sub {
  font-family: 'Archivo', var(--sans);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: clamp(20px, 2.8vw, 28px);
  color: #EAF2FB;
  margin-bottom: 24px;
  opacity: 0;
  animation: gateFadeUp 1s .8s ease-out forwards;
}
.wine-gate__sub em {
  color: #2E9BFF;
  font-style: normal;
  font-weight: 800;
}

.wine-gate__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 22px;
  opacity: 0;
  animation: gateFadeUp 1s .95s ease-out forwards;
}
.wine-gate__divider .line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #2E9BFF 100%);
}
.wine-gate__divider .line:last-child {
  background: linear-gradient(90deg, #2E9BFF 0%, transparent 100%);
}
.wine-gate__divider .diamond {
  color: #2E9BFF;
  font-size: 10px;
  opacity: .85;
}

.wine-gate__tag {
  font-family: var(--sans);
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  color: rgba(234, 242, 251, .82);
  letter-spacing: .4px;
  line-height: 1.55;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 38px;
  opacity: 0;
  animation: gateFadeUp 1s 1.1s ease-out forwards;
}

.wine-gate__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  color: #EAF2FB;
  border: 1.5px solid #2E9BFF;
  font-family: 'Archivo', var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 5px;
  text-transform: uppercase;
  padding: 17px 42px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  opacity: 0;
  animation: gateFadeUp 1s 1.3s ease-out forwards, gatePulse 2.6s 2.2s ease-in-out infinite;
}

.wine-gate__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0A6BE0 0%, #2E9BFF 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(0.85, 0, 0.15, 1);
  z-index: 0;
}
.wine-gate__btn:hover::before { transform: scaleX(1); }
.wine-gate__btn:hover {
  color: #06101F;
  border-color: #2E9BFF;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(46,155,255,.40);
}

.wine-gate__btn-text,
.wine-gate__btn-arrow {
  position: relative;
  z-index: 1;
}
.wine-gate__btn-arrow {
  display: inline-flex;
  transition: transform .35s ease;
}
.wine-gate__btn:hover .wine-gate__btn-arrow {
  transform: translateX(6px);
}

.wine-gate__hint {
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(143, 160, 179, .55);
  opacity: 0;
  animation: gateFadeUp 1s 1.5s ease-out forwards;
}

@keyframes gateFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gatePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,155,255, 0); }
  50% { box-shadow: 0 0 0 14px rgba(46,155,255, 0); }
  0% { box-shadow: 0 0 0 0 rgba(46,155,255, .40); }
}

/* Leaving: content fades, panels close, then gate fades out */
.wine-gate.is-leaving .wine-gate__content {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .35s ease, transform .35s ease;
}
.wine-gate.is-gone {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.wine-gate.is-removed {
  display: none;
}

@media (max-width: 640px) {
  .wine-gate { padding: 30px 18px; }
  .wine-gate__title { font-size: 60px; }
  .wine-gate__sub { font-size: 18px; }
  .wine-gate__tag { font-size: 14px; letter-spacing: .3px; margin-bottom: 30px; }
  .wine-gate__btn { padding: 15px 34px; font-size: 12px; letter-spacing: 4px; }
  .wine-gate__hint { font-size: 9px; margin-top: 22px; }
}
.section--wine::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  opacity: .6;
}
.section--wine::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  opacity: .4;
}

.section--wine .section__kicker {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 5px;
}
.section--wine .section__head h2 {
  font-family: var(--serif);
  color: #f3e9d6;
  font-style: italic;
  font-size: clamp(40px, 5.5vw, 64px);
  background: linear-gradient(135deg, #f3e9d6 0%, var(--gold) 60%, #c89438 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
}
.section--wine .section__head p {
  color: rgba(243, 233, 214, .65);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  max-width: 520px;
  margin: 0 auto;
}

.wine-ornament {
  display: block;
  margin: 0 auto 26px;
  color: var(--gold);
  opacity: .8;
  text-align: center;
}

.wine-list {
  max-width: 1080px;
  margin: 40px auto 0;
}

.wine-cat {
  text-align: center;
  margin: 36px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(212, 162, 76, .25);
  position: relative;
}
.wine-cat:first-child { margin-top: 0; }
.wine-cat__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 400;
}
.wine-cat__sub {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: rgba(243, 233, 214, .45);
  letter-spacing: 2px;
  margin-top: 4px;
}

.wine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 50px;
}

.wine {
  padding: 18px 0;
  border-bottom: 1px dashed rgba(212, 162, 76, .18);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wine:last-child { border-bottom: none; }

.wine__head {
  display: flex;
  align-items: baseline;
  gap: 0;
}
.wine__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: #f3e9d6;
  font-weight: 600;
  flex: 0 0 auto;
  max-width: calc(100% - 90px);
}
.wine__dots {
  flex: 1 1 auto;
  height: 1px;
  border-bottom: 1px dotted rgba(212, 162, 76, .35);
  margin: 0 10px;
  transform: translateY(-5px);
  min-width: 14px;
}
.wine__price {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--gold);
  font-weight: 500;
  white-space: nowrap;
  flex: 0 0 auto;
  letter-spacing: .5px;
}

.wine__meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: rgba(243, 233, 214, .55);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.wine__notes {
  font-size: 13px;
  color: rgba(243, 233, 214, .7);
  line-height: 1.5;
  font-style: italic;
  margin-top: 2px;
}

.wine-note {
  max-width: 700px;
  margin: 50px auto 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(243, 233, 214, .55);
  line-height: 1.7;
  padding-top: 28px;
  border-top: 1px solid rgba(212, 162, 76, .15);
}
.wine-note__pill {
  display: inline-block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  padding: 5px 14px;
  border: 1px solid rgba(212, 162, 76, .35);
  border-radius: 999px;
  margin-right: 10px;
}

@media (max-width: 720px) {
  .section--wine { padding: 50px 18px 50px; }
  .wine-grid { grid-template-columns: 1fr; gap: 0; }
  .wine { padding: 14px 0; }
  .wine__name { font-size: 16px; max-width: calc(100% - 70px); }
  .wine__price { font-size: 13px; }
  .wine__meta { font-size: 11px; letter-spacing: 1px; }
  .wine__notes { font-size: 12px; }
  .wine-cat { margin: 28px 0 14px; padding-bottom: 10px; }
  .wine-cat__title { font-size: 21px; letter-spacing: 3px; }
  .wine-cat__sub { font-size: 11px; }
  .wine-note { font-size: 12px; margin-top: 32px; padding-top: 20px; }
  .wine-note__pill { display: block; margin: 0 auto 10px; width: max-content; }
}

/* Highlight on chip selection (active section gets a soft glow) */
.section.is-highlighted .section__head h2 {
  position: relative;
  display: inline-block;
}
.section.is-highlighted .section__head h2::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 4px;
  background: var(--orange);
  border-radius: 4px;
  animation: highlightBar .6s ease;
}
@keyframes highlightBar {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

/* ===== MOBILE — keep 2 columns visible while scrolling ===== */
@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .card { padding: 14px 0; gap: 4px; }
  .card__desc { display: none; }
  /* Important spec-carrying items keep their description visible even in compact 2-col */
  .card--keepdesc .card__desc { display: block; font-size: 11px; line-height: 1.35; margin-top: 3px; }
  .card__title { font-size: 13.5px; max-width: calc(100% - 44px); }
  .card__price { font-size: 13px; }
  .card__sub { font-size: 10.5px; line-height: 1.3; }
  .card__dots { margin: 0 5px; min-width: 6px; }
  .card__tags { margin-top: 4px; gap: 3px; }
  .tag { font-size: 9px; padding: 2px 6px; letter-spacing: .2px; }
  /* Photo-feature cards keep readable sizes regardless of grid compression */
  .card--photo { padding: 16px; gap: 14px; }
  .card--photo .card__title { font-size: 17px; max-width: 100%; }
  .card--photo .card__price { font-size: 17px; }
  .card--photo .card__sub { font-size: 13px; }
  .card--photo .card__desc { display: block; font-size: 13px; }
  .card--photo .card__dots { margin: 0 8px; }
  .card--photo .card__tags { gap: 6px; }
  .card--photo .tag { font-size: 11px; padding: 4px 10px; }
  .section { padding: 36px clamp(14px, 4vw, 32px); }
  .section__head { margin-bottom: 18px; text-align: center; }
  .section__head h2 { font-size: 28px; margin-bottom: 4px; }
  .section__head p { font-size: 15px; margin: 0 auto; }
  .section__kicker { font-size: 10px; letter-spacing: 2px; }
  .sides-note { padding: 14px 16px; font-size: 12px; }
}

@media (max-width: 380px) {
  .grid { gap: 0 10px; }
  .card__title { font-size: 12.5px; }
  .card__price { font-size: 12px; }
  .card--photo .card__title { font-size: 16px; }
  .card--photo .card__price { font-size: 16px; }
}

/* ===== EVENTOS (estilo menú) ===== */
.section--events {
  position: relative;
  padding: 60px clamp(20px, 5vw, 60px);
}
.section--events::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--gold) 50%, var(--green) 100%);
  opacity: .75;
}

.grid--events {
  max-width: 1100px;
  gap: 0 56px;
}

.card--event .card__head {
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
  column-gap: 10px;
}
.card--event .card__title {
  font-size: 22px;
  color: var(--green-deep);
  font-style: italic;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-shrink: 1;
  flex-wrap: wrap;
}
.card--event .card__dots { flex-shrink: 1; min-width: 8px; }
.card--event .card__price { flex-shrink: 0; }
.card--event .card__emoji {
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.card--event .card__price {
  color: var(--orange-deep);
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.card--event .card__sub {
  color: var(--orange-deep);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 1px;
}
.card--event .card__desc {
  margin-top: 8px;
  line-height: 1.55;
}
.card--event .card__tags {
  margin-top: 12px;
  gap: 5px;
}
.card--event .tag {
  font-size: 10.5px;
  padding: 3px 9px;
  background: rgba(46, 204, 113, .1);
  color: var(--green-deep);
  border: 1px solid rgba(46, 204, 113, .18);
  letter-spacing: .2px;
}

.events-cta {
  max-width: 700px;
  margin: 36px auto 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 720px) {
  .grid--events { grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .card--event .card__title { font-size: 14px; gap: 4px; }
  .card--event .card__emoji { font-size: 14px; }
  .card--event .card__price { font-size: 10px; letter-spacing: .5px; }
  .card--event .card__sub { font-size: 10px; letter-spacing: .5px; }
  .card--event .card__desc { display: none; }
  .card--event .card__tags { margin-top: 6px; gap: 3px; }
  .card--event .tag { font-size: 9px; padding: 2px 6px; }
}

@media (max-width: 380px) {
  .grid--events { grid-template-columns: 1fr; }
  .card--event .card__desc { display: block; font-size: 12px; }
}
@media (max-width: 640px) {
  .events { padding: 36px 16px 44px; }
}

/* ===== LOCATIONS ===== */
.loc-card__badge--open {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  box-shadow: 0 6px 16px rgba(46, 204, 113, .4);
}

.locations__grid--single {
  grid-template-columns: 1fr;
  max-width: 580px;
}
.loc-card__addr--phone {
  background: rgba(243, 156, 18, .14);
  color: var(--green-deep);
}
.loc-card__addr--phone svg { color: var(--orange-deep); }
.loc-card__addr--phone:hover {
  background: var(--orange-deep);
  color: #fff;
}
.loc-card__addr--phone:hover svg { color: #fff; }
/* ===== FOOTER ===== */
.footer {
  background:
    var(--tex-stone-dark),
    var(--tex-dark),
    linear-gradient(135deg, #1a1410 0%, #2c1810 100%);
  background-size: 600px 600px, 200px 200px, 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
  color: rgba(255, 253, 247, .85);
  padding: 60px clamp(20px, 5vw, 60px) 30px;
}
.footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 720px) {
  .footer__inner { grid-template-columns: 1fr; gap: 30px; }
}
.footer__brand h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  color: #fff;
  margin: 4px 0 10px;
}
.footer__est {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
}
.footer__brand p { margin-bottom: 8px; font-size: 14px; }
.footer__pr { font-size: 13px; opacity: .8; }
.footer__pr strong { color: var(--orange-soft); }
.footer__pr em { color: var(--green-soft); font-style: italic; font-weight: 600; }
.footer__since {
  margin-top: 14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: .3px;
  opacity: .9;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.footer__links a {
  text-decoration: none;
  color: rgba(255, 253, 247, .8);
  transition: color .2s;
}
.footer__links a:hover { color: var(--orange-soft); }
.footer__warn {
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 18px 20px;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 253, 247, .55);
  border-top: 1px solid rgba(255, 253, 247, .15);
  padding-top: 22px;
}

.footer__credit {
  max-width: 1100px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 253, 247, .4);
  letter-spacing: 1px;
  font-style: italic;
}
.footer__credit a {
  color: var(--orange-soft);
  text-decoration: none;
  font-weight: 600;
  font-style: normal;
  transition: color .2s;
}
.footer__credit a:hover { color: #fff; }

/* ===== WEBSPACE PROMO ===== */
/* ----- Rotating conic gradient (subtle aurora) ----- */
@keyframes wsConicSpin {
  to { transform: rotate(360deg); }
}

/* ----- Mesh blobs (more visible movement) ----- */
.ws-promo__orb--1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #25D366 0%, transparent 70%);
  top: -120px; left: -120px;
  opacity: .55;
  animation: wsOrbDrift1 16s ease-in-out infinite alternate;
}
.ws-promo__orb--2 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
  bottom: -100px; right: -80px;
  opacity: .5;
  animation: wsOrbDrift2 19s ease-in-out infinite alternate;
}
.ws-promo__orb--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  top: 40%; left: 45%;
  opacity: .35;
  animation: wsOrbDrift3 22s ease-in-out infinite alternate;
}
.ws-promo__orb--4 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, #128C7E 0%, transparent 70%);
  top: 10%; right: 30%;
  opacity: .45;
  animation: wsOrbDrift4 18s ease-in-out infinite alternate;
}

@keyframes wsOrbDrift1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(120px, 80px) scale(1.25); }
}
@keyframes wsOrbDrift2 {
  0% { transform: translate(0, 0) scale(1.1); }
  100% { transform: translate(-100px, -90px) scale(1); }
}
@keyframes wsOrbDrift3 {
  0% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-30%, -65%) scale(1.3); }
}
@keyframes wsOrbDrift4 {
  0% { transform: translate(0, 0) scale(.9); }
  100% { transform: translate(-80px, 110px) scale(1.2); }
}

/* ----- Animated grid pattern ----- */
@keyframes wsGridSlide {
  from { background-position: 0 0, 0 0; }
  to { background-position: 60px 60px, 60px 60px; }
}

/* ----- Drifting particles ----- */
@keyframes wsParticleRise {
  0% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: .9;
    transform: translateY(-50px) translateX(8px) scale(1);
  }
  50% {
    transform: translateY(-50vh) translateX(-15px) scale(1);
    opacity: .7;
  }
  90% {
    opacity: .4;
    transform: translateY(-95vh) translateX(20px) scale(.8);
  }
  100% {
    transform: translateY(-100vh) translateX(0) scale(0);
    opacity: 0;
  }
}

/* ----- Shine lines (top & bottom) ----- */
.ws-promo__shine--top { top: 0; }
.ws-promo__shine--bottom {
  bottom: 0;
  animation-delay: -4s;
}
@keyframes wsShine {
  0%, 100% {
    opacity: .25;
    background-position: -100% 0;
  }
  50% {
    opacity: .9;
    background-position: 100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
}

/* When the WebSpace CTA is shown alone (no left brand section) */
.ws-promo__inner--solo {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}
.ws-promo__inner--solo .ws-promo__cta {
  width: 100%;
}

/* ----- Left side ----- */
.ws-promo__brand-text {
  display: flex;
  flex-direction: column;
}
.ws-promo__brand-text strong {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: #fff;
  letter-spacing: .5px;
}

.ws-promo__feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(37, 211, 102, .12);
  border: 1px solid rgba(37, 211, 102, .25);
  border-radius: 50%;
  font-size: 14px;
  flex-shrink: 0;
}

/* ----- Right side (CTA card) ----- */
.ws-promo__cta-kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #25D366;
  margin-bottom: 10px;
}
.ws-promo__cta-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 8px;
}
.ws-promo__cta-title em {
  color: #25D366;
  font-weight: 700;
}
.ws-promo__cta-text {
  font-size: 13px;
  color: rgba(243, 233, 214, .65);
  margin-bottom: 22px;
}

.ws-promo__wa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .18);
  border-radius: 10px;
  flex-shrink: 0;
}
.ws-promo__wa-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}
.ws-promo__wa-text strong {
  font-size: 15px;
  letter-spacing: .3px;
}
.ws-promo__wa-text em {
  font-style: normal;
  font-size: 12px;
  opacity: .85;
  margin-top: 2px;
  letter-spacing: 1px;
}
.ws-promo__wa-arrow {
  display: inline-flex;
  transition: transform .3s ease;
  flex-shrink: 0;
}
@media (max-width: 880px) {
  .ws-promo__cta-title { font-size: 22px; }
  .ws-promo__wa-icon { width: 36px; height: 36px; }
}

/* ===== WhatsApp Floating Button ===== */
@keyframes waPulse {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes waBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 640px) {
}


/* ===== Toggle de Idioma ===== */
body.lang-es-only .card__sub {
  display: none;
}
body.lang-es-only .wine-cat__sub {
  display: none;
}


/* ===== POP-UP PROMOCIÓN · EVENTO ===== */
.promo {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}
.promo.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.promo__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 4, .82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.promo__card {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  text-align: center;
  padding: 38px 30px 30px;
  color: #f3e7cf;
  border: 1px solid rgba(212, 162, 76, .45);
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(212, 162, 76, .22) 0%, rgba(212, 162, 76, 0) 55%),
    linear-gradient(170deg, #15110a 0%, #0b0805 60%, #100c07 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .4);
  transform: translateY(18px) scale(.97);
  transition: transform .5s cubic-bezier(.2, .8, .25, 1);
  -webkit-overflow-scrolling: touch;
}
.promo.is-open .promo__card { transform: translateY(0) scale(1); }

.promo__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  color: var(--gold);
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(212, 162, 76, .4);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, color .2s ease;
  z-index: 2;
}
.promo__close:hover {
  background: var(--gold);
  color: #15110a;
  transform: rotate(90deg);
}

.promo__invite {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #cdbd9c;
  margin-bottom: 16px;
  padding: 0 34px;
}
.promo__invite strong { color: var(--gold); font-weight: 600; }

.promo__pre {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}
.promo__star {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(40px, 13vw, 56px);
  line-height: 1.12;
  color: #e9c878;
  background: linear-gradient(180deg, #f6dd9e 0%, #d4a24c 55%, #b07d2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 18px rgba(212, 162, 76, .25);
  margin-bottom: 10px;
  padding: 4px 6px 8px;
  overflow: visible;
}
.promo__por {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #cdbd9c;
}
.promo__artist {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(26px, 8vw, 34px);
  letter-spacing: .02em;
  color: var(--gold);
  margin-bottom: 14px;
}
.promo__desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: #d7cab0;
  max-width: 320px;
  margin: 0 auto 20px;
}

.promo__when {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 16px;
  margin: 0 auto 16px;
  width: fit-content;
  border: 1px solid rgba(212, 162, 76, .35);
  border-radius: 12px;
  background: rgba(0, 0, 0, .25);
}
.promo__date { line-height: 1; text-align: center; }
.promo__dow {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #cdbd9c;
  margin-bottom: 2px;
}
.promo__day {
  display: block;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 46px;
  color: var(--gold);
}
.promo__time {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d7cab0;
  border-left: 1px solid rgba(212, 162, 76, .3);
  padding-left: 16px;
}
.promo__hour { color: var(--gold); }

.promo__place {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e9ddc4;
  margin-bottom: 18px;
}
.promo__place span { color: var(--gold); }

.promo__deal {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  margin-bottom: 22px;
}
.promo__deal > div:not(.promo__deal-sep) {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.promo__deal-sep { width: 1px; background: rgba(212, 162, 76, .3); }
.promo__deal-k {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #b8a986;
}
.promo__deal-v {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: #f0e6d0;
  max-width: 130px;
}
.promo__price {
  font-family: 'Playfair Display', serif;
  font-size: 26px !important;
  font-weight: 700;
  color: var(--gold);
}
.promo__price em { font-family: var(--sans); font-size: 10px; font-style: normal; font-weight: 500; color: #b8a986; display: block; letter-spacing: .1em; text-transform: uppercase; }

.promo__cta {
  display: block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #15110a;
  text-decoration: none;
  padding: 15px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0cd83 0%, #d4a24c 55%, #c08f38 100%);
  box-shadow: 0 8px 24px rgba(212, 162, 76, .3);
}
.promo__cta--beat {
  transform-origin: center;
  animation: promoBeat 1.4s ease-in-out infinite;
}
@keyframes promoBeat {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(212, 162, 76, .3);
  }
  18% {
    transform: scale(1.06);
    box-shadow: 0 12px 34px rgba(212, 162, 76, .55);
  }
  32% { transform: scale(1.0); }
  46% {
    transform: scale(1.04);
    box-shadow: 0 12px 30px rgba(212, 162, 76, .45);
  }
}

@media (max-width: 380px) {
  .promo__card { padding: 34px 20px 24px; }
  .promo__desc { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo, .promo__card, .promo__close { transition: none; }
  .promo__cta--beat { animation: none; }
}

/* ===== Promo · Diseño Web (WebSpace LLC) ===== */
.webpromo {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 84px) 20px;
  text-align: center;
  color: #f4e9d6;
  background: linear-gradient(160deg, #1a120b 0%, #2c1d10 55%, #1a120b 100%);
}
.webpromo::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(212, 162, 76, .18), transparent 62%);
  pointer-events: none;
}
.webpromo__inner { position: relative; max-width: 640px; margin: 0 auto; }
.webpromo__kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.webpromo__title {
  font-family: var(--serif); font-weight: 700; color: #fff;
  font-size: clamp(26px, 4.4vw, 40px); line-height: 1.1;
  margin: 0 0 16px;
}
.webpromo__desc {
  font-size: clamp(15px, 1.9vw, 17px); line-height: 1.65; color: #e6d8c2;
  max-width: 540px; margin: 0 auto 30px;
}
.webpromo__desc strong { color: var(--gold); font-weight: 700; }
.webpromo__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.webpromo__btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 14px 28px; border-radius: 999px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.webpromo__btn--wa {
  background: linear-gradient(180deg, #e7bd6a, #d4a24c); color: #2c1810;
  box-shadow: 0 10px 30px rgba(212, 162, 76, .35);
}
.webpromo__btn--wa:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(212, 162, 76, .45); }
.webpromo__btn--ig {
  background: transparent; color: #f4e9d6;
  border: 1px solid rgba(244, 233, 214, .35);
}
.webpromo__btn--ig:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 480px) {
  .webpromo__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .webpromo__btn { transition: none; }
}

/* ============================================================
   TEMA OTRA COSA · Clandestino oscuro · azules + gris + blanco
   (override final — se carga de último, gana sobre lo anterior)
   Paleta: navy #0A1626 · panel #0F2036 · azul1 #2E9BFF · azul2 #0A6BE0 · gris #8FA0B3 · blanco #EAF2FB
   ============================================================ */
:root{
  --green:#2E9BFF; --green-deep:#0A6BE0; --green-soft:#7CC0FF;
  --orange:#0A6BE0; --orange-deep:#2E9BFF; --orange-soft:#7CC0FF;
  --gold:#8FA0B3; --sand:#0A1626; --sand-deep:#0F2036; --cream:#0F2036;
  --ink:#EAF2FB; --ink-soft:#8FA0B3;
  --line:rgba(143,160,179,.18);
  --shadow-sm:0 2px 8px rgba(0,0,0,.4); --shadow-md:0 10px 30px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.55);
}
body{
  color:#EAF2FB !important;
  background-color:#0A1626 !important;
  background-image:
    radial-gradient(ellipse at 50% -8%, rgba(46,155,255,.14), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(10,107,224,.12), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.02) 3px 4px) !important;
  background-size:100% 100%, 100% 100%, 100% 100% !important;
  background-attachment:fixed !important;
}
/* Intro splash */
.intro{ background:#0A1626 !important; }
.intro__inner, .intro__brand{ color:#EAF2FB !important; }
.intro__kicker,.intro__tag{ color:#8FA0B3 !important; }
.intro__brand{ color:#EAF2FB !important; }
.intro__tag em, .intro__brand em{ color:#2E9BFF !important; }
.intro__ornament{ color:#2E9BFF !important; }
.intro__divider .diamond{ color:#2E9BFF !important; }
.intro__veil{ background:#0A1626 !important; }

/* Landing */
.landing{
  background:
    radial-gradient(ellipse at 50% -5%, rgba(46,155,255,.16), transparent 55%),
    linear-gradient(180deg,#0A1626 0%,#0A1626 70%, #0C1A2E 100%) !important;
}
.landing__header{ color:#EAF2FB !important; }
.landing__kicker{ color:#2E9BFF !important; }
.landing__title{ color:#EAF2FB !important; }
.landing__sub{ color:#8FA0B3 !important; }
.landing__sub em, .landing__title em{ color:#2E9BFF !important; font-style:italic; }
.lcard{
  background:linear-gradient(160deg,#12233B,#0D1B2E) !important;
  border:1px solid rgba(46,155,255,.28) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.5) !important;
}
.lcard__title{ color:#EAF2FB !important; }
.lcard__title::before,.lcard__title::after{ background:#2E9BFF !important; }
.lcard__icon,.lcard__icon--svg{ color:#2E9BFF !important; }
.lcard__leaves{ color:#2E9BFF !important; opacity:.10 !important; }

/* Catnav + chips */
.catnav{ background-color:rgba(10,22,38,.94) !important; background-image:none !important; border-bottom:1px solid rgba(143,160,179,.16) !important; }
.chip{ color:#9FC6EF !important; border-color:rgba(143,160,179,.30) !important; background:transparent !important; }
.chip:hover{ border-color:#2E9BFF !important; color:#EAF2FB !important; }
.chip.is-active{ background:#2E9BFF !important; color:#06101F !important; border-color:#2E9BFF !important; box-shadow:0 4px 14px rgba(46,155,255,.35) !important; }

/* Secciones */
.section{ background-color:#0A1626 !important; }
.section--alt{ background-color:#0C1A2E !important; background-image:none !important; }
.section--feature{
  background:
    radial-gradient(ellipse at top, rgba(46,155,255,.14), transparent 60%),
    linear-gradient(135deg,#0F2036 0%,#0A1626 100%) !important;
  color:#EAF2FB !important;
}
.section__kicker{ color:#2E9BFF !important; }
.section--feature .section__kicker{ color:#7CC0FF !important; }
.section__head h2{ color:#EAF2FB !important; }
.section--feature .section__head h2{ color:#EAF2FB !important; }
.section__head p{ color:#8FA0B3 !important; }
.section--feature .section__head p{ color:rgba(234,242,251,.8) !important; }
.section__head em{ color:#2E9BFF !important; }

/* Cards */
.card{ color:#EAF2FB !important; border-bottom-color:rgba(143,160,179,.16) !important; }
.section--feature .card{ border-bottom-color:rgba(143,160,179,.18) !important; }
.card__title{ color:#EAF2FB !important; }
.section--feature .card__title{ color:#EAF2FB !important; }
.card__sub{ color:#8FA0B3 !important; }
.card__desc{ color:#9AA9BA !important; }
.card__price{ color:#2E9BFF !important; }
.card__dots{ border-bottom:1px dotted rgba(143,160,179,.4) !important; }
.card--photo .card__photo{ box-shadow:0 10px 30px rgba(0,0,0,.5) !important; }

/* Tags */
.tag{ background:rgba(143,160,179,.12) !important; border:1px solid rgba(143,160,179,.28) !important; color:#B9C6D6 !important; }
.tag--star{ background:rgba(46,155,255,.16) !important; border-color:rgba(46,155,255,.4) !important; color:#7CC0FF !important; }
.tag--hot{ background:rgba(10,107,224,.18) !important; border-color:rgba(10,107,224,.45) !important; color:#7CC0FF !important; }

/* Notas / footer / misc */
.liquor-note__warn{ color:#8FA0B3 !important; }
.footer{ background:#08111F !important; color:#EAF2FB !important; }
.footer__inner, .footer h3, .footer__brand h3{ color:#EAF2FB !important; }
.footer__est,.footer__since,.footer__pr,.footer__warn{ color:#8FA0B3 !important; }
.footer__links a{ color:#9FC6EF !important; }
.footer em, .footer strong em{ color:#2E9BFF !important; }
.back-to-top{ background:#2E9BFF !important; color:#06101F !important; }

/* ===== Fondo LISO (sin textura piedra/líneas) — pedido del cliente ===== */
body{
  background-image:
    radial-gradient(ellipse at 50% -8%, rgba(46,155,255,.10), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(10,107,224,.08), transparent 60%) !important;
}
.section,.section--alt,.section--feature,.landing,.catnav,.footer,.intro{ background-image:none !important; }
.section--feature{ background:linear-gradient(135deg,#0F2036 0%,#0A1626 100%) !important; }
.landing{ background:linear-gradient(180deg,#0A1626 0%,#0C1A2E 100%) !important; }

/* ===== TIPOGRAFÍA NUEVA · Archivo (display) + Inter (cuerpo) — todo el menú ===== */
:root{ --serif:'Archivo',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif; }
body{ font-family:'Inter',system-ui,sans-serif !important; }
.intro__brand,.landing__title,.lcard__title,.section__head h2,.card__title,.card__price,
.landing__kicker,.section__kicker,.footer__brand h3,.promo__star{
  font-family:'Archivo',system-ui,sans-serif !important;
  font-style:normal !important;
}
.intro__brand{ font-weight:900 !important; letter-spacing:-.02em !important; }
.intro__tag,.landing__sub{ font-family:'Inter',system-ui,sans-serif !important; font-style:normal !important; }
.landing__title{ font-weight:800 !important; letter-spacing:-.02em !important; }
.lcard__title{
  font-weight:800 !important; font-size:clamp(30px,6.5vw,52px) !important;
  letter-spacing:-.02em !important; line-height:1.05 !important;
  padding-bottom:8px !important; text-shadow:none !important;
}
.lcard__title::before{ display:none !important; }
.section__head h2{ font-weight:800 !important; letter-spacing:-.02em !important; }
.card__title{ font-weight:700 !important; font-size:17px !important; letter-spacing:-.01em !important; }
.card__price{ font-weight:700 !important; }
.card__sub{ font-family:'Inter',system-ui,sans-serif !important; font-style:normal !important; font-size:12.5px !important; color:#8FA0B3 !important; }
.footer__brand h3{ font-weight:800 !important; }

/* ===== VIDEO en la landing ===== */
.landing{ position:relative; overflow:hidden; }
.landing__video{ position:absolute; inset:0; z-index:0; }
.landing__video video{ width:100%; height:100%; object-fit:cover; }
.landing__video::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,22,38,.60) 0%, rgba(10,22,38,.42) 45%, rgba(10,22,38,.88) 100%); }
.landing__header,.landing__cards{ position:relative; z-index:2; }
.lcard{ background:linear-gradient(160deg, rgba(18,35,59,.88), rgba(13,27,46,.88)) !important; backdrop-filter:blur(3px); }
/* lcards sin columna de hojas (se eliminaron los .lcard__leaves) */
.lcard{ grid-template-columns:1fr 96px !important; }
.lcard__title{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }

/* ===== PORTADA estilo Clandestino · video a pantalla completa ===== */
.landing.hero{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:16px 20px 30px;
  background:#0A1626 !important;
}
.landing__video::after{
  background:linear-gradient(180deg, rgba(10,22,38,.42) 0%, rgba(10,22,38,.10) 38%, rgba(10,22,38,.30) 68%, rgba(10,22,38,.90) 100%) !important;
}
.hero__top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.hero__brand{
  font-family:'Archivo',sans-serif; font-weight:900; font-size:24px; letter-spacing:.01em;
  color:#fff; text-decoration:none; display:flex; align-items:baseline; gap:2px;
}
.hero__brand em{ font-family:'Caveat',cursive; font-style:normal; font-weight:700; font-size:26px; color:#2E9BFF; margin-left:2px; }
.hero__dot{ width:8px; height:8px; border-radius:50%; background:#2E9BFF; margin-left:6px; align-self:center; }
.hero__call{
  display:flex; flex-direction:column; align-items:center; gap:0;
  background:#2E9BFF; color:#06101F; text-decoration:none;
  border-radius:999px; padding:8px 18px;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:14px; line-height:1.2;
  box-shadow:0 6px 20px rgba(46,155,255,.35);
}
.hero__call span{ font-size:9px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; opacity:.75; }
.hero__body{ position:relative; z-index:2; padding-bottom:2vh; }
.hero__kicker{
  display:flex; align-items:center; gap:12px;
  font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:.3em;
  color:#9FC6EF; text-transform:uppercase; margin:0 0 10px;
}
.hero__dash{ width:36px; height:2px; background:#2E9BFF; flex:0 0 auto; }
.hero__title{
  font-family:'Archivo',sans-serif; font-weight:900; text-transform:uppercase;
  color:#fff; font-size:clamp(50px,12.5vw,120px); line-height:.92; letter-spacing:-.02em;
  margin:0; max-width:11ch;
}
.hero__title em{
  display:block; font-family:'Caveat',cursive; font-style:normal; font-weight:700;
  text-transform:none; color:#2E9BFF; font-size:.52em; line-height:1; margin:.08em 0;
  letter-spacing:0;
}
.hero__go{
  display:inline-block; margin-top:26px; color:#fff; text-decoration:none;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  border-bottom:2px solid #2E9BFF; padding-bottom:6px;
}

/* ===== PORTADA v2 · centrada / cinemática (reemplaza el estilo póster) ===== */
.landing.hero{ justify-content:center; align-items:center; text-align:center; padding:24px; }
.hero__center{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.hero__line{ width:1px; height:48px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.8)); margin-bottom:18px; }
.hero__over{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.42em; text-transform:uppercase; color:#BFD9F5; margin:0 0 6px;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.hero__name{
  font-family:'Archivo',sans-serif; font-weight:800; color:#fff;
  font-size:clamp(58px,15vw,150px); line-height:.98; letter-spacing:-.03em;
  margin:0; text-shadow:0 6px 40px rgba(0,0,0,.45);
}
.hero__tagline{
  font-family:'Inter',sans-serif; font-size:clamp(14px,3.6vw,17px); font-weight:400;
  color:rgba(234,242,251,.85); margin:14px 0 0; text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.hero__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
.hero__btn{
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-radius:999px; padding:14px 28px; transition:transform .2s ease, background .2s ease;
}
.hero__btn--solid{ background:#fff; color:#0A1626; }
.hero__btn--solid:hover{ transform:translateY(-2px); }
.hero__btn--ghost{ border:1.5px solid rgba(255,255,255,.55); color:#fff; }
.hero__btn--ghost:hover{ border-color:#fff; }
.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  color:#fff; opacity:.8; animation:heroBounce 2.2s ease-in-out infinite;
}
@keyframes heroBounce{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
@media (prefers-reduced-motion:reduce){ .hero__scroll{animation:none} }
.landing__video::after{
  background:linear-gradient(180deg, rgba(10,22,38,.35) 0%, rgba(10,22,38,.28) 45%, rgba(10,22,38,.62) 100%) !important;
}

/* ===== ACENTO POR SECCIÓN · más color y contraste sobre el navy ===== */
#sec-aperitivos{ --sec:#FFA94D; }   /* naranja */
#sec-carnes{ --sec:#FA5252; }       /* rojo asado */
#sec-mofongos{ --sec:#FCC419; }     /* dorado */
#sec-mariscos{ --sec:#22D3EE; }     /* cian */
#sec-aves{ --sec:#94D82D; }         /* lima */
#sec-pastas{ --sec:#F06595; }       /* rosa */
#sec-complementos{ --sec:#69DB7C; } /* verde */
#sec-postres{ --sec:#DA77F2; }      /* lila */
#sec-kids{ --sec:#4DABF7; }         /* azul claro */
#sec-cocteles{ --sec:#9775FA; }     /* violeta */

.section__kicker{ color:var(--sec,#2E9BFF) !important; }
.section .card__price{ color:var(--sec,#2E9BFF) !important; }
.section .card__dots{ border-bottom-color:color-mix(in srgb, var(--sec,#8FA0B3) 45%, transparent) !important; }
.section .tag--star,.section .tag--hot{
  background:color-mix(in srgb, var(--sec,#2E9BFF) 16%, transparent) !important;
  border-color:color-mix(in srgb, var(--sec,#2E9BFF) 45%, transparent) !important;
  color:var(--sec,#7CC0FF) !important;
}
.section.is-highlighted{ box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--sec,#2E9BFF) 45%, transparent); }

/* chips del nav con el color de su categoría al estar activos */
.chip[data-cat="aperitivos"].is-active{ background:#FFA94D !important; border-color:#FFA94D !important; color:#06101F !important; box-shadow:0 4px 14px rgba(255,169,77,.35) !important; }
.chip[data-cat="carnes"].is-active{ background:#FA5252 !important; border-color:#FA5252 !important; color:#fff !important; box-shadow:0 4px 14px rgba(250,82,82,.35) !important; }
.chip[data-cat="mofongos"].is-active{ background:#FCC419 !important; border-color:#FCC419 !important; color:#06101F !important; box-shadow:0 4px 14px rgba(252,196,25,.35) !important; }
.chip[data-cat="mariscos"].is-active{ background:#22D3EE !important; border-color:#22D3EE !important; color:#06101F !important; box-shadow:0 4px 14px rgba(34,211,238,.35) !important; }
.chip[data-cat="aves"].is-active{ background:#94D82D !important; border-color:#94D82D !important; color:#06101F !important; box-shadow:0 4px 14px rgba(148,216,45,.35) !important; }
.chip[data-cat="pastas"].is-active{ background:#F06595 !important; border-color:#F06595 !important; color:#fff !important; box-shadow:0 4px 14px rgba(240,101,149,.35) !important; }
.chip[data-cat="complementos"].is-active{ background:#69DB7C !important; border-color:#69DB7C !important; color:#06101F !important; box-shadow:0 4px 14px rgba(105,219,124,.35) !important; }
.chip[data-cat="postres"].is-active{ background:#DA77F2 !important; border-color:#DA77F2 !important; color:#06101F !important; box-shadow:0 4px 14px rgba(218,119,242,.35) !important; }
.chip[data-cat="kids"].is-active{ background:#4DABF7 !important; border-color:#4DABF7 !important; color:#06101F !important; box-shadow:0 4px 14px rgba(77,171,247,.35) !important; }
.chip[data-cat="cocteles"].is-active{ background:#9775FA !important; border-color:#9775FA !important; color:#fff !important; box-shadow:0 4px 14px rgba(151,117,250,.35) !important; }

/* ===== Fix contraste (pedido) ===== */
/* Carnes: precio en blanco (el rojo no se leía) */
#sec-carnes .card__price{ color:#fff !important; }
#sec-carnes .card__dots{ border-bottom-color:rgba(255,255,255,.35) !important; }
/* Descripciones (placeholder gris) → blanco en todo el menú */
.card__desc,.section .card__desc{ color:#EAF2FB !important; }

/* ===== PORTADA-INTRO · cover fijo que se levanta (cortina) hacia la carta ===== */
.landing.hero{
  position:fixed; inset:0; z-index:300;
  transition:transform 1s cubic-bezier(.75,0,.2,1), opacity .9s ease;
  will-change:transform;
}
.landing.hero.is-lifting{ transform:translateY(-100%); opacity:.4; }
body.cover-lock{ overflow:hidden; }
.hero__autobar{
  width:150px; height:2px; margin:26px auto 0; border-radius:2px;
  background:rgba(255,255,255,.22); overflow:hidden;
}
.hero__autobar span{ display:block; height:100%; width:0; background:#fff; transition:width 2s linear; }
@media (prefers-reduced-motion:reduce){ .landing.hero{ transition:none } }

/* ===== POP-UP PROMOCIÓN ===== */
body.promo-lock{ overflow:hidden; }
.promo{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:20px; }
.promo[hidden]{ display:none; }
.promo__backdrop{ position:absolute; inset:0; background:rgba(6,12,22,.78); backdrop-filter:blur(4px); opacity:0; transition:opacity .35s ease; }
.promo.is-open .promo__backdrop{ opacity:1; }
.promo__card{
  position:relative; z-index:2; width:min(90vw, 400px); max-height:90vh;
  display:flex; flex-direction:column; align-items:center;
  transform:translateY(18px) scale(.96); opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.promo.is-open .promo__card{ transform:none; opacity:1; }
.promo__img{ display:block; width:100%; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.6); border:1px solid rgba(46,155,255,.35); }
.promo__img img{ display:block; width:100%; height:auto; }
.promo__x{
  position:absolute; top:-14px; right:-14px; z-index:3;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:#0A1626; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.5); transition:transform .2s ease;
}
.promo__x:hover{ transform:scale(1.08) rotate(90deg); }
.promo__btn{
  margin-top:16px; border:none; cursor:pointer;
  background:#2E9BFF; color:#06101F; border-radius:999px; padding:13px 30px;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 6px 20px rgba(46,155,255,.4); transition:transform .2s ease;
}
.promo__btn:hover{ transform:translateY(-2px); }
@media (max-width:400px){ .promo__x{ top:-10px; right:-6px; width:36px; height:36px; } }

/* ===== Fix X del promo (no se corte) + subtítulos placeholder en blanco ===== */
.promo__x{ top:10px !important; right:10px !important; box-shadow:0 4px 16px rgba(0,0,0,.65) !important; }
.card__sub{ color:#EAF2FB !important; }

/* ===== Fix tarjeta con foto: fondo oscuro (era crema de Sevilla, no se leía) ===== */
.card--photo{
  background:#0F2036 !important;
  border:1px solid rgba(46,155,255,.30) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.5) !important;
}
.section--feature .card--photo{
  background:#0F2036 !important;
  border-color:rgba(46,155,255,.30) !important;
}

/* Ocultar el glifo de play nativo de iOS sobre el video de portada */
.landing__video video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; }
.landing__video video::-webkit-media-controls{ display:none !important; }

/* ===== Poster animado de respaldo (si iOS bloquea el video) ===== */
.landing__video .vposter{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none; transition:opacity .4s ease; z-index:1;
}
.landing__video video{ position:relative; }
.hero.video-stuck .vposter{ opacity:1; animation:kenburns 18s ease-in-out infinite alternate; }

/* ===== Fondos un punto más claros (solo fondos) ===== */
body{ background-color:#10233C !important; }
.section{ background-color:#10233C !important; }
.section--alt{ background-color:#152B4A !important; }
.section--feature{ background:linear-gradient(135deg,#173253 0%,#10233C 100%) !important; }
.card--photo, .section--feature .card--photo{ background:#173253 !important; }
.catnav{ background-color:rgba(16,35,60,.94) !important; }
.footer{ background:#0D1C30 !important; }
.landing.hero{ background:#10233C !important; }

/* ===== Fondos otro punto más claros (v57) — solo fondos ===== */
body{ background-color:#17314F !important; }
.section{ background-color:#17314F !important; }
.section--alt{ background-color:#1E3C60 !important; }
.section--feature{ background:linear-gradient(135deg,#234469 0%,#17314F 100%) !important; }
.card--photo, .section--feature .card--photo{ background:#234469 !important; }
.catnav{ background-color:rgba(23,49,79,.94) !important; }
.footer{ background:#122A44 !important; }
.landing.hero{ background:#17314F !important; }

/* ===== Fondos otro punto más claros (v58) — solo fondos ===== */
body{ background-color:#1E3D62 !important; }
.section{ background-color:#1E3D62 !important; }
.section--alt{ background-color:#264A72 !important; }
.section--feature{ background:linear-gradient(135deg,#2B527D 0%,#1E3D62 100%) !important; }
.card--photo, .section--feature .card--photo{ background:#2B527D !important; }
.catnav{ background-color:rgba(30,61,98,.94) !important; }
.footer{ background:#173252 !important; }
.landing.hero{ background:#1E3D62 !important; }

/* =====================================================================
   RIQUEZA VISUAL (v59) — tarjetas con panel + acento de color por sección
   ===================================================================== */

/* Grid: separación pareja entre tarjetas */
.grid{ gap:16px !important; }
@media (max-width:760px){ .grid{ gap:12px !important; } }

/* Cada plato = tarjeta sutil con borde de color de su sección */
.card:not(.card--photo){
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-left:3px solid var(--sec,#2E9BFF) !important;
  border-radius:14px !important;
  padding:15px 17px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.18) !important;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}
.card:not(.card--photo):hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.08) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.32) !important;
}
/* Favoritos (★) resaltados en dorado */
.card:not(.card--photo):has(.tag--star){
  border-left-color:#FFD43B !important;
  background:rgba(255,212,59,.07) !important;
}
/* Foto-tarjetas también con acento lateral */
.card--photo{ border-left:4px solid var(--sec,#2E9BFF) !important; }

/* Encabezados de sección más ricos: número en chip + subrayado de color */
.menu{ counter-reset:secnum; }
.section{ counter-increment:secnum; }
.section__kicker{ display:inline-flex !important; align-items:center; gap:9px; }
.section__kicker::before{
  content:counter(secnum,decimal-leading-zero);
  background:var(--sec,#2E9BFF); color:#0B1B2E;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:12px;
  padding:3px 9px; border-radius:7px; letter-spacing:.5px;
}
.section__head h2{ position:relative; display:inline-block; }
.section__head h2::after{
  content:""; display:block; height:4px; width:70px; border-radius:4px;
  margin-top:12px; background:var(--sec,#2E9BFF);
  box-shadow:0 0 18px color-mix(in srgb, var(--sec,#2E9BFF) 55%, transparent);
}
.section__head--center h2::after{ margin-left:auto; margin-right:auto; }

/* ===== Fondos aún más claros (v60) ===== */
body, .section{ background-color:#244A73 !important; }
.section--alt{ background-color:#2C5885 !important; }
.section--feature{ background:linear-gradient(135deg,#33638F 0%,#244A73 100%) !important; }
.card--photo, .section--feature .card--photo{ background:#33638F !important; }
.catnav{ background-color:rgba(36,74,115,.94) !important; }
.footer{ background:#1D3E63 !important; }
.landing.hero{ background:#244A73 !important; }

/* ===== Portada/Hero del menú ===== */
.menuhero{ position:relative; min-height:44vh; display:flex; align-items:flex-end; overflow:hidden; }
.menuhero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.menuhero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,28,48,.30) 0%, rgba(15,28,48,.12) 40%, rgba(36,74,115,.98) 100%); }
.menuhero__inner{ position:relative; z-index:2; width:100%; max-width:1100px; margin:0 auto; padding:0 24px 34px; text-align:center; }
.menuhero__kicker{ font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:#CFE3F8; font-weight:600; text-shadow:0 1px 10px rgba(0,0,0,.5); }
.menuhero__title{ font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(50px,13vw,104px); color:#fff; line-height:.94; letter-spacing:-.02em; margin:8px 0 0; text-shadow:0 6px 34px rgba(0,0,0,.5); }
.menuhero__sub{ font-family:'Inter',sans-serif; color:rgba(234,242,251,.9); margin-top:12px; font-size:15px; text-shadow:0 1px 10px rgba(0,0,0,.5); }

/* =====================================================================
   TEXTURA DE FONDO (v61) — lavado de color por sección + trama de puntos
   ===================================================================== */
.section:not(.section--feature){
  background-image:
    radial-gradient(150% 75% at 50% -18%, color-mix(in srgb, var(--sec,#2E9BFF) 26%, transparent), transparent 62%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px) !important;
  background-size:100% 100%, 24px 24px !important;
  background-repeat:no-repeat, repeat !important;
  background-attachment:scroll, fixed !important;
}
.section--feature{
  background-image:
    radial-gradient(150% 80% at 50% -10%, color-mix(in srgb, var(--sec,#2E9BFF) 34%, transparent), transparent 60%),
    linear-gradient(135deg,#33638F 0%,#244A73 100%),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.6px) !important;
  background-size:100% 100%, 100% 100%, 24px 24px !important;
  background-repeat:no-repeat, no-repeat, repeat !important;
}
/* Halo suave detrás del título de cada sección */
.section__head{ position:relative; }
.section__head::before{
  content:""; position:absolute; left:-6px; top:-30px;
  width:220px; height:150px; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, var(--sec,#2E9BFF), transparent 72%);
  opacity:.20; filter:blur(6px);
}
.section__head--center::before{ left:50%; transform:translateX(-50%); }
.section__head > *{ position:relative; z-index:1; }

/* ============================================================
   JUEGO DE LOS NENES — tarjeta que lleva a motorita.html
   ============================================================ */
.kidsgame{
  display:flex; align-items:center; gap:18px; margin:26px auto 0; padding:20px 22px;
  max-width:900px; text-decoration:none; cursor:pointer;
  background:linear-gradient(160deg,#12233B,#0D1B2E);
  border:1px solid rgba(77,171,247,.45); border-radius:18px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.kidsgame:hover{ border-color:#4DABF7; transform:translateY(-2px); box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 30px rgba(77,171,247,.15); }
.kidsgame__moto{ font-size:40px; line-height:1; flex:none; filter:drop-shadow(0 4px 14px rgba(77,171,247,.4)); }
.kidsgame__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.kidsgame__kicker{ font-family:'Archivo',sans-serif; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#8FA0B3; }
.kidsgame__title{ font-family:'Archivo',sans-serif; font-weight:900; text-transform:uppercase; font-size:22px; line-height:1.1; color:#EAF2FB; letter-spacing:.01em; }
.kidsgame__title em{ font-family:'Caveat',cursive; font-style:normal; font-weight:700; text-transform:none; font-size:28px; color:#4DABF7; }
.kidsgame__desc{ font-family:'Inter',sans-serif; font-size:13.5px; font-weight:300; color:#8FA0B3; }
.kidsgame__cta{ margin-left:auto; flex:none; font-family:'Archivo',sans-serif; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#06101F; background:linear-gradient(180deg,#7CC0FF,#4DABF7); border-radius:999px; padding:11px 18px; white-space:nowrap; box-shadow:0 6px 18px rgba(77,171,247,.3); }
@media (max-width:620px){
  .kidsgame{ flex-wrap:wrap; }
  .kidsgame__cta{ margin-left:0; }
}

/* ============================================================
   JUEGO DE LOS NENES — banner encima del pop-up de promoción
   (primer elemento de .promo__card; padding-right deja sitio a la X)
   ============================================================ */
.promo__game{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:12px 12px 12px 14px; margin-bottom:12px; text-decoration:none;
  background:linear-gradient(160deg,#12233B,#0D1B2E);
  border:1px solid rgba(77,171,247,.5); border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  transition:border-color .25s, transform .25s;
}
.promo__game:hover{ border-color:#4DABF7; transform:translateY(-2px); }
.promo__game-ico{ font-size:24px; line-height:1; flex:none; filter:drop-shadow(0 3px 10px rgba(77,171,247,.4)); }
.promo__game-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; text-align:left; flex:1; }
.promo__game-txt small{ font-family:'Archivo',sans-serif; font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8FA0B3; white-space:nowrap; }
.promo__game-txt b{ font-family:'Archivo',sans-serif; font-weight:900; text-transform:uppercase; font-size:12px; color:#EAF2FB; line-height:1.15; white-space:nowrap; }
.promo__game-txt b em{ font-family:'Caveat',cursive; font-style:normal; font-weight:700; text-transform:none; font-size:16px; color:#4DABF7; }
.promo__game-go{ flex:none; font-family:'Archivo',sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#06101F; background:linear-gradient(180deg,#7CC0FF,#4DABF7); border-radius:999px; padding:8px 11px; white-space:nowrap; box-shadow:0 5px 14px rgba(77,171,247,.35); }

/* ===== Colores de las secciones nuevas (menú actualizado) ===== */
#sec-sampler{ --sec:#FF8787; }    /* coral */
#sec-ahumados{ --sec:#E8863C; }   /* ámbar ahumado */
#sec-paellas{ --sec:#FCC419; }    /* dorado paella */
.chip[data-cat="sampler"].is-active{ background:#FF8787 !important; border-color:#FF8787 !important; color:#3A0E0E !important; box-shadow:0 4px 14px rgba(255,135,135,.35) !important; }
.chip[data-cat="ahumados"].is-active{ background:#E8863C !important; border-color:#E8863C !important; color:#2A1606 !important; box-shadow:0 4px 14px rgba(232,134,60,.35) !important; }
.chip[data-cat="paellas"].is-active{ background:#FCC419 !important; border-color:#FCC419 !important; color:#2A2405 !important; box-shadow:0 4px 14px rgba(252,196,25,.35) !important; }

/* ===== Pop-up de bienvenida: tarjeta ancha para banner horizontal ===== */
.promo__card--wide{ box-sizing:border-box !important; width:min(92vw, 560px) !important; padding:14px !important; }

/* ===== Animación del pop-up: churrasco a la parrilla con llamas (reemplaza la foto) ===== */
.promo__img--grill{ position:relative; aspect-ratio:16/9; background:#0a0603; }
.grillscene{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.flame{
  transform-box: fill-box;
  transform-origin: center bottom;
  animation-name: flameFlicker;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes flameFlicker{
  0%   { transform: scale(var(--s,1)) scaleY(1)    translateX(0)    rotate(0deg); }
  25%  { transform: scale(var(--s,1)) scaleY(1.14) translateX(3px)  rotate(-3deg); }
  50%  { transform: scale(var(--s,1)) scaleY(.9)   translateX(-3px) rotate(3deg); }
  75%  { transform: scale(var(--s,1)) scaleY(1.08) translateX(2px)  rotate(-2deg); }
  100% { transform: scale(var(--s,1)) scaleY(1)    translateX(0)    rotate(0deg); }
}

.ember{
  animation-name: emberRise;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
}
@keyframes emberRise{
  0%   { transform: translate(0,0); opacity:0; }
  12%  { opacity:1; }
  100% { transform: translate(var(--dx,10px), -190px); opacity:0; }
}

.grillscene__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px 16px;
  display:flex; flex-direction:column; gap:1px;
  background:linear-gradient(180deg, transparent, rgba(5,3,1,.72) 60%);
  pointer-events:none;
}
.grillscene__kicker{
  font-family:'Inter',sans-serif; font-weight:600; font-size:12px; letter-spacing:.06em;
  color:#FFD8A8; text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.grillscene__title{
  font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(22px,6vw,32px); line-height:1.05;
  color:#fff; text-shadow:0 3px 14px rgba(0,0,0,.7); letter-spacing:-.01em;
}
@media (prefers-reduced-motion: reduce){
  .flame, .ember{ animation:none; }
}

/* ===== Postres (color sección) + notas al pie DACO ===== */
#sec-postres{ --sec:#DA77F2; }
.chip[data-cat="postres"].is-active{ background:#DA77F2 !important; border-color:#DA77F2 !important; color:#06101F !important; box-shadow:0 4px 14px rgba(218,119,242,.35) !important; }
.footer__notes{ max-width:1100px; margin:8px auto 0; padding:16px 4px 0; border-top:1px solid rgba(255,255,255,.12); }
.footer__notes p{ font-size:11.5px; line-height:1.5; color:rgba(234,242,251,.6); margin:0 0 6px; }

/* ===== Sección Bebidas: subtítulos de sub-sección + color ===== */
#sec-bebidas{ --sec:#FCC419; }
.chip[data-cat="bebidas"].is-active{ background:#FCC419 !important; border-color:#FCC419 !important; color:#06101F !important; box-shadow:0 4px 14px rgba(252,196,25,.35) !important; }
.subhead{
  grid-column:1 / -1;
  font-family:'Archivo',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  font-size:14px; color:var(--sec,#FCC419);
  margin:24px 0 2px; padding-bottom:8px;
  border-bottom:2px solid color-mix(in srgb, var(--sec,#FCC419) 45%, transparent);
}
.grid .subhead:first-child{ margin-top:2px; }

/* ===== Gate de Bebidas: ocultar la carta hasta tocar ENTRAR ===== */
#sec-bebidas { position: relative; }
#sec-bebidas.gate-closed > .section__head,
#sec-bebidas.gate-closed > .grid--drinks { display: none !important; }

/* ===== Botón "Menú de Cócteles" animado (dorado, a la derecha) ===== */
.menu-topbar{ max-width:1100px; margin:-26px auto 0; padding:0 clamp(16px,4vw,24px) 12px; display:flex; justify-content:flex-end; position:relative; z-index:6; }
.cocktail-btn{ display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:14px; letter-spacing:.02em;
  color:#06101F; background:linear-gradient(180deg,#5CB4FF,#2E9BFF);
  border-radius:999px; padding:13px 24px; box-shadow:0 8px 22px rgba(46,155,255,.5);
  animation:ccPulse 2.4s ease-in-out infinite; position:relative; overflow:hidden; }
.cocktail-btn:hover{ transform:translateY(-2px) scale(1.03); }
.cocktail-btn .cc-ico{ display:inline-block; animation:ccShake 2.8s ease-in-out infinite; }
.cocktail-btn .cc-arrow{ transition:transform .25s; font-weight:900; }
.cocktail-btn:hover .cc-arrow{ transform:translateX(4px); }
.cocktail-btn::after{ content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg); animation:ccShine 3.2s ease-in-out infinite; }
@keyframes ccPulse{ 0%,100%{box-shadow:0 8px 22px rgba(46,155,255,.5);} 50%{box-shadow:0 10px 34px rgba(46,155,255,.85);} }
@keyframes ccShake{ 0%,86%,100%{transform:rotate(0);} 90%{transform:rotate(-18deg);} 94%{transform:rotate(15deg);} }
@keyframes ccShine{ 0%{left:-60%;} 55%,100%{left:130%;} }
@media (prefers-reduced-motion:reduce){ .cocktail-btn,.cocktail-btn .cc-ico,.cocktail-btn::after{ animation:none; } }
@media (max-width:560px){ .cocktail-btn{ width:100%; justify-content:center; } }

/* ============================================================
   BEBIDAS · pestañas, notas, salsas desplegables, precios
   (pedido del cliente — jul 2026)
   ============================================================ */

/* Subtítulo de la barra: resaltado y con la advertencia latente */
.drink-lead{ font-size:15px !important; color:#B9C6D6 !important; font-weight:500 !important; }
.drink-lead__warn{
  display:inline-block; margin-top:6px;
  color:#7CC0FF !important; font-weight:700;
  letter-spacing:.02em;
}
@media (min-width:640px){ .drink-lead__warn{ display:inline; margin-left:6px; } }

/* Precios de bebidas un punto más grandes */
.grid--drinks .card__price{ font-size:16px !important; font-weight:800 !important; }
@media (max-width:560px){ .grid--drinks .card__price{ font-size:15px !important; } }

/* Nota aclaratoria dentro de una sub-sección (mojitos, margaritas) */
.drink-note{
  grid-column:1 / -1;
  margin:2px 0 12px;
  font-size:16px; font-style:normal; font-weight:700;
  color:#FFB74D;
  letter-spacing:.01em;
  display:flex; align-items:center; gap:9px;
}
.drink-note::before{ content:""; width:18px; height:2px; border-radius:2px; background:#F39C12; flex:0 0 auto; }
@media (max-width:560px){ .drink-note{ font-size:15px; } }

/* Pestañas del menú de bebidas */
.drink-nav{
  position:sticky; top:50px; z-index:12;
  margin:4px 0 20px;
  background:linear-gradient(180deg, rgba(18,37,61,.92), rgba(12,27,47,.92));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(46,155,255,.22);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(124,192,255,.10);
  overflow:hidden;
}
#sec-bebidas.gate-closed .drink-nav{ display:none; }
.drink-nav__inner{
  display:flex; gap:9px; overflow-x:auto; scrollbar-width:none;
  padding:11px 14px; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.drink-nav__inner::-webkit-scrollbar{ display:none; }
.drink-chip{
  flex:0 0 auto; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  color:#AFC7E4; white-space:nowrap;
  padding:8px 15px; border-radius:999px;
  background:rgba(46,155,255,.06);
  border:1px solid rgba(124,160,200,.26);
  transition:all .22s cubic-bezier(.16,1,.3,1);
}
.drink-chip:hover{ border-color:#2E9BFF; color:#EAF2FB; background:rgba(46,155,255,.14); }
.drink-chip.is-active{
  background:linear-gradient(180deg,#3AA5FF,#2E7FE0); color:#06101F;
  border-color:#5CB4FF; font-weight:700;
  box-shadow:0 4px 16px rgba(46,155,255,.45), inset 0 1px 0 rgba(255,255,255,.25);
}

/* Tarjeta de Salsas — desplegable */
.card--sauces{ display:block; }
.sauce-toggle{
  width:100%; display:flex; align-items:center; gap:8px;
  background:transparent; border:0; cursor:pointer; text-align:left;
  padding:0; color:inherit; font:inherit;
}
.sauce-toggle .card__title{ color:#EAF2FB; }
.sauce-toggle .card__price{ color:#2E9BFF; font-family:var(--display); font-weight:800; }
.sauce-caret{ color:#7CC0FF; font-size:12px; transition:transform .25s ease; flex:0 0 auto; }
.sauce-toggle[aria-expanded="true"] .sauce-caret{ transform:rotate(180deg); }
.sauce-panel{ margin-top:10px; animation:sauceIn .25s ease; }
@keyframes sauceIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:translateY(0);} }
.sauce-list{ list-style:none; margin:0; padding:0; }
.sauce-list li{
  display:flex; align-items:baseline; gap:8px;
  padding:6px 0; border-bottom:1px dashed rgba(143,160,179,.18);
  font-size:13.5px; color:#C6D2DF;
}
.sauce-list li:last-child{ border-bottom:0; }
.sauce-name{ flex:0 0 auto; }
.sauce-dots{ flex:1 1 auto; border-bottom:1px dotted rgba(143,160,179,.35); transform:translateY(-3px); }
.sauce-price{ flex:0 0 auto; font-weight:700; color:#7CC0FF; }

/* ============================================================
   FIX · columnas que se cortaban en móvil (columna derecha)
   minmax(0,1fr) permite que las celdas encojan bajo su
   contenido en vez de desbordar y quedar recortadas.
   ============================================================ */
.menu .grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.menu .grid > .card,
.menu .grid > .card--sauces{ min-width:0; }
.card__head{ min-width:0; }
.card__title{ min-width:0; overflow-wrap:break-word; }
/* la tarjeta con foto sigue ocupando todo el ancho */
.menu .grid > .card--photo{ grid-column:1 / -1; }

/* ============================================================
   BOTÓN DE IDIOMA (Español ↔ English) · flotante abajo-izq
   ============================================================ */
.lang-toggle{
  position:absolute; right:14px; top:12px; z-index:60;
  display:inline-flex; align-items:center;
  font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:.2px;
  color:#EAF2FB; cursor:pointer;
  padding:10px 15px; border-radius:999px;
  background:linear-gradient(180deg, rgba(18,37,61,.95), rgba(11,25,44,.95));
  border:1px solid rgba(46,155,255,.45);
  box-shadow:0 8px 22px rgba(0,0,0,.40), inset 0 1px 0 rgba(124,192,255,.15);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lang-toggle:hover{ transform:translateY(-2px); border-color:#2E9BFF; box-shadow:0 12px 28px rgba(46,155,255,.35); }
.lang-toggle:active{ transform:translateY(0); }
.lang-toggle svg{ opacity:.9; }
@media (max-width:560px){ .lang-toggle{ right:10px; top:10px; font-size:11.5px; padding:8px 12px; } }

/* ============================================================
   BEBIDAS · PANTALLA SELECTORA DE CATEGORÍAS
   Estilo tarjeta elegante (layout Sevilla) en ADN de Otra Cosa
   ============================================================ */
.drink-picker{ grid-column:1 / -1; }
.drink-picker__hint{
  text-align:center; font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:#7CC0FF; margin:2px 0 18px;
}
.drink-picker__grid{ display:flex; flex-direction:column; gap:12px; max-width:780px; margin:0 auto; }
.drink-cat-card{
  display:flex; align-items:center; gap:16px; width:100%; cursor:pointer; text-align:left;
  padding:16px 20px; border-radius:16px; position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(20,39,64,.96), rgba(13,27,46,.96));
  border:1px solid rgba(46,155,255,.20);
  box-shadow:0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(124,192,255,.06);
  transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease;
}
.drink-cat-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,#2E9BFF,#0A6BE0); opacity:.55; transition:opacity .25s ease;
}
.drink-cat-card:hover{ transform:translateX(4px); border-color:#2E9BFF; box-shadow:0 14px 32px rgba(46,155,255,.28); }
.drink-cat-card:hover::before{ opacity:1; }
.dcc-flourish{ flex:0 0 auto; color:#C9A24C; opacity:.9; }
.dcc-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.dcc-title{ font-family:var(--display); font-weight:800; font-size:clamp(22px,6.2vw,30px); letter-spacing:-.01em; color:#EAF2FB; line-height:1.06; }
.dcc-count{ font-family:var(--sans); font-size:12px; color:#8FA0B3; }
.dcc-ico{ margin-left:auto; flex:0 0 auto; color:#2E9BFF; }

/* Vista de una categoría seleccionada */
.drink-catview{ grid-column:1 / -1; }
.drink-back{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:700; color:#9FC6EF;
  background:rgba(46,155,255,.08); border:1px solid rgba(124,160,200,.30);
  padding:9px 16px; border-radius:999px; margin-bottom:20px; transition:all .2s ease;
}
.drink-back:hover{ border-color:#2E9BFF; color:#EAF2FB; background:rgba(46,155,255,.16); transform:translateX(-3px); }
.drink-catview__head{
  display:flex; align-items:center; gap:14px; margin:0 auto 18px; max-width:820px;
  padding-bottom:14px; border-bottom:1px solid rgba(143,160,179,.18);
}
.dcv-flourish{ flex:0 0 auto; color:#C9A24C; opacity:.9; }
.dcv-title{ font-family:var(--display); font-weight:800; font-size:clamp(26px,7vw,40px); letter-spacing:-.02em; color:#EAF2FB; }
.drink-catview__head .dcv-ico{ margin-left:auto; flex:0 0 auto; color:#2E9BFF; }
.drink-catview__list{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px; max-width:820px; margin:0 auto;
}
.drink-catview__list .drink-note{ grid-column:1 / -1; }
/* Vinos: una sola columna (nombres largos + precio copa/botella) */
.drink-catview__list--wide{ grid-template-columns:1fr; max-width:600px; }
.drink-catview__list--wide .card__price{ white-space:nowrap; }
.drink-catview__list .card__price{ white-space:nowrap; }
@media (max-width:560px){
  .drink-cat-card{ padding:14px 15px; gap:12px; }
  .dcc-flourish svg{ width:22px; height:36px; }
  .drink-catview__list{ gap:10px; }
}

/* Secciones con un solo plato (ej. Sampler): ocupa el ancho completo */
.menu .grid > .card:only-child{ grid-column:1 / -1; }

/* Sampler · descripción más grande (pedido del cliente) */
#sec-sampler .card__desc{ font-size:17px !important; line-height:1.55 !important; margin-top:8px !important; color:#EAF2FB !important; }
@media (max-width:560px){ #sec-sampler .card__desc{ font-size:16px !important; } }

/* ============================================================
   TARJETAS DE PLATOS · letra más grande para mejor lectura
   (pedido del cliente — +~20% sobre los valores REALES actuales:
    título 17px, sub 12.5px, precio 18px/13px, desc 13.5px)
   Solo tarjetas de platos — NO toca h2/kicker de sección.
   Bloque al final para ganar a los overrides !important previos.
   ============================================================ */
/* Base / escritorio */
.card__title{ font-size:21px !important; }
.card__price{ font-size:21px !important; }
.card__sub{ font-size:15px !important; }
.card__desc{ font-size:16px !important; }

/* Móvil (≤720px) */
@media (max-width:720px){
  .card__title{ font-size:19px !important; }
  .card__price{ font-size:15px !important; }
  .card__sub{ font-size:14px !important; }
  .card--keepdesc .card__desc{ font-size:14px !important; }
  .card--photo .card__title{ font-size:19px !important; }
  .card--photo .card__price{ font-size:19px !important; }
  .card--photo .card__sub{ font-size:14.5px !important; }
  .card--photo .card__desc{ font-size:15px !important; }
}

/* Móvil pequeño (≤380px) */
@media (max-width:380px){
  .card__title{ font-size:18px !important; }
  .card__price{ font-size:14px !important; }
  .card__sub{ font-size:13.5px !important; }
  .card--photo .card__title{ font-size:18px !important; }
  .card--photo .card__price{ font-size:18px !important; }
}

/* Móvil: dar más ancho al título en tarjetas normales (el precio es corto)
   para reducir cortes a media palabra con la letra más grande */
@media (max-width:720px){
  .card:not(.card--photo) .card__title{ max-width: calc(100% - 34px) !important; }
}

/* ============================================================
   ESPECIALIDAD DEL CHEF · bloque destacado que rota semanal
   + botón fino a la carta de cócteles (encima)
   ============================================================ */
/* Botón fino/estético a cócteles */
.chef-topbar{ max-width:1100px; margin:0 auto; padding:8px clamp(16px,4vw,26px) 4px; display:flex; justify-content:center; }
.cocktail-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#7CC0FF; text-decoration:none;
  padding:7px 20px; border-radius:999px;
  border:1px solid rgba(46,155,255,.35);
  background:rgba(46,155,255,.06);
  backdrop-filter:blur(4px);
  transition:all .25s ease;
}
.cocktail-link:hover{ background:rgba(46,155,255,.16); color:#EAF2FB; border-color:#2E9BFF; }
.cocktail-link .cl-arrow{ transition:transform .25s ease; }
.cocktail-link:hover .cl-arrow{ transform:translateX(4px); }

/* Bloque de la especialidad del chef */
.chef-special{
  max-width:1100px; margin:6px auto 10px; padding:22px clamp(16px,4vw,26px) 26px;
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(243,156,18,.16), transparent 60%),
    linear-gradient(160deg,#12233B,#0C1A2E);
  border:1px solid rgba(243,156,18,.38);
  border-radius:18px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.chef-special::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#F39C12,#FFB74D,#F39C12); }
.chef-special__head{ text-align:center; margin-bottom:18px; }
.chef-special__kicker{ display:inline-block; font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:4px; text-transform:uppercase; color:#FFB74D; margin-bottom:8px; }
.chef-special__title{ font-family:var(--display); font-weight:800; font-size:clamp(26px,6vw,40px);
  color:#EAF2FB !important; letter-spacing:-.02em; margin:0; line-height:1.05; }
.chef-special__title::before{ content:"👨‍🍳"; margin-right:12px; }
.chef-special__sub{ color:#8FA0B3; font-size:14px; margin-top:8px; }
.grid--chef{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.grid--chef .card__price{ color:#FFB74D !important; }
@media (max-width:560px){ .grid--chef{ grid-template-columns:1fr; } .chef-special{ margin:6px 12px 10px; } }
/* Estado "próximamente" cuando aún no hay platos del chef */
.chef-soon{ grid-column:1/-1; text-align:center; padding:26px 20px;
  border:1px dashed rgba(243,156,18,.42); border-radius:14px;
  background:rgba(243,156,18,.05); }
.chef-soon__badge{ display:inline-block; font-family:var(--sans); font-size:11px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:#0C1A2E;
  background:linear-gradient(90deg,#F39C12,#FFB74D); padding:6px 16px; border-radius:999px; }
.chef-soon__text{ color:#B7C4D4; font-size:15px; line-height:1.5; margin:14px auto 0; max-width:520px; }