/* Conspicuus V4 · «disciplina estructural × contenido expresivo × movimiento preciso».
   Interfaz: retícula de 12, reglas de 1 px, índices y referencias, geometría rectilínea, sin tarjetas.
   Contenido: la fotografía y la luz. Corte único del taller: 56.25rem. Sin framework ni librerías. */
@font-face { font-family: 'Bodoni Moda'; src: url('fuentes/bodoni-moda-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: 'Bodoni Moda'; src: url('fuentes/bodoni-moda-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fuentes/schibsted-grotesk.woff2') format('woff2'); font-weight: 400 700; font-display: swap }

@view-transition { navigation: auto }

:root {
  --noche: #0c0a08; --lamina: #0f0c09; --brasa: #1d1712; --lino: #f3ead8; --vela: #f5b55e; --filamento: #ffe2b0; --cobre: #c1773f; --humo: #a69c8c;
  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', serif; --texto: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  /* escala: nueve pasos y ni uno más */
  --t-meta: 0.8125rem; --t-menor: 0.9375rem; --t-cuerpo: 1.0625rem; --t-lede: 1.25rem;
  --t-h3: clamp(1.5rem, 1.1rem + 1.1vw, 2rem);
  --t-h2: clamp(2rem, 1.3rem + 2vw, 3.1rem);
  --t-h1: clamp(2.5rem, 1.3rem + 3.2vw, 4.25rem);
  --t-firma: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem);
  --t-cifra: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
  /* gramática temporal (MOTION-V4.md) */
  --d-micro: 160ms; --d-estado: 280ms; --d-revela: 640ms; --d-exposicion: 1100ms; --d-firma: 1600ms;
  --c-ui: cubic-bezier(.2, .8, .2, 1);
  --c-optica: cubic-bezier(.16, .84, .24, 1);
  --c-filamento: cubic-bezier(.6, .02, .25, 1);
  --c-off: cubic-bezier(.2, .7, .3, 1);
  --hilo: 1px solid rgb(193 119 63 / .3);
  --hilo-suave: 1px solid rgb(193 119 63 / .16);
  --riel: 15rem; --barra: 3.5rem;
  --margen: clamp(1.25rem, 4vw, 4rem);
  --seccion: clamp(4.5rem, 2.5rem + 5vw, 8rem);
  --col: 1.5rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; interpolate-size: allow-keywords }
body { margin: 0; background: var(--noche); color: var(--lino); font-family: var(--texto); font-size: var(--t-cuerpo); line-height: 1.6; font-synthesis: none; overflow-x: clip }
img { display: block; max-inline-size: 100%; block-size: auto }
[hidden] { display: none !important }
picture { display: block }
a { color: inherit }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 500; line-height: 1.02; letter-spacing: -0.016em; text-wrap: balance; font-variation-settings: 'opsz' 52 }
h1 em, h2 em, .siguiente em { font-style: italic; font-weight: 400; color: var(--humo) }
p, ul, ol, dl, figure, blockquote, fieldset { margin: 0 }
ul, ol { padding: 0; list-style: none }
p { text-wrap: pretty }
em { font-style: italic; font-weight: 400 }
small { font-size: .55em; font-family: var(--texto); color: var(--humo) }
:focus-visible { outline: 2px solid var(--filamento); outline-offset: 3px }
main:focus { outline: none }
.saltar { position: absolute; inset-inline-start: -999px; inset-block-start: 0; z-index: 60; background: var(--vela); color: var(--noche); padding: .75rem 1rem; font-weight: 600 }
.saltar:focus { inset-inline-start: 1rem }
.ic { inline-size: 1.05em; block-size: 1.05em; flex: none; transition: transform var(--d-estado) var(--c-ui) }
.n { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1 }
.fuente { font-size: var(--t-meta); color: var(--humo); line-height: 1.5; max-inline-size: 62ch }
.ref { color: var(--lino); font-weight: 600; font-size: var(--t-meta) }

/* ── revelado de títulos: una línea que sube desde su máscara; nunca oculto sin JS ── */
.revela__linea { display: block; overflow: clip; padding-block-end: .08em; margin-block-end: -.08em }
.revela__linea > span { display: block }
.js .revela[data-espera] .revela__linea > span { transform: translateY(108%) }
.js .revela.visto .revela__linea > span { transform: none; transition: transform 820ms var(--c-optica) }

/* ── acciones ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-block-size: 3rem; padding: .85rem 1.15rem; border: 1px solid transparent; border-radius: 0; font-family: var(--texto); font-size: var(--t-menor); font-weight: 600; line-height: 1.1; text-decoration: none; cursor: pointer; transition: background-color var(--d-micro) var(--c-ui), border-color var(--d-micro) var(--c-ui), color var(--d-micro) var(--c-ui) }
.boton--primario { background: var(--vela); color: var(--noche) }
.boton--primario:hover { background: var(--filamento) }
.boton--secundario { border-color: rgb(243 234 216 / .38); color: var(--lino) }
.boton--secundario:hover { border-color: var(--filamento); color: var(--filamento) }
.boton:active { transform: translateY(1px) }
.boton:hover .ic, .enlace:hover .ic, .siguiente:hover .ic, .archivo__enlace:hover .ic { transform: translateX(3px) }
.boton:hover .ic--ext, .enlace:hover .ic--ext { transform: translate(2px, -2px) }
.enlace { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 2.75rem; padding: 0; border: 0; background: none; color: var(--lino); font: 600 var(--t-menor)/1.3 var(--texto); text-decoration: underline 1px; text-decoration-color: var(--cobre); text-underline-offset: .4em; cursor: pointer; transition: color var(--d-micro) var(--c-ui), text-decoration-color var(--d-micro) var(--c-ui) }
.enlace:hover { color: var(--filamento); text-decoration-color: var(--filamento) }
.enlace--menor { font-size: var(--t-meta) }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem }
.conmutador { display: inline-flex; align-items: center; gap: .55rem; min-block-size: 2.75rem; padding: 0 .1rem; border: 0; background: none; color: var(--lino); font: 600 var(--t-meta)/1 var(--texto); cursor: pointer; transition: color var(--d-micro) var(--c-ui) }
.conmutador:hover { color: var(--filamento) }
.conmutador__foco { inline-size: 7px; block-size: 7px; border: 1px solid var(--humo); transition: background-color var(--d-estado) var(--c-ui), border-color var(--d-estado) var(--c-ui), box-shadow var(--d-estado) var(--c-ui) }
.conmutador[aria-pressed="true"] .conmutador__foco { background: var(--filamento); border-color: var(--filamento); box-shadow: 0 0 6px rgb(255 226 176 / .6) }

/* ── consola lateral (escritorio) ── */
.consola { position: fixed; z-index: 30; inset: 0 auto 0 0; inline-size: var(--riel); display: flex; flex-direction: column; padding: 1.25rem; background: var(--brasa); border-inline-end: var(--hilo); view-transition-name: consola }
.consola__cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-block-end: 1.1rem; border-block-end: var(--hilo) }
.marca { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.4rem; text-decoration: none; color: var(--lino); font-variation-settings: 'opsz' 28 }
.idioma { display: inline-grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; border: var(--hilo); color: var(--lino); font-size: var(--t-meta); font-weight: 600; letter-spacing: .06em; text-decoration: none; transition: border-color var(--d-micro) var(--c-ui), color var(--d-micro) var(--c-ui) }
.idioma:hover { border-color: var(--filamento); color: var(--filamento) }
.consola__abrir, .consola__velo { display: none }
.consola__panel { display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-block-size: 0; padding-block-start: 1rem }
.canales a { display: grid; grid-template-columns: 1.6rem 2.25rem 1fr; align-items: center; gap: .7rem; min-block-size: 2.75rem; color: var(--humo); font-size: var(--t-menor); font-weight: 500; text-decoration: none; transition: color var(--d-micro) var(--c-ui) }
.canal__n { font-size: var(--t-meta); color: rgb(166 156 140 / .7) }
.canal__riel { position: relative; block-size: 1px; background: rgb(193 119 63 / .42) }
.canal__perilla { position: absolute; inset-block-start: -5px; inset-inline-start: 0; inline-size: 5px; block-size: 11px; background: var(--cobre); transition: transform var(--d-estado) var(--c-ui), background-color var(--d-estado) var(--c-ui) }
.canales a:hover { color: var(--lino) }
.canales a:hover .canal__perilla { transform: translateX(.9rem) }
.canales a[aria-current="page"] { color: var(--lino) }
.canales a[aria-current="page"] .canal__n { color: var(--filamento) }
.canales a[aria-current="page"] .canal__perilla { transform: translateX(calc(2.25rem - 5px)); background: var(--filamento); box-shadow: 0 0 6px rgb(255 226 176 / .5) }
.canales__sub { margin-inline-start: 2.3rem; border-inline-start: var(--hilo-suave); padding-inline-start: .3rem }
.canales__sub a { grid-template-columns: 1.6rem 1fr; min-block-size: 2.75rem; font-size: var(--t-meta) }
.canales__sub .canal__riel { inline-size: 1.6rem }
.canales__sub a:hover .canal__perilla { transform: translateX(.6rem) }
.canales__sub a[aria-current="page"] .canal__perilla { transform: translateX(calc(1.6rem - 5px)) }
.consola__pie { display: grid; gap: .25rem; padding-block-start: 1rem; border-block-start: var(--hilo) }
.consola__wa { display: grid; gap: .1rem; min-block-size: 2.75rem; padding-block: .35rem; text-decoration: none; font-weight: 600; font-size: var(--t-menor); transition: color var(--d-micro) var(--c-ui) }
.consola__wa:hover { color: var(--filamento) }
.consola__tel { font-weight: 400; color: var(--humo) }
.consola__redes { display: flex; gap: 1rem; font-size: var(--t-meta); color: var(--humo) }
.consola__redes a { display: inline-flex; align-items: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; text-decoration: none }
.consola__redes a:hover { color: var(--lino) }
main, .pie { margin-inline-start: var(--riel) }

/* ── retícula de 12 ── */
.rej, .portada__cajetin, .seccion-cabeza, .cabeza, .paquete-intro, .evidencia, .pie__rejilla, .armador, .alturas__escena { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col) }

/* ══════════ S1 · PORTADA: el salón se enciende en tres alturas ══════════ */
.portada { display: grid; gap: clamp(1.25rem, 2.5svh, 2rem); padding: clamp(1.5rem, 4svh, 3rem) 0 0 }
.portada__cajetin { row-gap: 1.25rem; align-items: start; padding-inline: var(--margen) }
.portada h1 { grid-column: 1 / span 7; font-size: var(--t-h1); max-inline-size: 15ch }
.portada__datos { grid-column: 8 / span 5; display: grid; gap: 1rem; justify-items: start; padding-block-start: .5rem }
.portada__sub { font-size: var(--t-cuerpo); color: var(--lino); max-inline-size: 40ch }
.portada__dato { display: grid; gap: .1rem; font-size: var(--t-meta); color: var(--humo) }
.portada__dato strong { color: var(--lino); font-weight: 600; font-size: var(--t-cuerpo) }
.salon { display: grid; gap: 0 }
.salon__marco { position: relative; block-size: clamp(22rem, 64svh, 46rem); background: var(--lamina); overflow: clip; isolation: isolate; border-block: var(--hilo) }
.salon__marco picture, .salon__marco img { position: absolute; inset: 0; inline-size: 100%; block-size: 100% }
.salon__marco img { object-fit: cover }
.salon__base img { filter: brightness(.12) saturate(.5) }
.js .salon[data-arranque] .salon__base img { filter: brightness(.12) saturate(.5) }
.salon__banda { position: absolute; inset: 0; opacity: 1 }
.js .salon[data-arranque] .salon__banda { opacity: 0 }
.salon__banda[data-banda="techo"] { mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 46%); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 46%) }
.salon__banda[data-banda="luz"] { mask-image: linear-gradient(to bottom, transparent 24%, #000 40%, #000 62%, transparent 76%); -webkit-mask-image: linear-gradient(to bottom, transparent 24%, #000 40%, #000 62%, transparent 76%) }
.salon__banda[data-banda="mesa"] { mask-image: linear-gradient(to bottom, transparent 58%, #000 74%, #000 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 58%, #000 74%, #000 100%) }
.salon__brasa { position: absolute; inset: 0; background: #d9672e; mix-blend-mode: multiply; opacity: 0; pointer-events: none }
.salon__regla { position: absolute; inset-block: 0; inset-inline-start: var(--margen); display: grid; grid-template-rows: 36% 32% 32%; inline-size: 1px; background: rgb(243 234 216 / .35); z-index: 2 }
.salon__regla li { position: relative; display: flex; align-items: center; gap: .55rem; padding-inline-start: 1rem; font-size: var(--t-meta); color: var(--humo); white-space: nowrap; transition: color var(--d-estado) var(--c-ui) }
.salon__regla li::before { content: ""; position: absolute; inset-inline-start: 0; inline-size: .6rem; block-size: 1px; background: rgb(243 234 216 / .5); transition: background-color var(--d-estado) var(--c-ui), box-shadow var(--d-estado) var(--c-ui) }
.salon__regla li .n { color: rgb(166 156 140 / .7) }
.salon__regla li[data-on] { color: var(--lino) }
.salon__regla li[data-on]::before { background: var(--filamento); box-shadow: 0 0 6px rgb(255 226 176 / .7) }
.salon__pie { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-block-size: 3rem; padding: .35rem var(--margen); border-block-end: var(--hilo); font-size: var(--t-meta); color: var(--humo) }

/* ══════════ S2 · TRES ALTURAS: la escena se construye por etapas ══════════ */
.alturas { padding-block-start: var(--seccion) }
.seccion-cabeza { row-gap: 1rem; align-items: end; padding: 0 var(--margen) 2.5rem }
.seccion-cabeza h2 { grid-column: 1 / span 7; font-size: var(--t-h2); max-inline-size: 16ch }
.seccion-cabeza p { grid-column: 8 / span 5; color: var(--humo); max-inline-size: 42ch }
.alturas__pista { position: relative; block-size: 420svh; border-block-start: var(--hilo) }
.alturas__escena { position: sticky; inset-block-start: 0; block-size: 100svh; padding-inline: var(--margen); align-items: stretch; overflow: clip }
.alturas__lado { grid-column: 1 / span 4; display: grid; align-content: start; gap: 1.25rem; padding-block: 1.5rem; border-inline-end: var(--hilo-suave); padding-inline-end: var(--col) }
.alturas__etapa { font-size: var(--t-meta); color: var(--humo); min-block-size: 1.5em }
.alturas__indice { display: grid }
.alturas__indice li { display: grid; grid-template-columns: 2rem 1fr; grid-template-areas: "n nombre" "n sub" "n piezas" "n ver"; align-content: start; row-gap: .3rem; padding-block: .9rem 1.1rem; border-block-start: var(--hilo-suave); opacity: .34; transition: opacity var(--d-revela) var(--c-ui) }
.alturas__indice li:last-child { border-block-end: var(--hilo-suave) }
.alturas__num { grid-area: n; font-size: var(--t-meta); color: var(--humo); padding-block-start: .35rem }
.alturas__nombre { grid-area: nombre; font-family: var(--display); font-size: var(--t-h3); line-height: 1.05; font-variation-settings: 'opsz' 40 }
.alturas__sub { grid-area: sub; font-family: var(--display); font-style: italic; font-weight: 400; color: var(--humo); font-size: var(--t-lede); line-height: 1.15; font-variation-settings: 'opsz' 28 }
.alturas__piezas { grid-area: piezas; display: grid; gap: .1rem; padding-block-start: .4rem; font-size: var(--t-meta); color: var(--humo); max-block-size: 0; overflow: clip; opacity: 0; transition: max-block-size var(--d-revela) var(--c-optica), opacity var(--d-revela) var(--c-ui) }
.alturas__piezas .n { color: rgb(166 156 140 / .75); margin-inline-end: .35rem }
.alturas__indice .enlace { grid-area: ver; max-block-size: 0; overflow: clip; opacity: 0; transition: max-block-size var(--d-revela) var(--c-optica), opacity var(--d-revela) var(--c-ui) }
.alturas__indice li[data-on] { opacity: 1 }
.alturas__indice li[data-on] .alturas__piezas, .alturas__indice li[data-on] .enlace { max-block-size: 8rem; opacity: 1 }
.alturas__estratos { grid-column: 5 / -1; display: grid; grid-template-rows: 36fr 32fr 32fr; block-size: 100svh; margin-inline-end: calc(var(--margen) * -1) }
.estrato { position: relative; margin: 0; min-block-size: 0; border-block-start: 1px solid rgb(243 234 216 / .22); overflow: clip }
.estrato:first-child { border-block-start: 0 }
.estrato__marco { position: absolute; inset: 0; background: var(--lamina) }
.estrato__marco picture, .estrato__marco img { inline-size: 100%; block-size: 100% }
.estrato__marco img { object-fit: cover }
.estrato__brasa { position: absolute; inset: 0; background: #d9672e; mix-blend-mode: multiply; opacity: 0; pointer-events: none }
.estrato figcaption { position: absolute; inset-block-end: .6rem; inset-inline-start: 1rem; display: flex; gap: .6rem; align-items: baseline; font-size: var(--t-meta); color: var(--lino); text-shadow: 0 1px 2px rgb(0 0 0 / .8); opacity: 0; transition: opacity var(--d-revela) var(--c-ui) }
/* estado de las capas: la escena arranca apagada y cada estrato se expone en su etapa */
.js .alturas__escena .estrato__marco { opacity: 0; transform: translateY(var(--desp, -3%)) scale(1.03); transition: opacity var(--d-exposicion) var(--c-filamento), transform 1400ms var(--c-optica) }
.js .alturas__escena .estrato[data-nivel="mesa"] .estrato__marco { --desp: 3% }
.js .alturas__escena .estrato__brasa { transition: opacity 900ms var(--c-off) }
.js .alturas__escena .estrato[data-on] .estrato__marco { opacity: 1; transform: none }
.js .alturas__escena .estrato[data-on] figcaption { opacity: 1; transition-delay: 700ms }
.js .alturas__escena .estrato[data-brasa] .estrato__brasa { opacity: .55; transition: opacity 320ms var(--c-ui) }
.alturas__centinelas { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); pointer-events: none }
.estrato__movil { display: none }
.estrato__movil > *, .estrato__movil .alturas__num, .estrato__movil .alturas__sub { grid-area: auto }

/* ══════════ paquete: índice de ocho piezas ══════════ */
.paquete-intro { row-gap: 2.5rem; padding: var(--seccion) var(--margen); border-block-start: var(--hilo) }
.paquete-intro__texto { grid-column: 1 / span 5; display: grid; gap: 1.25rem; justify-items: start; align-content: start }
.paquete-intro h2 { font-size: var(--t-h2); max-inline-size: 14ch }
.paquete-intro__texto > p:not(.fuente) { color: var(--humo); max-inline-size: 42ch }
.indice-piezas { grid-column: 7 / -1; border-block-end: var(--hilo-suave) }
.indice-piezas a { display: grid; grid-template-columns: 2.25rem minmax(0, 1.3fr) 5rem minmax(0, 2fr); align-items: baseline; gap: 1rem; min-block-size: 3.25rem; padding-block: .6rem; border-block-start: var(--hilo-suave); text-decoration: none; color: var(--lino); transition: color var(--d-micro) var(--c-ui) }
.indice-piezas a:hover { color: var(--filamento) }
.indice-piezas .n { font-size: var(--t-meta); color: var(--humo) }
.indice-piezas__nombre { font-weight: 600; font-size: var(--t-menor) }
.indice-piezas__nivel, .indice-piezas__desc { font-size: var(--t-meta); color: var(--humo) }

/* ══════════ el día: franja de producción ══════════ */
.dia-franja { display: grid; gap: 2rem; padding: var(--seccion) var(--margen); border-block-start: var(--hilo) }
.dia-franja h2 { font-size: var(--t-h2); max-inline-size: 24ch }
.produccion { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block-start: 1.25rem }
.produccion::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; background: rgb(193 119 63 / .35) }
.produccion::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; block-size: 1px; inline-size: 100%; background: var(--filamento); transform: scaleX(0); transform-origin: 0 50% }
.js .produccion.visto::after { transition: transform 1400ms var(--c-optica) 120ms; transform: scaleX(var(--avance, 1)) }
.produccion li { position: relative; display: grid; gap: .35rem; padding-inline-end: 1rem }
.produccion__tic { position: absolute; inset-block-start: -1.25rem; inset-inline-start: 0; inline-size: 1px; block-size: .6rem; background: rgb(243 234 216 / .5) }
.produccion .n { font-size: var(--t-meta); color: var(--humo) }
.produccion__nombre { font-size: var(--t-lede); font-weight: 600; line-height: 1.15 }
.dia-franja__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem }

/* ══════════ evidencia ══════════ */
.evidencia { row-gap: 2rem; padding: var(--seccion) var(--margen); border-block-start: var(--hilo) }
.evidencia__rotulo { grid-column: 1 / span 2; font-family: var(--texto); font-size: var(--t-meta); font-weight: 600; color: var(--humo); line-height: 1.6 }
.cita--mayor { grid-column: 3 / span 6 }
.cita blockquote { font-family: var(--display); font-style: italic; font-weight: 400; line-height: 1.16; hanging-punctuation: first; font-variation-settings: 'opsz' 36 }
.cita--mayor blockquote { font-size: clamp(1.75rem, 1rem + 2.1vw, 2.9rem); max-inline-size: 22ch }
.cita figcaption { margin-block-start: 1.25rem; font-size: var(--t-meta); color: var(--humo) }
.evidencia__ficha { grid-column: 9 / span 4; display: grid; gap: 1rem; justify-items: start; align-content: start }
.ficha { inline-size: 100%; border-block-end: var(--hilo-suave) }
.ficha div { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: 1rem; padding-block: .7rem; border-block-start: var(--hilo-suave) }
.ficha dt { font-family: var(--display); font-size: 1.6rem; line-height: 1 }
.ficha dd { margin: 0; font-size: var(--t-meta); color: var(--humo) }

/* ══════════ cabecera de página interior ══════════ */
.cabeza { row-gap: 1.5rem; align-items: end; padding: clamp(3rem, 7svh, 5rem) var(--margen) clamp(2rem, 4svh, 3rem) }
.cabeza__ruta { grid-column: 1 / -1; padding-block-end: .75rem; border-block-end: var(--hilo); font-size: var(--t-meta); color: var(--humo) }
.cabeza__ruta a { display: inline-flex; align-items: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; margin-block: -.85rem; text-decoration: none; color: var(--lino) }
.cabeza__ruta a:hover { color: var(--filamento) }
.cabeza h1 { grid-column: 1 / span 7; font-size: var(--t-h1); max-inline-size: 16ch }
.cabeza__lede { grid-column: 8 / span 5; color: var(--humo); font-size: var(--t-cuerpo); max-inline-size: 42ch; padding-block-end: .35rem }
.cabeza__derecha { grid-column: 8 / span 5; align-self: start }
.cabeza__ficha { display: grid; border-block-start: var(--hilo-suave) }
.cabeza__ficha div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding-block: .6rem; border-block-end: var(--hilo-suave); font-size: var(--t-meta) }
.cabeza__ficha dt { color: var(--humo) }
.cabeza__ficha dd { margin: 0 }
.cabeza__piezas { display: grid }
.cabeza__piezas a { text-decoration: none; display: inline-flex; min-block-size: 2.75rem; margin-block: -.5rem; align-items: center; transition: color var(--d-micro) var(--c-ui) }
.cabeza__piezas a:hover { color: var(--filamento) }
.cabeza__piezas .n { color: var(--humo); margin-inline-end: .4rem }

/* ══════════ montajes: archivo ══════════ */
.archivo { padding: 0 var(--margen) var(--seccion) }
.archivo__fila { display: grid; gap: 1.25rem; padding-block: 1.5rem 2.5rem; border-block-start: var(--hilo) }
.archivo__fila:last-child { border-block-end: var(--hilo) }
.archivo__cabeza { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col); align-items: end }
.archivo__enlace { grid-column: 1 / span 7; display: grid; grid-template-columns: 3rem auto 1fr 2rem; align-items: baseline; gap: 1rem; min-block-size: 3.5rem; text-decoration: none; color: var(--lino) }
.archivo__n { font-size: var(--t-meta); color: var(--humo) }
.archivo__nombre { font-family: var(--display); font-size: var(--t-h2); line-height: 1; transition: color var(--d-micro) var(--c-ui) }
.archivo__titulo { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--t-lede); color: var(--humo) }
.archivo__enlace .ic { color: var(--vela); inline-size: 1.5rem; block-size: 1.5rem }
.archivo__enlace:hover .archivo__nombre { color: var(--filamento) }
.archivo__meta { grid-column: 8 / span 5; display: grid; font-size: var(--t-meta); border-block-start: var(--hilo-suave) }
.archivo__meta div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding-block: .45rem; border-block-end: var(--hilo-suave) }
.archivo__meta dt { color: var(--humo) }
.archivo__meta dd { margin: 0 }
.archivo__meta dd .n { color: var(--humo) }
.contactos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--col); padding-inline-start: 4rem }
.contactos a { display: grid; gap: .45rem; text-decoration: none }
.contactos__marco { display: block; overflow: clip; background: var(--lamina) }
.contactos img { aspect-ratio: 3 / 2; object-fit: cover; transition: transform 700ms var(--c-optica) }
.contactos a:hover img { transform: scale(1.04) }
.contactos .ref { font-weight: 500; color: var(--humo); transition: color var(--d-micro) var(--c-ui) }
.contactos a:hover .ref { color: var(--filamento) }
@media (hover: hover) and (pointer: fine) { .contactos:has(a:hover) a:not(:hover) { opacity: .55; transition: opacity var(--d-estado) var(--c-ui) } }

/* ══════════ S3 · galería de una altura ══════════ */
.galeria { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col); padding-inline: var(--margen) }
.galeria__indice { grid-column: 1 / span 1; position: sticky; inset-block-start: 1.5rem; align-self: start; display: grid; padding-block-start: 1.25rem }
.galeria__indice a { display: inline-flex; align-items: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; font-size: var(--t-meta); color: rgb(166 156 140 / .6); text-decoration: none; transition: color var(--d-estado) var(--c-ui) }
.galeria__indice a:hover { color: var(--lino) }
.galeria__indice a[data-activo] { color: var(--filamento) }
.galeria__fichas { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); column-gap: var(--col); row-gap: clamp(3rem, 2rem + 3vw, 6rem) }
.montaje { position: relative; margin: 0; scroll-margin-block-start: 1.5rem; display: grid; row-gap: .8rem; align-content: start; padding-block-start: 1.25rem; border-block-start: var(--hilo) }
.montaje__marco { position: relative; overflow: clip; background: var(--lamina); isolation: isolate }
.montaje__marco img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: var(--ar, 3 / 2) }
.montaje__velo { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #1a2740; mix-blend-mode: multiply }
.montaje figcaption { display: grid; gap: .5rem; justify-items: start; max-inline-size: 36ch }
.montaje__pie { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--t-lede); line-height: 1.25; color: var(--lino); font-variation-settings: 'opsz' 24 }
/* composiciones */
.montaje--ancha { grid-column: 1 / -1; grid-template-columns: subgrid; padding-block-start: 0; border-block-start: 0 }
.montaje--ancha .montaje__marco { grid-column: 1 / -1; --ar: 16 / 9; margin-inline-end: calc(var(--margen) * -1) }
.montaje--ancha figcaption { grid-column: 1 / span 5 }
.montaje--par-i { grid-column: 1 / span 7 }
.montaje--par-d { grid-column: 8 / span 4; margin-block-start: clamp(4rem, 8vw, 9rem) }
.montaje--par-d .montaje__marco { --ar: 4 / 5 }
.montaje--centro { grid-column: 1 / -1; grid-template-columns: subgrid }
.montaje--centro .montaje__marco { grid-column: 4 / span 8 }
.montaje--centro figcaption { grid-column: 1 / span 3; grid-row: 1; align-self: end; position: sticky; inset-block-end: 2rem }
.montaje--alta { grid-column: 7 / span 5 }
.montaje--alta .montaje__marco { --ar: 4 / 5 }
.montaje[data-vivo="pan-y"] .montaje__marco { --ar: 1 / 1 }
.fuente--galeria { padding: 2.5rem var(--margen) 0 }
.siguiente { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .5rem 1rem; margin: var(--seccion) var(--margen) 0; padding-block: 1.25rem 3rem; border-block-start: var(--hilo); text-decoration: none }
.siguiente__rotulo { grid-column: 1 / -1; font-size: var(--t-meta); color: var(--humo) }
.siguiente__nombre { font-family: var(--display); font-size: var(--t-firma); line-height: 1; transition: color var(--d-micro) var(--c-ui) }
.siguiente .ic { inline-size: 2rem; block-size: 2rem; color: var(--vela) }
.siguiente:hover .siguiente__nombre { color: var(--filamento) }

/* comportamiento de cada foto: lo elige lo que hay en ella (data-vivo). Scroll-driven en CSS, dentro de @supports;
   sin soporte, la foto queda en su estado final. Nada de esto depende de JS salvo la exposición (clase .expuesta). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .montaje[data-vivo="zoom"] img { animation: vivo-zoom linear both; animation-timeline: view(); animation-range: cover 0% cover 100% }
    .montaje[data-vivo="pan-x"] img { animation: vivo-pan-x linear both; animation-timeline: view(); animation-range: cover 0% cover 100% }
    .montaje[data-vivo="pan-y"] img { animation: vivo-pan-y linear both; animation-timeline: view(); animation-range: cover 10% cover 90% }
    .montaje[data-vivo="profundidad"] img { animation: vivo-profundidad linear both; animation-timeline: view(); animation-range: cover 0% cover 100% }
    .montaje[data-vivo="reencuadre"] .montaje__marco { animation: vivo-reencuadre var(--c-optica) both; animation-timeline: view(); animation-range: entry 0% entry 70% }
    .montaje[data-vivo="ambar"] .montaje__velo { opacity: .6; animation: vivo-ambar var(--c-filamento) both; animation-timeline: view(); animation-range: entry 15% entry 85% }
  }
  @keyframes vivo-zoom { from { transform: scale(1.08) } to { transform: scale(1) } }
  @keyframes vivo-pan-x { from { object-position: 34% var(--fy, 40%) } to { object-position: 66% var(--fy, 40%) } }
  @keyframes vivo-pan-y { from { object-position: 50% 0% } to { object-position: 50% 100% } }
  @keyframes vivo-profundidad { from { transform: translateY(-4.5%) scale(1.1) } to { transform: translateY(4.5%) scale(1.1) } }
  @keyframes vivo-reencuadre { from { clip-path: inset(22% 0 22% 0) } to { clip-path: inset(0 0 0 0) } }
  @keyframes vivo-ambar { from { opacity: .6 } to { opacity: 0 } }
  /* exposición: la luz sube una vez, desde la brasa (solo lo que nace bajo el pliegue) */
  .js .por-exponer img { filter: brightness(.08) saturate(.4) }
  .js .por-exponer.expuesta img { animation: exponer var(--d-exposicion) var(--c-filamento) both }
  @keyframes exponer { 0% { filter: brightness(.08) saturate(.4) sepia(0) } 38% { filter: brightness(.5) saturate(.9) sepia(.42) } 100% { filter: brightness(1) saturate(1) sepia(0) } }
}
.montaje[data-vivo="pan-x"] img { --fy: 38% }

/* ══════════ S4 · tablero / paquete ══════════ */
.marco { display: grid; inline-size: 100%; border-block: var(--hilo) }
.marco__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; min-block-size: 2.75rem; border-block-end: var(--hilo-suave) }
.marco__titulo, .marco__escala, .marco__cuenta { font-size: var(--t-meta); color: var(--humo) }
.marco__titulo { color: var(--lino); font-weight: 600 }
.marco__titulo .n { color: var(--filamento); margin-inline-end: .35rem }
.marco__nota { padding-block: .6rem .7rem; font-size: var(--t-meta); color: var(--humo); border-block-start: var(--hilo-suave) }
.seccion { position: relative; inline-size: 100%; aspect-ratio: 1600 / 600; background: var(--lamina); overflow: clip; isolation: isolate }
.seccion > svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: hidden }
.seccion svg :is(path, rect, ellipse, circle) { vector-effect: non-scaling-stroke }
.seccion__base { fill: none; stroke: var(--cobre) }
.l-reticula { stroke: none }
.l-alzado { stroke-opacity: .42; stroke-width: .75 }
.l-corte rect { fill: url(#poche); stroke-opacity: .85; stroke-width: 1 }
.l-mesas .mantel { fill: var(--lamina); stroke-opacity: .8; stroke-width: 1 }
.l-mesas .cubierta { fill: var(--lamina); stroke-opacity: .95; stroke-width: 1 }
.l-fantasma { stroke-dasharray: 2 3.5; stroke-opacity: .5; stroke-width: .8; transition: opacity var(--d-revela) var(--c-ui) }
.l-fantasma g { transition: stroke var(--d-estado) var(--c-ui), stroke-opacity var(--d-estado) var(--c-ui) }
.seccion[data-sin-fantasma] .l-fantasma { opacity: 0 }
.l-niveles path { stroke-opacity: .6; stroke-width: .8 }
.l-niveles .marca-nivel { fill: var(--cobre); stroke: none }
.seccion__rotulos { position: absolute; inset: 0; pointer-events: none }
.rotulo { position: absolute; transform: translateY(-100%); font-size: var(--t-meta); line-height: 1; color: var(--humo); white-space: nowrap; transition: color var(--d-estado) var(--c-ui) }
.rotulo--llamada { font-weight: 600; transform: translate(-50%, -88%) }
.rotulo--start { transform: translate(0, -88%) }
.rotulo--end { transform: translate(-100%, -88%) }
.l-llamadas path { fill: none; stroke-opacity: .5; stroke-width: .8; transition: stroke var(--d-estado) var(--c-ui), stroke-opacity var(--d-estado) var(--c-ui) }
.seccion__capa { pointer-events: none }
.seccion__capa--plena { mix-blend-mode: screen }
@supports (mix-blend-mode: plus-lighter) { .seccion__capa--plena { mix-blend-mode: plus-lighter } }
.seccion__capa--brasa { opacity: .28; mix-blend-mode: screen }
.js .seccion[data-arranque] .seccion__capa { opacity: 0 }
.p-trazo { fill: none; stroke: var(--lino); stroke-opacity: .86; stroke-width: 1 }
.p-trazo .tela { fill: var(--lino); fill-opacity: .055 }
.p-trazo circle { fill: var(--lino); fill-opacity: .22; stroke: var(--lino); stroke-opacity: .9; stroke-width: .8 }
.p-flor circle { fill: var(--filamento); stroke: none }
.p-gota circle { fill: #fff3dc; stroke: none }
.p-cirio { fill: var(--lino); fill-opacity: .9 }
.p-equipo, .a-equipo rect { fill: #2b2018; stroke: var(--cobre); stroke-width: 1 }
.a-borde { fill: none; stroke: var(--filamento); stroke-opacity: .32; stroke-width: 1 }
.a-cornisa { fill: none; stroke: var(--filamento); stroke-opacity: .35; stroke-width: 1 }
.seccion__cajas { pointer-events: none }
.cajas { opacity: 0; transform: translateX(-700px); transition: transform 760ms var(--c-optica), opacity 420ms var(--c-ui) }
.cajas rect { fill: rgb(193 119 63 / .16); stroke: var(--cobre); stroke-width: 1 }
.cajas path { fill: none; stroke: var(--cobre); stroke-opacity: .55; stroke-width: .8 }
.seccion[data-paso="1"] .cajas { opacity: 1; transform: translateX(-628px) }
.seccion[data-paso="2"] .cajas, .seccion[data-paso="4"] .cajas { opacity: 1; transform: none }
.seccion[data-paso="5"] .cajas { opacity: 0; transform: translateX(632px) }
.seccion[data-vista="01"] [data-fantasma="01"], .seccion[data-vista="02"] [data-fantasma="02"], .seccion[data-vista="03"] [data-fantasma="03"], .seccion[data-vista="04"] [data-fantasma="04"],
.seccion[data-vista="05"] [data-fantasma="05"], .seccion[data-vista="06"] [data-fantasma="06"], .seccion[data-vista="07"] [data-fantasma="07"], .seccion[data-vista="08"] [data-fantasma="08"] { stroke: var(--filamento); stroke-opacity: .95 }
.seccion[data-vista="01"] .ll-01, .seccion[data-vista="02"] .ll-02, .seccion[data-vista="03"] .ll-03, .seccion[data-vista="04"] .ll-04,
.seccion[data-vista="05"] .ll-05, .seccion[data-vista="06"] .ll-06, .seccion[data-vista="07"] .ll-07, .seccion[data-vista="08"] .ll-08 { stroke: var(--filamento); stroke-opacity: 1 }
.seccion[data-vista="01"] .rt-01, .seccion[data-vista="02"] .rt-02, .seccion[data-vista="03"] .rt-03, .seccion[data-vista="04"] .rt-04,
.seccion[data-vista="05"] .rt-05, .seccion[data-vista="06"] .rt-06, .seccion[data-vista="07"] .rt-07, .seccion[data-vista="08"] .rt-08,
.seccion[data-on~="01"] .rt-01, .seccion[data-on~="02"] .rt-02, .seccion[data-on~="03"] .rt-03, .seccion[data-on~="04"] .rt-04,
.seccion[data-on~="05"] .rt-05, .seccion[data-on~="06"] .rt-06, .seccion[data-on~="07"] .rt-07, .seccion[data-on~="08"] .rt-08 { color: var(--filamento) }

.armador { column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start; padding: 0 var(--margen) var(--seccion) }
.armador__escena { grid-column: 1 / span 7; position: sticky; inset-block-start: 1.25rem; display: grid; gap: 1rem }
.resumen { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem }
.resumen__linea { font-size: var(--t-menor); color: var(--lino); max-inline-size: 52ch }
.resumen__rotulo { font-size: var(--t-meta); color: var(--humo); margin-inline-end: .4rem }
.armador__controles { grid-column: 8 / span 5; display: grid; gap: 2rem }
.grupo { padding: 0; border: 0; min-inline-size: 0 }
.grupo legend { display: flex; align-items: baseline; gap: .6rem; padding: 0 0 .5rem }
.grupo__n { font-size: var(--t-meta); color: var(--humo) }
.grupo__nivel { font-size: var(--t-menor); font-weight: 600 }
.grupo__titulo { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--t-lede); line-height: 1.1; color: var(--humo) }
.canal { position: relative; display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .75rem; min-block-size: 4rem; padding-block: .55rem; border-block-start: var(--hilo-suave); cursor: pointer; transition: background-color var(--d-micro) var(--c-ui) }
.grupo .canal:last-child { border-block-end: var(--hilo-suave) }
.canal input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer }
.canal:hover { background: rgb(243 234 216 / .025) }
.canal:has(input:focus-visible) { outline: 2px solid var(--filamento); outline-offset: 2px }
.canal__k { font-size: var(--t-meta); color: var(--humo); transition: color var(--d-estado) var(--c-ui) }
.canal__texto { display: grid; gap: .1rem }
.canal__titulo { font-size: var(--t-menor); font-weight: 600; line-height: 1.3 }
.canal__desc { font-size: var(--t-meta); color: var(--humo); line-height: 1.4 }
/* fader: el mismo lenguaje de la consola */
.fader { display: grid; grid-template-columns: 2.5rem auto; align-items: center; gap: .6rem; font-size: .75rem; color: var(--humo); white-space: nowrap }
.fader__riel { position: relative; display: block; block-size: 1px; background: rgb(193 119 63 / .42) }
.fader__perilla { position: absolute; inset-block-start: -5px; inset-inline-start: 0; inline-size: 5px; block-size: 11px; background: var(--cobre); transition: transform var(--d-estado) var(--c-ui), background-color var(--d-estado) var(--c-ui), box-shadow var(--d-revela) var(--c-filamento) }
.canal:hover .fader__perilla { transform: translateX(.6rem) }
.fader__palabra { min-inline-size: 4.5rem }
.fader__palabra::after { content: attr(data-off) }
.canal:has(input:checked) .canal__k { color: var(--filamento) }
.canal:has(input:checked) .fader__perilla { transform: translateX(calc(2.5rem - 5px)); background: var(--filamento); box-shadow: 0 0 8px rgb(255 226 176 / .55) }
.canal:has(input:checked) .fader__palabra { color: var(--lino) }
.canal:has(input:checked) .fader__palabra::after { content: attr(data-on) }
.campos { display: grid; gap: 1rem }
.campo label { display: block; margin-block-end: .3rem; font-size: var(--t-meta); font-weight: 600; color: var(--humo) }
.campo input { inline-size: 100%; min-block-size: 3rem; padding: .55rem 0; border: 0; border-block-end: var(--hilo); border-radius: 0; background: transparent; color: var(--lino); font: 400 1rem var(--texto); transition: border-color var(--d-micro) var(--c-ui) }
.campo input::placeholder { color: rgb(166 156 140 / .75) }
.campo input:focus { outline: none; border-block-end-color: var(--filamento) }
.campo input:focus-visible { outline: 2px solid var(--filamento); outline-offset: 2px }
/* hoja de montaje: documento de producción */
.hoja { display: grid; gap: 1rem; border: var(--hilo); padding: 1.25rem 1.35rem 1.35rem; background: rgb(29 23 18 / .55) }
.hoja__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block-end: .75rem; border-block-end: 1px solid rgb(193 119 63 / .45) }
.hoja__titulo { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--t-h3); line-height: 1.1; font-variation-settings: 'opsz' 32 }
.hoja__sello { font-size: var(--t-meta); color: var(--humo) }
.hoja__datos > div { position: relative; display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding-block: .55rem; border-block-start: 1px dotted rgb(166 156 140 / .4) }
.hoja__datos > div:first-child { border-block-start: 0 }
.hoja dt { font-size: var(--t-meta); font-weight: 600; color: var(--humo) }
.hoja dd { position: relative; margin: 0; font-size: var(--t-menor) }
.hoja dd[data-vacio] { color: var(--humo); font-style: italic; font-family: var(--display); font-size: 1.0625rem }
.hoja dd::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -.55rem; block-size: 1px; background: var(--filamento); transform: scaleX(0); transform-origin: 0 50%; opacity: 0 }
.hoja dd.registrado::after { animation: registro 620ms var(--c-optica) }
@keyframes registro { 0% { transform: scaleX(0); opacity: 1 } 55% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(1); opacity: 0 } }
.hoja__quitar { margin-inline-start: .5rem; padding: 0; border: 0; background: none; color: var(--humo); font: 400 var(--t-meta) var(--texto); text-decoration: underline 1px var(--cobre); text-underline-offset: .3em; cursor: pointer }
.hoja__quitar:hover { color: var(--filamento) }
.hoja__piezas { display: grid; border-block: 1px solid rgb(193 119 63 / .45) }
.hoja__piezas li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .75rem; align-items: baseline; padding-block: .45rem; border-block-start: 1px dotted rgb(166 156 140 / .35); font-size: var(--t-menor) }
.hoja__piezas li:first-child { border-block-start: 0 }
.hoja__piezas .n { font-size: var(--t-meta); color: var(--humo) }
.hoja__piezas__nivel { font-size: var(--t-meta); color: var(--humo) }
.hoja__piezas .hoja__vacia { color: var(--humo); font-style: italic; font-family: var(--display); font-size: 1.0625rem; grid-template-columns: 1fr }
.js .hoja__piezas li.nueva { animation: entra-renglon var(--d-revela) var(--c-optica) both }
@keyframes entra-renglon { from { opacity: 0; transform: translateY(.3rem) } to { opacity: 1; transform: none } }
.hoja__nota { font-size: var(--t-meta); color: var(--humo) }
.hoja__mensaje summary { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: var(--t-meta); font-weight: 600; cursor: pointer; text-decoration: underline 1px var(--cobre); text-underline-offset: .4em }
.hoja__mensaje summary:hover { color: var(--filamento) }
.hoja__mensaje pre { margin: .5rem 0 0; padding: .8rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--t-meta)/1.55 var(--texto); color: var(--lino); background: rgb(12 10 8 / .7); border-inline-start: 2px solid var(--cobre) }
.barra-envio { display: none }
@media (min-width: 56.3rem) and (max-width: 75rem) {
  .armador__escena { grid-column: 1 / -1; z-index: 5; inset-block-start: 0; margin-inline: calc(var(--margen) * -1); padding: .75rem var(--margen); background: var(--noche); border-block-end: var(--hilo-suave) }
  .armador__controles { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; padding-block-start: 2rem }
  .armador__controles .hoja { grid-column: 1 / -1 }
}

/* ══════════ S5 · el día: una secuencia de producción sobre la sección ══════════ */
.dia { padding-inline: var(--margen) }
.dia__escena { position: sticky; inset-block-start: 0; z-index: 5; margin-inline: calc(var(--margen) * -1); padding: .75rem var(--margen) 0; background: var(--noche) }
.dia__escena .marco { max-inline-size: max(30rem, calc(44svh * 2.6667)) }
.produccion--dia { padding-block-start: .9rem; padding-block-end: .6rem }
.produccion--dia::before { background: rgb(193 119 63 / .35) }
.produccion--dia::after { transform: scaleX(var(--avance, 0)); transition: transform var(--d-revela) var(--c-optica) }
.produccion--dia li { grid-template-columns: 1fr; gap: 0 }
.produccion--dia .produccion__tic { inset-block-start: -.9rem; block-size: .45rem }
.produccion--dia li[data-on] .n { color: var(--filamento) }
.pasos { border-block-end: var(--hilo) }
.paso { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: baseline; align-content: center; column-gap: var(--col); row-gap: .5rem; min-block-size: 24svh; padding-block: 1.75rem; border-block-start: var(--hilo); opacity: .42; scroll-margin-block-start: calc(var(--alto-escena, 50svh) + 1.5rem); transition: opacity var(--d-estado) var(--c-ui) }
.pasos .paso:first-child { border-block-start: 0 }
.paso.activo, html:not(.js) .paso { opacity: 1 }
.paso__boton { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; gap: .35rem; min-block-size: 2.75rem; padding: 0; border: 0; background: none; color: var(--lino); text-align: start; cursor: pointer }
.paso__n { font: 600 var(--t-meta)/1.2 var(--texto); color: var(--humo); transition: color var(--d-estado) var(--c-ui) }
.paso__boton[aria-pressed="true"] .paso__n { color: var(--filamento) }
.paso__nombre { font-family: var(--texto); font-weight: 600; font-size: var(--t-h3); line-height: 1.05; letter-spacing: -0.01em; transition: color var(--d-micro) var(--c-ui) }
.paso__boton:hover .paso__nombre { color: var(--filamento) }
.paso p { color: var(--humo); max-inline-size: 36ch }
.dia__pie { display: grid; gap: 1.5rem; justify-items: start; padding: 3rem var(--margen) var(--seccion) }

/* ══════════ opiniones ══════════ */
.citas { padding-inline: var(--margen) }
.citas .cita { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col); padding-block: 1.5rem 3.5rem; border-block-start: var(--hilo) }
.cita__n { grid-column: 1 / span 2; font-size: var(--t-meta); color: var(--humo) }
.citas blockquote, .citas figcaption { grid-column: 3 / span 8 }
.citas .cita--mayor blockquote { font-size: clamp(1.9rem, 1rem + 2.4vw, 3.2rem); max-inline-size: 22ch }
.citas .cita--menor blockquote { font-size: clamp(1.4rem, 1rem + 1.1vw, 2rem); max-inline-size: 36ch }
.cifras { display: grid; gap: 1.5rem; justify-items: start; padding: 2rem var(--margen) var(--seccion); border-block-start: var(--hilo) }
.cifras h2 { font-size: var(--t-h3) }
.registro { inline-size: 100%; display: grid; border-block-end: var(--hilo) }
.registro > div { display: grid; grid-template-columns: minmax(9rem, 2fr) minmax(0, 5fr) minmax(8rem, 2fr); gap: 1rem; align-items: baseline; padding-block: 1rem; border-block-start: var(--hilo-suave) }
.registro dt { font-family: var(--display); font-size: var(--t-cifra); line-height: 1; white-space: nowrap }
.registro dd { margin: 0; font-size: var(--t-menor) }
.registro__fuente { color: var(--humo); font-size: var(--t-meta); text-align: end }

/* ══════════ S7 · índice de preguntas: radios + :has(), sin JS ══════════ */
.indice { margin-inline: var(--margen); border-block: var(--hilo) }
.indice__lista { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--col) }
.indice__item { display: contents }
.indice__radio { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; pointer-events: none }
.indice__pregunta { grid-column: 1; display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; gap: 1rem; min-block-size: 4.25rem; padding-block: .9rem; border-block-end: var(--hilo-suave); font-family: var(--display); font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); line-height: 1.2; color: var(--humo); cursor: pointer; font-variation-settings: 'opsz' 32; transition: color var(--d-micro) var(--c-ui) }
.indice__pregunta .n { font: 600 var(--t-meta)/1.5 var(--texto); color: rgb(166 156 140 / .7); transition: color var(--d-micro) var(--c-ui) }
.indice__pregunta:hover { color: var(--lino) }
.indice__radio:checked + .indice__pregunta { color: var(--lino) }
.indice__radio:checked + .indice__pregunta .n { color: var(--filamento) }
.indice__radio:focus-visible + .indice__pregunta { outline: 2px solid var(--filamento); outline-offset: -2px }
.indice__item:last-child .indice__pregunta { border-block-end: 0 }
.indice__respuesta { grid-column: 2; grid-row: 1 / span 6; position: sticky; inset-block-start: 1.5rem; align-self: start; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-block: 1.1rem 1.5rem; color: var(--humo); opacity: 0; visibility: hidden; transition: opacity var(--d-estado) var(--c-ui), visibility 0s linear var(--d-estado), transform var(--d-estado) var(--c-optica); transform: translateY(.4rem) }
.indice__respuesta p { max-inline-size: 52ch }
.indice__respuesta-n { font: 600 var(--t-meta)/1.5 var(--texto); color: var(--filamento) }
.indice__item:has(.indice__radio:checked) .indice__respuesta { opacity: 1; visibility: visible; transform: none; transition: opacity var(--d-revela) var(--c-ui), visibility 0s, transform var(--d-revela) var(--c-optica) }
html:not(.js) .indice__respuesta, .indice__item:has(.indice__radio:checked) .indice__respuesta { color: var(--lino) }
.contacto { display: grid; gap: 1.75rem; padding: var(--seccion) var(--margen) }
.contacto h2 { font-size: var(--t-h2) }
.contacto__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem }

/* ══════════ pie ══════════ */
.pie { padding: var(--seccion) var(--margen) 2.5rem; border-block-start: var(--hilo) }
.pie__rejilla { row-gap: 1.5rem; align-items: end }
.pie__nombre { grid-column: 1 / span 7; font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--t-firma); line-height: 1; font-variation-settings: 'opsz' 40 }
.pie__linea { grid-column: 1 / span 7; align-self: start; color: var(--humo); font-size: var(--t-menor) }
.pie__lista { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: end; display: grid; font-size: var(--t-menor); border-block-end: var(--hilo-suave) }
.pie__lista li { border-block-start: var(--hilo-suave) }
.pie__lista a { display: flex; align-items: center; gap: .4rem; min-block-size: 2.75rem; text-decoration: none; transition: color var(--d-micro) var(--c-ui) }
.pie__lista a:hover { color: var(--filamento) }
.pie__notas { display: grid; gap: .4rem; margin-block-start: 3.5rem; padding-block-start: 1rem; border-block-start: var(--hilo-suave); font-size: var(--t-meta); color: var(--humo) }
.pie__aviso { color: var(--lino) }
.barra-wa { display: none }

/* ══════════ S6 · transición entre páginas: la consola se queda; la perilla viaja; la foto elegida se expande ══════════ */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: var(--c-ui) }
::view-transition-old(consola) { display: none }
::view-transition-new(consola) { animation: none }
::view-transition-group(perilla) { animation-duration: 460ms; animation-timing-function: var(--c-optica) }
::view-transition-group(foto-elegida) { animation-duration: 560ms; animation-timing-function: var(--c-optica) }
::view-transition-old(foto-elegida), ::view-transition-new(foto-elegida) { animation: none; mix-blend-mode: normal; height: 100%; overflow: clip; object-fit: cover }
@media (min-width: 56.3rem) { .canales [aria-current="page"] .canal__perilla { view-transition-name: perilla } }

/* ══════════ bajo 56.25rem: el teléfono como producto propio ══════════ */
@media (max-width: 56.25rem) {
  .consola { inset: 0 0 auto 0; inline-size: auto; block-size: var(--barra); padding: 0 var(--margen); flex-direction: row; background: rgb(12 10 8 / .96); border-inline-end: 0; border-block-end: var(--hilo) }
  .consola__cabeza { flex: 1; padding: 0; border: 0 }
  .marca { flex: 1; font-size: 1.3rem }
  .consola__abrir { display: inline-flex; align-items: center; gap: .6rem; min-block-size: 2.75rem; padding: 0 .85rem; border: var(--hilo); background: transparent; color: var(--lino); font: 600 var(--t-menor) var(--texto); cursor: pointer }
  .consola__abrir-ic { inline-size: .95rem; block-size: 1px; background: currentColor; box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor; transition: box-shadow var(--d-micro) var(--c-ui) }
  [data-abierta] .consola__abrir-ic { box-shadow: none }
  .consola__panel { position: fixed; inset: var(--barra) auto 0 0; inline-size: min(88vw, 22rem); padding: 1.25rem 1.5rem 1.5rem; overflow-y: auto; background: var(--brasa); border-inline-end: var(--hilo); transform: translateX(-101%); visibility: hidden; transition: transform var(--d-estado) var(--c-optica), visibility 0s linear var(--d-estado) }
  [data-abierta] .consola__panel { transform: none; visibility: visible; transition: transform var(--d-estado) var(--c-optica), visibility 0s }
  .consola__velo { position: fixed; inset: var(--barra) 0 0 0; z-index: -1; display: block; background: rgb(0 0 0 / .6) }
  .consola__velo[hidden] { display: none }
  .canales a { min-block-size: 3rem; font-size: var(--t-cuerpo) }
  .canales__sub a { min-block-size: 2.85rem; font-size: var(--t-menor) }
  main, .pie { margin-inline-start: 0 }
  main { padding-block-start: var(--barra) }
  body { padding-block-end: 4.5rem }
  body.p-paquete { padding-block-end: 5rem }

  .rej, .portada__cajetin, .seccion-cabeza, .cabeza, .paquete-intro, .evidencia, .pie__rejilla, .armador, .alturas__escena, .archivo__cabeza, .galeria, .galeria__fichas, .citas .cita, .montaje--ancha, .montaje--centro { grid-template-columns: minmax(0, 1fr) }
  .portada h1, .portada__datos, .seccion-cabeza h2, .seccion-cabeza p, .cabeza h1, .cabeza__lede, .cabeza__derecha, .paquete-intro__texto, .indice-piezas, .evidencia__rotulo, .cita--mayor, .evidencia__ficha,
  .pie__nombre, .pie__linea, .pie__lista, .armador__escena, .armador__controles, .archivo__enlace, .archivo__meta, .alturas__lado, .alturas__estratos, .galeria__fichas, .montaje, .montaje .montaje__marco, .montaje figcaption, .cita__n, .citas blockquote, .citas figcaption { grid-column: 1 / -1; grid-row: auto }
  .portada { padding-block-start: 1.5rem; gap: 1.5rem }
  .portada h1 { font-size: clamp(2.25rem, 1.2rem + 5vw, 3.25rem) }
  .salon__marco { block-size: auto; aspect-ratio: 4 / 5; max-block-size: 72svh }
  .salon__marco picture { position: absolute }
  .salon__regla { inset-inline-start: 1rem }
  .salon__pie { grid-template-columns: auto 1fr; row-gap: .25rem }
  .salon__pie .conmutador { grid-column: 1 / -1; justify-self: start }

  /* tres alturas: coreografía vertical, sin escena fija */
  .alturas__pista { block-size: auto }
  .alturas__escena { position: static; block-size: auto; padding-inline: 0; overflow: visible; display: block }
  .alturas__lado { display: none }
  .alturas__estratos { display: grid; grid-template-rows: none; block-size: auto; margin-inline-end: 0 }
  .estrato { border-block-start: var(--hilo); padding-block: 1rem 2rem; overflow: visible }
  .estrato__marco { position: relative; inset: auto; aspect-ratio: 4 / 5 }
  .estrato__marco img { position: static }
  .estrato figcaption { position: static; opacity: 1; text-shadow: none; color: var(--humo); padding: .6rem var(--margen) 0; display: grid; grid-template-columns: auto 1fr }
  .estrato .estrato__movil { display: grid; gap: .5rem; padding: .9rem var(--margen) 0; justify-items: start }
  .estrato__movil .alturas__nombre { font-size: var(--t-h3); display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem }
  .estrato__movil .alturas__num { font-size: var(--t-meta); color: var(--humo) }
  .estrato__movil .alturas__sub { font-size: var(--t-lede) }
  .estrato__movil .alturas__piezas { display: flex; flex-wrap: wrap; gap: .25rem 1rem; max-block-size: none; opacity: 1; padding-block-start: .25rem }
  .js .alturas__escena .estrato__marco { transform: none }
  .js .alturas__escena .estrato[data-on] .estrato__marco { opacity: 1 }
  .js .alturas__escena .estrato[data-on] figcaption { transition-delay: 0s }
  .alturas__centinelas { display: none }

  .indice-piezas a { grid-template-columns: 2rem 1fr auto; row-gap: .1rem }
  .indice-piezas__desc { grid-column: 2 / -1 }
  .produccion { grid-template-columns: minmax(0, 1fr); padding-block-start: 0; padding-inline-start: 1.25rem }
  .produccion::before, .produccion::after { inset-inline: auto; inset-block: 0; inset-inline-start: 0; inline-size: 1px; block-size: 100% }
  .produccion::after { transform: scaleY(0); transform-origin: 50% 0 }
  .js .produccion.visto::after { transform: scaleY(var(--avance, 1)) }
  .produccion li { grid-template-columns: 2rem 1fr; align-items: baseline; padding: .7rem 0; border-block-end: var(--hilo-suave) }
  .produccion__tic { inset-block-start: 50%; inset-inline-start: -1.25rem; inline-size: .6rem; block-size: 1px }
  .archivo__enlace { grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem; row-gap: .25rem }
  .archivo__n { grid-area: 1 / 1 }
  .archivo__nombre { grid-area: 1 / 2 }
  .archivo__titulo { grid-area: 2 / 2 }
  .archivo__enlace .ic { grid-area: 1 / 3 }
  .archivo__meta dd { min-inline-size: 0; overflow-wrap: anywhere }
  .contactos { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline-start: 0 }
  .galeria { padding-inline: 0 }
  .galeria__indice { display: none }
  .galeria__fichas { row-gap: 2.5rem }
  .montaje { padding-inline: var(--margen) }
  .montaje--ancha, .montaje--centro { padding-inline-end: var(--margen) }
  .montaje--ancha .montaje__marco, .montaje--centro .montaje__marco { margin-inline: calc(var(--margen) * -1) }
  .montaje--ancha .montaje__marco { --ar: 4 / 5 }
  .montaje--par-d { margin-block-start: 0 }
  .montaje--centro figcaption { position: static }
  .armador__escena { position: sticky; inset-block-start: var(--barra); z-index: 5; margin-inline: calc(var(--margen) * -1); padding: 0 var(--margen) .5rem; background: var(--noche); gap: 0 }
  .armador__escena .marco { border-block-start: 0 }
  .armador__escena .marco__nota { display: none }
  .resumen { display: none }
  .armador__controles { padding-block-start: 1.75rem }
  .fader { grid-template-columns: 2.5rem }
  .fader__palabra { display: none }
  .barra-envio { display: flex; position: fixed; z-index: 25; inset: auto 0 0; padding: .6rem var(--margen) calc(.6rem + env(safe-area-inset-bottom)); background: rgb(12 10 8 / .97); border-block-start: var(--hilo) }
  .barra-envio .boton { inline-size: 100%; justify-content: space-between }
  .barra-envio__cuenta { font-weight: 400 }
  .dia__escena { inset-block-start: var(--barra); padding-block-start: 0 }
  .dia__escena .marco { max-inline-size: none }
  .dia__escena .marco__escala { display: none }
  .paso { grid-template-columns: minmax(0, 1fr); min-block-size: 30svh }
  .paso__boton { grid-template-columns: minmax(0, 1fr) }
  .registro > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; padding-block: .85rem }
  .registro__fuente { text-align: start }
  .indice__lista { grid-template-columns: minmax(0, 1fr) }
  .indice__item { display: block; border-block-end: var(--hilo-suave) }
  .indice__pregunta { grid-template-columns: 2.25rem 1fr; border-block-end: 0 }
  .indice__respuesta { position: static; grid-column: auto; grid-row: auto; grid-template-columns: 2.25rem 1fr; padding: 0 0 1.25rem; display: none; transform: none }
  .indice__item:has(.indice__radio:checked) .indice__respuesta { display: grid }
  .indice__respuesta-n { visibility: hidden }
  .pie__lista { grid-row: auto }
  .barra-wa { display: flex; position: fixed; z-index: 25; inset: auto 0 0; padding: .55rem var(--margen) calc(.55rem + env(safe-area-inset-bottom)); background: rgb(12 10 8 / .97); border-block-start: var(--hilo); transition: transform var(--d-estado) var(--c-optica) }
  .barra-wa .boton { inline-size: 100% }
  .barra-wa[data-oculta] { transform: translateY(110%) }
}
@media (max-width: 30rem) {
  .seccion--tablero, .seccion--dia { aspect-ratio: 16 / 9 }
  .l-llamadas, .seccion__rotulos { display: none }
  .salon__marco { aspect-ratio: 4 / 5 }
}
@media (max-width: 22.5rem) {
  .marca { font-size: 1.15rem }
  .consola__abrir { padding: 0 .6rem }
  .portada h1 { font-size: 2.1rem }
}

/* ══════════ reduced motion: la composición final, sin transición ══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important }
  @view-transition { navigation: none }
  .js .salon[data-arranque] .salon__banda, .js .alturas__escena .estrato__marco { opacity: 1; transform: none }
  .js .salon[data-arranque] .salon__base img { filter: brightness(.12) saturate(.5) }
  .js .alturas__escena .estrato figcaption { opacity: 1 }
  .js .alturas__indice li { opacity: 1 }
  .js .alturas__indice li .alturas__piezas, .js .alturas__indice li .enlace { max-block-size: 8rem; opacity: 1 }
  .js .revela[data-espera] .revela__linea > span { transform: none }
  .js .produccion::after { transform: scaleX(1) }
  .montaje__velo { opacity: 0 !important }
  .js .por-exponer img { filter: none }
}
@media print {
  .consola, .barra-wa, .barra-envio, .conmutador { display: none }
  main, .pie { margin: 0 }
  .js .por-exponer img { filter: none }
}