/* Nada puede desbordar en horizontal. */
html, body { overflow-x: clip; max-width: 100%; }
/* v3 · «La obra»: una escena 3D fija detrás de la portada y de la historia del programa. */
.cielo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #cfe0f2 0%, #eef0ea 55%, #e9e2d3 100%); opacity: var(--cielo, 0); transition: opacity .3s; }
/* Vista CAD: al vincular el CAD, la escena se ve como en el programa de CAD (fondo oscuro, colores de capa). */
.fondo-cad { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #1e2128; opacity: var(--cad, 0); }
.fondo-cad__dato { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; margin: 0; color: #c9ccd4; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.fondo-cad__ucs { position: absolute; left: 34%; bottom: 18px; }
.lienzo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
.lienzo.es-visible { opacity: 1; }
.capas3d { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
main { position: relative; z-index: 2; }
.barra { z-index: 40; }
/* Las láminas opacas tapan la escena; portada e historia la dejan ver. */
.lamina, .cierre, .pie { position: relative; z-index: 2; }
.portada { background: transparent; height: 150vh; }
.portada__fijo { pointer-events: none; }
.portada__fijo a, .portada__fijo .cajetin { pointer-events: auto; }
/* Etiquetas sobre el 3D */
.etq { position: absolute; left: 0; top: 0; translate: 12px -50%; font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.etq--nivel { background: var(--papel); border: 1px solid var(--violeta); color: var(--violeta); padding: 4px 8px; }
.etq--nivel b { color: var(--tinta); margin-right: 6px; }
.etq--burbuja { translate: -50% -50%; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--tinta); background: var(--papel); display: grid; place-items: center; font-size: 13px; }
.etq--ficha { translate: -50% 0; background: var(--tinta); color: #fff; padding: 10px 14px; display: grid; gap: 2px; }
.etq--ficha span { color: var(--amarillo); font-size: 10px; }
.etq--ficha b { font: 700 15px var(--f); text-transform: none; letter-spacing: -.01em; }
.etq--area { translate: -50% -50%; font-size: 10px; letter-spacing: .02em; color: var(--tinta); background: rgba(255, 255, 255, .85); padding: 1px 5px; border: 1px solid rgba(11, 5, 61, .25); }
.etq--marca { translate: -100% -100%; display: flex; align-items: flex-end; gap: 6px; font-size: 10px; letter-spacing: .03em; padding-bottom: 2px; border-bottom: 1px solid var(--tinta); padding-right: 30px; }
.etq--marca i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--tinta); order: 2; margin-left: 4px; }
.etq--marca b { color: var(--tinta); }
.etq--burbuja-sec { background: var(--violeta); color: #fff; border-color: var(--violeta); }
.etq--cota { translate: -50% -50%; background: var(--papel); padding: 1px 4px; font-size: 10px; letter-spacing: .02em; }
.etq--chip { translate: -50% -50%; background: var(--tinta); color: #fff; padding: 4px 8px; font-size: 10px; }
.etq--violeta { background: var(--violeta); }
.etq--tipo { translate: -50% 0; display: grid; justify-items: center; gap: 1px; text-align: center; font-size: 9px; letter-spacing: .04em; white-space: normal; width: 13ch; }
.etq--tipo b { background: var(--tinta); color: #fff; padding: 2px 6px; font-size: 10px; margin-bottom: 2px; }
.etq--tipo span { text-transform: none; letter-spacing: 0; color: var(--tinta); }
.etq--tipo span + span { color: var(--violeta); }
/* Visor de la cámara final (16:9) */
.visor { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.visor__esq { position: absolute; width: 42px; height: 42px; border: 0 solid var(--violeta); }
.visor__esq:nth-child(1) { left: 24px; top: calc(var(--barra) + 16px); border-left-width: 2px; border-top-width: 2px; }
.visor__esq:nth-child(2) { right: 24px; top: calc(var(--barra) + 16px); border-right-width: 2px; border-top-width: 2px; }
.visor__esq:nth-child(3) { left: 24px; bottom: 24px; border-left-width: 2px; border-bottom-width: 2px; }
.visor__esq:nth-child(4) { right: 24px; bottom: 24px; border-right-width: 2px; border-bottom-width: 2px; }
.visor__dato { position: absolute; left: 80px; bottom: 30px; margin: 0; background: var(--violeta); color: #fff; padding: 4px 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.visor__dato span { border: 1px solid #fff; padding: 0 5px; margin-left: 8px; }
/* Hoja de plano que aparece en la documentación */
.hoja-fondo { position: fixed; z-index: 0; left: 50%; top: calc(50% + var(--barra) / 2); width: min(76vw, 1100px); height: min(74vh, 720px); translate: -36% -50%; background: #fdfcf8; box-shadow: 0 24px 60px rgba(11, 5, 61, .14); pointer-events: none; opacity: 0; }
.hoja-plano { position: fixed; z-index: 1; left: 50%; top: calc(50% + var(--barra) / 2); width: min(76vw, 1100px); height: min(74vh, 720px); translate: -36% -50%; border: 1.5px solid var(--tinta); outline: 1px solid var(--tinta); outline-offset: 6px; pointer-events: none; opacity: 0; }
.hoja-plano__titulo { position: absolute; right: 80px; top: 16px; margin: 0; display: flex; align-items: center; gap: 10px; color: var(--tinta); border-bottom: 1.5px solid var(--tinta); padding: 0 24px 4px 0; }
.hoja-plano__num { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--tinta); display: grid; place-items: center; font: 700 13px var(--f); }
.hoja-plano__nombre { font: 800 15px var(--f); letter-spacing: -.01em; text-transform: uppercase; }
.hoja-plano__esc { font-size: 10px; color: var(--violeta); }
.hoja-plano__norte { position: absolute; right: 22px; top: 18px; color: var(--tinta); opacity: 0; transition: opacity .3s; }
.hoja-plano[data-vista="planta"] .hoja-plano__norte { opacity: 1; }
.hoja-plano__cajetin { position: absolute; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, auto); background: var(--papel); border-top: 1px solid var(--tinta); border-left: 1px solid var(--tinta); font-size: 10px; }
.hoja-plano__cajetin span { padding: 6px 10px; border-right: 1px solid var(--tinta); }
.hoja-plano__cajetin span:last-child { border-right: 0; background: var(--tinta); color: #fff; }
/* ---------- Historia del programa ---------- */
.historia { position: relative; z-index: 2; background: transparent; border-top: 1px solid var(--tinta); }
.historia__cab { padding-top: clamp(96px, 12vw, 160px); padding-bottom: 12vh; position: relative; }
.historia__cabecera { background: var(--papel); border-bottom: 1px solid var(--tinta); }
.historia__cab h2 { max-width: 16ch; }
.historia__cuerpo { max-width: 1280px; margin: 0 auto; padding: 0 40px 40vh; }
.cap { min-height: 90vh; display: flex; align-items: center; }
/* Capítulos con pasos: más recorrido y la tarjeta fija mientras pasan los pasos. */
.cap--pasos { align-items: flex-start; }
.cap--pasos .cap__tarjeta { position: sticky; top: calc(var(--barra) + 14vh); }
.cap[data-cap="referencias"] { min-height: 170vh; }
.cap[data-cap="detalle"] { min-height: 140vh; }
.cap[data-cap="planos"] { min-height: 240vh; }
.cap[data-cap="camara"] { min-height: 130vh; }
.cap--pasos .cap__lista li { transition: background .25s, color .25s, border-color .25s; }
.historia[data-sub="topografia"] [data-sub-item="topografia"], .historia[data-sub="cad"] [data-sub-item="cad"],
.historia[data-sub="niveles"] [data-sub-item="niveles"], .historia[data-sub="rejillas"] [data-sub-item="rejillas"],
.historia[data-sub="carpinterias"] [data-sub-item="carpinterias"], .historia[data-sub="barandillas"] [data-sub-item="barandillas"],
.historia[data-sub="mobiliario"] [data-sub-item="mobiliario"], .historia[data-sub="habitaciones"] [data-sub-item="habitaciones"],
.historia[data-sub="planta"] [data-sub-item="planta"], .historia[data-sub="alzado"] [data-sub-item="alzado"],
.historia[data-sub="seccion"] [data-sub-item="seccion"], .historia[data-sub="leyenda"] [data-sub-item="leyenda"] { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.cap__tarjeta { width: min(440px, 100%); background: rgba(245, 243, 236, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--tinta); padding: 28px 30px 30px; box-shadow: 8px 8px 0 rgba(11, 5, 61, .9); opacity: .25; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.cap.es-activo .cap__tarjeta { opacity: 1; transform: none; }
.cap__fase { display: inline-block; background: var(--tinta); color: var(--amarillo); padding: 4px 8px; font-size: 10px; }
.cap--hito .cap__fase { background: var(--violeta); color: #fff; }
.cap__num { font-size: 88px; font-weight: 800; line-height: .85; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--tinta); margin: 18px 0 8px; }
.cap.es-activo .cap__num { color: var(--violeta); -webkit-text-stroke-color: var(--violeta); }
.cap__mod { color: var(--violeta); font-size: 11px; }
.cap h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.04; letter-spacing: -.035em; margin: 10px 0 12px; }
.cap p:not([class]) { font-size: 17px; line-height: 1.55; color: var(--texto); }
.cap__lista { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 10px; }
.cap__lista li { border: 1px solid rgba(11, 5, 61, .35); padding: 4px 8px; color: var(--tinta); }
/* Lateral: carril de capítulos y cajetín vivo, fijos mientras se recorre la historia */
.historia__lateral { position: fixed; right: 32px; top: calc(var(--barra) + 24px); bottom: 24px; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; pointer-events: none; opacity: 0; transition: opacity .4s; }
.historia.en-vista .historia__lateral { opacity: 1; }
.rail { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--tinta); display: grid; gap: 2px; font-size: 12px; color: var(--gris); background: rgba(245, 243, 236, .8); }
.rail li { display: flex; gap: 10px; align-items: baseline; padding: 3px 10px 3px 0; position: relative; transition: color .3s; }
.rail li::before { content: ""; position: absolute; left: -20px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--papel); border: 1px solid var(--tinta); translate: 0 -50%; }
.rail li.hecho { color: var(--tinta); }
.rail li.hecho::before { background: var(--tinta); }
.rail li.actual { color: var(--violeta); font-weight: 700; }
.rail li.actual::before { background: var(--violeta); border-color: var(--violeta); box-shadow: 0 0 0 4px rgba(110, 15, 255, .2); }
.rail .mono { font-size: 10px; }
.cajetin-vivo { margin: 0; display: grid; grid-template-columns: repeat(3, auto); border: 1px solid var(--tinta); background: var(--papel); }
.cajetin-vivo div { padding: 8px 14px; border-right: 1px solid var(--tinta); }
.cajetin-vivo div:last-child { border-right: 0; }
.cajetin-vivo dt { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.cajetin-vivo dd { margin: 2px 0 0; font: 700 15px var(--f); color: var(--tinta); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .rail { display: none; } }
@media (max-width: 767px) {
.portada { height: 130vh; }
.historia__cuerpo { padding: 0 16px 30vh; }
.cap { min-height: 100vh; align-items: flex-start; }
.cap__tarjeta { position: sticky; top: calc(52svh + 8px); }
.cap__tarjeta { padding: 20px; box-shadow: 5px 5px 0 rgba(11, 5, 61, .9); opacity: 0; }
.cap.es-activo .cap__tarjeta { opacity: 1; }
.cap__lista { display: none; }
.cap__num { font-size: 56px; margin: 12px 0 6px; }
.cap p:not([class]) { font-size: 15px; }
.historia__lateral { right: 12px; left: 12px; top: auto; bottom: 12px; }
.cajetin-vivo { width: 100%; grid-template-columns: repeat(3, 1fr); }
.cajetin-vivo div { padding: 6px 10px; }
/* La historia en móvil: el 3D entero en la mitad superior y las tarjetas en la inferior (no se recorta nada). */
:root { --alto3d: calc(52svh - var(--barra)); }
.obra-historia .lienzo, .obra-historia .capas3d, .obra-historia .medios, .obra-historia .visor, .obra-historia .fondo-cad, .obra-historia .cielo { top: var(--barra); bottom: auto; height: var(--alto3d); }
.medios { background: var(--papel); }
.medios__render, .medios__video { object-fit: contain; }
.medios__nota { bottom: 8px; font-size: 9px; }
.hoja-plano, .hoja-fondo { left: 10px; right: 10px; width: auto; top: calc(var(--barra) + 8px); height: calc(var(--alto3d) - 16px); translate: none; }
.hoja-plano { outline-offset: 3px; }
.hoja-plano__titulo { right: auto; left: 8px; top: 6px; gap: 6px; padding-right: 10px; }
.hoja-plano__num { width: 20px; height: 20px; font-size: 10px; }
.hoja-plano__nombre { font-size: 11px; }
.hoja-plano__norte { right: 8px; top: 6px; width: 26px; height: 36px; }
.historia__lateral { display: none; }
.cap__mod { display: none; }
.cap__num { font-size: 40px; margin: 8px 0 4px; }
.cap h3 { font-size: 22px; margin: 6px 0 8px; }
.obra-historia .visor__esq:nth-child(1), .obra-historia .visor__esq:nth-child(2) { top: 10px; }
.obra-historia .visor__esq:nth-child(3), .obra-historia .visor__esq:nth-child(4) { bottom: 10px; }
.visor__esq { width: 26px; height: 26px; }
.visor__esq:nth-child(odd) { left: 10px; } .visor__esq:nth-child(even) { right: 10px; }
.hoja-plano__cajetin { grid-template-columns: repeat(3, auto); }
.hoja-plano__cajetin span:nth-child(1), .hoja-plano__cajetin span:nth-child(2) { display: none; }
.cap--pasos .cap__tarjeta { top: calc(52svh + 8px); }
.cap--pasos .cap__lista { display: flex; }
.etq--tipo { display: none; }
.visor__dato { left: 12px; bottom: 12px; font-size: 9px; }
}
/* 07 · Recorrido: la foto entra con un barrido sobre el último fotograma del 3D y el vídeo avanza con el scroll. */
.medios { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; --barrido: 0%; }
.medios__render, .medios__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.medios__render { clip-path: inset(0 calc(100% - var(--barrido)) 0 0); }
.medios::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--barrido); width: 2px; background: var(--amarillo); box-shadow: 0 0 18px var(--amarillo); opacity: 0; }
.medios.barriendo::after { opacity: 1; }
.medios__video { opacity: 0; }
.medios.con-video .medios__video { opacity: 1; }
.medios__nota { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; margin: 0; background: rgba(11, 5, 61, .78); color: #fff; padding: 4px 10px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cap[data-cap="recorrido"] { min-height: 260vh; align-items: flex-end; padding-bottom: 12vh; }
.cap__cta { margin: 20px 0 0; }
@media (max-width: 767px) { .cap[data-cap="recorrido"] .cap__tarjeta { position: sticky; } }
.historia[data-actual="recorrido"] .historia__lateral { opacity: 0; }
/* Dirección facultativa: solo Paco, con trayectoria, perfiles y conferencias. */
.pendiente { background: var(--amarillo) !important; }
.autor { display: grid; grid-template-columns: 300px 1fr; gap: 40px; border: 1px solid var(--tinta); background: var(--papel); padding: 36px; }
.autor__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); border: 1px solid var(--tinta); transition: filter .6s var(--ease); }
.autor:hover .autor__foto img { filter: none; }
.autor h3 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.035em; margin: 8px 0 14px; }
.autor__texto > p:not([class]) { color: var(--texto); font-size: 17px; line-height: 1.55; max-width: 62ch; }
.autor__cifras { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 22px 0; border: 1px solid var(--tinta); }
.autor__cifras div { padding: 10px 18px; border-right: 1px solid var(--tinta); }
.autor__cifras div:last-child { border-right: 0; }
.autor__cifras dt { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.autor__cifras dd { margin: 2px 0 0; font: 800 24px var(--f); color: var(--violeta); }
.autor__trayectoria { list-style: none; padding: 0; margin: 0 0 20px; border-left: 1px solid var(--tinta); font-size: 12px; }
.autor__trayectoria li { padding: 6px 0 6px 16px; position: relative; }
.autor__trayectoria li::before { content: ""; position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--violeta); translate: 0 -50%; }
.autor__trayectoria b { display: inline-block; width: 46px; color: var(--violeta); }
.autor__perfiles { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.autor__perfiles a { border: 1px solid var(--tinta); padding: 6px 12px; color: var(--tinta); text-decoration: none; }
.charlas { margin-top: 32px; }
.charlas__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; }
.charla { border: 1px solid var(--tinta); background: var(--papel); padding: 14px; }
.charla__video { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--tinta); color: #fff; font-size: 22px; margin-bottom: 10px; }
.charla p { font-size: 10px; color: var(--gris); margin: 0 0 4px; }
.charla h4 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
@media (max-width: 767px) {
.autor { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
.autor__foto img { aspect-ratio: 1; max-width: 220px; }
.autor__cifras { grid-template-columns: repeat(3, 1fr); }
.charlas__lista { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
.obra-historia .medios__render, .obra-historia .medios__video { object-fit: contain; }
.cap[data-cap="recorrido"] { align-items: flex-start; padding-bottom: 0; }
}
.autor__trayectoria i { font-style: normal; background: var(--violeta); color: #fff; font-size: 9px; padding: 1px 5px; margin-left: 6px; text-transform: uppercase; }
.autor__perfiles a:hover { background: var(--tinta); color: #fff; }
.charla-destacada { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; margin-top: 32px; border: 1px solid var(--tinta); background: var(--papel); }
.charla-destacada__video { position: relative; display: block; padding: 0; border: 0; border-right: 1px solid var(--tinta); aspect-ratio: 16 / 9; background: var(--tinta); cursor: pointer; overflow: hidden; }
.charla-destacada__video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.charla-destacada__video:hover img { transform: scale(1.03); }
.charla-destacada__video span { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 72px; height: 72px; border-radius: 50%; background: var(--violeta); color: #fff; display: grid; place-items: center; font-size: 26px; }
.charla-destacada__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.charla-destacada__texto { padding: 28px; align-self: center; }
.charla-destacada__texto h4 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.03em; margin: 8px 0 10px; }
.charla-destacada__texto p:last-child { color: var(--gris); }
@media (max-width: 767px) { .charla-destacada { grid-template-columns: 1fr; } .charla-destacada__video { border-right: 0; border-bottom: 1px solid var(--tinta); } }