/* ==========================================================================
   HUELLAS · EXPERIENCIA GASTRONÓMICA & TRADICIÓN (RESTO & BAR)
   Sistema de diseño: Quiet Luxury, Editorial Cinematográfico, Piedra & Ladrillo Colonial
   ========================================================================== */

body {
  /* Paleta Maestra Quiet Luxury */
  --fondo: #0c0c0d;
  --fondo-secundario: #141211;
  --fondo-hundido: #171412;
  --fondo-card: rgba(22, 18, 16, 0.72);
  --fondo-rgb: 12 12 13;

  /* Textos */
  --texto: #fcfbf9;
  --texto-suave: #a1a1aa;
  --texto-tenue: #71717a;
  --marfil: #f5f5f0;

  /* Bordes & Filetes */
  --borde: rgba(255, 255, 255, 0.08);
  --borde-hover: rgba(255, 255, 255, 0.18);
  --borde-dorado: rgba(212, 175, 55, 0.22);
  --borde-dorado-fuerte: rgba(212, 175, 55, 0.65);
  --filete: rgba(212, 175, 55, 0.28);

  /* Acentos de Luz & Tierra */
  --dorado: #d4af37;
  --dorado-suave: #c5a059;
  --dorado-brillo: #ffd875;
  --dorado-glow: rgba(212, 175, 55, 0.28);
  --terracota: #a84720;
  --terracota-oscura: #261f1c;
  --oliva-profundo: #1e2922;

  --acento: var(--dorado);
  --acento-fuerte: var(--dorado-brillo);
  --acento-texto: var(--dorado-suave);
  --acento-texto-fuerte: var(--dorado-brillo);
  --sobre-acento: #0c0c0d;

  /* Tipografía */
  --serif-display: "Cinzel", "Playfair Display", "Instrument Serif", Georgia, serif;
  --serif-editorial: "Cormorant Garamond", "Instrument Serif", Georgia, serif;
  --sans-editorial: "Plus Jakarta Sans", "DM Sans", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", monospace;

  /* Textura de Grano Cinematográfico y Fondo */
  --grano-ruido: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");

  background-color: var(--fondo);
  background-image: var(--grano-ruido);
  color: var(--texto);
  font-family: var(--sans-editorial);
  /* clip, no hidden. hidden convierte al body en un contenedor de scroll y eso
     rompe el position:sticky de los pines: el cuadro del cafe y el de la carta
     dejaban de quedarse quietos y se iban para arriba en mitad de la
     animacion, dejando dos pantallas vacias. clip recorta igual pero no crea
     contenedor. Se deja hidden antes como respaldo para Safari viejo. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* ==========================================================================
   Efectos de Luz Ambiental & Fondo
   ========================================================================== */
.ambient-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  animation: floatGlow 14s ease-in-out infinite alternate;
}
.ambient-glow--1 {
  width: 550px;
  height: 550px;
  top: 15%;
  right: -100px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.45) 0%, rgba(168, 71, 32, 0.2) 60%, transparent 80%);
}
.ambient-glow--2 {
  width: 600px;
  height: 600px;
  top: 55%;
  left: -150px;
  background: radial-gradient(circle, rgba(168, 71, 32, 0.35) 0%, rgba(30, 41, 34, 0.25) 60%, transparent 80%);
  animation-delay: -7s;
}

@keyframes floatGlow {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 40px) scale(1.08); }
  100% { transform: translate(40px, -30px) scale(0.95); }
}

/* Secciones alternas con textura profunda */
.seccion--hundida {
  background-color: var(--fondo-hundido);
  background-image: var(--grano-ruido), radial-gradient(circle at 50% 50%, rgba(28, 23, 21, 0.6) 0%, transparent 100%);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

/* ==========================================================================
   Tipografía Radiante y Acabados de Lujo
   ========================================================================== */
h1, h2, h3 {
  font-family: var(--serif-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--marfil);
}

.texto-radiante {
  background: linear-gradient(135deg, #ffffff 0%, #f8ead2 50%, #d4af37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 20px var(--dorado-glow));
}

.etiqueta-editorial {
  font-family: var(--sans-editorial);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dorado-suave);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.etiqueta-editorial::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--dorado-suave);
}

/* ==========================================================================
   Navegación Fija Minimalista
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav.nav--scrolled {
  background: rgba(12, 12, 13, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--borde);
}

.nav__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav__marca {
  font-family: var(--serif-display);
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marfil);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.3s;
}
.nav__marca:hover { opacity: 0.85; }

.mundos {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--borde);
  border-radius: 99px;
  padding: 3px;
  gap: 2px;
}
.mundos a {
  font-family: var(--sans-editorial);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 99px;
  text-decoration: none;
  color: var(--texto-suave);
  transition: all 0.3s;
}
.mundos a[aria-current="page"] {
  background: rgba(212, 175, 55, 0.18);
  color: var(--dorado-brillo);
  border: 1px solid var(--borde-dorado);
}

.nav__links {
  display: none;
  list-style: none;
  gap: 28px;
  align-items: center;
}
.nav__links a {
  font-family: var(--sans-editorial);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  text-decoration: none;
  transition: color 0.3s, text-shadow 0.3s;
}
.nav__links a:hover {
  color: var(--dorado-brillo);
  text-shadow: 0 0 12px var(--dorado-glow);
}

.nav__cta-reserva {
  display: none;
  border: 1px solid var(--borde-dorado);
  background: rgba(212, 175, 55, 0.08);
  color: var(--dorado-brillo) !important;
  padding: 9px 18px !important;
  border-radius: 99px;
  transition: all 0.4s ease;
  /* Sin esto, en una pantalla de 1440 el botón parte "Reservar Mesa" en dos
     renglones y la barra queda más alta de un lado que del otro. */
  white-space: nowrap;
  flex: 0 0 auto;
}
.nav__cta-reserva:hover {
  background: var(--dorado) !important;
  color: #0c0c0d !important;
  box-shadow: 0 0 20px var(--dorado-glow);
}

@media (min-width: 960px) {
  .nav__links { display: flex; }
  .nav__cta-reserva { display: inline-flex; }
  .nav__toggle { display: none; }
}

/* ==========================================================================
   HERO SECTION: Fondo de Video Atmosférico & Quiet Luxury
   ========================================================================== */
.hero-video {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hero-video__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-video__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
}

/* Doble capa de oscurecimiento cinematográfico */
.hero-video__overlay-gradiente {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 12, 13, 0.75) 0%,
    rgba(12, 12, 13, 0.38) 45%,
    rgba(12, 12, 13, 0.85) 85%,
    #0c0c0d 100%
  );
  z-index: 1;
}

.hero-video__overlay-grano {
  position: absolute;
  inset: 0;
  background-image: var(--grano-ruido);
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
}

.hero-video__contenido {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 860px;
  padding: 0 24px;
  margin-top: 40px;
}

.hero-video__identificador {
  margin-bottom: 18px;
}

.hero-video__titulo {
  font-family: var(--serif-display);
  font-size: clamp(48px, 12vw, 110px);
  line-height: 0.95;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 400;
}

.hero-video__subtitulo {
  font-family: var(--serif-editorial);
  font-size: clamp(18px, 3.2vw, 24px);
  line-height: 1.5;
  font-weight: 300;
  font-style: italic;
  color: var(--texto-suave);
  max-width: 620px;
  margin: 0 auto 36px auto;
}

.hero-video__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

/* Botones de Lujo Editorial */
.boton-editorial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 28px;
  border-radius: 99px;
  font-family: var(--sans-editorial);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.boton-editorial--primario {
  background: transparent;
  color: var(--marfil);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
}
.boton-editorial--primario:hover {
  background: var(--marfil);
  color: #0c0c0d;
  border-color: var(--marfil);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.boton-editorial--historia {
  background: rgba(212, 175, 55, 0.12);
  color: var(--dorado-brillo);
  border: 1px solid var(--borde-dorado);
  backdrop-filter: blur(8px);
}
.boton-editorial--historia:hover {
  background: rgba(212, 175, 55, 0.24);
  border-color: var(--dorado-brillo);
  box-shadow: 0 0 25px var(--dorado-glow);
  transform: translateY(-2px);
}
.boton-editorial--historia svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  transition: transform 0.3s;
}
.boton-editorial--historia:hover svg {
  transform: scale(1.15);
}

/* Controles en las esquinas del Hero */
/* A la izquierda a propósito: en la esquina de abajo a la derecha vive el
   botón flotante de WhatsApp (position: fixed, z-index 60), que le pasaba por
   encima y se comía el toque — el visitante creía que el audio no andaba y en
   realidad estaba abriendo WhatsApp. */
.hero-video__audio-toggle {
  position: absolute;
  bottom: 34px;
  left: 34px;
  right: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(18, 16, 15, 0.65);
  border: 1px solid var(--borde);
  padding: 10px 16px;
  border-radius: 99px;
  color: var(--texto-suave);
  cursor: pointer;
  font-family: var(--sans-editorial);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
.hero-video__audio-toggle:hover {
  border-color: var(--borde-dorado);
  color: var(--marfil);
}
.hero-video__audio-toggle.is-active {
  color: var(--dorado-brillo);
  border-color: var(--borde-dorado);
}

.audio-equalizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}
.audio-equalizer span {
  display: block;
  width: 2.5px;
  background: currentColor;
  border-radius: 2px;
  height: 4px;
  transition: height 0.2s;
}
.hero-video__audio-toggle.is-active .audio-equalizer span:nth-child(1) {
  animation: eqBounce 0.9s infinite alternate ease-in-out;
}
.hero-video__audio-toggle.is-active .audio-equalizer span:nth-child(2) {
  animation: eqBounce 1.2s infinite alternate ease-in-out 0.2s;
}
.hero-video__audio-toggle.is-active .audio-equalizer span:nth-child(3) {
  animation: eqBounce 0.8s infinite alternate ease-in-out 0.4s;
}

@keyframes eqBounce {
  0% { height: 3px; }
  100% { height: 14px; }
}

/* Indicador de scroll lento */
.hero-video__scroll-down {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--texto-tenue);
  font-family: var(--sans-editorial);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.hero-video__scroll-down:hover { color: var(--dorado-brillo); }

.hero-video__scroll-line {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.hero-video__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: var(--dorado-brillo);
  animation: scrollDownPulse 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollDownPulse {
  0% { transform: translateY(-100%); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(220%); opacity: 0; }
}

/* ==========================================================================
   MODAL EDITORIAL: Reproductor Cinematográfico ("Nuestra Historia")
   ========================================================================== */
.modal-historia {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-historia.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-historia__fondo {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.modal-historia__cuerpo {
  position: relative;
  z-index: 2;
  width: 94vw;
  max-width: 1020px;
  max-height: 92vh;
  background: #110f0e;
  border: 1px solid var(--borde-dorado);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-historia.is-open .modal-historia__cuerpo {
  transform: scale(1);
}

.modal-historia__barra-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--borde);
  background: rgba(18, 16, 14, 0.8);
}
.modal-historia__subtitulo {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado-suave);
}

.modal-historia__cerrar {
  background: transparent;
  border: 1px solid var(--borde);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--texto-suave);
  cursor: pointer;
  transition: all 0.3s;
}
.modal-historia__cerrar:hover {
  color: var(--marfil);
  border-color: var(--borde-dorado);
  background: rgba(212, 175, 55, 0.12);
}

.modal-historia__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.modal-historia__player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Controles Custom del Reproductor */
.modal-historia__controles {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 11, 0.95) 100%);
  padding: 16px 20px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
}

.modal-historia__timeline {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
}
.modal-historia__timeline::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dorado-brillo);
  cursor: pointer;
  box-shadow: 0 0 10px var(--dorado-glow);
}

.modal-historia__botones {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-historia__grupo-izq {
  display: flex;
  align-items: center;
  gap: 16px;
}
.modal-historia__btn-ctrl {
  background: none;
  border: none;
  color: var(--marfil);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 4px;
  transition: color 0.2s;
}
.modal-historia__btn-ctrl:hover { color: var(--dorado-brillo); }
.modal-historia__btn-ctrl svg { width: 18px; height: 18px; fill: currentColor; }
.modal-historia__tiempo {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--texto-suave);
}

/* ==========================================================================
   SECCIÓN CONCEPTUAL: "El Espacio y la Memoria"
   Layout Asimétrico Estilo Revista de Arquitectura
   ========================================================================== */
.espacio-memoria {
  padding: 100px 0;
}

.espacio-memoria__encabezado {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px auto;
}
.espacio-memoria__titulo {
  font-size: clamp(32px, 6vw, 52px);
  margin-top: 14px;
  margin-bottom: 18px;
}
.espacio-memoria__bajada {
  color: var(--texto-suave);
  font-size: 16.5px;
  line-height: 1.65;
}

.espacio-memoria__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 860px) {
  .espacio-memoria__grilla {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
    gap: 32px;
  }
  .card-espacio--principal {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
}

.card-espacio {
  position: relative;
  background: var(--fondo-card);
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.card-espacio:hover {
  border-color: var(--borde-dorado);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 30px var(--dorado-glow);
  transform: translateY(-4px) scale(1.015);
}

.card-espacio__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.card-espacio--principal .card-espacio__img-wrap {
  aspect-ratio: 4 / 3;
}

.card-espacio__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-espacio:hover .card-espacio__img {
  transform: scale(1.05);
}

.card-espacio__overlay-sombra {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(12, 12, 13, 0.9) 100%);
}

.card-espacio__cuerpo {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-espacio__num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dorado-suave);
  margin-bottom: 8px;
}
.card-espacio__nombre {
  font-family: var(--serif-display);
  font-size: 24px;
  color: var(--marfil);
  margin-bottom: 12px;
}
.card-espacio__texto {
  color: var(--texto-suave);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ==========================================================================
   CARRUSEL DE SALÓN & BAR: Fotografías Reales con Micro-movimientos
   ========================================================================== */
.seccion-carrusel {
  padding: 80px 0;
}

/* El marco se achica hasta donde la foto entra entera, y queda centrado: así
   la galería nunca recorta ni deja bandas negras a los costados. El max-width
   es el alto disfrazado de ancho — con 3/2, 66svh de alto son 99svh de ancho,
   y sin eso en una notebook la foto quedaba más alta que la pantalla. */
.carrusel {
  position: relative;
  width: 100%;
  max-width: calc(66vh * 1.5);
  max-width: calc(66svh * 1.5);
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--borde-dorado);
  background: #110e0c;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.8), 0 0 35px var(--dorado-glow);
}

/* 3 / 2 es la proporción real de las fotos (1600 x 1067). Con 16 / 9 el
   object-fit: cover les comía el 15% de arriba y de abajo: se perdían el
   techo de los arcos y el piso de las mesas. */
.carrusel__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 0;
  overflow: hidden;
  /* El navegador se queda con el gesto vertical (scrollear la página) y nos
     deja el horizontal para pasar de foto. Sin esto, en el celular el dedo
     hace las dos cosas a la vez y no hace bien ninguna. */
  touch-action: pan-y;
}

.carrusel__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.carrusel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* El micro-movimiento va al revés que antes: la foto entra apenas agrandada y
   se asienta en su tamaño real. Así el movimiento sigue estando, pero termina
   mostrando la foto entera en vez de terminar recortándola. */
.carrusel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 4.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.carrusel__slide.is-active .carrusel__img {
  transform: scale(1);
}

.carrusel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 12, 13, 0.2) 0%,
    rgba(12, 12, 13, 0.4) 50%,
    rgba(12, 12, 13, 0.9) 100%
  );
  z-index: 1;
}

/* La ficha no pasa de dos tercios del ancho: es texto apoyado en una esquina
   de la foto, no una barra que la tapa de lado a lado. */
.carrusel__caption {
  position: absolute;
  bottom: 26px;
  left: 26px;
  right: 26px;
  z-index: 2;
  max-width: min(560px, 66%);
  background: rgba(14, 12, 11, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid var(--borde-dorado);
}
.carrusel__tag {
  font-family: var(--sans-editorial);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado-brillo);
  margin-bottom: 6px;
  display: block;
}
.carrusel__titulo {
  font-family: var(--serif-display);
  font-size: 24px;
  color: var(--marfil);
  margin-bottom: 6px;
}
.carrusel__desc {
  font-size: 14px;
  color: var(--texto-suave);
  line-height: 1.5;
}

/* Botones de Navegación del Carrusel */
.carrusel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(14, 12, 11, 0.75);
  border: 1px solid var(--borde-dorado);
  color: var(--marfil);
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.3s;
}
.carrusel__nav:hover {
  background: var(--dorado);
  color: #0c0c0d;
  box-shadow: 0 0 20px var(--dorado-glow);
}
.carrusel__nav svg { width: 18px; height: 18px; fill: currentColor; }
.carrusel__nav--prev { left: 20px; }
.carrusel__nav--next { right: 20px; }

/* Indicadores / Barra de Progreso */
.carrusel__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #0f0d0c;
  border-top: 1px solid var(--borde);
}
.carrusel__dots {
  display: flex;
  gap: 8px;
}
.carrusel__dot {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.carrusel__dot.is-active {
  background: var(--dorado-brillo);
  width: 44px;
  box-shadow: 0 0 10px var(--dorado-glow);
}
.carrusel__progress-bar {
  width: 120px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
  overflow: hidden;
}
.carrusel__progress-fill {
  height: 100%;
  background: var(--dorado);
  width: 16%;
  transition: width 0.3s;
}

/* ==========================================================================
   SECCIONES CAFETERÍA Y CARTA (RESTAURADAS A SU DISEÑO ORIGINAL)
   Pared de ladrillo beige, tinta casi negra y terracota.
   Esto permite que los 100 fotogramas del canvas se fundan 100% integrados
   con el fondo original, exactamente como estaba diseñado el proyecto.
   ========================================================================== */

/* Mismo fondo oscuro que el resto de la página. Antes estas tres secciones
   tenían su propia paleta beige de pared de ladrillo y cortaban la página al
   medio; los 100 fotogramas del café y de la carta son fotos a sangre (no
   tienen fondo beige pegado), así que sobre oscuro se leen como dos
   fotografías enmarcadas y la página queda de una sola pieza.
   El degradado tenue da el respiro que antes daba el cambio de color. */
.cafe,
.cartasec,
.seccion--carta-texto {
  position: relative;
  background-color: var(--fondo);
  background-image: radial-gradient(
    120% 80% at 50% 0%,
    rgba(212, 175, 55, 0.05) 0%,
    rgba(12, 12, 13, 0) 60%
  );
  color: var(--texto);
}

/* 1. CAFETERÍA (#cafeteria) */
.cafe {
  position: relative;
  height: 300vh;
  scroll-margin-top: 62px;
}

.cafe__pin {
  position: sticky;
  top: 62px;
  height: calc(100svh - 62px);
  min-height: 460px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 30px;
  padding: 20px;
}

.cafe[data-cafe="quieto"] { height: auto; }
.cafe[data-cafe="quieto"] .cafe__pin {
  position: static;
  height: auto;
  min-height: 0;
  padding: var(--espacio-seccion) 20px;
}

.cafe__cuadro {
  position: relative;
  width: min(74vw, 380px);
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-hundido);
  border: 1px solid var(--borde-dorado);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px var(--dorado-glow);
}
.cafe__cuadro img,
.cafe__cuadro canvas {
  display: block;
  width: 100%;
  height: auto;
}
.cafe__cuadro canvas {
  position: absolute;
  inset: 0;
  height: 100%;
}

.cafe__texto {
  text-align: center;
  max-width: 32ch;
}
.cafe__texto .etiqueta {
  color: var(--dorado-suave);
  font-family: var(--sans-editorial);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
/* Cormorant y no Cinzel: Cinzel es de versalitas y convertiría "Primero, un
   café." en un grito. Cormorant ya es la serif de la bajada del hero, así que
   el titular sigue perteneciendo a la página. */
.cafe__texto h2 {
  margin-top: 10px;
  font-family: var(--serif-editorial);
  font-size: clamp(42px, 7.5vw, 66px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--marfil);
}
.cafe__frase {
  color: var(--texto-suave);
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
}

.cafe__pista {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dorado-suave);
  margin-top: 24px;
  transition: opacity 0.45s;
}
.cafe__pista[data-visible="false"] { opacity: 0; }
.cafe__pista span { display: none; }
.cafe[data-cafe="cargando"] .cafe__pista span:first-child { display: inline; }
.cafe[data-cafe="listo"] .cafe__pista span:last-child { display: inline; }

@media (min-width: 900px) {
  /* columnas auto y el par centrado: con 1fr para el texto quedaba un hueco
     muerto entre el titular y la foto en pantallas anchas */
  .cafe__pin {
    grid-auto-flow: column;
    grid-template-columns: auto auto;
    align-items: center;
    justify-items: start;
    justify-content: center;
    gap: clamp(48px, 6vw, 92px);
    width: 100%;
    max-width: var(--ancho-max);
    margin: 0 auto;
  }
  .cafe__texto {
    order: 1;
    text-align: left;
    max-width: 30ch;
  }
  .cafe__cuadro {
    order: 2;
    width: min(40vw, 420px);
  }
  .cafe[data-cafe="quieto"] .cafe__pin { justify-items: start; }
}

/* 2. LA CARTA (#carta) */
.cartasec {
  position: relative;
  height: 300vh;
  scroll-margin-top: 62px;
}

.cartasec__pin {
  position: sticky;
  top: 62px;
  height: calc(100svh - 62px);
  min-height: 460px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
  padding: 20px;
}

.cartasec[data-carta="quieto"] { height: auto; }
.cartasec[data-carta="quieto"] .cartasec__pin {
  position: static;
  height: auto;
  min-height: 0;
  padding: var(--espacio-seccion) 20px;
}

.cartasec__cuadro {
  position: relative;
  height: min(42svh, 330px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-hundido);
  border: 1px solid var(--borde-dorado);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px var(--dorado-glow);
}
.cartasec__cuadro img,
.cartasec__cuadro canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.cartasec__cuadro canvas {
  position: absolute;
  inset: 0;
}

.cartasec__texto {
  text-align: center;
  max-width: 32ch;
}
.cartasec__texto .etiqueta {
  color: var(--dorado-suave);
  font-family: var(--sans-editorial);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.cartasec__texto h2 {
  margin-top: 10px;
  font-family: var(--serif-editorial);
  font-size: clamp(42px, 7.5vw, 66px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--marfil);
}
.cartasec__frase {
  color: var(--texto-suave);
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
}
/* El mismo botón de contorno dorado que usa el resto de la página, en lugar
   del pill terracota que venía de la paleta beige. */
.cartasec__boton {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 99px;
  border: 1px solid var(--borde-dorado-fuerte);
  background: rgba(212, 175, 55, 0.08);
  color: var(--dorado-brillo);
  font-family: var(--sans-editorial);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.cartasec__boton:hover {
  background: var(--dorado);
  color: #0c0c0d;
  box-shadow: 0 0 24px var(--dorado-glow);
}

.cartasec__pista {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dorado-suave);
  margin-top: 18px;
  transition: opacity 0.45s;
}
.cartasec__pista[data-visible="false"] { opacity: 0; }
.cartasec__pista span { display: none; }
.cartasec[data-carta="cargando"] .cartasec__pista span:first-child { display: inline; }
.cartasec[data-carta="listo"] .cartasec__pista span:last-child { display: inline; }

@media (min-width: 900px) {
  .cartasec__pin {
    grid-auto-flow: column;
    grid-template-columns: auto auto;
    align-items: center;
    justify-items: start;
    justify-content: center;
    gap: clamp(48px, 6vw, 92px);
    width: 100%;
    max-width: var(--ancho-max);
    margin: 0 auto;
  }
  .cartasec__texto {
    order: 1;
    text-align: left;
    max-width: 30ch;
  }
  .cartasec__cuadro {
    order: 2;
    height: min(64svh, 500px);
  }
  .cartasec[data-carta="quieto"] .cartasec__pin { justify-items: start; }
}

/* 3. LA CARTA EN TEXTO
   Una hoja de carta apoyada sobre la página: borde dorado fino, papel oscuro
   y tipografía de menú — nombre en sans, precio en mono y la línea de puntos
   que los une, como en una carta impresa de verdad. */
.seccion--carta-texto {
  padding-top: var(--espacio-seccion);
  padding-bottom: var(--espacio-seccion);
}
.seccion--carta-texto .contenedor {
  text-align: center;
}
.seccion--carta-texto .etiqueta-editorial {
  margin-bottom: 14px;
}
.seccion--carta-texto .seccion__titulo {
  font-family: var(--serif-display);
  font-size: clamp(30px, 5.5vw, 48px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--marfil);
}
.seccion--carta-texto .seccion__bajada {
  color: var(--texto-suave);
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 54ch;
  margin-inline: auto;
}

.carta {
  text-align: left;
  margin-top: 44px;
  padding: clamp(24px, 4.5vw, 52px);
  border: 1px solid var(--borde-dorado);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(23, 20, 18, 0.92), rgba(13, 12, 11, 0.92));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.carta__grupo + .carta__grupo {
  margin-top: 44px;
}

.carta__grupo h3 {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--serif-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dorado-brillo);
  margin-bottom: 22px;
}
.carta__grupo h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--borde-dorado-fuerte), transparent);
}

.carta__grupo ul {
  list-style: none;
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
}

/* Tres columnas: plato | puntos | precio. Los puntos son un ::before, así que
   no hay que ensuciar el HTML con un span de relleno. */
.carta__grupo li {
  display: grid;
  grid-template-columns: auto minmax(20px, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
}
/* align-self: end y no baseline: una caja vacía no tiene línea de texto, así
   que el navegador le inventa una baseline y los puntos quedaban flotando muy
   por encima del renglón. Pegados al piso de la fila caen justo donde tienen
   que caer. */
.carta__grupo li::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  height: 0;
  margin-bottom: 5px;
  border-bottom: 1px dotted rgba(212, 175, 55, 0.38);
}
.carta__plato {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--sans-editorial);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--marfil);
}
.carta__grupo li .dato {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--dorado-suave);
  white-space: nowrap;
}
.carta__grupo li p {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--texto-suave);
  margin-top: 4px;
  max-width: 46ch;
}
.carta__grupo li p:empty { display: none; }

/* Dos columnas de verdad: con `columns` los grupos fluyen y se acomodan solos
   (Principales tiene seis platos y los demás cuatro; con un grid de dos
   columnas quedaban huecos enormes). break-inside evita que un grupo se parta
   al medio entre las dos columnas. */
@media (min-width: 860px) {
  .carta {
    columns: 2;
    column-gap: clamp(40px, 5vw, 72px);
    column-rule: 1px solid rgba(212, 175, 55, 0.12);
  }
  .carta__grupo {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }
  .carta__grupo + .carta__grupo {
    margin-top: 0;
  }
  .carta__grupo {
    padding-bottom: 42px;
  }
}

/* 4. MODAL ORIGINAL DE LA CARTA IMPRESA */
.carta-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
}
.carta-modal[hidden] { display: none; }

.carta-modal__fondo {
  position: absolute;
  inset: 0;
  background: rgb(18 13 10 / 0.9);
  opacity: 0;
  transition: opacity 0.26s ease;
}
.carta-modal[data-abierto="true"] .carta-modal__fondo { opacity: 1; }

.carta-modal__caja {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.26s ease;
}
.carta-modal[data-abierto="true"] .carta-modal__caja { opacity: 1; }

.carta-modal__visor {
  max-width: min(94vw, 720px);
  max-height: 92svh;
  overflow: hidden;
  overscroll-behavior: contain;
  border-radius: var(--radio);
  box-shadow: 0 34px 90px rgb(0 0 0 / 0.55);
}

.carta-modal__lupa {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  user-select: none;
}
.carta-modal[data-zoom="true"] .carta-modal__lupa { cursor: zoom-out; }

.carta-modal__hoja {
  display: block;
  aspect-ratio: 1588 / 2246;
  max-width: 94vw;
  max-height: 92svh;
  width: auto;
  height: auto;
  background: var(--fondo);
}

.carta-modal[data-zoom="true"] .carta-modal__visor { overflow: auto; }
.carta-modal[data-zoom="true"] .carta-modal__hoja {
  max-width: none;
  max-height: none;
  width: min(1588px, 250vw);
}

.carta-modal__cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(18 13 10 / 0.6);
  color: rgb(255 255 255 / 0.92);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}
.carta-modal__cerrar:hover { background: rgb(18 13 10 / 0.95); }

.carta-modal__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}
.carta-modal[data-cargando="true"] .carta-modal__pie span { display: none; }
.carta-modal[data-cargando="true"] .carta-modal__pie::after { content: "Abriendo la carta…"; }

html[data-trabado] {
  overflow: hidden;
  padding-right: var(--barra-scroll, 0px);
}

/* ==========================================================================
   HORARIOS & EXPERIENCIA
   ========================================================================== */
.horarios {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}
@media (min-width: 640px) {
  .horarios {
    grid-template-columns: repeat(3, 1fr);
  }
}
.horarios div {
  background: var(--fondo-card);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  backdrop-filter: blur(8px);
}
.horarios dt {
  font-family: var(--serif-display);
  font-size: 18px;
  color: var(--marfil);
  margin-bottom: 8px;
}
.horarios dd {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--dorado-brillo);
}

.resto__nota {
  color: var(--texto-suave);
  font-size: 15px;
  line-height: 1.65;
  border-left: 2px solid var(--dorado-suave);
  padding-left: 18px;
  margin-top: 24px;
}

/* ==========================================================================
   PIE DE PÁGINA & ENLACES
   ========================================================================== */
.pie {
  background: #080809;
  border-top: 1px solid var(--borde);
  padding: 60px 0 40px 0;
  position: relative;
  z-index: 5;
}
.pie__grilla {
  display: grid;
  gap: 36px;
}
@media (min-width: 768px) {
  .pie__grilla {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pie .etiqueta {
  color: var(--dorado-suave);
  margin-bottom: 12px;
  display: block;
}
.pie p {
  color: var(--texto-suave);
  font-size: 14.5px;
  line-height: 1.7;
}
.pie a {
  color: var(--marfil);
  text-decoration: none;
  transition: color 0.3s;
}
.pie a:hover {
  color: var(--dorado-brillo);
}
.pie__legal {
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid var(--borde);
  font-size: 13px;
  color: var(--texto-tenue);
  text-align: center;
}

/* Botón flotante WhatsApp */
.wa-flotante {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(37, 211, 102, 0.4);
  transition: transform 0.3s, box-shadow 0.3s;
}
.wa-flotante:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 30px rgba(37, 211, 102, 0.6);
}
.wa-flotante svg { width: 28px; height: 28px; fill: currentColor; }

/* Cruce hacia el hostal */
.cruce {
  display: block;
  background: var(--fondo-card);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 36px;
  text-decoration: none;
  color: inherit;
  backdrop-filter: blur(12px);
  transition: all 0.4s ease;
}
.cruce:hover {
  border-color: var(--borde-dorado);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px var(--dorado-glow);
  transform: translateY(-3px);
}
.cruce__titulo {
  display: block;
  font-family: var(--serif-display);
  font-size: 28px;
  color: var(--marfil);
  margin: 10px 0 12px 0;
}
.cruce__texto {
  display: block;
  color: var(--texto-suave);
  font-size: 15.5px;
  max-width: 60ch;
  margin-bottom: 20px;
}
.cruce__pie {
  font-family: var(--sans-editorial);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dorado-brillo);
  font-weight: 600;
}

/* ==========================================================================
   OPTIMIZACIONES DE PRECISIÓN PARA DISPOSITIVOS MÓVILES (iOS SAFARI & ANDROID)
   ========================================================================== */

/* 1. Comportamiento Global Táctil & Renderizado */
* {
  -webkit-tap-highlight-color: transparent;
}

html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Mismo motivo que arriba: clip no rompe los pines, hidden si. */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100vw;
}

button, a, input, select, textarea {
  touch-action: manipulation;
  -webkit-appearance: none;
}

/* 2. Soporte Safe Area Insets (iPhone Notch, Dynamic Island, Android Nav) */
.nav {
  padding-top: max(env(safe-area-inset-top, 0px), 0px);
}

.wa-flotante {
  bottom: max(24px, calc(16px + env(safe-area-inset-bottom, 0px)));
  right: max(20px, calc(16px + env(safe-area-inset-right, 0px)));
}

.hero-video__audio-toggle {
  bottom: max(34px, calc(20px + env(safe-area-inset-bottom, 0px)));
  left: max(20px, calc(16px + env(safe-area-inset-left, 0px)));
}

.hero-video__controles-esquinas {
  bottom: max(24px, calc(16px + env(safe-area-inset-bottom, 0px)));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.modal-historia__cerrar,
.carta-modal__cerrar {
  top: max(16px, calc(12px + env(safe-area-inset-top, 0px)));
  right: max(16px, calc(12px + env(safe-area-inset-right, 0px)));
  min-width: 44px;
  min-height: 44px;
}

/* 3. Menú Móvil Editorial de Alta Gama (iOS & Android) */
.nav__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(12, 12, 13, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-top: 1px solid var(--borde-dorado);
  border-bottom: 1px solid var(--borde-dorado);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9);
  padding: 16px 20px max(24px, calc(16px + env(safe-area-inset-bottom, 0px)));
  z-index: 99;
}
.nav__panel[data-abierto="true"] {
  display: block;
  animation: navPanelSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes navPanelSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav__panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.nav__panel a {
  display: block;
  padding: 14px 16px;
  font-family: var(--sans-editorial);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marfil);
  border-radius: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.25s ease;
  min-height: 46px;
  display: flex;
  align-items: center;
}
.nav__panel a:hover,
.nav__panel a:active {
  background: rgba(212, 175, 55, 0.12);
  color: var(--dorado-brillo);
  padding-left: 20px;
  border-bottom-color: rgba(212, 175, 55, 0.2);
}

.nav__toggle {
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  font-family: var(--sans-editorial);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado-brillo);
  border: 1px solid var(--borde-dorado);
  background: rgba(212, 175, 55, 0.08);
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.nav__toggle:hover,
.nav__toggle:active {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--dorado);
}

/* 4. Solución Dinámica de Altura de Pantalla para iOS Safari (Evita Saltos de Barra de Direcciones) */
.hero-video {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 560px;
}

.cartasec__pin,
.cafe__pin {
  height: calc(100vh - 62px);
  height: calc(100svh - 62px);
  height: calc(100dvh - 62px);
}

/* 5. Hardware Acceleration para Fluidez a 60/120Hz (ProMotion en iPhone & 120Hz en Android) */
.hero-video__video,
.carrusel__slide,
.modal-historia__caja,
.carta-modal__visor {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 7. Carrusel de la Galería en Pantallas Chicas
   En celular la foto no se comparte con nada: el texto baja debajo de la
   imagen y las flechas se mudan a la barra del pie. Antes la tarjeta y los
   dos botones se apoyaban encima de la foto y la tapaban casi entera. */
@media (max-width: 720px) {
  .seccion-carrusel {
    padding: 56px 0;
  }

  /* El alto lo manda la foto + el texto, no un min-height fijo */
  .carrusel__viewport {
    aspect-ratio: auto;
    min-height: 0;
  }
  .carrusel__track {
    align-items: stretch;
  }
  .carrusel__slide {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  /* 3 / 2, la proporción real de las fotos: entran enteras, sin recorte. Con
     4 / 3 el cover les cortaba los costados. */
  .carrusel__img {
    height: auto;
    aspect-ratio: 3 / 2;
    flex: 0 0 auto;
  }
  /* Sin el zoom lento: con el texto debajo, la imagen agrandada se derrama
     sobre el texto (el overflow del slide ya no la recorta) y en el celular
     el efecto no se nota */
  .carrusel__img,
  .carrusel__slide.is-active .carrusel__img {
    transform: none;
    transition: none;
  }

  /* El degradado oscuro existía para que se leyera el texto encima de la
     foto; abajo ya no hace falta */
  .carrusel__overlay {
    display: none;
  }

  .carrusel__caption {
    position: static;
    flex: 1 1 auto;
    max-width: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 18px 18px 20px;
  }
  .carrusel__titulo {
    font-size: 20px;
  }
  .carrusel__desc {
    font-size: 13.5px;
  }

  /* Flechas fuera de la foto: van al pie, pegadas a la izquierda. A la
     derecha no pueden ir porque ahi vive el boton flotante de WhatsApp
     (position: fixed) y le taparia la flecha de siguiente. */
  .carrusel__pie {
    padding: 12px 14px 12px 104px;
    min-height: 58px;
    gap: 12px;
  }
  .carrusel__progress-bar {
    display: none;
  }
  /* Puntos mas chicos: entre las flechas y el boton de WhatsApp queda poco
     lugar en un telefono de 360 px */
  .carrusel__dots {
    gap: 5px;
  }
  .carrusel__dot {
    width: 16px;
  }
  .carrusel__dot.is-active {
    width: 26px;
  }
  .carrusel__nav {
    top: auto;
    bottom: 11px;
    transform: none;
    width: 36px;
    height: 36px;
  }
  .carrusel__nav svg {
    width: 16px;
    height: 16px;
  }
  .carrusel__nav--prev {
    left: 14px;
    right: auto;
  }
  .carrusel__nav--next {
    left: 58px;
    right: auto;
  }
}

/* 8. Quien se muestra en la barra de arriba, y en que pantalla
   Estas cuatro lineas viven al final a proposito. El display del boton "Menu"
   y el de .boton-editorial (del que hereda el CTA "Reservar Mesa") se declaran
   mas abajo en este archivo que las reglas del nav, asi que por orden de
   cascada le ganaban a los display:none de arriba: en el celular se mostraban
   los dos a la vez, entre ambos desbordaban la barra y empujaban el "Menu"
   fuera de la pantalla -o sea, no habia forma de abrir el menu en un telefono-,
   y en escritorio aparecia un boton "Menu" que ahi no va. */
@media (max-width: 959px) {
  .nav__toggle { display: inline-flex; }
  .nav__cta-reserva { display: none; }
}
@media (min-width: 960px) {
  .nav__toggle { display: none; }
  .nav__cta-reserva { display: inline-flex; }
}

/* 10. La franja incómoda: notebooks de 1024 a 1200
   A partir de 960 px se muestran a la vez marca + conmutador + los seis links
   + "Reservar Mesa", y hasta 1200 px eso no entra: el botón se salía por la
   derecha (en 1024 quedaba cortado en "RESERVAR ME"). Acá se achica todo un
   punto en vez de esconder links. */
@media (min-width: 960px) and (max-width: 1200px) {
  .nav__interior {
    gap: 14px;
  }
  .nav__links {
    gap: 15px;
  }
  .nav__links a {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .mundos a {
    font-size: 11px;
    padding: 5px 10px;
    letter-spacing: 0.06em;
  }
  .nav__cta-reserva {
    padding: 8px 13px !important;
    font-size: 11px;
  }
}

/* 9. La barra de arriba en telefonos angostos
   Con los tamanos de escritorio, marca + conmutador Resto/Hostal + "Menu" no
   entran en 390 px y el "Menu" se seguia saliendo por la derecha. Se achican
   los tres y se esconde el <nav> de los links: en el telefono los links viven
   en el panel desplegable, ahi solo aportaba un hueco vacio. */
@media (max-width: 600px) {
  .nav__interior {
    gap: 10px;
  }
  .nav__interior > nav {
    display: none;
  }
  .nav__marca {
    font-size: 17px;
    letter-spacing: 0.12em;
  }
  .mundos a {
    font-size: 11px;
    padding: 5px 11px;
  }
  .nav__toggle {
    font-size: 11px;
    padding: 8px 13px;
    letter-spacing: 0.1em;
  }
}

/* 5. LA CARTA QUE SE REARMA SOLA (js/carta-viva.js)
   ─────────────────────────────────────────────────────────────────────────
   Los platos salen del sistema de la caja, así que la carta ya no son cuatro
   grupos fijos: son los que haya, repartidos en los momentos del día. Cada
   momento lleva su título, y los grupos de abajo son los mismos .carta__grupo
   de siempre. */
.carta__pestana {
  font-family: var(--serif-display);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--marfil);
  margin: 0 0 34px;
}
.carta__pestana + .carta__grupo {
  margin-top: 0;
}
.carta__grupo + .carta__pestana {
  margin-top: 56px;
}

/* Cuándo se tocó un precio por última vez. Es la fecha del último cambio de la
   carta, no la de la última consulta: si el local no cambió nada en tres días,
   acá dice hace tres días. */
.carta__nota {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--texto-suave);
  margin: 36px 0 0;
}

/* En escritorio la carta corre en dos columnas. Un título de momento del día
   tiene que cruzarlas: si no, quedaría encabezando una sola columna y los
   grupos de la otra colgarían de un título que no es el suyo. */
@media (min-width: 860px) {
  .carta__pestana,
  .carta__nota {
    -webkit-column-span: all;
    column-span: all;
  }
  .carta__grupo + .carta__pestana {
    margin-top: 24px;
  }
}

/* La carta de la web va sin precios (pedido del 20-09-2026). El renglón queda
   siendo solo el plato, así que sobra la columna de la derecha y sobran los
   puntitos, que existían para llevar el ojo hasta el número. */
.carta--sin-precios .carta__grupo li {
  grid-template-columns: 1fr;
}
.carta--sin-precios .carta__grupo li::before {
  content: none;
}

/* La firma de Catamarca Software, ultima linea del pie. El color va explicito
   porque .firma-cs hereda, y lo que hereda del pie negro seria el gris de los
   enlaces: acá queremos el tono apagado de la linea legal. */
.pie__firma {
  margin-top: 16px;
  text-align: center;
  color: var(--texto-tenue);
}