/* ==========================================================================
   SOBREMESA — casa de comidas
   Cal blanca, sombra azul y una sola idea: el sol cruza la sala.
   La sala en 3D va detrás (z 0); el texto, delante (z 2).
   ========================================================================== */

:root {
  /* la cal y la sombra */
  --cal:        #f7f5ef;
  --cal-2:      #eeebe2;
  --papel:      #fffefb;
  --tinta:      #17203a;
  --tinta-2:    rgba(23, 32, 58, 0.72);
  --tinta-3:    rgba(23, 32, 58, 0.5);
  --sombra:     #9aa8c4;
  --linea:      rgba(23, 32, 58, 0.16);
  --linea-2:    rgba(23, 32, 58, 0.3);

  /* los dos acentos, y solo dos */
  --anil:       #1f3fa8;   /* azul añil: el acento */
  --barro:      #b8542c;   /* barro cocido: el segundo, con cuentagotas */

  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --texto:   "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --margen: clamp(1.15rem, 4.5vw, 5.5rem);
  --medida: 33rem;
  --curva: cubic-bezier(0.16, 0.7, 0.24, 1);
}

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

html {
  scroll-behavior: smooth;
  background: var(--cal);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.6vw + 0.86rem, 1.14rem);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:where(a, button):focus-visible {
  outline: 2px solid var(--anil);
  outline-offset: 3px;
}

::selection { background: rgba(31, 63, 168, 0.16); }

/* ------------------------------------------------------------------ saltar */

.saltar {
  position: fixed; top: 0; left: 0; z-index: 60;
  padding: 0.8rem 1.3rem;
  background: var(--tinta); color: var(--cal);
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-130%);
  transition: transform 0.26s var(--curva);
}
.saltar:focus-visible { transform: translateY(0); }

/* ------------------------------------------------------------------- sala */

.sala {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0;
  background: var(--cal);
}

/* si el 3D no arranca, la página sigue teniendo una sala de luz */
.sala-respaldo {
  position: fixed; inset: 0; z-index: 0; display: none;
  background:
    radial-gradient(42vw 60vh at 12% 38%, rgba(255, 250, 235, 0.95), transparent 62%),
    radial-gradient(70vw 50vh at 78% 88%, rgba(154, 168, 196, 0.4), transparent 70%),
    linear-gradient(170deg, #f8f6f0 0%, #eceadf 52%, #dcdcd6 100%);
}
.sin-3d .sala { display: none; }
.sin-3d .sala-respaldo { display: block; }

/* velos de contraste — la sala es clara y el texto tiene que ganar */
.velo, .grano {
  position: fixed; inset: 0; pointer-events: none;
}
.velo {
  z-index: 1;
  background:
    linear-gradient(104deg, rgba(247, 245, 239, 0.56) 0%, rgba(247, 245, 239, 0.38) 32%,
                    rgba(247, 245, 239, 0.14) 62%, rgba(247, 245, 239, 0.02) 100%),
    linear-gradient(180deg, rgba(247, 245, 239, 0.6) 0%, transparent 24%,
                    transparent 66%, rgba(238, 235, 226, 0.8) 100%);
}
.grano {
  z-index: 2; opacity: 0.22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------- cursor */

.punto, .aro {
  position: fixed; top: 0; left: 0; z-index: 40;
  pointer-events: none; border-radius: 50%; opacity: 0;
  will-change: transform;
}
.punto { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--anil); }
.aro {
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 1px solid var(--linea-2);
  transition: width 0.3s var(--curva), height 0.3s var(--curva),
              margin 0.3s var(--curva), border-color 0.3s var(--curva);
}
@media (pointer: fine) {
  .con-cursor .punto, .con-cursor .aro { opacity: 1; }
  .con-cursor .aro.viva {
    width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--anil);
  }
}

/* ------------------------------------------------------------------ marca */

.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(0.9rem, 2vw, 1.6rem) var(--margen);
  transition: opacity 0.5s var(--curva);
}
.barra::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(247, 245, 239, 0.94), rgba(247, 245, 239, 0));
}

.marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0.6rem;
}
.marca i {
  font-style: normal; width: 7px; height: 7px; border-radius: 50%;
  background: var(--barro); display: inline-block;
}

.menu { display: flex; gap: clamp(0.9rem, 2.2vw, 2.2rem); margin: 0; padding: 0; list-style: none; }
.menu a {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: var(--tinta-3); padding: 0.3rem 0;
  transition: color 0.35s var(--curva);
  display: inline-flex; align-items: baseline; gap: 0.45rem;
}
.menu a b { font-weight: 400; color: var(--barro); font-size: 0.6rem; }
.menu a:hover, .menu a:focus-visible, .menu a[aria-current="true"] { color: var(--tinta); }

.reservar-barra {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  padding: 0.62rem 1.15rem;
  border: 1px solid var(--linea-2); color: var(--tinta);
  transition: background 0.35s var(--curva), color 0.35s var(--curva), border-color 0.35s var(--curva);
}
.reservar-barra:hover, .reservar-barra:focus-visible {
  background: var(--anil); border-color: var(--anil); color: var(--papel);
}

.abrir-menu {
  display: none; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem; background: none;
  border: 1px solid var(--linea-2); color: var(--tinta);
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}

/* ------------------------------------------------------------------- hora */
/* el reloj de la izquierda: dice qué hora del día se está viendo */

.hora {
  position: fixed; left: var(--margen); bottom: clamp(1rem, 3vh, 2rem); z-index: 20;
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3);
  transition: opacity 0.5s var(--curva);
}
.hora__barra {
  width: clamp(70px, 12vw, 150px); height: 1px; background: var(--linea);
  position: relative; overflow: hidden;
}
.hora__barra span {
  position: absolute; inset: 0; transform-origin: 0 50%;
  transform: scaleX(var(--t, 0));
  background: linear-gradient(90deg, var(--barro), var(--anil));
}
.hora__txt { min-width: 6.5em; color: var(--tinta-2); }

/* ---------------------------------------------------------------- capitulos */

.lienzo { position: relative; z-index: 3; }

.cap { position: relative; min-height: 172vh; }
.cap--portada { min-height: 148vh; }

.cap__fijo {
  position: sticky; top: 0;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(4.5rem, 10vh, 7rem) var(--margen) clamp(5rem, 12vh, 8rem);
  opacity: calc(1 - var(--fuga, 0));
  transform: translate3d(0, calc(var(--fuga, 0) * -2vh), 0);
}

.caja {
  position: relative; width: 100%; max-width: 1500px; margin-inline: auto;
  /* la sala de detrás está viva y a veces muy clara: esto sostiene la lectura
     sin recurrir a tarjetas ni cristales */
  text-shadow: 0 1px 20px rgba(247, 245, 239, 0.96), 0 0 3px rgba(247, 245, 239, 0.85);
}

/* ------------------------------------------------------------ tipografía */

.rotulo {
  margin: 0;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-3);
}
.rotulo--anil { color: var(--anil); }
.rotulo--barro { color: var(--barro); }

.titular {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-wrap: balance;
  font-variation-settings: "wdth" 100, "opsz" 48;
}
.titular--portada {
  font-size: clamp(3.4rem, 13.5vw, 15rem);
  line-height: 0.84;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.titular--cap {
  font-size: clamp(2.1rem, 5.2vw, 5.2rem);
  max-width: 16ch;
}
.titular em { font-style: italic; font-family: var(--texto); font-weight: 400; letter-spacing: -0.01em; }

/* revelado palabra a palabra */
.pal { display: inline-block; overflow: hidden; vertical-align: bottom; }
.pal > span {
  display: inline-block; transform: translateY(102%);
  transition: transform 0.9s var(--curva);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.dentro .pal > span { transform: translateY(0); }

[data-sube] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.dentro [data-sube], [data-sube].dentro { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ portada */

.portada__cabeza {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  margin-bottom: clamp(1rem, 3vh, 2rem);
}
.portada__pie {
  display: grid; gap: clamp(1.4rem, 3vw, 3rem);
  margin-top: clamp(1.4rem, 3.4vh, 2.6rem);
}
@media (min-width: 62rem) {
  .portada__pie { max-width: 35rem; }
}
.portada__entrada { max-width: var(--medida); margin: 0; color: var(--tinta-2); }

.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.4rem; margin: 0; max-width: 35rem; }
.datos dt {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3);
}
.datos dd { margin: 0.25rem 0 0; font-size: 0.94rem; }

/* --------------------------------------------------------------- cabeceras */

.cap__cabeza {
  display: flex; align-items: baseline; gap: clamp(0.9rem, 2.4vw, 2.2rem);
  padding-bottom: 0.8rem; border-bottom: 1px solid var(--linea);
  margin-bottom: clamp(1.2rem, 2.6vh, 1.9rem);
}
.cap__num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 0.8; color: var(--barro);
}
.cap__rotulos { display: flex; flex-direction: column; gap: 0.25rem; }

/* ------------------------------------------------------------------ cuerpo */

.cap__cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3.6vw, 3.4rem);
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
}
@media (min-width: 62rem) {
  .cap__cuerpo--par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .cap__cuerpo--ancho { grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr); align-items: start; }
}

.prosa p { max-width: var(--medida); margin: 0 0 0.95rem; color: var(--tinta-2); }
.prosa p:last-child { margin-bottom: 0; }
.prosa strong { font-weight: 600; color: var(--tinta); }

/* --------------------------------------------------------------- la carta */

.carta { margin: 0; }
.carta__grupo + .carta__grupo { margin-top: clamp(1.1rem, 2.4vh, 1.7rem); }

@media (min-width: 48rem) {
  .carta {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(1.4rem, 3vw, 2.8rem); align-items: start;
  }
  .carta__grupo + .carta__grupo { margin-top: clamp(1.1rem, 2.4vh, 1.7rem); }
  /* el grupo largo ocupa una columna entera y los dos cortos, la otra */
  .carta__grupo:nth-child(2) { grid-column: 1; grid-row: 2; margin-top: clamp(1.1rem, 2.4vh, 1.7rem); }
  .carta__grupo:nth-child(1) { grid-column: 1; grid-row: 1; }
  .carta__grupo:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.carta__titulo {
  margin: 0 0 0.4rem;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--anil);
}
.carta__lista { margin: 0; padding: 0; list-style: none; }
.carta__lista li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 0.8rem; align-items: baseline;
  padding: 0.34rem 0; border-bottom: 1px solid var(--linea);
}
.carta__plato { font-size: 0.95rem; }
.carta__precio { font-family: var(--mono); font-size: 0.8rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

.destacado {
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  padding: 1rem 1.2rem;
  border: 1px solid var(--linea-2);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem;
  max-width: 27rem;
}
.destacado b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.destacado span { font-size: 0.9rem; color: var(--tinta-2); }
.destacado em {
  font-style: normal; font-family: var(--mono); font-size: 1.1rem; color: var(--barro);
}

/* --------------------------------------------------------------- la bodega */

.bodega { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); max-width: 31rem; }
.bodega li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--linea);
}
.bodega b { font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.012em; }
.bodega span { grid-column: 1; font-size: 0.86rem; color: var(--tinta-2); }
.bodega em {
  grid-row: 1; grid-column: 2; font-style: normal;
  font-family: var(--mono); font-size: 0.78rem; color: var(--tinta-3); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- láminas */

.lamina { margin: 0; width: 100%; max-width: 34rem; }
.cap__cuerpo--par > .lamina { justify-self: end; }
.carta__lado { display: flex; flex-direction: column; }
.carta__lado .lamina { max-width: 27rem; }

.lamina__marco {
  position: relative; overflow: hidden;
  aspect-ratio: 8 / 5;
  background: var(--cal-2);
  border: 1px solid var(--linea);
}
.lamina__marco img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05) translate3d(0, var(--desliz, 0px), 0);
  transition: transform 1.1s var(--curva);
  will-change: transform;
}
.lamina__pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1.2rem;
  margin: 0; padding-top: 0.7rem; border-top: 1px solid var(--linea);
  font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3);
}
.lamina__pie b { font-weight: 400; color: var(--tinta-2); }

/* el botón de reproducir va centrado en la imagen, nunca sobre el pie */
.lamina__play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: 0; border: 0; background: none; color: var(--tinta); cursor: pointer;
}
.lamina__play span {
  display: grid; place-items: center;
  width: clamp(52px, 6.5vw, 76px); aspect-ratio: 1;
  border: 1px solid rgba(255, 254, 251, 0.8); border-radius: 50%;
  background: rgba(255, 254, 251, 0.5);
  transition: background 0.4s var(--curva), transform 0.5s var(--curva), border-color 0.4s var(--curva);
}
.lamina__play svg { width: 24%; translate: 8% 0; fill: currentColor; }
.lamina__play:hover span, .lamina__play:focus-visible span {
  background: var(--papel); border-color: var(--papel); transform: scale(1.06);
}

/* ------------------------------------------------------------------- cita */

.cita {
  margin: clamp(1.2rem, 2.8vh, 2rem) 0 0;
  padding-left: clamp(0.9rem, 1.8vw, 1.6rem);
  border-left: 2px solid var(--barro);
  max-width: 30rem;
}
.cita blockquote { margin: 0; }
.cita p {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.1rem, 1.75vw, 1.5rem); line-height: 1.24; letter-spacing: -0.02em;
}
.cita figcaption {
  margin-top: 0.6rem; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3);
}

/* ------------------------------------------------------------------ mesa */

.mesa-datos { display: grid; gap: clamp(1.2rem, 2.6vw, 2.4rem); }
@media (min-width: 48rem) { .mesa-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.horario { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.horario li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--linea); font-size: 0.94rem;
}
.horario span { font-family: var(--mono); font-size: 0.8rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.horario li[data-cerrado] span { color: var(--tinta-3); }

.contacto { margin: 0; }
.contacto dt {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3); margin-top: 0.9rem;
}
.contacto dt:first-child { margin-top: 0; }
.contacto dd { margin: 0.2rem 0 0; }
.contacto a { text-decoration: none; border-bottom: 1px solid var(--linea-2); }
.contacto a:hover { border-color: var(--anil); color: var(--anil); }

.boton {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin-top: clamp(1.2rem, 2.6vh, 1.8rem);
  padding: 0.95rem 1.6rem;
  background: var(--anil); color: var(--papel);
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  transition: background 0.35s var(--curva), transform 0.35s var(--curva);
}
.boton:hover, .boton:focus-visible { background: #17318a; transform: translateY(-2px); }
.boton svg { width: 14px; fill: currentColor; }

/* ------------------------------------------------------------------ cierre */

.cierre {
  position: relative; z-index: 3;
  padding: clamp(5rem, 14vh, 10rem) var(--margen) clamp(1.6rem, 4vh, 3rem);
  background: linear-gradient(180deg, rgba(247, 245, 239, 0) 0%, rgba(247, 245, 239, 0.9) 30%, var(--cal) 100%);
}
.cierre__frase {
  margin: 0 0 clamp(1.6rem, 4vh, 3rem);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.8rem, 4.6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.035em;
  max-width: 20ch;
}
.cierre__frase em { font-style: italic; font-family: var(--texto); font-weight: 400; }

.colofon {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  padding-top: clamp(1.6rem, 3.4vh, 2.6rem); border-top: 1px solid var(--linea);
}
.colofon h3 {
  margin: 0 0 0.5rem; font-family: var(--mono); font-size: 0.6rem;
  font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-3);
}
.colofon p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--tinta-2); }

.cierre__pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem;
  margin-top: clamp(2.4rem, 6vh, 4rem); padding-top: 1rem; border-top: 1px solid var(--linea);
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3);
}
.cierre__pie a { text-decoration: none; }
.cierre__pie a:hover { color: var(--anil); }

/* ---------------------------------------------------------------- reposo */
/* al pulsar reproducir la página se aparta y deja ver la sala */

.reposo .barra, .reposo .hora, .reposo .cap__fijo, .reposo .cierre, .reposo .velo {
  opacity: 0; pointer-events: none;
}
.aviso-reposo {
  position: fixed; left: 50%; bottom: clamp(1.4rem, 4vh, 2.6rem); z-index: 30;
  translate: -50% 0; padding: 0.65rem 1.3rem;
  background: rgba(255, 254, 251, 0.86); border: 1px solid var(--linea);
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-3);
  opacity: 0; pointer-events: none; transition: opacity 0.6s var(--curva);
}
.reposo .aviso-reposo { opacity: 1; }

/* ------------------------------------------------------------------ móvil */

@media (max-width: 61.99rem) {
  .cap__fijo { position: static; padding-bottom: clamp(3rem, 9vh, 5rem); }
  .velo {
    background:
      linear-gradient(180deg, rgba(247, 245, 239, 0.9) 0%, rgba(247, 245, 239, 0.82) 40%,
                      rgba(247, 245, 239, 0.88) 100%);
  }
  .hora { display: none; }
}

@media (max-width: 47.99rem) {
  .abrir-menu { display: inline-flex; }
  .reservar-barra { display: none; }

  .barra::after {
    inset: 0 0 -1.2rem;
    background: linear-gradient(180deg, rgba(247, 245, 239, 0.98) 0%, rgba(247, 245, 239, 0.92) 60%, rgba(247, 245, 239, 0) 100%);
  }

  .panel {
    position: fixed; inset: 0; z-index: 24;
    display: grid; align-content: center; padding: var(--margen);
    background: var(--cal);
    transform: translateY(-100%);
    transition: transform 0.55s var(--curva);
  }
  .panel[data-abierto="true"] { transform: translateY(0); }
  .panel[data-abierto="true"] + .abrir-menu { opacity: 0; pointer-events: none; }

  .menu { flex-direction: column; gap: 0; }
  .menu li { border-bottom: 1px solid var(--linea); }
  .menu a { padding: 1rem 0; font-size: 0.8rem; width: 100%; }

  .cerrar-menu {
    position: absolute; top: clamp(0.9rem, 2vw, 1.6rem); right: var(--margen);
    padding: 0.5rem 0.85rem; background: none; border: 1px solid var(--linea-2);
    color: var(--tinta); font-family: var(--mono); font-size: 0.66rem;
    letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  }

  .cap, .cap--portada { min-height: auto; }
  /* 'SOBREMESA' son nueve letras muy anchas: a más de 14vw se sale del móvil */
  .titular--portada { font-size: clamp(1.9rem, 14.2vw, 6rem); }
}

@media (min-width: 48rem) { .cerrar-menu { display: none; } }

/* --------------------------------------------------------- menos movimiento */
/* solo se apaga lo intrusivo: el texto y las imágenes se quedan enteros */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pal > span { transform: none; }
  [data-sube] { opacity: 1; transform: none; }
  .cap__fijo { opacity: 1; transform: none; }
  .lamina__marco img { transform: scale(1); }
  .hora__barra span { transition: none; }
}