/* Tizón: revista interactiva. Mundo: ciprés quemado, basalto, nieve del Osorno
   y el oro del pigmento del taller (único acento, sólo sobre carbón). */
:root {
  --desk: #0d0d0c;
  --desk-lamp: #23221f;
  --carbon: #131312;
  --carbon-2: #1c1b1a;
  --ash: #d5d3cd;
  --ash-2: #c9c7c0;
  --ink: #161615;
  --ink-soft: #45443f;
  --snow: #ebe9e4;
  --snow-soft: #a8a59e;
  --accent: #a9bcc6;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text: "Literata", Georgia, serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--desk); color: var(--snow);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--snow); color: var(--carbon); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--snow); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; padding: 2rem; }

/* ── Chrome de la plataforma ── */
.mockup-badge {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 50;
  font: 700 10px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 999px; pointer-events: none;
  background: rgba(13, 13, 12, .72); color: rgba(235, 233, 228, .7); border: 1px solid rgba(235, 233, 228, .14);
}
.showroom-back {
  position: fixed !important; top: max(12px, env(safe-area-inset-top)) !important;
  left: max(12px, env(safe-area-inset-left)) !important; z-index: 60 !important;
  display: inline-flex !important; align-items: center; gap: 9px;
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important;
}
/* Las letras RÜM van siempre en Baloo 2. */
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/home/fonts/baloo2-var.woff2) format("woff2"); }
.showroom-back-brand { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; }
@media (max-width: 640px) { .mockup-badge { display: none; } }

/* ── Mesa: una lámpara sobre madera oscura ── */
.desk {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: var(--pad-top, 18px) 16px 74px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, var(--desk-lamp) 0%, rgba(35, 34, 31, 0) 70%),
    var(--desk);
}

.book {
  position: relative;
  width: calc(var(--pw, 400px) * var(--cols, 2));
  height: var(--ph, 533px);
  transition: transform .7s var(--ease-out);
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.book.is-grabbing { cursor: grabbing; transition: none; }
.book.is-moving { transition: none; }
.book img, .book video { -webkit-user-drag: none; }

/* Sombra de contacto del libro sobre la mesa (sigue al ancho visible) */
.book-floor {
  position: absolute; left: var(--floor-l, 0); width: var(--floor-w, 100%); bottom: -14px; height: 40px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.7), rgba(0,0,0,0) 72%);
  filter: blur(6px); pointer-events: none;
  transition: left .7s var(--ease-out), width .7s var(--ease-out);
}

/* Grosor del bloque de hojas a cada lado */
.edge {
  position: absolute; top: 3px; bottom: 3px; width: 0;
  background: repeating-linear-gradient(90deg, #bdbab3 0 1px, #8f8c86 1px 2px);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
  transition: width .5s var(--ease-out);
}
/* left/width los fija magazine.js según las hojas a cada lado */

/* ── Página ── */
.pg {
  position: absolute; top: 0; left: 0;
  width: var(--pw, 400px); height: var(--ph, 533px);
  overflow: hidden; visibility: hidden;
  container-type: size;
  background: var(--ash); color: var(--ink);
  transform-origin: 0 0;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85);
}
.pg::after { /* sombra del lomo */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
}
.pg.is-right::after {
  background: linear-gradient(90deg, rgba(0,0,0,.34) 0, rgba(0,0,0,.12) 2.5%, rgba(0,0,0,0) 8%, rgba(255,255,255,.035) 11%, rgba(255,255,255,0) 16%);
}
.pg.is-left::after {
  background: linear-gradient(270deg, rgba(0,0,0,.34) 0, rgba(0,0,0,.12) 2.5%, rgba(0,0,0,0) 8%, rgba(255,255,255,.035) 11%, rgba(255,255,255,0) 16%);
}
.pg.is-cover::after { background: linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(0,0,0,0) 3.5%); }

.pg--ash::before { /* grano del papel */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .44 0 0 0 0 .42 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pg--carbon { background: var(--carbon); color: var(--snow); }
.pg--blank { background: var(--ash-2); }
.pg--photo { background: #0f0f0e; }

.pg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0f0f0e; }
.fig-media { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ash-2); }
.pg--carbon .fig-media { background: var(--carbon-2); }
.pg--wide-l .pg-media, .pg--wide-r .pg-media { width: 200%; max-width: none; }
.pg--wide-l .pg-media { left: 0; }
.pg--wide-r .pg-media { left: -100%; }

.folio {
  position: absolute; left: 8cqw; right: 8cqw; bottom: 4.6cqw; z-index: 4;
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 1.6cqw; border-top: 1px solid rgba(22,22,21,.22);
  font: 500 clamp(9px, 2.1cqw, 12px)/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pg--carbon .folio { color: var(--snow-soft); border-top-color: rgba(235,233,228,.16); }
.folio span:first-child { color: var(--ink); font-weight: 800; }
.pg--carbon .folio span:first-child { color: var(--snow); }
.pg.is-left .folio { flex-direction: row; }
.pg.is-right .folio { flex-direction: row-reverse; }

/* ── Portada ── */
.cover-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,9,.62) 0%, rgba(10,10,9,.3) 24%, rgba(10,10,9,0) 38%),
    linear-gradient(0deg, rgba(10,10,9,.82) 0%, rgba(10,10,9,.35) 34%, rgba(10,10,9,0) 52%);
}
.cover-head { position: absolute; top: 5cqw; left: 6.5cqw; right: 6.5cqw; color: var(--snow); }
.masthead {
  margin: 0;
  display: flex; flex-direction: column;
  font: 900 24.5cqw/.8 var(--display); letter-spacing: -.012em; text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.masthead span:last-child { align-self: flex-end; }
.cover-sub {
  margin: 3cqw 0 0; text-align: right;
  font: italic 400 clamp(12px, 3.6cqw, 22px)/1.2 var(--text);
  color: var(--snow);
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 18px rgba(0,0,0,.55);
}
.cover-lines {
  position: absolute; left: 7cqw; right: 22cqw; bottom: 13cqw; margin: 0; padding: 0; list-style: none;
  display: grid; gap: 3.2cqw;
  font: 400 clamp(11px, 2.9cqw, 16px)/1.35 var(--text); color: var(--snow-soft);
}
.cover-lines strong {
  display: block; color: var(--snow);
  font: 800 clamp(16px, 5.4cqw, 32px)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em;
}
.cover-foot {
  position: absolute; left: 7cqw; right: 7cqw; bottom: 5.4cqw; margin: 0;
  display: flex; justify-content: space-between;
  font: 500 clamp(9px, 2.2cqw, 12px)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--snow-soft);
}

/* ── Índice ── */
.contents { position: absolute; inset: 7.5cqw 8cqw 11.5cqw; display: flex; flex-direction: column; }
.contents-title {
  margin: 0 0 2.6cqw;
  font: 300 10.5cqw/.85 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: var(--snow);
}
.contents-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; flex: 1; align-content: start; }
.contents-list button {
  width: 100%; display: grid; grid-template-columns: 8cqw 1fr; column-gap: 3cqw; align-items: baseline;
  padding: .75cqw 0; background: none; border: 0; text-align: left; cursor: pointer;
  transition: transform .35s var(--ease-out);
}
.contents-list .n { grid-row: span 2; font: 300 clamp(13px, 4.4cqw, 24px)/1 var(--display); color: var(--snow-soft); font-variant-numeric: tabular-nums; }
.contents-list .t { font: 500 clamp(13px, 3.9cqw, 22px)/1 var(--display); text-transform: uppercase; color: var(--snow); letter-spacing: .01em; }
.contents-list .d { font: italic 400 clamp(10px, 2.25cqw, 13px)/1.25 var(--text); color: var(--snow-soft); margin-top: .3cqw; }
.contents-list button:hover { transform: translateX(1.4cqw); }
.contents-list button:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }

/* ── Artículo ── */
.story {
  position: absolute; inset: 8.5cqw 8cqw 11cqw;
  display: flex; flex-direction: column;
}
.story-title {
  margin: 0;
  font: 300 clamp(34px, 14.5cqw, 92px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.012em;
  text-wrap: balance;
}
.story--opening .story-title { font-size: clamp(28px, 10.4cqw, 66px); line-height: .9; }
.story-deck {
  margin: 3cqw 0 0; max-width: 34ch;
  font: italic 400 clamp(13px, 3.9cqw, 22px)/1.3 var(--text); color: var(--ink-soft);
  text-wrap: pretty;
}
.story-body { margin-top: 5cqw; }
.story-body p {
  margin: 0 0 1.1em; max-width: 62ch;
  font: 400 clamp(12.5px, 2.95cqw, 17px)/1.55 var(--text);
  text-wrap: pretty; hyphens: auto;
}
.dropcap::first-letter {
  float: left; margin: .02em .09em 0 0;
  font: 800 4.05em/.78 var(--display); text-transform: uppercase;
}
.story-fig { margin: auto 0 0; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 4cqw; }
.story-fig .fig-media { flex: 1 1 auto; min-height: 18cqw; max-height: 62cqw; height: auto; }
.story--figtop .story-fig { margin: 0 0 5cqw; padding-top: 0; flex: 0 0 auto; }
.story--figtop .story-fig .fig-media { height: 42cqw; max-height: none; flex: none; }
.story--figtop .story-title--mix { font-size: clamp(34px, 14cqw, 92px); }
.story--figtop .story-title { margin-top: auto; }
.story-body--cols { columns: 2; column-gap: 5cqw; }
.story-body--cols p { break-inside: avoid-column; }
.story-fig figcaption, .quote-fig figcaption {
  margin-top: 1.8cqw;
  font: italic 400 clamp(10.5px, 2.4cqw, 14px)/1.35 var(--text); color: var(--ink-soft);
}

.pg--carbon .story-title { color: var(--snow); }
.pg--carbon .story-body p { color: #cfccc5; }

.story--threshold { justify-content: flex-start; }
.story--threshold .story-title { font-size: clamp(38px, 19cqw, 120px); }
.story--threshold .story-body { margin-top: 7cqw; }
.story-line {
  margin: auto 0 0; max-width: 18ch;
  font: italic 400 clamp(20px, 7.4cqw, 44px)/1.12 var(--text); color: var(--snow);
  text-wrap: balance;
}

.story--material .story-title { font-size: clamp(32px, 13cqw, 84px); margin-bottom: 5cqw; }
.mat { margin-bottom: 4.5cqw; }
.mat p { margin: 0 0 .8em; font: 400 clamp(12px, 2.8cqw, 16px)/1.5 var(--text); color: #cfccc5; max-width: 60ch; }
.mat-name { margin: 0; font: 800 clamp(17px, 6cqw, 36px)/.95 var(--display); text-transform: uppercase; color: var(--snow); letter-spacing: .01em; }
.mat .mat-sub { margin: 1cqw 0 2cqw; font-style: italic; color: var(--snow-soft); }
.mat .mat-pull { font: italic 400 clamp(15px, 4.6cqw, 27px)/1.2 var(--text); color: var(--snow); margin-top: 1.2em; }
.mat--stone { display: grid; grid-template-columns: 34% 1fr; gap: 5cqw; align-items: start; margin-top: auto; margin-bottom: 0; }
.mat-fig { margin: 0; }
.mat-fig .fig-media { aspect-ratio: 3 / 4; height: auto; }

.story--quote { justify-content: space-between; }
.pull {
  margin: 0; max-width: 14ch;
  font: italic 400 clamp(26px, 10.2cqw, 64px)/1.06 var(--text); color: var(--snow);
  text-wrap: balance;
}
.pull::before { content: ""; display: block; width: 9cqw; height: 1px; background: var(--snow-soft); margin-bottom: 5cqw; }
.quote-fig { margin: 0; }
.quote-fig .fig-media { width: 52%; aspect-ratio: 4 / 5; height: auto; margin-left: auto; }
.quote-fig figcaption { color: var(--snow-soft); max-width: 52%; margin-left: auto; }
.quote-fig strong { font-style: normal; color: var(--snow); font-weight: 600; }

/* Doble página */
.wide-title {
  position: absolute; left: 7cqw; bottom: 8cqw; margin: 0; z-index: 3;
  font: 300 clamp(40px, 21cqw, 140px)/.82 var(--display); text-transform: uppercase; color: var(--snow);
  text-shadow: 0 4px 40px rgba(0,0,0,.45);
}
.wide-caption {
  position: absolute; right: 7cqw; bottom: 8.5cqw; margin: 0; z-index: 3; max-width: 26ch; text-align: right;
  font: italic 400 clamp(13px, 3.6cqw, 21px)/1.3 var(--text); color: var(--snow);
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.pg--wide-r::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,10,9,.55) 0%, rgba(10,10,9,0) 40%);
}
.pg--wide-l::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,10,9,.55) 0%, rgba(10,10,9,0) 40%);
}

/* Contraportada */
.back-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,9,.9) 0%, rgba(10,10,9,.55) 38%, rgba(10,10,9,0) 64%); }
.colophon { position: absolute; left: 8cqw; right: 8cqw; bottom: 9cqw; color: var(--snow); }
.colophon p { margin: 0 0 .5em; font: 400 clamp(12px, 3cqw, 17px)/1.45 var(--text); max-width: 36ch; }
.colophon-mark { font: 900 clamp(30px, 13cqw, 80px)/.85 var(--display) !important; text-transform: uppercase; margin-bottom: 3cqw !important; }
.colophon-by { color: var(--snow-soft); font-style: italic !important; }
.btn-again {
  margin-top: 4cqw; padding: .95em 1.6em; border: 1px solid rgba(235, 233, 228, .45); border-radius: 999px; cursor: pointer;
  background: rgba(13, 13, 12, .2); color: var(--snow);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 800 clamp(12px, 2.9cqw, 16px)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transition: transform .3s var(--ease-out), background-color .3s;
}
.btn-again:hover { background: var(--snow); color: var(--carbon); border-color: var(--snow); }
.btn-again:active { transform: scale(.97); }

/* ── Sombras del pliegue ── */
.shade { position: absolute; pointer-events: none; z-index: 30; }

/* ── Pista inicial ── */
.hint {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 8px); margin: 0;
  padding: 8px 14px; border-radius: 999px; background: rgba(13,13,12,.8);
  font: italic 400 14px/1 var(--text); color: var(--snow-soft);
  opacity: 0; transition: opacity .6s, transform .6s var(--ease-out); pointer-events: none; white-space: nowrap;
}
.hint.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── Barra inferior ── */
.bar {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 14px;
}
.bar-btn {
  width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(235, 233, 228, .2); border-radius: 999px; cursor: pointer;
  background: rgba(13, 13, 12, .35); color: var(--snow);
  transition: background-color .25s, transform .25s var(--ease-out), opacity .25s;
}
.bar-btn:hover { background: var(--snow); color: var(--carbon); border-color: var(--snow); }
.bar-btn:active { transform: scale(.94); }
.bar-btn:disabled { opacity: .22; cursor: default; background: transparent; color: var(--snow); border-color: rgba(235, 233, 228, .2); }
.bar-where {
  min-width: 200px; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  transition: background-color .25s;
}
.bar-where:hover .bar-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.bar-title { font: 500 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--snow); white-space: nowrap; }
.bar-folio { font: 300 13px/1 var(--display); letter-spacing: .1em; color: var(--snow-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 640px) {
  .desk { padding: 68px 12px 74px; }
  .bar-where { min-width: 150px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .book, .edge, .hint, .contents-list button { transition: none; }
}

/* ── Índice desplegable ── */
.bar-grid { color: var(--snow-soft); flex: none; }
.bar-where[aria-expanded="true"] .bar-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.toc {
  position: fixed; inset: 0; z-index: 70;
  display: grid; align-items: end; justify-items: center;
  padding: 16px 16px 82px;
  background: rgba(8, 8, 7, .55);
  opacity: 0; transition: opacity .3s;
}
.toc.is-open { opacity: 1; }
.toc[hidden] { display: none; }
.toc-panel {
  width: min(980px, 100%); max-height: calc(100dvh - 110px); overflow: auto;
  padding: 22px 22px 24px; border-radius: 18px;
  background: #181817; border: 1px solid rgba(235, 233, 228, .1);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
  transform: translateY(14px); transition: transform .45s var(--ease-out);
  scrollbar-width: thin; scrollbar-color: #3a3936 transparent;
}
.toc.is-open .toc-panel { transform: none; }
.toc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.toc-title { margin: 0; font: 300 40px/.9 var(--display); text-transform: uppercase; color: var(--snow); }
.toc-close {
  width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(235, 233, 228, .06); color: var(--snow); transition: background-color .25s;
}
.toc-close:hover { background: rgba(235, 233, 228, .14); }
.toc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.toc-grid button {
  width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline;
}
.toc-grid img {
  grid-column: 1 / -1; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; margin-bottom: 9px;
  border-radius: 3px; background: #222120;
  transition: transform .45s var(--ease-out), filter .45s;
  filter: saturate(.85) brightness(.82);
}
.toc-grid button:hover img, .toc-grid button:focus-visible img { transform: translateY(-3px); filter: none; }
.toc-grid button.is-here img { outline: 1px solid var(--snow); outline-offset: 3px; filter: none; }
.toc-grid .n { font: 300 15px/1 var(--display); color: var(--snow-soft); text-transform: uppercase; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.toc-grid .t { font: 500 15px/1.05 var(--display); color: var(--snow); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 760px) {
  .toc { padding: 10px 10px 76px; }
  .toc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .toc-title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .toc, .toc-panel { transition: none; } }

/* ── Láminas: planta, conexiones, corte y muro ── */
.sheet { position: absolute; inset: 8cqw 7.5cqw 11cqw; display: flex; flex-direction: column; }
.sheet-title { margin: 0; font: 300 clamp(30px, 12.5cqw, 80px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.sheet-deck { margin: 2.4cqw 0 0; max-width: 36ch; font: italic 400 clamp(12.5px, 3.4cqw, 19px)/1.3 var(--text); color: var(--ink-soft); text-wrap: pretty; }
.pg--carbon .sheet-deck { color: var(--snow-soft); }
.sheet-fig { flex: 1 1 auto; min-height: 0; position: relative; margin: 4cqw 0 3cqw; }
.sheet-fig .dw { position: absolute; inset: 0; }
.dw { width: 100%; height: 100%; display: block; overflow: visible; }
.sheet-note { margin: 0; font: italic 400 clamp(10.5px, 2.4cqw, 13px)/1.35 var(--text); color: var(--ink-soft); }
.pg--carbon .sheet-note { color: var(--snow-soft); }
.pg--drawing { color: var(--ink); }
.pg--carbon.pg--drawing { color: var(--snow); }

.dw * { vector-effect: non-scaling-stroke; }
.dw .k-wall, .dw .k-fill, .dw .k-cut { fill: currentColor; stroke: none; }
.dw .k-face { fill: var(--carbon); stroke: none; }
.pg--ash .dw .k-face { fill: var(--ash); }
.dw .k-gap { fill: var(--carbon); stroke: none; }
.pg--ash .dw .k-gap { fill: var(--ash); }
.dw .k-line { fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.dw .k-hair { fill: none; stroke: currentColor; stroke-width: .6; opacity: .38; }
.dw .k-hair--solid { opacity: .55; }
.dw .k-dot { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-dasharray: 0 4.2; stroke-linecap: round; opacity: .75; }
.dw .lbl { font: 500 10.5px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; fill: currentColor; }
.dw .lbl--sm { font-size: 9px; opacity: .6; }
.dw .lbl--wide { letter-spacing: .5em; }
.dw .lbl--num { font: italic 400 13px/1 var(--text); letter-spacing: 0; opacity: .8; }
.wall-legend {
  margin: 0 0 3cqw; padding: 0; list-style: none; counter-reset: w;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw 4cqw;
  font: 400 clamp(11px, 2.6cqw, 15px)/1.3 var(--text); color: #cfccc5;
}
.wall-legend li { counter-increment: w; display: grid; grid-template-columns: 4.2cqw 1fr; }
.wall-legend li::before { content: counter(w); font: italic 400 1em/1.3 var(--text); color: var(--snow-soft); }

/* Trazo: las líneas se dibujan la primera vez que aparece la página */
@media (prefers-reduced-motion: no-preference) {
  .pg--drawing .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1); }
  .pg--drawing.is-live .draw { stroke-dashoffset: 0; }
  .pg--drawing .k-wall, .pg--drawing .k-cut { opacity: 0; transition: opacity .8s ease; }
  .pg--drawing.is-live .k-wall, .pg--drawing.is-live .k-cut { opacity: 1; }
  .pg--drawing .lbl, .pg--drawing .k-dot { opacity: 0; transition: opacity 1s ease 1.1s; }
  .pg--drawing.is-live .lbl { opacity: 1; }
  .pg--drawing.is-live .lbl--sm { opacity: .6; }
  .pg--drawing.is-live .lbl--num { opacity: .8; }
  .pg--drawing.is-live .k-dot { opacity: .75; }
  .pg--drawing .slab { opacity: 0; transform: translateX(-10px); transition: opacity .8s ease, transform 1s var(--ease-out); }
  .pg--drawing.is-live .slab { opacity: 1; transform: none; }
}

/* Miniatura de lámina en el índice */
.toc-draw {
  grid-column: 1 / -1; display: block; aspect-ratio: 3 / 4; margin-bottom: 9px; border-radius: 3px; overflow: hidden;
  background: var(--carbon); color: var(--snow); padding: 10%;
  transition: transform .45s var(--ease-out);
}
.toc-draw .dw { height: 100%; }
.toc-grid button:hover .toc-draw { transform: translateY(-3px); }
.toc-grid button.is-here .toc-draw { outline: 1px solid var(--snow); outline-offset: 3px; }

/* ══ v5: editorial con juego ══════════════════════════════════ */

/* Títulos en contraste de pesos: fino contra negrísimo */
.story-title--mix { font-weight: 300; line-height: .84; }
.story-title--mix .lite { font-weight: 300; }
.story-title--mix .heavy { font-weight: 900; letter-spacing: -.015em; }
.story-title--mix .heavy:only-child { display: block; }
.story .story-title--mix { font-size: clamp(38px, 17cqw, 110px); }
.story--opening .story-title--mix { font-size: clamp(30px, 11.6cqw, 74px); line-height: .88; }
.story--opening .story-title--mix .heavy { display: block; font-size: 1.55em; line-height: .82; margin: .04em 0 .02em -.03em; }
.story--threshold .story-title--mix { font-size: clamp(44px, 24cqw, 150px); hyphens: manual; }
.story--material .story-title--mix { font-size: clamp(36px, 16cqw, 100px); }
.story-title--giant { font-size: clamp(60px, 33cqw, 210px) !important; line-height: .74 !important; margin-left: -.04em; }

/* Palabra gigante que se sale de la página, en diferencia sobre el video */
.bleed {
  position: absolute; left: -1.5cqw; right: -1.5cqw; bottom: -7cqw; z-index: 3; margin: 0; pointer-events: none;
  font: 900 37cqw/.78 var(--display); text-transform: uppercase; letter-spacing: -.02em; text-align: center; white-space: nowrap;
  color: #fff; mix-blend-mode: difference;
}
.bleed--top { top: -3.5cqw; bottom: auto; }
.pg.is-left .bleed { text-align: left; }
.pg.is-right .bleed { text-align: right; }

/* Anotaciones sobre la foto: anillo, línea de pelo y etiqueta */
.annos { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.anno { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.anno i {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 0 0 4px rgba(0,0,0,.08);
}
.anno i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.anno b {
  position: absolute; top: -.62em; white-space: nowrap;
  font: 500 clamp(10.5px, 2.6cqw, 15px)/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.5);
  padding-left: 0;
}
.anno b::before {
  content: ""; position: absolute; top: .5em; width: 7cqw; height: 1px; background: rgba(255,255,255,.85);
}
.anno--r b { left: calc(7px + 8cqw); }
.anno--r b::before { right: calc(100% + 1cqw); }
.anno--l b { right: calc(7px + 8cqw); }
.anno--l b::before { left: calc(100% + 1cqw); }
@media (prefers-reduced-motion: no-preference) {
  .anno i { transform: scale(0); transition: transform .6s var(--ease-out); }
  .anno b { opacity: 0; transform: translateY(4px); transition: opacity .6s ease .25s, transform .7s var(--ease-out) .25s; }
  .anno b::before { transform: scaleX(0); transition: transform .7s var(--ease-out) .15s; }
  .anno--r b::before { transform-origin: left; }
  .anno--l b::before { transform-origin: right; }
  .pg.is-live .anno i { transform: none; }
  .pg.is-live .anno b { opacity: 1; transform: none; }
  .pg.is-live .anno b::before { transform: none; }
  .pg.is-live .anno:nth-child(2) i, .pg.is-live .anno:nth-child(2) b, .pg.is-live .anno:nth-child(2) b::before { transition-delay: .5s; }
}

/* Fresh paint: el video sólo se ve dentro de las letras */
.pg--knock { background: var(--carbon); }
.pg--knock .pg-media { filter: brightness(1.9) contrast(1.15) grayscale(.2); }
.knock {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; padding: 6cqw 5cqw 0;
  background: var(--carbon); color: #fff; mix-blend-mode: multiply;
  font: 900 46cqw/.8 var(--display); text-transform: uppercase; letter-spacing: .005em;
}
.knock span:last-child { font-size: .72em; }
.knock-copy { position: absolute; left: 8cqw; right: 8cqw; bottom: 12cqw; z-index: 4; color: var(--snow); }
.knock-copy .pull { font-size: clamp(20px, 7.4cqw, 46px); max-width: 15ch; }
.knock-copy .pull::before { margin-bottom: 4cqw; }
.knock-cap { margin: 4cqw 0 0; max-width: 40ch; font: italic 400 clamp(11px, 2.6cqw, 14px)/1.4 var(--text); color: var(--snow-soft); }
.knock-cap strong { font-style: normal; font-weight: 600; color: var(--snow); }

/* Sello giratorio de portada */
.seal { position: absolute; right: 5.5cqw; bottom: 13cqw; width: 17cqw; height: 17cqw; z-index: 3; color: var(--snow); overflow: visible; }
.seal text { font: 500 9.6px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; fill: currentColor; }
.seal-arrow { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transform-origin: 60px 60px; }
.seal-spin { transform-origin: 60px 60px; }
@media (prefers-reduced-motion: no-preference) {
  .seal-spin { animation: seal-spin 28s linear infinite; }
}
@keyframes seal-spin { to { transform: rotate(360deg); } }

.wide-title .lite { font-weight: 300; }
.wide-title .heavy { font-weight: 900; display: block; letter-spacing: -.015em; }

/* ── Modo grabación (?reel=1): sin cromo, animaciones manejadas por el guion ── */
.is-reel .mockup-badge, .is-reel .showroom-back, .is-reel .bar, .is-reel .hint, .is-reel .toc, .is-reel .rum-rum-widget { display: none !important; }
.is-reel .desk { padding: 210px 30px 250px !important; }
.is-reel .book, .is-reel .book-floor, .is-reel .edge { transition: none !important; }
.is-reel .seal-spin { animation-play-state: paused; animation-delay: calc(var(--reel-t, 0) * -1s); }
.is-reel .pg--drawing .draw { transition: none !important; stroke-dashoffset: calc(1 - var(--p1, 1)); }
.is-reel .pg--drawing .k-wall, .is-reel .pg--drawing .k-cut { transition: none !important; opacity: var(--p1, 1); }
.is-reel .pg--drawing .lbl, .is-reel .pg--drawing .k-dot { transition: none !important; opacity: var(--p2, 1); }
.is-reel .pg--drawing .slab { transition: none !important; opacity: var(--p1, 1); transform: translateX(calc((1 - var(--p1, 1)) * -10px)); }
.is-reel .anno i { transition: none !important; transform: scale(var(--p1, 1)); }
.is-reel .anno b { transition: none !important; opacity: var(--p2, 1); transform: none; }
.is-reel .anno b::before { transition: none !important; transform: scaleX(var(--p2, 1)); }
.reel-top, .reel-bottom { position: fixed; left: 0; right: 0; z-index: 90; text-align: center; color: var(--snow); pointer-events: none; }
.reel-top { top: 92px; font: 500 30px/1 var(--display); letter-spacing: .32em; text-transform: uppercase; }
.reel-top small { display: block; margin-top: 16px; font: italic 400 26px/1.2 var(--text); letter-spacing: 0; text-transform: none; color: var(--snow-soft); }
.reel-bottom { bottom: 120px; font: 500 24px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--snow-soft); }
.reel-finger {
  position: fixed; left: 0; top: 0; z-index: 95; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); pointer-events: none; opacity: 0;
}
.reel-end {
  position: fixed; inset: 0; z-index: 99; display: grid; place-content: center; text-align: center; gap: 28px;
  background: var(--desk); color: var(--snow); opacity: 0; pointer-events: none;
}
.reel-end .m { font: 900 150px/.82 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.reel-end .s { font: italic 400 38px/1.3 var(--text); color: var(--snow-soft); }
.reel-end .b { margin-top: 40px; font: 500 34px/1 var(--display); letter-spacing: .4em; text-transform: uppercase; }

/* ── Anotaciones vivas: onda que late + línea que se dibuja + texto en cortina ── */
.anno i::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,255,255,.9);
  opacity: 0; pointer-events: none;
}
@keyframes anno-pulse { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .pg.is-live .anno i::before { animation: anno-pulse 2.2s cubic-bezier(.2, .6, .3, 1) 1.2s infinite; }
  .pg.is-live .anno:nth-child(2) i::before { animation-delay: 1.9s; }
  .anno b { clip-path: inset(-20% 100% -20% -400%); transition: opacity .3s ease .55s, clip-path .8s cubic-bezier(.65, 0, .35, 1) .55s; }
  .anno--l b { clip-path: inset(-20% -400% -20% 100%); }
  .pg.is-live .anno b { clip-path: inset(-20% -400% -20% -400%); }
  .pg.is-live .anno i { transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
}

/* En el reel todo lo maneja el guion: --p1 punto, --p2 línea y texto, --p3 la segunda anotación */
.is-reel .anno i { transform: scale(var(--p1, 1)); }
.is-reel .anno b { opacity: 1; clip-path: inset(-20% calc((1 - max(0, var(--p2, 1) * 2 - 1)) * 100%) -20% -400%); }
.is-reel .anno--l b { clip-path: inset(-20% -400% -20% calc((1 - max(0, var(--p2, 1) * 2 - 1)) * 100%)); }
.is-reel .anno b::before { transform: scaleX(min(1, calc(var(--p2, 1) * 2))); }
.is-reel .anno:nth-child(2) i { transform: scale(var(--p3, 1)); }
.is-reel .anno:nth-child(2) b { clip-path: inset(-20% calc((1 - max(0, var(--p4, 1) * 2 - 1)) * 100%) -20% -400%); }
.is-reel .anno--l:nth-child(2) b { clip-path: inset(-20% -400% -20% calc((1 - max(0, var(--p4, 1) * 2 - 1)) * 100%)); }
.is-reel .anno:nth-child(2) b::before { transform: scaleX(min(1, calc(var(--p4, 1) * 2))); }
.is-reel .anno i::before { animation: anno-pulse 2.2s cubic-bezier(.2, .6, .3, 1) infinite paused; animation-delay: calc(var(--reel-t, 0) * -1s); }
.is-reel .anno:nth-child(2) i::before { animation-delay: calc(var(--reel-t, 0) * -1s + 1.1s); }

/* Reel: anotaciones legibles en teléfono */
.is-reel .anno i { width: 30px; height: 30px; left: -15px; top: -15px; border-width: 2px; }
.is-reel .anno i::after { inset: 9px; }
.is-reel .anno i::before { border-width: 2px; }
.is-reel .anno b { font-size: 30px; letter-spacing: .14em; top: -.55em; text-shadow: 0 2px 16px rgba(0,0,0,.7), 0 0 3px rgba(0,0,0,.6); }
.is-reel .anno b::before { height: 2px; width: 90px; top: .48em; }
.is-reel .anno--r b { left: 128px; }
.is-reel .anno--r b::before { right: calc(100% + 14px); }
.is-reel .anno--l b { right: 128px; }
.is-reel .anno--l b::before { left: calc(100% + 14px); }