/* Capítulos: la revista impresa sobre la escena */

/* ——— Portada ——— */
.layer--cover { color: var(--carbon); }
.mast {
  position: absolute; left: 0; right: 0; top: calc(var(--bar-h) - 12px); margin: 0;
  text-align: center; font-weight: 300; line-height: .8;
}
.mast__pre {
  display: block; margin-bottom: .35em;
  font: italic 300 clamp(20px, 1.9vw, 32px)/1 var(--serif); letter-spacing: -.005em;
}
.mast__name {
  display: block; font-size: clamp(76px, 17vw, 330px); font-weight: 330;
  letter-spacing: -.052em; font-variation-settings: "opsz" 56;
}
.mast__name .ln { padding: .22em .12em .14em; margin: -.22em -.12em -.14em; }
.cover__left { position: absolute; left: var(--margin); bottom: 86px; width: var(--span-3); max-width: 360px; }
.cover__left .label { margin-bottom: 18px; color: var(--terracota-2); }
.cover__lede {
  font-size: clamp(22px, 1.75vw, 30px); line-height: 1.16; font-weight: 350; letter-spacing: -.012em;
  font-variation-settings: "opsz" 36; text-wrap: balance;
}
.cover__lede em { color: var(--terracota-2); }
.cover__sub { margin-top: 14px; font-size: 17px; line-height: 1.45; color: var(--carbon-2); text-wrap: pretty; }
.cover__toc {
  position: absolute; right: var(--margin); bottom: 86px; width: var(--span-3); max-width: 340px;
  list-style: none; margin: 0; padding: 0; font-size: 17px; line-height: 1.2;
}
.cover__toc li {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline;
  padding: 9px 0 8px; border-top: 1px solid rgba(42, 35, 30, .22);
}
.cover__toc li:last-child { border-bottom: 1px solid rgba(42, 35, 30, .22); }
.cover__toc span { font-style: italic; color: var(--terracota-2); }
.cover__toc i { font: 500 12px/1 var(--sans); font-style: normal; letter-spacing: .1em; color: var(--carbon-2); }
.cover__cue {
  position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.cover__cue i { display: block; width: 1px; height: 34px; background: currentColor; transform-origin: top; animation: cue 2.4s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ——— Capítulos interiores ——— */
.layer--obra, .layer--luz, .layer--materia, .layer--vida { color: var(--lino); text-shadow: 0 1px 28px rgba(22, 17, 13, .3); }
.layer--muebles { color: var(--carbon); }
/* En la mañana de luz rasante el texto chico cae sobre la pared en sombra: más claro y con halo oscuro */
.layer--luz .ch__body, .layer--luz .ch__note { color: #F4EBDD; text-shadow: 0 1px 2px rgba(22, 17, 13, .5), 0 0 34px rgba(22, 17, 13, .55); }
/* Sobre el roble a media luz el texto chico lleva un halo de papel */
.layer--muebles .ch__body, .layer--muebles .ch__note { color: #1F1914; text-shadow: 0 0 2px rgba(242, 235, 224, .75), 0 0 26px rgba(242, 235, 224, .95); }
.ch__head { position: absolute; left: var(--margin); top: calc(var(--bar-h) + 6.5vh); width: var(--span-6); }
.kicker {
  display: flex; align-items: baseline; gap: .9em; margin: 0 0 clamp(14px, 2.2vh, 26px);
  font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.kicker__n { font: italic 400 18px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.h {
  margin: 0; font-weight: 320; font-size: var(--fs-h); line-height: .92; letter-spacing: -.034em;
  font-variation-settings: "opsz" 60; text-wrap: balance;
}
.h em { font-weight: 320; letter-spacing: -.028em; }
.h--sm { font-size: calc(var(--fs-h) * .9); }
/* Tablet: el titular no invade la ventana del cuadro */
@media (min-width: 761px) and (max-width: 1100px) {
  .h { font-size: min(var(--fs-h), 7vw); }
  .h--sm { font-size: min(calc(var(--fs-h) * .9), 6.4vw); }
}
.ch__body {
  position: absolute; left: var(--margin); bottom: 92px; width: var(--span-4); max-width: 30em;
  font-size: var(--fs-lede); line-height: 1.42; text-wrap: pretty;
}
.ch__note {
  position: absolute; right: var(--margin); bottom: 92px; width: var(--span-3); max-width: 330px;
  font-size: 17px; line-height: 1.45; text-wrap: pretty;
}
.ch__note .label { display: block; margin-bottom: 12px; padding-top: 12px; border-top: 1px solid currentColor; }
.ch__note--time .label { font: italic 300 44px/1 var(--serif); letter-spacing: -.02em; text-transform: none; border-top: 0; padding-top: 0; margin-bottom: 10px; }

/* Palabras a escala arquitectónica */
.giant {
  position: absolute; margin: 0; white-space: nowrap; pointer-events: none;
  font-size: var(--fs-giant); font-weight: 240; line-height: .76; letter-spacing: -.05em;
  font-variation-settings: "opsz" 72; text-shadow: none;
}
/* "Luz" vive sobre la pared en sombra, nunca contra la ventana */
.giant--luz { left: calc(var(--margin) - .04em); top: 45vh; color: #FBF3E4; text-shadow: 0 0 90px rgba(22, 17, 13, .38); }
.giant--materia { left: 50%; bottom: 7vh; transform: translateX(-50%); font-size: min(21vw, 400px); font-weight: 260; letter-spacing: -.06em; }

/* ——— VI · Coda: la película termina sobre el cuarto al atardecer ——— */
.layer--coda { color: var(--lino); text-shadow: 0 1px 30px rgba(22, 17, 13, .35); }
.coda {
  position: absolute; left: var(--margin); bottom: max(236px, 27vh); width: var(--span-6);
  font-size: clamp(64px, min(8.2vw, 14vh), 152px); font-weight: 320; line-height: .9; letter-spacing: -.04em;
  font-variation-settings: "opsz" 60;
}
.coda .label { display: block; margin-bottom: 22px; font-size: 12px; line-height: 1; letter-spacing: .16em; }
.coda em { color: #F0C9A8; }

/* ——— Etiquetas proyectadas desde el 3D ——— */
.tag { position: absolute; left: 0; top: 0; visibility: hidden; --in: 0; will-change: transform; }
.tag__dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--lino); box-shadow: 0 0 0 5px rgba(242, 235, 224, .24), 0 1px 6px rgba(22, 17, 13, .4);
  transform: scale(min(1, calc(var(--in) * 3)));
}
.tag__stem {
  position: absolute; left: -.5px; bottom: 0; width: 1px; height: 76px; background: var(--lino);
  box-shadow: 0 0 3px rgba(22, 17, 13, .35); transform-origin: bottom;
  transform: scaleY(clamp(0, calc(var(--in) * 2.4 - .5), 1));
}
.tag__card {
  position: absolute; left: 0; bottom: 76px; width: 232px; padding: 13px 16px 15px;
  background: rgba(242, 235, 224, .97); color: var(--carbon);
  box-shadow: 0 16px 34px -18px rgba(22, 17, 13, .5);
  opacity: clamp(0, calc(var(--in) * 2.6 - 1.6), 1);
  transform: translateY(calc((1 - var(--in)) * 10px));
}
.tag--left .tag__card { left: auto; right: 0; }
.tag__k { display: block; font: 500 12px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--terracota-2); }
.tag__card strong { display: block; margin: 8px 0 6px; font: 400 23px/1.08 var(--serif); letter-spacing: -.015em; }
.tag__card strong + span { display: block; font-size: 16px; line-height: 1.38; color: var(--carbon-2); }

/* ——— Anotaciones de planta ——— */
.annot { color: var(--carbon); }
.annot .a-line { stroke: currentColor; stroke-width: 1; fill: none; }
.annot .a-thin { stroke: currentColor; stroke-width: 1; fill: none; opacity: .5; }
.annot .a-sun { stroke: var(--terracota); stroke-width: 1.3; fill: none; stroke-dasharray: 2 6; stroke-linecap: round; }
.annot .a-sundot { fill: var(--terracota); }
.annot .a-cut { stroke: currentColor; stroke-width: 1; fill: none; stroke-dasharray: 14 4 2 4; opacity: .7; }
.annot text { font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; fill: currentColor; }
.annot .a-it { font: italic 400 19px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.annot .a-sunlbl { fill: var(--terracota-2); }
.annot .a-bg { fill: var(--lino); }

/* ——— Teléfono: otra composición, misma película ——— */
@media (max-width: 760px) {
  .mast { top: calc(var(--bar-h) + 6px); }
  .mast__pre { font-size: 18px; }
  .mast__name { font-size: 21.5vw; letter-spacing: -.05em; }
  .cover__left { left: 20px; right: 20px; bottom: 64px; width: auto; max-width: none; }
  .cover__left .label { margin-bottom: 12px; }
  .cover__lede { font-size: 23px; }
  .cover__sub { display: none; }
  .cover__toc { display: none; }
  .cover__cue { bottom: 22px; flex-direction: row; gap: 10px; }
  .cover__cue i { height: 18px; }

  .ch__head { left: 20px; right: 20px; top: calc(var(--bar-h) + 30px); width: auto; }
  .kicker { margin-bottom: 12px; }
  .ch__body { left: 20px; right: 20px; bottom: 30px; width: auto; font-size: 18px; line-height: 1.42; }
  .ch__note { display: none; }
  /* La hora se apoya sobre el piso en penumbra, debajo del living: el ambiente queda limpio arriba */
  .ch__note--time { display: block; left: 20px; right: auto; top: auto; bottom: calc(14vh + env(safe-area-inset-bottom, 0px)); width: 76vw; }
  .ch__note--time .label { font-size: 38px; }
  /* Sobre el ventanal, el título oscuro de muebles lleva el mismo halo de papel que el cuerpo */
  .layer--muebles .ch__head { text-shadow: 0 0 2px rgba(242, 235, 224, .8), 0 0 30px rgba(242, 235, 224, .95); }
  .giant--luz { top: auto; bottom: 31vh; left: 14px; }
  .coda { left: 20px; right: 20px; bottom: auto; top: calc(var(--bar-h) + 18px); width: auto; font-size: 17vw; }
  .coda .label { margin-bottom: 14px; }
  .giant--materia { font-size: 23vw; bottom: 30vh; }

  .tag__card { width: 176px; padding: 10px 12px 12px; }
  .tag__card strong { font-size: 19px; }
  .tag__card strong + span { display: none; }
  .tag__stem { height: 48px; }
  .tag__card { bottom: 48px; }
  .annot text { font-size: 12px; letter-spacing: .1em; }
  .annot .a-it { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cover__cue i { animation: none; }
}