/* Manglar: terraza tropical, madera, vegetación y luz cálida. */
:root {
  color-scheme: light;
  --font-body: "Avenir Next", Avenir, "Trebuchet MS", system-ui, sans-serif;
  --color-ink: #1c372e;
  --color-paper: #eee5d2;
  --color-cream: #dfd3bc;
  --color-brand: #8c7449;
  --color-accent: #52683f;
  --color-on-dark: #fbf4e2;
  --color-muted: #596258;
  --palette-food: #eee5d2;
  --palette-beers: #858b58;
  --palette-beverages: #c3a274;
  --palette-cocktails: #4f7748;
  --palette-spirits: #173f31;
  --palette-contact: #0b0e0c;
  --nav-surface: #e9e2d5f2;
  --nav-chip: #dcd5c8;
  --nav-chip-ink: #29372f;
  --content-max: 76rem;
}

html { background: var(--color-ink); }
body { background: var(--color-paper); }

.preparation {
  min-height: 100svh;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 2rem;
  color: var(--color-on-dark);
  background: var(--color-ink);
  text-align: center;
}
.preparation h1 { margin: 0; font-size: clamp(3rem, 13vw, 6rem); font-weight: 500; letter-spacing: -.07em; }
.preparation p { margin: .5rem 0 0; }

.site-header {
  background: color-mix(in srgb, var(--color-ink) 94%, transparent);
  border-bottom: 1px solid #fff2;
  backdrop-filter: blur(16px) saturate(1.15);
}
.site-header__wordmark { width: 7.25rem; }
.section-nav { background: var(--nav-surface); backdrop-filter: blur(14px); }
.section-nav a {
  border: 1px solid transparent;
  background: var(--nav-chip);
  color: var(--nav-chip-ink);
  letter-spacing: .025em;
  text-transform: uppercase;
}
.section-nav a.is-active { border-color: var(--active-border, transparent); }

.hero { min-height: min(50rem, calc(100svh - var(--dock-height))); overflow: hidden; }
.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, #102b2420 8%, #102b2466 52%, #102b24f2 100%);
  pointer-events: none;
}
.hero__media { z-index: -3; }
.hero__media::after { display: none; }
.hero__photo { object-position: 50% 48%; filter: saturate(.94) contrast(1.02) brightness(.9); }
.hero__intro-video {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  filter: saturate(.92) contrast(1.04) brightness(.86);
  transform: translateY(0) scale(1.01);
  opacity: 1;
  transition: transform 1.4s cubic-bezier(.22,.65,.28,1), opacity 1.4s ease;
}
.hero__intro-video.is-finished { transform: translateY(-.8%) scale(1.012); opacity: 0; }
.hero__identity { justify-content: flex-end; padding-bottom: clamp(2.75rem, 8vh, 5rem); }
.hero__wordmark-image { width: min(78vw, 28rem); filter: drop-shadow(0 3px 12px #0008); }
.hero__intro { max-width: 35ch; color: #fff9e6; font-size: clamp(1rem, 2.3vw, 1.18rem); text-shadow: 0 2px 16px #000b; }

.menu-section {
  position: relative;
  overflow: clip;
  color: var(--section-ink, var(--color-ink));
  background-color: var(--section-bg);
  background-image: none;
}
.menu-section__title {
  color: var(--section-title, var(--section-ink, var(--color-ink)));
  font-weight: 500;
  letter-spacing: -.055em;
}
.menu-section__title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: .28rem;
  margin-top: .7rem;
  background: var(--section-accent, var(--color-brand));
  border-radius: 999px;
}
.menu-section__source-note {
  max-width: 46rem;
  margin: -0.5rem 0 1.4rem;
  padding: .8rem 1rem;
  border-left: 3px solid var(--color-accent);
  background: #fff7df66;
  color: var(--color-muted);
  font-size: .82rem;
}
.menu-section__source-note p { margin: 0; }
.menu-section__source-note p + p { margin-top: .25rem; }
.menu-section__source-note-label {
  color: var(--color-ink);
  font-size: .73rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.menu-section--comida {
  --section-bg: var(--palette-food);
  --section-ink: #26382f;
  --section-muted: #5d665f;
  --section-price: #345442;
  --section-rule: #32483d35;
  --section-accent: #7c7452;
  --capsule-bg: var(--section-bg);
  --capsule-ink: #26382f;
  --capsule-border: #6f7158;
}
.menu-section--cervezas {
  --section-bg: var(--palette-beers);
  --section-ink: #102019;
  --section-muted: #102019;
  --section-price: #102019;
  --section-rule: #17261e45;
  --section-accent: #3f572f;
  --capsule-bg: var(--section-bg);
  --capsule-ink: #102019;
  --capsule-border: #4e5933;
}
.menu-section--bebidas {
  --section-bg: var(--palette-beverages);
  --section-ink: #30281f;
  --section-muted: #49382a;
  --section-price: #3e3023;
  --section-rule: #3f31243d;
  --section-accent: #765b35;
  --capsule-bg: var(--section-bg);
  --capsule-ink: #30281f;
  --capsule-border: #725d41;
}
.menu-section--cocteleria {
  --section-bg: var(--palette-cocktails);
  --section-ink: #fbf4e2;
  --section-muted: #fbf4e2;
  --section-price: #fff0c6;
  --section-rule: #fff7e83d;
  --section-accent: #d4c48d;
  --capsule-bg: var(--section-bg);
  --capsule-ink: #fbf4e2;
  --capsule-border: #345f36;
}
.menu-section--destilados {
  --section-bg: var(--palette-spirits);
  --section-ink: #fbf4e2;
  --section-muted: #d5ded7;
  --section-price: #efd9a0;
  --section-rule: #f7f0dd3d;
  --section-accent: #aabf91;
  --capsule-bg: var(--section-bg);
  --capsule-ink: #fbf4e2;
  --capsule-border: #d9e0cd85;
  --nav-chip-bg: #ece8de;
}

.section-photo, .category-photo {
  --photo-fade: 12%;
  --photo-edge: 5%;
  --photo-contrast: .98;
  --photo-saturation: .96;
  --photo-brightness: 1;
  --photo-wash: 0;
  isolation: isolate;
  border-radius: clamp(1rem, 2vw, 1.5rem);
  box-shadow: none;
}
.section-photo img, .category-photo img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--photo-fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--photo-fade)), transparent 100%);
}
.section-photo::after, .category-photo::after {
  display: block;
  z-index: 1;
  background:
    linear-gradient(to right, var(--section-bg) 0, transparent var(--photo-edge), transparent calc(100% - var(--photo-edge)), var(--section-bg) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--section-bg) 50%, transparent) 0, transparent 8%, transparent 66%, color-mix(in srgb, var(--section-bg) 18%, transparent) 78%, var(--section-bg) 100%);
  opacity: 1;
}
.section-photo[data-photo='food'] { --photo-fade: 15%; --photo-edge: 4%; }
.section-photo[data-photo='food'] img {
  aspect-ratio: 1.05;
  object-fit: cover;
  object-position: 50% 46%;
}
.section-photo[data-photo='beers'] { --photo-fade: 10%; --photo-edge: 3%; }
.section-photo[data-photo='beers'] img { object-position: 50% 48%; }
.section-photo[data-photo='cocktails'] { --photo-fade: 10%; --photo-edge: 3%; }
.section-atmosphere { width: 100%; max-width: none; height: clamp(15rem, 45vw, 31rem); }
.section-atmosphere img { filter: saturate(.86) contrast(1.05) brightness(.75); }
.section-atmosphere::after { height: 45%; background: linear-gradient(transparent, var(--section-bg)); }

.category__header { border-bottom-color: var(--section-rule); }
.category__title { color: var(--section-ink); font-weight: 650; text-transform: uppercase; letter-spacing: .035em; }
.category__note { color: var(--section-muted); font-size: .8rem; }
.menu-item { border-bottom-color: var(--section-rule); }
.menu-item__name { color: var(--section-ink); }
.menu-item__description, .menu-item__variant-label { color: var(--section-muted); }
.menu-item__prices, .menu-item__variant-price { color: var(--section-price); }
.association-note {
  border-left-color: var(--section-accent);
  background: color-mix(in srgb, var(--section-bg) 68%, white 32%);
  color: var(--section-muted);
  padding: .75rem .85rem;
  border-left-width: 3px;
}
.association-note__label { color: var(--section-ink); }

.category__price-headings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .85rem;
  padding: .75rem 0 .2rem;
  color: var(--section-ink);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.category__price-heading-labels,
.menu-item__prices--columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(4.65rem, 1fr));
  gap: .55rem;
  min-width: 9.85rem;
  text-align: right;
}

.category-nav {
  border-block-color: var(--section-rule);
  background: color-mix(in srgb, var(--section-bg) 94%, transparent);
  backdrop-filter: blur(12px);
}
.category-nav a { background: var(--nav-chip-bg, #ece7dc); color: #294038; }
.category-nav a.is-active { border-color: var(--capsule-border); }

.contact {
  --contact-bg: var(--palette-contact);
  position: relative;
  min-height: calc(100svh - var(--dock-height));
  background: var(--contact-bg);
}
.contact__photo {
  max-width: none;
  overflow: hidden;
  background: var(--contact-bg);
}
.contact__photo img {
  width: 100%;
  height: clamp(19rem, 52vw, 39rem);
  object-fit: cover;
  object-position: 50% 52%;
  filter: saturate(.88) contrast(1.04) brightness(.72);
}
.contact__photo::after {
  inset: 0;
  height: auto;
  background:
    linear-gradient(to bottom, transparent 31%, #0b0e0c5c 57%, var(--contact-bg) 100%),
    linear-gradient(to right, #0b0e0c80 0, transparent 18%, transparent 82%, #0b0e0c80 100%);
}
.contact__inner {
  position: relative;
  z-index: 1;
  margin-top: clamp(-6rem, -8vw, -3rem);
  background: var(--contact-bg);
}
.contact__details:empty { display: none; }

@media (max-width: 29rem) {
  .category__price-heading-labels, .menu-item__prices--columns {
    grid-template-columns: repeat(2, minmax(3.8rem, 1fr));
    gap: .3rem;
    min-width: 8rem;
  }
  .category__price-headings { font-size: .61rem; }
  .menu-item__prices--columns { font-size: .84rem; }
}

@media (max-width: 47.999rem) {
  .section-photo {
    width: calc(100% - 2rem);
    margin-inline: 1rem;
    border-radius: 1.125rem;
  }
  .contact__photo img { object-position: 52% 50%; }
  .contact__inner { margin-top: -3rem; }
}

@media (min-width: 48rem) {
  .hero::after { background: linear-gradient(90deg, #102b2420 20%, #102b2470 54%, #102b24f0 100%); }
  .hero__identity { margin-left: 51%; }
  .hero__photo, .hero__intro-video { object-position: 38% 50%; }
  .menu-section__title { font-size: clamp(3.6rem, 7vw, 6.4rem); }
  .section-photo { max-width: 38rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__intro-video { display: none !important; }
}