/* =========================================================
   EL HEREJE · The Best Aqp · verde oliva + crema
   ========================================================= */
:root {
  /* Verdes oliva, de más profundo a más claro */
  --oliva-950: #141910;
  --oliva-900: #1b2114;
  --oliva-800: #232b1a;
  --oliva-700: #2f3923;
  --oliva-600: #3d4a2a;
  --oliva-500: #56653a;
  --oliva-400: #7a8a52;
  --oliva-300: #a3ad7c;

  /* Cremas (y el dorado del logo, usado con mesura) */
  --crema: #efe6d2;
  --crema-claro: #f7f1e3;
  --crema-2: #e2d5b8;
  --crema-3: #c9b991;
  --dorado: #a8843f;
  --crema-tenue: rgba(239, 230, 210, .68);
  --crema-linea: rgba(239, 230, 210, .18);
  --oliva-linea: rgba(27, 33, 20, .16);

  --f-serif: "Cormorant Garamond", Georgia, serif;
  --f-sans: "Jost", system-ui, sans-serif;
  --f-script: "Pinyon Script", cursive;

  --ancho: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--oliva-900);
  color: var(--crema);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
p { margin: 0; }
::selection { background: var(--crema); color: var(--oliva-900); }

/* Grano sutil sobre todo el sitio */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.contenedor { width: min(var(--ancho), 100% - 2 * var(--gutter)); margin-inline: auto; }
.script { font-family: var(--f-script); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ---------- Tipografía común ---------- */
.sobre {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--crema-3);
  margin-bottom: 1.2rem;
}
.titulo {
  font-family: var(--f-serif);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1;
  text-align: center;
}
.titulo .script {
  display: block;
  font-size: .62em;
  color: var(--crema-3);
  margin-bottom: -.05em;
}
.titulo--izq { text-align: left; }
.parrafo { color: var(--crema-tenue); max-width: 48ch; }

.encabezado { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.encabezado__bajada { color: var(--crema-tenue); margin-top: 1.2rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6em;
  padding: 1rem 2.1rem;
  font-family: var(--f-sans);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  border: 1px solid var(--crema);
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  border-radius: 2rem;
}
.btn--crema { background: var(--crema); color: var(--oliva-900); }
.btn--crema:hover { background: transparent; color: var(--crema); }
.btn__icono { width: 1.6em; height: 1.6em; flex: none; margin: -.3em 0; } /* ícono dentro de un botón (p. ej. WhatsApp) */
.btn--linea { background: transparent; color: var(--crema); border-color: var(--crema-linea); }
.btn--linea:hover { border-color: var(--crema); background: rgba(239, 230, 210, .06); }
.btn--oliva { background: var(--oliva-900); color: var(--crema); border-color: var(--oliva-900); }
.btn--oliva:hover { background: transparent; color: var(--oliva-900); }
.btn--ancho { width: 100%; }

.enlace {
  font-size: .74rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--crema-linea);
  padding-bottom: .3rem;
  transition: border-color .3s;
}
.enlace span { display: inline-block; transition: transform .3s var(--ease); }
.enlace:hover { border-color: var(--crema); }
.enlace:hover span { transform: translateX(4px); }

/* ---------- Decoración ---------- */
.deco { position: absolute; color: var(--oliva-500); pointer-events: none; z-index: 0; }
.ornamento { width: 200px; height: 20px; color: var(--crema-3); display: block; margin: 2rem 0; }
.ornamento--centro { margin: 0 auto 1.6rem; }

/* Foto provisional: mientras llegan las fotos reales se muestra el logo entero
   sobre su mismo crema, en vez de recortarlo para llenar el espacio */
img.foto-pendiente {
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background-color: #faf3eb; /* el mismo crema del fondo de logo.webp */
  padding: 6%;
  filter: none !important;
}
/* En los botones de la carta el logo va en la mitad de arriba, sin tapar el nombre */
.categoria img.foto-pendiente { padding: 8% 14% 46%; }
/* En la vitrina el logo va en la mitad derecha, lejos del texto */
.slide__foto.foto-pendiente { padding: 16% 6% 16% 50%; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  padding: 1.2rem 0;
  border-bottom: 1px solid transparent;
}
.nav.solido {
  padding: .55rem 0;
  border-color: var(--crema-linea);
}
/* El fondo y el desenfoque van en una capa aparte: si backdrop-filter estuviera en .nav,
   el menú móvil (position: fixed) quedaría encerrado en la barra en vez de cubrir la pantalla */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(20, 25, 16, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.nav.solido::before { opacity: 1; }
.nav__in {
  width: min(1320px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: block; }
.logo img { height: 66px; width: auto; transition: height .5s var(--ease); }
.nav.solido .logo img { height: 52px; }

.nav__links { display: flex; align-items: center; gap: 2.2rem; }
.nav__links a:not(.btn) {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  position: relative; padding: .3rem 0;
  color: var(--crema-tenue);
  transition: color .3s;
}
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--crema);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links a:not(.btn):hover { color: var(--crema); }
.nav__links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
/* Página actual en el menú */
.nav__links a[aria-current="page"] { color: var(--crema); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { padding: .8rem 1.4rem; }

.nav__burger { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.nav__burger span { position: absolute; left: 10px; right: 10px; height: 1px; background: var(--crema); transition: transform .4s var(--ease), top .4s var(--ease); }
.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 26px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

/* =========================================================
   HERO · foto a pantalla completa + nombre
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 8rem var(--gutter) clamp(4.5rem, 9vh, 7rem);
  overflow: hidden;
  background: var(--oliva-950);
  text-align: center;
}
.hero__fondo { position: absolute; inset: 0; }
/* Foto de fondo a pantalla completa */
.hero__desenfoque {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Foto nítida centrada, con bordes que se funden en la copia desenfocada */
.hero__foto {
  position: absolute; left: 50%; top: -6%;
  height: 100%; width: auto; max-width: none;
  transform: translateX(-50%) scale(1.06);
  animation: acercar 18s var(--ease) forwards;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}
@keyframes acercar { to { transform: translateX(-50%) scale(1); } }
/* Velo: luz arriba como en un salón, oscuridad abajo para el texto */
.hero__fondo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 25, 16, .55) 0%, rgba(20, 25, 16, .15) 30%, rgba(20, 25, 16, .55) 62%, rgba(20, 25, 16, .96) 100%),
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 40%, rgba(20, 25, 16, .5));
}
.hero__contenido { position: relative; z-index: 2; width: min(1200px, 100%); }
.hero__sobre {
  font-size: .72rem; letter-spacing: .4em; text-transform: uppercase; color: var(--crema-3);
  margin-bottom: 1.2rem;
}
.hero__nombre {
  font-family: "Italiana", var(--f-serif);
  font-weight: 400;
  font-size: clamp(3.6rem, 13vw, 11.5rem);
  line-height: .9;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--crema-claro);
  margin-right: -.08em; /* compensa el espaciado de la última letra */
  text-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.hero__fila {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3.5rem);
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
}
.hero__fila .btn:first-child { justify-self: end; }
.hero__fila .btn:last-child { justify-self: start; }
.hero__fila .btn { min-width: 200px; border-radius: 2rem;}
.hero__frase {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.35;
  color: var(--crema-2);
  padding-inline: clamp(1.4rem, 3vw, 2.6rem);
  border-inline: 1px solid var(--crema-linea);
}
.hero__frase .script { font-style: normal; font-size: 1.35em; color: var(--crema-3); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  width: 1px; height: 44px; background: var(--crema-linea); overflow: hidden; z-index: 2;
}
.hero__scroll span { position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: var(--crema); animation: bajar 2.2s var(--ease) infinite; }
@keyframes bajar { to { top: 110%; } }

/* =========================================================
   PLATOS DESTACADOS · bandas apiladas
   ========================================================= */
.bandas { background: var(--oliva-950); padding-top: clamp(5rem, 10vw, 8rem); }
.bandas__cabecera { text-align: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.bandas__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--crema-linea); }
.banda {
  position: relative;
  display: grid;
  grid-template-columns: 30% 70%; /* texto 30 · foto 70 */
  grid-template-rows: minmax(0, 1fr); /* la fila mide lo que la banda, no lo que la foto */
  height: 30vh;
  min-height: 260px;
  overflow: hidden;
  border-bottom: 1px solid var(--crema-linea);
  background: var(--oliva-950); /* el mismo verde de la sección: el texto se funde con el fondo */
}
.banda__foto {
  grid-column: 2; grid-row: 1;
  width: 100%; height: 100%; max-width: none; min-height: 0;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  /* Difuminado: el verde del texto pasa a la foto sin línea de corte */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 34%);
  transform: scale(1.04);
  filter: saturate(.92);
  transition: transform 1.6s var(--ease), filter 1s var(--ease);
}
.banda:hover .banda__foto { transform: scale(1); filter: saturate(1.05); }
/* Bandas pares: foto a la izquierda y texto a la derecha */
.banda:nth-child(even) { grid-template-columns: 70% 30%; }
.banda:nth-child(even) .banda__foto {
  grid-column: 1;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 34%);
  mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 34%);
}

.banda__texto {
  grid-column: 1; grid-row: 1;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 1.4rem clamp(1rem, 2vw, 2rem) 1.4rem max(var(--gutter), calc((100vw - var(--ancho)) / 2));
}
.banda:nth-child(even) .banda__texto {
  grid-column: 2;
  align-items: flex-end; text-align: right;
  padding: 1.4rem max(var(--gutter), calc((100vw - var(--ancho)) / 2)) 1.4rem clamp(1rem, 2vw, 2rem);
}
.banda__texto > * { max-width: 340px; }
.banda__num {
  font-family: var(--f-serif);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  line-height: .9;
  color: var(--crema-3);
}
.banda__nombre {
  margin-top: .7rem;
  font-size: .82rem; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--crema);
}
.banda__desc { margin-top: .5rem; font-size: .9rem; line-height: 1.55; color: var(--crema-tenue); }
.banda__desc::after {
  content: ""; display: block; width: 46px; height: 1px; margin-top: .9rem;
  background: var(--crema-3);
}
.banda:nth-child(even) .banda__desc::after { margin-left: auto; }
.banda__precio { margin-top: .7rem; font-family: var(--f-serif); font-size: 1.5rem; color: var(--crema-2); }
/* La foto de la banda se puede tocar para verla completa */
.banda__foto { cursor: zoom-in; }
.banda__ver {
  position: absolute; z-index: 2; right: 1.2rem; bottom: 1.2rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem;
  background: rgba(20, 25, 16, .6); color: var(--crema);
  border: 1px solid var(--crema-linea);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 400 .62rem var(--f-sans); letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.banda__ver svg { width: 15px; height: 15px; }
.banda:nth-child(even) .banda__ver { right: auto; left: 1.2rem; }
.banda__ver:hover, .banda__ver:focus-visible { background: var(--crema); color: var(--oliva-900); border-color: var(--crema); }

/* =========================================================
   VISOR (dialog): foto completa sobre fondo oscuro
   ========================================================= */
.visor {
  padding: 0; border: 0; background: transparent;
  max-width: 94vw; max-height: 94vh;
  overflow: visible;
}
.visor::backdrop { background: rgba(0, 0, 0, .86); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.visor[open] { animation: visorEntra .45s var(--ease); }
.visor[open]::backdrop { animation: visorFondo .45s ease; }
@keyframes visorEntra { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes visorFondo { from { opacity: 0; } to { opacity: 1; } }
.visor__figura { margin: 0; display: flex; flex-direction: column; align-items: center; }
.visor__figura img {
  display: block;
  max-width: 92vw; max-height: 80vh; width: auto; height: auto;
  object-fit: contain; /* la foto entera, con su forma real */
  border: 1px solid var(--crema-linea);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.visor__figura figcaption { margin-top: 1rem; font-family: var(--f-script); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--crema); }
.visor__cerrar {
  position: fixed; top: 1.2rem; right: 1.2rem;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20, 25, 16, .6); color: var(--crema);
  border: 1px solid var(--crema-linea); cursor: pointer;
  transition: background .3s, color .3s;
}
.visor__cerrar svg { width: 20px; height: 20px; }
.visor__cerrar:hover, .visor__cerrar:focus-visible { background: var(--crema); color: var(--oliva-900); }

/* Precio + botón Pedir en la misma línea */
.banda__pie { display: flex; align-items: center; gap: 1.1rem; margin-top: .7rem; }
.banda__pie .banda__precio { margin-top: 0; }
.banda:nth-child(even) .banda__pie { justify-content: flex-end; }
.btn--chico { padding: .6rem 1.1rem; font-size: .66rem; letter-spacing: .2em; gap: .5em; }
.btn--chico .btn__icono { width: 1.5em; height: 1.5em; }

/* =========================================================
   PLATO DESTACADO + categorías
   ========================================================= */
.destacado {
  position: relative;
  padding: clamp(6rem, 12vw, 9rem) 0;
  background:
    radial-gradient(ellipse 55% 45% at 30% 40%, rgba(86, 101, 58, .22), transparent 70%),
    var(--oliva-900);
  overflow: hidden;
}
.deco--d1 { width: 260px; height: 420px; right: -70px; top: 8%; transform: rotate(-28deg); color: var(--oliva-700); }
.destacado .contenedor { position: relative; z-index: 1; }

/* ---------- Lista tipo carta (se llena desde js/main.js) ---------- */
.menu {
  position: relative;
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 clamp(3.5rem, 7vw, 5rem);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3.2rem);
  border: 1px solid var(--crema-linea);
  background: rgba(20, 25, 16, .45);
}
/* Esquinas como en el marco de la portada */
.menu::before, .menu::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid var(--crema-3); }
.menu::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.menu::after { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }
.menu__titulo {
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: var(--crema-2);
  text-align: center;
  margin-bottom: 1.8rem;
}
.menu__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: clamp(1.6rem, 4vw, 3.4rem);
}
.menu__item {
  width: 100%;
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem 0 1.1rem 1rem;
  background: none; border: 0; border-bottom: 1px solid var(--crema-linea);
  border-left: 2px solid transparent;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.menu__item:hover, .menu__item:focus-visible { background: rgba(239, 230, 210, .04); }
.menu__item[aria-current="true"] { border-left-color: var(--crema-3); background: rgba(239, 230, 210, .06); }
.menu__fila { display: flex; align-items: baseline; gap: .6rem; }
.menu__nombre { font-family: var(--f-serif); font-size: 1.3rem; font-weight: 500; line-height: 1.2; }
.menu__puntos { flex: 1; border-bottom: 1px dotted rgba(239, 230, 210, .3); transform: translateY(-.3em); min-width: 1rem; }
.menu__precio { font-family: var(--f-serif); font-size: 1.25rem; color: var(--crema-2); white-space: nowrap; }
.menu__desc { font-size: .84rem; line-height: 1.5; color: var(--crema-tenue); padding-right: 3.6rem; }
.menu__nota { margin-top: 1.6rem; text-align: center; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--crema-3); }

/* ---------- Vitrina: un plato a la vez, foto de canto a canto ---------- */
.vitrina {
  position: relative;
  z-index: 1;
  height: clamp(520px, 80vh, 780px);
  overflow: hidden;
  background: var(--oliva-950);
  border-block: 1px solid var(--crema-linea);
}
.vitrina .slide { transition: opacity .35s var(--ease), visibility .35s; }

.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s;
}
.slide.activo { opacity: 1; visibility: visible; }
.slide__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(1.1);
  transition: transform 8s linear;
}
.slide.activo .slide__foto { transform: scale(1); }
/* Velo: oscuro a la izquierda donde va el texto, la foto respira a la derecha */
.slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 25, 16, .94) 0%, rgba(20, 25, 16, .82) 30%, rgba(20, 25, 16, .25) 62%, rgba(20, 25, 16, .05) 100%),
    linear-gradient(0deg, rgba(20, 25, 16, .7) 0%, transparent 30%);
}
.slide__texto {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  width: min(var(--ancho), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.slide__texto > * { max-width: 470px; }
/* El texto entra con un pequeño desfase al cambiar de plato */
.slide__texto > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.slide.activo .slide__texto > * { opacity: 1; transform: none; }
.slide.activo .slide__texto > :nth-child(2) { transition-delay: .12s; }
.slide.activo .slide__texto > :nth-child(3) { transition-delay: .22s; }
.slide.activo .slide__texto > :nth-child(4),
.slide.activo .slide__texto > :nth-child(5) { transition-delay: .32s; }

.slide__num { font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; color: var(--crema-3); }
.slide__nombre {
  font-family: var(--f-serif);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: 1.02;
  margin-top: .8rem;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .45);
}
.slide__nombre em { display: block; font-style: italic; color: var(--crema-2); }
.slide__detalle { margin-top: 1.6rem; }
.slide__detalle p { color: var(--crema-tenue); text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.slide__datos { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; gap: 2.6rem; }
.slide__datos li { display: flex; flex-direction: column; font-family: var(--f-serif); font-size: 1.15rem; }
.slide__datos span { font-family: var(--f-sans); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--crema-3); }
.slide__info { display: none; }
.slide__pie {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--crema-linea);
}
.slide__precio { font-family: var(--f-serif); font-size: 2.6rem; line-height: 1; color: var(--crema); }


/* Botones de categoría con foto */
.categorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 6 botones: 3 x 2 */
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  margin-top: 0;
}
.categoria {
  position: relative;
  display: block;
  height: clamp(220px, 24vw, 320px);
  overflow: hidden;
  border: 1px solid var(--crema-linea);
  isolation: isolate;
  transition: border-color .5s var(--ease);
}
.categoria img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.62) saturate(.85);
  transform: scale(1.05);
  transition: transform 1.2s var(--ease), filter .8s var(--ease);
  z-index: -2;
}
.categoria::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 35%, rgba(20, 25, 16, .92) 100%);
}
/* Marco interior que aparece al pasar el mouse */
.categoria::before {
  content: ""; position: absolute; inset: 10px; z-index: 1;
  border: 1px solid var(--crema-3);
  opacity: 0; transform: scale(.97);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.categoria__txt {
  position: absolute; left: 0; right: 0; bottom: 1.6rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.categoria__txt .script { font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; color: var(--crema); }
.categoria__txt small {
  margin-top: .5rem;
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--crema-3);
  transition: color .4s, letter-spacing .5s var(--ease);
}
.categoria:hover, .categoria:focus-visible { border-color: var(--crema-3); }
.categoria:hover img, .categoria:focus-visible img { transform: scale(1); filter: brightness(.78) saturate(1); }
.categoria:hover::before, .categoria:focus-visible::before { opacity: .6; transform: none; }
.categoria:hover small, .categoria:focus-visible small { color: var(--crema); letter-spacing: .32em; }
/* Botones inhabilitados (próximamente): sin hover, foto apagada */
.categoria--pronto { cursor: default; }
.categoria--pronto img { filter: grayscale(1) brightness(.4); transform: none; }
.categoria--pronto:hover { border-color: var(--crema-linea); }
.categoria--pronto:hover img { transform: none; filter: grayscale(1) brightness(.4); }
.categoria--pronto:hover::before { opacity: 0; }
.categoria--pronto .categoria__txt .script { color: var(--crema-tenue); }
.categoria--pronto small { color: var(--crema-3); opacity: .75; }
.categoria--pronto:hover small { color: var(--crema-3); letter-spacing: .26em; }
.categoria__pronto {
  position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1;
  padding: .4rem .9rem;
  border: 1px solid var(--crema-3);
  background: rgba(20, 25, 16, .7);
  font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
  color: var(--crema-3);
}

/* =========================================================
   PÁGINAS DE CATEGORÍA (/res, /cerdo, /ave, /pescado)
   ========================================================= */
/* La vitrina es lo primero que se ve: ocupa toda la pantalla */
.vitrina--pagina { height: 100vh; height: 100svh; min-height: 560px; border-top: 0; }
.vitrina--pagina .slide__texto { padding-top: 5rem; } /* que el texto no quede bajo el menú fijo */
.vitrina--pagina .hero__scroll { z-index: 3; }
/* Franja oscura arriba: el menú fijo se lee aunque la foto sea clara */
.vitrina--pagina::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: 2;
  background: linear-gradient(180deg, rgba(20, 25, 16, .85), transparent);
  pointer-events: none;
}

.cat-lista {
  position: relative;
  padding: clamp(5rem, 10vw, 7rem) 0 clamp(4rem, 8vw, 6rem);
  background:
    radial-gradient(ellipse 55% 45% at 30% 30%, rgba(86, 101, 58, .2), transparent 70%),
    var(--oliva-900);
  overflow: hidden;
}
.cat-lista .contenedor { position: relative; z-index: 1; }
.cat-lista .menu { margin: 0; }
/* Título y pestañas van debajo de la lista */
.cat-lista .menu + .encabezado { margin-top: clamp(4rem, 8vw, 5.5rem); }

/* Pestañas para saltar entre tipos de carne */
.cat-pestanas {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem;
  margin-top: -1.5rem;
}
.cat-pestanas a {
  padding: .7rem 1.4rem;
  border: 1px solid transparent;
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--crema-tenue);
  transition: color .3s, border-color .3s;
}
.cat-pestanas a:hover, .cat-pestanas a:focus-visible { color: var(--crema); }
.cat-pestanas a[aria-current="page"] { color: var(--crema); border-color: var(--crema-3); }

/* ---------- Puente del inicio hacia /nosotros ---------- */
.puente { text-align: center; margin-bottom: clamp(5rem, 10vw, 7.5rem); }
.puente__txt {
  font-family: var(--f-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  color: var(--crema-2);
  margin-bottom: 1.8rem;
}
.puente__txt em { color: var(--crema-3); }
.puente .btn span { display: inline-block; transition: transform .3s var(--ease); }
.puente .btn:hover span { transform: translateX(4px); }

/* =========================================================
   PÁGINA NOSOTROS (/nosotros)
   ========================================================= */
/* Historia: primera sección, foto de canto a canto en el 40% izquierdo y texto al lado */
.nos-historia {
  position: relative;
  display: grid; grid-template-columns: 40% 60%;
  min-height: 100vh; min-height: 100svh;
  background: var(--oliva-950);
  overflow: hidden;
}
.nos-historia__foto { margin: 0; position: relative; }
.nos-historia__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
}
/* Funde el borde derecho de la foto con el fondo del texto */
.nos-historia__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 75%, rgba(20, 25, 16, .55));
}
.nos-historia__foto figcaption {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 1; white-space: nowrap;
  background: var(--crema); color: var(--oliva-900);
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; padding: .7rem 1.2rem;
}
.nos-historia__texto {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 5.6rem clamp(1.6rem, 6vw, 6rem) 2.4rem; /* arriba deja lugar al menú fijo */
  max-width: 720px;
}
.nos-historia__texto > :not(.deco) { position: relative; z-index: 1; }
.deco--n1 { width: 280px; height: 440px; right: -140px; top: -40px; transform: rotate(200deg); color: var(--oliva-700); }
.nos-historia__titulo {
  font-family: "Italiana", var(--f-serif);
  font-size: clamp(2.8rem, 5.4vw, 4.8rem);
  line-height: .95; letter-spacing: .05em; text-transform: uppercase;
  color: var(--crema-claro);
}
.nos-historia__titulo .script {
  display: block; font-size: .55em; line-height: 1.3; letter-spacing: 0; text-transform: none;
  color: var(--crema-3); margin-bottom: .1em;
}
.nos-historia__sub { margin-top: .7rem; font-family: var(--f-serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--crema-2); }
.nos-historia__sub em { color: var(--crema-3); }
.nos-historia__texto .ornamento { margin: 1.1rem 0 0; }
.nos-historia__texto .parrafo { margin-top: 1rem; }
.nos-firma { display: flex; flex-direction: column; margin-top: 1.4rem; font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--crema-3); }
.nos-firma .script { font-size: 2.4rem; letter-spacing: 0; color: var(--crema); line-height: 1.1; }

/* 3. Cifras (banda crema) */
.nos-cifras {
  position: relative; overflow: hidden;
  background: var(--crema-claro); color: var(--oliva-900);
  padding: clamp(4.5rem, 9vw, 6.5rem) 0;
}
.deco--cifras { width: 300px; height: 470px; left: -60px; top: -70px; transform: rotate(160deg); color: rgba(86, 101, 58, .12); }
.nos-cifras__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(2.5rem, 7vw, 6rem); align-items: center;
}
.nos-cifras .sobre { color: var(--oliva-500); }
.nos-cifras__titulo { font-family: var(--f-serif); font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; color: var(--oliva-800); }
.nos-cifras__titulo .script { display: block; font-size: .62em; color: var(--dorado); margin-bottom: .05em; }
.nos-cifras__texto { margin-top: 1.2rem; max-width: 34ch; color: rgba(27, 33, 20, .7); }
/* Cifras como renglones de carta: número grande y su explicación */
.nos-cifras__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--oliva-linea); }
.nos-cifras__lista li {
  display: grid; grid-template-columns: clamp(6.2rem, 9vw, 7rem) 1fr; /* mismo ancho en los 3 renglones */
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--oliva-linea);
}
.nos-cifras__lista strong {
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(2.8rem, 5vw, 4rem); line-height: 1;
  color: var(--oliva-700);
}
.nos-cifras__lista h3 { font-size: .74rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--oliva-800); }
.nos-cifras__lista p { margin-top: .35rem; font-family: var(--f-serif); font-style: italic; font-size: 1.1rem; line-height: 1.4; color: rgba(27, 33, 20, .68); }

/* 5. Misión y visión */
.nos-mision { padding: clamp(5rem, 10vw, 7rem) 0; background: var(--oliva-950); border-block: 1px solid var(--crema-linea); }
.nos-mision__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; text-align: center; }
.nos-mision h3 { font-family: var(--f-serif); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.15; }
.nos-mision h3 em { display: block; color: var(--crema-2); }
.nos-mision .parrafo { margin: 1.2rem auto 0; }
.nos-mision__divisor { display: grid; place-items: center; }
.nos-mision__divisor .ornamento { width: 120px; margin: 0; transform: rotate(90deg); }

/* 7. Cierre */
.nos-cierre {
  position: relative; isolation: isolate;
  padding: clamp(6rem, 12vw, 9rem) 0;
  background: var(--oliva-950) url("/img/img27.webp") center / cover no-repeat; /* el mural, como en contacto */
  text-align: center;
}
/* Velo negro: más denso al centro, donde va el texto */
.nos-cierre::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0, 0, 0, .72), rgba(0, 0, 0, .45));
}
.nos-cierre .contenedor { position: relative; }
.nos-cierre__titulo { font-family: var(--f-serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; }
.nos-cierre__titulo .script { display: block; color: var(--crema-3); font-size: 1.15em; }
.nos-cierre__acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* =========================================================
   UBICACIÓN
   ========================================================= */
.ubicacion {
  position: relative;
  padding: clamp(6rem, 12vw, 9rem) 0;
  padding-top: 0;
  background:
    radial-gradient(ellipse 50% 50% at 75% 50%, rgba(86, 101, 58, .2), transparent 70%),
    var(--oliva-900);
  overflow: hidden;
}
.deco--u1 { width: 240px; height: 380px; left: -60px; bottom: -40px; transform: rotate(200deg); color: var(--oliva-700); }
.ubicacion .contenedor { position: relative; z-index: 1; }
.ubicacion__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2.6rem, 6vw, 5.5rem);
  align-items: stretch;
}

.ubicacion__info { display: flex; flex-direction: column; justify-content: center; }
.ubicacion__pin {
  width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid var(--crema-3);
  display: grid; place-items: center;
  color: var(--crema-3);
  margin-bottom: 1.6rem;
}
.ubicacion__pin svg { width: 24px; height: 24px; }
.ubicacion__etiqueta { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--crema-3); }
.ubicacion__direccion {
  font-style: normal;
  font-family: var(--f-serif);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  margin-top: .5rem;
}
.ubicacion__direccion em { font-style: italic; color: var(--crema-2); font-size: .7em; }
.ubicacion__info .ornamento { margin: 1.8rem 0; }
.ubicacion__datos { margin: 0; }
.ubicacion__datos div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px dashed var(--crema-linea);
}
.ubicacion__datos dt { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--crema-tenue); }
.ubicacion__datos dd { margin: 0; font-family: var(--f-serif); font-size: 1.15rem; }
.ubicacion__acciones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

/* Mapa enmarcado: en tonos oliva, a color al pasar el mouse o al tocarlo */
.ubicacion__mapa {
  position: relative;
  min-height: 460px;
  border: 1px solid var(--crema-linea);
  padding: 10px;
  background: var(--oliva-950);
}
.ubicacion__mapa::before, .ubicacion__mapa::after {
  content: ""; position: absolute; width: 22px; height: 22px; border: 1px solid var(--crema-3); z-index: 2;
}
.ubicacion__mapa::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.ubicacion__mapa::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.ubicacion__mapa iframe {
  display: block;
  width: 100%; height: 100%;
  min-height: 440px;
  border: 0;
  filter: grayscale(1) sepia(.35) hue-rotate(38deg) saturate(.9) contrast(.95) brightness(.9);
  transition: filter .8s var(--ease);
}
.ubicacion__mapa:hover iframe, .ubicacion__mapa:focus-within iframe { filter: none; }
.ubicacion__abrir {
  position: absolute; right: 22px; bottom: 22px; z-index: 2;
  padding: .7rem 1.1rem;
  background: var(--oliva-900); color: var(--crema);
  border: 1px solid var(--crema-linea);
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  transition: background .4s, color .4s;
}
.ubicacion__abrir:hover, .ubicacion__abrir:focus-visible { background: var(--crema); color: var(--oliva-900); }

/* =========================================================
   CONTACTO · foto de canto a canto con WhatsApp y redes
   ========================================================= */
.contacto-full {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 7rem var(--gutter);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.contacto-full__fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: -2;
}
/* En pantallas horizontales la foto ya llena el ancho: se agranda desde la derecha para dejar ese borde fuera */
/* Velo oliva: oscurece los bordes y deja respirar el centro de la foto */
.contacto-full::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* background:
    radial-gradient(ellipse 70% 65% at 50% 50%, rgba(20, 25, 16, .55), rgba(20, 25, 16, .9)),
    linear-gradient(180deg, rgba(20, 25, 16, .5), transparent 25%, transparent 75%, rgba(20, 25, 16, .7)); */
}
/* Marco fino interior, como en la portada */
.contacto-full::after {
  content: ""; position: absolute; inset: clamp(14px, 2.4vw, 28px);
  border: 1px solid var(--crema-linea);
  pointer-events: none;
}
.contacto-full__contenido { max-width: 640px; position: relative; }
/* Velo negro solo detrás del texto: oscuro al centro y se desvanece, el resto de la foto queda limpio */
.contacto-full__contenido::before {
  content: ""; position: absolute; z-index: -1;
  inset: calc(-16% - 1rem) calc(-28% - 1rem); /* 1rem más por lado = 2rem más de diámetro */
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, .18) 62%, transparent 75%);
  pointer-events: none;
}
.contacto-full__contenido .sobre,
.contacto-full__texto,
.contacto-full__numero,
.contacto-full__handle { text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
.contacto-full__titulo {
  font-family: var(--f-serif);
  font-size: clamp(2.8rem, 6.5vw, 5.2rem);
  line-height: 1;
  color: var(--crema-claro);
  text-shadow: 0 6px 30px rgba(0, 0, 0, .4);
}
.contacto-full__titulo .script {
  display: block;
  font-size: .62em;
  color: var(--crema-3);
  margin-bottom: .05em;
}
.contacto-full__texto {
  margin: 1.6rem auto 0;
  max-width: 46ch;
  color: var(--crema-2);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.btn-whatsapp {
  display: inline-flex; align-items: center; gap: .9rem;
  margin-top: 2.6rem;
  padding: 1.15rem 2.2rem 1.15rem 1.6rem;
  background: var(--crema);
  color: var(--oliva-900);
  border: 1px solid var(--crema);
  font-size: .78rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
  border-radius: 2rem;
}
.btn-whatsapp svg { width: 26px; height: 26px; flex: none; color: var(--oliva-600); transition: color .4s; }
.btn-whatsapp:hover, .btn-whatsapp:focus-visible { background: transparent; color: var(--crema); transform: translateY(-2px); }
.btn-whatsapp:hover svg, .btn-whatsapp:focus-visible svg { color: var(--crema); }
.contacto-full__numero { margin-top: 1rem; font-family: var(--f-serif); font-size: 1.25rem; color: var(--crema-2); letter-spacing: .04em; }

.contacto-full__redes {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  margin-top: 2.6rem;
}
.contacto-full__linea { width: clamp(30px, 8vw, 70px); height: 1px; background: var(--crema-linea); }
.contacto-full__redes a {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--crema-linea);
  background: rgba(20, 25, 16, .45);
  color: var(--crema);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .4s, color .4s, border-color .4s;
}
.contacto-full__redes a svg { width: 19px; height: 19px; }
.contacto-full__redes a:hover, .contacto-full__redes a:focus-visible { background: var(--crema); color: var(--oliva-900); border-color: var(--crema); }
.contacto-full__handle { margin-top: 1rem; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--crema-3); }

/* =========================================================
   FOOTER
   ========================================================= */
.pie { background: var(--oliva-950); padding: 5rem 0 2rem; border-top: 1px solid var(--crema-linea); }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.4rem; }
.pie__logo img { width: 230px; }
.pie__txt { color: var(--crema-tenue); margin-top: 1rem; font-family: var(--f-serif); font-style: italic; font-size: 1.1rem; }
.pie h5 { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--crema-3); margin-bottom: 1rem; }
.pie p { color: var(--crema-tenue); font-size: .94rem; }
.redes { display: flex; gap: .8rem; }
.redes a { width: 42px; height: 42px; border: 1px solid var(--crema-linea); border-radius: 50%; display: grid; place-items: center; transition: background .3s, color .3s, border-color .3s; }
.redes a:hover { background: var(--crema); color: var(--oliva-900); border-color: var(--crema); }
.redes svg { width: 17px; height: 17px; }
.pie__handle { margin-top: .9rem; font-size: .86rem !important; }
.pie__base { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.6rem; border-top: 1px solid var(--crema-linea); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--crema-3); }
.ornamento--pie { margin: 0; width: 140px; height: 14px; opacity: .6; }
.pie__base a:hover { color: var(--crema); }
/* Aviso del Libro de reclamaciones (imagen) */
.pie__libro {
  display: block; line-height: 0;
  padding: .55rem .7rem;
  background: #fff;
  border-radius: 1rem;
  transition: opacity .3s, transform .3s var(--ease);
}
.pie__libro img { width: 96px; height: auto; }
.pie__libro:hover, .pie__libro:focus-visible { opacity: .85; transform: translateY(-2px); }

/* =========================================================
   REVELADO AL HACER SCROLL
   ========================================================= */
.revela { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.revela.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  .hero__foto, .hero__scroll span { animation: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .nav__links { gap: 1.4rem; }
  .pie__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav__burger { display: block; z-index: 2; }
  .logo img { height: 54px; }
  .nav__links {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center; gap: 1.8rem;
    background: var(--oliva-950);
    opacity: 0; visibility: hidden;
    transition: opacity .5s var(--ease), visibility .5s;
  }
  .nav__links.abierto { opacity: 1; visibility: visible; }
  .nav__links a:not(.btn) { font-family: var(--f-serif); font-size: 1.9rem; letter-spacing: .02em; text-transform: none; color: var(--crema); }
  .nav__cta { margin-top: 1rem; }

  .hero { padding-bottom: 4.5rem; }
  .hero__foto { height: 64%; top: 7%; }
  .hero__scroll { display: none; }
  .hero__nombre { font-size: clamp(2.8rem, 12.5vw, 6rem); }
  .hero__fila { grid-template-columns: 1fr; gap: 1.4rem; }
  .hero__fila .btn:first-child, .hero__fila .btn:last-child { justify-self: center; }
  .hero__frase { order: -1; border-inline: 0; padding-inline: 0; }
  .hero__fila .btn { min-width: 230px; }

  .categorias { grid-template-columns: repeat(2, 1fr); }

  .banda, .banda:nth-child(even) { grid-template-columns: 1fr; grid-template-rows: 30vh auto; height: auto; min-height: 0; }
  .banda__foto, .banda:nth-child(even) .banda__foto {
    grid-column: 1; grid-row: 1; min-height: 200px;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .5) 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .5) 80%, transparent 100%);
  }
  .banda__texto, .banda:nth-child(even) .banda__texto {
    grid-column: 1; grid-row: 2;
    align-items: flex-start; text-align: left;
    margin-top: -1rem; /* el texto sube apenas sobre la parte ya difuminada */
    padding: 0 var(--gutter) 2rem;
  }
  .banda:nth-child(even) .banda__desc::after { margin-left: 0; }
  .banda:nth-child(even) .banda__pie { justify-content: flex-start; }
  .banda__ver, .banda:nth-child(even) .banda__ver { top: 1rem; bottom: auto; right: 1rem; left: auto; }
  .banda__num { font-size: 2.6rem; }

  .vitrina { height: clamp(540px, 86svh, 740px); }
  .slide__foto.foto-pendiente { padding: 22% 10% 70%; }
  .ubicacion__grid { grid-template-columns: 1fr; }
  .nos-mision__grid, .nos-cifras__grid { grid-template-columns: 1fr; }
  .nos-historia { grid-template-columns: 1fr; grid-template-rows: 55vh auto; min-height: 0; }
  .nos-historia__foto::after { background: linear-gradient(180deg, transparent 70%, rgba(20, 25, 16, .7)); }
  .nos-historia__texto { padding: 3rem var(--gutter) 4.5rem; max-width: none; }
  .nos-mision__divisor .ornamento { transform: none; }
  .btn-whatsapp { padding: 1.05rem 1.5rem; letter-spacing: .16em; font-size: .72rem; }
  .ubicacion__mapa, .ubicacion__mapa iframe { min-height: 360px; }
  .menu__lista { grid-template-columns: 1fr; }
  .menu__desc { padding-right: 0; }
  .slide::after {
    background: linear-gradient(0deg, rgba(20, 25, 16, .97) 0%, rgba(20, 25, 16, .88) 34%, rgba(20, 25, 16, .25) 64%, rgba(20, 25, 16, .35) 100%);
  }
  .slide__texto { justify-content: flex-end; padding-bottom: 2.2rem; }
  .slide__nombre { font-size: clamp(2.2rem, 9vw, 3rem); }
  .slide__detalle { max-height: 0; overflow: hidden; margin-top: 0; transition: max-height .5s var(--ease), margin .5s var(--ease); }
  .slide.abierto .slide__detalle { max-height: 340px; margin-top: 1rem; }
  .slide__detalle p { font-size: .94rem; }
  .slide__datos { margin-top: 1rem; gap: 1.8rem; }
  .slide__info {
    display: inline-flex; align-items: center; gap: .6rem; align-self: flex-start;
    margin-top: 1rem; padding: .5rem 0;
    background: none; border: 0; cursor: pointer;
    font: 400 .66rem var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--crema-3);
  }
  .slide__info span {
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--crema-3);
    display: grid; place-items: center; font-size: 1rem; letter-spacing: 0; line-height: 1;
    transition: transform .4s var(--ease);
  }
  .slide.abierto .slide__info span { transform: rotate(45deg); }
  .slide__pie { margin-top: 1.2rem; padding-top: 1.2rem; gap: 1.2rem; }
  .slide__precio { font-size: 2.1rem; }
}

@media (max-width: 560px) {
  .hero__nombre { letter-spacing: .04em; margin-right: -.04em; }
  .pie__grid { grid-template-columns: 1fr; }
  .categoria--pronto small { display: none; } /* la etiqueta Próximamente ya lo dice */
  .pie__base { flex-direction: column; text-align: center; }
}

/* =========================================================
   ESTRUCTURA BASE (comun a todos los sitios)
   ========================================================= */

/* Aviso de error de carga: lo activa js/helpers/fetch.js si /api/marca falla */
.sectionErrores {
  position: fixed; inset: 0; z-index: 110;
  display: none; justify-content: center; align-items: center;
  padding: 1rem;
  background: var(--oliva-950);
}
.sectionErrores.activo { display: flex; }
.sectionErrores p { color: var(--crema); font-family: var(--f-serif); font-size: 1.2rem; text-align: center; max-width: 40ch; }

/* Enlaces legales del pie */
.pie__legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 2.2rem;
  margin-top: 3.2rem;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--crema-3);
}
.pie__legal a, .pie__legal button { transition: color .3s var(--ease); }
.pie__legal a:hover, .pie__legal button:hover, .pie__legal [aria-current="page"] { color: var(--crema); }
.pie__legal + .pie__base { margin-top: 1.8rem; }