/* 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 · PORTADA
   hero → respiro (el nombre) → la carta → respiro (servicio) → reservas
        → reseñas → dónde estamos → contacto → preguntas frecuentes
   Nunca dos vídeos pegados sin aire entre ellos.
   Capas (z-index): vídeo -1 · contenido 0 · cabecera 50 · panel 60 · cookies 9000
   ============================================================ */

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

/* ── pósters de los vídeos, por encuadre ── */
.hero .escena-video     { background-image: url('/assets/video/v2/hero-poster.webp?v=de2f73ed'); }
.carta .escena-video    { background-image: url('/assets/video/v2/carta-poster.webp?v=f017168d'); }
.reservas .escena-video { background-image: url('/assets/video/v2/reservas-poster.webp?v=50c44021'); }
.lugar .escena-video    { background-image: url('/assets/video/v2/espacio-poster.webp?v=4f112a7c'); }
@media (max-width: 899px) and (orientation: portrait) {
  .hero .escena-video     { background-image: url('/assets/video/v2/hero-movil-poster.webp?v=244a9a33'); }
  .carta .escena-video    { background-image: url('/assets/video/v2/carta-movil-poster.webp?v=501a8a82'); }
  .reservas .escena-video { background-image: url('/assets/video/v2/reservas-movil-poster.webp?v=9a2b1fd0'); }
  .lugar .escena-video    { background-image: url('/assets/video/v2/espacio-movil-poster.webp?v=8152f327'); }
}

/* ══════════ 1 · HERO ══════════ */
/* Texto FIJO: sin animación de entrada. El bloque vive en la franja alta, donde el
   vídeo es bokeh oscuro (contraste medido ≥ 4,5:1 con Porcelain). */
.hero { align-items: start; justify-items: center; padding: calc(var(--cab-h) + clamp(1.75rem, 7vh, 5rem)) var(--margen) 3rem; padding: calc(var(--cab-h) + clamp(1.75rem, 7svh, 5rem)) var(--margen) 3rem; }
.hero-centro { display: grid; justify-items: center; text-align: center; color: var(--porcelain); }
.hero-puente { width: clamp(128px, 15.5vw, 244px); height: auto; margin-bottom: clamp(1.3rem, 3.2vh, 2.5rem); margin-bottom: clamp(1.3rem, 3.2svh, 2.5rem); filter: drop-shadow(0 2px 22px rgba(3, 10, 34, 0.4)); }
.hero-nombre {
  font-size: var(--t-nombre);
  line-height: 1;
  letter-spacing: 0.14em;
  padding-left: 0.14em;                 /* compensa el tracking del último glifo: centrado real */
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 44px rgba(3, 10, 34, 0.35);
}
.hero-zh {
  margin-top: clamp(1rem, 2.5vh, 1.8rem); margin-top: clamp(1rem, 2.5svh, 1.8rem);
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: 0.66em;
  padding-left: 0.66em;
  text-shadow: var(--sombra-texto);
}
/* la frase: misma letra fina de siempre, un punto más grande y con sombra propia para leerse sobre el plato */
.hero-linea {
  margin-top: clamp(0.95rem, 2.2vh, 1.6rem); margin-top: clamp(0.95rem, 2.2svh, 1.6rem);
  max-width: 31ch;
  font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.55rem);
  line-height: 1.5;
  letter-spacing: 0.035em;
  text-shadow: 0 1px 2px rgba(3, 10, 34, 0.6), 0 2px 26px rgba(3, 10, 34, 0.75);
}

/* hero en MÓVIL de pie (no en tablet): el bloque de texto sube y se compacta para no pisar el plato del vídeo vertical */
@media (max-width: 600px) and (orientation: portrait) {
  .hero { padding-top: calc(var(--cab-h) + 0.9rem); }
  .hero-puente { width: clamp(112px, 30vw, 150px); margin-bottom: 1rem; }
  .hero-zh { margin-top: 0.8rem; }
  .hero-linea { margin-top: 0.65rem; font-size: 1.05rem; line-height: 1.45; max-width: 26ch; }
}
/* tablet de pie: el vídeo vertical deja mucho aire arriba; el bloque puede ser generoso */
@media (min-width: 601px) and (max-width: 899px) and (orientation: portrait) {
  .hero-puente { width: 200px; }
  .hero-linea { font-size: 1.4rem; }
}
/* móvil TUMBADO: poca altura. El rótulo se contiene y la frase se queda fuera para dejar ver el plato */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-top: calc(var(--cab-h) + 0.25rem); }
  .hero-puente { width: 84px; margin-bottom: 0.6rem; }
  .hero-nombre { font-size: clamp(2rem, 7vw, 3.6rem); }
  .hero-zh { margin-top: 0.5rem; font-size: 1rem; }
  .hero-linea { display: none; }
}

/* ══════════ RESPIROS · aire entre vídeos ══════════ */
.respiro { background: var(--midnight); border-block: 1px solid var(--linea); }
.respiro-marco { width: min(100%, 980px); margin-inline: auto; padding: clamp(4.5rem, 9vw, 8.5rem) var(--margen); display: grid; justify-items: center; text-align: center; }
.origen-par { width: clamp(84px, 8vw, 118px); margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.koi-par { width: 100%; height: auto; }
.origen .versal { color: var(--tinta-tenue); }
.origen .versal [lang="zh-Hans"] { font-family: var(--sans); letter-spacing: 0.34em; font-size: 1.1em; }
.origen-frase {
  margin-top: clamp(1.1rem, 2.2vw, 1.75rem);
  font-size: clamp(1.55rem, 1.1rem + 2vw, 2.9rem);
  line-height: 1.26;
  letter-spacing: -0.008em;
  max-width: 24ch;
}

.cinta-servicio { padding: clamp(3.5rem, 7vw, 6.5rem) var(--margen); display: grid; justify-items: center; }
.servicio { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.9rem clamp(1.5rem, 4vw, 3.5rem); font-family: var(--serif); font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.1; letter-spacing: -0.01em; text-align: center; }
.servicio i { width: clamp(2rem, 6vw, 5.5rem); height: 1px; background: var(--linea-fuerte); }
@media (max-width: 560px) { .servicio { flex-direction: column; } .servicio i { width: 2.5rem; } }

/* ══════════ 2 · LA CARTA ══════════ */
.carta { place-items: center; padding: calc(var(--cab-h) + 2rem) var(--margen) 4rem; }
.carta-centro { display: grid; justify-items: center; text-align: center; }
.carta-centro .versal { font-size: 0.875rem; text-shadow: var(--sombra-texto); padding-left: 0.3em; }
/* El juego de pesos: versalita mínima · palabra enorme · chino fino · sello */
.carta-palabra {
  font-size: var(--t-palabra);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-top: clamp(0.75rem, 2vh, 1.5rem); margin-top: clamp(0.75rem, 2svh, 1.5rem);
  text-shadow: 0 4px 70px rgba(3, 10, 34, 0.5);
}
.carta-zh {
  margin-top: clamp(0.6rem, 1.6vh, 1.2rem); margin-top: clamp(0.6rem, 1.6svh, 1.2rem);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2.4rem);
  letter-spacing: 0.9em;
  padding-left: 0.9em;
  text-shadow: var(--sombra-texto);
}
html[lang^="zh"] .carta-zh { display: none; }
.carta-centro .sello { margin-top: clamp(2.25rem, 5.5vh, 4rem); margin-top: clamp(2.25rem, 5.5svh, 4rem); }

/* ══════════ 3 · RESERVAS · la puerta de luna ══════════ */
/* El cenital es el vídeo más claro (mantel y platos blancos): ninguna tinta de la
   paleta aguanta encima. El texto vive en una puerta Midnight SÓLIDA con el arco
   del puente, plantada en el suelo de la sección. El vídeo respira alrededor. */
.reservas { justify-items: center; align-items: end; padding: calc(var(--cab-h) + clamp(1.5rem, 5vh, 3.5rem)) var(--margen) 0; padding: calc(var(--cab-h) + clamp(1.5rem, 5svh, 3.5rem)) var(--margen) 0; }

.puerta {
  position: relative;
  width: min(100%, 640px);
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(4.5rem, 9vw, 6.75rem) clamp(1.75rem, 5vw, 4.5rem) clamp(2.75rem, 5vw, 4rem);
  background: var(--midnight);
  color: var(--porcelain);
  /* radios enormes: el navegador los reduce en proporción y sale un medio punto perfecto */
  border-radius: 9999px 9999px 0 0;
  box-shadow: 0 -30px 90px rgba(3, 10, 34, 0.35);
}
.puerta::before {
  content: '';
  position: absolute;
  inset: 12px 12px 0;
  border: 1px solid rgba(237, 241, 246, 0.2);
  border-bottom: 0;
  border-radius: 9999px 9999px 0 0;
  pointer-events: none;
}
.puerta-koi { height: clamp(52px, 5vw, 66px); width: auto; color: var(--porcelain); margin-bottom: clamp(1.4rem, 2.6vw, 2.1rem); }
.puerta-titulo { font-size: clamp(3rem, 1.9rem + 4.6vw, 5.75rem); line-height: 1; letter-spacing: -0.02em; }

.estado { display: block; margin-top: clamp(1.1rem, 2vw, 1.6rem); font-size: var(--t-cuerpo); color: var(--tinta-suave); }

.puerta .boton { margin-top: clamp(1.9rem, 3.4vw, 2.6rem); }
.puerta-tel { margin-top: 1.15rem; font-size: var(--t-menor); color: var(--tinta-tenue); }
.puerta-tel a { color: var(--porcelain); text-decoration: none; letter-spacing: 0.06em; border-bottom: 1px solid var(--linea-fuerte); padding-bottom: 1px; transition: border-color 0.3s; }
.puerta-tel a:hover { border-bottom-color: var(--porcelain); }

.puerta-horario { width: 100%; margin: clamp(2.25rem, 4vw, 3.25rem) 0 0; border-top: 1px solid var(--linea); }
.puerta-horario > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--linea); }
.puerta-horario > div:last-child { border-bottom: 0; padding-bottom: 0; }
.puerta-horario dt { font-family: var(--serif); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); text-align: left; }
.puerta-horario dd { margin: 0; font-size: var(--t-menor); color: var(--tinta-suave); font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.puerta-horario .cerrado dt, .puerta-horario .cerrado dd { color: var(--tinta-tenue); }

@media (max-width: 520px) {
  .puerta-horario > div { flex-direction: column; align-items: center; gap: 0.2rem; }
  .puerta-horario dt, .puerta-horario dd { text-align: center; }
  .puerta .boton { width: 100%; }
}

/* ══════════ 4 · RESEÑAS · una sola fila que se desliza ══════════ */
/* Marquee continuo: sin flechas, sin saltos de bloque. Lo mueve portada.js con
   transform (GPU); se frena suave al pasar el ratón y se puede arrastrar. */
.voces { background: var(--midnight); padding-block: clamp(3rem, 5.5vw, 5rem) clamp(3.25rem, 6vw, 5.5rem); overflow: hidden; }
.voces-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding-inline: var(--margen); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.voces-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: inherit; letter-spacing: 0; }
.voces-nota { font-size: clamp(2.2rem, 1.7rem + 2vw, 3.2rem); line-height: 1; font-variant-numeric: lining-nums; }
.voces-sub { font-family: var(--serif); font-size: var(--t-versal); letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-tenue); }
/* WCAG 2.2.2: todo lo que se mueve solo más de 5 s se tiene que poder parar. Discreto, pero está. */
.voces-pausa { flex: none; font-family: var(--serif); font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-tenue); padding: 0.5rem 0; border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.voces-pausa:hover, .voces-pausa[aria-pressed="true"] { color: var(--porcelain); border-bottom-color: var(--linea-fuerte); }

.voces-pista { overflow-x: clip; padding-block: 2.25rem; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.voces-pista.arrastrando { cursor: grabbing; }
.voces-cinta { display: flex; gap: clamp(1rem, 1.6vw, 1.5rem); width: max-content; padding-left: var(--margen); will-change: transform; }

/* Una carta de verdad: papel Porcelain, vertical, un punto ladeada, con su sombra sobre la mesa */
.voz {
  position: relative;      /* ancla los .solo-lector para que no escapen del recorte */
  flex: none;
  width: clamp(236px, 20vw, 292px);
  min-height: clamp(316px, 26vw, 372px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.4rem, 1.9vw, 1.85rem);
  background: var(--porcelain);
  color: var(--midnight);
  border-radius: 10px;
  box-shadow: 0 22px 44px -22px rgba(2, 8, 28, 0.85), 0 2px 0 rgba(255, 255, 255, 0.5) inset;
  transform: rotate(var(--giro, 0deg)) translateY(var(--caida, 0px));
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.voz:nth-child(4n+1) { --giro: -1.6deg; --caida: 6px; }
.voz:nth-child(4n+2) { --giro: 1.1deg;  --caida: -5px; }
.voz:nth-child(4n+3) { --giro: -0.6deg; --caida: 2px; }
.voz:nth-child(4n+4) { --giro: 1.7deg;  --caida: -2px; }
.voz:hover { transform: rotate(0deg) translateY(-10px) scale(1.02); box-shadow: 0 34px 56px -24px rgba(2, 8, 28, 0.9), 0 2px 0 rgba(255, 255, 255, 0.5) inset; }
.voz::before { content: '“'; font-family: var(--serif); font-size: 4.25rem; line-height: 0.72; color: var(--royal); height: 2.1rem; }
.voz blockquote { align-self: start; }
.voz blockquote p { font-family: var(--serif); font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.16rem); line-height: 1.44; }
.voz figcaption { display: grid; gap: 0.3rem; padding-top: 1rem; border-top: 1px solid rgba(8, 31, 92, 0.16); }
.voz-autor { font-size: var(--t-micro); font-weight: 400; letter-spacing: 0.05em; }
.voz-estrellas { font-size: 0.75rem; letter-spacing: 0.3em; color: var(--royal); }

/* sin movimiento: la fila se queda quieta y se recorre a mano */
@media (prefers-reduced-motion: reduce) {
  .voces-pista { overflow-x: auto; cursor: auto; touch-action: auto; scroll-snap-type: x proximity; }
  .voz { scroll-snap-align: start; }
  .voz[data-clon], .voces-pausa { display: none; }
}

/* ══════════ 5 · DÓNDE ESTAMOS ══════════ */
.lugar { place-items: center; padding: calc(var(--cab-h) + 2rem) var(--margen) 4rem; }
.lugar-centro { display: grid; justify-items: center; text-align: center; }
.lugar-centro .versal { font-size: 0.875rem; text-shadow: var(--sombra-texto); padding-left: 0.3em; }
.lugar-calle {
  margin-top: clamp(1rem, 2.4vh, 1.75rem); margin-top: clamp(1rem, 2.4svh, 1.75rem);
  font-size: clamp(2.5rem, 1rem + 6.6vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 70px rgba(3, 10, 34, 0.55);
}
.lugar-barrio {
  margin-top: clamp(0.9rem, 2vh, 1.5rem); margin-top: clamp(0.9rem, 2svh, 1.5rem);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.75rem);
  letter-spacing: 0.06em;
  text-shadow: var(--sombra-texto);
}
.lugar-centro .sello { margin-top: clamp(2.25rem, 5.5vh, 4rem); margin-top: clamp(2.25rem, 5.5svh, 4rem); }

/* ══════════ 6 · CONTACTO ══════════ */
.contacto-bloque { background: var(--midnight); border-top: 1px solid var(--linea); padding-block: var(--seccion); }
.contacto-marco {
  width: min(100%, 1240px);
  margin-inline: auto;
  padding-inline: var(--margen);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.75rem, 7vw, 7rem);
  align-items: center;
}
.contacto-a { display: grid; justify-items: start; gap: 1.4rem; }
.contacto-a h2 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.75rem); line-height: 1; letter-spacing: -0.02em; }
.contacto-frase { color: var(--tinta-suave); max-width: 30ch; }
.contacto-a .boton { margin-top: 0.75rem; }

.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 3vw, 3rem); margin: 0; border-top: 1px solid var(--linea); }
.contacto > div { padding-block: 1.25rem; border-bottom: 1px solid var(--linea); }
.contacto dt { font-family: var(--serif); font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-tenue); margin-bottom: 0.35rem; }
.contacto dt [lang="zh-Hans"] { font-family: var(--sans); letter-spacing: 0.1em; }
.contacto dd { margin: 0; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }
.contacto a { text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size 0.5s var(--ease); }
.contacto a:hover { background-size: 100% 1px; }

@media (max-width: 820px) { .contacto-marco { grid-template-columns: 1fr; } .contacto-a .boton { width: 100%; } }
@media (max-width: 420px) { .contacto { grid-template-columns: 1fr; } }

/* ══════════ 7 · PREGUNTAS FRECUENTES · abajo y en voz baja: están para quien busca y para Google ══════════ */
.faq { background: var(--midnight); border-top: 1px solid var(--linea); padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.faq-marco { width: min(100%, 1240px); margin-inline: auto; padding-inline: var(--margen); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq-titulo { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1.1; position: sticky; top: calc(var(--cab-h) + 2rem); }
.faq-lista { border-top: 1px solid var(--linea); }
.faq-item { border-bottom: 1px solid var(--linea); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1.2rem; cursor: pointer; font-family: var(--serif); font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.3; transition: color 0.3s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--sky); }
.faq-mas { position: relative; flex: none; width: 14px; height: 14px; }
.faq-mas::before, .faq-mas::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; transition: transform 0.45s var(--ease); }
.faq-mas::after { transform: rotate(90deg); }
.faq-item[open] .faq-mas::after { transform: rotate(0deg); }
.faq-item p { padding: 0 2.5rem 1.4rem 0; color: var(--tinta-suave); max-width: 68ch; }
@media (max-width: 820px) { .faq-marco { grid-template-columns: 1fr; } .faq-titulo { position: static; } }