body {
  background-color: #171B19;
  color: #F3EBDD;
  font-family: 'Work Sans', sans-serif;
  overflow-x: hidden;
}
.font-brand {
  font-family: 'Cinzel', serif;
}
section[id] {
  scroll-margin-top: 5rem;
}
.subtle-wood-grain {
  background-image: linear-gradient(90deg, rgba(180, 154, 101, 0.03) 1px, transparent 1px),
                    linear-gradient(0deg, rgba(180, 154, 101, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hero-organic-shape {
  border-radius: 54% 46% 62% 38% / 44% 56% 44% 56%;
}
.focus-ring:focus-visible {
  outline: 2px solid #B49A65;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 1. Tipografías limpias y legibles */
.reflujo-dorado, .gold-shimmer-text, .gold-sheen-sweep, .title-gold-shine {
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  color: #B49A65 !important;
  cursor: default !important;
}

/* 2. Resplandor / Deslumbre suave, lento y natural para botones principales */
button.btn-reflujo, a.btn-reflujo,
button.gold-shimmer-btn, a.gold-shimmer-btn,
button.btn-gold-luster, a.btn-gold-luster,
a.bg-gold, button.bg-gold,
button[type="submit"].bg-gold,
.chapter-btn[aria-selected="true"],
.menu-filter-btn[aria-pressed="true"] {
  background-color: #B49A65 !important;
  background-image: linear-gradient(120deg, #B49A65 0%, #B49A65 35%, #DFCDA5 50%, #B49A65 65%, #B49A65 100%) !important;
  background-size: 260% 100% !important;
  background-position: 0% 50% !important;
  transition: background-position 1.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  color: #171B19 !important;
  border: 1px solid rgba(180, 154, 101, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  position: relative;
  overflow: hidden;
  cursor: pointer !important;
}

button.btn-reflujo:hover, a.btn-reflujo:hover,
button.gold-shimmer-btn:hover, a.gold-shimmer-btn:hover,
button.btn-gold-luster:hover, a.btn-gold-luster:hover,
a.bg-gold:hover, button.bg-gold:hover,
button[type="submit"].bg-gold:hover,
.chapter-btn[aria-selected="true"]:hover,
.menu-filter-btn[aria-pressed="true"]:hover {
  background-position: 100% 50% !important;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(180, 154, 101, 0.3) !important;
}

/* 3. Deslumbre suave, pausado y natural para navegación, tabs y botones secundarios (1.2s - 1.4s) */
a.btn-secondary-sheen, button.btn-secondary-sheen,
button.chapter-btn, button.menu-filter-btn, button.gallery-thumb-btn,
nav a {
  position: relative;
  overflow: hidden;
  transition: all 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  cursor: pointer !important;
}

a.btn-secondary-sheen::after, button.btn-secondary-sheen::after,
button.chapter-btn[aria-selected="false"]::after, button.menu-filter-btn[aria-pressed="false"]::after,
nav a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(180, 154, 101, 0.15), rgba(180, 154, 101, 0.25), transparent);
  transform: skewX(-25deg);
  transition: left 1.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

a.btn-secondary-sheen:hover::after, button.btn-secondary-sheen:hover::after,
button.chapter-btn[aria-selected="false"]:hover::after, button.menu-filter-btn[aria-pressed="false"]:hover::after,
nav a:hover::after {
  left: 170%;
}

/* Prevenir cualquier destello o reflejo blanco accidental sobre las tarjetas de platos en Carta y Especialidades */
.dish-item, .dish-item::before, .dish-item::after,
#especialidades .group, #especialidades .group::before, #especialidades .group::after {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
.dish-item:hover, #especialidades .group:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(180, 154, 101, 0.35) !important;
}

/* Items activos en navegación con transición distinguida */
.nav-item-active {
  background: rgba(30, 35, 33, 0.95);
  border: 1px solid rgba(180, 154, 101, 0.45);
  color: #B49A65 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(180, 154, 101, 0.2);
  transition: all 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* 4. Delimitadores con utensilios */
.utensil-divider, .utensil-delimiter {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 76rem !important;
  margin: 0 auto !important;
  padding: 2.5rem 1.5rem !important;
  position: relative !important;
  pointer-events: none !important;
}

.utensil-divider::before,
.utensil-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1.5px !important;
  display: block !important;
}
.utensil-divider::before {
  background: linear-gradient(90deg, transparent 5%, #B49A65 100%) !important;
}
.utensil-divider::after {
  background: linear-gradient(90deg, #B49A65 0%, transparent 95%) !important;
}

.utensil-divider-badge, .utensil-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  min-width: 3.5rem !important;
  border-radius: 9999px !important;
  background: #171B19 !important;
  border: 2px solid #B49A65 !important;
  margin: 0 1.5rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  color: #B49A65 !important;
  transform: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

.utensil-divider-badge:hover, .utensil-badge:hover {
  transform: none !important;
  border-color: #B49A65 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.utensil-divider-badge svg, .utensil-badge svg {
  stroke: #B49A65 !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

.utensil-divider-badge .material-symbols-outlined, .utensil-badge .material-symbols-outlined {
  color: #B49A65 !important;
  font-size: 24px !important;
}
/* Acabados de Pespunte Artesanal (Saddle Stitch / Costura Guarnicionera) */
.artisan-stitch {
  position: relative;
}
.artisan-stitch::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px dashed rgba(180, 154, 101, 0.45);
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
}
.saddle-stitch-top {
  position: relative;
}
.saddle-stitch-top::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, #B49A65 0, #B49A65 8px, transparent 8px, transparent 13px);
  opacity: 0.65;
  pointer-events: none;
  z-index: 10;
}
.saddle-stitch-border {
  position: relative;
  border: 1px solid rgba(180, 154, 101, 0.2) !important;
}
.saddle-stitch-border::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgba(180, 154, 101, 0.35);
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
}

/* Presentation extracted from the original inline styles. */
.presentation-1.presentation-1 { background: rgb(23, 27, 25); }
.presentation-2.presentation-2 { background: rgb(168, 140, 87); color: rgb(23, 27, 25); position: relative; }
.presentation-3.presentation-3 { opacity: 1; }
.presentation-4.presentation-4 { background: linear-gradient(135deg, rgb(180, 154, 101) 0%, rgb(166, 138, 85) 50%, rgb(187, 162, 111) 100%); }

[data-action="dishModal.open"]:focus-visible { outline: 2px solid #B49A65; outline-offset: 2px; }

/* Trazo de sobremesa: original engraved food illustrations and a shared maker's mark. */
.gastronomy-symbols { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* Illustrations live in the section margins; restored utensil dividers remain independent. */
.gastronomy-section { position: relative; isolation: isolate; overflow: hidden; }
.gastronomy-flourish {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  color: #B49A65;
}
.gastronomy-motif {
  position: absolute;
  width: clamp(54px, 6vw, 90px);
  height: auto;
  overflow: visible;
  opacity: .42;
}
.gastronomy-motif use { stroke: url(#engraved-gold); }
.motif--upper-left { top: 22px; left: clamp(8px, 1.4vw, 28px); transform: rotate(-14deg); }
.motif--upper-right { top: 26px; right: clamp(8px, 1.4vw, 28px); transform: rotate(12deg); }
.motif--middle-left { top: 48%; left: 12px; transform: rotate(-10deg); }
.motif--middle-right { top: 48%; right: 12px; transform: rotate(11deg); }
.motif--lower-left { bottom: 18px; left: clamp(12px, 2vw, 36px); transform: rotate(-8deg); }
.motif--lower-right { bottom: 18px; right: clamp(12px, 2vw, 36px); transform: rotate(14deg); }
.gastronomy-motif:nth-child(2) { color: #F3EBDD; }
.gastronomy-motif:nth-child(2) use { stroke: currentColor; }
.gastronomy-flourish--ink { color: #30291C; }
.gastronomy-flourish--ink .gastronomy-motif use { stroke: currentColor; }
.gastronomy-flourish--ink .gastronomy-motif:nth-child(2) { color: #FBF7F0; }
@media (max-width: 1279px) {
  /* Keep side illustrations in the clear top/bottom padding on narrower layouts. */
  .motif--middle-left { top: auto; bottom: 12px; left: calc(50% - 30px); }
  .motif--middle-right { top: 12px; right: calc(50% - 30px); }
  .gastronomy-motif { width: 56px; opacity: .28; }
}
@media (max-width: 639px) {
  .gastronomy-motif { width: 38px; opacity: .3; }
  .motif--upper-left, .motif--upper-right { top: 12px; }
  .motif--lower-left, .motif--lower-right { bottom: 10px; }
}

/* One editorial overview instead of repeated category cards. */
.offering-banner { background: #202522; border-block: 1px solid #B49A6538; padding: 42px 24px 48px; }
.offering-banner__inner { max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.6fr); gap: 48px; align-items: center; }
.offering-banner__eyebrow { color: #CDB687; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.offering-banner h2 { font: 500 clamp(22px, 2.5vw, 30px)/1.35 'Cinzel', serif; color: #F3EBDD; margin: 10px 0 16px; }
.offering-banner__link { display: inline-flex; align-items: center; gap: 12px; color: #CDB687; font-size: 12px; padding-block: 6px; border-bottom: 1px solid #B49A6566; text-decoration: none; }
.offering-banner__link:hover { color: #FBF7F0; border-color: currentColor; }
.offering-banner__link:focus-visible { outline: 2px solid #CDB687; outline-offset: 5px; }
.offering-banner__list { display: flex; flex-wrap: wrap; gap: 14px 0; list-style: none; padding: 0; margin: 0; }
.offering-banner__list li { display: flex; align-items: center; color: #E6DDCF; font: 400 clamp(14px, 1.4vw, 17px)/1.65 'Work Sans', sans-serif; }
.offering-banner__list li::after { content: ''; display: block; width: 3px; height: 3px; border-radius: 50%; background: #B49A65; margin-inline: 16px; flex-shrink: 0; }
.offering-banner__list li:last-child::after { display: none; }
@media (max-width: 767px) {
  .offering-banner { padding: 30px 24px 38px; }
  .offering-banner__inner { grid-template-columns: 1fr; gap: 24px; }
  .offering-banner__list { gap: 10px 0; }
  .offering-banner__list li::after { margin-inline: 11px; }
}

/* Manual hero carousel: preserve the original circular image composition. */
.hero-photo-controls { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 10px; padding: 3px 7px; border: 1px solid #B49A654D; border-radius: 999px; background: #171B19F2; }
.hero-photo-arrow { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #DFCDAB; font-size: 28px; line-height: 1; cursor: pointer; }
.hero-photo-dots { display: flex; gap: 0; }
.hero-photo-dots button { display: grid; place-items: center; width: 26px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.hero-photo-dots button::before { content: ''; width: 6px; height: 6px; border: 1px solid #B49A65; border-radius: 50%; }
.hero-photo-dots button[aria-pressed="true"]::before { background: #DFCDAB; border-color: #DFCDAB; }
.hero-photo-count { color: #DFCDAB; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero-photo-controls button:hover { color: #fff; }
.hero-photo-controls button:focus-visible { outline: 2px solid #CDB687; outline-offset: 1px; }
@media (max-width: 639px) { .hero-photo-controls { bottom: -24px; gap: 4px; } }

/* Final responsive and accessibility pass. */
html { scroll-padding-top: 6rem; }
img { max-width: 100%; }
main .grid > *, header > div > * { min-width: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 18px; background: #F3EBDD; color: #171B19; transform: translateY(-160%); border-radius: 6px; }
.skip-link:focus { transform: none; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #CDB687; outline-offset: 3px; }
#mobile-toggle { min-width: 44px; min-height: 44px; }
#mobile-nav { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
#mobile-nav a { display: flex; min-height: 44px; align-items: center; }
#nosotros [role="tablist"] { gap: 10px; }
.chapter-btn, .menu-filter-btn { min-height: 44px; }
#nosotros [role="tabpanel"] { min-width: 0; }
.hero-photo-slider { touch-action: pan-y; }
.hero-photo-controls { bottom: -16px; gap: 3px; max-width: 100%; }
.hero-photo-dots button { width: 44px; height: 44px; }
.hero-photo-arrow { flex: 0 0 44px; }
.hero-photo-count { min-width: 28px; }
#hero-slider-photo { aspect-ratio: 1; }
#dish-detail-modal { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
#dish-detail-modal > div { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
#dish-detail-modal .overflow-y-auto { overscroll-behavior: contain; min-height: 0; }
#dish-detail-modal button, #lightbox-modal button { min-width: 44px; min-height: 44px; }
#lightbox-modal > div { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
#lightbox-modal .min-h-\[300px\] { min-height: 0; }
#lightbox-img { max-height: 60vh; max-height: 60dvh; }
.dish-heading h3, #modal-dish-title { overflow-wrap: break-word; min-width: 0; }
@media (min-width: 1280px) and (max-width: 1400px) {
  header nav { gap: 0; }
  header nav a { padding-inline: 10px; font-size: 11px; letter-spacing: .04em; }
}
@media (max-width: 639px) {
  #inicio h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .hero-photo-controls { bottom: -24px; gap: 0; padding-inline: 3px; }
  .hero-photo-arrow { width: 44px; flex-basis: 44px; }
  .hero-photo-dots button { width: 44px; }
  .hero-photo-slider { margin-bottom: 24px; }
  .dish-heading { flex-wrap: wrap; }
  .dish-heading h3 { flex: 1 1 180px; }
  #modal-dish-title { font-size: 1.15rem; }
  #modal-dish-title + span { font-size: 1rem; }
  #dish-detail-modal .items-baseline { flex-wrap: wrap; }
  #contact-form input, #contact-form select, #contact-form textarea { font-size: 16px; }
  #contact-form > .grid { gap: 20px; }
}
@media (max-width: 359px) {
  header .tracking-widest { letter-spacing: .04em; font-size: 9px; }
  header .gap-3\.5 { gap: 8px; }
  .hero-photo-arrow, .hero-photo-dots button { width: 44px; }
  .hero-photo-arrow { flex-basis: 44px; }
  .hero-photo-count { display: none; }
  .hero-photo-controls { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Modal controls must retain absolute positioning; focus styling never alters layout. */
#dish-detail-modal [data-action="dishModal.close"].absolute {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
#lightbox-prev, #lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
#lightbox-prev { left: 12px; }
#lightbox-next { right: 12px; }
#dish-detail-modal .dish-modal-copy { min-width: 0; }
@media (min-width: 768px) {
  #dish-detail-modal .dish-modal-copy { padding-top: 72px; }
}