/* Hakumei · estilos del sitio. Papel de día; la noche llega con la lámpara encendida. */

/* Jost va con el sitio: la de Google Fonts dibuja mal la ō (Kikkō, Hōzuki). */
@font-face {
  font-family: "Jost";
  src: url("../fuentes/Jost.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --papel: #F2F3F1;
  --papel-2: #E8E9E5;
  --tinta: #1D1E22;
  --gris: #5F6470;
  --linea: rgba(29, 30, 34, .12);
  --ambar: #D9913F;
  --ambar-hi: #F0B461;
  --ambar-txt: #A8661B;
  --noche: #12141A;
  --noche-tinta: #E8E6E1;
  --noche-gris: #A3A8B5;
  --aitetsu: #3A4256;

  --f-marca: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --f-kanji: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-texto: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;

  --t-1: .8125rem;
  --t0: 1rem;
  --t1: 1.25rem;
  --t2: 1.75rem;
  --t3: clamp(2rem, 4.2vw, 2.75rem);
  --t4: clamp(2.6rem, 6.4vw, 4.6rem);
  --lado: max(20px, env(safe-area-inset-left, 0px));
  --transicion: .8s ease;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 var(--t0)/1.7 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
[lang="ja"] { font-family: var(--f-kanji); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

.rotulo {
  font: 400 var(--t-1)/1.3 var(--f-marca);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}
.envoltura {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: var(--lado);
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---------- Encabezado ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  padding-top: env(safe-area-inset-top, 0px);
}
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; }
.marca { display: flex; align-items: center; text-decoration: none; }
.marca img { height: 24px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; font: 400 .875rem/1 var(--f-marca); letter-spacing: .06em; }
.nav a { text-decoration: none; color: var(--gris); transition: color .2s; }
.nav a:hover { color: var(--tinta); }
.nav a.boton, .nav a.boton:hover { color: var(--papel); }
.nav .solo-ancho { display: inline; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 400 .8125rem/1 var(--f-marca); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--papel);
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.boton:hover { background: #000; }
.boton.claro { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton.claro:hover { border-color: var(--tinta); }
.boton.chico { padding: 10px 16px; }
.boton svg { width: 18px; height: 18px; flex: none; }

/* Interruptor de luz (sobre la escena) */
.interruptor {
  display: inline-flex; align-items: center; gap: 10px;
  font: 400 .75rem/1 var(--f-marca); letter-spacing: .16em; text-transform: uppercase;
  padding: 10px 16px 10px 11px;
  border-radius: 999px;
  border: 1px solid rgba(29, 30, 34, .18);
  background: rgba(242, 243, 241, .7);
  color: var(--tinta);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color var(--transicion), background-color var(--transicion), border-color var(--transicion);
}
.interruptor .punto {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color .5s, box-shadow .5s, border-color .5s;
}
.interruptor[aria-pressed="true"] { color: var(--noche-tinta); background: rgba(18, 20, 26, .55); border-color: rgba(240, 180, 97, .45); }
.interruptor[aria-pressed="true"] .punto { background: var(--ambar-hi); border-color: var(--ambar-hi); box-shadow: 0 0 12px var(--ambar-hi); }

.icono-boton {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(29, 30, 34, .18);
  background: rgba(242, 243, 241, .7);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color var(--transicion), background-color var(--transicion), border-color var(--transicion);
}
.icono-boton svg { width: 18px; height: 18px; }
.escena.de-noche .icono-boton { color: var(--noche-tinta); background: rgba(18, 20, 26, .55); border-color: rgba(232, 230, 225, .2); }

/* ---------- Armá tu lámpara ---------- */
.armar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  height: calc(100dvh - 65px - env(safe-area-inset-top, 0px));
}
.escena {
  position: relative;
  min-width: 0;
  background: color-mix(in srgb, #ECEDEA calc(100% - var(--luz, 0) * 100%), var(--noche));
}
.escena canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.escena-controles {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: 16px;
  bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.escena-controles > * { pointer-events: auto; }
.pista {
  position: absolute; top: 16px; left: 0; right: 0; text-align: center;
  font: 400 .75rem/1 var(--f-marca); letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--gris) calc(100% - var(--luz, 0) * 100%), var(--noche-gris));
  pointer-events: none;
}

.panel {
  overflow-y: auto;
  border-left: 1px solid var(--linea);
  background: var(--papel);
  display: flex; flex-direction: column;
}
.paso { padding: 26px 26px 24px; border-bottom: 1px solid var(--linea); display: grid; gap: 14px; }
.paso-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.paso-cab h2 { font: 400 var(--t1)/1.2 var(--f-marca); letter-spacing: .02em; display: flex; align-items: baseline; gap: 10px; }
.paso-cab h2 .num { font-family: var(--f-kanji); font-size: 1rem; color: var(--ambar-txt); }
.paso-cab .rotulo { font-size: 11px; text-align: right; }

.piezas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pieza {
  display: grid; justify-items: center; gap: 2px;
  padding: 8px 4px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  min-width: 0;
  transition: border-color .2s, background-color .2s;
}
.pieza:hover { background: var(--papel-2); }
.pieza[aria-pressed="true"] { border-color: var(--tinta); background: #fff; }
.mini {
  width: 100%; aspect-ratio: 1; max-width: 76px;
  background: center / contain no-repeat;
  border-radius: 6px;
  position: relative;
}
.mini:not(.lista)::after {
  content: ""; position: absolute; inset: 22% 26%;
  border-radius: 40% 40% 8px 8px;
  background: var(--papel-2);
  animation: latido 1.4s ease-in-out infinite;
}
@keyframes latido { 50% { opacity: .45; } }
.pieza-nombre { font: 400 .75rem/1.2 var(--f-marca); letter-spacing: .04em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pieza-kanji { font-size: .8125rem; line-height: 1.2; color: var(--gris); }

.colores { display: flex; flex-wrap: wrap; gap: 10px; }
.color {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(29, 30, 34, .18);
  cursor: pointer;
  box-shadow: 0 0 0 0 var(--papel), 0 0 0 0 var(--tinta);
  transition: box-shadow .2s;
}
.color[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--papel), 0 0 0 4px var(--tinta); }
.color-nombre { font-size: var(--t-1); color: var(--gris); }

.resumen { padding: 26px; display: grid; gap: 16px; margin-top: auto; background: #fff; border-top: 1px solid var(--linea); }
.resumen h2 { font: 300 var(--t2)/1.15 var(--f-marca); letter-spacing: .02em; }
.resumen .kanji { font-family: var(--f-kanji); color: var(--gris); font-size: 1rem; }
.detalle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: .875rem; }
.detalle dt { color: var(--gris); }
.detalle dd { margin: 0; }
.precio { font: 400 var(--t1)/1.3 var(--f-marca); font-variant-numeric: tabular-nums; }
.precio.sin-precio { font: 400 .875rem/1.5 var(--f-texto); color: var(--gris); }
.acciones { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.aviso { font-size: var(--t-1); color: var(--gris); word-break: break-all; }

/* Primero se elige de mesa o colgante (sin ?t= en la URL) */
.pregunta { display: none; }
.preguntar, .preguntar body { overflow: hidden; }
.preguntar .pregunta {
  display: grid; place-items: center;
  position: fixed; inset: calc(65px + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 15;
  background: var(--papel);
  padding: 24px var(--lado) calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.pregunta-caja { display: grid; gap: 14px; justify-items: center; text-align: center; width: min(680px, 100%); }
.pregunta h1 { font: 300 var(--t3)/1.15 var(--f-marca); letter-spacing: .01em; margin-bottom: 14px; }
.tipos-grandes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.tipo-grande {
  display: grid; justify-items: center; gap: 10px;
  padding: 34px 22px 28px;
  background: var(--papel-2);
  border: 1px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, transform .25s;
}
.tipo-grande:hover { background: #fff; border-color: var(--tinta); transform: translateY(-2px); }
.tipo-grande svg { width: 72px; height: 96px; margin-bottom: 8px; }
.tipo-nombre { font: 400 var(--t1)/1.2 var(--f-marca); letter-spacing: .04em; display: flex; gap: 10px; align-items: baseline; }
.tipo-nombre [lang="ja"] { color: var(--ambar-txt); font-size: 1rem; }
.tipo-desc { font-size: .875rem; color: var(--gris); max-width: 17rem; }

.tipos-chicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tipo-chico {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 10px;
  cursor: pointer;
  font: 400 .875rem/1 var(--f-marca); letter-spacing: .04em;
  transition: border-color .2s, background-color .2s;
}
.tipo-chico svg { width: 24px; height: 32px; flex: none; }
.tipo-chico:hover { background: var(--papel-2); }
.tipo-chico[aria-pressed="true"] { border-color: var(--tinta); background: #fff; }

@media (max-width: 520px) {
  .tipos-grandes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tipo-grande { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 18px; row-gap: 4px; padding: 18px 20px; }
  .tipo-grande svg { grid-row: span 2; width: 48px; height: 64px; margin: 0; }
}

@media (max-width: 900px) {
  .armar { display: block; height: auto; }
  .armar .escena {
    position: sticky;
    top: calc(65px + env(safe-area-inset-top, 0px));
    z-index: 5;
    height: 48vh;
    height: 48svh;
    border-bottom: 1px solid var(--linea);
  }
  .panel { border-left: 0; overflow: visible; }
  .paso, .resumen { padding-left: var(--lado); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .resumen { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
  .nav .solo-ancho { display: none; }
}
@media (max-width: 420px) {
  .piezas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .pieza-nombre { font-size: .6875rem; }
}

/* ---------- Inicio ---------- */
.portada {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--papel) calc(100% - var(--luz, 0) * 100%), var(--noche));
  color: color-mix(in srgb, var(--tinta) calc(100% - var(--luz, 0) * 100%), var(--noche-tinta));
}
.portada .envoltura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  min-height: min(760px, calc(100svh - 65px));
  padding-block: 40px;
}
.portada-texto { display: grid; gap: 22px; align-content: center; max-width: 34rem; }
.portada .rotulo, .portada .bajada { color: color-mix(in srgb, var(--gris) calc(100% - var(--luz, 0) * 100%), var(--noche-gris)); }
.portada h1 { font: 300 var(--t4)/1.08 var(--f-marca); letter-spacing: .01em; }
.portada h1 em { font-style: normal; color: color-mix(in srgb, var(--tinta) calc(100% - var(--luz, 0) * 100%), var(--ambar-hi)); }
.bajada { font-size: 1.0625rem; max-width: 30rem; }
.portada-botones { display: flex; flex-wrap: wrap; gap: 12px; }
.portada .boton.claro { color: inherit; border-color: color-mix(in srgb, var(--linea) calc(100% - var(--luz, 0) * 100%), rgba(232, 230, 225, .25)); }
.portada-escena { position: relative; height: min(660px, 72svh); min-height: 380px; border-radius: 18px; overflow: hidden; }
.portada-escena .escena-controles { left: 16px; }
.portada-escena .escena { position: absolute; inset: 0; background: transparent; }
.portada-escena canvas { pointer-events: none; touch-action: auto; }
.portada-tate {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: .3em;
  color: color-mix(in srgb, #9A9EA8 calc(100% - var(--luz, 0) * 100%), var(--ambar-hi));
  pointer-events: none;
}

.seccion { padding-block: clamp(64px, 10vw, 120px); border-bottom: 1px solid var(--linea); }
.seccion-cab { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 44rem; }
.seccion-cab h2 { font: 300 var(--t3)/1.15 var(--f-marca); letter-spacing: .01em; }
.seccion-cab p { color: var(--gris); }

.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.pasos li { display: grid; gap: 10px; align-content: start; padding: 26px 24px 0 0; }
.pasos li + li { padding-left: 24px; border-left: 1px solid var(--linea); }
.pasos .num { font-family: var(--f-kanji); font-size: 2.2rem; line-height: 1; color: var(--ambar-txt); }
.pasos h3 { font: 400 var(--t1)/1.3 var(--f-marca); }
.pasos p { color: var(--gris); font-size: .9375rem; }

.coleccion { display: grid; gap: 48px; }
.coleccion h3 { font: 400 var(--t-1)/1 var(--f-marca); letter-spacing: .18em; text-transform: uppercase; color: var(--gris); padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.grilla.pantallas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grilla.bases { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ficha {
  display: grid; gap: 4px; text-decoration: none;
  padding: 14px 14px 18px;
  background: var(--papel-2);
  border-radius: 12px;
  transition: background-color .25s, transform .25s;
}
.ficha:hover { background: #fff; transform: translateY(-2px); }
.ficha .mini { max-width: none; margin-bottom: 8px; }
.ficha-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ficha-nombre { font: 400 var(--t0)/1.3 var(--f-marca); letter-spacing: .04em; }
.ficha-kanji { color: var(--gris); }
.ficha-sig { font-size: var(--t-1); color: var(--gris); }

.taller { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.taller-kanji { display: flex; gap: 18px; align-items: flex-end; }
.taller-kanji span { font-family: var(--f-kanji); font-size: clamp(5rem, 14vw, 9rem); line-height: .9; }
.taller-kanji small { font: 400 var(--t-1)/1.5 var(--f-marca); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); padding-bottom: 10px; }
.taller-texto { display: grid; gap: 16px; color: var(--gris); max-width: 34rem; }
.taller-texto strong { color: var(--tinta); font-weight: 500; }

.preguntas { display: grid; gap: 0; border-top: 1px solid var(--linea); max-width: 52rem; }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px;
  padding: 20px 0;
  font: 400 var(--t1)/1.35 var(--f-marca);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-weight: 300; color: var(--ambar-txt); transition: transform .25s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 22px; color: var(--gris); max-width: 44rem; }

.pie { padding-block: 48px calc(48px + env(safe-area-inset-bottom, 0px)); background: var(--noche); color: var(--noche-tinta); }
.pie .envoltura { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pie img { height: 34px; width: auto; }
.pie p { font: 400 var(--t-1)/1.6 var(--f-marca); letter-spacing: .1em; color: var(--noche-gris); }
.pie a { color: var(--noche-tinta); }

@media (max-width: 900px) {
  .portada .envoltura { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 28px 8px; }
  .portada-escena { height: 56svh; min-height: 340px; order: -1; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos li:nth-child(3) { padding-left: 0; border-left: 0; }
  .pasos li { padding-bottom: 24px; }
  .grilla, .grilla.pantallas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grilla.bases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .taller { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .pasos li, .pasos li + li { padding-left: 0; border-left: 0; }
  .grilla.bases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}