/* ═══════════════════════════════════════════════════════════════════
   COMIDA CHINA CHUN GUANG · Maipú
   Dirección de arte: "lacado rojo y papel de arroz"
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Color */
  --papel:        #F7F3EC;
  --papel-hondo:  #EFE8DC;
  --tinta:        #1A1614;
  --tinta-suave:  #5C534C;
  --rojo:         #C1272D;
  --rojo-hondo:   #7A1518;
  --oro:          #C9A227;
  /* El oro de marca da 4,46:1 sobre el rojo profundo, justo bajo el mínimo
     AA. Para texto chico sobre rojo se usa esta variante (5,35:1). */
  --oro-claro:    #D9B23C;
  --jade:         #3E6B5A;

  --linea:        rgba(26, 22, 20, .18);
  --linea-tenue:  rgba(26, 22, 20, .09);
  --linea-oro:    rgba(201, 162, 39, .45);

  /* Tipografía */
  --display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --texto:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Los caracteres 春光: Fraunces no los tiene, así que sin esto cada
     sistema los dibuja con una serif distinta. */
  --display-cjk: "Noto Serif SC", var(--display);

  /* Ritmo */
  --ancho:     1240px;
  --margen:    clamp(1.25rem, 5vw, 4rem);
  --seccion:   clamp(5rem, 11vw, 10rem);
  --nav-alto:  76px;

  /* Movimiento */
  --curva:  cubic-bezier(0.16, 1, 0.3, 1);
  --rapido: 240ms var(--curva);
  --medio:  400ms var(--curva);
  --lento:  500ms var(--curva);
}

/* ── 2. RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-alto) + 4.25rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grano de papel muy sutil sobre todo el documento */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 10000;
  padding: .75rem 1.25rem;
  background: var(--rojo);
  color: var(--papel);
  border-radius: 4px;
  transform: translateY(-150%);
  transition: transform var(--rapido);
}
.saltar:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 3. PRIMITIVAS ──────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.titulo {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: .98;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.titulo--seccion {
  font-size: clamp(2.75rem, 7.4vw, 6.5rem);
  margin-block: .5rem 2.5rem;
}

.titulo--claro { color: var(--papel); }

/* Revelado por líneas con máscara.
   El estado oculto vive bajo .js: sin JavaScript el texto se ve normal. */
.linea { display: block; overflow: hidden; padding-bottom: .06em; }
.js .linea > span {
  display: block;
  transform: translateY(105%);
  transition: transform 780ms var(--curva);
  transition-delay: calc(var(--l, 0) * 90ms);
}
.visible .linea > span, .linea.visible > span { transform: translateY(0); }

.sobretitulo {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.sobretitulo--oro { color: var(--oro); }

.estrella { color: var(--oro); }

/* Filete en oro con rombo al centro */
.filete {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: 1.1rem 2.25rem;
}
.filete::before, .filete::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--linea-oro), transparent);
}
.filete__rombo {
  width: 7px; height: 7px;
  flex: none;
  background: var(--oro);
  transform: rotate(45deg);
  opacity: .8;
}

.enlace-oro {
  display: inline-block;
  margin-top: 1.75rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--linea-oro);
  transition: border-color var(--rapido), color var(--rapido);
}
.enlace-oro:hover { border-color: var(--oro); color: var(--rojo); }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .8rem 1.6rem;
  border-radius: 4px;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .06em;
  border: 1px solid transparent;
  transition: background var(--rapido), color var(--rapido),
              border-color var(--rapido), transform var(--rapido);
}
.btn--grande { min-height: 54px; padding: 1rem 2.1rem; font-size: .95rem; }

.btn--rojo { background: var(--rojo); color: #fff; }
.btn--rojo:hover { background: var(--rojo-hondo); transform: translateY(-2px); }

.btn--linea {
  border-color: currentColor;
  color: var(--papel);
  background: transparent;
}
.btn--linea:hover { background: var(--papel); color: var(--tinta); transform: translateY(-2px); }

.visitanos__acciones .btn--linea { color: var(--tinta); }
.visitanos__acciones .btn--linea:hover { background: var(--tinta); color: var(--papel); }

/* Entrada por scroll (sólo con JS, ver .linea arriba) */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--lento), transform var(--lento);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .reveal.visible { opacity: 1; transform: none; }

/* Marca de agua 春光 (recorte del logo real, coloreado por CSS) */
.marca-hanzi {
  position: absolute;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask: url("assets/logo-hanzi.svg") center / contain no-repeat;
          mask: url("assets/logo-hanzi.svg") center / contain no-repeat;
}

/* Placeholder de fotografía pendiente */
.foto, .hero__foto {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--papel-hondo), #E3D9C8);
  border-radius: 6px;
}
.foto img, .hero__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--medio);
}
.foto:hover img { transform: scale(1.04); }

.foto.pendiente::after, .hero__foto.pendiente::after {
  content: "Foto pendiente · " attr(data-foto);
  position: absolute;
  inset: auto 1.25rem 1.25rem 1.25rem;
  font-size: .68rem;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-top: 1px solid var(--linea);
  padding-top: .65rem;
}
.foto.pendiente::before, .hero__foto.pendiente::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(26, 22, 20, .07);
  -webkit-mask: url("assets/logo-emblema.svg") center / 34% no-repeat;
          mask: url("assets/logo-emblema.svg") center / 34% no-repeat;
}

/* ── 4. NAVBAR ──────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-alto);
  display: flex;
  align-items: center;
  color: var(--papel);
  border-bottom: 1px solid transparent;
  transition: background var(--medio), color var(--medio),
              border-color var(--medio), backdrop-filter var(--medio);
}
.nav.solido {
  background: rgba(247, 243, 236, .93);
  backdrop-filter: blur(10px);
  color: var(--tinta);
  border-bottom-color: var(--linea-tenue);
}

.nav__interior {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.nav__logo { display: flex; align-items: center; gap: .7rem; }
.nav__emblema { width: 36px; height: 36px; color: currentColor; flex: none; }
.nav.solido .nav__emblema { color: var(--rojo); }
.nav__nombre { display: flex; flex-direction: column; line-height: 1.05; }
.nav__hanzi { font-family: var(--display-cjk); font-size: 1.1rem; letter-spacing: .1em; }
.nav__latin {
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .72;
}

.nav__links { display: flex; gap: clamp(1rem, 2.2vw, 2.1rem); justify-content: center; }
.nav__links a {
  font-size: .84rem;
  letter-spacing: .04em;
  padding: .35rem 0;
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--rapido);
}
.nav__links a:hover::after { transform: scaleX(1); }

/* "Carta" es el destino que más nos interesa que se note en la nav.
   Sobre el hero (fondo rojo oscuro) se resalta en oro; ya con la nav
   sólida (fondo crema) pasa a rojo, que ahí sí contrasta bien. */
.nav__links-destacado { color: var(--oro-claro); font-weight: 600; }
.nav.solido .nav__links-destacado { color: var(--rojo); }
.nav__links-destacado::after { background: currentColor; transform: scaleX(1); }

.nav__cta { justify-self: end; }
.nav__toggle { display: none; }

/* ── 5. HERO ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-alto) + 3rem) 0 clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
  background: var(--rojo-hondo);
  color: var(--papel);
}

.hero__foto {
  position: absolute;
  inset: -8% 0 0 0;
  height: 116%;
  border-radius: 0;
  background: radial-gradient(120% 90% at 70% 20%, #A02026 0%, var(--rojo-hondo) 45%, #3A0C0E 100%);
  will-change: transform;
}
.hero__foto.pendiente::before { background-color: rgba(247, 243, 236, .07); }
.hero__foto.pendiente::after {
  color: rgba(247, 243, 236, .5);
  border-top-color: rgba(247, 243, 236, .22);
  inset: auto 2rem 1.5rem auto;
  max-width: 30ch;
  text-align: right;
}

.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(26, 12, 12, .92) 0%, rgba(26, 12, 12, .5) 38%, rgba(26, 12, 12, .28) 70%, rgba(26, 12, 12, .55) 100%);
}

.hero__hanzi {
  position: absolute;
  right: -4%;
  top: 8%;
  width: min(52vw, 620px);
  aspect-ratio: 1158 / 534;
  opacity: .06;
  background-color: var(--papel);
  -webkit-mask: url("assets/logo-hanzi.svg") center / contain no-repeat;
          mask: url("assets/logo-hanzi.svg") center / contain no-repeat;
}

.hero__contenido {
  position: relative;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.hero__titulo {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.9rem, 8.6vw, 7.5rem);
  line-height: .96;
  letter-spacing: -.028em;
  margin: .6rem 0 1.5rem;
  max-width: 15ch;
}

.hero__bajada {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: rgba(247, 243, 236, .82);
  max-width: 46ch;
  font-weight: 300;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.25rem; }

.hero__pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.75rem;
  font-size: .82rem;
  letter-spacing: .05em;
  color: rgba(247, 243, 236, .74);
}
.hero__sep { width: 26px; height: 1px; background: var(--linea-oro); }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  width: 1px;
  height: 46px;
  background: rgba(247, 243, 236, .22);
  overflow: hidden;
}
.hero__scroll span {
  position: absolute;
  inset: 0;
  background: var(--oro);
  animation: desliza 2.6s var(--curva) infinite;
}
@keyframes desliza {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ── 6. BARRA DE DATOS ──────────────────────────────────────────── */
.datos { background: var(--tinta); color: var(--papel); }
.datos__lista {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 1.35rem var(--margen);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.datos__lista li {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-inline: .5rem;
}
.datos__lista li + li { border-left: 1px solid var(--linea-oro); }
.datos__lista a { border-bottom: 1px solid rgba(247, 243, 236, .35); transition: border-color var(--rapido); }
.datos__lista a:hover { border-color: var(--oro-claro); }

/* ── 6b. LLAMADO A LA CARTA ─────────────────────────────────────── */
.verla { background: var(--rojo); color: var(--papel); overflow: hidden; }
.verla__interior {
  padding-block: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.5rem;
}
.verla__texto {
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -.01em;
}
.verla__hanzi {
  font-family: var(--display-cjk);
  position: absolute;
  left: -.15em; top: 50%;
  transform: translate(-100%, -50%);
  font-size: 2.6em;
  opacity: .14;
  line-height: 1;
  display: none;
}
.verla .btn--rojo { background: var(--tinta); }
.verla .btn--rojo:hover { background: #000; }

@media (min-width: 640px) {
  .verla__hanzi { display: inline; }
  .verla__texto { padding-left: 1.4em; }
}

/* ── 7. NOSOTROS ────────────────────────────────────────────────── */
.casa {
  position: relative;
  padding-block: var(--seccion);
  overflow: hidden;
}
.casa__marca {
  position: absolute;
  left: -6%;
  top: 12%;
  width: min(74vw, 940px);
  aspect-ratio: 1158 / 534;
  opacity: .04;
  background-color: var(--tinta);
  -webkit-mask: url("assets/logo-hanzi.svg") center / contain no-repeat;
          mask: url("assets/logo-hanzi.svg") center / contain no-repeat;
  pointer-events: none;
}

.casa__grilla {
  position: relative;
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.casa__parrafos { display: grid; gap: 1.15rem; max-width: 52ch; color: var(--tinta-suave); }

.casa__fotos { position: relative; padding-bottom: 5.5rem; }
.foto--alta { aspect-ratio: 3 / 4; }
.foto--baja {
  position: absolute;
  right: -8%;
  bottom: 0;
  width: 62%;
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 40px -28px rgba(26, 22, 20, .5);
}

/* ── 8. DESTACADOS ──────────────────────────────────────────────── */
.destacados { padding-block: 0 var(--seccion); }
.destacados__lista { display: grid; gap: clamp(3rem, 7vw, 6rem); }

.destacado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.destacado:nth-child(even) .destacado__media { order: 2; }
.destacado--ancho { grid-template-columns: 1.35fr 1fr; }
.destacado--angosto { grid-template-columns: 1fr 1.35fr; }

.destacado__media { aspect-ratio: 4 / 3; }
.destacado--ancho .destacado__media { aspect-ratio: 16 / 10; }

.destacado__cuerpo { max-width: 40ch; }
.destacado__etiqueta {
  display: inline-block;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--jade);
  border: 1px solid rgba(62, 107, 90, .35);
  border-radius: 2px;
  padding: .3rem .6rem;
  margin-bottom: 1.1rem;
}
.destacado__nombre {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.destacado__desc { margin-top: .8rem; color: var(--tinta-suave); }
.destacado__precio {
  margin-top: 1.4rem;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
}

/* ── 9. CARTA ───────────────────────────────────────────────────── */
.carta { padding-block: var(--seccion) clamp(3rem, 6vw, 5rem); background: var(--papel); }

.carta__nav {
  position: sticky;
  top: var(--nav-alto);
  z-index: 60;
  background: rgba(247, 243, 236, .94);
  backdrop-filter: blur(10px);
  border-block: 1px solid var(--linea-tenue);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.carta__nav-pista {
  position: relative;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.carta__nav-pista::-webkit-scrollbar { display: none; }

.carta__nav-pista a {
  flex: none;
  padding: 1rem 0;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
  transition: color var(--rapido);
}
.carta__nav-pista a:hover { color: var(--tinta); }
.carta__nav-pista a.activo { color: var(--rojo); }

.carta__nav-indicador {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--rojo);
  transition: transform var(--medio), width var(--medio);
  will-change: transform;
}

.carta__grupo { margin-bottom: clamp(3rem, 7vw, 5.5rem); scroll-margin-top: calc(var(--nav-alto) + 5rem); }
.carta__grupo-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  letter-spacing: -.02em;
  line-height: 1;
}

.carta__platos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2.5rem, 6vw, 5.5rem);
  row-gap: 1.6rem;
}

.plato { break-inside: avoid; }
.plato__linea { display: flex; align-items: baseline; gap: .55rem; }
.plato__nombre { font-weight: 500; }
.plato__unidades {
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--tinta-suave);
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: .1rem .35rem;
  margin-left: .45rem;
  white-space: nowrap;
}
.plato__guia {
  flex: 1;
  min-width: 1.5rem;
  height: 0;
  border-bottom: 1px dotted var(--linea);
  transform: translateY(-.3em);
}
.plato__precio {
  font-family: var(--display);
  font-size: 1.06rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plato__desc {
  margin-top: .18rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 46ch;
}
.plato__aji {
  display: inline-block;
  margin-top: .4rem;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jade);
}

.carta__nota {
  font-size: .8rem;
  color: var(--tinta-suave);
  border-top: 1px solid var(--linea-tenue);
  padding-top: 1.5rem;
}

/* ── 10. COLACIONES ─────────────────────────────────────────────── */
.colaciones { padding-block: var(--seccion); background: var(--papel-hondo); }
.colaciones__intro { max-width: 50ch; color: var(--tinta-suave); margin-bottom: 2.5rem; }

.tabla-colaciones { width: 100%; border-collapse: collapse; }
.tabla-colaciones thead th {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  text-align: right;
  padding: 0 0 .9rem;
  border-bottom: 1px solid var(--linea);
}
.tabla-colaciones thead th:first-child { text-align: left; }
.tabla-colaciones tbody td {
  padding: .95rem 0;
  border-bottom: 1px solid var(--linea-tenue);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--display);
  font-size: 1.02rem;
  transition: background var(--rapido);
}
.tabla-colaciones tbody td:first-child {
  text-align: left;
  font-family: var(--texto);
  font-size: 1rem;
  font-weight: 500;
  padding-left: .6rem;
}
.tabla-colaciones tbody td:last-child { padding-right: .6rem; }
.tabla-colaciones tbody tr:hover td { background: rgba(26, 22, 20, .045); }

.colaciones__cards { display: none; }

/* ── 11. MENÚS FAMILIARES ───────────────────────────────────────── */
.menus {
  position: relative;
  padding-block: var(--seccion);
  background: var(--rojo-hondo);
  color: var(--papel);
  overflow: hidden;
}
.menus .sobretitulo { color: var(--oro-claro); }
.menus__marca {
  position: absolute;
  right: -10%;
  bottom: -12%;
  width: min(70vw, 820px);
  aspect-ratio: 1;
  opacity: .05;
  background-color: var(--papel);
  -webkit-mask: url("assets/logo-emblema.svg") center / contain no-repeat;
          mask: url("assets/logo-emblema.svg") center / contain no-repeat;
  pointer-events: none;
}
.menus .contenedor { position: relative; }
.menus__intro { max-width: 50ch; color: rgba(247, 243, 236, .76); margin-bottom: 3rem; }

.menus__grupo { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.menus__grupo-titulo {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-claro);
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(201, 162, 39, .28);
  margin-bottom: 1.75rem;
}
.menus__par { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }

.menu-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(26, 12, 12, .22);
  border-radius: 6px;
}
.menu-card__borde {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.menu-card__borde rect {
  fill: none;
  stroke: var(--oro);
  stroke-width: 1;
  opacity: .55;
  stroke-dasharray: var(--largo, 1200);
  stroke-dashoffset: var(--largo, 1200);
  transition: stroke-dashoffset 1200ms var(--curva);
}
.menu-card.visible .menu-card__borde rect { stroke-dashoffset: 0; }

.menu-card__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(201, 162, 39, .22);
}
.menu-card__codigo {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, .68);
}
.menu-card__precio {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.menu-card__incluye { display: grid; gap: .55rem; }
.menu-card__incluye li {
  display: flex;
  gap: .7rem;
  font-size: .95rem;
  color: rgba(247, 243, 236, .88);
}
.menu-card__cant {
  flex: none;
  min-width: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--oro);
  font-weight: 500;
}

/* ── 11b. PROMOCIONES DE SUSHI ──────────────────────────────────── */
.sushi { padding-block: var(--seccion); background: var(--papel-hondo); }
.sushi__intro { max-width: 50ch; color: var(--tinta-suave); margin-bottom: 3rem; }

.sushi__grilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}

.sushi-card {
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  background: var(--papel);
  border: 1px solid var(--linea-tenue);
  border-radius: 6px;
  transition: border-color var(--rapido);
}
.sushi-card:hover { border-color: var(--linea-oro); }

.sushi-card__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--linea-tenue);
}
.sushi-card__piezas {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1;
  letter-spacing: -.015em;
}
.sushi-card__piezas em {
  font-style: normal;
  font-family: var(--texto);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jade);
  vertical-align: .35em;
  margin-left: .15rem;
}
.sushi-card__precio {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.sushi-card__incluye { display: grid; gap: .5rem; }
.sushi-card__incluye li {
  display: flex;
  gap: .7rem;
  font-size: .93rem;
  color: var(--tinta-suave);
}
.sushi-card__cant {
  flex: none;
  min-width: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--tinta);
}

/* Sushi por unidad: mismo lenguaje visual que la carta principal
   (guía punteada nombre→precio) para que se lea como parte del mismo
   sitio, aunque viene de una página distinta de la carta impresa. */
.sushi__rollos { padding-top: clamp(3rem, 6vw, 5rem); }
.sushi__rollos-titulo {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  margin-block: .5rem 1rem;
}

.sushi__categoria { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sushi__categoria-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -.015em;
}
.sushi__categoria-envoltura {
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--jade);
  margin-top: .2rem;
  margin-bottom: 1.5rem;
}

.sushi__rolls-lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2.5rem, 6vw, 5.5rem);
  row-gap: 1.4rem;
}

.roll__linea { display: flex; align-items: baseline; gap: .55rem; }
.roll__numero {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  font-size: .85rem;
  min-width: 1.4rem;
}
.roll__nombre { font-weight: 500; }
.roll__guia {
  flex: 1;
  min-width: 1.5rem;
  height: 0;
  border-bottom: 1px dotted var(--linea);
  transform: translateY(-.3em);
}
.roll__precio {
  font-family: var(--display);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.roll__desc {
  margin-top: .15rem;
  margin-left: 1.95rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* ── 12. RESEÑAS ────────────────────────────────────────────────── */
.resenas { padding-block: var(--seccion); }
.resenas__lista { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

.resena {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-top: 2rem;
  border-top: 1px solid var(--linea-tenue);
}
.resena__num {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--oro);
  letter-spacing: .1em;
  padding-top: .5rem;
}
.resena__frase {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.45rem, 3.4vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -.018em;
  text-wrap: balance;
  max-width: 24ch;
}
.resena__tema {
  grid-column: 2;
  margin-top: 1rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.resenas__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
}
.resenas__nota { font-size: .78rem; color: var(--tinta-suave); font-style: italic; }
.resenas__marcador { font-size: .95rem; letter-spacing: .04em; }

/* ── 13. VISÍTANOS ──────────────────────────────────────────────── */
.visitanos { padding-block: var(--seccion); background: var(--papel-hondo); }
.visitanos__grilla {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.ficha { display: grid; gap: 0; }
.ficha__fila {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--linea-tenue);
}
.ficha__fila:last-child { border-bottom: 1px solid var(--linea-tenue); }
.ficha dt {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-top: .3rem;
}
.ficha dd { margin: 0; }
.ficha a { border-bottom: 1px solid var(--linea); transition: border-color var(--rapido), color var(--rapido); }
.ficha a:hover { color: var(--rojo); border-color: var(--rojo); }

.telefono {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  border-bottom-width: 2px !important;
}

.ficha__whatsapp {
  display: inline-block;
  margin-left: .6rem;
  font-size: .82rem;
  color: var(--jade);
  border-bottom-color: rgba(62, 107, 90, .35);
}
.ficha__whatsapp:hover { color: var(--rojo); border-color: var(--rojo); }

.visitanos__acciones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

.visitanos__mapa {
  aspect-ratio: 4 / 3.4;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--linea);
}
.visitanos__mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(.38) saturate(.78) hue-rotate(-12deg) contrast(1.04) brightness(1.02);
  transition: filter var(--medio);
}
.visitanos__mapa:hover iframe { filter: sepia(.12) saturate(.95) contrast(1.02); }

/* ── 14. PIE ────────────────────────────────────────────────────── */
.pie { background: var(--tinta); color: var(--papel); padding-block: clamp(3.5rem, 8vw, 6rem) 2rem; }
.pie__grilla {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.pie__emblema { width: 72px; height: 72px; color: var(--papel); opacity: .9; }
.pie__hanzi {
  font-family: var(--display-cjk);
  font-size: 2rem;
  letter-spacing: .14em;
  margin-top: 1rem;
}
.pie__latin {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, .6);
  margin-top: .35rem;
}

.pie__nav { display: grid; gap: .7rem; justify-self: center; }
.pie__nav a { font-size: .88rem; color: rgba(247, 243, 236, .8); transition: color var(--rapido); }
.pie__nav a:hover { color: var(--oro); }

.pie__datos { display: grid; gap: .45rem; font-style: normal; text-align: right; font-size: .88rem; color: rgba(247, 243, 236, .72); }
.pie__telefono {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--papel);
  font-variant-numeric: tabular-nums;
  margin-bottom: .3rem;
}
.pie__telefono:hover { color: var(--oro); }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 243, 236, .12);
  font-size: .74rem;
  color: rgba(247, 243, 236, .5);
}
.pie__credito { color: rgba(247, 243, 236, .5); transition: color var(--rapido); }
.pie__credito:hover { color: var(--oro-claro); }

/* ── 15. BARRA MÓVIL ────────────────────────────────────────────── */
.llamar-movil { display: none; }

/* ── 16. RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .casa__grilla { grid-template-columns: 1fr; }
  .casa__fotos { max-width: 460px; }
  .visitanos__grilla { grid-template-columns: 1fr; }
  .destacado,
  .destacado--ancho,
  .destacado--angosto { grid-template-columns: 1fr; }
  .destacado:nth-child(even) .destacado__media { order: 0; }
  .pie__grilla { grid-template-columns: 1fr 1fr; }
  .pie__datos { text-align: left; grid-column: 2; }
  .pie__nav { justify-self: start; grid-row: 2; }
}

@media (max-width: 860px) {
  :root { --nav-alto: 64px; }

  /* En el hero, sobre la foto, el texto chico quedaba difícil de leer:
     letra muy pequeña y semitransparente contra una foto con mucho
     detalle. Se agranda y se sube la opacidad solo acá, sin tocar el
     tamaño del mismo texto en el resto del sitio (ahí sobre fondo
     crema ya se lee bien). */
  .hero__contenido .sobretitulo {
    font-size: .82rem;
    letter-spacing: .14em;
  }
  .hero__bajada {
    font-size: 1.1rem;
    color: rgba(247, 243, 236, .94);
  }
  .hero__pie {
    font-size: .92rem;
    color: rgba(247, 243, 236, .9);
  }

  .nav__interior { grid-template-columns: 1fr auto; }
  .nav__cta { display: none; }
  .nav__toggle {
    display: grid;
    gap: 6px;
    width: 44px; height: 44px;
    place-content: center;
    justify-self: end;
  }
  .nav__toggle span {
    display: block;
    width: 22px; height: 1.5px;
    background: currentColor;
    transition: transform var(--rapido), opacity var(--rapido);
  }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

  /* OJO: nada de backdrop-filter en la barra dentro de este breakpoint.
     Un backdrop-filter (incluso blur(0px), o a medio camino de una
     transición) convierte a .nav en "containing block" de sus hijos
     position:fixed. Como .nav mide 64px, el panel del menú colapsaba
     a 16px de alto: el fondo desaparecía y los links quedaban
     desbordados encima del hero. El blur se mantiene en escritorio,
     donde el menú no es un panel fijo y no hay riesgo. */
  .nav.solido { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* El panel es opaco siempre — nunca se desvanece con opacity, porque
     eso deja ver el fondo (las llamas del hero) transparentándose por
     detrás del texto mientras dura la animación. Solo se desliza.
     Fondo rojo oscuro (no crema) a propósito: se lee como una pantalla
     de marca hecha a propósito, no como un dropdown genérico, y queda
     lejos de cualquier confusión con el naranja de las llamas del hero. */
  .nav__links {
    position: fixed;
    inset: var(--nav-alto) 0 0 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 1rem;
    background: var(--rojo-hondo);
    color: var(--papel);
    transform: translateY(-16px);
    visibility: hidden;
    transition: transform var(--medio), visibility 0s var(--medio);
  }
  .nav__links.abierto {
    transform: none;
    visibility: visible;
    transition: transform var(--medio), visibility 0s;
  }
  .nav__links a {
    font-family: var(--display);
    font-size: 1.7rem;
    letter-spacing: 0;
    text-transform: none;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    padding: 1.15rem 1.5rem;
    border-top: 1px solid rgba(247, 243, 236, .14);
    text-align: left;
  }
  .nav__links a:last-child { border-bottom: 1px solid rgba(247, 243, 236, .14); }
  .nav__links a::after { display: none; }   /* el subrayado de hover es un detalle de escritorio */
  /* Gana por especificidad + orden de aparición a ".nav.solido .nav__links-destacado"
     (misma especificidad, pero esta regla va después en el archivo): así "Carta"
     siempre se ve en oro dentro del panel, sin importar si la nav ya está sólida. */
  .nav__links.abierto .nav__links-destacado { color: var(--oro-claro); }

  .datos__lista { grid-template-columns: repeat(2, 1fr); gap: .9rem 0; }
  .datos__lista li:nth-child(odd) { border-left: 0; }
  .datos__lista li:nth-child(3) { border-left: 0; }
  .datos__lista li:nth-child(-n+2) { padding-bottom: .9rem; border-bottom: 1px solid var(--linea-oro); }

  .carta__platos { grid-template-columns: 1fr; row-gap: 1.35rem; }
  .menus__par { grid-template-columns: 1fr; }
  .sushi__grilla { grid-template-columns: 1fr; }
  .sushi__rolls-lista { grid-template-columns: 1fr; row-gap: 1.1rem; }

  .resena { grid-template-columns: 1fr; gap: .5rem; }
  .resena__tema { grid-column: 1; }
  .resena__frase { max-width: none; }

  .foto--baja { right: 0; width: 55%; }

  .ficha__fila { grid-template-columns: 1fr; gap: .25rem; }

  .pie__grilla { grid-template-columns: 1fr; }
  .pie__nav, .pie__datos { grid-column: 1; grid-row: auto; text-align: left; }

  /* Colaciones: tabla → cards */
  .tabla-colaciones { display: none; }
  .colaciones__cards { display: grid; gap: .9rem; }
  .colacion-card {
    padding: 1.1rem 1.15rem;
    background: var(--papel);
    border: 1px solid var(--linea-tenue);
    border-radius: 5px;
  }
  .colacion-card__nombre { font-weight: 500; margin-bottom: .85rem; }
  .colacion-card__precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .colacion-card__precio { text-align: center; }
  .colacion-card__precio dt {
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin-bottom: .2rem;
  }
  .colacion-card__precio dd {
    margin: 0;
    font-family: var(--display);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
  }

  /* Botón de llamada fijo */
  .llamar-movil {
    position: fixed;
    left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 54px;
    background: var(--rojo);
    color: #fff;
    border-radius: 5px;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .04em;
    box-shadow: 0 10px 28px -12px rgba(122, 21, 24, .7);
    animation: pulso 6s ease-in-out infinite;
  }
  .llamar-movil__icono svg { width: 19px; height: 19px; }
  @keyframes pulso {
    0%, 88%, 100% { transform: scale(1); }
    92%           { transform: scale(1.028); }
    96%           { transform: scale(1); }
  }

  body { padding-bottom: 4.75rem; }
  .pie__legal { margin-bottom: 1rem; }

  /* Áreas táctiles de 44px.
     Donde agrandar el elemento rompería el diseño (el teléfono grande,
     el enlace con filete en oro), se extiende sólo la zona de toque con
     un pseudo-elemento invisible. */
  .nav__logo { min-height: 44px; }

  .pie__nav { gap: .25rem; }
  .pie__nav a { padding-block: .65rem; }
  .pie__telefono { padding-block: .1rem; }

  .enlace-oro,
  .ficha dd a { position: relative; }
  .enlace-oro::after,
  .ficha dd a::after {
    content: "";
    position: absolute;
    inset: -12px -6px;
  }
  .telefono::after { inset: -5px -6px; }
}

@media (max-width: 480px) {
  .hero__acciones .btn { flex: 1 1 100%; }
  .foto--baja { position: static; width: 100%; margin-top: 1rem; }
  .casa__fotos { padding-bottom: 0; }
}

/* ── 17. MOVIMIENTO REDUCIDO ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .linea > span { transform: none; }
  .menu-card__borde rect { stroke-dashoffset: 0; }
  .llamar-movil { animation: none; }
  .hero__foto { transform: none !important; }
}

/* ── 18. IMPRESIÓN ──────────────────────────────────────────────── */
@media print {
  .nav, .llamar-movil, .hero__scroll, .visitanos__mapa, .carta__nav { display: none !important; }
  body { background: #fff; }
  .reveal, .linea > span { opacity: 1 !important; transform: none !important; }
  .menus { background: #fff; color: #000; }
  .menus .titulo--claro, .menu-card__incluye li { color: #000; }
}