/* =========================================================================== article.css — Plantilla de las páginas de servicio (los 6 "capítulos"). Cada página define su identidad con: y la clase de motivo (.motif-corporativo …). Depende de tokens.css + base.css. =========================================================================== */ .area { position: relative; } /* --- FRONTISPICIO (hero del capítulo, 100vh) ------------------------------ */ .area__frontis { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; row-gap: clamp(2rem, 5vh, 3.5rem); /* El padding superior es lo único que separa el numeral del masthead fijo (~65px): generoso a propósito. */ padding-block: clamp(6.5rem, 14vh, 9rem) clamp(2rem, 5vh, 4rem); overflow: clip; } .area__frontis-inner { /* "safe center": centrado cuando el contenido cabe, pero alineado al inicio cuando NO cabe. Sin esto, un bloque más alto que su pista se desborda por igual arriba y abajo — y ese desborde superior metería el numeral debajo del masthead en pantallas bajas. La primera declaración queda de reserva para navegadores sin soporte. */ align-self: center; align-self: safe center; display: grid; justify-items: center; gap: clamp(1.4rem, 3.5vh, 2.6rem); position: relative; z-index: var(--z-base); text-align: center; } .area__chapter { display: inline-flex; align-items: center; gap: 0.9em; color: var(--accent); } .area__chapter .glyph { display: inline-flex; align-items: center; line-height: 0; vertical-align: middle; } .area__chapter .glyph svg { width: 1.8em; height: 1.8em; display: block; } .area__title { font-size: var(--step-4); line-height: 1.0; letter-spacing: -0.02em; max-width: 18ch; } .area__title em { font-style: italic; color: var(--accent); } .area__lead { font-size: var(--step-1); line-height: 1.45; color: var(--paper-dim); max-width: 50ch; margin-inline: auto; } /* Numeral gigante: primera FILA REAL del grid, no un elemento absoluto. Los intentos anteriores fallaban por la misma razón de fondo: el bloque de contenido está centrado verticalmente, así que su posición depende del alto del texto de cada página — anclar el numeral a un borde fijo del hero lo dejaba en un sitio distinto al kicker en cada área. Estando en flujo, reserva su propio espacio y el gap del grid garantiza la separación con el kicker; el centrado del conjunto le da el aire de arriba. line-height 0.72 aprieta la caja contra los dígitos (que no tienen descendentes) para que el hueco no se sienta desproporcionado. */ .area__numeral { font-family: var(--font-display); font-size: var(--numeral); line-height: 0.72; color: var(--accent-ghost); pointer-events: none; user-select: none; } .area__numeral::before { content: var(--n, "01"); } .area__frontis .scroll-cue { justify-self: center; } /* --- MOTIVO GUILLOCHÉ (grabado de seguridad, uno por capítulo) ------------ Una sola roseta grande centrada en el timeline que se disuelve hacia los bordes — no un patrón repetido. Sustituye a los antiguos repeating-gradient (columnas, renglones, aspas…), que se repetían uniformes sobre toda la sección: densidad plana que competía con el texto en cada punto y cuya metáfora no se leía a 1px de grosor. La geometría la trae el SVG incluido (partials/motifs/*.svg, generado con tools/generar-guilloche.mjs); aquí solo se controla tamaño, color y disolución. El SVG usa stroke="currentColor", que hereda el `color` de abajo — funciona SOLO porque va inline vía {{include}}, no serviría como background-image (misma lección que con los íconos de área). */ .area__motif { position: absolute; top: 50%; left: 50%; width: min(92vmin, 840px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: var(--z-motif); pointer-events: none; color: var(--accent); opacity: var(--motif-opacity); /* La disolución arranca tarde y termina en el borde: la banda con más dibujo es la exterior, y una máscara corta se la comía entera. */ -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 97%); mask-image: radial-gradient(closest-side, #000 62%, transparent 97%); } .area__motif svg { width: 100%; height: 100%; display: block; } /* --- RAIL VERTICAL 01–06 (índice persistente de capítulos) ---------------- */ .rail { position: fixed; right: clamp(0.6rem, 1.6vw, 1.4rem); top: 50%; transform: translateY(-50%); z-index: var(--z-rail); display: grid; gap: clamp(0.5rem, 1.4vh, 0.95rem); } .rail__item { display: flex; align-items: center; gap: 0.6em; justify-content: flex-end; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; color: var(--faint); transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease); } .rail__item .tick { width: 0.9rem; height: 1px; background: currentColor; } .rail__item .name { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; text-transform: uppercase; transition: max-width var(--dur) var(--ease), opacity var(--dur-fast) var(--ease); } .rail__item:hover { color: var(--paper); } .rail__item:hover .name { max-width: 14rem; opacity: 1; } /* Activo = página actual (data-area en coincide con data-n del item). */ body[data-area="01"] .rail__item[data-n="01"], body[data-area="02"] .rail__item[data-n="02"], body[data-area="03"] .rail__item[data-n="03"], body[data-area="04"] .rail__item[data-n="04"], body[data-area="05"] .rail__item[data-n="05"], body[data-area="06"] .rail__item[data-n="06"] { color: var(--accent); } body[data-area="01"] .rail__item[data-n="01"] .tick, body[data-area="02"] .rail__item[data-n="02"] .tick, body[data-area="03"] .rail__item[data-n="03"] .tick, body[data-area="04"] .rail__item[data-n="04"] .tick, body[data-area="05"] .rail__item[data-n="05"] .tick, body[data-area="06"] .rail__item[data-n="06"] .tick { width: 1.8rem; } @media (max-width: 60rem) { .rail { display: none; } } /* --- CUERPO DEL ARTÍCULO -------------------------------------------------- */ .area__body { position: relative; } /* Rejilla de 2 pistas: marginalia (izq) · lectura (centro), centradas como un solo bloque (justify-content en vez de una tercera pista fantasma a la derecha) — antes solo la columna de lectura quedaba centrada y la marginalia colgaba de su borde izquierdo, con todo el conjunto inclinado hacia la derecha por el vacío del lado opuesto. */ .area__grid { display: grid; grid-template-columns: minmax(0, auto) minmax(auto, var(--measure)); justify-content: center; column-gap: clamp(1.5rem, 4vw, 4rem); } .area__grid > * { grid-column: 2; } .area__grid > .marginalia { grid-column: 1; justify-self: end; } /* TESIS con capitular */ .tesis__lead { font-size: var(--step-1); line-height: 1.5; } .tesis__lead::first-letter { font-family: var(--font-display); font-size: 4.2em; line-height: 0.74; float: left; padding: 0.04em 0.12em 0 0; color: var(--accent); font-weight: 380; } /* CÓMO INTERVENIMOS — círculos numerados con progreso ligado al scroll real. Mismo principio que la iluminación de palabras (reveal.js mide la posición real de cada círculo en cada frame): nada de disparo único ni animation-timeline, el paso activo y el relleno de la línea avanzan (o retroceden) exactamente con el scroll. Separado del texto de arriba con su propio margen — antes quedaban pegados. */ .intervenimos { position: relative; padding-left: clamp(1.5rem, 4vw, 3rem); margin-top: var(--s6); } .spine { position: absolute; left: 1.2rem; top: 0; bottom: 0; width: 1px; background: var(--hairline); overflow: hidden; } .spine__fill { position: absolute; inset: 0; background: linear-gradient(var(--accent), var(--accent-hi)); transform: scaleY(1); transform-origin: top; will-change: transform; } .js .spine__fill { transform: scaleY(0); } .steps { display: grid; gap: clamp(2rem, 5vh, 3.5rem); margin-top: var(--s2); } .step { display: grid; grid-template-columns: 2.4rem 1fr; gap: clamp(1rem, 2.5vw, 2rem); } .step__n { position: relative; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink-1); border: 1px solid var(--hairline-2); color: var(--muted); font-family: var(--font-mono); font-size: var(--step--1); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); } .js .step.is-active .step__n { border-color: var(--accent); color: var(--ink); background: var(--accent); } .step__h { font-size: var(--step-2); margin-bottom: 0.45em; padding-top: 0.25em; } .step__p { color: var(--paper-dim); } /* MARGINALIA — notas mono sticky a la izquierda */ .marginalia { position: sticky; top: 28vh; text-align: right; max-width: 16rem; display: grid; gap: var(--s3); } .note { display: grid; gap: 0.2em; } .note__label { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); } .note__text { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); line-height: 1.6; } @media (max-width: 64rem) { .area__grid { grid-template-columns: minmax(0, var(--measure)); justify-content: center; } .area__grid > * { grid-column: 1; } /* El reset de justify-self es imprescindible, no cosmético: la regla de escritorio alinea la marginalia con justify-self: end, y aquí la marginalia pasa a ser una tira horizontal desplazable más ancha que la columna. Alineada por su borde derecho, todo su cuerpo quedaba fuera de pantalla por la izquierda (se medían -608px en móvil) y las notas eran sencillamente inalcanzables. min-width: 0 deja que el ítem de grid pueda encoger, que es lo que habilita su propio overflow-x. */ .area__grid > .marginalia { grid-column: 1; justify-self: stretch; min-width: 0; } .marginalia { position: static; text-align: left; max-width: none; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--s4); overflow-x: auto; padding-bottom: var(--s2); border-top: 1px solid var(--hairline); padding-top: var(--s3); } } /* CITA DESTACADA (a sangre) — usa .pull de base.css con respiro propio */ .area__pull { padding-block: clamp(2.5rem, 7vh, 5rem); } /* MATERIAS QUE CUBRIMOS — índice tipográfico con líder punteado; cada fila es un desplegable (botón + panel) que detalla en qué consiste la materia, con la altura animada vía max-height (0 → un techo generoso). Más simple y confiable que el truco de grid-template-rows 0fr/1fr para este caso. */ .materias__head { margin-bottom: var(--s3); text-align: center; } .materias__item { border-bottom: 1px solid var(--hairline); } .materias__summary { display: flex; align-items: baseline; gap: 0.8em; width: 100%; padding-block: clamp(0.8rem, 2vh, 1.2rem); background: none; border: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .materias__summary .t { font-family: var(--font-serif); font-size: var(--step-1); color: var(--paper); transition: color var(--dur-fast) var(--ease); } .materias__summary .dots { flex: 1; border-bottom: 1px dotted var(--hairline); transform: translateY(-0.3em); } .materias__summary .meta { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; } .materias__summary:hover .t, .materias__summary:focus-visible .t { color: var(--accent-hi); } .materias__toggle { flex-shrink: 0; width: 1em; font-family: var(--font-mono); color: var(--accent); text-align: center; transition: transform var(--dur-fast) var(--ease); } .materias__item.is-open .materias__toggle { transform: rotate(45deg); } .materias__panel { max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); } .materias__detail { color: var(--paper-dim); max-width: 60ch; padding-bottom: clamp(0.8rem, 2vh, 1.2rem); } /* 20rem alcanzaba para el detalle de una sola frase; con el contenido expandido (dos frases, hasta ~70 palabras) algunos ítems lo superaban y el panel los cortaba en seco. 34rem deja margen holgado incluso en columnas angostas, donde el texto envuelve en más líneas. */ .materias__item.is-open .materias__panel { max-height: 34rem; } /* PUENTE — siguiente capítulo */ .puente { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; border-top: 1px solid var(--hairline); padding-top: var(--s4); } .puente__label { color: var(--muted); } .puente__next { display: inline-flex; align-items: baseline; gap: 0.5em; font-family: var(--font-display); font-size: var(--step-2); color: var(--paper); transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .puente__next .arrow { color: var(--accent); } .puente__next:hover, .puente__next:focus-visible { gap: 1.1em; color: var(--accent-hi); } /* --- VIEW TRANSITIONS (progresivo, entre páginas) ------------------------- */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }