/* ============================================================
   Sky Lounge Aurora — capa bespoke sobre el motor base
   Solo afecta a este tenant: se carga después de css/styles.css
   y del <style id="brand">, así que gana a ambos.

   DEMO comercial de 27menu. El local existe de verdad (bar del piso 45
   del Keio Plaza Hotel, Shinjuku, Tokio) y esta carta NO es la suya
   oficial: de ahí el sello "demo" del final de este fichero.

   Referencias de marca, leídas de su propio CSS
   (https://www.keioplaza.co.jp/assets/css/style.css):
   · #162554  azul marino corporativo — 154 usos, el color dominante
   · #867439 / #8e7244  oro viejo — 88 + 51 usos, todos los acentos
   · #dec190 / #d0b78d  oro claro, para filetes y bordes
   · #f8f7f3  crema, el fondo de las páginas de restaurante
   · Cormorant Garamond  serif de titulares en alfabeto latino
     (declarada junto a Zen Old Mincho y Trajan Pro, que cubren el japonés
     y son de pago; la latina es la que aplica a una carta en español)
   ============================================================ */

/* ---------- tipografía ----------
   Cormorant Garamond, subconjunto latino, variable (300–600) en un solo
   .woff2 de 37 KB. Va en skin/ y no empotrada en base64 como en
   anubiscocteleria: los DOS publicadores copian ya esa carpeta
   (lib/publish.mjs → staging/skin, tools/publicar.mjs → prefijo/skin),
   así que el fichero suelto llega al output sin tocar el motor. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("skin/cormorant-garamond-latin.woff2") format("woff2-variations");
}

/* ---------- paleta ----------
   El motor viene oscuro (#131312 sobre crema). El Aurora es lo contrario:
   crema con marino y oro, como su web. Se reescriben las 13 variables
   porque un cambio de claro a oscuro no se arregla tocando solo --bg:
   las sombras, los filetes y el texto atenuado tienen que ir con él. */
:root {
  --bg: #f8f7f3;
  --bg-deep: #efece2;
  --card: #ffffff;
  --line: #ddd6c6;
  --line-soft: #ebe6da;
  --ink: #162554;
  --ink-dim: #6b7186;
  --accent: #867439;
  --accent-deep: #6d5d2c;
  --display: "Cormorant Garamond", "Georgia", serif;
  /* El cuerpo se queda en Familjen Grotesk (ya la precarga el motor): es la
     grotesca más cercana a la Zen Kaku Gothic New que usan ellos, y añadir
     otra familia costaría otros 30–40 KB para una diferencia que no se ve. */
}

/* El rótulo de un hotel de lujo no va condensado ni en mayúsculas apretadas:
   Cormorant pide aire. El motor mete el nombre en mayúsculas desde el HTML
   (nombreMayus), así que aquí solo se corrige el ritmo. */
#hero h1,
.loader-word {
  font-weight: 300;
  letter-spacing: .1em;
}

/* El motor trae white-space:nowrap y deja que fitHeadings() encoja el rótulo
   hasta que quepa en UNA línea. Con "Big Shoulders Display" (condensada) eso
   funciona; con Cormorant, que es mucho más ancha, un nombre de tres palabras
   se quedaba en 26 px en un móvil de 375 — medido, no estimado. Aquí se deja
   envolver: fitHeadings pasa entonces a medir la palabra más larga y el rótulo
   aguanta a tamaño grande en tres líneas. El motor ya blinda cada palabra con
   su propio nowrap en `.w`, así que el corte solo cae en los espacios. */
#hero h1 { color: var(--ink); }

/* ---------- la cabecera CON vídeo ----------
   Sin vídeo, el rótulo va en marino sobre crema. Con vídeo detrás no se lee: el
   plano del Aurora es claro (madera, papel, luz de tarde) y el marino se hunde.
   Encima del velo del extra, el texto se invierte a crema y el oro se aclara.
   Va todo bajo `html.hero-video-on` para que la carta sin vídeo no cambie. */
html.hero-video-on #hero h1 {
  color: #fdfbf6;
  /* Sombra larga y suave, no un contorno: sostiene la serif fina cuando por
     detrás pasa una escena clara, sin ensuciar el trazo. */
  text-shadow: 0 2px 28px rgba(9, 14, 28, .6), 0 1px 4px rgba(9, 14, 28, .45);
}

html.hero-video-on .hero-kicker {
  color: #e4cf9a;
  text-shadow: 0 1px 12px rgba(9, 14, 28, .7);
}

html.hero-video-on .hero-tag {
  color: #f0ead9;
  text-shadow: 0 1px 12px rgba(9, 14, 28, .7);
}

/* El logo del panel, cuando lo subas, también queda sobre el vídeo. */
html.hero-video-on .hero-logo {
  filter: drop-shadow(0 2px 10px rgba(9, 14, 28, .55));
}

/* Solo en pantallas estrechas: en escritorio sobra el ancho para una línea y
   dejarlo envolver hacía un rótulo de 700 px de alto que se comía el hero
   entero (min-height:92svh). Ahí se respeta el nowrap del motor. */
@media (max-width: 700px) {
  #hero h1 {
    white-space: normal;
    line-height: .95;
    text-wrap: balance;
    max-width: 12ch;
  }
}

/* El hero del motor va sobre un degradado NEGRO cableado (#1d1d1b), pensado
   para su piel oscura; sobre crema deja un manchón sucio en la cabecera. Se
   sustituye por un amanecer de oro muy tenue, que además es lo que el nombre
   del local pide. */
#hero {
  background:
    radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f3efe2 38%, var(--bg) 68%);
}

/* ---------- logotipo ----------
   El Aurora no tiene marca propia: su rótulo es tipográfico. El logotipo es el
   del hotel, el wordmark "KEIO PLAZA HOTEL TOKYO" que va en línea en la cabecera
   de su web (viewBox 0 0 332 39, un único <path>, fill #162554 — el mismo marino
   de esta piel). Queda guardado en skin/logo-keioplaza.svg.

   El logo lo manda el PANEL: `restaurant.logoPath` es uno de los tres únicos
   campos que sobreviven a `adaptarDocumento()`. Aquí solo se le da forma.

   Lo que se sube es el EMBLEMA cuadrado del hotel (el sello que va a la izquierda
   del wordmark), no el wordmark entero: a lo ancho, "KEIO PLAZA HOTEL TOKYO" se
   deshace en un móvil. El emblema aguanta a cualquier tamaño.

   El motor le pone borde y `border-radius: 50%`, pensando en una foto recortada
   en medallón. Este logo YA es una figura circular con su propio aire, así que el
   círculo de más lo ensuciaría: fuera borde y fuera radio. `object-fit: contain`
   lo deja centrado sin deformarlo aunque el fichero no sea exactamente cuadrado. */
.hero-logo {
  width: 92px;
  height: 92px;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
}

/* En el loader sí se queda redondo y pequeño: ahí compite con el rótulo. */
.loader-logo {
  object-fit: contain;
  background: #fff;
}

.hero-kicker {
  color: var(--accent);
  letter-spacing: .28em;
}

.hero-tag {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  color: var(--ink-dim);
}

/* ---------- filete de oro ----------
   El recurso gráfico que más repite su web: una regla fina dorada bajo cada
   titular de sección. Se pinta con el ::after que el motor ya reserva en
   .cat-head (position:relative) en vez de añadir marcado. */
.cat-head::after {
  content: "";
  position: absolute;
  left: var(--pad);
  bottom: 14px;
  width: 54px;
  height: 1px;
  background: var(--accent);
}

.cat-num {
  color: var(--accent);
  letter-spacing: .24em;
}

.cat h2 {
  font-weight: 300;
  letter-spacing: .06em;
}

/* ---------- superficies ----------
   Sobre crema, la sombra dura del motor oscuro se ve sucia. Va una sombra
   larga y muy suave, que es como se levanta una tarjeta sobre papel. */
.dish,
.beer-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(22, 37, 84, .04), 0 8px 24px rgba(22, 37, 84, .05);
}

/* El motor no le da padding lateral a la tarjeta porque en su piel oscura no hay
   tarjeta: los platos van sueltos sobre el fondo y .dish-media va a sangre. Al
   ponerles fondo y borde, el texto quedaba PEGADO al filo (medido: texto en
   x=20,7 con la tarjeta en x=20). El aire va en .dish-info, no en .dish, para
   que la foto siga yendo a sangre de lado a lado cuando la haya. */
.dish-info {
  padding: 0 16px 16px;
  border-top-width: 1px;
  border-top-color: var(--line-soft);
}

/* Sin foto, .dish-info es lo primero de la tarjeta y su borde superior sobra:
   duplicaría el borde de la propia tarjeta. */
.dish-info:first-child {
  border-top: 0;
  padding-top: 16px;
}

.dish-info h3,
.beer-card h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .02em;
}

/* En versales, Cormorant es MUY ancha: "AFTERNOON TEA DE VERANO" se partía en
   dos líneas dentro de una columna de 273 px, y como .dish-info alinea por
   línea base, el precio se quedaba colgado arriba a 20,6 px del final del
   título — eso es lo que se veía descuadrado. En caja normal cabe de una y
   además es como titula su propia web. */
/* El motor dimensiona el título con vw (`clamp(23px, 6.2vw, 31px)`), pero la
   rejilla pasa a TRES columnas en escritorio: a 1265 px de ventana la tarjeta
   mide 376 y la columna del título solo 275, así que el vw lo empujaba a 31–32 px
   y partía cinco de once nombres. Se mide contra la tarjeta, no contra la
   ventana, que es lo que de verdad limita. */
.dish { container-type: inline-size; }

.dish-info h3 {
  text-transform: none;
  font-size: clamp(22px, 7.2cqw, 30px);
  line-height: 1.06;
  /* Los nombres más largos ("Plan Sky Pool con cerveza") van a partir igual.
     Con balance se reparten en dos líneas parecidas en vez de dejar una palabra
     suelta colgando debajo. */
  text-wrap: balance;
  hyphens: none;
}

/* El precio en oro y en la serif: en su carta el precio es información
   de lujo, no un dato de ticket. */
.dish-price,
.beer-price {
  font-family: var(--display);
  font-weight: 500;
  color: var(--accent-deep);
}

.dish-desc { color: var(--ink-dim); }

/* ---------- navegación ----------
   Barra crema translúcida con filete dorado abajo, como su menú fijo. */
#catnav {
  background: rgba(248, 247, 243, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.chip {
  letter-spacing: .12em;
  text-transform: uppercase;
}

.chip.active { color: var(--accent-deep); }
#nav-ind { background: var(--accent); }

/* ---------- loader ---------- */
#loader { background: var(--bg); }
.loader-ring circle { stroke: var(--accent); }
.loader-sub { color: var(--ink-dim); }

/* ---------- ticker ----------
   Fuera. La cinta que va anunciando "Nº01 Afternoon Tea 38,00 ·" es lenguaje de
   bar de tapas, no de un lounge de hotel: aquí resta. El motor la sigue emitiendo
   —el marcado es suyo y no se toca por un tenant—, pero en esta carta no se ve.
   El JS que la mueve con el scroll no se entera y no falla: solo anima algo oculto.

   OJO si se vuelve a encender: el extra hero-scroll-video le pone fondo y z-index
   para que TAPE la cabecera fija. Sin eso, el vídeo se transparentaría por detrás. */
#ticker { display: none; }

/* ---------- botón de volver arriba ----------
   El motor dibuja una caña de cerveza que se vacía con el scroll. En un
   lounge de cócteles del piso 45 eso desentona, así que se esconde el vaso
   y se deja solo la pastilla "Arriba" con su flecha, siempre visible.
   El JS que anima #pinta-fill sigue corriendo sin romperse: solo no se ve. */
#pinta > svg { display: none; }

#pinta {
  width: auto;
  height: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  box-shadow: 0 6px 20px rgba(22, 37, 84, .10);
}

.pinta-hint {
  position: static;
  opacity: 1;
  transform: none;
  color: var(--ink);
}

.pinta-hint .mono {
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pinta-hint > svg path { stroke: var(--accent); }

/* ---------- cierre ----------
   ATENCIÓN, esto es un PARCHE y conviene que se note.

   El motor sí sabe pintar el cierre: emite `.claim` y `.outro-note` a partir de
   `restaurant.claim` e `restaurant.instagram`. Pero esos dos campos NO llegan:
   `adaptarDocumento()` (lib/adaptar-panel.mjs:14) solo deja pasar `name`,
   `tagline` y `logoPath` del documento del panel. Comprobado sobre el documento
   real que se va a publicar: la sección sale así, vacía.

       <section id="outro">
       </section>

   Como los <p> ni existen, no vale un `.claim::before`: hay que generar el
   contenido desde el propio `#outro`, que sí está en el HTML.

   EL ARREGLO DE VERDAD es ampliar `adaptarDocumento` para que deje pasar `claim`,
   `instagram`, `credit` y `kicker` — y de paso el bloque `brand`, que se pierde
   igual. Eso toca el motor y mueve ENGINE_VERSION, así que mientras tanto queda
   esto.

   SE APAGA SOLO. El `:not(:has(...))` hace que el parche solo actúe cuando el <p>
   de verdad no está. El día que el motor empiece a mandarlo, estas reglas dejan de
   aplicarse y el texto NO sale duplicado: no hay que acordarse de borrar nada.

   Contrapartida asumida: el texto queda cableado en el CSS. El hostelero no puede
   cambiarlo desde el panel, y la palabra "Aurora" pierde el realce en el acento
   porque un pseudoelemento no puede llevar dentro un trozo con otro color. */
#outro:not(:has(.claim))::before {
  content: "Te esperamos en el Aurora, cuando se encienda Tokio.";
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(32px, 7vw, 62px);
  line-height: 1.06;
  color: var(--ink);
  text-wrap: balance;
  max-width: 16ch;
  margin-inline: auto;
}

#outro:not(:has(.outro-note))::after {
  content: "@27menu";
  display: block;
  margin-top: 34px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Y cuando el cierre SÍ llegue del panel, que se vea con esta piel y no con la
   del motor: la suya va en versales a 110 px, que aquí sería un grito. */
.claim {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(32px, 7vw, 62px);
  line-height: 1.06;
  text-transform: none;
  color: var(--ink);
}

.claim em {
  font-style: italic;
  color: var(--accent);
}

.outro-note,
.f-credit { color: var(--ink-dim); }

/* ---------- ficha de plato ---------- */
#sheet {
  background: var(--card);
  border-top: 2px solid var(--accent);
}

#backdrop { background: rgba(22, 37, 84, .45); }
.sheet-grip { background: var(--line); }

/* La X salía casi invisible: el motor le cablea `background: rgba(12,12,11,.82)`
   —un negro pensado para su piel oscura— y encima le pone `color: var(--ink)`,
   que aquí es marino. Marino sobre negro no se lee. Va en claro, con la X
   marino y el filete de oro. */
.sheet-close {
  background: #fff;
  color: var(--ink);
  border-color: var(--accent);
  border-radius: 50%;
}

.sheet-close:hover {
  background: var(--ink);
  color: var(--bg);
}

/* Mismo negro cableado en el botón de reproducir vídeo. Todavía no lo usa ningún
   plato de esta carta, pero lo usará en cuanto suba un vídeo por el panel. */
.vplay {
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  border-color: var(--accent);
}

/* ---------- sello de demo ----------
   Obligatorio mientras la carta lleve el nombre y las fotos reales del
   Aurora: sin él, una carta servida en aurora.27menu.com puede leerse como
   la oficial del hotel. Fijo, no se va con el scroll y no tapa el contenido
   (pointer-events:none) ni lo lee un lector de pantalla como si fuera plato.
   OJO: esto NO es el noindex. El <meta name="robots"> no se puede poner
   desde CSS y el motor todavía no lo emite — ver el informe del handoff. */
body::after {
  content: "Demo · 27menu";
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 60;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 5px 11px;
  opacity: .88;
}

/* La pastilla "Arriba" vive en la esquina inferior derecha. En móvil el sello se
   le echaba encima (medido: se solapaban en la banda de 56–62 px), así que ahí
   se va a la izquierda en vez de apilarse. */
@media (max-width: 700px) {
  body::after {
    right: auto;
    left: 10px;
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #catnav { backdrop-filter: none; }
}