/* ==========================================================================
   EL GATO NEGRO — hoja de estilos única
   1 Tokens · 2 Reset · 3 Utilidades · 4 Tipografía · 5 Componentes
   6 Secciones · 7 Efectos · 8 Responsive · 9 Reduced motion
   ========================================================================== */

/* =============================================================
   0. TIPOGRAFÍAS (van en el sitio, no se descargan de Google)
   El sitio funciona sin internet de terceros y carga más rápido.
   ============================================================= */
@font-face {
  font-family: "Anton";
  src: url("assets/fonts/anton-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Solo para el nombre del bar (hero y pie). No usarla en textos largos:
   es manuscrita y a tamaño chico se vuelve ilegible. */
@font-face {
  font-family: "Rock Salt";
  src: url("assets/fonts/rock-salt-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* Paleta: negro y amarillo. Nada más. */
  --negro:      #0d0c0a;
  --negro-2:    #151310;
  --negro-3:    #1d1a15;
  --linea:      #2c2820;
  --amarillo:   #ffc72c;
  --amarillo-2: #ffd75e;
  --crema:      #f5f1e6;
  --gris:       #98917f;

  --display: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
  /* Manuscrita, solo para el nombre del bar */
  --firma: "Rock Salt", "Bradley Hand", "Segoe Script", cursive;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --nav-h: 64px;
  --gutter: clamp(1rem, 4vw, 3.25rem);
  --wrap: 1440px;
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--crema);
  background: var(--negro);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }

/* Sin curvas. Es el idioma de esta marca. */
* { border-radius: 0 !important; }

::selection { background: var(--amarillo); color: var(--negro); }

:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 3px;
}

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -200px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--amarillo); color: var(--negro);
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.skip-link:focus { top: 1rem; }

.rule { border-top: 1px solid var(--linea); }

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .002em;
  text-transform: uppercase;
  text-wrap: balance;
}

.kicker {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amarillo);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}

.section-title {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  margin-block: 1.1rem 0;
}

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  color: #cdc6b4;
  max-width: 46ch;
}

.mono { font-family: var(--mono); }

.dim { color: var(--gris); }

/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* --- Botones --------------------------------------------------- */
.btn {
  --btn-bg: var(--amarillo);
  --btn-fg: var(--negro);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .95rem 1.35rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--amarillo);
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.btn .arrow { transition: transform .28s var(--ease-out); }
.btn:hover { --btn-bg: transparent; --btn-fg: var(--amarillo); }
.btn:hover .arrow { transform: translateX(5px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--crema); border-color: var(--linea); }
.btn--ghost:hover { --btn-bg: var(--crema); --btn-fg: var(--negro); border-color: var(--crema); }

.btn--sm { padding: .6rem .9rem; font-size: .72rem; gap: .8rem; }

/* En celular los botones ocupan todo el ancho: son más fáciles de tocar */
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row > .btn { flex: 1 1 100%; }

/* --- Etiqueta pendiente ---------------------------------------- */
.pendiente {
  display: inline-block;
  padding: .3rem .6rem;
  background: var(--amarillo);
  color: var(--negro);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- Aviso editable (borrar en producción) --------------------- */
.aviso {
  background: var(--amarillo);
  color: var(--negro);
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  padding: .7rem 1rem;
  line-height: 1.5;
}

/* --- Navegación ------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-h);
  background: rgba(13, 12, 10, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
  transition: background .3s var(--ease-out);
}
.nav.is-solid { background: var(--negro); }

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  font-family: var(--display);
  font-size: 1.32rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
.brand em { font-style: normal; color: var(--amarillo); }

.nav-links {
  display: none;
  align-items: center;
  gap: 1.75rem;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav-links a { position: relative; padding-block: .35rem; color: #d8d2c2; transition: color .2s; }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--amarillo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav-links a:hover { color: var(--amarillo); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta { display: none; }

/* Menú móvil */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--linea);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: var(--crema);
  transition: transform .3s var(--ease-out), opacity .2s;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

.nav-drawer {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 199;
  background: var(--negro);
  border-bottom: 1px solid var(--linea);
  display: grid;
  transform: translateY(-105%);
  /* visibility evita que el panel cerrado se transparente detrás de la barra */
  visibility: hidden;
  transition: transform .42s var(--ease-out), visibility 0s linear .42s;
}
.nav-drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .42s var(--ease-out), visibility 0s;
}
.nav-drawer a {
  padding: 1.15rem var(--gutter);
  border-top: 1px solid var(--linea);
  font-family: var(--display);
  font-size: 1.6rem;
  text-transform: uppercase;
  transition: background .18s, color .18s;
}
.nav-drawer a:hover { background: var(--amarillo); color: var(--negro); }

/* --- Botón flotante de WhatsApp -------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(.9rem, 3vw, 1.75rem);
  bottom: clamp(.9rem, 3vw, 1.75rem);
  z-index: 190;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.05rem;
  background: var(--amarillo);
  color: var(--negro);
  border: 2px solid var(--negro);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .55);
  transform: translateY(120%);
  opacity: 0;
  transition: transform .45s var(--ease-out), opacity .3s,
              background .18s, color .18s;
}
.wa-float.is-in { transform: translateY(0); opacity: 1; }
.wa-float:hover { background: var(--crema); }
.wa-float svg { width: 19px; height: 19px; flex: none; }
.wa-float .wa-text { display: none; }

/* =============================================================
   6. SECCIONES
   ============================================================= */
main { padding-top: var(--nav-h); }

.section { padding-block: clamp(3.75rem, 9vw, 7.5rem); border-top: 1px solid var(--linea); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head .lead { margin-top: 1.15rem; }

/* --- Hero ------------------------------------------------------ */
.hero { padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* El nombre del bar va en manuscrita. Rock Salt es MUCHO más ancha que Anton
   (10,8 em contra 5,5 em para "EL GATO NEGRO"), así que los tamaños son otros:
   en celular entra en dos líneas, en escritorio en una sola. */
.hero-title {
  font-family: var(--firma);
  font-size: clamp(2.6rem, 15.5vw, 9rem);
  line-height: 1.12;
  margin-block: 1.5rem 1.75rem;
  letter-spacing: 0;
}
.hero-title .amar { color: var(--amarillo); }

.hero-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--linea);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--linea);
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.hero-photo:hover img { transform: scale(1.04); }

/* En celular el texto y los botones van ANTES de la foto, para que se pueda
   pedir sin scrollear. Desde 720 px vuelve al orden normal. */
.hero-side { display: flex; flex-direction: column; gap: 1.25rem; order: -1; }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: .78rem;
}
.hero-meta > div { padding: .95rem 1.05rem; border-top: 1px solid var(--linea); }
.hero-meta > div:nth-child(-n+2) { border-top: 0; }
.hero-meta > div:nth-child(odd) { border-right: 1px solid var(--linea); }
.hero-meta dt { color: var(--gris); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.hero-meta dd { margin-top: .35rem; color: var(--crema); font-weight: 500; }
.hero-meta .num { color: var(--amarillo); font-size: 1.05rem; font-weight: 700; }

/* --- Marquesina ------------------------------------------------ */
.marquee {
  background: var(--amarillo);
  color: var(--negro);
  border-block: 2px solid var(--amarillo);
  overflow: hidden;
  padding-block: .7rem;
}
.marquee-track {
  display: flex;
  width: max-content;
}
/* La animación arranca solo cuando JS duplicó el contenido: sin JS queda
   estático y legible, nunca cortado a la mitad. */
.marquee-track.is-ready { animation: marquee 34s linear infinite; }
.marquee-track span {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  text-transform: uppercase;
  padding-inline: 1.15rem;
  white-space: nowrap;
}
.marquee-track span::after { content: "·"; margin-left: 1.15rem; opacity: .55; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Viandas del mediodía --------------------------------------
   Servicio aparte del bar de la noche, con su propio horario. Va con
   borde amarillo grueso para que se lea como algo distinto. */
.viandas {
  border: 3px solid var(--amarillo);
  background: var(--negro-2);
  padding: clamp(1.35rem, 4vw, 2.25rem);
  display: grid;
  gap: 1.25rem;
}
.viandas-cab { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.viandas-etiqueta {
  padding: .28rem .55rem;
  background: var(--amarillo); color: var(--negro);
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.viandas h2 { font-size: clamp(1.9rem, 5.5vw, 3rem); }
.viandas p { color: #cdc6b4; max-width: 52ch; }
.viandas-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.viandas-datos > div { background: var(--negro); padding: .85rem 1rem; }
.viandas-datos dt {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris);
}
.viandas-datos dd {
  margin-top: .3rem; font-family: var(--mono); font-weight: 700;
  font-size: 1.05rem; color: var(--amarillo);
}

/* Aviso compacto de viandas arriba de la carta */
.viandas-tira {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  border: 2px solid var(--amarillo);
  background: rgba(255, 199, 44, .08);
  padding: .8rem 1rem;
  margin-top: 1.25rem;
}
.viandas-tira p { flex: 1; min-width: 200px; font-size: .9rem; color: #cdc6b4; }
.viandas-tira strong { color: var(--amarillo); }

/* --- Grilla de destacados -------------------------------------- */
.grid-platos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}

/* En celular la tarjeta es horizontal: foto chica a la izquierda y todo el
   texto al lado. Seis platos entran en dos pantallas en vez de seis. */
.plato {
  display: grid;
  grid-template-columns: 116px 1fr;
  background: var(--negro);
  transition: background .22s var(--ease-out), color .22s var(--ease-out);
}
/* La foto ocupa todo el alto de la tarjeta, sea cual sea el largo del texto */
.plato-img { position: relative; overflow: hidden; background: var(--negro-2); min-height: 128px; }
.plato-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.plato-num {
  position: absolute; top: 0; left: 0;
  padding: .35rem .6rem;
  background: var(--negro);
  color: var(--amarillo);
  font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  transition: background .22s, color .22s;
}
.plato-body { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.plato-body h3 { font-size: 1.22rem; }
.plato-desc { font-size: .86rem; color: #b9b2a1; flex: 1; transition: color .22s; }
.plato-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .35rem; }
.precio { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--amarillo); transition: color .22s; }

/* Hover invert — el efecto firma del sitio */
.plato:hover { background: var(--amarillo); color: var(--negro); }
.plato:hover .plato-desc { color: #3a3018; }
.plato:hover .precio { color: var(--negro); }
.plato:hover .plato-num { background: var(--negro); color: var(--amarillo); }
.plato:hover .plato-img img { transform: scale(1.05); }
.plato:hover .btn--ghost { border-color: var(--negro); --btn-fg: var(--negro); }
.plato:hover .btn--ghost:hover { background: var(--negro); --btn-fg: var(--amarillo); }

/* --- La casa --------------------------------------------------- */
.casa-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
.casa-photo { border: 1px solid var(--linea); overflow: hidden; aspect-ratio: 7 / 5; }
.casa-photo img { width: 100%; height: 100%; object-fit: cover; }
.casa-texto { display: flex; flex-direction: column; gap: 1.25rem; }
.casa-texto p { color: #c6bfae; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: .5rem; }
.stat { background: var(--negro); padding: 1.1rem 1rem; }
.stat b { display: block; font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--amarillo); line-height: 1; }
.stat span { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

/* --- Dónde y cuándo -------------------------------------------- */
.donde-grid { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.donde-col { background: var(--negro); padding: clamp(1.35rem, 3vw, 2rem); }
.donde-col h3 { font-size: 1.35rem; margin-bottom: 1.1rem; color: var(--amarillo); }

.horarios { font-family: var(--mono); font-size: .86rem; }
.horarios li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .6rem;
  border-bottom: 1px solid var(--linea);
}
.horarios li:last-child { border-bottom: 0; }
.horarios .dia { color: var(--gris); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; }
.horarios .hora { color: var(--crema); font-weight: 500; }
.horarios li.is-hoy .dia, .horarios li.is-hoy .hora { color: var(--amarillo); }

.mapa { aspect-ratio: 16 / 11; border: 1px solid var(--linea); background: var(--negro-2); }
.mapa iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(1.05); }
.mapa-vacio {
  height: 100%;
  display: grid; place-content: center; gap: .75rem; text-align: center;
  padding: 2rem;
  font-family: var(--mono); font-size: .8rem; color: var(--gris);
}

.dato { margin-bottom: 1.35rem; }
.dato dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: .3rem; }
.dato dd { font-size: 1.05rem; }
.dato a:hover { color: var(--amarillo); }

/* --- Reservas -------------------------------------------------- */
.reserva-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }

.form { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.field { background: var(--negro); padding: .9rem 1.1rem; }
.field label {
  display: block;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris); margin-bottom: .4rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--crema);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0;
}
.field textarea { resize: vertical; min-height: 68px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; }
.field:focus-within { background: var(--negro-3); }
.field select option { background: var(--negro); color: var(--crema); }
.field input::placeholder, .field textarea::placeholder { color: #6d6858; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); }

.form-foot { background: var(--negro); padding: 1.1rem; display: grid; gap: .75rem; }
.form-nota { font-family: var(--mono); font-size: .7rem; color: var(--gris); line-height: 1.6; }

/* --- Footer ---------------------------------------------------- */
.footer { border-top: 1px solid var(--linea); padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; }
.footer-grid { display: grid; gap: 2rem; }
.footer-brand {
  font-family: var(--firma);
  font-size: clamp(2.4rem, 10vw, 116px);
  line-height: 1.18;
  text-transform: uppercase;
  /* los trazos de Rock Salt se salen de la caja: sin esto pisan las columnas */
  padding-bottom: .16em;
}
.footer-brand .amar { color: var(--amarillo); margin-left: .22em; }
.footer-col h4 { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: var(--gris); margin-bottom: .8rem; text-transform: uppercase; }
.footer-col li { padding-block: .25rem; font-size: .95rem; }
.footer-col a:hover { color: var(--amarillo); }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: .7rem; color: var(--gris);
  letter-spacing: .06em;
}
.footer-bottom a { color: var(--gris); }
.footer-bottom a:hover { color: var(--amarillo); }

/* =============================================================
   6b. CARTA
   ============================================================= */
.carta-hero { padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.5rem); }
.carta-title { font-size: clamp(3rem, 13vw, 9rem); line-height: .84; margin-block: 1rem .9rem; }

.cat-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
  background: var(--negro);
  border-block: 1px solid var(--linea);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav ul { display: flex; width: max-content; min-width: 100%; }
.cat-nav a {
  display: block;
  padding: .95rem 1.15rem;
  border-right: 1px solid var(--linea);
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #cfc8b7;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.cat-nav a:hover, .cat-nav a.is-active { background: var(--amarillo); color: var(--negro); }

.categoria { border-top: 1px solid var(--linea); padding-block: clamp(2.25rem, 5vw, 3.75rem); }
.categoria:first-of-type { border-top: 0; }
.categoria-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.categoria-head h2 { font-size: clamp(1.9rem, 5vw, 3.1rem); }
.categoria-head .cuenta { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--gris); text-transform: uppercase; }

.items { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }

/* Fila de plato. En celular: foto chica a la izquierda, y a la derecha
   nombre / descripción / precio + control, con el "+" al alcance del pulgar. */
.item {
  background: var(--negro);
  padding: .8rem .9rem .85rem;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  transition: background .2s var(--ease-out);
}

.item-cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.item-texto { display: flex; flex-direction: column; gap: .18rem; }
.item-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.item-foto {
  flex: none;
  width: 76px; aspect-ratio: 1;
  overflow: hidden;
  background: var(--negro-2);
  border: 1px solid var(--linea);
  padding: 0;
  cursor: zoom-in;
  position: relative;
}
.item-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease-out);
}
.item-foto:hover img { transform: scale(1.07); }
.item-foto:hover { border-color: var(--amarillo); }
/* Lupa discreta, solo cuando hay mouse */
.item-foto::after {
  content: "";
  position: absolute; inset: auto 4px 4px auto;
  width: 16px; height: 16px;
  background: var(--amarillo);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity .2s;
}
@media (hover: hover) {
  .item-foto:hover::after { opacity: .9; }
}

.item h3 {
  font-family: var(--sans); font-weight: 700; font-size: 1.02rem;
  text-transform: none; letter-spacing: 0; line-height: 1.3;
}
.item .item-desc { font-size: .84rem; color: #a9a291; line-height: 1.4; }

/* Aviso de anticipación. Va en la carta, en la portada y en el pedido. */
.item-aviso {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .35rem;
  padding: .3rem .55rem;
  background: rgba(255, 199, 44, .13);
  border-left: 3px solid var(--amarillo);
  color: var(--amarillo-2);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.35;
  align-self: flex-start;
}
.item-aviso::before { content: "⏱"; font-size: .85rem; }
.item .item-precio {
  font-family: var(--mono); font-weight: 700; font-size: 1.1rem;
  color: var(--amarillo); white-space: nowrap;
}
.item .item-cta { flex: none; }

/* Fallback sin JavaScript: el link individual de WhatsApp */
.item-pedir {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: .2rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #cfc8b7; border-bottom: 1px solid #4a4535;
  white-space: nowrap;
}

.item:hover { background: var(--negro-2); }
.item.is-destacado { border-left: 4px solid var(--amarillo); }
.item.en-pedido { background: rgba(255, 199, 44, .075); }

/* =============================================================
   6c. EL PEDIDO — control +/−, barra de abajo y panel
   ============================================================= */

/* --- Control de cantidad --------------------------------------- */
.cant {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--linea);
  background: var(--negro);
  transition: border-color .2s var(--ease-out);
}
.cant-btn {
  width: 44px;                 /* target mínimo cómodo para el pulgar */
  min-height: 44px;
  display: grid; place-items: center;
  font-family: var(--sans); font-size: 1.35rem; font-weight: 700; line-height: 1;
  color: var(--crema);
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.cant-btn:active { background: var(--amarillo); color: var(--negro); }
.cant-mas { background: var(--amarillo); color: var(--negro); }
.cant-mas:active { background: var(--amarillo-2); }

.cant-n {
  min-width: 34px;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
  color: var(--crema);
  border-inline: 2px solid var(--linea);
}

/* Con 0 unidades el "−" y el número se esconden: queda solo el "+" */
.cant:not(.tiene) { border-color: transparent; }
.cant:not(.tiene) [data-menos],
.cant:not(.tiene) .cant-n { display: none; }
.cant.tiene { border-color: var(--amarillo); }
.cant.tiene .cant-n { border-color: var(--amarillo); color: var(--amarillo); }
.cant.tiene [data-menos] { border-right: 0; }

/* --- Barra fija de abajo --------------------------------------- */
.barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 195;
  background: var(--amarillo);
  border-top: 2px solid var(--negro);
  padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  animation: subir .34s var(--ease-out);
}
@keyframes subir { from { transform: translateY(100%); } }

.barra-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: var(--negro);
  color: var(--amarillo);
  font-family: var(--mono); font-weight: 700;
  text-align: left;
  min-height: 56px;
}
.barra-n {
  background: var(--amarillo); color: var(--negro);
  padding: .25rem .55rem;
  font-size: .78rem; letter-spacing: .04em;
  white-space: nowrap;
}
.barra-txt { flex: 1; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.barra-total { font-size: 1.05rem; white-space: nowrap; }

/* Deja aire abajo para que la barra no tape el último bloque */
body.con-barra { padding-bottom: 92px; }
body.con-barra .wa-float { display: none; }

/* --- Panel del pedido ------------------------------------------ */
.sheet { position: fixed; inset: 0; z-index: 300; }
.sheet-fondo {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .68);
  opacity: 0; transition: opacity .28s var(--ease-out);
}
.sheet.is-open .sheet-fondo { opacity: 1; }

.sheet-panel {
  position: absolute;
  inset: auto 0 0 0;
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--negro);
  border-top: 3px solid var(--amarillo);
  transform: translateY(100%);
  transition: transform .32s var(--ease-out);
}
.sheet.is-open .sheet-panel { transform: translateY(0); }

.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--linea);
  flex: none;
}
.sheet-head h2 { font-size: 1.6rem; }
.sheet-cerrar {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--linea);
  font-size: 1.1rem; color: var(--crema);
}
.sheet-cerrar:hover { background: var(--crema); color: var(--negro); }

.sheet-cuerpo { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 1.15rem; }

.sheet-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem .8rem;
  align-items: center;
  padding-block: .85rem;
  border-bottom: 1px solid var(--linea);
}
.sheet-nombre { grid-column: 1; grid-row: 1; font-weight: 700; font-size: .98rem; }
.sheet-sub { grid-column: 1; grid-row: 2; font-family: var(--mono); font-size: .74rem; color: var(--gris); }
.sheet-item .cant { grid-column: 2; grid-row: 1 / span 2; }
.sheet-parcial {
  grid-column: 1 / -1; grid-row: 3;
  font-family: var(--mono); font-weight: 700; color: var(--amarillo);
  text-align: right; font-size: .92rem; padding-top: .3rem;
}
.sheet-vacio { padding: 2rem 0; color: var(--gris); text-align: center; }
.sheet-vacio b { color: var(--amarillo); }

/* Avisos de anticipación dentro del panel del pedido */
.sheet-avisos {
  margin-top: 1rem;
  padding: .85rem .95rem;
  background: rgba(255, 199, 44, .12);
  border-left: 4px solid var(--amarillo);
}
.sheet-avisos h3 {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--amarillo); margin-bottom: .5rem;
}
.sheet-avisos li {
  font-size: .84rem; color: var(--crema); line-height: 1.45;
  padding-block: .18rem;
}
.sheet-avisos li b { color: var(--amarillo-2); }

.sheet-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--mono); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
}
.sheet-total b { font-size: 1.7rem; color: var(--amarillo); letter-spacing: 0; }

.sheet-campo { padding-top: 1rem; }
.sheet-campo > label, .sheet-leyenda {
  display: block;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris); margin-bottom: .55rem;
}
.sheet-campo input, .sheet-campo textarea {
  width: 100%;
  background: var(--negro-2);
  border: 1px solid var(--linea);
  color: var(--crema);
  font-family: var(--sans); font-size: 16px;   /* 16px evita el zoom de iOS */
  padding: .8rem .9rem;
  min-height: 48px;
}
.sheet-campo textarea { min-height: 68px; resize: vertical; line-height: 1.5; }
.sheet-campo input:focus, .sheet-campo textarea:focus {
  outline: 0; border-color: var(--amarillo);
}
.sheet-campo input::placeholder, .sheet-campo textarea::placeholder { color: #6d6858; }

.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
  flex: 1 1 0; min-width: 96px;
  min-height: 48px;
  padding: .6rem .5rem;
  border: 2px solid var(--linea);
  background: var(--negro);
  color: #cfc8b7;
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  transition: background .16s, color .16s, border-color .16s;
}
.chip.is-on { background: var(--amarillo); color: var(--negro); border-color: var(--amarillo); }

.sheet-pie {
  flex: none;
  padding: 1rem 1.15rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linea);
  background: var(--negro);
  display: grid; gap: .7rem;
}
.sheet-pie .btn { width: 100%; min-height: 56px; font-size: .88rem; }
.sheet-pie .btn:disabled { opacity: .4; pointer-events: none; }
.sheet-vaciar {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris); padding: .5rem; min-height: 40px;
}
.sheet-vaciar:hover { color: var(--amarillo); }

body.sheet-abierto { overflow: hidden; }

/* --- Foto ampliada ---------------------------------------------- */
.zoom {
  position: fixed; inset: 0; z-index: 320;
  display: grid; place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(0, 0, 0, .95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .24s var(--ease-out);
  cursor: zoom-out;
}
.zoom.is-open { opacity: 1; }
.zoom figure { max-width: 900px; width: 100%; }
.zoom img {
  width: 100%; height: auto;
  border: 2px solid var(--amarillo);
  transform: scale(.97);
  transition: transform .28s var(--ease-out);
}
.zoom.is-open img { transform: scale(1); }
.zoom figcaption {
  margin-top: .85rem;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--crema);
}
.zoom figcaption b { color: var(--amarillo); font-size: 1.05rem; }
.zoom-cerrar {
  position: absolute; top: 0; right: 0;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--amarillo); color: var(--negro);
  font-size: 1.2rem; font-weight: 700;
}

/* --- Buscador de la carta -------------------------------------- */
.buscador {
  position: relative;
  display: flex; align-items: center;
  border: 1px solid var(--linea);
  background: var(--negro-2);
}
.buscador input {
  flex: 1;
  background: none; border: 0; color: var(--crema);
  font-family: var(--sans); font-size: 16px;
  padding: .9rem 1rem; min-height: 52px;
}
.buscador input:focus { outline: 0; }
.buscador input::placeholder { color: #6d6858; }
.buscador:focus-within { border-color: var(--amarillo); }
.buscador-limpiar {
  width: 48px; min-height: 48px;
  display: none; place-items: center;
  color: var(--gris); font-size: 1rem;
}
.buscador.tiene-texto .buscador-limpiar { display: grid; }
.sin-resultados {
  padding: 3rem 0; text-align: center; color: var(--gris);
  font-family: var(--mono); font-size: .85rem;
}

/* =============================================================
   7. EFECTOS
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Defensa: si un elemento lleva reveal + split, nunca queda invisible */
.reveal[data-split] { opacity: 1; transform: none; }

/* Si JS no corre, todo se ve igual */
.no-js .reveal { opacity: 1; transform: none; }

/* =============================================================
   8. RESPONSIVE
   ============================================================= */
@media (min-width: 540px) {
  .wa-float .wa-text { display: inline; }
  .btn-row > .btn { flex: 0 0 auto; }

  /* Desde acá la tarjeta vuelve a ser vertical, con la foto grande arriba */
  .grid-platos { grid-template-columns: repeat(2, 1fr); }
  .plato { display: flex; flex-direction: column; }
  .plato-img { aspect-ratio: 4 / 3; min-height: 0; }
  .plato-body { padding: 1.15rem 1.25rem 1.35rem; gap: .6rem; }
  .plato-body h3 { font-size: 1.45rem; }
  .plato-desc { font-size: .92rem; }

  /* Foto | nombre y descripción | precio | control, todo en una línea */
  .item { align-items: center; gap: 1.25rem; padding: .85rem 1rem; }
  .item-foto { width: 96px; }
  .item-cuerpo { flex-direction: row; align-items: center; gap: 1.25rem; }
  .item-texto { flex: 1; min-width: 0; }
  .item-pie { flex: none; gap: 1.25rem; }
  .item h3 { font-size: 1.06rem; }
  .item .item-desc { font-size: .88rem; }

  /* El panel deja de ser una hoja pegada abajo */
  .sheet-panel {
    inset: auto auto 0 50%;
    width: min(520px, 100%);
    transform: translate(-50%, 100%);
    border: 3px solid var(--amarillo);
    max-height: 88vh;
  }
  .sheet.is-open .sheet-panel { transform: translate(-50%, 0); }
  .barra { padding-inline: 1.25rem; }
  .barra-btn { max-width: 720px; margin-inline: auto; }
}

@media (min-width: 720px) {
  :root { --nav-h: 72px; }
  .hero-grid { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .hero-photo { aspect-ratio: auto; min-height: 340px; }
  .hero-side { order: 0; }
  .hero-side .hero-meta { margin-top: auto; }  /* alinea con el pie de la foto */
  .casa-grid { grid-template-columns: 1fr 1fr; }
  .reserva-grid { grid-template-columns: 1.1fr .9fr; }
  .donde-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  body.con-barra { padding-bottom: 100px; }
}

@media (min-width: 960px) {
  .nav-links, .nav-cta { display: flex; }
  .nav-toggle { display: none; }
  .nav-drawer { display: none; }
  .grid-platos { grid-template-columns: repeat(3, 1fr); }
  .donde-grid { grid-template-columns: 1fr 1fr 1.2fr; }

  /* En pantalla grande el nombre va en una sola línea, de borde a borde.
     8.3vw es el máximo que entra sin cortar letras: "EL GATO NEGRO" en
     Rock Salt mide 10,8 em de ancho. No subir de acá. */
  .hero-title br { display: none; }
  .hero-title {
    font-size: min(8.3vw, 122px);
    line-height: 1.15;
    white-space: nowrap;
    text-wrap: nowrap;
  }
  .hero-title .amar { margin-left: .3em; }  /* la O de GATO termina en trazo largo */

  /* El mapa acompaña la altura de las otras dos columnas */
  .donde-col:last-child { display: grid; }
  .mapa { aspect-ratio: auto; min-height: 300px; height: 100%; border: 0; }
}

/* =============================================================
   9. REDUCED MOTION — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track, .marquee-track.is-ready { animation: none; transform: none; }
  .marquee { overflow-x: auto; }
}