/* respaldo-vh */ /* Cada declaración con «svh» lleva delante su gemela en «vh»: iOS < 15.4 no entiende svh y descartaría la declaración entera. */
/* ============================================================
   NAXIENIAN v2 · LA CARTA · de NOCHE, como la portada
   Las fotos son de estudio sobre pizarra oscura: en Midnight se funden y son cine.
   ORDEN: todas las fotos al mismo formato (4:3) en rejilla estricta; el texto
   siempre en el mismo sitio (nombre + precio · chino · picante y alérgenos).
   ÉPICA: cada sección abre como un capítulo, con su plato insignia a gran formato.
   LA PALETA, cada tono con un oficio:
     Midnight el fondo · Royal la cinta de secciones y la luz de la cima · China los numerales
     Sky precios, sello 辣 y acentos · Porcelain la tinta
   ============================================================ */

@font-face {
  font-family: 'Noto Sans SC';
  src: url('/assets/fonts/noto-sans-sc-v2-carta.woff2?v=6b759f8b') format('woff2');
  font-weight: 300 500; font-style: normal; font-display: swap;
}

:root { --pest-h: 58px; }
html { scroll-padding-top: calc(var(--cab-h) + var(--pest-h)); }

/* ══════════ CIMA · sin vídeo y sin adornos: degradado de marca (manual p. 10) y el título ══════════ */
.cima {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: clamp(240px, 38vh, 400px); min-height: clamp(240px, 38svh, 400px);
  padding: calc(var(--cab-h) + 1.5rem) var(--margen) clamp(2rem, 4vw, 3.25rem);
  background: radial-gradient(115% 150% at 50% 55%, var(--royal) 0%, #1b327f 34%, var(--midnight) 76%);
}
/* grano muy fino: evita el «banding» del degradado en pantallas de 8 bits. El fondo puede llevar grano; la marca, nunca */
.cima::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  opacity: 0.22; mix-blend-mode: soft-light; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cima-palabra { font-size: clamp(2.9rem, 1.6rem + 6vw, 6.75rem); line-height: 1; letter-spacing: -0.02em; color: var(--porcelain); }

/* ══════════ PESTAÑAS · cinta Royal pegada bajo la cabecera ══════════ */
.pestanas { position: sticky; top: var(--cab-h); z-index: 40; height: var(--pest-h); background: var(--royal); box-shadow: 0 14px 34px -18px rgba(2, 8, 28, 0.9); }
.pestanas-in { height: 100%; display: flex; align-items: stretch; gap: clamp(1.25rem, 2.4vw, 2.5rem); padding-inline: var(--margen); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.pestanas-in::-webkit-scrollbar { display: none; }
@media (min-width: 1240px) { .pestanas-in { justify-content: center; } }
/* pista de que hay más secciones a la derecha: la cinta se desvanece en el borde */
@media (max-width: 1239px) { .pestanas-in { -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%); mask-image: linear-gradient(to right, #000 86%, transparent 100%); padding-right: 3.5rem; } }
.pestanas a {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--serif); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: rgba(237, 241, 246, 0.82);           /* ≈ 5:1 sobre Royal */
  transition: color 0.35s;
}
.pestanas a .zh { font-size: 0.95rem; letter-spacing: 0; opacity: 0.85; }
.pestanas a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--porcelain); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease); }
.pestanas a:hover, .pestanas a.activa { color: #FFFFFF; }
.pestanas a.activa::after { transform: scaleX(1); }
.pestanas a:focus-visible { outline-color: #FFFFFF; outline-offset: -4px; }

/* ══════════ APERTURA DE SECCIÓN · un capítulo ══════════ */
.sec { border-top: 1px solid var(--linea); }
.sec:first-child { border-top: 0; }
.apertura {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.3fr);
  align-items: stretch;
  min-height: clamp(380px, 68vh, 720px); min-height: clamp(380px, 68svh, 720px);
}
.apertura-texto { align-self: center; padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4.5rem) clamp(2.5rem, 5vw, 5rem) var(--margen); display: grid; justify-items: start; }
.sec-num { font-size: clamp(5rem, 3rem + 8.5vw, 12rem); line-height: 0.95; letter-spacing: 0; color: var(--china); }
.apertura h2 { margin-top: clamp(1rem, 2vw, 1.75rem); font-size: clamp(2.3rem, 1.3rem + 3.7vw, 4.9rem); line-height: 1.02; letter-spacing: -0.02em; }
.sec-zh { margin-top: clamp(0.8rem, 1.5vw, 1.2rem); font-size: clamp(1rem, 0.9rem + 0.6vw, 1.45rem); letter-spacing: 0.5em; color: var(--sky); }
html[lang^="zh"] .sec-zh { display: none; }
.sec-cuenta { margin-top: clamp(1.4rem, 2.6vw, 2.2rem); font-family: var(--serif); font-size: 0.8125rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--tinta-tenue); }

/* la foto sale a sangre por la derecha; su canto izquierdo se disuelve en el Midnight (es la foto la que se funde: no hay velo sobre la comida) */
.apertura-foto { position: relative; overflow: hidden; min-height: 100%; }
.apertura-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
          mask-image: linear-gradient(to right, transparent 0, #000 22%);
}

/* ══════════ LA REJILLA ══════════ */
.sec-cuerpo { width: min(100%, 1480px); margin-inline: auto; padding: clamp(2.5rem, 5vw, 4.5rem) var(--margen) clamp(4rem, 8vw, 7.5rem); }
.platos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.25rem, 3.6vw, 3.75rem) clamp(1.25rem, 2.2vw, 2.25rem); }
.sec-esp .platos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.plato { display: grid; align-content: start; }
.plato-foto { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: #050a1c; cursor: zoom-in; }
.plato-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.plato-foto:hover img, .plato-foto:focus-visible img { transform: scale(1.05); }

.plato-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; margin-top: 1.1rem; }
.plato-nombre { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.2; }
.sec-esp .plato-nombre { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); }
.plato-var { display: block; margin-top: 0.3rem; font-family: var(--sans); font-size: var(--t-menor); font-weight: 300; letter-spacing: 0.02em; color: var(--tinta-suave); line-height: 1.45; }
.plato-precio { font-size: var(--t-cuerpo); color: var(--sky); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; text-align: right; }
.plato-zh { margin-top: 0.4rem; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); letter-spacing: 0.16em; color: var(--tinta-suave); }
html[lang^="zh"] .plato-zh { display: none; }
.plato-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.55rem; margin-top: 0.6rem; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--tinta-tenue); }
.alg:not(:last-child)::after { content: '·'; margin-left: 0.55rem; }
/* 辣 · dentro de paleta: sello Sky con tinta Midnight */
.pica { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sky); color: var(--midnight); font-family: var(--sans); font-size: 0.8rem; font-weight: 500; line-height: 1; letter-spacing: 0; }

@media (max-width: 1080px) { .platos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .apertura { grid-template-columns: 1fr; min-height: 0; }
  /* En móvil la imagen va EN FLUJO, con su propio alto. Nada de aspect-ratio sobre una caja que solo contiene una
     imagen absoluta: WebKit (Safari, todo iPhone) le calcula alto 0 y el título se monta sobre lo anterior. */
  .apertura-foto { order: -1; min-height: 0; height: auto; }
  .apertura-foto img { position: static; display: block; width: 100%; height: 68.75vw; max-height: 70vh; object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
  .apertura-texto { padding: 0.5rem var(--margen) 1rem; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: end; margin-top: -2.5rem; position: relative; }
  .sec-num { grid-row: span 3; align-self: center; font-size: clamp(3.75rem, 19vw, 6.5rem); }
  /* «Especialidades» es una sola palabra larga: a 360 px tiene que caber junto al numeral */
  .apertura h2 { margin-top: 0; min-width: 0; font-size: clamp(1.7rem, 0.6rem + 5.4vw, 3rem); overflow-wrap: break-word; }
  .apertura-texto > * { min-width: 0; }
  .sec-cuenta { margin-top: 0.6rem; }
}
@media (max-width: 560px) {
  .platos { gap: 2rem 0.9rem; }
  .sec-esp .platos { grid-template-columns: 1fr; }
  /* en móvil el orden de lectura es: nombre · chino · precio · picante y alérgenos */
  .plato-cabeza { display: contents; }
  .plato-foto { order: 0; } .plato-nombre { order: 1; margin-top: 0.8rem; } .plato-zh { order: 2; } .plato-precio { order: 3; margin-top: 0.35rem; } .plato-meta { order: 4; }
  .plato-nombre { font-size: 1.02rem; }
  .sec-esp .plato-nombre { font-size: 1.35rem; }
  .plato-precio { text-align: left; font-size: var(--t-menor); white-space: normal; }
  .plato-zh { font-size: 1rem; }
}

/* ══════════ LEYENDA · discreta, pero está ══════════ */
.carta-nota { border-top: 1px solid var(--linea); }
.carta-nota-in { width: min(100%, 1480px); margin-inline: auto; padding: clamp(2rem, 4vw, 3rem) var(--margen); display: grid; gap: 0.7rem; }
.nota-linea { display: flex; align-items: center; gap: 0.7rem; font-size: var(--t-micro); color: var(--tinta-tenue); max-width: 84ch; }

/* ══════════ CIERRE · con foto ══════════ */
.carta-fin { border-top: 1px solid var(--linea); padding-block: var(--seccion); }
.carta-fin-in { width: min(100%, 1320px); margin-inline: auto; padding-inline: var(--margen); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.carta-fin-foto { overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 3; }
.carta-fin-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.carta-fin-foto:hover img { transform: scale(1.04); }
.carta-fin-texto { display: grid; justify-items: start; }
.carta-fin h2 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.2rem); line-height: 1.04; letter-spacing: -0.015em; }
.carta-fin-texto > p { margin-top: 1.2rem; color: var(--tinta-suave); max-width: 36ch; }
.carta-fin .boton { margin-top: clamp(1.9rem, 3.4vw, 2.6rem); }
.carta-fin .carta-fin-tel { margin-top: 1.15rem; font-size: var(--t-menor); color: var(--tinta-tenue); }
.carta-fin-tel a { color: var(--porcelain); text-decoration: none; letter-spacing: 0.06em; border-bottom: 1px solid var(--linea-fuerte); padding-bottom: 1px; }
@media (max-width: 860px) { .carta-fin-in { grid-template-columns: 1fr; } .carta-fin .boton { width: 100%; } }

/* ══════════ VISOR DE FOTOS ══════════ */
.visor { width: min(94vw, 1040px); max-height: 94vh; max-height: 94svh; padding: 0; border: 0; background: var(--porcelain); color: var(--midnight); border-radius: 4px; overflow: hidden; box-shadow: 0 40px 120px rgba(2, 8, 28, 0.8); }
.visor::backdrop { background: rgba(3, 10, 34, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.visor[open] { animation: visor-entra 0.5s var(--ease); }
@keyframes visor-entra { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
.visor figure { display: grid; }
.visor img { width: 100%; height: auto; max-height: 74vh; max-height: 74svh; object-fit: cover; background: #050a1c; }
.visor figcaption { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.2rem 1.5rem; padding: clamp(1.1rem, 2.4vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem); }
.visor h3 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.9rem); line-height: 1.15; }
.visor .zh { grid-column: 1; font-size: var(--t-menor); letter-spacing: 0.16em; color: #3B4E7E; }
.visor-precio { grid-column: 2; grid-row: 1; font-size: var(--t-cuerpo); color: var(--royal); font-variant-numeric: lining-nums; white-space: nowrap; }
.visor-cerrar { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(8, 31, 92, 0.8); display: grid; place-items: center; transition: background 0.3s; }
.visor-cerrar:hover { background: var(--royal); }
.visor-cerrar i { position: relative; width: 16px; height: 16px; }
.visor-cerrar i::before, .visor-cerrar i::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--porcelain); }
.visor-cerrar i::before { transform: rotate(45deg); } .visor-cerrar i::after { transform: rotate(-45deg); }