/* Créditos, privacidad y 404: la misma voz, sin escenas. */
.pagina { background: var(--negro); }
.banda-fija { position: sticky; background: var(--negro); }
.pagina-cuerpo { padding: clamp(40px, 7vh, 90px) var(--g) clamp(60px, 10vh, 120px); }
.pagina-titulo { font-size: clamp(3rem, 9vw, 9rem); font-stretch: 62%; font-weight: 800; line-height: .9; color: var(--hueso); }
.pagina-entrada { margin-top: 20px; font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.3; max-width: 36em; }
.pagina-resumen { margin-top: 18px; font-family: var(--mono); font-size: 13px; color: var(--t2); }

.creditos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 clamp(16px, 2vw, 32px); margin-top: 26px; }
.creditos li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--l1); content-visibility: auto; contain-intrinsic-size: auto 90px; }
.creditos img { background: var(--hueco); width: 96px; height: 54px; object-fit: cover; }
.c-titulo { font-size: 14.5px; color: var(--t1); }
.c-autor { font-size: 13.5px; color: var(--t2); }
.c-meta { font-size: 12.5px; color: var(--t3); }
.c-meta a { color: var(--t1); text-underline-offset: 2px; }

.texto-largo { max-width: 52em; }
.texto-largo h2 { margin-top: 44px; font-size: clamp(1.8rem, 3.4vw, 3rem); font-stretch: 66%; font-weight: 750; line-height: 1; color: var(--hueso); }
.texto-largo h3 { margin-top: 24px; font-size: 16.5px; font-weight: 650; color: var(--t1); }
.texto-largo p { margin-top: 10px; color: var(--t1); }
.texto-largo ul { margin-top: 10px; }
.texto-largo li { padding: 6px 0 6px 16px; position: relative; color: var(--t1); }
.texto-largo li::before { content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 1px; background: var(--t2); }
.pasos { margin-top: 12px; counter-reset: paso; }
.texto-largo .pasos li { counter-increment: paso; padding: 10px 0 10px 34px; }
.texto-largo .pasos li::before { content: counter(paso); top: 9px; width: auto; height: auto; background: none; font-family: var(--mono); color: var(--hueso); }
.texto-largo pre { margin-top: 10px; padding: 12px 14px; background: var(--elevado); overflow-x: auto; font-size: 13.5px; color: var(--t1); }
.paso-img { display: block; margin-top: 12px; width: 100%; max-width: 332px; height: auto; border-radius: 6px; }
.licencias pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.45; }
.licencias h3 { margin-top: 30px; }
.paso-img-ancha { max-width: 380px; border-radius: 9px; }
.desplegable { margin-top: 22px; color: var(--t1); }
.desplegable summary { cursor: pointer; font-weight: 650; }
.sello-borrador { display: inline-block; margin: 0 0 22px !important; padding: 7px 12px; border: 1.5px solid var(--hueso); color: var(--hueso) !important; font-family: var(--mono); font-size: 13px; }
.pagina-fecha { margin-top: 40px !important; font-family: var(--mono); font-size: 13px; color: var(--t2) !important; }

.pagina-404 { min-height: 100svh; display: flex; align-items: flex-end; position: relative; overflow: hidden; }
.n404-muro { position: absolute; inset: 0; background: url(/catalogo/atlas_0.jpg) 0 0 / auto 250% repeat-x; opacity: .2; filter: grayscale(1); }
.n404-mira { position: absolute; right: 8vw; top: 12vh; width: min(46vw, 52vh); height: auto; }
.n404-texto { position: relative; padding: var(--g); padding-bottom: clamp(30px, 8vh, 80px); }
.n404-texto .t1 { max-width: 7em; }
.n404-texto .acciones { margin-top: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .n404-mira { animation: rastrea 7s steps(1, end) infinite; }
  @keyframes rastrea { 0% { transform: none; } 18% { transform: translate(-28vw, 6vh); } 36% { transform: translate(-6vw, 26vh); } 54% { transform: translate(-40vw, 16vh); } 72% { transform: translate(-16vw, -2vh); } 88% { transform: translate(-30vw, 30vh); } }
}