/* ============ Tokens ============ */
:root {
  --bg: #1B140E;
  --bg-elevated: #241B13;
  --bg-card: #2A1F16;
  --bg-card-hover: #322418;
  --border: rgba(243, 234, 217, 0.10);
  --border-strong: rgba(243, 234, 217, 0.18);

  --text: #F3EAD9;
  --text-muted: #C4B6A2;
  --text-faint: #9A8C79;

  --accent: #DE6B35;
  --accent-hover: #EA7C48;
  --accent-dark: #B14F22;
  --accent-ink: #1B140E;

  --scrim: #150E08;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px -2px rgba(10, 6, 3, 0.45);
  --shadow-md: 0 16px 40px -12px rgba(10, 6, 3, 0.55);
  --shadow-lg: 0 24px 60px -16px rgba(10, 6, 3, 0.65);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --container: 1200px;

  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background:
    linear-gradient(rgba(27, 20, 14, 0.94), rgba(27, 20, 14, 0.97)),
    url('../images/interior-1.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 900px) {
  /* background-attachment: fixed is expensive/buggy on mobile Safari */
  body { background-attachment: scroll; }
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -0.005em; text-transform: uppercase; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

.icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Custom scrollbar (webkit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-card-hover); border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Numerals in prices stay aligned */
.item-price, .trust-item strong {
  font-variant-numeric: tabular-nums;
}

/* ============ Reveal on scroll ============ */
.has-js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.has-js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 160ms var(--ease-out), background 200ms ease, border-color 200ms ease, box-shadow 250ms ease;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-accent:hover { background: var(--accent-hover); box-shadow: 0 10px 28px -8px rgba(222, 107, 53, 0.55); transform: translateY(-1px); }
  .btn-ghost:hover { border-color: var(--border-strong); background: rgba(243,234,217,0.06); }
  .btn-outline:hover { background: var(--accent); color: var(--accent-ink); }
}
.btn-accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px -6px rgba(222, 107, 53, 0.45); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }

/* ============ Nav ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(27, 20, 14, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 52px; height: 52px; object-fit: contain; filter: invert(1) brightness(1.6); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.01em; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-links a { font-size: 0.92rem; color: var(--text-muted); transition: color 160ms ease; }
.nav-links a:hover { color: var(--text); }
.nav-cta-mobile { display: none; }
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  padding: 6px;
}

.lang-toggle {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color 160ms ease, color 160ms ease;
}
.lang-toggle span { opacity: 0.4; margin: 0 2px; }
.lang-toggle.is-en { color: var(--accent); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .lang-toggle:hover { border-color: var(--text-muted); color: var(--text); }
}

@media (max-width: 900px) {
  .nav-cta-desktop { display: none; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);
    margin-left: 0;
    width: auto;
    background: var(--bg-elevated);
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 20px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--ease-out);
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links a { font-size: 1.1rem; color: var(--text); }
  .nav-cta-mobile { display: inline-flex; margin-top: 12px; }
}

/* ============ Hero (full-bleed background slider) ============ */
/* ============ Grill reel: pinned full-screen video, scroll-driven zoom ============ */
/* 300vh wrapper keeps the video pinned to the viewport for two extra
   screens of scroll. Its slow zoom (1 -> 1.2) and the tagline's fade-in are
   both plain functions of scroll position — no independent animation
   clock, so scrolling back up reverses everything smoothly. Just the one
   scene here on purpose: the dish photos live in "Nuestra cocina" below,
   not duplicated up here. */
.grill-reel { position: relative; height: 300vh; background: #000; }
.grill-reel-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.grill-reel-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  align-items: flex-end;
  will-change: opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.grill-reel-scene.is-active { opacity: 1; z-index: 1; }
.grill-reel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  will-change: transform, object-position;
}
.grill-reel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.15) 100%);
}
.grill-reel-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 96px;
  z-index: 2;
  color: #fff;
  padding: 0 24px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.grill-reel-eyebrow {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.grill-reel-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.grill-reel-sub {
  margin: 12px 0 0;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 700px) {
  .grill-reel-text { bottom: 64px; }
}

.hero {
  position: relative;
  padding: 96px 0;
}
.hero-content {
  position: relative;
  max-width: 620px;
}
.hero-content h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 20px;
  text-wrap: balance;
}
.hero-content p {
  color: var(--text-muted);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
  max-width: 46ch;
  margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  transform: translateX(-50%);
  animation: hero-scroll-bob 2.4s var(--ease-in-out) infinite;
  transition: border-color 160ms ease, color 160ms ease;
}
.hero-scroll-cue .icon { width: 18px; height: 18px; }
@keyframes hero-scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 7px); }
}
@media (hover: hover) and (pointer: fine) {
  .hero-scroll-cue:hover { border-color: var(--accent); color: var(--accent); }
}
@media (max-width: 900px) {
  .hero { padding: 64px 0 56px; }
  .hero-content { max-width: 100%; }
}

/* ============ Trust strip ============ */
.trust-strip { border-bottom: 1px solid var(--border); background: var(--bg-elevated); }
.trust-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  padding: 18px 20px;
  justify-content: center;
}
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--text-muted); }
.trust-item .icon { color: var(--accent); font-size: 1.1rem; }
.trust-item strong { color: var(--text); }
.trust-item small { color: var(--text-faint); }

/* ============ Nuestro local ============ */
.local { position: relative; padding: 88px 0; overflow: hidden; }
.local-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 60%;
  filter: brightness(1.15);
}
.local-scrim {
  position: absolute; inset: 0;
  /* Near-horizontal (not diagonal) so the text column is darkened evenly
     top-to-bottom, independent of where a line happens to sit vertically.
     The second layer eases the brighter facade back down to the page's
     ambient darkness at the very bottom, so the next section doesn't cut
     in as a visible seam. */
  background:
    linear-gradient(100deg, rgba(20,14,9,0.45) 0%, rgba(20,14,9,0.58) 32%, rgba(20,14,9,0.88) 50%, rgba(20,14,9,0.93) 100%),
    linear-gradient(180deg, transparent 80%, rgba(20,14,9,0.55) 100%);
}
.local-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.local-photo {
  margin: 0;
  padding: 14px;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-card-hover));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.local-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.local-content h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 20px; }
.local-content p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.65; margin-bottom: 24px; }
.local-highlights { display: flex; flex-direction: column; gap: 14px; }
.local-highlights li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
}
.local-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 860px) {
  .local-grid { grid-template-columns: 1fr; gap: 32px; }
  .local-photo img { aspect-ratio: 4 / 3; }
}

/* ============ Nuestra cocina (carousel) ============ */
.kitchen { padding: 88px 0; }
.kitchen h2 { text-align: center; margin-bottom: 12px; font-size: clamp(1.8rem, 3vw, 2.2rem); }

.carousel-hint { display: none; text-align: center; color: var(--text-faint); font-size: 0.85rem; margin: 0 0 28px; }
@media (hover: none), (pointer: coarse) {
  .carousel-hint { display: block; }
}
.carousel {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .carousel { cursor: grab; }
  .carousel.is-dragging { cursor: grabbing; }
}
.carousel-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}
.carousel-slide {
  flex: 0 0 300px;
  margin: 0;
}
.carousel-slide img {
  width: 300px;
  height: 340px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.carousel-slide figcaption {
  margin-top: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
@media (max-width: 900px) {
  .carousel-slide { flex-basis: 240px; }
  .carousel-slide img { width: 240px; height: 280px; }
}
@media (max-width: 560px) {
  .carousel-slide { flex-basis: 200px; }
  .carousel-slide img { width: 200px; height: 230px; }
}

/* ============ Carta completa (sidebar tabs) ============ */
.menu-full { padding: 88px 0; }
.menu-full h2 { text-align: center; margin-bottom: 32px; font-size: clamp(1.8rem, 3vw, 2.2rem); }

/* Menu book: a vertical category index (real wood-grain) beside the pages */
.menu-layout {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 28px;
  align-items: start;
}
.menu-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background-image:
    linear-gradient(rgba(20, 14, 9, 0.42), rgba(20, 14, 9, 0.5)),
    url('../images/wood-texture.webp');
  background-size: 260px auto;
}
.menu-tab {
  flex: 0 0 auto;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: rgba(20, 14, 9, 0.4);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.3;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, padding-left 160ms ease;
}
.menu-tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); padding-left: 18px; }
@media (hover: hover) and (pointer: fine) {
  .menu-tab:not(.is-active):hover { border-color: rgba(255,255,255,0.5); color: #fff; }
}

.menu-panels {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 26px 6px;
  min-height: 360px;
}
.menu-panel { display: none; }
.menu-panel.is-active {
  display: block;
  animation: menu-panel-in 320ms var(--ease-out);
}
@keyframes menu-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel.is-active { animation: none; }
}
.panel-note { color: var(--text-faint); font-size: 0.85rem; padding: 14px 0 0; }

/* Classic printed-menu rhythm: name, a dotted leader that fills the gap,
   then the price. Two columns once there's room to breathe. */
.item-list {
  padding: 6px 0 18px;
  columns: 2;
  column-gap: 36px;
}
.item-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 0;
  break-inside: avoid;
}
.item-name {
  order: 1;
  min-width: 0;
}
.item-name > small,
.item-name > em.item-en {
  display: block;
  color: var(--text-faint);
  font-size: 0.78rem;
  font-style: italic;
  margin-top: 2px;
}
.item-list li::after {
  content: "";
  order: 2;
  flex: 1 1 12px;
  min-width: 12px;
  align-self: flex-end;
  border-bottom: 1px dotted var(--border-strong);
  margin-bottom: 5px;
}
.item-price { order: 3; flex: 0 0 auto; font-weight: 700; color: var(--accent); white-space: nowrap; }
.menu-note { color: var(--text-faint); font-size: 0.85rem; padding-bottom: 16px; }

@media (max-width: 800px) {
  .menu-layout { grid-template-columns: 1fr; }
  .menu-sidebar {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
  }
  .menu-sidebar::-webkit-scrollbar { display: none; }
  .menu-tab { width: auto; white-space: nowrap; }
  .item-list { columns: 1; }
}

/* ============ Testimonials ============ */
.testimonials { padding: 88px 0; background: var(--bg-elevated); }
.testimonials h2 { text-align: center; margin-bottom: 12px; font-size: clamp(1.8rem, 3vw, 2.2rem); }

.rating-summary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
  color: var(--text-muted);
  margin: 0 auto 48px;
  width: fit-content;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease-out);
}
.rating-summary:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .rating-summary:hover { border-color: var(--accent); background: var(--bg-card-hover); }
}
.rating-stars { display: inline-flex; gap: 2px; color: var(--accent); }
.rating-stars .icon { width: 15px; height: 15px; }
.rating-summary strong { color: var(--text); }
.rating-arrow { color: var(--text-faint); width: 15px; height: 15px; }

.quote-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.quote-stack { display: flex; flex-direction: column; gap: 24px; }
.quote {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.quote-stars { display: inline-flex; gap: 3px; color: var(--accent); margin-bottom: 14px; }
.quote-stars .icon { width: 14px; height: 14px; }
.quote p { font-size: 1.02rem; line-height: 1.55; color: var(--text); margin-bottom: 18px; }
.quote-featured {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: var(--border-strong);
  background: linear-gradient(160deg, var(--bg-card), var(--bg-card-hover));
}
.quote-featured::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.16;
}
.quote-featured .quote-stars { margin-bottom: 18px; }
.quote-featured .quote-stars .icon { width: 16px; height: 16px; }
.quote-featured p { font-size: 1.2rem; }
.quote footer { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.quote footer span { font-weight: 400; color: var(--text-faint); font-size: 0.85rem; }

.testimonials-cta { display: flex; justify-content: center; margin-top: 40px; }

@media (max-width: 800px) {
  .quote-grid { grid-template-columns: 1fr; }
}

/* ============ Reservation form ============ */
.reservation { padding: 88px 0; }
.reservation-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.reservation-inner h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 12px; }
.reservation-inner > p { color: var(--text-muted); margin-bottom: 40px; }
.reservation-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.field label span { font-weight: 400; color: var(--text-faint); }
.field input, .field textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 160ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field-hint { margin-top: -4px; color: var(--text-faint); font-size: 0.78rem; }
.field input:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(222, 107, 53, 0.28);
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.field textarea { resize: vertical; min-height: 90px; }
.form-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; }
.form-alt-link { font-size: 0.88rem; color: var(--text-faint); text-decoration: underline; text-underline-offset: 3px; }
.form-alt-link:hover { color: var(--text-muted); }

@media (max-width: 640px) {
  .reservation-form { grid-template-columns: 1fr; padding: 24px; }
}

/* ============ Location & contact ============ */
.location { padding: 88px 0; background: var(--bg-elevated); }
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.location-info h2 { font-size: clamp(1.8rem, 3vw, 2.2rem); margin-bottom: 28px; }
.contact-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .icon { color: var(--accent); font-size: 1.2rem; margin-top: 3px; flex-shrink: 0; }
.contact-list li > div { display: flex; flex-direction: column; gap: 2px; }
.contact-list strong { font-size: 0.9rem; }
.contact-list span, .contact-list a { color: var(--text-muted); font-size: 0.95rem; }
.contact-list a:hover { color: var(--accent); }
.location-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* Opening hours table */
.hours-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.hours-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.hours-header strong { font-size: 0.9rem; }
.hours-header .icon { color: var(--accent); }
.hours-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--bg-elevated);
  color: var(--text-muted);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.hours-status.is-open { color: #8fd19e; }
.hours-status.is-open .status-dot { background: #4caf6b; box-shadow: 0 0 0 3px rgba(76, 175, 107, 0.22); }
.hours-status.is-closed { color: var(--text-faint); }
.hours-status.is-closed .status-dot { background: var(--text-faint); }

.hours-table { display: flex; flex-direction: column; }
.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.hours-row + .hours-row { margin-top: 1px; }
.hours-day { color: var(--text-muted); }
.hours-time { color: var(--text); font-variant-numeric: tabular-nums; }
.hours-time.hours-closed { color: var(--text-faint); }
.hours-row.is-today {
  background: rgba(222, 107, 53, 0.12);
}
.hours-row.is-today .hours-day { color: var(--text); font-weight: 700; }
.hours-row.is-today .hours-time { color: var(--accent); font-weight: 600; }

@media (max-width: 480px) {
  .hours-row { font-size: 0.85rem; }
  .hours-time { text-align: right; }
}

.location-map { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.map-link { position: relative; display: block; }
.map-link img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .map-link:hover img { transform: scale(1.03); }
}
.map-open {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform 160ms var(--ease-out), background 200ms ease;
}
.map-link:active .map-open { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .map-link:hover .map-open { background: var(--accent); color: var(--accent-ink); }
}

@media (max-width: 900px) {
  .location-grid { grid-template-columns: 1fr; }
  .map-link img { height: 300px; }
}

/* ============ Contacto ============ */
.contact-section { padding: 88px 0; }
.contact-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.contact-inner h2 { font-size: clamp(1.8rem, 3vw, 2.2rem); margin-bottom: 40px; }
.contact-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  text-align: left;
  margin-bottom: 40px;
}
.contact-actions { display: flex; justify-content: center; }

@media (max-width: 640px) {
  .contact-list-grid { grid-template-columns: 1fr; }
}

/* ============ Footer ============ */
.footer { padding: 56px 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.footer-brand img { width: 60px; height: 60px; object-fit: contain; filter: invert(1) brightness(1.6); margin-bottom: 12px; }
.footer-brand p { color: var(--text-faint); font-size: 0.9rem; }
.footer-col h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 14px; }
.footer-col p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; margin-bottom: 8px; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { padding: 24px 0; text-align: center; color: var(--text-faint); font-size: 0.85rem; }

@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}