/* Lima Nikkei · home de marca (demo, 23/09/2026)
   Negro tinta y crema (briefing de Eloy); un solo acento: dorado (Eloy, vídeo 23/09: «el rojo le quita prestigio… tirar por el dorado y el cremita»; referencia, restaurantetoki.com).
   Letra (28/09/2026, lo pidió Ernesto el 27/09 con su manual de identidad v2, apartado 2.1): títulos en KyivType Sans, la
   variante Regular3, la misma que usa su manual; texto en D-DIN, gemela libre de su DINPro (comercial: licencia web
   aparte). «Los títulos no pueden ir en negrita»: la de títulos se declara para TODOS los grosores con un solo archivo
   regular, así ninguna regla que pida 600 u 800 la engorda ni el navegador se inventa una negrita.
   Licencias y origen de cada archivo: fuentes/LICENCIAS.txt. KyivType Sans © Dmitry Rastvortsev, CC BY-ND 4.0. */

@font-face { font-family: "Sello"; src: url("fuentes/sello-600.woff2") format("woff2"); font-weight: 600; font-display: block; }

@font-face { font-family: "Titulos"; src: url("fuentes/crimson-text-400.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Titulos"; src: url("fuentes/crimson-text-600.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Titulos"; src: url("fuentes/crimson-text-400-italic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Titulos"; src: url("fuentes/crimson-text-600-italic.woff2") format("woff2"); font-weight: 600 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Texto"; src: url("fuentes/manrope-400-700.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --tinta: #0e1721;
  --tinta-2: #131e2b;
  --tinta-3: #26344a;
  --crema: #f6f1e7;
  --crema-2: #aeb7c2;
  --acento: #ffc999;
  --display: "Titulos", Georgia, serif;
  --texto: "Texto", "Helvetica Neue", Arial, sans-serif;
  --ancho: 1240px;
  --lado: clamp(16px, 5vw, 56px);
  --curva: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0; background: var(--tinta); color: var(--crema);
  font-family: var(--texto); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 5.2vw, 3.7rem); text-wrap: balance; }
.sangre h2 em { display: block; }   /* «Al centro de la mesa. / Y que pasen los palillos.»: la Y baja con su frase */
h2 em, h1 em { font-style: normal; color: var(--acento); }
p { margin: 0 0 1em; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; background: var(--crema); color: var(--tinta); padding: 10px 14px; z-index: 100; border-radius: 6px; }
.saltar:focus { top: 12px; }

.ceja {
  font-family: var(--texto); font-size: .74rem; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: var(--crema-2); margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: .8em;
}
.ceja::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }

.seccion { padding: clamp(80px, 12vw, 150px) var(--lado); }
.cabeza-seccion { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.cabeza-seccion .ceja::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.cabeza-seccion--izq { text-align: left; margin-left: max(0px, calc((100% - var(--ancho)) / 2)); }
.cabeza-seccion--izq .ceja::after { display: none; }
.cabeza-seccion > p:not(.ceja) { color: var(--crema-2); margin-top: 1.2rem; max-width: 52ch; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.6em; border-radius: 999px;
  font-family: var(--texto); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; transition: background .3s, color .3s, border-color .3s, transform .3s var(--curva);
}
.boton--crema { background: var(--crema); color: var(--tinta); }
.boton--crema:hover { background: #fff8ea; transform: translateY(-2px); }
.boton--linea { border: 1px solid rgba(239, 229, 210, .45); color: var(--crema); }
.boton--linea:hover { border-color: var(--crema); background: rgba(239, 229, 210, .08); }
.boton--peque { min-height: 40px; padding: 0 1.2em; font-size: .7rem; }
.boton--ancho { width: 100%; }

/* Sello 日系: el hanko de la casa */
.sello {
  font-family: "Sello", var(--display); font-weight: 600; display: inline-grid; place-items: center;
  width: 44px; padding: 8px 0; line-height: 1.05; font-size: 1.15rem; text-align: center;
  background: var(--tinta); color: var(--acento); border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--acento), 0 10px 26px rgba(0, 0, 0, .45);
}
.sello--grande { width: 64px; font-size: 1.7rem; padding: 12px 0; margin-bottom: 1.4rem; }
.sello--flota { position: absolute; right: -14px; top: 28px; width: 58px; font-size: 1.55rem; padding: 12px 0; }

/* ───────── Carta y Reserva, flotantes (Eloy, 23/09; como lampadini.es) ───────── */
.flotante {
  position: fixed; z-index: 50; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; padding: 6px; gap: 6px; border-radius: 999px;
  background: rgba(12, 10, 9, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(239, 229, 210, .16);
}
.flotante a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 132px; padding: 0 1.6em;
  border-radius: 999px; text-decoration: none; font: 700 .78rem/1 var(--texto); letter-spacing: .26em; text-transform: uppercase;
  color: var(--crema); transition: background .3s, color .3s;
}
.flotante a:hover { background: rgba(239, 229, 210, .1); }
.flotante a:last-child { background: var(--acento); color: var(--tinta); }
.flotante a:last-child:hover { background: #d6b986; }
@media (max-width: 560px) {
  .flotante { left: 12px; right: 12px; transform: none; }
  .flotante a { flex: 1; min-width: 0; }
}

/* ───────── 1 · Portada ───────── */
.portada { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 140px var(--lado) 200px; overflow: hidden; isolation: isolate; }
.portada__videos { position: absolute; inset: 0; z-index: -2; }
.portada__movil, .portada__ancho, .portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* En el móvil, debajo del vídeo, su primer fotograma como imagen normal (el mismo archivo que el póster), un píxel más
   baja que la pantalla: Google no cuenta el póster de un vídeo y una imagen a pantalla exacta la toma por fondo. Con el
   aviso de cookies del grupo, sin ella «lo principal» era el aviso, que llega el último (Lima Nikkei, 30/09: de 76 a 97). */
.portada__foto { height: calc(100% - 1px); }
.portada__ancho { display: none; }
@media (min-width: 900px) {
  .portada__ancho { display: block; animation: acerca 2.4s var(--curva) both; }
  .portada__movil, .portada__foto { display: none; }
}
/* Sin fundido: la foto de portada está desde el primer instante y solo se acerca (auditoría del 02/10) */
@keyframes acerca { from { transform: scale(1.08); } to { transform: none; } }
.portada__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(12, 10, 9, .78), rgba(12, 10, 9, .4) 80%),
    linear-gradient(to bottom, rgba(12, 10, 9, .7), transparent 22%, transparent 70%, var(--tinta));
}
.portada__texto { text-align: center; max-width: 1180px; }
.marca { margin: 0; text-align: center; line-height: 1; text-decoration: none; }
/* Su logotipo oficial con el isotipo (Ernesto, 27/09: «usemos el isotipo para resaltar la marca»), en el crema de su
   paleta: su manual no deja pintarlo en dorado. Sustituye al de letra «LIMA NIKKEI · MADRID» del 23/09. */
.marca__logo { display: block; width: auto; height: 76px; margin: 0 auto; }
.portada__logo { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.portada__logo .marca__logo { height: clamp(84px, 8.4vw, 118px); }
.portada h1 .ceja { display: flex; justify-content: center; color: var(--crema); }
.portada h1 .ceja::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.portada__nombre { display: block; font-size: clamp(2.5rem, 6.4vw, 5.6rem); line-height: 1.02; letter-spacing: -.015em; }
.portada__nombre em { display: block; }
.portada__lema { max-width: 46ch; margin: 1.6rem auto 2.2rem; color: var(--crema); font-size: clamp(1rem, 1.6vw, 1.15rem); }
.portada__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sellos { list-style: none; padding: 0; margin: 2.6rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sellos li {
  display: grid; gap: 2px; padding: 10px 18px; border: 1px solid rgba(239, 229, 210, .28); border-radius: 6px;
  background: rgba(12, 10, 9, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-decoration: none; font-size: .72rem; letter-spacing: .08em; color: var(--crema-2); text-align: center;
}
.sellos a { display: grid; gap: 2px; text-decoration: none; color: inherit; }
.sellos__marca { font-family: var(--display); font-size: 1.05rem; color: var(--crema); letter-spacing: .02em; }
.portada__bajar {
  position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px; text-decoration: none;
  font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--crema-2);
}
.portada__bajar i { width: 1px; height: 44px; background: linear-gradient(var(--crema), transparent); animation: gota 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes gota { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.portada__bajar span { white-space: nowrap; }
/* En el móvil, en una línea lo que quepa: «cuanto menos scroll se tenga que hacer en un móvil, mejor» (Eloy, 02/10/2026,
   regla para todas). Los dos sellos, uno al lado del otro, y la ceja del titular sin partirse. */
@media (max-width: 560px) {
  .sellos { flex-wrap: nowrap; gap: 8px; margin-top: 2rem; }
  .sellos li { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: .66rem; letter-spacing: .02em; }
  .portada h1 .ceja { white-space: nowrap; gap: 10px; font-size: clamp(.56rem, 2.75vw, .7rem); letter-spacing: .16em; }
  .portada h1 .ceja::before, .portada h1 .ceja::after { width: 14px; flex: none; }
}
/* Entrada del texto de portada */
/* El titular y la frase se ven desde el primer instante: con la entrada escalonada tardaban hasta 1,65 s en
   leerse (2.ª auditoría SEO de Eloy, 02/10/2026). Solo entran los sellos, que son secundarios, y en 0,3 s. */
.js .portada__texto > .sellos { opacity: 0; transform: translateY(10px); animation: sube .3s var(--curva) .1s forwards; }
@keyframes sube { to { opacity: 1; transform: none; } }

/* ───────── Aparecer al bajar ───────── */
.js .aparece { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--curva), transform 1s var(--curva); }
.js .aparece.visible { opacity: 1; transform: none; }

/* ───────── 2 · La casa ───────── */
.casa { display: grid; gap: clamp(40px, 7vw, 100px); max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; align-items: center; }
.casa__foto { position: relative; aspect-ratio: 4 / 5; }
.casa__pase { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; }
.casa__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; opacity: 0; transition: opacity 2.2s ease; }
.casa__foto img.activa { opacity: 1; animation: lento 9s linear both; }
@keyframes lento { from { transform: scale(1.06); } to { transform: none; } }
.casa__texto > p:not(.ceja) { color: var(--crema-2); max-width: 54ch; }
.casa__texto h2 { margin-bottom: 1.6rem; }
.cita { margin: 2.2rem 0 0; padding-left: 22px; border-left: 1px solid var(--acento); }
.cita p { font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.45; color: var(--crema); margin: 0 0 .6rem; }
.cita footer, .prensa__cita footer, .plato footer { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--crema-2); }
cite { font-style: normal; color: var(--crema); }
@media (min-width: 900px) { .casa { grid-template-columns: 5fr 6fr; } }
@media (max-width: 899px) { .sello--flota { right: 12px; top: 12px; } }

/* ───────── 4 · Banda ───────── */
.banda { background: var(--acento); overflow: hidden; }
.banda__pista { display: flex; align-items: center; gap: 28px; width: max-content; padding: 20px 0; animation: desliza 45s linear infinite; }
/* Ojo: esta animación vivía junto al carrusel de platos y se fue con él al quitarlo (23/09): va aquí, con la banda. */
@keyframes desliza { to { transform: translateX(-50%); } }
.banda span { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); white-space: nowrap; }
.banda { color: var(--tinta); }
.banda b { font-weight: 400; color: var(--tinta); opacity: .55; }

/* ───────── 5 · La carta ───────── */
.carta__fichas { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho); display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
.carta__fichas a { display: grid; gap: 6px; text-decoration: none; }
.carta__fichas img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; margin-bottom: 8px; transition: filter .5s, opacity .5s, transform .6s var(--curva); }
.carta__fichas b { font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.2; }
.carta__fichas small { color: var(--crema-2); font-size: .85rem; line-height: 1.4; }
/* Dos líneas y el corte donde se lee (Eloy, doc 4: «que nunca sobrepase dos líneas»): lo marca un <br> en cada texto. */
.carta__fichas small { display: block; white-space: nowrap; }
@media (min-width: 700px) { .carta__fichas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .carta__fichas { grid-template-columns: repeat(6, 1fr); } }
@media (hover: hover) {
  .carta__fichas:hover li:not(:hover) img { filter: grayscale(1) brightness(.55); }
  .carta__fichas li:hover img { transform: scale(1.03); }
}
.carta__todo { text-align: center; margin-top: 56px; }

/* ───────── 6 · Foto a sangre ───────── */
.sangre { position: relative; min-height: 88svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; text-align: center; padding: 0 var(--lado); }
.sangre__foto { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.sangre__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Más oscura (Eloy, doc 3: «dale un poco de opacidad negra… si no las letras no destacan») */
.sangre::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(65% 60% at 50% 50%, rgba(12, 10, 9, .74), rgba(12, 10, 9, .5)); }
.sangre .ceja { color: var(--crema); }
.sangre .ceja::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.sangre h2 { font-size: clamp(2.4rem, 7vw, 5.4rem); }
/* El bloque de eventos (30/09): la misma banda, con su frase y el botón que lleva a la landing. */
.sangre--eventos { min-height: 78svh; }
.sangre--eventos h2 { font-size: clamp(2.2rem, 6vw, 4.6rem); }
/* Lo que viene detrás de la banda de eventos respira como cualquier sección (Angel, 30/09: «la foto de arriba que va a
   sangre queda pegada a la galería de abajo»): Celebraciones venía sin aire arriba porque en Lima Nikkei la precedían
   las cifras, que ya lo dejaban. */
.sangre--eventos + .pisco { padding-top: clamp(80px, 12vw, 150px); }
.sangre__entrada { max-width: 34rem; margin: 1.1rem auto 1.6rem; color: var(--crema-2); font-size: clamp(1rem, 2.4vw, 1.15rem); line-height: 1.55; }

/* ───────── 7 · Platos con titular ───────── */
.platos__rejilla { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 16px; }
.plato { position: relative; overflow: hidden; border-radius: 4px; background: var(--tinta-2); min-height: 380px; display: flex; align-items: flex-end; isolation: isolate; }
.plato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--curva); }
.plato:hover img { transform: scale(1.05); }
.plato::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 10, 9, .95) 5%, rgba(12, 10, 9, .35) 55%, transparent); }
.plato__texto { padding: 26px; }
.plato h3 { font-size: 1.4rem; margin-bottom: 14px; }
.plato blockquote { margin: 0; }
.plato blockquote p { font-family: var(--display); font-size: 1.05rem; color: var(--crema); line-height: 1.45; margin-bottom: .5rem; }
/* La tarjeta sin foto, en papel washi con olas seigaiha en dorado que suben desde abajo (Angel, 23/09: «el fondo
   es muy básico… estaría bueno que tuviera textura»). Las olas recuerdan a las de su logo; todo en SVG, sin fotos. */
.plato--letra { background: var(--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .045' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .22  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23w)'/%3E%3C/svg%3E"); color: var(--tinta); align-items: center; }
.plato--letra::before { display: block; inset: auto 0 0 0; height: 62%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Ccircle cx='30' cy='0' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='30' cy='0' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='0' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='0' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='0' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='0' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='15' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='0' cy='15' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='15' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='15' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='15' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='15' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='15' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='60' cy='15' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='15' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='15' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='15' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='15' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='30' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='30' cy='30' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='30' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='30' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='30' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='30' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='45' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='0' cy='45' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='45' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='45' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='45' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='45' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='45' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='60' cy='45' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='45' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='45' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='45' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='45' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3C/svg%3E") 0 100% / 60px 30px repeat;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); }
.plato--letra .plato__texto { align-self: center; }
/* En el móvil la tarjeta mide lo que su contenido, y las olas quedan como una franja abajo (Angel, 23/09: «se siente súper vacía») */
@media (max-width: 699px) {
  .plato--letra { min-height: 0; }
  .plato--letra .plato__texto { padding: 34px 26px 96px; }
  .plato--letra::before { height: 58%; }
}
.plato--letra h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.plato--letra { container-type: inline-size; }
/* La cita de una palabra, tan grande como quepa en SU tarjeta (en PC la tarjeta es estrecha y «Imprescindible.» se salía) */
.plato--letra blockquote p { color: var(--tinta); font-size: min(2.2rem, 8.6cqi); line-height: 1.15; white-space: nowrap; }
.plato--letra footer, .plato--letra cite { color: #5b5047; }
@media (min-width: 700px) {
  .platos__rejilla { grid-template-columns: repeat(2, 1fr); }
  .plato--grande { grid-column: span 2; min-height: 520px; }
}
@media (min-width: 1000px) {
  .platos__rejilla { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 330px; }
  .plato { min-height: 0; }
  .plato--grande { grid-column: span 2; grid-row: span 2; min-height: 0; }
  .plato--grande h3 { font-size: 2rem; }
  .plato--grande blockquote p { font-size: 1.35rem; }
}

/* ───────── 8 · Cifras ───────── */
.cifras { padding-top: 0; }
.cifras__lista { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho); display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--tinta-3); border-radius: 4px; }
.cifras li { padding: 34px 16px; text-align: center; display: grid; gap: 8px; border-right: 1px solid var(--tinta-3); border-bottom: 1px solid var(--tinta-3); }
.cifras li:nth-child(2n) { border-right: 0; }
.cifras li:nth-child(n+3) { border-bottom: 0; }
.cifras b { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.cifras span { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--crema-2); }
@media (min-width: 800px) {
  .cifras__lista { grid-template-columns: repeat(4, 1fr); }
  .cifras li { border-bottom: 0; }
  .cifras li:nth-child(2n) { border-right: 1px solid var(--tinta-3); }
  .cifras li:last-child { border-right: 0; }
}

/* ───────── 9 · Pisco ───────── */
.pisco { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; display: grid; gap: 56px; align-items: center; padding-top: 0; }
.pisco__texto > p:not(.ceja) { color: var(--crema-2); max-width: 50ch; }
.pisco__texto h2 { margin-bottom: 1.6rem; }
.pisco__texto .boton { margin-top: 1rem; }
.pisco__mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pisco__mosaico figure { overflow: hidden; border-radius: 4px; }
.pisco__mosaico img, .pisco__mosaico video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.pisco__video { grid-row: span 2; }
.pisco__video video { aspect-ratio: auto; }
@media (min-width: 900px) { .pisco { grid-template-columns: 5fr 6fr; } }

/* ───────── 10 · Prensa ───────── */
/* LA TEXTURA (Eloy, doc 4, 23/09: «que sorprendieses con algo de textura de fondo… enfocado en lo japo, nikkei…
   sutil, para lograr ese efecto de "vaya detallitos"»; referencias, el mármol de restaurantetoki.com y elbohio.net).
   Mármol negro con vetas doradas finas —el oro en las grietas, como el kintsugi—, dibujado por nosotros
   (lima-nikkei/texturas/generar-marmol.html), 25 KB. Los bordes se funden a negro para que no haga corte. */
.prensa { background: linear-gradient(var(--tinta), rgba(12, 10, 9, 0) 22%, rgba(12, 10, 9, 0) 78%, var(--tinta)),
                      linear-gradient(rgba(12, 10, 9, .38), rgba(12, 10, 9, .38)),
                      url("texturas/marmol.webp") center / cover no-repeat, var(--tinta-2); }
.prensa__carrusel { max-width: 980px; margin: 0 auto; text-align: center; }
.prensa__diapos { display: grid; }
.prensa__cita { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .8s var(--curva), transform .8s var(--curva), visibility 0s .8s; }
.prensa__cita.activa { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.prensa__cita p { font-family: var(--display); font-size: clamp(1.7rem, 4.2vw, 3.1rem); line-height: 1.28; margin-bottom: 1.6rem; }
.prensa__cita a { text-decoration: none; border-bottom: 1px solid rgba(239, 229, 210, .35); }
.prensa__mandos { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.flecha { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(239, 229, 210, .35); background: none; color: var(--crema); cursor: pointer; font-size: 1rem; }
.flecha:hover { border-color: var(--crema); }
.puntos { display: flex; gap: 4px; }
.puntos button { width: 28px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; }
.puntos button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(239, 229, 210, .3); transition: background .3s, transform .3s; }
.puntos button[aria-selected="true"]::before { background: var(--acento); transform: scale(1.3); }
.prensa__cinta { margin: clamp(56px, 8vw, 90px) auto 0; max-width: var(--ancho); border-top: 1px solid var(--tinta-3); padding-top: 40px; overflow: hidden; }
.prensa__medios { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
.prensa__medios .duplicado { display: none; }
/* En el móvil, los logos pasan en fila en vez de amontonarse (Angel, 23/09) */
@media (max-width: 799px) {
  .prensa__cinta { margin-left: calc(-1 * var(--lado)); margin-right: calc(-1 * var(--lado));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .prensa__medios { flex-wrap: nowrap; justify-content: flex-start; gap: 44px; width: max-content; padding-right: 44px; animation: desliza 26s linear infinite; }
  .prensa__medios .duplicado { display: list-item; }
  .prensa__medios .medio { height: 26px; }
}
.prensa__medios a { font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.5rem); text-decoration: none; color: var(--crema-2); transition: color .3s; }
.prensa__medios a:hover { color: var(--crema); }
.prensa__extra { text-align: center; color: var(--crema-2); margin-top: 28px; font-size: .95rem; }

/* ───────── 11 · Reservar ───────── */
.reservar__tarjetas { max-width: 1000px; margin: 0 auto; display: grid; gap: 16px; }
.tarjeta { padding: clamp(26px, 4vw, 44px); border: 1px solid var(--tinta-3); border-radius: 6px; background: var(--tinta-2); display: flex; flex-direction: column; }
.tarjeta h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 12px; }
.tarjeta > p:not(.ceja) { color: var(--crema-2); }
.tarjeta .boton { margin-top: auto; }
.tarjeta__nota { margin: 16px 0 0; font-size: .9rem; text-align: center; }
.tarjeta__nota a { color: var(--crema); }
@media (min-width: 800px) { .reservar__tarjetas { grid-template-columns: 1fr 1fr; } }

/* ───────── 12 · Pie ───────── */
/* Abajo, 110 px de hueco para la barra flotante: sin él tapaba el aviso legal en el móvil (la regla suelta de arriba quedaba pisada) */
.pie { padding: 40px var(--lado) 110px; overflow: hidden; border-top: 1px solid var(--tinta-3); }
.pie__gigante {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; text-align: center; white-space: nowrap;
  font-size: clamp(3rem, 12.4vw, 13rem); line-height: .9; letter-spacing: -.01em; margin: 24px 0 56px;
  /* En dorado (Eloy, doc 3): del dorado claro arriba al acento, que se apaga abajo */
  background: linear-gradient(180deg, #e2c894 0%, var(--acento) 45%, rgba(197, 165, 114, .22) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Los enlaces de dentro del texto, sin subrayado (Eloy, 05/10/2026, «muy importante para todos los restaurantes»: «que no se vea
   el subrayado… la negrita pasable… pero que no sea tan cantoso que sea un link y se nos vayan»). Se distinguen por la negrita
   y un tono más claro; el subrayado solo sale al pasar el ratón o al llegar con el teclado. */
.enlace { color: var(--crema); font-weight: 600; text-decoration: none; }
.enlace:hover, .enlace:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--acento); }
.pie__legal { max-width: var(--ancho); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .8rem; color: var(--crema-2); border-top: 1px solid var(--tinta-3); padding-top: 20px; }
.pie__legal a { color: var(--crema-2); }
/* Eloy, doc 4 (23/09): la firma, «Diseño por Gastromaps», en lugar del ©; y las redes, «encájalo por algún lado que
   no ensucie»: tres iconos pequeños al final de la línea legal, en el mismo tono apagado. */
.pie__firma a { text-decoration: none; font-weight: 600; }
.pie__redes { margin-left: auto; display: inline-flex; gap: 14px; align-items: center; }
.pie__redes a { display: inline-flex; color: var(--crema-2); opacity: .8; transition: opacity .3s, color .3s; }
.pie__redes a:hover, .pie__redes a:focus-visible { opacity: 1; color: var(--acento); }
/* En el móvil: la firma en su línea y, debajo, los tres legales con el icono de Instagram en la misma línea. Antes
   «Cookies» caía sola y el icono, solo en otra más abajo (Eloy, 02/10/2026: «se queda ahí como bailando»; regla para todas). */
@media (max-width: 640px) { .pie__legal { justify-content: center; } .pie__firma { width: 100%; text-align: center; } .pie__redes { margin-left: 0; } }


/* ───────── 日系 que se escribe solo (Eloy, 23/09: como restaurantenintai.com, en bucle y despacio) ─────────
   Trazos de KanjiVG en su orden de caligrafía; cada uno ocupa su tramo del mismo ciclo de 12,5 s. */
.sello--trazos { width: 58px; padding: 10px 0; }
.sello__trazos { display: block; margin: 0 auto; overflow: visible; }
.sello__trazos .k { fill: none; stroke: var(--acento); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 0; animation: 12.5s linear infinite; }
.sello__trazos .k0 { animation-name: k0; }
@keyframes k0 { 0%, 0.00% { stroke-dashoffset: 1; opacity: 0; } 0.01% { stroke-dashoffset: 1; opacity: 1; } 5.60% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.sello__trazos .k1 { animation-name: k1; }
@keyframes k1 { 0%, 5.60% { stroke-dashoffset: 1; opacity: 0; } 5.61% { stroke-dashoffset: 1; opacity: 1; } 11.20% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.sello__trazos .k2 { animation-name: k2; }
@keyframes k2 { 0%, 11.20% { stroke-dashoffset: 1; opacity: 0; } 11.21% { stroke-dashoffset: 1; opacity: 1; } 16.80% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.sello__trazos .k3 { animation-name: k3; }
@keyframes k3 { 0%, 16.80% { stroke-dashoffset: 1; opacity: 0; } 16.81% { stroke-dashoffset: 1; opacity: 1; } 22.40% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.sello__trazos .k4 { animation-name: k4; }
@keyframes k4 { 0%, 22.40% { stroke-dashoffset: 1; opacity: 0; } 22.41% { stroke-dashoffset: 1; opacity: 1; } 28.00% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.sello__trazos .k5 { animation-name: k5; }
@keyframes k5 { 0%, 28.00% { stroke-dashoffset: 1; opacity: 0; } 28.01% { stroke-dashoffset: 1; opacity: 1; } 33.60% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.sello__trazos .k6 { animation-name: k6; }
@keyframes k6 { 0%, 33.60% { stroke-dashoffset: 1; opacity: 0; } 33.61% { stroke-dashoffset: 1; opacity: 1; } 39.20% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.sello__trazos .k7 { animation-name: k7; }
@keyframes k7 { 0%, 39.20% { stroke-dashoffset: 1; opacity: 0; } 39.21% { stroke-dashoffset: 1; opacity: 1; } 44.80% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.sello__trazos .k8 { animation-name: k8; }
@keyframes k8 { 0%, 44.80% { stroke-dashoffset: 1; opacity: 0; } 44.81% { stroke-dashoffset: 1; opacity: 1; } 50.40% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.sello__trazos .k9 { animation-name: k9; }
@keyframes k9 { 0%, 50.40% { stroke-dashoffset: 1; opacity: 0; } 50.41% { stroke-dashoffset: 1; opacity: 1; } 56.00% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.sello__trazos .k10 { animation-name: k10; }
@keyframes k10 { 0%, 56.00% { stroke-dashoffset: 1; opacity: 0; } 56.01% { stroke-dashoffset: 1; opacity: 1; } 61.60% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ───────── 10bis · Galería de vídeos ───────── */
.galeria { padding-left: 0; padding-right: 0; }
.galeria .cabeza-seccion { padding: 0 var(--lado); }
.galeria__pista {
  list-style: none; margin: 0; display: flex; gap: clamp(14px, 2vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px max(var(--lado), calc((100% - var(--ancho)) / 2)) 24px; scroll-padding: 0 max(var(--lado), calc((100% - var(--ancho)) / 2));
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__ficha { flex: none; width: 72vw; max-width: 300px; scroll-snap-align: center; }
.galeria__mandos { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
@media (max-width: 899px) { .galeria__pista { padding-left: max(14vw, calc((100% - 300px) / 2)); padding-right: max(14vw, calc((100% - 300px) / 2)); } }
/* En PC caben los cuatro: rejilla centrada, sin desplazamiento ni flechas (Angel, 23/09: «ha quedado descentrada»;
   Eloy, doc 3: «quitar las flechas porque no hacen función» — la regla base iba debajo y las volvía a enseñar) */
@media (min-width: 900px) {
  .galeria__pista { display: grid; grid-template-columns: repeat(4, minmax(0, 280px)); justify-content: center; overflow: visible; padding: 10px var(--lado) 24px; }
  .galeria__ficha { width: auto; }
  .galeria__mandos { display: none; }
}
.galeria__ficha figure { margin: 0; }
.galeria__ficha video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; background: var(--tinta-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); transition: transform .8s var(--curva); }
.galeria__ficha:hover video { transform: translateY(-6px); }
.galeria__ficha figcaption { margin-top: 14px; font-family: var(--display); font-size: 1.05rem; line-height: 1.3; }

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .aparece, .js .portada__texto > *, .portada__ancho { opacity: 1 !important; transform: none !important; }
  .banda__pista { width: auto; flex-wrap: wrap; justify-content: center; padding: 20px var(--lado); }
  .prensa__medios { width: auto; flex-wrap: wrap; justify-content: center; }
}

/* ───────── Páginas de reservar y gracias (23/09) ───────── */
.pagina-reserva { min-height: 100svh; }
.reserva { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 32px var(--lado) 48px; overflow: hidden; isolation: isolate; }
.reserva__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.reserva__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 10, 9, .78), rgba(12, 10, 9, .92)); }
.reserva__contenido { width: 100%; max-width: 34rem; display: grid; justify-items: center; gap: 22px; }
.reserva__logo { display: block; }
.reserva__tarjeta { width: 100%; padding: clamp(22px, 4vw, 34px); border-radius: 8px; background: var(--tinta-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(239, 229, 210, .1); }
.reserva__tarjeta h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); text-align: center; margin-bottom: 12px; text-wrap: balance; }
.reserva__tarjeta > p { color: var(--crema-2); text-align: center; }
.reserva__social { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: .9rem; padding-bottom: 16px; margin-bottom: 18px !important; border-bottom: 1px solid var(--tinta-3); }
.reserva__nota { color: var(--crema); font-weight: 700; letter-spacing: .04em; }
.reserva__nota span { color: var(--acento); letter-spacing: .1em; }
/* El calendario es de CoverManager, en su propio marco: nuestro estilo no entra. Eloy lo quiere negro y crema
   (23/09): se invierten sus colores desde fuera y se calientan hacia el crema. Los colores exactos (el rojo en los
   botones) solo se podrían poner desde el panel de CoverManager del restaurante, si lo permite. */
.reserva__modulo iframe { display: block; width: 100%; min-height: 34rem; border: 0; border-radius: 6px; background: transparent;
  /* Virado al azul noche de la tarjeta (Eloy, 30/09: «los cover siempre con el color de la marca»); antes, marrón */
  filter: invert(.92) hue-rotate(180deg) sepia(.45) hue-rotate(172deg) saturate(1.6) brightness(.9); }
.reserva__pie { margin: 16px 0 0; font-size: .85rem; }
.reserva__legal { display: flex; justify-content: center; gap: 22px; padding: 18px var(--lado) 28px; font-size: .8rem; background: var(--tinta); }
.reserva__legal a { color: var(--crema-2); }
/* En la carta hay barra flotante: sin este hueco tapaba los enlaces legales (23/09) */
.reserva__legal--barra { padding-bottom: 110px; }
.reserva__sub { font-size: 1.25rem; text-align: center; margin: 26px 0 6px; }
.reserva__nota-pequena { font-size: .9rem; }
.reserva__lista { list-style: none; padding: 0; margin: 14px 0 24px; display: grid; gap: 8px; }
.reserva__lista li { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; border: 1px solid var(--tinta-3); border-radius: 6px; }
.reserva__lista b { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.reserva__lista span { color: var(--crema-2); font-size: .85rem; }

/* Logos oficiales de los medios (Eloy, 23/09: «da más autoridad»), en crema sobre el negro */
.cita footer, .prensa__cita footer, .plato footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.prensa__cita footer { justify-content: center; }
.medio { display: block; width: auto; height: 18px; filter: brightness(0) invert(1); opacity: .9; }
.plato--letra .medio { filter: brightness(0); opacity: .75; }
.prensa__cita .medio { height: 24px; }
.prensa__cita footer a { border: 0; }
.prensa__medios { align-items: center; }
.prensa__medios .medio { height: 28px; opacity: .55; transition: opacity .3s; }
.prensa__medios a:hover .medio, .prensa__medios a:focus-visible .medio { opacity: 1; }
/* El logo del medio dentro de la tarjeta NO es la foto de fondo: sin esto, «.plato img» lo estiraba a toda la tarjeta */
.plato .medio { position: static; inset: auto; width: auto; height: 18px; z-index: auto; object-fit: contain; transform: none; transition: none; }
.plato:hover .medio { transform: none; }

/* ───────── Páginas legales (Eloy, 23/09: «las nuestras, con el fondo negro») ───────── */
.legal { max-width: 760px; margin: 0 auto; padding: 40px var(--lado) 90px; }
.legal__logo { display: block; width: max-content; margin: 0 auto 36px; }
.legal__volver { font-size: .85rem; margin-bottom: 26px; }
.legal__volver a, .legal__otros a { color: var(--crema-2); text-underline-offset: 4px; }
.legal h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin-bottom: 8px; }
.legal__fecha { color: var(--crema-2); font-size: .85rem; margin-bottom: 40px; }
.legal__apartado { padding: 26px 0; border-top: 1px solid var(--tinta-3); }
.legal__apartado h2 { font-size: 1.45rem; margin-bottom: 14px; }
.legal__apartado p { color: var(--crema-2); }
.legal__apartado strong { color: var(--crema); font-weight: 500; }
.legal__apartado a { color: var(--crema); text-decoration-color: var(--acento); text-underline-offset: 3px; }
.legal__datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 14px 0 0; padding: 18px 20px; border: 1px solid var(--tinta-3); border-radius: 6px; background: var(--tinta-2); font-size: .95rem; }
.legal__datos dt { color: var(--crema-2); }
.legal__datos dd { margin: 0; color: var(--crema); }
.legal__tabla { overflow-x: auto; margin-top: 14px; border: 1px solid var(--tinta-3); border-radius: 6px; }
.legal__tabla table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 520px; }
.legal__tabla th, .legal__tabla td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--tinta-3); vertical-align: top; }
.legal__tabla th { color: var(--crema); font-weight: 500; background: var(--tinta-2); }
.legal__tabla td { color: var(--crema-2); }
.legal__otros { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-top: 26px; border-top: 1px solid var(--tinta-3); font-size: .9rem; }
@media (max-width: 560px) { .legal__datos { grid-template-columns: 1fr; gap: 2px 0; } .legal__datos dd { margin-bottom: 10px; } }

/* ───────── Página de la carta (Eloy, 23/09: «fusilarla con nuestro estilo») ───────── */
.carta-pagina { max-width: 1000px; margin: 0 auto; padding: 40px var(--lado) 120px; }
.carta-pagina__marca { display: block; margin: 0 auto 44px; width: max-content; }
.carta-pagina h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin: 0 0 34px; text-wrap: balance; }
.carta-pagina > .ceja { display: flex; }
.carta-pestanas { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--tinta-3); width: max-content; max-width: 100%; margin-bottom: 18px; }
.carta-pestanas button { border: 0; background: none; color: var(--crema-2); cursor: pointer; min-height: 44px; padding: 0 1.4em; border-radius: 999px;
  font: 700 .78rem/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; transition: background .3s, color .3s; }
.carta-pestanas button[aria-selected="true"] { background: var(--acento); color: var(--tinta); }
.carta-chips { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 14px 0; margin-bottom: 8px;
  background: linear-gradient(var(--tinta) 80%, transparent); }
.carta-chips::-webkit-scrollbar { display: none; }
/* La carta de vinos (30/09): las regiones dentro de cada apartado, el precio por copa y el enlace entre carta y vinos */
.carta-subgrupo { margin: 1.8rem 0 .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); }
.vino-copa { display: inline-block; margin-right: .4em; padding: 0 .5em; border: 1px solid var(--tinta-3); border-radius: 999px; font-size: .78em; font-style: normal; color: var(--crema); white-space: nowrap; }
.carta-pagina__enlace { margin: -.4rem 0 1.4rem; text-align: center; }
.carta-pagina__enlace a { color: var(--acento); text-underline-offset: 3px; }
/* En PC, todas a la vista (Angel, 30/09: «tiene cortada la píldora de "el arte del complemento"»): con los 9 apartados
   de la carta nueva no caben en una fila de 888 px y la sexta quedaba partida en el borde. Bajan a una segunda línea,
   centradas. En el móvil se siguen deslizando con el dedo. */
@media (min-width: 900px) { .carta-chips { flex-wrap: wrap; justify-content: center; overflow: visible; } }
.carta-chips a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--tinta-3); color: var(--crema-2); text-decoration: none; font-size: .85rem; white-space: nowrap; }
.carta-chips a:hover { border-color: var(--acento); color: var(--crema); }
.carta-apartado { padding: 34px 0 10px; scroll-margin-top: 70px; }
.carta-apartado h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--tinta-3); }
.carta-apartado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px 48px; }
@media (min-width: 800px) { .carta-apartado ul { grid-template-columns: 1fr 1fr; } }
.plato-carta__linea { display: flex; align-items: baseline; gap: 12px; }
.plato-carta__linea::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--tinta-3); transform: translateY(-4px); }
.plato-carta h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.3; }
.plato-carta__precio { order: 2; color: var(--acento); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .98rem; }
.plato-carta p { margin: 6px 0 0; color: var(--crema-2); font-size: .92rem; line-height: 1.55; }

/* ───────── Ronda de Eloy del 24/09 (doc 5) ───────── */
/* La tarjeta de papel con solo la frase del medio (Con El Morro Fino): la frase en el sitio del nombre del plato,
   en dos líneas, y el logo debajo. */
/* «en estado puro.»» va unido (espacio irrompible) y mide 7,85 veces la letra: el tamaño sale del ancho de la tarjeta
   para que quepa entera. Igual que en las landings (Angel, 24/09: «agrándalo en la home también»): menos margen a los
   lados, la frase más grande y el logo a 72 px; cabe en dos líneas hasta en la tarjeta más estrecha (218 px, a 1024). */
.plato--solo-cita .plato__texto { padding-left: 1.15rem; padding-right: 1.15rem; }
.plato--solo-cita blockquote p { white-space: normal; font-size: min(2.6rem, 10.3cqi); line-height: 1.12; margin-bottom: 1rem; }
/* Su logo es un sello redondo con letras: a los 18-28 px de los logos apaisados no se lee. */
.plato .medio--conelmorrofino { height: 72px; }
@media (max-width: 699px) { .plato--solo-cita .plato__texto { padding-top: 1.8rem; padding-bottom: 5rem; } }
.prensa__cita .medio--conelmorrofino { height: 44px; }
.prensa__medios .medio--conelmorrofino { height: 46px; }
@media (max-width: 799px) { .prensa__medios .medio--conelmorrofino { height: 42px; } }
.sin-corte { white-space: nowrap; } /* «japo-peruana» no se parte por el guion */

/* La estrella de las notas, con una letra de sistema: la KyivType dibuja «★» como una flor (28/09). */
.estrella, .sellos__marca [aria-hidden="true"], .reserva__nota [aria-hidden="true"] { font-family: "Helvetica Neue", Arial, sans-serif; }

/* La carta de su PDF v6 (28/09): una línea bajo el título de algunos apartados (la Experiencia Nikkei de mediodía,
   con su precio por persona) y el aviso de alergias de su carta, al final. */
.carta-apartado__nota { margin: -6px 0 22px; color: var(--acento); font-size: .98rem; max-width: 62ch; }
.carta-pagina__alergias { margin: 56px 0 0; padding-top: 22px; border-top: 1px solid var(--tinta-3); color: var(--crema-2); font-size: .85rem; max-width: 80ch; }
/* Cuatro pestañas desde la carta v6 (carta, vinos, cócteles y bebidas): en el móvil, menos aire para que quepan. */
@media (max-width: 520px) {
  .carta-pestanas { width: 100%; gap: 4px; }
  .carta-pestanas button { flex: 1 1 auto; padding: 0 .6em; letter-spacing: .1em; }
}

/* La firma del pie con el nombre exacto de su logotipo (28/09; Angel: «¿podemos poner la fuente del logo?»). Su letra no es
   una fuente que se pueda cargar: va como imagen, en el dorado de antes (Angel, 28/09): recursos/marca/firma-dorada.svg. */
.pie__gigante--img { background: none; line-height: 0; }
.pie__gigante--img img { display: block; width: min(100%, 1100px); height: auto; margin: 0 auto; }

/* ─── REDONDO (29/09) ───────────────────────────────────────────────────────────────── */
/* La carta en cuatro fichas: 2 en el móvil, 4 desde tableta */
@media (min-width: 700px) { .carta__fichas--cuatro { grid-template-columns: repeat(4, 1fr); } }
/* Las citas son reseñas de Google: firma con la «G» en su color, sin logos de medios */
.resena { display: inline-flex; align-items: center; gap: 8px; }
.resena b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--crema);
  color: #4285f4; font: 700 .7rem/1 var(--texto); letter-spacing: 0; }
.prensa__extra b { color: var(--acento); font-weight: 600; }
/* En celebraciones no hay vídeo: la foto grande ocupa las dos filas */
.pisco__video img { aspect-ratio: auto; height: 100%; }
.pisco__texto .cita { margin: 1.4rem 0 0; }
/* Su logo: más ancho que alto, en la portada y en el pie */
.portada__logo .marca__logo { width: clamp(150px, 16vw, 210px); height: auto; }
.pie__gigante--img img { width: min(100%, 720px); height: auto; margin: 0 auto; }
/* Preguntas frecuentes (nuevo respecto a Lima Nikkei) */
.preguntas__lista { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--tinta-3); }
.preguntas details { border-bottom: 1px solid var(--tinta-3); }
.preguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.3; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-family: var(--texto); font-size: 1.5rem; color: var(--acento); transition: transform .3s var(--curva); flex: none; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { margin: 0 4px 24px; color: var(--crema-2); max-width: 62ch; }
.preguntas summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
h2 em, h1 em { font-style: italic; }   /* Redondo: la cursiva de su logo, en el acento */
.pendiente { background: #b3261e; color: #fff; padding: 1px 6px; border-radius: 3px; font-weight: 600; }   /* dato legal que falta: no se publica así */
/* La tarjeta de solo cita («Tomate y ya!»): en melocotón y con el escudo de su logo de marca de agua, en lugar de las
   olas japonesas de Lima Nikkei */
.plato--letra { background: var(--acento); }
.plato--letra::before { -webkit-mask-image: none; mask-image: none; inset: auto -8% -10% auto; width: 62%; height: 70%;
  background: url("marca/escudo-tinta.svg") right bottom / contain no-repeat; opacity: .12; }
.plato--letra .resena b { background: var(--tinta); }
/* La portada: el velo de Lima Nikkei tapaba el vídeo; aquí se ve el chuletón que se trincha */
.portada__velo { background:
    radial-gradient(70% 60% at 50% 55%, rgba(14, 23, 33, .6), rgba(14, 23, 33, .25) 80%),
    linear-gradient(to bottom, rgba(14, 23, 33, .6), transparent 22%, transparent 70%, var(--tinta)); }
/* «Antes de venir, / lo que suele preguntarse.»: la segunda parte baja entera */
.preguntas h2 em { display: block; }
.prensa { background: linear-gradient(var(--tinta), var(--tinta-2) 22%, var(--tinta-2) 78%, var(--tinta)); }   /* Redondo: sin el mármol japonés de Lima Nikkei (daba 404) */
/* LA ANFITRIONA (Redondo, 29/09): tres fotos suyas en mosaico —una alta y dos cuadradas— y su texto al lado. Antes, un
   retrato en círculo con aro melocotón; Eloy pidió cambiarlo por varias fotos de su Instagram (feedback del 29/09).
   Las cuentas: columnas 3:2 y alto 4/5 del ancho dan la grande en 3:4 y las pequeñas cuadradas. */
.anfitriona { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; display: grid; gap: 40px; align-items: center; }
.anfitriona__fotos { margin: 0 auto; width: min(100%, 480px); aspect-ratio: 5 / 4; display: grid; gap: 10px;
  grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; }
.anfitriona__fotos figure { margin: 0; overflow: hidden; border-radius: 14px; min-height: 0;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4); }
.anfitriona__fotos figure:first-child { grid-row: 1 / span 2; box-shadow: 0 0 0 2px var(--acento), 0 18px 44px rgba(0, 0, 0, .4); }
.anfitriona__fotos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.anfitriona__texto > p:not(.ceja) { color: var(--crema-2); max-width: 56ch; }
.anfitriona__texto h2 { margin-bottom: 1.4rem; }
.anfitriona__texto .cita { margin-top: 1.4rem; }
@media (min-width: 900px) { .anfitriona { grid-template-columns: 5fr 7fr; gap: 72px; } }

/* EL PREMIO DE RESTAURANT GURU (01/10/2026): una banda a todo lo ancho con la terraza de fondo (Angel: «se siente un poco
   vacío todo en esa zona… quizás una foto de fondo»), oscurecida y algo desenfocada para que el sello y la frase manden.
   El sello oficial a un lado y la frase al otro; en el móvil, uno encima de otro y centrados. */
.premio-rg { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  min-height: clamp(520px, 70svh, 720px); padding: clamp(70px, 10vw, 120px) var(--lado); }
.premio-rg__fondo { position: absolute; inset: -16px; z-index: -2; }
.premio-rg__fondo img { width: 100%; height: 100%; object-fit: cover; filter: blur(2px) saturate(1.05); }
.premio-rg::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 70% at 50% 50%, rgba(14, 23, 33, .62), rgba(14, 23, 33, .82)),
              linear-gradient(to bottom, var(--tinta), transparent 18%, transparent 82%, var(--tinta)); }
.premio-rg__caja { max-width: 920px; width: 100%; display: grid; gap: 28px; justify-items: center; text-align: center; }
.premio-rg__sello { display: block; line-height: 0; border-radius: 14px; transition: transform .5s var(--curva);
  box-shadow: 0 0 0 1px rgba(255, 201, 153, .25), 0 26px 70px rgba(0, 0, 0, .7), 0 0 90px rgba(255, 201, 153, .16); }
.premio-rg__sello img { width: clamp(220px, 60vw, 280px); height: auto; border-radius: 14px; }
.premio-rg .ceja { color: var(--crema); }
.premio-rg__texto h2 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); margin-bottom: 1rem; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.premio-rg__texto h2 em { display: block; }
.premio-rg__texto > p:not(.ceja) { color: var(--crema); margin: 0; }
@media (min-width: 760px) {
  .premio-rg__caja { grid-template-columns: auto 1fr; gap: 60px; justify-items: start; text-align: left; align-items: center; }
  .premio-rg .ceja::after { display: none; }
}
/* La sombra del sello no debe oscurecer el texto de debajo en el móvil (01/10) */
.premio-rg__texto { position: relative; z-index: 1; }

/* AUDITORÍA SEO DE ELOY (02/10/2026): en los bloques que llevan una búsqueda («Carne a la brasa en Torrejón», «Arroces
   para compartir»…), la ceja va DENTRO del h2, como ya iba en el h1 de la portada, para que Google la lea como parte del
   titular. Se ve igual que la ceja suelta de antes: en su propia línea, con su interlineado y alineada como el bloque. */
h2 > .ceja { display: flex; width: fit-content; max-width: 100%; line-height: 1.65; margin-left: auto; margin-right: auto; }
.casa__texto h2 > .ceja, .cabeza-seccion--izq h2 > .ceja, .pisco__texto h2 > .ceja, .cerca__texto h2 > .ceja { margin-left: 0; }
/* Las preguntas frecuentes, con la pregunta como título (h3) y el mismo aspecto que tenían */
.preguntas summary h3 { font: inherit; letter-spacing: inherit; margin: 0; }

/* EN EL CENTRO DE TORREJÓN (02/10/2026): el texto a un lado y las distancias a pie al otro, como un horario de estación;
   en el móvil, uno encima de otro */
.cerca { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; display: grid; gap: 40px; align-items: center; }
.cerca__texto h2 { margin-bottom: 1.4rem; }
.cerca__texto > p { color: var(--crema-2); max-width: 52ch; }
.cerca__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta-3); }
.cerca__lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 18px 4px;
  border-bottom: 1px solid var(--tinta-3); }
.cerca__lista span { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.3; }
.cerca__lista b { font-family: var(--texto); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acento); white-space: nowrap; }
@media (min-width: 900px) { .cerca { grid-template-columns: 5fr 6fr; gap: 72px; } }

/* SIN EL RECUADRO AZUL AL TOCAR (02/10/2026; Angel, en Sagar: «una caja azul flashea en cada item al tapearlo»; el molde de
   las landings ya lo quitaba, las portadas hechas a mano no). El foco con teclado sigue viéndose (:focus-visible). */
html { -webkit-tap-highlight-color: transparent; }
/* El horario escrito en la tarjeta «Cómo llegar» (05/10/2026; antes, un enlace a Google) */
.tarjeta .horario { line-height: 1.55; }
.tarjeta .horario b { color: var(--crema); font-weight: 600; }
.tarjeta .horario span { white-space: nowrap; }

/* Los dos botones de la carta, uno al lado del otro también en el móvil (Eloy, 05/10/2026: «estos botones uno al lado del otro en
   el móvil… si tienes que quitar texto, quítalo»): «Ver la carta completa» pasa a «Ver la carta» y en pantallas estrechas llevan
   menos relleno y letra algo más junta. */
@media (max-width: 560px) {
  .carta__todo { display: flex; justify-content: center; gap: 8px; }
  .carta__todo .boton { flex: 0 1 auto; min-width: 0; padding-left: 1.15em; padding-right: 1.15em; letter-spacing: .14em; font-size: .72rem; white-space: nowrap; }
}