/* Base, chrome fijo, loader y capas */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--terracota) transparent; }
html, body { margin: 0; background: var(--lino); color: var(--carbon); }
body {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-loading { overflow: hidden; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--terracota); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: var(--terracota); color: var(--lino); }
img, svg, canvas { display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
p { margin: 0; }
em { font-style: italic; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 16px;
  background: var(--carbon); color: var(--lino); font: 500 13px/1 var(--sans); text-decoration: none;
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }
.label { font: 500 var(--fs-label)/1.35 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.noscript { position: fixed; inset: auto 20px 20px; z-index: 60; padding: 16px; background: var(--carbon); color: var(--lino); }

:focus-visible { outline: 2px solid var(--terracota); outline-offset: 4px; }

/* ——— Escena ——— */
.stage { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; z-index: 0; }
.veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--shade), var(--vl, 0)) 0%, rgba(var(--shade), calc(var(--vl, 0) * .8)) 15%, rgba(var(--shade), calc(var(--vl, 0) * .55)) 30%, rgba(var(--shade), calc(var(--vl, 0) * .25)) 45%, rgba(var(--shade), calc(var(--vl, 0) * .07)) 56%, rgba(var(--shade), 0) 66%),
    linear-gradient(270deg, rgba(var(--shade), var(--vr, 0)) 0%, rgba(var(--shade), calc(var(--vr, 0) * .8)) 15%, rgba(var(--shade), calc(var(--vr, 0) * .55)) 30%, rgba(var(--shade), calc(var(--vr, 0) * .25)) 45%, rgba(var(--shade), calc(var(--vr, 0) * .07)) 56%, rgba(var(--shade), 0) 66%),
    linear-gradient(0deg, rgba(var(--shade), var(--vb, 0)) 0%, rgba(var(--shade), calc(var(--vb, 0) * .6)) 26%, rgba(var(--shade), 0) 52%),
    linear-gradient(180deg, rgba(var(--shade), var(--vt, 0)) 0, rgba(var(--shade), calc(var(--vt, 0) * .5)) calc(var(--vth) * .55), rgba(var(--shade), 0) var(--vth)),
    radial-gradient(130% 95% at 50% 46%, rgba(var(--shade), 0) 52%, rgba(var(--shade), var(--vv, 0)) 100%),
    /* Velo de papel para el texto oscuro (muebles en el teléfono) */
    linear-gradient(180deg, rgba(var(--paper), var(--vpt, 0)) 0, rgba(var(--paper), calc(var(--vpt, 0) * .5)) calc(var(--vth) * .55), rgba(var(--paper), 0) var(--vth)),
    linear-gradient(0deg, rgba(var(--paper), var(--vpb, 0)) 0%, rgba(var(--paper), calc(var(--vpb, 0) * .6)) 26%, rgba(var(--paper), 0) 52%);
  --vth: 150px;
  --paper: 242, 235, 224;
}
@media (max-width: 1180px) { .veil { --vth: 30vh; } }
@media (max-width: 760px) { .veil { --vth: 34vh; } }
.fade { position: fixed; inset: 0; z-index: 3; background: var(--lino); opacity: 0; pointer-events: none; }
.annot { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; }
.tags { position: fixed; inset: 0; z-index: 4; pointer-events: none; }

/* ——— Grano de papel impreso ——— */
.grain {
  position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .32  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ——— Loader: el arco del sol ——— */
.loader {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: var(--lino); color: var(--carbon);
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s var(--ease-io);
}
.loader.is-out { clip-path: inset(0 0 100% 0); }
.loader__inner { display: grid; justify-items: center; gap: 22px; }
.loader__arc { width: min(240px, 60vw); height: auto; overflow: visible; }
.loader__track { fill: none; stroke: rgba(42, 35, 30, .16); stroke-width: 1; stroke-dasharray: 2 5; }
.loader__fill { fill: none; stroke: var(--terracota); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 1; }
.loader__ground { stroke: var(--carbon); stroke-width: 1; }
.loader__sun { fill: var(--terracota); }
.loader__name { font: 300 30px/1 var(--serif); letter-spacing: -.02em; }
.loader__name em { font-style: normal; }
.loader__msg { font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--carbon-2); }
.loader__pct { font-variant-numeric: tabular-nums; }

/* ——— Barra superior ——— */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: 0 var(--margin);
  color: var(--ui, var(--carbon));
  transition: color .6s var(--ease);
}
body[data-tone="paper"] { --ui: var(--lino); }
body[data-tone="paper"] .index a,
body[data-tone="paper"] .wordmark,
body[data-tone="paper"] .folio > span { text-shadow: 0 1px 2px rgba(28, 20, 14, .35), 0 0 18px rgba(28, 20, 14, .5); }
body[data-tone="paper"] .index a { opacity: .78; }
body[data-tone="paper"] .index a:hover, body[data-tone="paper"] .index a.is-active { opacity: 1; }
.wordmark {
  justify-self: start; display: inline-flex; align-items: baseline; gap: .26em;
  font: 400 21px/1 var(--serif); letter-spacing: -.012em; text-decoration: none;
  transition: opacity .6s var(--ease);
}
.wordmark__pre { font-style: italic; font-weight: 300; }
body[data-chapter="0"] .wordmark { opacity: 0; pointer-events: none; }
.index { transition: opacity .5s var(--ease); }
.index ol { display: flex; gap: clamp(14px, 1.7vw, 30px); list-style: none; margin: 0; padding: 0; }
.index a {
  display: inline-flex; align-items: baseline; gap: .45em; padding: 8px 0;
  font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  opacity: .58; transition: opacity .35s var(--ease);
}
.index a:hover, .index a.is-active { opacity: 1; }
.index__n { font: italic 400 14px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.index__bar { display: block; position: relative; height: 1px; margin-top: 2px; }
.index__bar::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .22; }
.index__bar i { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(var(--p, 0)); }
body.is-visit .index, body[data-chapter="0"] .index { opacity: 0; pointer-events: none; }
.topbar { transition: color .6s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease); }
/* Sobre el ventanal (planos cenitales de IV) la barra lleva su propio papel velado */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 30px); z-index: -2; pointer-events: none;
  background: linear-gradient(rgba(240, 232, 220, .92), rgba(240, 232, 220, .7) 58%, rgba(240, 232, 220, 0));
  opacity: 0; transition: opacity .5s var(--ease);
}
body[data-tone="ink"][data-chapter="4"] .topbar::after {
  opacity: 1;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
}

.pill {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--terracota); color: var(--lino); text-decoration: none;
  font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.pill:hover { background: var(--terracota-2); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }

/* ——— Folio inferior ——— */
.folio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 52px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--margin);
  font: 500 12px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ui, var(--carbon)); transition: color .6s var(--ease), opacity .6s var(--ease);
  pointer-events: none;
}
.folio > span { opacity: .82; }
.folio__r { justify-self: end; font-variant-numeric: tabular-nums; }
.folio__c { font-variant-numeric: tabular-nums; }
.folio__time { font: italic 400 15px/1 var(--serif); letter-spacing: 0; text-transform: none; }
body.is-visit .folio { opacity: 0; }

.progress { display: none; }

/* ——— Capas de texto sincronizadas con la cámara ——— */
.layer { position: fixed; inset: 0; z-index: 5; pointer-events: none; color: var(--lino); }
[data-beat] { opacity: 0; visibility: hidden; will-change: opacity, translate; }
/* La máscara respira hacia todos lados: tildes, descendentes y el vuelo de la itálica nunca se cortan */
.ln { display: block; overflow: hidden; padding: .2em .14em .12em; margin: -.2em -.14em -.12em; }
.ln > span { display: inline-block; will-change: transform; }

@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0 20px; }
  .index { display: none; }
  .wordmark { font-size: 19px; }
  .pill { padding: 11px 15px; }
  .folio { display: none; }
  .progress { display: block; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 21; pointer-events: none; }
  .progress i { display: block; height: 100%; background: var(--terracota); transform-origin: left; transform: scaleX(var(--p, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  .loader { transition-duration: .6s; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}