/* ===========================================================================
   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; } }

/* ------------------------------------------------------------ LA MARCA --
   Simbolo + nombre + localidad. Es lo que separa una web de restaurante de
   una plantilla con el nombre puesto encima, y es lo primero que mira el
   dueno cuando le ensenas el portatil.

   El simbolo NO lleva color propio: hereda. La cabecera empieza clara sobre
   el hero oscuro y se vuelve oscura al pegarse, asi que un color fijo se
   perderia en una de las dos. Pegada, se le da el color de marca, que es
   donde luce; sobre la foto, va en claro como el resto. */

.marca {
  display: inline-flex; align-items: center; gap: .6rem;
  line-height: 1;
}

.marca__simbolo {
  width: clamp(29px, 4.4vw, 36px);
  height: auto; flex: none;
  /* La linea NO se escala con el dibujo: a 29 px un trazo de 2 sobre 48 se
     queda en 1,2 y desaparece. Con non-scaling-stroke se ve igual de firme
     en la cabecera que en el pie. */
  vector-effect: non-scaling-stroke;
}
.cabecera.pegada .marca__simbolo { color: var(--marca); }

.marca__texto { display: grid; }

.marca__nombre {
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: clamp(1.05rem, 2.7vw, 1.32rem);
  letter-spacing: var(--display-espaciado);
  text-transform: var(--display-caja);
}

/* La localidad debajo del nombre, en versalitas espaciadas. No es adorno: es
   la mitad del SEO local dicho en el sitio donde mas se mira. */
.marca__bajo {
  font-size: .57rem; letter-spacing: .24em; text-transform: uppercase;
  margin-top: .22rem;
  opacity: .72;      /* opacidad y no un color, para que valga en los dos fondos */
}

/* El logo del cliente en la cabecera, cuando lo tiene de verdad y es una
   imagen. 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 {
  /* El hueco de abajo cuenta la barra fija de movil (56 px) MAS la franja
     del aviso de demo, que va pegada encima. Sin eso, lo ultimo del pie se
     queda debajo de las dos y no hay forma de leerlo. */
  padding-block: 3rem 8rem;
  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. */

/* La altura es FIJA a proposito (--barra-alto). No es cosmetica: el aviso de
   demo se coloca justo encima, y si la barra crece o encoge con el texto, el
   aviso se le monta o deja un hueco. Con una altura declarada, las dos piezas
   encajan siempre. */
:root { --barra-alto: 64px; }

.barra-movil {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc(var(--barra-alto) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--fondo-hondo);
  border-top: 1px solid var(--linea-sup);
}
.barra-movil a {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .4rem;
  color: var(--tinta-clara); font-size: .72rem; font-weight: 600;
  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;
  pointer-events: none;
  color: #fff;
  line-height: 1.35;
  letter-spacing: .03em;
  /* Se lee ENTERA. 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. */
  text-wrap: balance;
}

/* EN MOVIL VA PEGADA A LA BARRA FIJA, formando con ella un solo bloque.
   Flotando en la esquina tapaba lo que hubiera debajo, y con el hero corto
   caia justo encima del "Cerrado ahora mismo" de la barra de datos. Aqui
   ocupa un sitio que YA estaba reservado por la barra, asi que no tapa nada
   en toda la pagina. */
.demo-aviso {
  left: 0; right: 0;
  bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom));
  background: rgba(20, 20, 20, .92);
  backdrop-filter: blur(8px);
  padding: .3rem 1rem;
  font-size: .66rem;
  text-align: center;
}

@media (min-width: 760px) {
  /* Sin barra fija, vuelve a ser una pastilla en la esquina: ahi no tapa
     nada porque el contenido tiene margenes de sobra. */
  .demo-aviso {
    left: auto; right: 1rem; bottom: 1rem;
    border-radius: 999px;
    background: rgba(20, 20, 20, .82);
    padding: .5rem 1.1rem;
    font-size: .74rem;
    text-align: right;
    white-space: nowrap;
  }
}

/* ----------------------------------------------- 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; }

  /* --- LO QUE SE TOCA CON EL DEDO ---------------------------------------
     Un enlace de una linea de texto mide 21 px de alto, y con el dedo eso se
     falla. La WCAG 2.5.8 pide 24 px como minimo y las guias de Apple y de
     Google recomiendan 44.

     Se agranda la ZONA, no el enlace: un pseudo-elemento con inset negativo
     no ocupa sitio en la maquetacion, asi que el diseno no se mueve ni un
     pixel y el dedo tiene 44 px donde antes tenia 21. Se hace solo en movil,
     que es donde hay dedos. */
  .datos__valor a,
  .contacto__bloque a,
  .pie__rejilla a,
  .pie__legal a,
  .resenas__mas a { position: relative; display: inline-block; }

  .datos__valor a::after,
  .contacto__bloque a::after,
  .pie__rejilla a::after,
  .pie__legal a::after,
  .resenas__mas a::after {
    content: ""; position: absolute; inset: -11px -8px;
  }

  /* La marca de la cabecera se agranda con padding y se compensa con un
     margen negativo: aqui si hay sitio y no hace falta el pseudo. */
  .marca { padding: .55rem 0; margin: -.55rem 0; }

  /* --- 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; }

  /* --- LA CABECERA, MAS FINA --------------------------------------------
     El boton medía 162 px de ancho en una pantalla de 390: el 43 %, para una
     accion que no es la principal cuando alguien acaba de entrar. Se queda en
     40 px de alto y la letra en .82rem, que sigue siendo de sobra para el
     dedo (el minimo son 24) y deja respirar a la marca. */
  .cabecera { padding: .6rem clamp(.9rem, 4vw, 2.2rem); }
  .cabecera .boton { font-size: .82rem; padding: .6rem 1rem; }
  .marca { gap: .5rem; }
  .marca__simbolo { width: 27px; }

  /* --- Hero: el titular manda y lo demas se aparta ----------------------
     Tres cosas que van juntas y por eso se explican juntas:

     1. El aire de arriba. El hero centraba su contenido en 88svh y sobraba
        media pantalla vacia entre la cabecera y el antetitulo. Se baja el
        alto y se sube el contenido: el nombre de la casa entra ANTES.
     2. El antetitulo, escondido. Era una chapa con borde de 2 px, dos
        remaches y letra de 12 px que pesaba tanto como el titular y decia
        mucho menos. En movil se queda en texto pequeno y espaciado: sigue
        ahi para quien lo lea, pero ya no compite.
     3. Y con ese sitio ganado, el titular puede ser grande de verdad: 11vw
        son 43 px, contra los 37 de antes y los 50 que saturaban. */
  /* El contenido ARRIBA, no centrado. Con place-items:center y 80svh, el
     nombre de la casa quedaba a 138 px de la cabecera: media pantalla de foto
     vacia antes de leer quien es. Pegado arriba, el aire que sobra se va
     abajo, que es donde esta la foto y donde no molesta. */
  .hero { padding: 2rem 1.2rem 4.5rem; min-height: 74svh; align-items: start; }
  h1 { font-size: clamp(2.15rem, 11vw, 3.1rem); }
  .hero__lema { font-size: .97rem; margin: .9rem auto 1.6rem; }
  .hero__antetitulo { margin-bottom: .7rem; }
  .hero__manuscrita { font-size: 1.5rem; }
  .hero__botones .boton { padding: .85rem 1.4rem; font-size: .95rem; }

  /* La chapa, sin chapa: solo en el hero. La de las esquinas de los platos
     se queda como esta, que ahi si es una etiqueta y tiene que verse. */
  .hero__antetitulo .sello {
    border: 0;
    padding: 0;
    gap: .5rem;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .22em;
    opacity: .78;
  }
  .hero__antetitulo .sello::before,
  .hero__antetitulo .sello::after { width: 3px; height: 3px; opacity: .5; }
  /* 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 .paso::before,
.superficie-piedra .faq__pregunta::after,
.superficie-piedra .faq__pregunta:hover,
.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); }
/* Sobre --texto y no sobre --tinta-clara: la etiqueta hereda el color de la
   superficie que la lleve. En madera y piedra --texto ES la tinta clara, asi
   que no cambia nada; en nata (clara) es la tinta oscura, y con la clara fija
   se quedaba en 1,3 de contraste, o sea invisible. Medido el 2026-09-04. */
.datos__etiqueta { color: color-mix(in srgb, var(--texto) 72%, transparent); }


/* ===========================================================================
   COMO SE ENCARGA
   ---------------------------------------------------------------------------
   Cuatro pasos numerados, en rejilla que se parte sola. Los numeros los pone
   un contador de CSS y no el HTML: si se quita un paso, no hay que renumerar.

   El numero va en 01, 02, 03 con decimal-leading-zero. No es capricho: dos
   cifras ocupan lo mismo en todos los pasos y la columna queda a plomo.
   =========================================================================== */

.pasos__lista {
  list-style: none;
  counter-reset: paso;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 0;
  padding: 0;
}

.paso {
  counter-increment: paso;
  position: relative;
  padding-top: 3.1rem;
}

.paso::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute; top: -.15rem; left: 0;
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: 2.5rem; line-height: 1;
  color: var(--marca);
}

/* El hilo que une un paso con el siguiente: es lo que los convierte en un
   recorrido y no en cuatro cajas sueltas. El ultimo no lo lleva, y en una
   sola columna tampoco, que ahi los pasos van uno debajo de otro. */
.paso::after {
  content: "";
  position: absolute; top: 1.05rem; left: 3.3rem; right: -1rem;
  border-top: 1px dashed var(--linea);
}
.paso:last-child::after { display: none; }

.paso__titulo {
  font-family: var(--display); font-size: 1.12rem;
  margin: 0 0 .35rem;
}
.paso__texto { color: var(--texto-suave); margin: 0; }

.pasos__pie { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.pasos__nota {
  margin: .8rem 0 0;
  font-size: .9rem;
  color: var(--texto-suave);
}

/* ===========================================================================
   PREGUNTAS FRECUENTES
   ---------------------------------------------------------------------------
   <details> del navegador, sin una linea de JavaScript. Abre con teclado,
   lo entiende un lector de pantalla y funciona aunque el JS se caiga.

   El signo de la derecha es un + que gira hasta ser una x. Con transform y
   no cambiando el caracter: cambiar el texto de un ::after no se puede animar
   y ademas lo lee el lector de pantalla.
   =========================================================================== */

.faq__lista {
  max-width: 54rem;
  margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
  border-top: 1px solid var(--linea);
}

.faq__item { border-bottom: 1px solid var(--linea); }

.faq__pregunta {
  cursor: pointer;
  list-style: none;                 /* fuera el triangulito del navegador */
  padding: 1.05rem 2.6rem 1.05rem 0;
  position: relative;
  font-family: var(--display);
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  line-height: 1.35;
}
.faq__pregunta::-webkit-details-marker { display: none; }

.faq__pregunta::after {
  content: "+";
  position: absolute; right: .1rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--cuerpo); font-size: 1.5rem; line-height: 1;
  color: var(--marca);
  transition: transform .3s var(--curva);
}
.faq__item[open] .faq__pregunta::after { transform: translateY(-50%) rotate(135deg); }

.faq__pregunta:hover { color: var(--marca); }
.faq__pregunta:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }

.faq__respuesta {
  padding: 0 2.6rem 1.2rem 0;
  max-width: 62ch;
  color: var(--texto-suave);
}
.faq__respuesta p { margin: 0; }

.faq__item[open] .faq__respuesta { animation: faq-abre .35s var(--curva) both; }
@keyframes faq-abre {
  from { opacity: 0; transform: translateY(-.5rem); }
  to   { opacity: 1; transform: none; }
}
html:not(.motion) .faq__item[open] .faq__respuesta { animation: none; }


/* El logo en el pie. Pequeno y sin ruido: cierra la pagina con la marca,
   que es lo ultimo que se ve antes de salir. */
.pie__logo { display: block; width: 4.6rem; height: auto; margin-bottom: .9rem; }

/* ===========================================================================
   LAS REDES
   ---------------------------------------------------------------------------
   Para una pasteleria el Instagram no es un enlace de cortesia: es su
   escaparate, y ahi tiene el trabajo de dos anos. Por eso sale con su icono y
   con la cuenta a la vista, no como una palabra suelta en el pie.

   Los iconos van DIBUJADOS en el HTML. Bajarlos de un CDN de iconos seria una
   peticion fuera del dominio, y con esa peticion llega el banner de cookies.
   =========================================================================== */

.redes { list-style: none; padding: 0; margin: .2rem 0 0; display: grid; gap: .5rem; }

.red {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .45rem .7rem .45rem .5rem;
  border-radius: 999px;
  transition: background-color .25s var(--curva), transform .25s var(--curva);
}
.red:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
  transform: translateX(2px);
}

.red__icono {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--marca);
}
/* En una seccion oscura el color de marca se hunde, como todo lo demas. */
.superficie-piedra .red__icono,
.superficie-madera .red__icono,
.pie .red__icono { color: var(--acento-claro); }

.red__texto { display: grid; line-height: 1.25; }
.red__nombre { font-weight: 600; }
.red__usuario { font-size: .82rem; color: var(--texto-suave); }

.redes__nota { margin: .7rem 0 0; font-size: .86rem; color: var(--texto-suave); }

/* En el pie van mas juntas y sin la pastilla del hover. */
.redes--pie { gap: .15rem; }
.redes--pie .red { padding-left: .35rem; }


/* ===========================================================================
   OCASIONES
   ---------------------------------------------------------------------------
   Nadie busca "tarta de fondant": busca "tarta de comunion". Son botones y no
   enlaces porque no llevan a ninguna parte: rellenan el desplegable del
   formulario y bajan hasta el. Un <a> que no navega miente al lector de
   pantalla y al que pulsa el boton derecho.
   =========================================================================== */

.ocasiones__lista {
  list-style: none; padding: 0;
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
  display: flex; flex-wrap: wrap; gap: .7rem;
}
/* Los de una misma fila, a la misma altura: unos llevan nota debajo y otros
   no, y sueltos quedaban a distinto alto como una dentadura mal puesta. */
.ocasiones__lista li { display: flex; }

.ocasion {
  width: 100%;
  font: inherit; color: inherit; cursor: pointer;
  display: grid; gap: .12rem; text-align: left;
  padding: .75rem 1.15rem;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius: var(--radio);
  transition: background-color .25s var(--curva), transform .25s var(--curva), border-color .25s var(--curva);
}
.ocasion:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  transform: translateY(-2px);
}
.ocasion:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.ocasion__nombre { font-family: var(--display); font-size: 1.02rem; }
.ocasion__nota { font-size: .78rem; opacity: .72; }

/* ===========================================================================
   FORMULARIO DE ENCARGO
   ---------------------------------------------------------------------------
   Una etiqueta encima de cada campo y un campo por fila, que es como se
   rellena mas rapido y como lo hacen los formularios de encargo que funcionan.
   La rejilla se parte sola: dos columnas donde cabe, una donde no.

   El asterisco de obligatorio va en un <abbr title>, no suelto: un asterisco
   a secas no significa nada para un lector de pantalla.
   =========================================================================== */

.encargo__form {
  display: grid;
  /* DOS columnas como mucho, y por eso el ancho maximo es 46: con tres, los
     campos salen tan anchos que la vista pierde el renglon, y ademas los
     nueve campos no cuadran en filas de tres y quedan huecos sueltos. En
     dos, cada fila va llena y el textarea ancho parte el bloque por la
     mitad justa. */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem 1.4rem;
  max-width: 46rem;
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
}

.campo { display: grid; gap: .38rem; align-content: start; }
.campo--ancho { grid-column: 1 / -1; }

.campo label { font-size: .92rem; font-weight: 600; }
.campo__obligatorio { color: var(--marca); text-decoration: none; border: 0; }

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  width: 100%;
  padding: .72rem .85rem;
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}
.campo textarea { resize: vertical; min-height: 5.4rem; }

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent);
}

.campo__ayuda { font-size: .82rem; color: var(--texto-suave); }

.campo__error { font-size: .85rem; font-weight: 600; color: var(--rojo-cerrado); }
.campo--mal input,
.campo--mal select,
.campo--mal textarea { border-color: var(--rojo-cerrado); }

/* En una seccion oscura los campos no pueden ir en blanco: deslumbran y el
   borde desaparece. Se aclara el propio fondo y se hereda la tinta clara. */
.superficie-piedra .campo input,
.superficie-piedra .campo select,
.superficie-piedra .campo textarea {
  color: var(--texto);
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}

.encargo__envio {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  margin-top: .6rem;
}
.encargo__aviso {
  flex-basis: 100%;
  margin: .2rem 0 0;
  font-size: .85rem;
  color: var(--texto-suave);
}


/* ===========================================================================
   TELON DE ENTRADA
   ---------------------------------------------------------------------------
   Solo en la portada, y solo donde la ficha lo pide con "entrada": true.

   Que hace: el nombre de la casa baja desde arriba sobre un fondo del color
   hondo del tema, se queda un instante, y el telon entero se descuelga hacia
   abajo cuando la pagina ha terminado de cargar. Es el telon de una tienda
   que se levanta al reves: en vez de subir, se cae, y detras ya esta todo.

   Tres cosas que NO son adorno:

   1. Nace en display:none. La clase telon-on la pone el script del <head>, o
      sea que sin JavaScript no hay telon y la web se ve entera. Nunca se tapa
      contenido con algo que puede no llegar a quitarse.
   2. El fondo es var(--fondo-hondo): el color mas oscuro del tema, el mismo
      del pie. Asi el telon es de la casa y no una pantalla negra generica.
   3. scrollbar-gutter mientras esta puesto: al bloquear el scroll desaparece
      la barra lateral y la pagina entera salta 15 px a la derecha. Reservando
      el hueco, no salta ni al entrar ni al salir.

   Y todo va colgado de html.telon-on, no suelto. No es por gusto: la firma
   lleva tambien la clase .manuscrita, que materia.css pinta del color de
   marca. Con la misma especificidad gana la hoja que carga la ultima, que es
   materia.css, y la firma salia en frambuesa sobre cacao: 1,9 de contraste,
   o sea ilegible. Con el html delante gana esto. Medido el 6-sep-2026.
   =========================================================================== */

.telon { display: none; }

html.telon-on { overflow: hidden; scrollbar-gutter: stable; }

html.telon-on .telon {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 200;                       /* por encima de todo, incluida la cabecera */
  background: var(--fondo-hondo);
  color: var(--tinta-clara);
  transition: transform .8s var(--curva);
  will-change: transform;
}

/* La salida: se descuelga entera hacia abajo. */
html.telon-on .telon.fuera { transform: translateY(101%); }

html.telon-on .telon__marca {
  display: grid;
  justify-items: center;
  gap: .4rem;
  padding: 2rem;
  text-align: center;
}

/* El logo dentro del telon. Baja como bajaria el nombre: es la misma
   entrada, solo que aqui la marca es un disco y no una palabra. */
html.telon-on .telon__logo {
  display: block;
  width: clamp(9.5rem, 30vw, 15rem);
  height: auto;
  animation: telon-baja .85s var(--curva) both;
}

html.telon-on .telon__nombre {
  font-family: var(--display);
  font-weight: var(--display-peso, 700);
  letter-spacing: var(--display-espaciado, 0);
  text-transform: var(--display-caja, none);
  font-size: clamp(2.1rem, 8vw, 4.4rem);
  line-height: 1.05;
  color: var(--tinta-clara);
  animation: telon-baja .85s var(--curva) both;
}

html.telon-on .telon__firma {
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  color: var(--acento-claro);
  animation: telon-baja .85s var(--curva) .16s both;
}

/* El filete crece desde el centro. Es lo ultimo que entra, y es lo que hace
   que la marca parezca sellada y no simplemente puesta. */
html.telon-on .telon__filete {
  width: min(46vw, 15rem);
  height: 2px;
  margin-top: .6rem;
  background: currentColor;
  color: var(--acento-claro);
  transform-origin: 50% 50%;
  animation: telon-filete .7s var(--curva) .34s both;
}

@keyframes telon-baja {
  from { opacity: 0; transform: translateY(-2.6rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes telon-filete {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}