/* ==========================================================================
   Restaurante Buenaventura — hoja de estilos
   ========================================================================== */

/* --------------------------------------------------------- Tipografías ---
   Alojadas en nuestro propio servidor a propósito. Si se cargaran desde
   Google Fonts, cada visita enviaría su dirección IP a Google sin haber dado
   consentimiento, que es justo lo que queremos evitar por el RGPD.
   Fraunces e Inter están bajo licencia SIL Open Font License 1.1, que
   permite alojarlas y redistribuirlas.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fuentes/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fuentes/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fuentes/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fuentes/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colores */
  --tinta:        #17110f;
  --tinta-suave:  #574c47;
  --papel:        #fbf7f0;
  --papel-2:      #f3ece0;
  --linea:        #e2d8c8;
  --laca:         #b3202b;
  --laca-osc:     #7e1720;
  --oro:          #c8912f;
  --oro-claro:    #e8c77a;
  --neon:         #2f7de1;
  --verde-ok:     #17703c;

  /* Tipografía */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Medidas */
  --ancho: 1180px;
  --radio: 14px;
  --radio-s: 9px;
  --sombra: 0 1px 2px rgba(23, 17, 15, .06), 0 8px 24px rgba(23, 17, 15, .07);
  --sombra-alta: 0 2px 4px rgba(23, 17, 15, .08), 0 18px 48px rgba(23, 17, 15, .14);
  --barra-movil: 0px;
}

/* --------------------------------------------------------------- Reset --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Sin scroll animado: la portada mide casi 9.000 px y una animación de
     6.700 px ("Dónde estamos") se cancela sola en cuanto el dedo toca la
     pantalla, dejando al visitante a media página. Mismo motivo por el que
     la carta ya lo tenía desactivado más abajo. */
  /* margen para que los anclajes no queden bajo la cabecera fija */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  /* Nada de overflow-x aquí ni en <body>: cualquiera de los dos convierte
     el documento en contenedor de scroll y rompe window.scrollTo().
     El layout ya está verificado sin desbordamiento horizontal. */
}

/* En la carta, además de la cabecera hay una barra de búsqueda pegajosa.
   Y el scroll va SIN animación: la página mide más de 20.000 px y una
   animación de 9.000 px se cancela sola a medio camino. */
html.pagina-carta {
  scroll-padding-top: 208px;
  scroll-behavior: auto;
}
@media (max-width: 900px) { html.pagina-carta { scroll-padding-top: 220px; } }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--laca); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------ Accesibilidad --- */

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

.salta-al-contenido {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 200;
  background: var(--tinta);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radio-s) var(--radio-s);
  font-weight: 600;
  text-decoration: none;
  transition: top .18s ease;
}
.salta-al-contenido:focus { top: 0; }

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

/* ------------------------------------------------------------ Layout --- */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 20px;
}

.seccion { padding-block: clamp(56px, 8vw, 104px); }
.seccion--papel2 { background: var(--papel-2); }
.seccion--tinta { background: var(--tinta); color: var(--papel); }
.seccion--tinta h2 { color: #fff; }

.titulo-seccion {
  font-family: var(--display);
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  letter-spacing: -.015em;
  margin-bottom: .2em;
}

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--laca);
  margin-bottom: 14px;
}
.antetitulo::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--oro);
}
.seccion--tinta .antetitulo { color: var(--oro-claro); }

.entradilla {
  font-size: 1.1rem;
  color: var(--tinta-suave);
  max-width: 62ch;
  margin-bottom: 2.2em;
}
.seccion--tinta .entradilla { color: #d8cec6; }

/* ----------------------------------------------------------- Botones --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
/* Un desplazamiento de 1 px casi no se percibe; la escala sí se siente como
   pulsar, que es lo que confirma al visitante que el botón le ha oído. */
.btn:active { transform: scale(.97); }

.btn--principal {
  background: var(--laca);
  color: #fff;
  box-shadow: 0 6px 18px rgba(179, 32, 43, .28);
}
.btn--principal:hover { background: var(--laca-osc); }

.btn--secundario {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}
.btn--secundario:hover { background: var(--tinta); color: var(--papel); }

/* Sobre fondos oscuros el botón secundario se invierte */
.seccion--tinta .btn--secundario,
.hero .btn--secundario,
.carta-cabecera .btn--secundario,
.franja .btn--secundario {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .08);
}
.seccion--tinta .btn--secundario:hover,
.hero .btn--secundario:hover,
.carta-cabecera .btn--secundario:hover,
.franja .btn--secundario:hover { background: #fff; color: var(--tinta); border-color: #fff; }

.btn--oro { background: var(--oro); color: var(--tinta); }
.btn--oro:hover { background: var(--oro-claro); }

.btn svg { flex: none; }

/* --------------------------------------------------------- Cabecera --- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 240, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 76px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tinta);
  margin-right: auto;
}
/* El logo es el medallón del panda: el PNG ya trae el círculo recortado y el
   fondo transparente, así que aquí no hace falta border-radius ni máscara.
   El máster de 1024 px está en recursos-marca/logo-panda-1024.png. */
.marca__sello {
  width: 42px;
  height: 42px;
  flex: none;
  display: block;
}
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nombre {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 700;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  letter-spacing: -.01em;
}
.marca__tipo {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.nav { display: flex; gap: 4px; }
.nav a {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
  font-size: .96rem;
}
.nav a:hover { background: var(--papel-2); }
.nav a[aria-current="page"] { background: var(--tinta); color: var(--papel); }

.cabecera .btn { min-height: 46px; padding: 10px 20px; font-size: .96rem; }

.menu-boton {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 16px;
  background: transparent;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 900px) {
  .menu-boton { display: inline-flex; }
  .cabecera .btn--principal { display: none; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    padding: 10px 20px 20px;
    box-shadow: var(--sombra);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 15px 12px; border-radius: var(--radio-s); font-size: 1.06rem; }
}

/* -------------------------------------------------------------- Hero --- */

.hero {
  position: relative;
  min-height: min(84vh, 720px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--tinta);
  overflow: hidden;
}
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  opacity: .62;
}
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,7,6,.55) 0%, rgba(10,7,6,.18) 34%, rgba(10,7,6,.88) 100%);
}
.hero__contenido {
  position: relative;
  z-index: 1;
  padding-block: 54px 62px;
  width: 100%;
}
.hero__titulo {
  font-family: var(--display);
  font-size: clamp(2.7rem, 8.2vw, 5.6rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  letter-spacing: -.028em;
  margin: 0 0 .18em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.hero__lema {
  font-size: clamp(1.08rem, 2.3vw, 1.35rem);
  color: #f0e7dd;
  max-width: 46ch;
  margin-bottom: 1.6em;
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__chino {
  font-family: var(--display);
  display: block;
  font-size: .8em;
  color: var(--oro-claro);
  letter-spacing: .04em;
}

/* --------------------------------------------------- Estado abierto --- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.estado__punto {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #9aa0a6;
  flex: none;
}
.estado--abierto .estado__punto { background: #35d07f; box-shadow: 0 0 0 4px rgba(53,208,127,.22); }
.estado--cerrado .estado__punto { background: #ff6b5e; box-shadow: 0 0 0 4px rgba(255,107,94,.20); }

/* ------------------------------------------------------- Franja info --- */

.franja {
  background: var(--tinta);
  color: var(--papel);
  border-top: 3px solid var(--laca);
}
.franja__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px;
  background: rgba(255,255,255,.1);
}
.franja__item {
  background: var(--tinta);
  padding: 26px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.franja__item svg { flex: none; margin-top: 3px; color: var(--oro); }
.franja__et {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--oro-claro);
  margin-bottom: 4px;
}
.franja__dato { font-weight: 600; line-height: 1.45; }
.franja__dato a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }

/* Los dos teléfonos de la franja iban uno debajo de otro, con 21 px de alto
   y 6 px de separación. Uno es fijo y el otro móvil: a esa medida, quien
   apunta al primero marca el segundo. Cada uno pasa a ocupar su línea con
   44 px de alto (el mínimo cómodo para un dedo). El subrayado sustituye al
   borde inferior porque el relleno vertical lo dejaría despegado del texto. */
.franja__dato a[href^="tel:"] {
  display: block;
  width: fit-content;
  padding-block: 11px;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35);
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .franja__dato a:hover { text-decoration-color: #fff; }
}

/* El resto de teléfonos van dentro de frases o separados por un punto, así
   que no pueden ser bloques: ganan alto sin mover el texto de sitio. */
.ficha dd a[href^="tel:"],
.paso a[href^="tel:"],
.pie li a[href^="tel:"] {
  display: inline-block;
  padding-block: 9px;
  margin-block: -9px;
}
.franja__nota { font-size: .86rem; color: #b3a8a1; font-weight: 400; }

/* ----------------------------------------------------------- Pasos --- */

.pasos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 22px;
  counter-reset: paso;
}
.paso {
  position: relative;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 30px 26px 26px;
  box-shadow: var(--sombra);
}
.paso::before {
  counter-increment: paso;
  content: counter(paso);
  position: absolute;
  top: -19px; left: 26px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--laca);
  color: #fff;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(179,32,43,.3);
}
.paso h3 { margin-top: 14px; font-size: 1.24rem; }
.paso p { margin-bottom: 0; color: var(--tinta-suave); }

.aviso-recogida {
  margin-top: 30px;
  padding: 20px 24px;
  background: var(--oro-claro);
  border-radius: var(--radio);
  font-weight: 600;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.aviso-recogida svg { flex: none; margin-top: 2px; }

/* ------------------------------------------------- Bloques de carta --- */

.familias {
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
.familias a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 17px 19px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  text-decoration: none;
  color: var(--tinta);
  font-weight: 700;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* En pantalla táctil el :hover se queda pegado después de tocar: la ficha
   se levantaba y ahí se quedaba hasta tocar otra cosa. Se reserva para ratón
   y en su lugar el dedo recibe respuesta al pulsar. */
@media (hover: hover) and (pointer: fine) {
  .familias a:hover {
    border-color: var(--laca);
    transform: translateY(-2px);
    box-shadow: var(--sombra);
  }
}
.familias a:active { transform: scale(.985); }

/* ------------------------------------------------- Platos destacados ---
   Sustituyen a las 18 fichas de categoría que había antes en la portada.
   Aquello era un inventario ("Pollo — 20 platos"): daba a elegir entre
   dieciocho cosas y no enseñaba ni un plato, teniendo treinta fotos en
   assets/img/platos/. Seis fichas con foto, código y precio hacen el trabajo
   que debe hacer la portada de un restaurante: abrir el apetito y anclar
   lo que cuesta. Quien busque una categoría concreta tiene el buscador
   encima y el botón de la carta completa debajo. */

.destacados__et {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 14px;
}
.destacados {
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.destacado {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  text-decoration: none;
  color: var(--tinta);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.destacado img {
  display: block;
  width: 100%;
  /* "height: auto" anula la altura fija del atributo del HTML, que está ahí
     para reservar el hueco y evitar saltos al cargar. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s ease;
}
.destacado__cuerpo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}
.destacado__nombre { font-weight: 700; line-height: 1.25; text-wrap: balance; }
.destacado__cod { color: var(--laca); font-weight: 700; font-variant-numeric: tabular-nums; }
.destacado__pie {
  margin-top: auto;   /* el precio queda alineado abajo en las seis fichas */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.destacado__cat {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.destacado__precio {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .destacado:hover { border-color: var(--laca); transform: translateY(-2px); box-shadow: var(--sombra); }
  .destacado:hover img { transform: scale(1.04); }
}
.destacado:active { transform: scale(.99); }

/* Sin JavaScript la lista no se rellena: queda el enlace a la carta entera. */
.destacado--simple { padding: 17px 19px; font-weight: 700; }

@media (max-width: 900px) {
  .destacados { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 520px) {
  .destacados { gap: 10px; }
  .destacado__cuerpo { padding: 11px 12px 13px; gap: 6px; }
  .destacado__nombre { font-size: .95rem; }
  .destacado__cat { display: none; }   /* a dos columnas de 170 px no cabe */
}
.familias span {
  font-size: .82rem;
  font-weight: 500;
  color: var(--tinta-suave);
}

/* ------------------------------------- Buscador de la portada --- */

.busca-portada {
  position: relative;
  max-width: 640px;
  margin-bottom: 36px;
}
.busca-portada .buscador { margin-bottom: 0; }

.resultados {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  /* 48vh y no 60: a 375x812 el panel se salía 129 px por debajo del viewport
     porque no descontaba la barra fija de llamar, y los últimos resultados
     quedaban fuera de alcance. */
  max-height: min(48vh, 400px);
  overflow-y: auto;
}
.resultados[hidden] { display: none; }

.resultado {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 18px;
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 1px solid var(--linea);
}
.resultado:last-of-type { border-bottom: 0; }
.resultado:hover,
.resultado:focus-visible { background: var(--papel-2); }

.resultado__cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.resultado__nombre { font-weight: 600; line-height: 1.35; }
.resultado__cat {
  font-size: .8rem;
  color: var(--tinta-suave);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 1px;
}
.resultado__precio {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.resultados__mas {
  display: block;
  padding: 14px 18px;
  background: var(--tinta);
  color: var(--papel);
  text-decoration: none;
  font-weight: 700;
  text-align: center;
}
.resultados__mas:hover { background: var(--laca); }

.resultados__vacio {
  margin: 0;
  padding: 22px 18px;
  color: var(--tinta-suave);
  text-align: center;
  line-height: 1.5;
}

/* ------------------------------------------------------- Galería --- */

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px 14px;
}
.galeria figure { margin: 0; }
.galeria button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radio);
  overflow: hidden;
  line-height: 0;
}
.galeria img {
  width: 100%;
  /* "height: auto" es imprescindible: las imágenes llevan los atributos
     width y height en el HTML (para que la página no dé saltos al cargar),
     y esa altura fija anularía el aspect-ratio de aquí abajo. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .galeria button:hover img { transform: scale(1.04); }
}
.galeria button:active img { transform: scale(.99); }
.galeria figcaption {
  font-size: .9rem;
  color: var(--tinta-suave);
  padding-top: 8px;
  line-height: 1.4;
}

/* Visor de imágenes */
.visor {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 94vh;
}
.visor::backdrop { background: rgba(10, 7, 6, .88); }
.visor img { max-height: 84vh; width: auto; border-radius: var(--radio); }
.visor__pie {
  color: #fff;
  text-align: center;
  padding-top: 12px;
  font-size: .95rem;
}
.visor__cerrar {
  position: absolute;
  top: 8px; right: 8px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

/* ------------------------------------------------------- Ubicación --- */

.ubicacion {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: 34px;
  align-items: start;
}
@media (max-width: 860px) { .ubicacion { grid-template-columns: 1fr; } }

.mapa {
  border: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  background: var(--papel-2);
}
/* Caja que sustituye al mapa hasta que el visitante pide cargarlo. */
.mapa--consentimiento {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 24px;
  text-align: center;
  background: var(--papel-2);
  border: 2px dashed var(--linea);
  aspect-ratio: auto;
  min-height: 300px;
}
.mapa__aviso {
  margin: 0;
  max-width: 40ch;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.mapa__aviso strong { display: block; color: var(--tinta); font-size: 1.05rem; margin-bottom: 4px; }
.mapa--consentimiento .btn { min-height: 48px; }
.mapa__alternativa { font-size: .92rem; color: var(--tinta-suave); }

/* Variante de la caja del mapa cuando, en lugar del mapa incrustado,
   mostramos un enlace (por ejemplo en la vista previa compartida). */
.mapa--enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  text-decoration: none;
  color: var(--tinta);
  background: var(--papel-2);
  border: 2px dashed var(--linea);
}
.mapa--enlace strong { font-size: 1.1rem; }
.mapa--enlace small { color: var(--tinta-suave); max-width: 32ch; line-height: 1.45; }
.mapa--enlace:hover { border-color: var(--laca); }

.ficha dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--laca);
  margin-top: 20px;
}
.seccion--tinta .ficha dt { color: var(--oro-claro); }
.ficha dd { margin: 4px 0 0; font-size: 1.08rem; font-weight: 600; }
.ficha dd a { color: inherit; }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.horario-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.horario-tabla th,
.horario-tabla td {
  text-align: left;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 1rem;
}
.seccion--tinta .horario-tabla th,
.seccion--tinta .horario-tabla td { border-bottom-color: rgba(255,255,255,.14); }
.horario-tabla th { font-weight: 600; width: 40%; }
.horario-tabla td { font-weight: 600; font-variant-numeric: tabular-nums; }
.horario-tabla tr[data-hoy] th,
.horario-tabla tr[data-hoy] td { color: var(--oro); }
.horario-tabla .cerrado { color: #c0b4ac; font-weight: 500; }

/* ------------------------------------------------- Páginas legales --- */

.legal { padding-block: clamp(40px, 6vw, 72px); }
.legal__contenido { max-width: 72ch; }
.legal h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  letter-spacing: -.02em;
  margin-bottom: .3em;
}
.legal h2 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-variation-settings: "SOFT" 30;
  margin-top: 1.8em;
  padding-bottom: .25em;
  border-bottom: 2px solid var(--oro);
}
.legal h3 { font-size: 1.08rem; margin-top: 1.4em; }
.legal dl { margin: 0 0 1.4em; }
.legal dt { font-weight: 700; margin-top: 14px; }
.legal dd { margin: 2px 0 0; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal__fecha { color: var(--tinta-suave); font-size: .94rem; }

/* Marca los huecos que el dueño del restaurante tiene que rellenar.
   Se ve a la legua a propósito: así no se publica sin completar. */
.rellenar {
  background: #ffe9a8;
  border: 2px dashed #b3202b;
  border-radius: 5px;
  padding: 1px 8px;
  font-weight: 700;
  color: #7e1720;
}

.nota-legal {
  margin: 2em 0;
  padding: 18px 22px;
  background: var(--papel-2);
  border-left: 4px solid var(--oro);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
  font-size: .96rem;
}

/* --------------------------------------------------------- Error 404 --- */

.error404 {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 60px;
}
.error404 h1 {
  font-family: var(--display);
  font-size: clamp(3.4rem, 12vw, 7rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  color: var(--laca);
  margin-bottom: .1em;
  line-height: 1;
}
.error404 p { max-width: 46ch; color: var(--tinta-suave); font-size: 1.1rem; }
.error404 .hero__acciones { justify-content: center; margin-top: 12px; }
.error404__tel { margin-top: 28px; }

/* Los vinos llevan dos columnas de precio, así que la lista va a una sola
   columna aunque haya sitio para dos. */
.platos--una-columna { grid-template-columns: 1fr !important; }

/* ------------------------------------------------------- Pie --- */

.pie {
  background: #0f0b0a;
  color: #a79b94;
  padding-block: 46px 30px;
  font-size: .94rem;
}
.pie a { color: #e4dad2; }
.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pie h2 { color: #fff; font-size: 1.05rem; margin-bottom: .6em; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 7px; }
.pie__legal {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  font-size: .86rem;
}

/* ================================================== Página de carta === */

.carta-cabecera {
  background: var(--tinta);
  color: var(--papel);
  padding-block: clamp(42px, 6vw, 72px) clamp(34px, 5vw, 56px);
  border-bottom: 3px solid var(--laca);
}
.carta-cabecera h1 {
  font-family: var(--display);
  font-size: clamp(2.3rem, 6vw, 3.8rem);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  color: #fff;
  letter-spacing: -.02em;
}
.carta-cabecera p { color: #d8cec6; max-width: 60ch; }
.carta-cabecera__acciones { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 26px; }

.avisos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}
.avisos li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  padding: 8px 15px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
}

/* Barra de herramientas pegajosa */
.herramientas {
  position: sticky;
  top: 76px;
  z-index: 60;
  background: rgba(251, 247, 240, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  padding-block: 14px;
}
@media (max-width: 900px) { .herramientas { top: 76px; } }

.buscador { position: relative; margin-bottom: 12px; }
.buscador svg {
  position: absolute;
  left: 17px; top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-suave);
  pointer-events: none;
}
.buscador input {
  width: 100%;
  min-height: 54px;
  padding: 14px 52px 14px 50px;
  font: inherit;
  font-size: 1.03rem;
  color: var(--tinta);
  background: var(--papel);
  border: 2px solid var(--linea);
  border-radius: 999px;
}
/* Solo el desplazamiento del anillo, que en un campo con forma de pastilla
   necesita pegarse un poco más al borde. Aquí había también un
   "border-color: var(--laca)" que pintaba un segundo indicador rojo por
   dentro del anillo azul global: dos avisos de foco a la vez en el control
   más usado de la web. Dos indicadores no acompañan mejor que uno, solo
   hacen ruido. Se queda el azul porque es el único color de la paleta con
   3:1 o más contra los tres fondos del sitio (el rojo se queda en 2,81
   sobre las secciones oscuras y no cumple). */
.buscador input:focus { outline-offset: 1px; }
/* #9a8d85 sobre el papel daba 3,01:1, por debajo del mínimo de 4,5. Y aquí
   importa: el marcador de posición es la única instrucción que tiene el campo. */
.buscador input::placeholder { color: #7d7069; }
/* WebKit pinta su propia aspa de borrar además de nuestro botón: salían dos
   juntas. Nos quedamos con la nuestra, que sí limpia el estado del buscador. */
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.buscador__limpiar {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--papel-2);
  color: var(--tinta);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}
.buscador__limpiar[hidden] { display: none; }

.fichas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.fichas::-webkit-scrollbar { height: 5px; }
.fichas::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 3px; }
.fichas a {
  flex: none;
  padding: 9px 17px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--tinta);
  text-decoration: none;
  font-size: .93rem;
  font-weight: 600;
  white-space: nowrap;
}
.fichas a:hover { border-color: var(--laca); color: var(--laca); }
.fichas a.activa { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.contador-resultados {
  padding-block: 18px 0;
  font-weight: 600;
  color: var(--tinta-suave);
}

/* Listado de platos */
.familia { padding-block: clamp(34px, 5vw, 52px); border-bottom: 1px solid var(--linea); }
.familia:last-of-type { border-bottom: 0; }
.familia[hidden] { display: none; }

.familia__titulo {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  letter-spacing: -.015em;
  margin-bottom: .12em;
}
.familia__desc {
  color: var(--tinta-suave);
  max-width: 68ch;
  margin-bottom: 1.6em;
}

.platos { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
@media (min-width: 780px) {
  .platos { grid-template-columns: 1fr 1fr; column-gap: 46px; }
}

.plato {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px dotted var(--linea);
}
.plato[hidden] { display: none; }
/* Miniatura del plato. Solo aparece en los que tienen foto. */
.plato__foto {
  flex: none;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--papel-2);
  cursor: zoom-in;
  line-height: 0;
  align-self: center;
}
.plato__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
/* Igual que la galería: en el móvil la foto se quedaba ampliada al 108 %
   después de tocarla, y en la carta hay treinta. */
@media (hover: hover) and (pointer: fine) {
  .plato__foto:hover img { transform: scale(1.08); }
}
.plato__foto:active img { transform: scale(.97); }

/* Con foto, la fila necesita un poco más de aire */
.plato--con-foto { padding-block: 11px; gap: 14px; }

@media (max-width: 480px) {
  .plato__foto { width: 58px; height: 58px; }
}

.plato__cuerpo { flex: 1 1 auto; min-width: 0; }
.plato__nombre { font-weight: 600; font-size: 1.05rem; }
.plato__cod {
  display: inline-block;
  min-width: 2.6em;
  margin-right: 8px;
  color: var(--laca);
  font-weight: 700;
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
}
.plato__desc { font-size: .93rem; color: var(--tinta-suave); margin: 2px 0 0; }
.plato__incluye {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: .93rem;
  color: var(--tinta-suave);
}
.plato__incluye li { margin-bottom: 2px; }
.plato__precio {
  flex: none;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
/* Los combinados llevan una lista larga de lo que incluyen, así que el
   contenido se alinea arriba en lugar de por la línea base. Pero mantienen
   la misma estructura que el resto: foto a la izquierda, nombre en medio y
   precio a la derecha. Así todos los platos se leen igual. */
.plato--combinado { align-items: flex-start; }
.plato--combinado .plato__precio {
  font-size: 1.15rem;
  color: var(--laca);
  padding-top: 1px;
}
.plato--combinado .plato__foto { align-self: flex-start; }

.precios-dobles { display: flex; gap: 22px; flex: none; }
.precios-dobles span { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 4.4em; text-align: right; }
.precios-dobles .vacio { color: #b9aca4; font-weight: 500; }
.cabecera-vinos {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  padding: 0 4px 6px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.cabecera-vinos span { min-width: 4.4em; text-align: right; }

.subfamilia { margin-bottom: 34px; }
.subfamilia h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  font-variation-settings: "SOFT" 30;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--oro);
  margin-bottom: 4px;
}

.sin-resultados { padding: 46px 0; text-align: center; color: var(--tinta-suave); }
.sin-resultados[hidden] { display: none; }
.sin-resultados strong { display: block; font-size: 1.3rem; color: var(--tinta); margin-bottom: 6px; }

/* ------------------------------------------ Barra de llamada (móvil) --- */

.barra-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 247, 240, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea);
}
.barra-movil .btn { flex: 1 1 0; min-height: 52px; padding-inline: 12px; font-size: .98rem; }

/* El aviso de horario, además de arriba, justo encima del botón que se pulsa.
   "¿Estarán abiertos?" es la duda del momento de llamar, y hasta ahora la
   respuesta vivía a 4.000 px de distancia. Aquí el fondo es claro, así que
   pierde la cápsula translúcida pensada para las secciones oscuras. */
.barra-movil { flex-wrap: wrap; }
.barra-movil .estado {
  flex: 1 0 100%;
  justify-content: center;
  margin: 0;
  padding: 0 12px 7px;
  border: 0;
  background: none;
  backdrop-filter: none;
  font-size: .85rem;
  color: var(--tinta-suave);
}

/* 900px y no 760px: a partir de 900 la cabecera esconde su botón de llamar
   (regla .cabecera .btn--principal más arriba). Si la barra apareciera solo
   a 760, entre 761 y 900 —iPad vertical, Surface, móvil en horizontal— no
   quedaría ninguna forma de llamar en pantalla. */
@media (max-width: 900px) {
  .barra-movil { display: flex; }
  body { padding-bottom: 84px; }
  html { scroll-padding-top: 76px; }
}

/* ------------------------------------------------------ Volver arriba --- */

.arriba {
  position: fixed;
  right: 18px;
  bottom: 96px;
  z-index: 80;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.arriba.visible { opacity: 1; visibility: visible; }
@media (min-width: 761px) { .arriba { bottom: 24px; } }

/* -------------------------------------------------------- Impresión --- */

@media print {
  .cabecera, .herramientas, .barra-movil, .arriba, .hero__acciones,
  .carta-cabecera__acciones, .buscador, .fichas, .galeria, .mapa { display: none !important; }
  body { background: #fff; font-size: 11pt; padding: 0; }
  .carta-cabecera { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .carta-cabecera h1, .carta-cabecera p { color: #000; }
  .familia { break-inside: avoid; page-break-inside: avoid; }
  .platos { grid-template-columns: 1fr 1fr; }
}