/* ═══════════════════════════════════════════════
   GRAN PATRÓN TAQUERÍA — Los Patrones del Taco
   ═══════════════════════════════════════════════ */

:root {
  --negro-comal: #15110D;
  --negro-panel: #1D1712;
  --dorado-patron: #C9A227;
  --dorado-claro: #F0D586;
  --rojo-guajillo: #9E2B25;
  --masa-cruda: #F3E6C9;
  --verde-tomatillo: #6E7B3C;
  --naranja-adobo: #B5542D;
  --texto-claro: #F3ECDD;
  --texto-oscuro: #1A1510;
  --texto-suave: rgba(243, 236, 221, 0.72);
  --linea-oro: rgba(201, 162, 39, 0.22);
  --font-display: 'Playfair Display', serif;
  --font-script: 'Cormorant Garamond', serif;
  --font-body: 'Work Sans', sans-serif;
  --header-h: 72px;
}

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

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--negro-comal);
  color: var(--texto-claro);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--dorado-patron); color: var(--texto-oscuro); }

/* ── LOADER ─────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 200;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201, 162, 39, 0.08), transparent 60%),
    var(--negro-comal);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-brand {
  width: 148px; height: 148px; border-radius: 50%;
  border: 1px solid var(--linea-oro);
  animation: loaderPulse 2s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.25); }
  50% { transform: scale(1.04); box-shadow: 0 0 42px 6px rgba(201, 162, 39, 0.18); }
}
.loader-track {
  width: min(260px, 60vw); height: 2px;
  background: rgba(201, 162, 39, 0.18);
  overflow: hidden;
}
#loader-bar {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--dorado-patron), var(--dorado-claro));
  transition: width 0.25s ease;
}
#loader-percent {
  font-size: 0.72rem; letter-spacing: 0.35em;
  color: var(--dorado-patron);
}

/* ── HEADER ─────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 48px);
  transition: background 0.45s ease, box-shadow 0.45s ease, backdrop-filter 0.45s ease;
}
.site-header.solid {
  background: rgba(21, 17, 13, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--linea-oro), 0 8px 30px rgba(0, 0, 0, 0.35);
}
.header-brand { display: flex; align-items: center; gap: 12px; }
.header-brand img {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.45);
  box-shadow: 0 0 18px rgba(201, 162, 39, 0.25);
}
.header-brand span {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: 0.04em;
  color: var(--dorado-claro);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.header-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.header-nav > a:not(.btn-whatsapp-pill) {
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texto-claro);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  position: relative;
  padding: 6px 0;
}
.header-nav > a:not(.btn-whatsapp-pill)::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0%; height: 1px; background: var(--dorado-claro);
  transition: width 0.3s ease;
}
.header-nav > a:not(.btn-whatsapp-pill):hover::after { width: 100%; }
.btn-whatsapp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--dorado-patron); color: var(--texto-oscuro);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 20px; border-radius: 999px;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-whatsapp-pill:hover {
  background: var(--dorado-claro); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 162, 39, 0.35);
}
.nav-toggle {
  display: none;
  background: none; border: none;
  width: 42px; height: 42px;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--dorado-claro);
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* ── CANVAS + SCRIM ─────────────────────────── */
/* Aceleración por hardware: forzamos una capa de composición en la GPU
   para que el scrubbing del taco no genere micro-tirones en móvil. */
.canvas-wrap {
  position: fixed; inset: 0; z-index: 1;
  transform: translate3d(0, 0, 0);
  perspective: 1000px;
  backface-visibility: hidden;
  /* Sin background-image de respaldo: durante un parpadeo a mitad de la
     animación se veía el taco CERRADO del frame 1 debajo del abierto
     (el famoso "alma"). El frame locking del JS retiene el último frame
     pintado en el propio canvas; aquí solo queda un color neutro idéntico
     al fondo de los frames por si el canvas aún no ha pintado nunca. */
  background-color: #e9e7e4;
}
#canvas {
  width: 100%; height: 100%; display: block;
  /* SIN `filter` en runtime: un saturate/contrast sobre un canvas que repinta
     a 60fps re-ejecuta el filtro en CADA frame (costo de compositor por frame
     en gama baja). El boost cosmético se puede hornear en los propios frames
     sin costo. Aquí solo dejamos la promoción a capa GPU. */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}
#hero-scrim {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 28%, rgba(21, 17, 13, 0.4) 100%),
    linear-gradient(180deg, rgba(21, 17, 13, 0.55) 0%, rgba(21, 17, 13, 0.16) 30%, rgba(21, 17, 13, 0.06) 55%, rgba(21, 17, 13, 0.5) 100%);
}

/* ── HERO OVERLAY ───────────────────────────── */
#hero-overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 5vw;
  pointer-events: none;
}
#hero-overlay .btn { pointer-events: auto; }
.hero-glow {
  position: absolute; top: 50%; left: 50%;
  width: min(900px, 90vw); height: min(520px, 60vh);
  transform: translate(-50%, -52%);
  background: radial-gradient(ellipse, rgba(201, 162, 39, 0.22), rgba(158, 43, 37, 0.08) 45%, transparent 70%);
  filter: blur(10px);
  opacity: 0;
}
body.loaded .hero-glow { animation: softIn 2s ease 0.9s forwards; }
.hero-word, .hero-ornament {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px);
}
/* Ojo: los ✦ ornamentos también son <span>, así que contamos con nth-child
   (posiciones 2-5) — nth-of-type dejaba a "TACO" sin animación (invisible). */
body.loaded .hero-kicker .hero-word:nth-child(2) { animation: wordUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.30s forwards; }
body.loaded .hero-kicker .hero-word:nth-child(3) { animation: wordUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.43s forwards; }
body.loaded .hero-kicker .hero-word:nth-child(4) { animation: wordUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.56s forwards; }
body.loaded .hero-kicker .hero-word:nth-child(5) { animation: wordUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.69s forwards; }
body.loaded .hero-kicker .hero-ornament { animation: wordUp 0.9s ease 0.85s forwards; }
body.loaded .hero-title .hero-word:nth-child(1) { animation: wordUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards; }
body.loaded .hero-title .hero-word:nth-child(2) { animation: wordUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.72s forwards; }
body.loaded .hero-script { animation: softIn 1.2s ease 1.25s forwards; }
body.loaded .hero-ctas { animation: softIn 1.2s ease 1.5s forwards; }
body.loaded .hero-scroll-hint { animation: softIn 1.2s ease 2s forwards; }
@keyframes wordUp { to { opacity: 1; transform: translateY(0); } }
@keyframes softIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-glow { transform: translate(-50%, -52%) !important; }
@keyframes softIn2 { to { opacity: 1; } }
body.loaded .hero-glow { animation-name: softIn2; }
.hero-kicker {
  position: relative;
  font-size: clamp(0.72rem, 1.4vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.52em; text-indent: 0.52em;
  color: var(--dorado-claro);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.8), 0 0 60px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.4rem;
}
.hero-ornament { color: var(--dorado-patron); font-size: 0.8em; }
.hero-title {
  position: relative;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.4rem, 13.5vw, 13.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--masa-cruda); /* fallback si background-clip no aplica */
  filter: drop-shadow(0 3px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 46px rgba(0, 0, 0, 0.35));
}
/* El gradiente va POR PALABRA: background-clip:text en el padre se rompe
   cuando los hijos tienen transform (animación wordUp) en Chrome. */
.hero-title .hero-word {
  background: linear-gradient(180deg, #FFFDF5 8%, var(--masa-cruda) 45%, var(--dorado-claro) 72%, var(--dorado-patron) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-script {
  position: relative;
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  color: var(--dorado-claro);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.8), 0 0 60px rgba(0, 0, 0, 0.5);
  margin-top: 1.2rem;
  opacity: 0; transform: translateY(24px);
}
.hero-ctas {
  position: relative;
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  margin-top: 2.6rem;
  opacity: 0; transform: translateY(24px);
}
.hero-scroll-hint {
  position: absolute; bottom: 34px; left: 50%;
  width: 26px; height: 42px; margin-left: -13px;
  border: 1.5px solid rgba(240, 213, 134, 0.7);
  border-radius: 14px;
  opacity: 0;
}
.hero-scroll-hint span {
  position: absolute; top: 8px; left: 50%;
  width: 3px; height: 8px; margin-left: -1.5px;
  border-radius: 2px; background: var(--dorado-claro);
  animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* Zona de scroll del hero (más corta = animación más rápida) */
/* Alto extra: la animacion termina antes y el ultimo frame (slogan) queda
   anclado/congelado mientras el usuario sigue bajando un poco mas. */
#hero-scroll { height: 210vh; position: relative; z-index: 3; }

/* ── SLOGAN SOBRE EL TACO ABIERTO ───────────── */
/* Aparece cuando la animación llega a los frames finales; su opacidad la
   maneja el rAF loop del hero (js/app.js), no ScrollTrigger. */
#hero-slogan {
  position: fixed; left: 50%; bottom: clamp(52px, 11vh, 120px); z-index: 5;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  will-change: opacity, transform;
}
#hero-slogan::before {
  content: ""; position: absolute; inset: -34px -70px;
  background: radial-gradient(ellipse, rgba(21, 17, 13, 0.55), transparent 70%);
  filter: blur(8px);
  z-index: -1;
}
/* Resplandor dorado pulsante detrás del slogan (solo opacity/transform:
   se composita en GPU, no cuesta nada en móvil). */
#hero-slogan::after {
  content: ""; position: absolute; inset: -55px -110px; z-index: -1;
  background: radial-gradient(ellipse at 50% 58%, rgba(240, 213, 134, 0.4), rgba(201, 162, 39, 0.14) 45%, transparent 72%);
  animation: sloganGlow 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sloganGlow {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.08); }
}
.slogan-kicker {
  display: block;
  font-size: clamp(0.62rem, 1.1vw, 0.8rem); font-weight: 600;
  letter-spacing: 0.5em; text-indent: 0.5em; text-transform: uppercase;
  color: var(--masa-cruda);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
  margin-bottom: 8px;
}
.slogan-text {
  font-family: var(--font-script); font-style: italic; font-weight: 700;
  font-size: clamp(2.3rem, 6.2vw, 4.4rem);
  line-height: 1.1;
  color: var(--dorado-claro);
  /* Sombra para contraste + halo dorado resplandeciente sobre el texto */
  text-shadow:
    0 2px 26px rgba(0, 0, 0, 0.92),
    0 0 22px rgba(240, 213, 134, 0.6),
    0 0 55px rgba(201, 162, 39, 0.5),
    0 0 110px rgba(201, 162, 39, 0.35);
}

/* ── BOTONES ────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 15px 32px; border-radius: 999px;
  border: none;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.btn-gold {
  background: linear-gradient(120deg, var(--dorado-patron), #E0BC46);
  color: var(--texto-oscuro);
  box-shadow: 0 8px 30px rgba(201, 162, 39, 0.3), 0 0 0 1px rgba(240, 213, 134, 0.35) inset;
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 14px 42px rgba(201, 162, 39, 0.45); }
.btn-outline {
  background: rgba(21, 17, 13, 0.25);
  color: var(--masa-cruda);
  box-shadow: inset 0 0 0 1.5px rgba(240, 213, 134, 0.75);
  backdrop-filter: blur(4px);
}
.btn-outline:hover { background: rgba(240, 213, 134, 0.14); transform: translateY(-3px); }

/* ── LAYOUT DE SECCIONES ────────────────────── */
.site-main {
  position: relative; z-index: 10;
  background: var(--negro-comal);
  box-shadow: 0 -40px 80px rgba(21, 17, 13, 0.9);
}
.section { padding: clamp(90px, 12vh, 150px) clamp(20px, 6vw, 80px); position: relative; }
.section-head { text-align: center; margin-bottom: clamp(40px, 6vh, 70px); position: relative; }
.section-head::before {
  content: ""; position: absolute; top: -60px; left: 50%;
  width: min(560px, 80vw); height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(201, 162, 39, 0.13), transparent 70%);
  pointer-events: none;
}
.section-label {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.42em; text-indent: 0.42em; text-transform: uppercase;
  color: var(--dorado-patron);
  margin-bottom: 18px;
  position: relative;
}
.section-label::before { content: "✿ "; color: var(--dorado-patron); }
.section-label::after { content: " ✿"; color: var(--dorado-patron); }
.section-heading {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.05;
  color: var(--masa-cruda);
  position: relative;
}
.section-script {
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  color: var(--dorado-claro);
  margin-top: 10px;
  position: relative;
}
.section-body {
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  color: var(--texto-suave);
  max-width: 56ch;
}

/* ── MENÚ ───────────────────────────────────── */
.section-menu {
  max-width: 1280px; margin: 0 auto;
  background:
    radial-gradient(ellipse 900px 500px at 8% 12%, rgba(158, 43, 37, 0.09), transparent 65%),
    radial-gradient(ellipse 800px 460px at 94% 45%, rgba(110, 123, 60, 0.08), transparent 65%);
}
.menu-block { position: relative; }
.menu-block::before,
.menu-block::after {
  content: "✿";
  position: absolute;
  top: calc(100% - 8px);
  font-size: 0.72rem;
  color: rgba(201, 162, 39, 0.22);
  pointer-events: none;
  z-index: 1;
}
.menu-block::before { left: 2px; transform: rotate(-12deg); }
.menu-block::after { right: 2px; content: "☠"; font-size: 0.68rem; opacity: 0.18; transform: rotate(8deg); }
.menu-tabs-wrap {
  position: relative;
}
.menu-tabs-wrap::before,
.menu-tabs-wrap::after {
  content: "☠";
  position: absolute;
  top: 50%;
  font-size: 0.62rem;
  color: rgba(201, 162, 39, 0.16);
  pointer-events: none;
  z-index: 2;
  transform: translateY(-50%);
}
.menu-tabs-wrap::before { left: -2px; opacity: 0.14; }
.menu-tabs-wrap::after { right: -2px; content: "✿"; opacity: 0.2; }
.menu-block-head {
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--linea-oro);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.menu-block-icon { font-size: 1.7rem; transform: translateY(3px); }
.menu-block-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: var(--dorado-claro);
}
.menu-block-sub { color: var(--texto-suave); font-size: 0.95rem; font-style: italic; }
.menu-divider {
  text-align: center;
  margin: clamp(60px, 9vh, 100px) auto;
  position: relative;
}
.menu-divider::before, .menu-divider::after {
  content: ""; position: absolute; top: 50%;
  width: calc(50% - 90px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--linea-oro));
}
.menu-divider::before { left: 0; }
.menu-divider::after { right: 0; transform: scaleX(-1); }
.menu-divider span { color: var(--dorado-patron); font-size: 0.9rem; letter-spacing: 6px; }

/* La Barra: panel con tinte verde agave para separarla de la cocina */
.menu-barra {
  background:
    radial-gradient(ellipse 700px 400px at 85% 0%, rgba(110, 123, 60, 0.16), transparent 65%),
    linear-gradient(165deg, rgba(110, 123, 60, 0.10), rgba(21, 17, 13, 0) 55%);
  border: 1px solid rgba(110, 123, 60, 0.3);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 44px);
}
.menu-barra .menu-block-head { border-color: rgba(110, 123, 60, 0.4); }
.menu-barra .menu-block-title { color: #C9D18B; }
.menu-barra .menu-tab.active { background: var(--verde-tomatillo); border-color: var(--verde-tomatillo); color: #F5F2E4; }
.menu-barra .menu-tab:hover { border-color: #9BAA55; color: #C9D18B; }

.menu-tabs {
  display: flex; gap: 10px; justify-content: flex-start;
  overflow-x: auto; padding: 4px 4px 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tab {
  flex: 0 0 auto;
  background: rgba(29, 23, 18, 0.6); border: 1px solid var(--linea-oro);
  color: var(--texto-suave);
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 999px;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.menu-tab:hover { border-color: var(--dorado-patron); color: var(--dorado-claro); }
.menu-tab.active {
  background: var(--dorado-patron); border-color: var(--dorado-patron);
  color: var(--texto-oscuro); font-weight: 600;
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.3);
}
.menu-tab.premium-tab {
  border-color: rgba(240, 213, 134, 0.55);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.2) inset, 0 0 18px rgba(201, 162, 39, 0.12);
}
.menu-tab.premium-tab::after {
  content: " ✦";
  font-size: 0.72em;
  color: var(--dorado-claro);
  opacity: 0.85;
}
.menu-barra .menu-tab.premium-tab.active {
  background: linear-gradient(120deg, #1E3A5F, #0F2744);
  border-color: rgba(147, 197, 253, 0.65);
  color: #E8F0FF;
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.35), 0 0 20px rgba(96, 165, 250, 0.2);
}
.menu-tagline {
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--dorado-claro);
  margin: 18px 0 26px;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
  grid-auto-flow: dense;
}
.menu-card {
  background: linear-gradient(170deg, #221B14, var(--negro-panel) 60%);
  border: 1px solid rgba(201, 162, 39, 0.16);
  border-radius: 16px;
  padding: 14px;
  display: flex; gap: 16px; align-items: stretch;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.menu-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 39, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(201, 162, 39, 0.08);
}
.menu-card-thumb {
  width: 104px; height: 104px; flex-shrink: 0;
  align-self: center;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(201, 162, 39, 0.25);
  transition: transform 0.4s ease;
}
.menu-card:hover .menu-card-thumb { transform: scale(1.05); }
.menu-card-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.menu-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.menu-card-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem; line-height: 1.2;
  color: var(--texto-claro);
}
.menu-card-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.08rem; color: var(--dorado-claro);
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(201, 162, 39, 0.35);
}
.menu-card-desc { font-size: 0.83rem; line-height: 1.45; color: var(--texto-suave); flex: 1; }
.menu-card-add {
  align-self: flex-end;
  margin-top: auto;
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--dorado-patron);
  color: var(--dorado-patron);
  font-size: 1.35rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
}
.menu-card-add:hover { background: var(--dorado-patron); color: var(--texto-oscuro); transform: scale(1.08); box-shadow: 0 0 18px rgba(201, 162, 39, 0.4); }
.menu-card-add.added { animation: addPop 0.4s ease; background: var(--dorado-patron); color: var(--texto-oscuro); }
@keyframes addPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.menu-card.featured {
  border-color: rgba(201, 162, 39, 0.55);
  background: linear-gradient(160deg, #2A200F, var(--negro-panel));
  box-shadow: 0 0 30px rgba(201, 162, 39, 0.07) inset;
}
.menu-card.featured .menu-card-name::after {
  content: " ★"; color: var(--dorado-patron); font-size: 0.95rem;
}
/* Licores: vitrina premium */
.licores-grid { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); }
.menu-barra .licores-grid {
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(30, 58, 138, 0.28), transparent 65%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.15));
  border-radius: 18px;
  padding: 18px;
  border: 1px solid rgba(59, 130, 246, 0.22);
}
.licor-card {
  position: relative;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 240px 150px at 50% 0%, rgba(59, 130, 246, 0.18), transparent 70%),
    linear-gradient(175deg, #0F1B33, #0A1224 75%);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.licor-card::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 35%, rgba(240, 213, 134, 0.14) 50%, transparent 65%);
  transform: translateX(-110%);
  pointer-events: none;
}
.licor-card:hover::before { transition: transform 0.9s ease; transform: translateX(110%); }
.licor-card:hover {
  transform: translateY(-6px);
  border-color: rgba(147, 197, 253, 0.75);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(59, 130, 246, 0.25);
}
.licor-media {
  height: 235px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 180px 140px at 50% 65%, rgba(59, 130, 246, 0.35), transparent 70%),
    linear-gradient(180deg, #0B1A33, #06101F);
  border-bottom: 1px solid rgba(96, 165, 250, 0.3);
  padding: 16px;
}
.licor-media img {
  width: auto; height: 88%;
  max-width: 92%;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 32px rgba(96, 165, 250, 0.42))
    drop-shadow(0 0 14px rgba(147, 197, 253, 0.35));
  transition: transform 0.4s ease, filter 0.4s ease;
}
.licor-card:hover .licor-media img {
  transform: translateY(-4px) scale(1.03);
  filter:
    drop-shadow(0 16px 30px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 48px rgba(96, 165, 250, 0.55))
    drop-shadow(0 0 22px rgba(191, 219, 254, 0.4));
}
.licor-media:has(.licor-monogram) {
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 160px 120px at 50% 55%, rgba(201, 162, 39, 0.2), transparent 70%),
    linear-gradient(180deg, #241C12, #15110D);
}
.licor-monogram {
  font-size: 3.4rem;
  color: rgba(224, 188, 70, 0.75);
  text-shadow: 0 0 30px rgba(201, 162, 39, 0.5);
}
.licor-info {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 16px 16px;
  flex: 1;
}
.licor-tag {
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dorado-patron);
}
.licor-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; line-height: 1.25;
  color: var(--masa-cruda);
  flex: 1;
}
.licor-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.licor-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.14rem; color: var(--dorado-claro);
  text-shadow: 0 0 16px rgba(201, 162, 39, 0.4);
}
.licor-card .menu-card-add { margin-top: 0; }
.menu-note {
  margin-top: 26px;
  font-size: 0.85rem; color: var(--texto-suave);
  font-style: italic;
  text-align: center;
}
.menu-note:empty { display: none; }

/* ── NOSOTROS ───────────────────────────────── */
.section-nosotros { overflow: hidden; min-height: clamp(420px, 58vh, 620px); }
.nosotros-bg {
  position: absolute; inset: 0;
  overflow: hidden;
}
.nosotros-bg-sharp,
.nosotros-bg-blur {
  position: absolute; inset: 0;
  background: url("../assets/img/nosotros-patio.webp") center center / cover no-repeat;
}
.nosotros-bg-blur {
  filter: blur(18px) brightness(0.82);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.5) 62%, #000 85%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.5) 62%, #000 85%);
}
.nosotros-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(21, 17, 13, 0.12) 0%, rgba(21, 17, 13, 0.45) 55%, rgba(21, 17, 13, 0.82) 100%),
    linear-gradient(180deg, var(--negro-comal), rgba(21, 17, 13, 0.35) 30%, rgba(21, 17, 13, 0.35) 70%, var(--negro-comal));
}
.nosotros-inner {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  min-height: clamp(320px, 48vh, 520px);
  align-items: center;
  justify-items: end;
}
.nosotros-copy {
  max-width: min(520px, 92vw);
  text-align: right;
  padding: clamp(24px, 4vw, 40px);
}
.nosotros-copy .section-heading {
  margin-bottom: 0;
  text-shadow:
    0 4px 28px rgba(0, 0, 0, 0.75),
    0 0 60px rgba(21, 17, 13, 0.6);
}
.nosotros-copy .section-label { margin-bottom: 14px; }

/* ── MEME (cuadro colgado) ──────────────────── */
.section-meme {
  display: flex; flex-direction: column; align-items: center;
  padding-top: clamp(60px, 8vh, 100px);
  padding-bottom: clamp(100px, 12vh, 150px);
  background:
    radial-gradient(ellipse 600px 380px at 50% 45%, rgba(201, 162, 39, 0.08), transparent 70%);
}
.meme-frame {
  width: min(300px, 68vw);
  transform: rotate(-4deg);
  padding: 12px;
  background: linear-gradient(145deg, #3A2E1A, #241C10);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  position: relative;
}
.meme-frame::before {
  content: ""; position: absolute; top: -26px; left: 50%;
  width: 1px; height: 26px;
  background: rgba(201, 162, 39, 0.35);
}
.meme-frame img { border: 1px solid rgba(201, 162, 39, 0.2); }
.meme-caption {
  margin-top: 30px;
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: 1.25rem; color: var(--texto-suave);
}

/* ── INSTAGRAM (sección crema) ──────────────── */
.section-instagram {
  background: linear-gradient(180deg, var(--negro-comal) 0%, #6B5638 6%, var(--masa-cruda) 13%, var(--masa-cruda) 88%, #5C2320 100%);
  padding-top: clamp(120px, 15vh, 190px);
  padding-bottom: clamp(120px, 15vh, 180px);
}
.papel-picado {
  position: absolute; top: 42px; left: 0; right: 0;
  height: 74px;
  opacity: 0.95;
  filter: drop-shadow(0 6px 10px rgba(21, 17, 13, 0.25));
}
.papel-picado svg { width: 100%; height: 100%; }
.section-instagram .section-head::before {
  background: radial-gradient(ellipse, rgba(158, 43, 37, 0.1), transparent 70%);
}
.section-instagram .section-label { color: var(--rojo-guajillo); }
.section-instagram .section-label::before,
.section-instagram .section-label::after { color: var(--rojo-guajillo); }
.section-instagram .section-heading { color: var(--texto-oscuro); }
.section-instagram .section-script { color: var(--naranja-adobo); }

.ig-card {
  max-width: 640px; margin: 0 auto;
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(58, 40, 20, 0.35), 0 4px 16px rgba(58, 40, 20, 0.18);
  overflow: hidden;
  color: #1c1c1c;
}
.ig-header {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 22px 16px;
}
.ig-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  border: 3px solid #fff;
  outline: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(45deg, var(--dorado-patron), var(--rojo-guajillo), var(--naranja-adobo)) border-box;
  flex-shrink: 0;
}
.ig-id { flex: 1; min-width: 0; }
.ig-handle {
  font-weight: 600; font-size: 1.05rem;
  color: #111;
  margin-bottom: 6px;
}
.ig-bio { font-size: 0.82rem; line-height: 1.55; color: #333; }
.ig-follow {
  background: linear-gradient(120deg, var(--dorado-patron), #E0BC46);
  color: var(--texto-oscuro);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 9px 22px; border-radius: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}
.ig-follow:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201, 162, 39, 0.4); }
.ig-highlights {
  display: flex; gap: 18px;
  padding: 8px 22px 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ig-highlights::-webkit-scrollbar { display: none; }
.ig-highlights a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 0.72rem; color: #444;
  flex-shrink: 0;
}
.ig-ring {
  display: block;
  width: 62px; height: 62px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(45deg, var(--dorado-patron), var(--rojo-guajillo), var(--naranja-adobo));
}
.ig-ring img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  border-top: 1px solid #efefef;
}
.ig-post {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f4f4;
}
.ig-post img, .ig-post video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
}
.ig-post:hover img, .ig-post:hover video { transform: scale(1.06); filter: brightness(1.06); }
.ig-reel-icon {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  color: #fff;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
.ig-open {
  display: block;
  text-align: center;
  padding: 18px;
  font-size: 0.88rem; font-weight: 500;
  color: var(--rojo-guajillo);
  border-top: 1px solid #efefef;
  transition: background 0.3s ease;
}
.ig-open:hover { background: #FBF6EA; }

/* ── SALSAS ─────────────────────────────────── */
.section-salsas {
  background:
    radial-gradient(ellipse 800px 420px at 15% 8%, rgba(240, 213, 134, 0.10), transparent 60%),
    radial-gradient(ellipse 900px 500px at 88% 95%, rgba(21, 17, 13, 0.55), transparent 70%),
    linear-gradient(180deg, #5C2320 0%, #471815 45%, #2E100E 100%);
}
.section-salsas .section-head::before {
  background: radial-gradient(ellipse, rgba(240, 213, 134, 0.12), transparent 70%);
}
.salsa-scale {
  display: flex; align-items: center; gap: 16px;
  max-width: 620px;
  margin: 0 auto clamp(30px, 5vh, 48px);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(243, 236, 221, 0.85);
}
.salsa-scale-bar {
  flex: 1; height: 8px; border-radius: 6px;
  background: linear-gradient(90deg, #8FA653, #E0BC46, #C96B2D, #B3251C);
  box-shadow: 0 0 18px rgba(224, 188, 70, 0.25);
}
.salsas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: clamp(28px, 5vh, 48px);
}
.salsa-card {
  position: relative;
  overflow: visible;
  background: rgba(21, 17, 13, 0.45);
  border: 2px solid rgba(240, 213, 134, 0.2);
  border-radius: 18px;
  padding: 22px 24px;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.salsa-card-deco {
  position: absolute; inset: -3px;
  pointer-events: none;
  border-radius: 20px;
  opacity: 0.55;
}
.salsa-card.h1 .salsa-card-deco {
  border: 1px dashed rgba(143, 166, 83, 0.35);
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(143, 166, 83, 0.06) 10px 11px),
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(143, 166, 83, 0.06) 10px 11px);
}
.salsa-card.h2 .salsa-card-deco {
  border: 2px double rgba(224, 188, 70, 0.4);
  background:
    repeating-linear-gradient(45deg, rgba(224, 188, 70, 0.05) 0 4px, transparent 4px 12px);
}
.salsa-card.h3 .salsa-card-deco {
  border: 2px solid rgba(201, 107, 45, 0.55);
  box-shadow:
    inset 0 0 0 4px rgba(21, 17, 13, 0.85),
    inset 0 0 0 5px rgba(201, 107, 45, 0.35);
  background:
    repeating-linear-gradient(90deg, rgba(201, 107, 45, 0.12) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(0deg, rgba(201, 107, 45, 0.08) 0 2px, transparent 2px 10px);
}
.salsa-card.h3::after {
  content: "🌶";
  position: absolute; top: -10px; right: 14px;
  font-size: 0.9rem; opacity: 0.5;
}
.salsa-card.h4 .salsa-card-deco {
  border: 3px solid rgba(179, 37, 28, 0.75);
  box-shadow:
    inset 0 0 0 5px rgba(21, 17, 13, 0.9),
    inset 0 0 0 7px rgba(179, 37, 28, 0.45),
    0 0 24px rgba(179, 37, 28, 0.25);
  background:
    repeating-linear-gradient(45deg, rgba(179, 37, 28, 0.14) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-45deg, rgba(179, 37, 28, 0.1) 0 3px, transparent 3px 9px),
    radial-gradient(circle at 8% 12%, rgba(179, 37, 28, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 92% 88%, rgba(179, 37, 28, 0.35) 0 6px, transparent 7px);
  opacity: 0.9;
}
.salsa-card.h4::before {
  content: "☠";
  position: absolute; top: -12px; right: 12px;
  font-size: 1.1rem; opacity: 0.55;
  text-shadow: 0 0 12px rgba(179, 37, 28, 0.6);
  z-index: 2;
}
.salsa-card.h4::after {
  content: "🔥";
  position: absolute; bottom: -10px; left: 14px;
  font-size: 1rem; opacity: 0.55;
  z-index: 2;
}
.salsa-card.h1 {
  border-color: rgba(143, 166, 83, 0.28);
  background: linear-gradient(165deg, rgba(21, 17, 13, 0.55), rgba(30, 38, 18, 0.35));
}
.salsa-card.h2 {
  border-color: rgba(224, 188, 70, 0.35);
  background: linear-gradient(165deg, rgba(21, 17, 13, 0.5), rgba(48, 38, 14, 0.38));
}
.salsa-card.h3 {
  border-color: rgba(201, 107, 45, 0.5);
  background: linear-gradient(165deg, rgba(21, 17, 13, 0.48), rgba(58, 28, 12, 0.45));
  box-shadow: 0 0 24px rgba(201, 107, 45, 0.12);
}
.salsa-card.h4 {
  border-color: rgba(179, 37, 28, 0.7);
  background: linear-gradient(165deg, rgba(46, 12, 10, 0.85), rgba(21, 17, 13, 0.55));
  box-shadow: 0 0 36px rgba(179, 37, 28, 0.22), inset 0 0 40px rgba(179, 37, 28, 0.08);
}
.salsa-card:hover {
  transform: translateY(-6px) rotate(-0.4deg);
  border-color: rgba(240, 213, 134, 0.55);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}
.salsa-card.h4:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 52px rgba(179, 37, 28, 0.35), 0 0 48px rgba(179, 37, 28, 0.2);
}
.salsa-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.salsa-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; color: var(--masa-cruda);
}
.salsa-level {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  white-space: nowrap;
}
.salsa-level.h1 { background: rgba(143, 166, 83, 0.22); color: #C9D18B; border: 1px solid rgba(143, 166, 83, 0.5); }
.salsa-level.h2 { background: rgba(224, 188, 70, 0.16); color: var(--dorado-claro); border: 1px solid rgba(224, 188, 70, 0.5); }
.salsa-level.h3 { background: rgba(201, 107, 45, 0.2); color: #F0B384; border: 1px solid rgba(201, 107, 45, 0.55); }
.salsa-level.h4 { background: rgba(179, 37, 28, 0.28); color: #FF9C93; border: 1px solid rgba(179, 37, 28, 0.65); }
.salsa-flavor { font-size: 0.85rem; color: rgba(243, 236, 221, 0.65); font-style: italic; margin-bottom: 12px; }
.salsa-heat { display: flex; gap: 5px; }
.salsa-heat svg { width: 18px; height: 18px; }
.salsa-heat .chile-on { color: #E8543F; filter: drop-shadow(0 0 5px rgba(232, 84, 63, 0.5)); }
.salsa-card.h4 .salsa-heat .chile-on {
  color: #FF3B2E;
  filter: drop-shadow(0 0 8px rgba(255, 59, 46, 0.75));
  animation: chilePulse 1.4s ease-in-out infinite;
}
@keyframes chilePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.salsa-heat .chile-off { color: rgba(243, 236, 221, 0.18); }
.salsas-note {
  position: relative;
  z-index: 2;
  clear: both;
  text-align: center;
  margin-top: clamp(48px, 7vh, 72px);
  padding: 0 clamp(16px, 4vw, 32px);
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  line-height: 1.5;
  color: rgba(240, 213, 134, 0.9);
}

/* ── UBICACIÓN ──────────────────────────────── */
.section-ubicacion {
  overflow: hidden;
  background: linear-gradient(180deg, #2E100E 0%, var(--negro-comal) 22%);
}
.ubicacion-bg {
  position: absolute; inset: 0;
  background: url("../assets/img/ubicacion-patio.jpg") right 55% / cover no-repeat;
  opacity: 0.35;
}
.ubicacion-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--negro-comal) 35%, rgba(21, 17, 13, 0.72) 70%, rgba(21, 17, 13, 0.5)),
              linear-gradient(180deg, var(--negro-comal), transparent 25%, transparent 75%, var(--negro-comal));
}
.ubicacion-grid {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.05fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.ubicacion-card .section-heading { margin-bottom: 18px; }
.ubicacion-card .section-label { margin-bottom: 14px; }
.ubicacion-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.ubicacion-horario { margin-top: 26px; font-size: 0.88rem; color: var(--texto-suave); }
.ubicacion-horario a { color: var(--dorado-claro); border-bottom: 1px solid rgba(240, 213, 134, 0.4); }
.ubicacion-map {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(201, 162, 39, 0.08);
  background: var(--negro-panel);
}
.ubicacion-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* ── PEDIDO / CARRITO ───────────────────────── */
.section-pedido {
  max-width: 760px; margin: 0 auto;
  background:
    radial-gradient(ellipse 800px 480px at 50% 20%, rgba(110, 123, 60, 0.14), transparent 70%),
    linear-gradient(180deg, #1A2410 0%, #121A0C 45%, var(--negro-comal) 100%);
  border-top: 1px solid rgba(110, 123, 60, 0.35);
  border-bottom: 1px solid rgba(110, 123, 60, 0.25);
  border-radius: 0;
  padding-top: clamp(100px, 12vh, 140px);
  padding-bottom: clamp(100px, 12vh, 140px);
}
.pedido-panel {
  position: relative;
  background: linear-gradient(170deg, #1E2A14, #141E0E 55%);
  border: 1px solid rgba(143, 166, 83, 0.45);
  border-radius: 22px;
  padding: clamp(30px, 4.5vw, 48px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 44px rgba(110, 123, 60, 0.12);
}
.pedido-panel::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-radius: 15px;
  pointer-events: none;
}
.pedido-panel::after {
  content: "✿"; position: absolute; top: -15px; left: 50%;
  transform: translateX(-50%);
  background: var(--negro-comal);
  padding: 0 16px;
  color: var(--dorado-patron);
  font-size: 1.2rem;
  text-shadow: 0 0 18px rgba(201, 162, 39, 0.6);
}
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cart-head-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; color: var(--masa-cruda);
}
.cart-badge {
  background: rgba(201, 162, 39, 0.14);
  border: 1px solid var(--linea-oro);
  color: var(--dorado-claro);
  padding: 4px 14px; border-radius: 999px;
  font-size: 0.78rem; letter-spacing: 0.06em;
}
.cart-empty { text-align: center; }
.cart-empty p { color: var(--texto-suave); margin-bottom: 24px; font-size: 1.02rem; }
.cart-list { list-style: none; }
.cart-item {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 8px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.12);
  border-radius: 10px;
}
.cart-item-img {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(201, 162, 39, 0.3);
}
.cart-item-img-empty {
  display: grid; place-items: center;
  background: #241C12;
  color: var(--dorado-patron);
  font-size: 1.2rem;
}
.cart-item-name { flex: 1; font-size: 0.98rem; }
.cart-item-name small { display: block; color: var(--texto-suave); font-size: 0.78rem; }
.cart-qty { display: flex; align-items: center; gap: 10px; }
.cart-qty button {
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent; border: 1px solid var(--linea-oro);
  color: var(--dorado-claro); font-size: 1rem; line-height: 1;
  transition: all 0.25s ease;
}
.cart-qty button:hover { border-color: var(--dorado-patron); background: rgba(201, 162, 39, 0.12); }
.cart-qty b { min-width: 20px; text-align: center; font-weight: 600; }
.cart-item-sub {
  font-family: var(--font-display); font-weight: 700;
  color: var(--dorado-patron); min-width: 86px; text-align: right;
}
.cart-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px 0 6px;
  font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.cart-total-row strong {
  font-family: var(--font-display); font-size: 2rem;
  color: var(--dorado-patron); letter-spacing: 0;
  text-shadow: 0 0 20px rgba(201, 162, 39, 0.35);
}
.cart-note { font-size: 0.82rem; color: var(--texto-suave); font-style: italic; margin-bottom: 22px; }
.btn-send { width: 100%; padding: 18px; font-size: 0.95rem; }

/* Botón flotante */
/* El display de abajo pisa el atributo [hidden]; lo restauramos explícito
   para que el pill NO aparezca con el carrito vacío. */
.cart-pill[hidden] { display: none !important; }
.cart-pill {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 90;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, var(--dorado-patron) 0%, #E0BC46 45%, #F0D586 100%);
  color: var(--texto-oscuro);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 18px 34px;
  min-height: 58px;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(201, 162, 39, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: pillIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-pill:hover {
  transform: translateX(-50%) translateY(-4px) scale(1.02);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.65),
    0 0 44px rgba(201, 162, 39, 0.5);
}
@keyframes pillIn {
  from { opacity: 0; transform: translateX(-50%) translateY(30px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── FOOTER ─────────────────────────────────── */
.site-footer {
  position: relative; z-index: 10;
  background: linear-gradient(180deg, var(--negro-comal), #0E0B08 40%);
  border-top: 1px solid var(--linea-oro);
  text-align: center;
  padding: clamp(60px, 8vh, 90px) 20px 40px;
}
.footer-banner {
  width: min(420px, 80vw);
  margin: 0 auto 8px;
  border-radius: 12px;
}
.footer-script {
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: 1.4rem; color: var(--dorado-claro);
  margin-bottom: 28px;
}
.footer-links { display: flex; justify-content: center; gap: 30px; margin-bottom: 30px; }
.footer-links a {
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--texto-suave);
  transition: color 0.3s ease;
}
.footer-links a:hover { color: var(--dorado-claro); }
.footer-credits { font-size: 0.78rem; color: rgba(243, 236, 221, 0.4); }
.back-to-top {
  position: absolute; right: clamp(18px, 4vw, 44px); bottom: 40px;
  width: 46px; height: 46px; border-radius: 50%;
  background: transparent; border: 1px solid var(--linea-oro);
  color: var(--dorado-claro); font-size: 1.1rem;
  transition: all 0.3s ease;
}
.back-to-top:hover { background: var(--dorado-patron); color: var(--texto-oscuro); border-color: var(--dorado-patron); }

/* ── RED DE SEGURIDAD VISUAL (redes lentas) ─── */
/* Mientras una imagen baja por datos móviles, su contenedor muestra una
   base de color acorde a la sección: la página se siente sólida y diseñada
   desde el primer segundo, sin bloques vacíos. (Estático a propósito:
   cero costo de batería; la foto opaca lo cubre al llegar.) */
.menu-card-thumb,
.cart-item-img,
.nosotros-card img {
  background-color: #2A2117; /* madera oscura, a juego con las cards */
}
.ig-post,
.ig-post img,
.ig-post video,
.ig-ring img {
  background-color: #EFE9DC; /* hueso, a juego con la tarjeta clara de IG */
}
.footer-banner { background-color: #0E0B08; }
/* .licor-media ya trae su vitrina degradada clara como base; el mapa
   (.ubicacion-map) ya tiene panel oscuro propio. */

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 960px) {
  .nosotros-inner { grid-template-columns: 1fr; }
  .ubicacion-grid { grid-template-columns: 1fr; }
  .ubicacion-map iframe { height: 320px; }
}

@media (max-width: 768px) {
  :root { --header-h: 62px; }
  #hero-scroll { height: 175vh; }
  .nav-toggle { display: flex; }
  .header-nav {
    position: fixed; inset: 0;
    background: rgba(21, 17, 13, 0.97);
    flex-direction: column; justify-content: center; gap: 34px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  .header-nav.open { opacity: 1; visibility: visible; }
  .header-nav > a:not(.btn-whatsapp-pill) { font-size: 1.1rem; }
  .hero-ctas { flex-direction: column; align-items: center; gap: 12px; }
  .hero-ctas .btn { width: min(280px, 78vw); }
  .menu-card-thumb { width: 84px; height: 84px; }
  .licor-media { height: 200px; }
  .menu-barra { padding: 20px 14px; }
  .menu-tabs {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .papel-picado { top: 30px; height: 54px; }
  .ig-header { flex-wrap: wrap; padding: 18px 16px 12px; }
  .ig-avatar { width: 62px; height: 62px; }
  .ig-follow { order: 3; width: 100%; text-align: center; margin-top: 4px; }
  .ig-highlights { padding: 6px 16px 14px; gap: 14px; }
  .ig-ring { width: 54px; height: 54px; }
  .nosotros-copy { text-align: right; justify-self: end; }
  .ubicacion-card { text-align: center; }
  .ubicacion-ctas { justify-content: center; }
  .ubicacion-card .section-body { margin: 0 auto; }
  .cart-pill {
    left: 0; right: 0; bottom: 0;
    width: 100%; max-width: none;
    transform: none;
    border-radius: 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    font-size: 0.95rem;
    white-space: nowrap;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(201, 162, 39, 0.25);
    animation: pillInMobile 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cart-pill:hover { transform: none; }
  body:has(.cart-pill:not([hidden])) .site-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  @keyframes pillInMobile {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .footer-links { gap: 18px; flex-wrap: wrap; }
}

@media (max-width: 460px) {
  .menu-grid { grid-template-columns: 1fr; }
  .salsas-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── FALLBACK DE VISIBILIDAD (BLINDAJE DEL MENÚ) ─────────────────────
   Las animaciones de entrada (GSAP) ocultan elementos con opacity:0 inline
   y los revelan por ScrollTrigger. Si ese JS NO corre (GSAP ausente, navegador
   viejo, error temprano), <html> nunca recibe la clase .js-anim y aquí forzamos
   que TODO se vea de forma nativa e inmediata. Cuando el JS sí maneja las
   animaciones (html.js-anim), cedemos el control de opacidad a GSAP. */
html:not(.js-anim) [data-animation],
html:not(.js-anim) [data-animation] * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* El menú NUNCA debe quedar en display:none o visibility:hidden, con o sin JS. */
#menu,
.section-menu,
.menu-block,
.menu-tabs,
.menu-tagline,
.menu-grid,
.menu-card,
.licor-card,
.menu-note,
.menu-block-head {
  visibility: visible !important;
}

/* ── LIBERACIÓN GLOBAL DE COMPONENTES (FALLBACK ESTÁTICO) ────────────
   El JS añade body.animations-disabled cuando GSAP/ScrollTrigger no están
   disponibles o cuando el arranque falla. En ese caso mostramos TODA la
   página al 100%, estática, sin depender de ninguna animación: hero, textos,
   feed de Instagram, decoraciones y footer se ven de inmediato. */
body.animations-disabled [data-animation],
body.animations-disabled [data-animation] *,
body.animations-disabled .hero-glow,
body.animations-disabled .hero-kicker .hero-word,
body.animations-disabled .hero-title .hero-word,
body.animations-disabled .hero-kicker .hero-ornament,
body.animations-disabled .hero-script,
body.animations-disabled .hero-ctas,
body.animations-disabled .hero-scroll-hint,
body.animations-disabled .ig-card,
body.animations-disabled .ig-grid,
body.animations-disabled .ig-header,
body.animations-disabled .ig-highlights,
body.animations-disabled .ig-open,
body.animations-disabled .salsa-card,
body.animations-disabled .nosotros-card,
body.animations-disabled .meme-frame,
body.animations-disabled .meme-frame img,
body.animations-disabled .site-footer,
body.animations-disabled .site-footer * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
}