﻿@font-face {

  font-family: "Gilan";

  src: url("../fonts/gilan/Gilan-Light.woff2") format("woff2"),

       url("../fonts/gilan/Gilan-Light.woff") format("woff");

  font-weight: 300;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Lagistha";

  src: url("../fonts/lagistha/LAGISTHA.woff2") format("woff2"),

       url("../fonts/lagistha/LAGISTHA.woff") format("woff");

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}

:root {

  --cream: #fffef4;

  --sand: #f2e0bf;

  --wine: #82171c;

  --wine-text: #82171c;

  --soft-text: #f2e0bf;

  --line: #ecd6b2;

  --home-header-offset: 66px;

  --header-inline-padding: 26px;

  --header-block-padding: 10px;

  --header-side-gap: 14px;

  --header-control-height: 44px;

  --header-cta-width: 158px;

  --header-cta-padding-x: 28px;

  --header-cta-font-size: 14px;

  --header-logo-width: 112px;

  --header-font-size: 16px;

  --header-lang-width: 82px;

  --fs-body: 17px;

  --fs-body-mobile: 16px;

  --fs-subpage-h1: 28px;

  --fs-subpage-h1-mobile: 24px;

  --fs-generic-h1: 32px;

  --fs-template-h1-mobile: 28px;

  --space-content-x: 50px;

  --space-content-x-mobile: 20px;

  --menu-page-padding-bottom: 88px;

  --menu-anchor-top: 54px;

  --menu-anchor-gap: 12px;

  --menu-anchor-padding-y: 12px;

  --menu-anchor-padding-x: 20px;

  --menu-anchor-link-height: 42px;

  --menu-anchor-link-padding-x: 18px;

  --menu-anchor-link-font-size: 16px;

  --menu-sheet-max-width: 1180px;

  --top-gallery-gap: 14px;

  --menu-sheet-padding-top: 80px;

  --menu-sheet-padding-x: 28px;

  --menu-block-margin-top: 56px;

  --menu-block-scroll-margin-top: 136px;

  --menu-block-padding-top: 34px;

  --menu-block-padding-x: 34px;

  --menu-block-padding-bottom: 38px;

  --menu-block-header-gap: 24px;

  --menu-block-header-padding-bottom: 18px;

  --menu-block-header-margin-bottom: 18px;

  --menu-group-margin-top: 26px;

  --menu-group-padding-top: 26px;

  --menu-group-title-margin-bottom: 18px;

  --menu-item-gap: 18px;

  --menu-item-padding-top: 16px;

  --menu-item-padding-x: 18px;

  --menu-item-padding-bottom: 16px;

  --menu-item-name-size: 21px;

  --menu-item-description-margin-top: 8px;

  --menu-item-description-size: 15px;

  --menu-item-price-min-width: 96px;

  --menu-item-price-size: 22px;

  --menu-footer-margin-top: 28px;

  --menu-footer-padding-top: 18px;

  --menu-footer-line-size: 15px;

  --menu-footer-emphasis-size: 30px;

  --hero-content-padding-top: 90px;

  --hero-content-padding-x: 20px;

  --hero-content-padding-bottom: 40px;

  --hero-logo-width: min(760px, 64vw);

  --hero-cta-min-height: 54px;

  --hero-cta-min-width: 196px;

  --hero-cta-font-size: 18px;

  --hero-cta-padding-x: 28px;

  --hero-cta-margin-top: 56px;

  --hero-arrow-size: 16px;

  --hero-arrow-margin-top: 142px;

  --divider-width: min(100%, 570px);

  --divider-height: 3px;

  --intro-padding: 80px 20px 82px;

  --intro-text-margin: 40px auto;

  --intro-text-size: clamp(22px, 2.5vw, 34px);

  --intro-text-line-height: 1.35;

  --spacer-padding: 80px 20px;

  --spacer-before-about-height: 120px;

  --overlay-copy-padding: 0 0 0 20vw;

  --menu-copy-padding: 72px min(7vw, 90px);

  --local-copy-padding: 80px 70px 40px;

  --local-image-height: calc(100vh - 250px);

  --local-gallery-height: calc(100vh - 50px);

  --contact-padding: 80px 20px 50px;

  --contact-title-margin-top: 26px;

  --contact-title-margin-bottom: 18px;

  --contact-title-size: clamp(34px, 3vw, 54px);

  --contact-text-margin-bottom: 24px;

  --contact-text-size: clamp(20px, 1.8vw, 28px);

  --reserve-outline-margin: 8px auto 22px;

  --footer-padding: 54px 60px 26px;

  --footer-grid-gap: 40px;

  --footer-brand-width: min(560px, 100%);

  --footer-heading-margin-bottom: 18px;

  --footer-heading-size: clamp(22px, 1.9vw, 32px);

  --footer-text-margin-bottom: 12px;

  --footer-text-size: clamp(16px, 1.1vw, 18px);

  --instagram-margin-top: 40px;

  --instagram-font-size: 18px;

  --map-min-height: 100vh;

}



* {

  box-sizing: border-box;

}



html, body {

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

}



body {

  background: var(--wine);

  color: var(--wine-text);

  font-family: "Lagistha", "Helvetica Neue", Arial, sans-serif;

  overflow-x: hidden;

}



body.menu-open {

  overflow: hidden;

}



body.reservation-open {

  overflow: hidden;

}



img {

  display: block;

  max-width: 100%;

}



a {

  color: inherit;

  text-decoration: none;

}



.site-header {

  position: fixed;

  inset: 0 0 auto 0;

  z-index: 20;

  padding: var(--header-block-padding) var(--header-inline-padding);

  transition: background-color 0.25s ease, padding 0.25s ease;

}



.home .site-header:not(.is-solid) {

  background: transparent !important;

}



.site-header.is-solid {

  background: var(--wine);

}



.header-inner,

.menu-overlay-header {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: var(--header-control-height);

}



.header-side,

.menu-overlay-side {

  display: flex;

  align-items: center;

  gap: var(--header-side-gap);

  min-width: 0;

  min-height: var(--header-control-height);

}



.header-side--start,

.menu-overlay-side--start {

  flex: 1 1 0;

  justify-content: flex-start;

}



.header-side--end,

.menu-overlay-side--end {

  flex: 1 1 0;

  justify-content: flex-end;

}



.menu-button {

  width: 24px;

  height: 24px;

  padding: 0;

  border: 0;

  background: transparent;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 5px;

  cursor: pointer;

}



.menu-button span {

  display: block;

  width: 24px;

  height: 2px;

  background: #f2e0bf;

  transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;

}



.menu-button:hover span:nth-child(1),

.menu-button:focus-visible span:nth-child(1) {

  transform: translateY(-1px);

}



.menu-button:hover span:nth-child(2),

.menu-button:focus-visible span:nth-child(2) {

  opacity: 0.82;

}



.menu-button:hover span:nth-child(3),

.menu-button:focus-visible span:nth-child(3) {

  transform: translateY(1px);

}



.brand-mark,

.menu-brand {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 1;

}



.brand-mark img {

  width: var(--header-logo-width);

  height: auto;

  object-fit: contain;

}



.language-dropdown {

  position: relative;

}



.language-dropdown__toggle {
  width: var(--header-lang-width);
  display: inline-flex;
  align-items: center;
  justify-content: start;
  gap: 10px;

  min-height: var(--header-control-height);

  padding: 0 14px;

  border: 0;

  background: transparent;

  color: #f2e0bf;

  font-family: "Lagistha", "Helvetica Neue", Arial, sans-serif;

  font-size: var(--header-font-size);

  letter-spacing: 0.08em;

  line-height: 1;

  text-transform: uppercase;

  white-space: nowrap;

  cursor: pointer;

}



.language-dropdown__arrow {

  width: 7px;

  height: 7px;

  border-right: 1px solid currentColor;

  border-bottom: 1px solid currentColor;

  transform: rotate(45deg) translateY(-1px);

  transition: transform 0.18s ease;

}



.language-dropdown__menu {

  position: absolute;

  top: 100%;

  left: 0;

  width: var(--header-lang-width);

  display: flex;

  flex-direction: column;

  gap: 6px;

  padding: 0 12px 10px;

  border: 0;

  background: rgba(130, 23, 28, 0.94);

  opacity: 0;

  pointer-events: none;

  transform: translateY(-2px);

  transition: opacity 0.18s ease, transform 0.18s ease;

}



.language-dropdown.is-open .language-dropdown__toggle {

  background: rgba(130, 23, 28, 0.94);

}



.language-dropdown.is-open .language-dropdown__menu {

  opacity: 1;

  pointer-events: auto;

  transform: translateY(0);

}



.language-dropdown.is-open .language-dropdown__arrow {

  transform: rotate(225deg) translateY(-1px);

}



.language-dropdown__link {

  display: block;

  color: rgba(242, 224, 191, 0.72);

  font-family: "Lagistha", "Helvetica Neue", Arial, sans-serif;

  font-size: var(--header-font-size);

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.language-dropdown__link.is-active,

.language-dropdown__link:hover,

.language-dropdown__link:focus-visible {

  color: #f2e0bf;

}



.hero-cta,

.outline-button,

.reserve-outline {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 40px;

  padding: 0 28px;

  border: 1px solid currentColor;

  letter-spacing: 0.02em;

  text-transform: uppercase;

  font-size: var(--header-font-size);

  font-weight: 300;

}

.contact-reserve-block {

  width: 100vw;

  margin: 8px 0 0;

  margin-left: calc(50% - 50vw);

  margin-right: calc(50% - 50vw);

  padding: 80px 20px;

  background: var(--wine);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 16px;

}

.contact-reserve-text {

  margin: 0;

  color: var(--cream);

  text-transform: uppercase;

  letter-spacing: 0.05em;

  font-size: clamp(16px, 1.35vw, 22px);

  line-height: 1.25;

  max-width: 28ch;

}

.contact-reserve-block .reserve-outline {

  margin: 0;

  color: var(--cream);

  border-color: var(--cream);

}

.contact-reserve-block .reserve-outline:hover,

.contact-reserve-block .reserve-outline:focus-visible {

  background: rgba(242, 224, 191, 0.12);

}



.header-cta,

.menu-cta {

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: var(--header-cta-width);

  height: var(--header-control-height);

  padding: 0 var(--header-cta-padding-x);

  border: 1px solid currentColor;

  color: #f2e0bf;

  border-color: #f2e0bf;

  text-align: center;

  text-transform: uppercase;

  white-space: nowrap;

  line-height: 1;

  font-size: var(--header-cta-font-size);

  letter-spacing: 0.04em;

  font-weight: 300;

}



.header-cta,

.menu-cta,

.language-dropdown__toggle,

.menu-button,

.menu-close {

  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;

}



.header-cta:hover,

.header-cta:focus-visible,

.menu-cta:hover,

.menu-cta:focus-visible {

  background: rgba(242, 224, 191, 0.12);

  border-color: #f2e0bf;

  color: #f2e0bf;

}



.menu-overlay {

  position: fixed;

  inset: 0;

  z-index: 30;

  display: flex;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  background: rgba(245, 245, 245, 0.98);

  transition: opacity 0.22s ease;

}



.menu-overlay.is-open {

  opacity: 1;

  pointer-events: auto;

}



.menu-overlay-header {

  padding: var(--header-block-padding) var(--header-inline-padding);

  background: var(--wine);

}



.menu-close,

.menu-brand,

.menu-cta,

.menu-overlay-nav a {

  font-family: "Lagistha", "Helvetica Neue", Arial, sans-serif;

}



.menu-close {

  width: 24px;

  height: 24px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 0;

  background: transparent;

  color: var(--sand);

  font-size: 28px;

  line-height: 1;

  padding: 0;

  cursor: pointer;

}



.menu-brand img {

  width: var(--header-logo-width);

  height: auto;

  object-fit: contain;

}



.language-dropdown--overlay .language-dropdown__toggle {

  background: transparent;

  color: var(--sand);

}



.language-dropdown--overlay .language-dropdown__menu {

  left: 50%;

  transform: translate(-50%, -2px);

  background: rgba(130, 23, 28, 0.98);

}



.language-dropdown--overlay.is-open .language-dropdown__toggle {

  background: rgba(130, 23, 28, 0.98);

}



.language-dropdown--overlay.is-open .language-dropdown__menu {

  transform: translate(-50%, 0);

}



.language-dropdown--overlay .language-dropdown__link {

  color: rgba(242, 224, 191, 0.76);

}



.language-dropdown--overlay .language-dropdown__link.is-active,

.language-dropdown--overlay .language-dropdown__link:hover,

.language-dropdown--overlay .language-dropdown__link:focus-visible {

  color: var(--sand);

}



.menu-cta {

  color: var(--sand);

  border-color: var(--sand);

}



.menu-overlay-nav {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 16px;

}



.menu-overlay-nav a {

  color: #3e5067;

  font-size: clamp(28px, 2.5vw, 36px);

  line-height: 1.2;

  text-transform: uppercase;

  font-weight: 300;

}



.hero {

  position: relative;

  min-height: 100vh;

  background: center center / cover no-repeat url("../images/hero-background.jpg");

}



.home .hero {

  margin-top: calc(-1 * var(--home-header-offset));

  min-height: calc(100vh + var(--home-header-offset));

}



.hero-video {

  display: none;

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.hero-overlay {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(120% 85% at 50% 18%, rgba(95, 44, 18, 0.18) 0%, rgba(95, 44, 18, 0) 60%),

    linear-gradient(to bottom, rgba(22, 10, 12, 0.5), rgba(22, 10, 12, 0.2) 42%, rgba(22, 10, 12, 0.46));

}



.hero-content {

  position: relative;

  z-index: 1;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 0;

  padding: var(--hero-content-padding-top) var(--hero-content-padding-x) var(--hero-content-padding-bottom);

}



.home .hero-content {

  min-height: calc(100vh + var(--home-header-offset));

  padding-top: calc(90px + var(--home-header-offset));

}



.hero-logo {

  width: var(--hero-logo-width);

  padding: 28px 0;

}



.hero-welcome,

.hero-slogan {

  margin: 0;

  color: var(--cream);

  text-align: center;

  letter-spacing: 0.02em;

  text-transform: none;

  font-family: "Lagistha", "Helvetica Neue", Arial, sans-serif;

  text-shadow: 0 1px 10px rgba(10, 5, 6, 0.28);

}



.hero-welcome {

  margin-bottom: 16px;

  font-size: clamp(20px, 1.8vw, 34px);

  letter-spacing: 0.16em;

  color: #f2e0bf;

}



.hero-divider {

  height: 3px;

  background: rgba(242, 224, 191, 0.8);

}



.hero-divider--top {

  width: 360px;

}



.hero-divider--bottom {

  width: 120px;

}



.hero-slogan {

  margin-top: 16px;

  font-size: 38px;

  line-height: 1.12;

  text-transform: none;

}



.hero-slogan em {

  color: #f2e0bf;

  font-style: italic;

}



.hero-cta {

  background: var(--sand);

  color: var(--wine-text);

  border-color: var(--sand);

  min-height: var(--hero-cta-min-height);

  min-width: var(--hero-cta-min-width);

  padding: 0 var(--hero-cta-padding-x);

  font-size: var(--hero-cta-font-size);

  margin-top: var(--hero-cta-margin-top);

  font-family: "Lagistha", "Helvetica Neue", Arial, sans-serif;

}



.hero-arrow {

  display: block;

  width: var(--hero-arrow-size);

  height: var(--hero-arrow-size);

  margin-top: var(--hero-arrow-margin-top);

  border-right: 1px solid var(--cream);

  border-bottom: 1px solid var(--cream);

  transform: rotate(45deg);

  animation: heroArrowPulse 1.9s ease-in-out infinite;

  transition: opacity 0.2s ease, transform 0.2s ease;

  cursor: pointer;

}



.hero-arrow:hover,

.hero-arrow:focus-visible {

  opacity: 0.78;

}



.hero-arrow:focus-visible {

  outline: 2px solid rgba(255, 254, 244, 0.7);

  outline-offset: 8px;

}



@keyframes heroArrowPulse {

  0%,

  100% {

    transform: rotate(45deg) translate(0, 0);

    opacity: 0.92;

  }



  50% {

    transform: rotate(45deg) translate(4px, 4px);

    opacity: 1;

  }

}



.intro,

.contact-section {

  background: var(--cream);

  text-align: center;

}



.intro {

  padding: var(--intro-padding);

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.line {

  width: var(--divider-width);

  height: var(--divider-height);

  margin: 0 auto;

  background: var(--line);

}



.intro p,

.repeat-intro {

  max-width: 1120px;

  margin: var(--intro-text-margin);

  color: var(--wine-text);

  font-size: var(--intro-text-size);

  line-height: var(--intro-text-line-height);

  font-weight: 300;

  font-family: "Lagistha", "Helvetica Neue", Arial, sans-serif;

}



.top-gallery {

  position: relative;

  overflow: hidden;

  background: #fffef5;

}



.top-gallery__viewport,

.menu-gallery__viewport,

.local-gallery__viewport {

  position: relative;

  overflow: hidden;

  touch-action: pan-y pinch-zoom;

  cursor: grab;

  user-select: none;

}



.top-gallery__track,

.menu-gallery__track,

.local-gallery__track {

  display: flex;

  transition: transform 0.55s ease;

  will-change: transform;

}



.top-gallery__track {

  gap: var(--top-gallery-gap);

}



.top-gallery__viewport.is-dragging,

.menu-gallery__viewport.is-dragging,

.local-gallery__viewport.is-dragging {

  cursor: grabbing;

}



.top-gallery__slide,

.menu-gallery__slide,

.local-gallery__slide {

  margin: 0;

}



.top-gallery__slide {

  flex: 0 0 33.333333%;

}



.top-gallery__slide img,

.menu-gallery__slide img,

.local-gallery__slide img {

  width: 100%;

  display: block;

  object-fit: cover;

}



.top-gallery__slide img {

  aspect-ratio: 1 / 1;

  height: auto;

}



.top-gallery__dots,

.menu-gallery__dots,

.local-gallery__dots {

  position: absolute;

  left: 50%;

  bottom: 16px;

  transform: translateX(-50%);

  z-index: 3;

  display: flex;

  justify-content: center;

  gap: 8px;

  padding: 6px 10px;

  border-radius: 999px;

  background: rgba(255, 254, 245, 0.72);

  backdrop-filter: blur(3px);

}



.top-gallery__dot,

.menu-gallery__dot,

.local-gallery__dot {

  width: 8px;

  height: 8px;

  border: 0;

  border-radius: 50%;

  background: rgba(130, 23, 28, 0.4);

  padding: 0;

  cursor: pointer;

  transition: transform 0.2s ease, background 0.2s ease;

}



.top-gallery__dot.is-active,

.menu-gallery__dot.is-active,

.local-gallery__dot.is-active {

  background: #82171c;

  transform: scale(1.15);

}



.about-section {

  min-height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

  background-size: cover;

  background-position: center;

  background-image:

    linear-gradient(to right, rgba(18, 10, 11, 0.56), rgba(18, 10, 11, 0.18) 44%, rgba(18, 10, 11, 0.02)),

    url("../images/QUIENES-SOMOS.jpg");

}



.overlay-copy {

  padding: var(--overlay-copy-padding);

  max-width: 800px;

  color: var(--soft-text);

}



.overlay-copy h2,

.menu-copy h2,

.local-copy h2,

.contact-section h3,

.footer-col h4 {

  margin: 0 0 16px;

  color: var(--soft-text);

  font-size: clamp(28px, 3vw, 44px);

  line-height: 1.1;

  font-weight: 400;

  text-transform: uppercase;

  font-family: "Gilan", "Lagistha", "Helvetica Neue", Arial, sans-serif;

}



.overlay-copy p,

.menu-copy p,

.local-copy p,

.footer-col p {

  margin: 0;

  max-width: none;

  color: var(--soft-text);

  font-size: clamp(14px, 1.1vw, 18px);

  line-height: 1.6;

}



.outline-button {

  margin-top: 34px;

  color: var(--cream);

  border-color: var(--cream);

  min-height: 50px;

  min-width: 188px;

  padding: 0 28px;

  font-size: 15px;

}



.spacer-block {

  background: var(--cream);

  text-align: center;

  padding: var(--spacer-padding);

}



.spacer-before-about {

  min-height: var(--spacer-before-about-height);

  display: flex;

  align-items: center;

  justify-content: center;

}



.menu-section {

  display: flex;

  min-height: 100vh;

  height: 100vh;

}



.menu-image {

  flex: 1 1 50%;

  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;

}



.menu-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.menu-gallery__viewport {

  width: 100%;

  height: auto;

  aspect-ratio: 1 / 1;

}



.menu-gallery__track {

  height: 100%;

}



.menu-gallery__slide {

  flex: 0 0 100%;

  height: 100%;

}



.menu-gallery__slide img {

  height: 100%;

  aspect-ratio: auto;

}



.local-gallery__slide img {

  height: 100%;

  aspect-ratio: auto;

}



.menu-copy {

  flex: 1 1 50%;

  background: var(--wine);

  color: var(--soft-text);

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: var(--menu-copy-padding);

}



.menu-copy .outline-button {

  max-width: 200px;

  margin-top: 28px;

}



.local-section {

  background: var(--wine);

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.local-copy {

  max-width: 980px;

  padding: var(--local-copy-padding);

}



.local-image img {

  width: 100%;

  height: var(--local-image-height);

  object-fit: cover;

}



.local-gallery {

  position: relative;

  overflow: hidden;

}



.local-gallery__viewport {

  height: var(--local-gallery-height);

}



.local-gallery__track {

  height: 100%;

}



.top-gallery__viewport.is-dragging .top-gallery__track,

.menu-gallery__viewport.is-dragging .menu-gallery__track,

.local-gallery__viewport.is-dragging .local-gallery__track {

  transition: none;

}



.local-gallery__slide {

  flex: 0 0 100%;

  height: 100%;

}



.local-gallery__slide img {

  height: 100%;

}



.contact-section {

  min-height: auto;

  padding: var(--contact-padding);

  padding-bottom: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.contact-section h3 {

  color: var(--wine-text);

  margin-top: var(--contact-title-margin-top);

  margin-bottom: var(--contact-title-margin-bottom);

  font-size: var(--contact-title-size);

}



.contact-address,

.contact-phone {

  margin: 0 0 var(--contact-text-margin-bottom);

  color: var(--wine-text);

  font-size: var(--contact-text-size);

  line-height: 1.5;

  font-weight: 300;

}



.reserve-outline {

  margin: var(--reserve-outline-margin);

  color: var(--wine-text);

  border-color: var(--wine-text);

  min-height: 64px;

  min-width: 234px;

  font-size: 17px;

}



.map-section iframe {
  width: 100%;
  min-height: var(--map-min-height);
  display: block;
  border: 0;
}
.map-section__canvas {

  width: 100%;

  min-height: var(--map-min-height);

  display: block;

}


.site-footer {

  background: var(--wine);

  color: var(--cream);

  padding: var(--footer-padding);

}



.footer-grid {

  display: flex;

  justify-content: space-between;

  gap: var(--footer-grid-gap);

  align-items: start;

}



.footer-brand {

  flex: 1.5 1 0;

}



.footer-col {

  flex: 1 1 0;

}



.footer-brand img {

  width: var(--footer-brand-width);

  margin: auto;

  display: block;

}



.footer-col h4 {

  margin-bottom: var(--footer-heading-margin-bottom);

  font-size: var(--footer-heading-size);

}



.footer-col p {

  margin-bottom: var(--footer-text-margin-bottom);

  font-size: var(--footer-text-size);

  line-height: 1.5;

}



.instagram-link {

  display: block;

  margin-top: var(--instagram-margin-top);

  text-align: center;

  color: var(--cream);

  font-size: var(--instagram-font-size);

  text-transform: uppercase;

}



.social-links {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: var(--instagram-margin-top);
  padding: 20px;
}


.social-link {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--cream);

  text-transform: uppercase;

}



.social-link__icon {

  width: 32px;

  height: 32px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.social-link__icon svg {

  width: 100%;

  height: 100%;

  fill: currentColor;

}



.social-link__label {

  font-size: 18px;

  line-height: 1;

}



.footer-kitchen-note {

  margin-top: 8px;

  opacity: 0.95;

}



.reservation-modal {

  position: fixed;

  inset: 0;

  z-index: 1200;

  display: block;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.22s ease;

}



.reservation-modal.is-open {

  pointer-events: auto;

}



.reservation-modal.is-visible {

  opacity: 1;

}



.reservation-modal__backdrop {

  position: absolute;

  inset: 0;

  background: rgba(40, 22, 28, 0.66);

  opacity: 0;

  transition: opacity 0.24s ease;

  backdrop-filter: blur(2px);

}



.reservation-modal.is-visible .reservation-modal__backdrop {

  opacity: 1;

}



.reservation-modal__dialog {

  position: relative;

  width: min(92vw, 760px);

  height: min(78vh, 560px);

  margin: 7vh auto;

  background: var(--cream);

  border: 1px solid rgba(130, 23, 28, 0.22);

  border-radius: 4px;

  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.26);

  transform: translateY(22px) scale(0.985);

  opacity: 0;

  transition: transform 0.28s ease, opacity 0.28s ease;

  overflow: hidden;

}



.reservation-modal.is-visible .reservation-modal__dialog {

  transform: translateY(0) scale(1);

  opacity: 1;

}



.reservation-modal__close {

  position: absolute;

  top: 12px;

  right: 12px;

  z-index: 2;

  width: 38px;

  height: 38px;

  border: 1px solid rgba(130, 23, 28, 0.45);

  background: rgba(255, 254, 244, 0.96);

  color: var(--wine-text);

  font-size: 28px;

  line-height: 1;

  cursor: pointer;

}



.reservation-modal__loader {

  position: absolute;

  inset: 0;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 254, 244, 0.94);

  transition: opacity 0.2s ease;

}



.reservation-modal__loader.is-hidden {

  opacity: 0;

  pointer-events: none;

}



.reservation-modal__spinner {

  width: 38px;

  height: 38px;

  border: 2px solid rgba(130, 23, 28, 0.18);

  border-top-color: var(--wine-text);

  border-radius: 50%;

  animation: reservation-spin 0.8s linear infinite;

}



.reservation-modal__frame {

  width: 100%;

  height: 100%;

  border: 0;

  background: var(--cream);

  display: block;

}



@keyframes reservation-spin {

  to {

    transform: rotate(360deg);

  }

}



.subpage,

.menu-page-body {

  background: var(--cream);

}



.subpage-main {

  padding-top: 36px;

}



.subpage-split {

  min-height: calc(100vh - 36px);

  display: flex;

}



.subpage-copy,

.subpage-visual {

  flex: 1 1 50%;

}



.subpage-copy {

  background: var(--cream);

  color: var(--wine-text);

  padding: 108px var(--space-content-x) 44px;

}



.subpage-copy h1,

.generic-copy h1 {

  margin: 0 0 20px;

  color: var(--wine-text);

  font-family: "Gilan", "Lagistha", "Helvetica Neue", Arial, sans-serif;

  text-transform: uppercase;

}



.subpage-copy h1 {

  font-size: var(--fs-subpage-h1);

  font-weight: 400;

}



.subpage-copy p,

.subpage-copy li,

.page-content-body p,

.page-content-body li {

  margin: 0 0 18px;

  font-size: var(--fs-body);

  line-height: 1.55;

  color: #3f3f3f;

}



.subpage-copy ul,

.page-content-body ul {

  margin: 10px 0 0 18px;

  padding: 0;

}



.subpage-visual {

  position: relative;

  min-height: calc(100vh - 36px);

  background-size: cover;

  background-position: center;

}



.subpage-gallery {

  overflow: hidden;

  background: #f6f1e7;

}



.subpage-gallery__viewport {

  width: 100%;

  height: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

}



.subpage-gallery__track {

  display: flex;

  height: 100%;

  will-change: transform;

}



.subpage-gallery__slide {

  flex: 0 0 100%;

  height: 100%;

}



.subpage-gallery__slide img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.subpage-gallery__dots {

  position: absolute;

  left: 50%;

  bottom: 18px;

  z-index: 2;

  display: inline-flex;

  gap: 8px;

  padding: 7px 11px;

  border-radius: 999px;

  background: rgba(255, 254, 245, 0.78);

  transform: translateX(-50%);

}



.subpage-gallery__dot {

  width: 8px;

  height: 8px;

  display: block;

  aspect-ratio: 1 / 1;

  min-width: 0;

  min-height: 0;

  max-width: 8px;

  max-height: 8px;

  margin: 0;

  padding: 0;

  flex: 0 0 auto;

  border: 0;

  border-radius: 50%;

  background: rgba(130, 23, 28, 0.32);

  appearance: none;

  box-shadow: none;

  line-height: 0;

  font-size: 0;

  cursor: pointer;

}



.subpage-gallery__dot.is-active {

  background: var(--wine);

}



.compact-footer {

  padding-top: 44px;

}



.menu-page {

  min-height: 100vh;

  padding: 0 0 var(--menu-page-padding-bottom);

  background: var(--cream);

}



.menu-anchor-nav {

  position: sticky;

  top: var(--menu-anchor-top);

  z-index: 11;

  margin: 0;

  width: 100%;

  background: var(--wine);

  border: 1px solid rgba(242, 224, 191, 0.35);

  border-left: 0;

  border-right: 0;

}



.menu-anchor-nav__inner {

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  justify-content: center;

  gap: var(--menu-anchor-gap);

  padding: var(--menu-anchor-padding-y) var(--menu-anchor-padding-x);

  overflow-x: auto;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.menu-anchor-nav__inner::-webkit-scrollbar {

  display: none;

}



.menu-anchor-nav__link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

  min-height: var(--menu-anchor-link-height);

  padding: 0 var(--menu-anchor-link-padding-x);

  border-radius: 0;

  border: 1px solid rgba(242, 224, 191, 0.55);

  color: var(--sand);

  font-size: var(--menu-anchor-link-font-size);

  line-height: 1;

  text-decoration: none;

  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;

}



.menu-anchor-nav__link:hover,

.menu-anchor-nav__link:focus-visible {

  background: rgba(255, 254, 245, 0.08);

  border-color: var(--sand);

  outline: none;

}



.menu-anchor-nav__link.is-active {

  background: var(--sand);

  color: var(--wine-text);

  border-color: var(--sand);

}



.menu-sheet {

  max-width: var(--menu-sheet-max-width);

  margin: 0 auto;

  padding: var(--menu-sheet-padding-top) var(--menu-sheet-padding-x) 0;

  color: var(--wine-text);

}



.menu-block {

  margin-top: var(--menu-block-margin-top);

  scroll-margin-top: var(--menu-block-scroll-margin-top);

  padding: var(--menu-block-padding-top) var(--menu-block-padding-x) var(--menu-block-padding-bottom);

  border: 1px solid rgba(130, 23, 28, 0.16);

  border-radius: 30px;

  background: rgba(255, 255, 255, 0.54);

  box-shadow: 0 18px 42px rgba(70, 28, 35, 0.05);

}



.menu-block:first-of-type {

  margin-top: 0;

}



.menu-block__header {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: var(--menu-block-header-gap);

  padding-bottom: var(--menu-block-header-padding-bottom);

  margin-bottom: var(--menu-block-header-margin-bottom);

  border-bottom: 1px solid rgba(130, 23, 28, 0.14);

}



.menu-block__title {

  margin: 0;

  font-size: clamp(42px, 4.1vw, 68px);

  line-height: 0.95;

}



.menu-sheet h1,

.menu-sheet h2,

.menu-sheet h3 {

  font-family: "Gilan", "Lagistha", "Helvetica Neue", Arial, sans-serif;

  font-weight: 400;

}



.menu-sheet h1 {

  margin: 0 0 16px;

  text-align: center;

  font-size: clamp(54px, 5vw, 88px);

  line-height: 0.92;

}



.menu-group {

  margin-top: var(--menu-group-margin-top);

  padding-top: var(--menu-group-padding-top);

  border-top: 1px solid rgba(130, 23, 28, 0.12);

}



.menu-group:first-of-type {

  margin-top: 0;

  padding-top: 0;

  border-top: 0;

}



.menu-group__title {

  margin: 0 0 var(--menu-group-title-margin-bottom);

  color: var(--wine-text);

  font-size: clamp(24px, 2vw, 34px);

  line-height: 1.1;

}



.menu-group__title--secondary {

  color: rgba(130, 23, 28, 0.92);

  font-size: clamp(21px, 1.8vw, 28px);

}



.menu-item-list {

  display: grid;

  gap: 12px;

}



.menu-item {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  align-items: start;

  gap: var(--menu-item-gap);

  padding: var(--menu-item-padding-top) var(--menu-item-padding-x) var(--menu-item-padding-bottom);

  border-radius: 18px;

  background: rgba(255, 254, 245, 0.86);

  border: 1px solid rgba(130, 23, 28, 0.08);

}



.menu-item__copy {

  min-width: 0;

}



.menu-item__name {

  margin: 0;

  color: var(--wine-text);

  font-family: "Lagistha", "Helvetica Neue", Arial, sans-serif;

  font-size: var(--menu-item-name-size);

  line-height: 1.3;

  font-weight: 400;

}



.menu-item__description {

  margin: var(--menu-item-description-margin-top) 0 0;

  color: rgba(130, 23, 28, 0.78);

  font-size: var(--menu-item-description-size);

  line-height: 1.6;

}



.menu-item__price {

  min-width: var(--menu-item-price-min-width);

  text-align: right;

  color: var(--wine-text);

  font-family: "Gilan", "Lagistha", "Helvetica Neue", Arial, sans-serif;

  font-size: var(--menu-item-price-size);

  line-height: 1.1;

  white-space: nowrap;

}



.menu-footer-copy {

  display: grid;

  gap: 10px;

  margin-top: var(--menu-footer-margin-top);

  padding-top: var(--menu-footer-padding-top);

  border-top: 1px solid rgba(130, 23, 28, 0.12);

}



.menu-footer-copy__line {

  margin: 0;

  color: rgba(130, 23, 28, 0.84);

  font-size: var(--menu-footer-line-size);

  line-height: 1.55;

}



.menu-footer-copy__line:last-child:first-child {

  color: var(--wine-text);

  font-family: "Gilan", "Lagistha", "Helvetica Neue", Arial, sans-serif;

  font-size: var(--menu-footer-emphasis-size);

  line-height: 1;

}



.generic-page {

  background: var(--cream);

}



.generic-copy {

  min-height: calc(100vh - 36px);

}



.generic-copy h1 {

  font-size: var(--fs-generic-h1);

}



@media (max-width: 900px) {

  :root {

    --home-header-offset: 46px;

    --header-inline-padding: 14px;

    --header-block-padding: 10px;

    --header-side-gap: 8px;

    --header-control-height: 36px;

    --header-cta-width: 92px;

    --header-cta-padding-x: 16px;

    --header-cta-font-size: var(--header-font-size);

    --header-logo-width: 86px;

    --header-font-size: 12px;

    --header-lang-width: 74px;

    --space-content-x: var(--space-content-x-mobile);

    --menu-page-padding-bottom: 44px;

    --menu-anchor-top: 46px;

    --menu-anchor-gap: 8px;

    --menu-anchor-padding-y: 10px;

    --menu-anchor-padding-x: 12px;

    --menu-anchor-link-height: 36px;

    --menu-anchor-link-padding-x: 14px;

    --menu-anchor-link-font-size: 13px;

    --menu-sheet-max-width: 100%;

    --top-gallery-gap: 0px;

    --menu-sheet-padding-x: 14px;

    --menu-block-margin-top: 28px;

    --menu-block-scroll-margin-top: 114px;

    --menu-block-padding-top: 22px;

    --menu-block-padding-x: 16px;

    --menu-block-padding-bottom: 24px;

    --menu-block-header-padding-bottom: 14px;

    --menu-block-header-margin-bottom: 14px;

    --menu-group-margin-top: 20px;

    --menu-group-padding-top: 20px;

    --menu-group-title-margin-bottom: 14px;

    --menu-item-gap: 10px;

    --menu-item-padding-top: 14px;

    --menu-item-padding-x: 14px;

    --menu-item-padding-bottom: 16px;

    --menu-item-name-size: 18px;

    --menu-item-description-margin-top: 6px;

    --menu-item-description-size: 14px;

    --menu-item-price-min-width: 0;

    --menu-item-price-size: 18px;

    --menu-footer-margin-top: 22px;

    --menu-footer-padding-top: 16px;

    --menu-footer-line-size: 14px;

    --menu-footer-emphasis-size: 24px;

    --hero-logo-width: min(420px, 86vw);

    --hero-cta-min-height: 42px;

    --hero-cta-min-width: 120px;

    --hero-cta-font-size: 22px;

    --hero-cta-padding-x: 24px;

    --hero-cta-margin-top: 46px;

    --hero-arrow-size: 12px;

    --hero-arrow-margin-top: 82px;

    --divider-width: 190px;

    --divider-height: 2px;

    --intro-text-margin: 22px auto;

    --intro-text-size: 22px;

    --intro-text-line-height: 1.4;

    --spacer-padding: 80px 16px;

    --spacer-before-about-height: 64px;

    --overlay-copy-padding: 0 14px 0 18px;

    --menu-copy-padding: 80px 16px 40px;

    --local-copy-padding: 80px 16px 40px;

    --local-image-height: 58vh;

    --local-gallery-height: 58vh;

    --contact-padding: 80px 16px;

    --contact-title-margin-top: 14px;

    --contact-title-margin-bottom: 8px;

    --contact-title-size: 64px;

    --contact-text-margin-bottom: 12px;

    --contact-text-size: 22px;

    --reserve-outline-margin: 8px auto 14px;

    --footer-padding: 18px 14px 12px;

    --footer-grid-gap: 20px;

    --footer-brand-width: min(560px, 60%);

    --footer-heading-margin-bottom: 6px;

    --footer-heading-size: 22px;

    --footer-text-size: 16px;

    --footer-text-margin-bottom: 6px;

    --instagram-margin-top: 14px;

    --instagram-font-size: 8px;

    --fs-button-mobile: 22px;

    --fs-section-h2-mobile: 32px;

    --fs-copy-mobile: 22px;

    --fs-subpage-h1-mobile: 18px;

    --fs-body-mobile: 10px;

    --fs-template-h1-mobile: 32px;

    --fs-template-body-mobile: 22px;

    --fs-menu-block-title-mobile: 32px;

    --fs-menu-page-title-mobile: 40px;

    --fs-menu-group-title-mobile: 22px;

    --map-min-height: 42vh;

  }



  .hero,

  .hero-content {

    min-height: 100vh;

  }



  .hero {

    background-image: none;

  }



  .home .hero {

    min-height: calc(100vh + var(--home-header-offset));

  }



  .home .hero-content {

    min-height: calc(100vh + var(--home-header-offset));

    padding-top: calc(90px + var(--home-header-offset));

  }



  .hero-video {

    display: block;

  }



  .hero-cta,

  .outline-button,

  .reserve-outline {

    min-width: 120px;

    min-height: 42px;

    font-size: var(--fs-button-mobile);

    padding: 0 24px;

    line-height: 1;

  }



  .hero-welcome {

    margin-bottom: 12px;

    font-size: 16px;

    letter-spacing: 0.1em;

  }



  .hero-divider--top {

    width: min(220px, 58vw);

    opacity: 0.9;

  }



  .hero-divider--bottom {

    width: min(160px, 52vw);

    opacity: 0.9;

  }



  .hero-slogan {

    margin-top: 10px;

    font-size: 22px;

    line-height: 1.16;

  }



  .top-gallery {

    padding-bottom: 0;

    background: var(--cream);

  }



  .about-section,

  .menu-section {

    min-height: 100vh;

  }



  .menu-section {

    display: flex;

    flex-direction: column;

    height: auto;

    min-height: auto;

  }



  .menu-copy {

    order: 1;

  }



  .menu-image {

    order: 2;

    top: 0;

    flex: 0 0 auto;

    display: block;

    align-items: stretch;

    line-height: 0;

  }



  .local-image {

    flex: 0 0 auto;

    display: block;

    align-items: stretch;

    line-height: 0;

  }



  .local-section {

    min-height: auto;

  }



  .top-gallery,

  .menu-gallery,

  .local-gallery,

  .subpage-gallery {

    line-height: 0;

  }



  .overlay-copy h2,

  .menu-copy h2,

  .local-copy h2 {

    margin-bottom: 8px;

    font-size: var(--fs-section-h2-mobile);

  }



  .overlay-copy p,

  .menu-copy p,

  .local-copy p,

  .footer-col p {

    font-size: 16px;

    line-height: 1.45;

  }



  .outline-button {

    margin-top: 16px;

  }



  .top-gallery__dots,

  .menu-gallery__dots,

  .local-gallery__dots {

    gap: 6px;

    bottom: 10px;

    padding: 5px 8px;

  }



  .top-gallery__dot,

  .menu-gallery__dot,

  .local-gallery__dot {

    width: 6px;

    height: 6px;

  }



  .top-gallery__viewport,

  .top-gallery__track,

  .top-gallery__slide,

  .top-gallery__slide img {

    margin-bottom: 0;

  }



  .menu-gallery__viewport,

  .menu-gallery__track,

  .menu-gallery__slide,

  .menu-gallery__slide img,

  .local-gallery__viewport,

  .local-gallery__track,

  .local-gallery__slide,

  .local-gallery__slide img {

    margin-bottom: 0;

  }



  .menu-copy .outline-button {

    margin-top: 14px;

    max-width: none;

  }



  .footer-grid {

    flex-direction: column;

    align-items: center;

    text-align: center;

  }



  .reservation-modal__dialog {

    width: min(100vw - 20px, 760px);

    height: min(82vh, 560px);

    margin: 56px auto 0;

  }



  .top-gallery__slide {

    flex-basis: 100%;

  }



  .reservation-modal__close {

    top: 10px;

    right: 10px;

    width: 34px;

    height: 34px;

    font-size: 24px;

  }



  .site-header {

    padding: var(--header-block-padding) var(--header-inline-padding);

  }



  .brand-mark img {

    width: var(--header-logo-width);

  }



  .language-dropdown__toggle,
  .language-dropdown__link {
    font-size: 22px;
    letter-spacing: 0.08em;
  }


  .language-dropdown__toggle {

    width: var(--header-lang-width);

    min-height: var(--header-control-height);

    gap: 8px;

    padding: 0 12px;

  }



  .language-dropdown__arrow {

    width: 6px;

    height: 6px;

  }



  .language-dropdown__menu {

    top: 100%;

    width: var(--header-lang-width);

    gap: 4px;

    padding: 0 10px 8px;

  }



  .menu-overlay-header {

    padding: var(--header-block-padding) var(--header-inline-padding);

  }



  .menu-brand img {

    width: var(--header-logo-width);

  }



  .menu-close {

    font-size: 24px;

  }



  .menu-overlay-nav {

    gap: 10px;

  }



  .menu-overlay-nav a {

    font-size: 28px;

  }



  .subpage-main {

    padding-top: 28px;

  }



  .subpage-split {

    flex-direction: column;

    min-height: auto;

  }



  .subpage-copy {

    padding: 74px var(--space-content-x) 30px;

  }



  .subpage-copy h1,

  .generic-copy h1 {

    font-size: var(--fs-subpage-h1-mobile);

    margin-bottom: 12px;

  }



  .subpage-copy p,

  .subpage-copy li,

  .page-content-body p,

  .page-content-body li {

    font-size: var(--fs-body-mobile);

    line-height: 1.5;

    margin-bottom: 12px;

  }



  .page-template-page-quienes-somos .subpage-copy h1,

  .page-template-page-el-local .subpage-copy h1 {

    font-size: var(--fs-template-h1-mobile);

  }



  .page-template-page-quienes-somos .subpage-copy p,

  .page-template-page-el-local .subpage-copy p,

  .page-template-page-el-local .subpage-copy li {

    font-size: var(--fs-template-body-mobile);

  }



  .subpage-visual {

    min-height: 42vh;

  }



  .subpage-gallery__viewport {

    height: auto;

  }



  .subpage-gallery__dots {

    bottom: 10px;

    gap: 6px;

    padding: 5px 8px;

  }



  .subpage-gallery__dot {

    width: 6px;

    height: 6px;

    max-width: 6px;

    max-height: 6px;

  }



  .compact-footer {

    padding-top: 18px;

  }



  .menu-anchor-nav {

    width: 100vw;

  }



  .menu-anchor-nav__inner {

    justify-content: center;

  }



  .menu-block__title {

    font-size: var(--fs-menu-block-title-mobile);

  }



  .menu-sheet h1 {

    margin-top: 10px;

    font-size: var(--fs-menu-page-title-mobile);

  }



  .menu-group__title,

  .menu-group__title--secondary {

    font-size: var(--fs-menu-group-title-mobile);

  }



  .menu-item {

    grid-template-columns: 1fr;

  }



  .menu-item__price {

    text-align: left;

  }



  .social-link__icon {

    width: 30px;

    height: 30px;

  }



  .social-link__label {

    font-size: 15px;

  }

}




