/* Dirección A, refinamiento visual B. Preview aislado, no Production.
   Sólo presentación: catálogo, motor, navegación y fotos originales intactos. */
:root {
  --art-gutter: clamp(1.5rem, 4vw, 3rem);
  --art-width: 70rem;
}

/* El marco aprobado es carbón #292724, nunca negro puro ni un nuevo color. */
.site-header, .splash, .hero, .contact, .nav-drawer {
  background-color: var(--approved-frame);
  color: var(--approved-frame-light);
}
.site-header__inner { max-width: 78rem; }
.nav-drawer__links a { border-bottom: 0; }

/* Texto y subrayado, como en los otros menús: sin cápsulas ni puntos.
   La sincronización sigue a cargo del módulo de navegación existente. */
.section-nav { border-bottom: 0; background: var(--jb-paper); }
.section-nav__inner { gap: .2rem; padding-inline: .75rem; }
.section-nav a {
  position: relative; padding-inline: .95rem; font-size: .82rem;
  border-radius: 0; background: transparent; color: var(--jb-ink);
  font-weight: 600; box-shadow: none; transition: color 180ms;
}
.section-nav a:hover, .section-nav a.is-active { color: var(--jb-teal); }
.section-nav a.is-active { background: transparent; font-weight: 600; box-shadow: none; }
.section-nav a::after {
  content: ''; position: absolute; inset: auto .95rem .25rem;
  height: 1px; background: currentColor; opacity: 0;
  transition: opacity 180ms;
}
.section-nav a.is-active::after { opacity: 1; }
.section-nav a:focus-visible { outline-offset: -3px; }

/* La fotografía da ambiente, no se estira sobre todo un monitor grande. */
.hero__identity { padding-inline: var(--art-gutter); padding-bottom: 2.5rem; gap: 1.35rem; }
.hero__wordmark-image { width: min(76vw, 19rem); filter: none; }
.hero__intro { font-size: 1rem; line-height: 1.75; max-width: 32ch; }

/* Papel continuo. El color está en la jerarquía y los controles, no en cinco
   paneles sucesivos. Se conserva la paleta de la dirección A. */
.menu-section {
  --section-bg: var(--jb-paper);
  background: var(--section-bg);
  padding: 3.5rem var(--art-gutter) 4rem;
}
.menu-section--comida { --capsule-bg: var(--jb-cream); }
.menu-section--cocteleria { --capsule-bg: var(--jb-cream); }
.menu-section__inner { width: min(100%, var(--art-width)); }
.menu-section__title {
  padding-inline: 0;
  margin: 0 0 2.25rem;
  color: var(--jb-teal);
  font-size: clamp(3.45rem, 9.2vw, 6.25rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.menu-section__title::after {
  content: ''; display: inline-block;
  width: .12em; height: .12em; margin-left: .075em;
  border-radius: 50%; background: var(--jb-pink);
}
.menu-section__layout { gap: 1.5rem; }
.categories { padding-inline: 0; gap: 3.5rem; }
.category__header { padding-bottom: .7rem; border: 0; }
.category__title { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.035em; font-weight: 700; }
.category__note { margin-top: .55rem; font-size: .75rem; letter-spacing: .025em; }
.menu-item { border: 0; padding: .58rem 0; }
.menu-item__name { font-size: 1rem; line-height: 1.45; font-weight: 600; }
.menu-item__prices { font-size: .97rem; font-weight: 400; }
.menu-item__top, .menu-item__variant { column-gap: 1rem; }
.menu-item__description { margin-top: .25rem; max-width: 46ch; font-size: .86rem; line-height: 1.5; }
.menu-item__variant { margin-top: .25rem; padding-left: .6rem; font-size: .86rem; }
.menu-item__variant-price { font-weight: 400; }
.association-note { border: 0; margin: .3rem 0 .3rem .6rem; padding: .2rem 0; line-height: 1.55; }
.association-note__label { font-size: .8rem; font-weight: 600; }

/* Formatos honestos con los píxeles disponibles. Sin blur, upscale ni archivos
   nuevos. La máscara sólo funde el borde inferior con el papel exacto. */
.section-photo {
  width: 100%; max-width: 32rem; justify-self: center;
  border-radius: 0; background: var(--section-bg);
}
.section-photo img {
  filter: none;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 calc(100% - var(--photo-fade)),
    #000000f5 calc(100% - var(--photo-fade) * .7),
    #000000bf calc(100% - var(--photo-fade) * .4),
    #00000059 calc(100% - var(--photo-fade) * .16), transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 calc(100% - var(--photo-fade)),
    #000000f5 calc(100% - var(--photo-fade) * .7),
    #000000bf calc(100% - var(--photo-fade) * .4),
    #00000059 calc(100% - var(--photo-fade) * .16), transparent 100%);
}
.section-photo::after { display: none; }
.section-photo[data-photo='food'] { --photo-fade: 23%; }
.section-photo[data-photo='beers'] { --photo-fade: 13%; }
.section-photo[data-photo='cocktails'] { --photo-fade: 14%; }
.section-photo[data-photo='spirits'] { --photo-fade: 10%; }
.menu-section--with-atmosphere { padding-top: 0; }
.section-atmosphere {
  width: min(100%, 60rem); height: clamp(12rem, 28vw, 21rem);
  margin: 0 auto 3rem;
}
.section-atmosphere img { object-position: 50% 58%; }
.section-atmosphere::after { height: 22%; background: linear-gradient(transparent, var(--section-bg)); }

/* Subnavegación de destilados: texto, espacio y una marca activa.
   Todos los enlaces conservan al menos 44px de altura y el mismo anclaje. */
.category-nav { border: 0; gap: .15rem; margin-bottom: 2rem; padding-inline: 0; }
.menu-section .category-nav a {
  border: 0; border-radius: 0; background: transparent;
  padding-inline: .8rem; font-size: .81rem; font-weight: 400;
}
.menu-section .category-nav a.is-active {
  color: var(--jb-teal); background: transparent; font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--jb-teal);
}
.category-nav a:focus-visible { outline-offset: -3px; }

/* Continuous beer sections use the existing Dos Tigres anchor/scrollspy rail.
   Colors/fonts remain Juana Banana; no content is hidden. */
.menu-section--with-subsections { --group-subnav-height: var(--subnav-height); }
#cervezas .category-nav--sections {
  justify-content: flex-start; gap: .5rem; max-width: 100%;
  overflow-x: auto;
}
#cervezas .category-nav--sections a {
  flex: 0 0 auto;
  padding-inline: .65rem; font-weight: 600;
}
.category-section { display: grid; gap: inherit; min-width: 0; }
.category-section, .menu-section--with-subsections .category {
  scroll-margin-top: calc(var(--dock-height) + var(--group-subnav-height) + 20px);
}
@media (max-width: 47.999rem) {
  #cervezas .category-nav--sections a { padding-inline: .4rem; font-size: .78rem; }
}
@media (min-width: 64rem) {
  .menu-section--with-subsections .section-photo {
    top: calc(var(--dock-height) + var(--group-subnav-height) + 24px);
    max-height: calc(100svh - var(--dock-height) - var(--group-subnav-height) - 48px);
  }
  .menu-section--with-subsections .section-photo img {
    max-height: calc(100svh - var(--dock-height) - var(--group-subnav-height) - 48px);
  }
}

/* Barra y Contacto son un único cierre carbón. Horarios a todo el ancho en
   teléfono para no partir cada día en dos o tres líneas. */
.contact__photo { max-width: 55rem; }
.contact__photo::after { height: 18%; background: linear-gradient(transparent, var(--approved-frame)); }
.contact__inner {
  max-width: var(--art-width); gap: 2.5rem;
  padding: 2rem var(--art-gutter) calc(4rem + env(safe-area-inset-bottom));
}
.contact__wordmark { width: 13rem; }
.contact__title { margin-bottom: 1.75rem; font-size: 2.75rem; }
.contact__details { grid-template-columns: 1fr; gap: 1.5rem; }
.contact__socials { grid-column: 1 / -1; gap: .75rem; }
.contact__social-link { border-radius: 50%; }
.contact__social-link:hover { background: #fbf3e710; }
.contact__value { font-size: .94rem; line-height: 1.75; }
.contact__label { margin-bottom: .4rem !important; font-size: .75rem; }
.contact__canonical { margin-top: 2.5rem; color: #d4cabc; }

@media (min-width: 48rem) {
  .hero, .hero__identity { min-height: min(46rem, calc(100svh - var(--dock-height))); }
  .hero__media { right: auto; width: min(78vw, 67rem); }
  .hero__media::after {
    background: linear-gradient(90deg, #29272400 30%, #29272445 59%, #292724 100%),
      linear-gradient(0deg, #292724 0%, #29272400 24%);
  }
  .hero__photo { object-position: 42% 50%; }
  .hero__identity { margin-left: 55%; padding: 3.5rem 2rem; gap: 2rem; }
  .hero__wordmark-image { width: min(29vw, 23rem); }
  .hero__intro { font-size: 1.04rem; max-width: 30ch; }
  .menu-section { padding-block: 5.5rem; }
  .menu-section--with-atmosphere { padding-top: 0; }
  .menu-section__title { margin-bottom: 3rem; }
  .section-nav a { padding-inline: 1.4rem; }
  .section-nav a::after { inset-inline: 1.4rem; }
  .contact__photo img { height: 25rem; object-fit: cover; object-position: 50% 64%; }
  .contact__inner { grid-template-columns: .85fr 1.15fr; align-items: start; padding-top: 3rem; }
  .contact__identity { padding-top: .5rem; }
  .contact__wordmark { width: 17rem; }
  .contact__details { grid-template-columns: 1fr; }
}
@media (min-width: 64rem) {
  .menu-section__layout { grid-template-columns: minmax(0,1fr) minmax(0,.94fr); gap: clamp(4rem, 7vw, 7rem); }
  .menu-section__layout--text { grid-template-columns: 1fr; max-width: 34rem; }
  .categories { gap: 3.75rem; }
  .category__title { font-size: 1.7rem; }
  .section-photo { width: min(100%, calc((100svh - var(--dock-height) - 64px) * var(--photo-ratio))); }
  .section-atmosphere { margin-bottom: 4rem; }
  .contact__details { grid-template-columns: .95fr 1.05fr; gap: 1.75rem; }
  .contact__inner { padding-inline: 0; }
}
@media (min-width: 90rem) {
  .hero__identity { margin-left: max(55%, calc(50% + 5rem)); }
}
@media (max-width: 22.5rem) {
  .menu-section__title { font-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .section-nav a, .section-nav a::after, .category-nav a { transition: none; }
}