/*
 * Tema "Lake Placid Ivory".
 *
 * La paleta y la tipografía salen de analizar cómo se presentan de verdad los
 * restaurantes de lujo y los hoteles de los Adirondacks -- Mirror Lake Inn
 * (AAA cuatro diamantes, en Lake Placid), Lake Placid Lodge, The Point, y de
 * referencia en alta cocina Eleven Madison Park. Los cuatro coinciden en lo
 * mismo:
 *
 *   - fondo claro y cálido, no oscuro;
 *   - un solo color profundo y desaturado como ancla (verde bosque o marino);
 *   - acento apagado, usado con cuentagotas, nunca un oro brillante;
 *   - un serif de estilo antiguo para los títulos;
 *   - casi nada de color en la interfaz: el color fuerte lo ponen las fotos.
 *
 * El verde bosque ancla ya estaba en la marca de White Bear, así que la paleta
 * no es prestada: es la del restaurante, llevada al registro de sus vecinos.
 */
:root {
  --bg: #fbf9f4;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-solid: #ffffff;
  /* Los neutros van sesgados hacia el verde del ancla en vez de ser grises
     puros: es lo que hace que la pantalla se lea elegida y no por defecto. */
  --surface-alt: rgba(32, 48, 31, 0.05);
  --border: rgba(32, 48, 31, 0.16);
  --border-strong: rgba(32, 48, 31, 0.34);
  --text: #1c2420;
  --text-muted: #5f6b60;

  /* Verde bosque: el ancla. Es el color de los botones y del pie. */
  --forest: #20301f;
  --forest-light: #2e4529;

  /* Latón apagado. Sustituye al oro saturado: mismo origen, media saturación. */
  --brand: #7e6433;
  --brand-dark: #5e4a24;
  --brand-light: #9a7b3f;
  --on-brand: #ffffff;

  --accent: #41603c;
  --burgundy: #7a3b49;
  --danger: #8c2f39;
  --warning: #8a6206;
  --pending: #8a6206;
  --confirmed: #41603c;
  --seated: #8a5a1c;
  --completed: #5f6b60;
  --cancelled: #8c2f39;

  --shadow: 0 10px 34px rgba(28, 36, 32, 0.09);
  --glass-blur: 16px;
  --radius: 14px;

  /* EB Garamond es el serif que usa Eleven Madison Park, y es de la misma
     familia de estilo antiguo que el Orpheus del Mirror Lake Inn y el Minerva
     del Lake Placid Lodge: contraste moderado, nada de Didone llamativo.
     Outfit es literalmente la sans del Mirror Lake Inn. */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", "Inter", system-ui, -apple-system, Roboto, sans-serif;
  /* Para cifras que tienen que alinearse en columna. No es una mono: es la
     misma sans con cifras de ancho fijo, para no meter una tercera voz. */
  --font-mono: "Outfit", "Inter", system-ui, sans-serif;
}

/* El tema es claro por diseño (el fondo es una montaña brumosa), así que no
   cambia con la preferencia de color del sistema: se ve igual en ambos. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  padding-block: 0;
}

/* Lienzo del cielo 3D: detrás de todo, fijo, y nunca intercepta clics. */
.bg-3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: block;
  pointer-events: none;
}

/* Velo sobre el fondo 3D. Como el formulario no vive dentro de un panel, el
   texto cae directo sobre la montaña: esto aclara la columna central lo justo
   para que se lea, y deja las cordilleras asomar por los bordes. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 62% 72% at 50% 42%,
    rgba(251, 249, 244, 0.88) 0%,
    rgba(251, 249, 244, 0.62) 58%,
    rgba(251, 249, 244, 0.2) 100%
  );
}

/* La foto de la cumbre de Whiteface, a quince minutos del restaurante, en una
   banda propia a ancho completo.
 *
 * Detrás del formulario no funcionaba: el bosque de la mitad inferior es casi
 * negro, y el velo necesario para que las etiquetas se leyeran dejaba la foto
 * irreconocible. Aquí se ve entera y a plena fuerza, y el texto conserva su
 * fondo limpio -- que es exactamente lo que hacen los sitios de referencia:
 * la fotografía va en bloques propios, nunca debajo del texto. */
.hero-photo {
  position: relative;
  width: 100%;
  height: clamp(240px, 40vh, 420px);
  overflow: hidden;
  background: var(--surface-alt);
}

.hero-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El original es vertical y la banda apaisada. El recorte se centra en la
     línea del horizonte -- la cumbre y las Altas Cumbres al fondo -- y no en
     el cielo ni en la barandilla del mirador. */
  object-position: center 46%;
  display: block;
}

/* Logo sobre la foto. Se dimensiona por la ALTURA de la banda (72%) y no por
   el ancho de la ventana: la banda va de 240 a 420 px según la pantalla, y un
   óvalo con ancho fijo se salía de ella en móviles apaisados. El aspect-ratio
   es el del archivo (1483x1034); el tope de ancho cubre los móviles
   estrechos, y object-fit: contain evita deformarlo si el tope se aplica.
   Va por encima del degradado inferior (z-index) para no teñirse de marfil. */
.hero-logo {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 2;
  height: 72%;
  aspect-ratio: 1483 / 1034;
  max-width: 80%;
  transform: translate(-50%, -50%);
  display: block;
  /* Sombra para despegarlo de la foto; sigue el contorno del óvalo. */
  filter: drop-shadow(0 10px 22px rgba(4, 14, 30, 0.5));
  pointer-events: none;
}

.hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Difumina el canto inferior hacia el marfil para que la banda no termine en
   una línea dura contra el formulario. */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(251, 249, 244, 0), var(--bg));
  pointer-events: none;
}

/* Línea de establecimiento: nombre, plaza y año. Va debajo de la foto, sobre
   el marfil, y no encima de ella -- sobre la imagen cambiaba de legibilidad
   según el píxel que le tocara detrás. */
.establishment-line {
  margin: 16px 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 0 16px;
  text-wrap: balance;
}

@media (max-width: 560px) {
  /* En teléfono la línea se parte en dos; se afloja el tracking para que
     entre completa antes de recurrir a cortarla. */
  .establishment-line {
    letter-spacing: 0.1em;
    font-size: 0.66rem;
  }
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

header.hero h1,
.welcome-splash-title,
.confirmation h2 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* Los títulos de sección van en el serif, en redonda y en minúsculas: en los
   sitios de referencia el título de sección es una línea de libro, no una
   etiqueta de interfaz. */
.section-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  /* Latón oscuro: es el único sitio donde el acento aparece en texto, y por
     eso funciona. En las referencias el color se gasta en un solo lugar. */
  color: var(--brand-dark);
  text-transform: none;
}

/* Cifras que se comparan o se alinean en columna. */
.hero-hours,
.rating-value,
.review-stars,
.confirmation .details dd {
  font-variant-numeric: tabular-nums;
}

label,
.hint {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

/* ---------- reserva + carrusel de platos ---------- */
/* En pantalla angosta es una sola columna y el carrusel no se muestra: no
   hay sitio al lado del formulario, y apilarlo encima solo alejaría el
   primer campo de la vista. */
.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

@media (min-width: 1000px) {
  /* El contenedor se ensancha solo aquí, para que el formulario encoja a la
     izquierda sin que el resto de las secciones cambie de ancho. */
  .container {
    max-width: 1160px;
  }
  .booking-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  }
  /* Las tarjetas de abajo conservan la medida de lectura original. */
  .container > .card,
  .container > .confirmation {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
}

.dish-rail {
  display: none;
}

@media (min-width: 1000px) {
  .dish-rail {
    display: block;
    /* Acompaña al formulario mientras se baja, en vez de desaparecer al
       primer scroll. 92px = alto del encabezado pegajoso + aire. */
    position: sticky;
    top: 92px;
  }
  .dish-rail[hidden] {
    display: none;
  }
}

.dish-rail-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.dish-rail-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.dish-rail-frame img.is-current {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dish-rail-frame img {
    transition: none;
  }
}

.dish-rail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 0 2px;
}

.dish-rail-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Control de pausa. No es un adorno: un carrusel que avanza solo al lado de
   un formulario tiene que poder detenerse, o distrae justo a quien está
   tecleando sus datos. */
.dish-rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text-muted);
  cursor: pointer;
}

.dish-rail-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.dish-rail-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.container > .card,
.container > form {
  animation: fade-in-up 0.5s ease both;
}

.container > .card:nth-child(3) {
  animation-delay: 0.05s;
}

.container > .card:nth-child(4) {
  animation-delay: 0.1s;
}

.container > .card:nth-child(5) {
  animation-delay: 0.15s;
}

.container > .card:nth-child(6) {
  animation-delay: 0.2s;
}

.container > .card:nth-child(7) {
  animation-delay: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  .container > .card,
  .container > form {
    animation: none;
  }
}

/* Aparición al hacer scroll. La clase .reveal la pone el JS, nunca el HTML:
   si el JS no carga, todo queda visible como siempre. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- pantalla de bienvenida ---------- */
.welcome-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-dark);
  background-image: url("../images/welcome-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.welcome-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
}

.welcome-splash.welcome-splash-hide {
  opacity: 0;
  pointer-events: none;
}

.welcome-splash[hidden] {
  display: none;
}

.welcome-splash-content {
  position: relative;
  text-align: center;
  color: #fff9f0;
  padding: 0 20px;
}

.welcome-splash-brand {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
}

.welcome-splash-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

@media (max-width: 560px) {
  .welcome-splash-icon {
    width: 60px;
    height: 60px;
  }
}

.welcome-splash-title {
  font-size: 2rem;
  margin: 0;
  font-weight: 800;
}

/* ---------- header ---------- */
header.hero {
  background: rgba(251, 249, 244, 0.86);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  color: var(--text);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

header.hero .hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}

.brand-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

header.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (min-width: 560px) {
  header.hero h1 {
    font-size: 1.25rem;
  }
}

.lang-switcher {
  margin-left: auto;
  display: flex;
  gap: 4px;
  background: var(--surface-alt);
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}

.lang-switcher button {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.lang-switcher button.active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.lang-switcher button:active {
  transform: translateY(1px) scale(0.96);
}

@media (max-width: 560px) {
  .brand-row {
    flex-wrap: wrap;
  }
  .lang-switcher {
    margin-left: 0;
  }
}

.hero-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rating-stars {
  position: relative;
  display: inline-block;
  font-size: 0.95em;
  line-height: 1;
  letter-spacing: 1px;
}

.rating-stars-bg {
  color: var(--border);
}

.rating-stars-fg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  /* El oro brillante se quedaba en 2.2:1 sobre marfil. El latón de la paleta
     llega a 5.3:1 y además deja de ser el amarillo chillón de reseña. */
  color: var(--brand);
}

.rating-value {
  font-weight: 700;
  color: var(--text);
}

.hero-details {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.hero-hours {
  margin-top: 16px;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-muted);
}

/* ---------- cards / sections ---------- */
/* La unidad base: una lámina blanca sobre el marfil, apenas despegada. Las
   referencias de lujo no apilan sombras ni bordes brillantes -- el papel está
   casi plano y lo que separa las secciones es el aire entre ellas. */
.card {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-top: 14px;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 14px 40px rgba(28, 36, 32, 0.13);
}

@media (prefers-reduced-motion: no-preference) {
  .card:hover {
    transform: translateY(-2px);
  }
}

/* El resto de .section-title vive arriba, con la tipografía. Aquí solo
   queda el margen: tener dos bloques peleándose por el mismo selector es
   justo como se pierde un color sin darse cuenta. */
.section-title {
  margin: 0 0 14px;
}

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.photo-gallery[hidden] {
  display: none;
}

.photo-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: var(--surface-alt);
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.photo-gallery img:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow);
}

/* ---------- reseñas de clientes ---------- */
#review-form {
  margin-top: 0;
  box-shadow: none;
  border: none;
  padding: 0;
  background: transparent;
}

#review-form .btn-primary {
  margin-top: 6px;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

.review-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface-alt);
}

.review-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.review-stars {
  color: #d99a1f;
  letter-spacing: 1px;
  font-size: 0.95rem;
}

.review-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.review-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

.review-photo {
  margin-top: 10px;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

@media (max-width: 480px) {
  .photo-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- info adicional (accesibilidad, servicios, etc.) ---------- */
.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.info-toggle-btn {
  flex-shrink: 0;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--brand-dark);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--border);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.info-toggle-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--border);
}

.info-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}

.info-grid[hidden] {
  display: none;
}

.info-group-title {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}

.info-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

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

/* ---------- form ---------- */
form {
  margin-top: 24px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

/* El formulario de reserva no vive dentro de un panel: los campos flotan
   directamente sobre el fondo 3D y van apareciendo uno a uno al bajar. */
#reservation-form {
  margin-top: 32px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Una sola columna: así cada campo entra en escena por separado
   mientras se hace scroll, en vez de aparecer de dos en dos. */
#reservation-form .form-grid {
  grid-template-columns: 1fr;
  gap: 34px;
}

#reservation-form .field {
  margin-bottom: 0;
  gap: 10px;
}

#reservation-form label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
}

#reservation-form input,
#reservation-form select,
#reservation-form textarea {
  /* Sin panel detrás, el campo necesita su propio fondo blanco para
     recortarse del marfil y de la montaña. */
  background: rgba(255, 255, 255, 0.94);
  padding: 15px 16px;
  font-size: 1.02rem;
}

#reservation-form .hint {
  color: var(--text-muted);
}

#reservation-form .section-title {
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 30px;
  text-wrap: balance;
}

#reservation-form #submit-btn {
  margin-top: 36px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field.full {
  grid-column: 1 / -1;
}

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

input, select, textarea {
  font: inherit;
  padding: 12px 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text);
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder, textarea::placeholder {
  color: rgba(95, 107, 96, 0.72);
}

input:hover, select:hover, textarea:hover {
  border-color: var(--border-strong);
}

/* Campo bloqueado (hoy: el formulario de reserva cuando el staff apaga las
   reservaciones desde su panel). Sin esto se veía igual que uno normal,
   porque el fondo propio tapa el gris con el que el navegador marca un
   campo deshabilitado -- y un campo que parece activo pero no deja
   escribir se lee como una página rota, no como una decisión del local. */
input:disabled, select:disabled, textarea:disabled {
  background: color-mix(in srgb, var(--text-muted) 9%, var(--surface-solid));
  color: var(--text-muted);
  cursor: not-allowed;
}

input:disabled:hover, select:disabled:hover, textarea:disabled:hover {
  border-color: var(--border);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
  border-color: var(--forest);
}

textarea {
  resize: vertical;
  min-height: 70px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  padding: 13px 22px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}

/* El botón es el verde bosque macizo, no un degradado dorado: en las
   referencias el color de acción es el ancla profunda de la marca. Se
   conserva la ilusión de hundimiento al pulsar, que ya pedías antes. */
.btn-primary {
  background: var(--forest);
  color: var(--on-brand);
  width: 100%;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.86rem;
  box-shadow: 0 3px 0 #16210f, 0 8px 20px rgba(32, 48, 31, 0.22);
}

.btn-primary:hover {
  background: var(--forest-light);
  box-shadow: 0 3px 0 #16210f, 0 10px 26px rgba(32, 48, 31, 0.3);
}

.btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #16210f, 0 1px 2px rgba(28, 36, 32, 0.14);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-loading::after {
    animation-duration: 1.4s;
  }
}

.hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.alert {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.alert-error {
  background: rgb(241, 228, 228);
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--danger);
  border: 1px solid rgba(156, 59, 59, 0.35);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}

.alert-success {
  background: rgb(230, 234, 228);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
  border: 1px solid rgba(74, 103, 65, 0.35);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.confirmation {
  display: none;
  text-align: center;
  padding: 32px 20px;
}

.confirmation .check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgb(222, 228, 221);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 16px;
}

.confirmation h2 {
  margin: 0 0 8px;
}

.confirmation .details {
  background: var(--surface-alt);
  border-radius: 10px;
  padding: 16px;
  margin: 18px 0;
  text-align: left;
  font-size: 0.92rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
}

.confirmation .details dt {
  color: var(--text-muted);
  font-weight: 600;
}

.confirmation .details dd {
  margin: 0;
}

footer.site-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 24px 20px 40px;
}

footer.site-footer a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  header.hero h1 {
    font-size: 1.25rem;
  }
}

/* ---------- consentimiento y enlaces legales ---------- */
.consent {
  margin: 4px 0 16px;
}

.consent-check,
#reservation-form .consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  cursor: pointer;
  /* Es una frase para leer, no el rótulo de un campo: sin las mayúsculas
     ni el espaciado de los <label> normales. */
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--text);
}

.consent-check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--forest);
}

.consent .hint {
  margin: 8px 0 0 28px;
  font-size: 0.75rem;
  line-height: 1.45;
}

.consent a {
  color: var(--brand-dark);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 10px;
}

footer.site-footer .footer-links a,
.confirm-legal a {
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.confirm-legal {
  font-size: 0.75rem;
  margin-top: 14px;
}