/* Kibori · web promocional. Papel, tinta, oro y el rojo del sello (Sources/UI/Design.swift); figuras del juego
   flotando a distintas profundidades. Poco texto y mucho aire. */
:root {
  --papel: #f1e7d8;
  --papel-claro: #f9f4ec;
  --tinta: #2b241f;
  --tinta-suave: rgba(43, 36, 31, .6);
  --tinta-tenue: rgba(43, 36, 31, .38);
  --oro: #d6943a;
  --oxido: #9e3324;
  --serif: "New York", ui-serif, "Iowan Old Style", "Hiragino Mincho ProN", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--papel); color: var(--tinta); -webkit-font-smoothing: antialiased; }
body { font-family: var(--serif); overflow-x: hidden; }
img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
a { color: inherit; }

.cabecera { position: fixed; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center;
  padding: 24px 30px; z-index: 10; pointer-events: none; }
.cabecera > * { pointer-events: auto; }
.marca { text-decoration: none; display: flex; align-items: baseline; gap: 10px; }
.marca .kanji { font-family: var(--mincho); font-size: 17px; color: var(--tinta-suave); }
.marca .nombre { font-size: 16px; letter-spacing: .32em; }
.idioma { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .3em; background: none; border: 0;
  color: var(--tinta-suave); cursor: pointer; padding: 8px 4px 8px 10px; }

/* escenas: un escenario fijo mientras se baja por la sección */
.escena { position: relative; height: var(--alto, 200vh); }
.escenario { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.capa { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: var(--w, 20vw);
  transform: translate(-50%, -50%); will-change: transform, filter; pointer-events: none; }
/* cada figura flota a su ritmo, aunque no se baje */
.capa img { animation: flota var(--dur, 9s) ease-in-out infinite alternate; animation-delay: var(--retraso, 0s); }
@keyframes flota { from { transform: translateY(-1.2%) rotate(-1.2deg); } to { transform: translateY(1.4%) rotate(1.4deg); } }

.texto-central { width: auto; left: 50%; top: 50%; text-align: center; white-space: nowrap; display: flex; flex-direction: column;
  align-items: center; }
/* el icono de la app, con su forma de icono y una sombra de papel */
.icono-app { width: clamp(150px, 15vw, 220px); aspect-ratio: 1; border-radius: 22.5%; animation: none;
  box-shadow: 0 1px 2px rgba(43,36,31,.12), 0 18px 40px -14px rgba(43,36,31,.35); }
.titulo { font-weight: 400; font-size: clamp(40px, 4.4vw, 64px); letter-spacing: .34em; margin: 34px 0 0 .34em; line-height: 1; }
.kanji-lema { font-family: var(--mincho); font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .6em; margin: 22px 0 0 .6em;
  color: var(--tinta-tenue); }
.lema { font-style: italic; font-size: clamp(18px, 1.7vw, 23px); color: var(--tinta-suave); margin-top: 20px; }

/* el botón de descarga del Mac: una píldora de tinta, como los botones del juego */
.boton-mac { display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; padding: 0 30px 0 24px; height: 54px;
  border-radius: 27px; background: var(--tinta); color: var(--papel-claro); text-decoration: none; pointer-events: auto;
  font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 1px 2px rgba(43,36,31,.18), 0 12px 26px -12px rgba(43,36,31,.5);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background .35s ease; }
.boton-mac svg { width: 22px; height: 22px; fill: none; stroke: var(--oro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.boton-mac:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(43,36,31,.18), 0 18px 34px -12px rgba(43,36,31,.55); }
.boton-mac:hover svg { transform: translateY(2px); }
.boton-mac:active { transform: translateY(0) scale(.98); }
.nota-mac { margin-top: 16px; font-family: var(--sans); font-size: 12px; letter-spacing: .02em; color: var(--tinta-tenue); white-space: normal;
  max-width: 420px; }

/* la talla: el bloque se convierte en el faro con un cambio de foco */
.bloque-pila { position: absolute; left: 62%; top: 52%; width: min(36vw, 62vh); aspect-ratio: 1; transform: translate(-50%, -50%); }
.bloque-pila .estado { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  will-change: opacity, filter, transform; }

.frase { position: absolute; font-size: clamp(26px, 3vw, 44px); line-height: 1.2; color: var(--tinta); font-weight: 400;
  opacity: 0; will-change: opacity, filter, transform; }
.frase.izq { left: 8vw; top: 50%; width: min(30vw, 440px); transform: translateY(-50%); }
.frase.abajo { left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(80vw, 820px); text-align: center; }

/* la talla de la semana: un río de figuras; la del centro, enfocada */
.rio { position: absolute; inset: 0; }
.rio .fig { position: absolute; top: 46%; left: 50%; width: min(19vw, 30vh); will-change: transform, filter, opacity; }
.semana-texto { position: absolute; left: 50%; bottom: 11vh; transform: translateX(-50%); text-align: center; width: 90vw; }
.frase-fija { font-size: clamp(28px, 3.2vw, 46px); }
.semana-nombre { font-style: italic; font-size: 19px; color: var(--tinta-suave); margin-top: 14px; min-height: 1.4em; transition: opacity .35s ease; }

/* cierre */
.cierre { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 10vh 8vw; }
.hanko { width: 112px; height: 112px; display: grid; place-items: center; background: var(--oxido); color: var(--papel-claro);
  font-family: var(--mincho); font-weight: 700; font-size: 64px; border-radius: 15px; transform: rotate(-4deg);
  box-shadow: inset 0 0 0 5px var(--oxido), inset 0 0 0 6px rgba(249, 244, 236, .35); }
.pronto { margin-top: 56px; font-size: clamp(30px, 3.4vw, 50px); font-weight: 400; }
.aparatos { margin-top: 20px; font-style: italic; font-size: clamp(17px, 1.6vw, 22px); color: var(--tinta-suave); }
.cierre .boton-mac { margin-top: 44px; }

@media (max-width: 760px) {
  .cabecera { padding: 18px 20px; }
  .capa { width: calc(var(--w, 20vw) * 1.7); }
  .texto-central { top: 40%; white-space: normal; width: 90vw; }
  .titulo { font-size: 10vw; letter-spacing: .26em; margin-left: .26em; margin-top: 26px; }
  .icono-app { width: 38vw; }
  .boton-mac { margin-top: 30px; }
  .lema { font-size: 17px; }
  .bloque-pila { left: 50%; top: 40%; width: 86vw; }
  .frase.izq { left: 8vw; right: 8vw; width: auto; top: auto; bottom: 10vh; transform: none; font-size: 26px; }
  .rio .fig { width: 42vw; top: 40%; }
}
@media (prefers-reduced-motion: reduce) { .capa img { animation: none; } }

/* páginas de texto (privacidad, soporte): una columna de papel, sin escenas */
.pagina .cabecera { position: absolute; }
.texto { max-width: 640px; margin: 0 auto; padding: 150px 28px 120px; }
.texto h1 { font-weight: 400; font-size: clamp(36px, 4vw, 52px); letter-spacing: .02em; }
.texto .fecha { margin-top: 12px; font-family: var(--sans); font-size: 13px; color: var(--tinta-tenue); }
.texto .entrada { margin-top: 40px; font-size: 22px; line-height: 1.5; font-style: italic; color: var(--tinta-suave); }
.texto h2 { margin-top: 52px; font-weight: 400; font-size: 21px; }
.texto h2::before { content: ""; display: block; width: 28px; height: 1px; background: var(--oro); margin-bottom: 18px; }
.texto p { margin-top: 12px; font-size: 18px; line-height: 1.65; }
.texto a { text-decoration-color: var(--oro); text-underline-offset: 3px; }
.texto article[lang="ja"] h1, .texto article[lang="ja"] h2 { font-family: var(--mincho); }
.texto article[lang="ja"] .entrada { font-style: normal; }

/* Kibori · la web: lo que se añade a web/promo/estilo.css (el generador los junta en uno). Las mismas piezas: papel,
   tinta, oro, la serif y las versalitas espaciadas; nada nuevo que llame la atención. */

/* la cabecera fija lleva detrás un fundido de papel, para que no se monte sobre el texto al bajar */
.cabecera { background: linear-gradient(to bottom, rgba(241, 231, 216, .94) 30%, rgba(241, 231, 216, 0)); padding-bottom: 34px; }
.pagina .cabecera { background: none; }

/* idiomas: enlaces de verdad (cada idioma tiene su página), como el botón de antes */
.idiomas { display: flex; gap: 4px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .3em; }
.idiomas a { color: var(--tinta-tenue); text-decoration: none; padding: 8px 4px 8px 10px; transition: color .25s ease; }
.idiomas a:hover, .idiomas a[aria-current] { color: var(--tinta-suave); }
.idiomas a[lang="ja"] { letter-spacing: .1em; }

/* la insignia oficial de la App Store, con el mismo aire que la píldora del Mac */
.insignia { display: inline-block; margin-top: 40px; pointer-events: auto; transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  filter: drop-shadow(0 12px 18px rgba(43,36,31,.22)); }
.insignia img { width: auto; height: 54px; }
.insignia:hover { transform: translateY(-2px); filter: drop-shadow(0 16px 22px rgba(43,36,31,.28)); }
.pronto-nota { margin-top: 26px; font-family: var(--sans); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-tenue); }
.cierre .insignia { margin-top: 44px; }

/* lo que se lee: una columna de papel después del cierre, con el mismo tono que las páginas de texto */
.sobre { max-width: 720px; margin: 0 auto; padding: 4vh 28px 12vh; }
.sobre h2 { margin-top: 72px; font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.25; }
.sobre h2::before { content: ""; display: block; width: 28px; height: 1px; background: var(--oro); margin-bottom: 22px; }
.sobre p { margin-top: 16px; font-size: 19px; line-height: 1.65; }
.sobre .entrada { font-style: italic; font-size: 22px; color: var(--tinta-suave); }
.sobre ul { list-style: none; margin-top: 18px; }
.sobre li { position: relative; padding-left: 26px; margin-top: 12px; font-size: 19px; line-height: 1.55; }
.sobre li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--oro); }
.sobre dt { margin-top: 30px; font-size: 20px; }
.sobre dd { margin-top: 8px; font-size: 18px; line-height: 1.65; color: var(--tinta-suave); }

/* las capturas: en fila, con la sombra de papel del icono */
.galeria { margin: 36px -14vw 0; display: flex; gap: 22px; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.galeria figure { flex: 0 0 auto; }
.galeria img { height: clamp(200px, 26vw, 340px); width: auto; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(43,36,31,.12), 0 18px 40px -16px rgba(43,36,31,.35); }
.galeria figcaption { margin-top: 12px; text-align: center; font-family: var(--sans); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--tinta-tenue); }

/* el pie */
.pie { padding: 40px 8vw 64px; text-align: center; font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: var(--tinta-tenue); }
.pie nav { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.pie a { color: var(--tinta-suave); text-decoration: none; }
.pie a:hover { color: var(--tinta); }

/* japonés: mincho en los títulos, sin cursivas */
html[lang="ja"] .titulo, html[lang="ja"] .frase, html[lang="ja"] .frase-fija, html[lang="ja"] .pronto,
html[lang="ja"] .sobre h2, html[lang="ja"] .texto h1, html[lang="ja"] .texto h2 { font-family: var(--mincho); }
html[lang="ja"] .lema, html[lang="ja"] .aparatos, html[lang="ja"] .semana-nombre, html[lang="ja"] .sobre .entrada,
html[lang="ja"] .texto .entrada { font-style: normal; }
html[lang="ja"] .frase { line-height: 1.5; }

@media (max-width: 760px) {
  .idiomas a { padding: 8px 2px 8px 8px; }
  .insignia { margin-top: 30px; }
  .galeria { margin: 30px -28px 0; gap: 14px; }
  .galeria img { height: 46vw; }
  .sobre p, .sobre li { font-size: 18px; }
}