/* ===========================================================================
   BASE · Webs
   ---------------------------------------------------------------------------
   Estructura, tipografia y las ocho secciones. Este archivo NO conoce ningun
   color ni ninguna fuente concreta: todo sale de las variables de temas.css.
   Si aqui aparece un hex, es un error.

   Movil primero. Cada @media es una AMPLIACION hacia arriba, nunca un parche.
   =========================================================================== */

/* ------------------------------------------------------------- CIMIENTOS -- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Lenis toma el mando del scroll cuando carga; sin el, el smooth nativo de
   arriba ya deja la web usable. Progressive enhancement. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-espaciado);
  text-transform: var(--display-caja);
  line-height: 1.08;
  text-wrap: balance;
}

/* El 10,5vw de antes cabia con Bitter cargada y NO cabia con la de respaldo,
   que ocupa un 13 % mas: por debajo de 686 px el nombre se salia de la
   pantalla. Y esa es justo la situacion normal durante el medio segundo que
   tarda en llegar la fuente de Google, o la situacion permanente dentro de un
   restaurante sin wifi. Con 8,6vw cabe en los dos casos y a cualquier ancho. */
h1 {
  font-size: clamp(2.4rem, 8.6vw, 7rem);
  line-height: .96;
  /* Red de seguridad: un nombre de una sola palabra muy larga no puede sacar
     el hero de la pantalla pase lo que pase. */
  overflow-wrap: break-word;
  max-width: 100%;
}
h2 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
h3 { font-size: clamp(1.05rem, 2.4vw, 1.35rem); }

p { text-wrap: pretty; }

/* Foco visible SIEMPRE. Se navega con teclado o no se navega. */
:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 3px;
  border-radius: 3px;
}

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

section {
  padding-block: clamp(4rem, 11vw, 8rem);
  /* Al saltar desde el menu, la cabecera fija no debe comerse el titulo. */
  /* Medido, no a ojo: la cabecera cambia de alto con el tema (cada uno trae
     sus fuentes) y con el logo del cliente, si lo tiene. El 4,5rem es solo
     el valor de respaldo para el instante antes de que corra el JS. */
  scroll-margin-top: calc(var(--alto-cabecera-real, 4.5rem) + 1.4rem);
}

/* .porpalabras es inline-block (necesita serlo para la mascara), y eso hacia
   que el titular dejara de ser un bloque: en la seccion de opiniones, la nota
   se subia a su misma linea y se comia el titulo. Los titulares mandan. */
h1.porpalabras, h2.porpalabras { display: block; }

.seccion-titulo { margin-bottom: .6rem; }
.seccion-entradilla {
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  font-size: 1.06rem;
}

/* Solo para lectores de pantalla. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- BOTONES -- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.7rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--cuerpo);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  /* El hover es movimiento provocado por el usuario: NO se multiplica por el
     dial. Regla 3 de la politica de movimiento de la casa. */
  transition: background-color .25s var(--curva), color .25s var(--curva),
              border-color .25s var(--curva), transform .25s var(--curva);
  /* 48px de alto minimo: es el objetivo tactil que exige WCAG 2.5.8. */
  min-height: 48px;
}
.boton:hover { transform: translateY(-2px); }
.boton--principal { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }
.boton--principal:hover { background: var(--marca-viva); border-color: var(--marca-viva); color: var(--sobre-marca); }
.boton--fantasma { border-color: currentColor; }
.boton--fantasma:hover { background: var(--tinta-clara); color: var(--fondo-hondo); border-color: var(--tinta-clara); }

/* ------------------------------------------------------------- CABECERA -- */

/* Barra de credenciales. Tres datos, ninguno de relleno: es lo primero que
   se ve y tiene que decir por que este sitio merece la pena. Estatica a
   proposito: un marquee infinito exigiria boton de pausa (WCAG 2.2.2) y no
   aporta nada que no aporte el texto quieto. */
.aviso-top {
  position: relative; z-index: 61;
  background: var(--fondo-hondo);
  /* Fondo oscuro propio, asi que declara su texto claro y no depende de nadie. */
  color: color-mix(in srgb, var(--tinta-clara) 86%, transparent);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem 1.6rem;
  padding: .5rem 1rem;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  text-align: center;
}
.aviso-top span { display: inline-flex; align-items: center; gap: .5rem; }
.aviso-top span + span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--marca-viva); flex: none;
}

/* La cabecera empieza ABSOLUTA, apoyada sobre el hero y debajo de la barra de
   credenciales, y solo se vuelve fija cuando el hero sale de pantalla. Asi la
   barra de credenciales se lee entera al entrar y no queda tapada. */
.cabecera {
  position: absolute; inset: auto 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 2.2rem);
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--curva), border-color .3s var(--curva);
}
/* Sobre el hero (que es oscuro) la cabecera va transparente y en claro. */
.cabecera:not(.pegada) {
  background: transparent; backdrop-filter: none; color: var(--tinta-clara);
}
.cabecera.pegada {
  position: fixed; top: 0;
  border-bottom-color: var(--linea);
  animation: bajar-cabecera .45s var(--curva);
}
@keyframes bajar-cabecera { from { transform: translateY(-100%); } to { transform: none; } }

.cabecera__marca {
  font-family: var(--display); font-size: 1.15rem; font-weight: var(--display-peso);
  display: inline-flex; align-items: center;
}

/* El logo del cliente en la cabecera. Se le da una ALTURA fija y ancho libre,
   no al reves: los logos vienen de mil formas y lo que tiene que cuadrar es la
   linea de la cabecera, no lo ancho que sea cada uno. */
.cabecera__logo {
  height: clamp(30px, 5vw, 40px);
  width: auto; max-width: 200px;
  object-fit: contain;
  display: block;
}

.cabecera__nav { display: none; gap: .35rem; }
.cabecera__nav a {
  padding: .5rem .95rem; border-radius: 999px; font-size: .95rem;
  transition: background-color .25s var(--curva);
}
/* Pildora al pasar el raton, sin recuadro fijo. Patron de la casa. */
.cabecera__nav a:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

@media (min-width: 900px) { .cabecera__nav { display: flex; } }

/* ----------------------------------------------------------------- HERO -- */

.hero {
  position: relative;
  /* 88 y no 100: a pantalla completa, el contenido queda centrado y sobra
     medio hero de foto vacia por debajo de los botones. Con 88 asoma la barra
     de datos, que llena ese hueco y ademas invita a bajar mejor que la flecha,
     porque se ve que hay algo mas. */
  min-height: 88svh;
  display: grid; place-items: center;
  text-align: center;
  color: var(--tinta-clara);
  overflow: hidden;
  padding: 6rem 1.5rem 4rem;
}
.hero__fondo {
  position: absolute; inset: -12% 0;
  width: 100%; height: 124%;
  object-fit: cover;
  z-index: 0;
  /* El parallax lo mueve main.js multiplicando por --motion-gain. */
  will-change: transform;
}
/* El oscurecido del hero lo pone .vineta (materia.css), que ademas cierra las
   esquinas. Aqui NO se pinta ningun degradado o se pisarian. */
.hero__contenido { position: relative; z-index: 3; max-width: 62rem; }
/* Sombra en TODO el texto del hero. Va encima de una foto que no controlamos,
   y una foto de restaurante siempre tiene una pared blanca o un mantel donde
   menos conviene. */
.hero__contenido h1 { text-shadow: 0 3px 8px rgba(0,0,0,.75), 0 14px 40px rgba(0,0,0,.5); }
.hero__lema { text-shadow: 0 2px 6px rgba(0,0,0,.85); }
.hero .sello {
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.hero__antetitulo { margin-bottom: 1.6rem; }

/* La nota manuscrita del hero, colgando del titular. */
/* .hero__manuscrita se define en materia.css, que es donde vive .manuscrita:
   aqui la pisaria la carga posterior de esa hoja. */
.hero__lema {
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  max-width: 46ch; margin: 1.2rem auto 2.2rem;
  color: var(--tinta-clara);
}
.hero__botones { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* ---------------------------------------------------- BARRA DE DATOS -- */
/* Horario de hoy, direccion y telefono SIN hacer scroll. Es lo que el
   visitante viene a buscar, segun la encuesta MGH. */

.datos {
  background: var(--fondo-hondo); color: var(--tinta-clara);
  padding-block: clamp(1.6rem, 4vw, 2.4rem);
}
.datos__rejilla {
  display: grid; gap: 1.4rem;
  grid-template-columns: 1fr;
  text-align: center;
}
.datos__celda { display: flex; flex-direction: column; gap: .3rem; }

/* La etiqueta ya no es un gris de adorno: es la que dice de que va el dato,
   y en un movil a un brazo de distancia .72rem en gris tenue no se lee. */
.datos__etiqueta {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700;
  /* El color va mas abajo, en el bloque de superficies oscuras: aqui se
     declaraba tambien y lo pisaba, asi que sobraba. */
}
.datos__valor { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.datos__valor a:hover { color: var(--marca-viva); }

/* "Abierto ahora" es EL dato de esta barra: es a lo que entra la gente desde
   el movil. Se lleva el tamano mas grande de los tres. */
.datos__celda:first-child .datos__valor { font-size: 1.4rem; font-weight: 700; }

/* El telefono, grande y tocable: en movil es un boton de llamada disfrazado
   de texto, y con 1,02 rem se fallaba el dedo. */
.datos__celda:last-child .datos__valor { font-variant-numeric: tabular-nums; }

.estado { display: inline-flex; align-items: center; gap: .6rem; }
.estado::before {
  content: ""; width: .62rem; height: .62rem; border-radius: 50%;
  background: currentColor; flex: none;
  box-shadow: 0 0 0 .28rem color-mix(in srgb, currentColor 22%, transparent);
}
/* El estado se pinta con la pareja de colores que le pase la superficie: los
   claros solo se leen sobre fondo oscuro. Cuando este verde vivia fijo aqui,
   en la portada de la carta (papel crema) daba 2,01 de contraste. */
.estado--abierto { color: var(--verde-abierto); }
.estado--cerrado { color: var(--rojo-cerrado); }

@media (min-width: 760px) {
  .datos__rejilla {
    /* FLEX, no grid. Cada celda ocupa lo que necesita y el hueco sobrante se
       reparte entre ellas, en vez de dar a las cuatro la misma tajada: con
       1fr, cada una se llevaba 426 px de los 1280 para textos de 150, y
       quedaba media barra vacia mientras la direccion iba estrecha.
       Y con flex da igual que sean tres celdas o cuatro, segun el cliente
       tenga WhatsApp o no. */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    text-align: left;
    gap: 0;
  }
  /* Una linea fina entre columnas: sin ella los tres datos flotaban sueltos y
     no se leian como una barra, que era parte de lo que se veia pobre. */
  .datos__celda { padding-inline: clamp(1rem, 3vw, 2.2rem); flex: 0 1 auto; }
  .datos__celda:first-child { padding-left: 0; }
  .datos__celda:last-child { padding-right: 0; }
  .datos__celda + .datos__celda {
    border-left: 1px solid color-mix(in srgb, var(--tinta-clara) 16%, transparent);
  }
}

/* ---------------------------------------------------------------- CARTA -- */
/* Va en SEGUNDA posicion a proposito. Es el principal motor de decision. */

/* El fondo lo pone .superficie-papel (materia.css). */

/* La barra de categorias se queda pegada al hacer scroll, pero SIN pintar una
   banda de color: eso cortaba la textura del papel en seco. Un desenfoque y un
   velo del propio papel bastan para que el texto se lea por debajo. */
.carta__filtros {
  position: sticky; top: 4.2rem; z-index: 40;
  display: flex; gap: .5rem;
  overflow-x: auto; scrollbar-width: none;
  padding: .9rem 0;
  margin-bottom: 2.4rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, currentColor 8%, transparent) 0%,
    transparent 100%);
  backdrop-filter: blur(6px);
}
.carta__filtros::-webkit-scrollbar { display: none; }
.carta__filtro {
  flex: none;
  padding: .55rem 1.15rem;
  border: 1px solid var(--linea); border-radius: 999px;
  background: transparent; color: var(--texto-suave, var(--tinta-suave));
  font-family: var(--cuerpo); font-size: .92rem; cursor: pointer;
  transition: background-color .25s var(--curva), color .25s var(--curva),
              border-color .25s var(--curva);
}
.carta__filtro:hover { border-color: var(--marca); color: var(--texto, var(--tinta)); }
.carta__filtro[aria-pressed="true"] {
  background: var(--marca); border-color: var(--marca); color: var(--sobre-marca);
}

.platos { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .platos { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 1080px) { .platos { grid-template-columns: repeat(4, 1fr); } }

.plato {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo);
  /* La ficha tiene fondo claro propio, asi que fija su texto oscuro. Sin esto
     hereda el color de la seccion y, cuando la seccion es piedra, sale texto
     crema sobre tarjeta blanca: ilegible. */
  color: var(--tinta);
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  border: 1px solid var(--linea);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px -14px rgba(0,0,0,.35);
  transition: transform .4s var(--curva), box-shadow .4s var(--curva);
}
/* El hover levanta la ficha y la endereza un pelin. Movimiento provocado por
   el usuario: no lo gradua el dial. */
.plato:hover {
  transform: translateY(-8px) rotate(-.35deg);
  box-shadow: 0 3px 6px rgba(0,0,0,.08), 0 26px 46px -18px rgba(0,0,0,.45);
}
.plato[hidden] { display: none; }

/* El PNG recortado flota sobre el color de marca. La sombra sigue la silueta
   real del alfa, no la caja: por eso drop-shadow y no box-shadow. */
.plato__foto {
  position: relative;   /* el sello se ancla AQUI, no en la ficha entera: en la
                           variante horizontal se iba a la esquina del texto y
                           se montaba encima del precio */
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  background: var(--plato-fondo);
  padding: 1rem;
  overflow: hidden;
}
.plato__foto img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(var(--sombra-plato));
  transition: transform .45s var(--curva);
}
.plato:hover .plato__foto img { transform: scale(1.06) rotate(-1.5deg); }

/* Los platos SIN silueta legible (caldos, guisos en cazuela, ensaladas) no se
   recortan: van a sangre y llenan la caja. Se marcan con data-recorte="no". */
.plato[data-recorte="no"] .plato__foto { padding: 0; background: var(--fondo-hondo); }
.plato[data-recorte="no"] .plato__foto img { object-fit: cover; filter: none; }

.plato__cuerpo { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }

/* Un plato sin descripcion deja un <p> vacio que sigue ocupando su hueco y su
   gap. Con las cartas de Google, que no traen descripcion ni precio, eso son
   dos huecos por plato y la tarjeta se ve medio vacia. El dia que el cliente
   escriba las descripciones, aparecen solas. */
.plato__desc:empty,
.plato__alergenos:empty { display: none; }

/* Nombre, puntitos y precio en una sola linea. Es el gesto que convierte una
   rejilla de productos en una CARTA de restaurante, y cuesta tres reglas. */
.plato__linea { display: flex; align-items: flex-end; gap: 0; }
.plato__nombre { font-size: 1.05rem; line-height: 1.2; }
/* nowrap obligatorio: sin el, en movil "12,00 €" parte el simbolo a la linea
   siguiente y el precio se lee como si costara 12,00 de algo. */
.plato__precio {
  font-family: var(--display); font-size: 1.1rem; color: var(--marca);
  white-space: nowrap; line-height: 1.2;
}
.plato__desc { font-size: .88rem; color: var(--texto-suave); line-height: 1.45; flex: 1; margin-top: .25rem; }
.plato__alergenos { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .6rem; }

/* Nota manuscrita al pie de la carta. Una por pagina, no mas. */
.carta__nota {
  display: block;
  margin-top: clamp(2rem, 5vw, 3rem);
  text-align: center;
  color: var(--texto-suave);
  max-width: 40ch; margin-inline: auto;
}
.plato__alergeno {
  font-size: .68rem; padding: .12rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--tinta) 8%, transparent);
  color: var(--tinta-suave);
}

/* -------------------------------------------------------------- HISTORIA -- */
/* Long scroll narrativo: escenas con parallax por capas. */


.escena {
  display: grid; gap: 2rem;
  align-items: center;
  margin-bottom: clamp(3rem, 8vw, 6rem);
}
.escena:last-child { margin-bottom: 0; }
/* La figura es una polaroid (materia.css): marco de papel, torcida y con
   cinta. El recorte va en un envoltorio interno para que el parallax de la
   foto no se salga del marco.

   El ancho maximo no es un capricho: una polaroid a todo el ancho de la
   columna deja de parecer una foto apoyada y vuelve a parecer un banner. */
.escena__figura {
  position: relative;
  max-width: 430px;
  margin-inline: auto;
}
.escena__figura img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  will-change: transform;
}
.escena__texto p { color: var(--texto-suave); margin-top: .9rem; }

@media (min-width: 860px) {
  .escena { grid-template-columns: 1fr .95fr; gap: 4.5rem; }
  .escena:nth-child(even) .escena__figura { order: 2; }
}

.valores { display: grid; gap: 1.2rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 760px) { .valores { grid-template-columns: repeat(3, 1fr); } }
.valor {
  position: relative;
  padding: 2.2rem 1.6rem 1.6rem;
  border-top: 2px solid color-mix(in srgb, var(--marca-viva) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tinta-clara) 6%, transparent), transparent 60%);
}
/* El numero grande y tenue detras del titulo: da peso editorial sin gritar. */
.valor__num {
  position: absolute; top: .1rem; right: .8rem;
  font-family: var(--display);
  font-size: 3.4rem; line-height: 1;
  color: color-mix(in srgb, var(--texto) 16%, transparent);
  pointer-events: none;
}
.valor h3 { margin-bottom: .5rem; color: var(--marca); }
.superficie-piedra .valor h3 { color: var(--acento-claro); }
.valor p { font-size: .95rem; color: var(--texto-suave); }

/* -------------------------------------------------------------- GALERIA -- */


.galeria__rejilla { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .galeria__rejilla { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
/* Cada foto va con marco de papel y ligeramente torcida, alternando el lado.
   Una rejilla perfectamente alineada parece un catalogo; esto parece un
   corcho con fotos puestas a mano. El angulo lo gradua el dial. */
.galeria__rejilla a {
  background: #FBF7EF;
  padding: 9px 9px 9px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 14px 30px -16px rgba(0,0,0,.5);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva), z-index 0s;
}
.galeria__rejilla a:nth-child(odd)  { transform: rotate(calc(-1.6deg * var(--motion-gain, 1))); }
.galeria__rejilla a:nth-child(even) { transform: rotate(calc(1.4deg * var(--motion-gain, 1))); }
.galeria__rejilla a:hover {
  transform: rotate(0) scale(1.03); z-index: 2;
  box-shadow: 0 4px 8px rgba(0,0,0,.12), 0 26px 46px -18px rgba(0,0,0,.55);
}
.galeria__rejilla img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .5s var(--curva);
}
/* La primera imagen manda: ocupa el doble en pantallas anchas. */
@media (min-width: 780px) {
  .galeria__rejilla > *:first-child { grid-column: span 2; grid-row: span 2; }
}

/* --------------------------------------------------------------- RESENAS -- */

.resenas { text-align: center; }

/* La nota va MUY grande. Es el argumento mas fuerte que tiene el sitio y
   merece el tamano de un titular, no el de un dato. */
.resenas__nota {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  margin-top: 1.8rem;
}
.resenas__cifra {
  font-family: var(--display);
  font-size: clamp(4rem, 13vw, 8.5rem);
  line-height: .85;
  /* Sobre papel manda el color de marca, que es oscuro; sobre piedra, el
     acento claro. El mismo dorado no puede valer para las dos cosas. */
  color: var(--marca);
}
.superficie-piedra .resenas__cifra { color: var(--acento-claro); }
.resenas__estrellas { color: var(--marca); }
.superficie-piedra .resenas__estrellas { color: var(--acento-claro); }
.resenas__de {
  font-family: var(--cuerpo); font-size: .95rem; text-align: left;
  color: var(--texto-suave);
  line-height: 1.35;
}
.resenas__estrellas {
  font-size: 1.5rem; letter-spacing: .18em; color: var(--marca-viva);
  margin-block: .5rem 2.6rem;
}

/* Cada opinion es un recorte de papel pegado, con su angulo propio. */
.resenas__lista { display: grid; gap: 1.6rem; margin-bottom: 3rem; text-align: left; }
@media (min-width: 820px) { .resenas__lista { grid-template-columns: repeat(3, 1fr); gap: 1.9rem; } }
.resena {
  padding: 1.7rem 1.6rem 1.4rem;
  background: #FBF7EF;
  color: #2A2620;
  /* El papel tiene fondo propio, asi que declara TODOS sus colores y no solo
     el principal. Sin esta linea, la firma usaba el --texto-suave de la
     seccion; en El Arriero la seccion cae sobre piedra, el suave es crema, y
     "en Google" salia crema sobre papel crema: 1,01 de contraste, invisible.
     Es la regla de la casa otra vez: manda la superficie, y una ficha con
     fondo propio ES una superficie. */
  --texto: #2A2620;
  --texto-suave: #6B6153;
  --texto-tenue: rgba(42, 38, 32, .45);
  --linea-sup: rgba(42, 38, 32, .16);
  box-shadow: 0 2px 5px rgba(0,0,0,.16), 0 18px 34px -18px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: .9rem;
  transition: transform .45s var(--curva);
}
.resena--izq { transform: rotate(calc(-1.5deg * var(--motion-gain, 1))); }
.resena--der { transform: rotate(calc(1.7deg * var(--motion-gain, 1))); }
.resena:hover { transform: rotate(0) translateY(-5px); }
.resena blockquote { font-size: .98rem; line-height: 1.6; }
/* La comilla de apertura va SUELTA arriba, como marca de agua. Incrustada en
   la linea del texto se montaba encima de las palabras y se leia como un
   simbolo roto. */
.resena { position: relative; }
.resena blockquote::before {
  /* El caracter va literal, no como escape C: la fuente display del tema
     puede no traer ese glifo y entonces el navegador pinta la cajita con el
     codigo dentro. Con el caracter real y una serif de sistema detras, se ve
     siempre. */
  content: "“";
  position: absolute; top: -.25rem; left: .9rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.2rem; line-height: 1;
  color: color-mix(in srgb, var(--marca) 22%, transparent);
  pointer-events: none;
}
.resena figcaption { font-size: .85rem; color: var(--texto-suave); font-weight: 700; letter-spacing: .04em; }

/* -------------------------------------------------------------- CONTACTO -- */


.contacto__rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contacto__rejilla { grid-template-columns: 1fr 1.15fr; gap: 3.5rem; } }

.contacto__bloque { margin-bottom: 1.8rem; }
.contacto__bloque h3 { margin-bottom: .5rem; }
/* Un enlace tiene que parecer un enlace. Sin color ni subrayado, "Cómo
   llegar" y "Reservar por WhatsApp" se leen como texto muerto, y son dos de
   las tres cosas que la gente viene a pulsar. */
.contacto__bloque a {
  color: var(--marca);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.contacto__bloque a:hover { text-decoration-thickness: 2px; }

.horario { width: 100%; border-collapse: collapse; font-size: .95rem; }
.horario th, .horario td { padding: .55rem 0; text-align: left; border-bottom: 1px solid var(--linea-sup); }
.horario th { font-weight: 600; }
.horario td { color: var(--texto-suave); text-align: right; }
.horario tr[data-hoy] th, .horario tr[data-hoy] td { color: var(--marca); font-weight: 700; }

.mapa {
  width: 100%; aspect-ratio: 4 / 3; border: 0;
  border-radius: var(--radio);
  filter: grayscale(.35);
  display: block;
}

/* Marco de espera del mapa, hasta que el visitante decide cargarlo. */
.mapa-espera {
  width: 100%; aspect-ratio: 4 / 3;
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--tinta) 4%, transparent) 0 12px,
      transparent 12px 24px),
    var(--fondo);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 2rem; text-align: center;
  /* Fondo claro propio dentro de una seccion que puede ser oscura: declara sus
     colores como hace cualquier tarjeta, o hereda los de la seccion y el
     enlace acaba en dorado claro sobre papel. */
  color: var(--tinta);
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
}
.mapa-espera p { font-size: .92rem; color: var(--tinta-suave); max-width: 34ch; }
.mapa-espera__alt { font-size: .85rem; }
.mapa-espera__alt a { color: var(--marca); text-decoration: underline; }

/* ------------------------------------------------ PAGINAS LEGALES -- */
/* Aviso legal y privacidad. Texto largo, nada de adornos: lo unico que
   importa aqui es que se lea bien. */

.legal h2 { font-size: 1.35rem; margin-top: 2.6rem; margin-bottom: .7rem; }
.legal p { margin-bottom: 1rem; }
.legal ul { margin: 0 0 1.4rem 1.2rem; }
.legal li { margin-bottom: .35rem; }
.legal a { color: var(--marca); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ PIE -- */

.pie {
  padding-block: 3rem 6.5rem;   /* hueco extra por la barra fija de movil */
  font-size: .9rem;
}
.pie__rejilla { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie a { color: var(--texto-suave); }
.pie a:hover { color: var(--marca-viva); }
.pie__legal {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--linea-sup);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  color: var(--texto-tenue);
  font-size: .82rem;
}
@media (min-width: 760px) { .pie { padding-bottom: 3rem; } }

/* --------------------------------------------- BARRA FIJA DE MOVIL -- */
/* Llamar, WhatsApp y Como llegar, siempre a un dedo de distancia. Es el
   patron que mas convierte en hosteleria local. */

.barra-movil {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--fondo-hondo);
  border-top: 1px solid var(--linea-sup);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-movil a {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .7rem .4rem;
  color: var(--tinta-clara); font-size: .72rem; font-weight: 600;
  min-height: 56px; justify-content: center;
}
.barra-movil a:active { background: color-mix(in srgb, var(--tinta-clara) 12%, transparent); }
.barra-movil svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; }
@media (min-width: 760px) { .barra-movil { display: none; } }

/* ---------------------------------------------------- MARCA DE AGUA DEMO -- */
/* Obligatoria en toda demo no vendida: una web que parece la oficial de un
   negocio real y no lo es, suplanta. Se borra al cobrar, no antes. */

.demo-aviso {
  position: fixed; z-index: 80;
  bottom: 4.3rem; right: .6rem;
  background: rgba(20, 20, 20, .82); color: #fff;
  padding: .35rem .8rem; border-radius: 999px;
  font-size: .68rem; letter-spacing: .03em;
  backdrop-filter: blur(8px);
  pointer-events: none;
  max-width: min(75vw, 22rem); text-align: right;
  /* Se queda en una esquina para no tapar la carta, pero SE LEE ENTERO. Antes
     llevaba nowrap con puntos suspensivos y en movil salia "no es la web
     ofi...", que es cortar justo por la mitad que importa. Esta frase es la
     que evita que una demo parezca la web oficial de un negocio real, asi que
     antes se parte en dos lineas que se recorta. */
  line-height: 1.35;
  text-wrap: balance;
}
@media (min-width: 760px) {
  .demo-aviso {
    bottom: 1rem; right: 1rem;
    max-width: none; white-space: nowrap;   /* en escritorio cabe de sobra en una linea */
    font-size: .74rem; padding: .5rem 1.1rem;
  }
}

/* ----------------------------------------------- POLITICA DE MOVIMIENTO -- */
/* Todo para todos, con la amplitud justa. El dial --motion-gain lo pone el
   script del <head>. NO se anade @media (prefers-reduced-motion) aqui: el
   dial ya lo contempla, y apagar por sistema seria romper la politica. */

html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(calc(26px * var(--motion-gain, 1)));
  transition: opacity .8s var(--curva), transform .8s var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.motion [data-reveal].in { opacity: 1; transform: none; }


/* ===========================================================================
   MOVIL
   ---------------------------------------------------------------------------
   El 60 % de las busquedas de restaurante son desde el movil y el 53 % de la
   gente se va si tarda mas de 3 s. Esto no es "que quepa": es la version
   principal, y aqui se corrigen las decisiones que solo funcionan en un
   monitor ancho.
   =========================================================================== */

@media (max-width: 759px) {

  body { font-size: 16px; }

  /* --- La barra de credenciales cabe en una linea o no cabe -------------
     Tres datos partidos en dos lineas ocupan media pantalla antes de que se
     vea nada. Se dejan los dos primeros, que son los que convencen. */
  .aviso-top { font-size: .68rem; letter-spacing: .06em; gap: .3rem .9rem; padding: .45rem .8rem; }
  .aviso-top span:nth-child(n+3) { display: none; }

  /* --- Hero: menos aire, mas contenido a la vista ------------------------ */
  .hero { padding: 5rem 1.2rem 5.5rem; min-height: 92svh; }
  h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .hero__lema { font-size: 1rem; margin: 1rem auto 1.8rem; }
  .hero__antetitulo { margin-bottom: 1.2rem; }
  .sello { font-size: .64rem; padding: .42rem 1rem; letter-spacing: .16em; }
  /* Los dos botones a lo ancho y apilados: en un movil, dos botones en fila
     salen estrechos y se falla el toque. */
  .hero__botones { flex-direction: column; align-items: stretch; gap: .7rem; }
  .hero__botones .boton { width: 100%; }
  /* La flecha choca con la barra fija inferior, asi que se retira. */
  .bajar { display: none; }

  /* --- Barra de datos: una columna, con separadores ---------------------- */
  .datos { padding-block: 1.5rem; }
  .datos__rejilla { gap: 1rem; }
  .datos__celda + .datos__celda {
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  /* En movil se lee mas cerca, asi que no hace falta tanto cuerpo, pero
     tampoco se vuelve a los tamanos de antes. */
  .datos__valor { font-size: 1.15rem; }
  .datos__celda:first-child .datos__valor { font-size: 1.3rem; }

  /* --- Secciones: menos aire vertical ------------------------------------ */
  section { padding-block: 3.4rem; }
  h2 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .seccion-entradilla { font-size: 1rem; margin-bottom: 2rem; }

  /* --- LA CARTA EN MOVIL: lista, no rejilla -----------------------------
     Dos columnas en 390 px dejan la foto en 160 px y la descripcion en tres
     palabras por linea. Una carta de restaurante en el movil se lee en
     vertical, con la foto pequena al lado, como en una carta de verdad. */
  .platos { grid-template-columns: 1fr; gap: .8rem; }

  .plato { flex-direction: row; align-items: stretch; }

  .plato__foto {
    flex: none;
    width: 108px;
    aspect-ratio: auto;
    padding: .5rem;
  }
  .plato:hover { transform: none; }   /* no hay hover en un dedo */

  .plato__cuerpo { padding: .8rem .9rem; gap: .2rem; }
  .plato__nombre { font-size: .98rem; }
  .plato__precio { font-size: 1rem; }
  .plato__desc { font-size: .84rem; }
  .plato__alergenos { margin-top: .45rem; }
  .plato__alergeno { font-size: .64rem; }

  /* El sello de "de la casa" en 108 px tapaba media foto. */
  .sello--esquina { top: .35rem; right: .35rem; font-size: .55rem; padding: .22rem .5rem; }

  /* Los filtros se pegan justo debajo de la cabecera. */
  .carta__filtros { top: 3.8rem; padding: .7rem 0; margin-bottom: 1.6rem; }
  .carta__filtro { padding: .5rem 1rem; font-size: .87rem; }

  .carta__nota { font-size: 1.15rem; margin-top: 2rem; }

  /* --- Historia: la foto arriba, el texto debajo ------------------------- */
  .escena { gap: 1.6rem; margin-bottom: 3rem; }
  .escena__figura { max-width: 300px; }
  .polaroid { padding: 9px 9px 34px; }
  .polaroid figcaption { font-size: 1.05rem; }

  .valores { gap: 1.4rem; margin-top: 2.4rem; }
  .valor { padding: 1.6rem 1.2rem 1.2rem; }
  .valor__num { font-size: 2.6rem; }

  /* --- Galeria: dos columnas y sin tanto marco -------------------------- */
  .galeria__rejilla { gap: .5rem; }
  .galeria__rejilla a { padding: 5px; }

  /* --- Opiniones -------------------------------------------------------- */
  .resenas__cifra { font-size: 4.6rem; }
  .resenas__de { font-size: .88rem; }
  .resenas__estrellas { font-size: 1.25rem; margin-block: .4rem 1.8rem; }
  .resenas__lista { gap: 1.1rem; margin-bottom: 2rem; }
  .resena { padding: 1.4rem 1.2rem 1.1rem; }
  .resena blockquote { font-size: .93rem; }

  /* Los estilos moviles de valoranos viven en materia.css, que es donde se
     define esa seccion: si se ponen aqui, materia.css los pisa al cargar
     despues. La cascada no perdona. */
  .valoranos__caja { gap: 2.2rem; }

  /* --- Contacto --------------------------------------------------------- */
  .contacto__rejilla { gap: 2rem; }
  .horario { font-size: .9rem; }
  .horario th, .horario td { padding: .45rem 0; }
  .mapa-espera { aspect-ratio: 3 / 4; padding: 1.5rem; }

  /* --- Pie -------------------------------------------------------------- */
  .pie__rejilla { gap: 1.2rem; }
  .pie__legal { gap: .5rem 1rem; font-size: .78rem; }
}

/* Movil estrecho de verdad (iPhone SE y compania). */
@media (max-width: 380px) {
  .plato__foto { width: 92px; }
  .plato__nombre { font-size: .92rem; }
  h1 { font-size: 2.35rem; }
  .aviso-top span:nth-child(n+2) { display: none; }
}


/* ===========================================================================
   CONTRASTE SOBRE PIEDRA
   ---------------------------------------------------------------------------
   El color de marca de cada tema es oscuro por definicion (granate, rojo,
   dorado viejo): sobre papel se lee perfecto y sobre piedra se hunde. Todo lo
   que use el color de marca necesita su version clara cuando cae en una
   seccion oscura, y con el reordenado automatico eso puede pasarle a
   cualquiera. Medido con scripts/contraste.js.
   =========================================================================== */

.superficie-piedra .contacto__bloque a,
.superficie-piedra .horario tr[data-hoy] th,
.superficie-piedra .horario tr[data-hoy] td,
.superficie-piedra .plato__precio,
.superficie-piedra .legal a { color: var(--acento-claro); }

/* El pie y las etiquetas pequenas: el 45 % se quedaba en 2,8 de contraste. */
.pie__legal { color: color-mix(in srgb, var(--texto) 68%, transparent); }
.datos__etiqueta { color: color-mix(in srgb, var(--tinta-clara) 72%, transparent); }