/* ==========================================================================
   CUENTO DE HILOS — ESTILOS COMPARTIDOS
   Editorial antes que comercial. El vacío también diseña.
   Ver web/memoria/02-sistema-de-diseno.md
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cdh-paper);
  color: var(--cdh-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

html[lang="ja"] body { font-family: var(--font-jp-sans); line-height: 1.95; letter-spacing: 0.02em; }
html[lang="ja"] p { max-width: 32em; }
html[lang="ja"] .statement,
html[lang="ja"] .hero h1 { letter-spacing: 0.01em; }

h1, h2, h3, h4, .serif { font-family: var(--font-serif); font-weight: 500; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] .serif { font-family: var(--font-jp); }

/* Los encabezados heredan color del contenedor (body = tinta por defecto).
   Esto es lo que permite que .section.deep / .site-footer cambien el color
   de h1/h2/h3 a marfil simplemente cambiando su propio "color". No fijar
   aquí un color explícito: si se fija, gana siempre sobre la herencia. */
h1, h2, h3 { line-height: 1.22; margin: 0; }
p { margin: 0 0 var(--space-3); max-width: 62ch; color: var(--cdh-ink-soft); }
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--margin-edge);
  padding-right: var(--margin-edge);
}

.kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cdh-teal-dark);
  display: inline-block;
  margin-bottom: var(--space-2);
}

.note {
  font-size: var(--fs-note);
  color: var(--cdh-ink-faint);
  font-style: italic;
}

.rule {
  border: none;
  border-top: 1px solid var(--cdh-rule);
  margin: 0;
}

/* ---------- Skip link (accesibilidad) ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--cdh-ink); color: var(--cdh-paper);
  padding: 0.75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* ---------- Header ----------
   Glass discreto: transparente, con blur, y se oculta al bajar (F03:
   "un poco más pequeño, muy discreto, que casi desaparezca"). */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 252, 250, 0.72);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid rgba(150, 140, 115, 0.28);
  box-shadow: 0 1px 0 rgba(36,35,32,0.03);
  transition: transform 0.5s var(--ease-editorial), background 0.4s var(--ease-editorial);
}
.site-header.is-hidden { transform: translateY(-100%); }
/* Altura fija en el propio .wrap: una sola fuente de verdad para el alto
   del header. Nada de padding-top/padding-bottom aquí — cualquier
   diferencia entre ambos (aunque sea de decimales) es lo que causaba la
   asimetría visual reportada. Con height fijo + align-items:center en el
   padre, el centrado de cada hijo es matemáticamente exacto.
   IMPORTANTE: .site-header contiene DOS <div class="wrap"> (la fila
   principal y el contenedor del menú móvil). El selector debe apuntar
   solo al primero — si apunta a ambos, el segundo (normalmente colapsado
   a 0 porque .mobile-nav está en display:none) también se fuerza a 60px,
   y aparece una franja vacía extra debajo del header entero. Ya pasó una
   vez: no volver a usar ".site-header .wrap" sin ":first-of-type". */
.site-header > .wrap:first-of-type {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
  padding-top: 0; padding-bottom: 0;
  gap: var(--space-3);
}
.brand-mark { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.brand-mark img { height: 26px; width: auto; display: block; }
.brand-mark span {
  font-family: var(--font-serif); font-size: 0.95rem; color: var(--cdh-ink);
  letter-spacing: 0.01em;
}

.main-nav { display: none; }
.main-nav ul { display: flex; align-items: center; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.main-nav a {
  text-decoration: none; font-size: 0.84rem; color: var(--cdh-ink-soft);
  letter-spacing: 0.02em; padding: 0.3rem 0; border-bottom: 1px solid transparent;
  transition: border-color var(--duration-med) var(--ease-editorial), color var(--duration-med) var(--ease-editorial);
}
.main-nav a:hover, .main-nav a.is-active { color: var(--cdh-ink); border-bottom-color: var(--cdh-teal); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* Language switcher */
.lang-switch { position: relative; display: flex; align-items: center; }
.lang-switch button {
  font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.06em;
  background: none; border: 1px solid var(--cdh-rule); color: var(--cdh-ink-soft);
  padding: 0.45rem 0.6rem; cursor: pointer; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.4rem;
}
.lang-switch button:hover { border-color: var(--cdh-teal); color: var(--cdh-ink); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 0.5rem);
  background: var(--cdh-paper); border: 1px solid var(--cdh-rule);
  min-width: 150px; padding: 0.35rem; display: none; flex-direction: column;
  box-shadow: 0 12px 28px rgba(36,35,32,0.08);
}
.lang-menu.is-open { display: flex; }
.lang-menu a {
  padding: 0.55rem 0.75rem; text-decoration: none; font-size: 0.86rem;
  color: var(--cdh-ink-soft);
}
.lang-menu a:hover { background: var(--cdh-teal-tint); color: var(--cdh-ink); }
.lang-menu a[aria-current="true"] { color: var(--cdh-teal-dark); font-weight: 600; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--cdh-rule);
  padding: 0.45rem 0.7rem; cursor: pointer; color: var(--cdh-ink);
}

@media (min-width: 900px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }
}

/* Mobile nav panel */
.mobile-nav {
  display: none; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) 0; border-top: 1px solid var(--cdh-rule);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a { text-decoration: none; color: var(--cdh-ink-soft); font-size: 1.05rem; padding: 0.3rem 0; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

/* ---------- Hero ----------
   Portada de revista: la fotografía ocupa (casi) toda la pantalla,
   el texto flota encima con un velo degradado para legibilidad.
   Ver feedback F02 punto 2. */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--cdh-ink);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: center center;
  animation: cdh-hero-zoom 34s ease-in-out infinite alternate;
}
/* F03: "un movimiento del 2% durante 30 segundos, nada más" — casi imperceptible */
@keyframes cdh-hero-zoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
}
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,15,15,0.08) 0%, rgba(8,15,15,0.18) 40%, rgba(6,12,12,0.78) 100%);
}
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  padding-top: var(--space-6); padding-bottom: var(--space-6);
}
.hero-copy { min-width: 0; max-width: 34ch; color: var(--cdh-ivory); }
.hero-eyebrow { font-family: var(--font-sans); font-size: var(--fs-kicker); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cdh-teal-mist); margin-bottom: var(--space-3); }
.hero h1 { font-size: clamp(2.4rem, 6vw + 1rem, 5rem); font-weight: 400; color: var(--cdh-ivory); }
.hero .lede { font-size: var(--fs-lede); color: rgba(248,244,236,0.88); max-width: 40ch; margin-top: var(--space-3); }
.hero-scroll-cue { margin-top: var(--space-4); font-size: var(--fs-note); color: rgba(248,244,236,0.65); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Sections ----------
   Una sola línea fina (--cdh-rule) conecta cada franja con la siguiente,
   para que el recorrido se sienta como pasar páginas de un mismo libro,
   no como bloques de color flotando por separado. */
.section {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-top: 1px solid var(--cdh-rule);
}
.hero + .section { border-top: none; }
.section.tint {
  background: var(--cdh-teal-tint);
  border-top-color: transparent;
  position: relative;
  overflow: hidden;
}
.section.linen { background: var(--cdh-linen-soft); border-top-color: var(--cdh-rule); }
.section.deep {
  background: var(--cdh-teal-dark);
  color: var(--cdh-ivory);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.section.deep p { color: var(--cdh-teal-mist); }
.section.deep .kicker { color: #A9E0DD; }
.section.deep .note { color: var(--cdh-teal-mist); }

.section-head { max-width: 52ch; margin-bottom: var(--space-3); }
.section-head h2 { font-size: var(--fs-h2); font-weight: 400; }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-3); }
.col-span-12 { grid-column: span 12; }
@media (min-width: 900px) {
  .col-span-md-8 { grid-column: span 8; }
  .col-span-md-7 { grid-column: span 7; }
  .col-span-md-6 { grid-column: span 6; }
  .col-span-md-5 { grid-column: span 5; }
  .col-span-md-4 { grid-column: span 4; }
}

/* ---------- Manifesto statement (con fondo animado de imágenes) ---------- */
.statement-bg {
  position: absolute; inset: 0; z-index: 0;
}
.statement-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: grayscale(1) contrast(1.05);
  animation: cdh-crossfade 24s ease-in-out infinite;
}
.statement-bg img:nth-child(1) { animation-delay: 0s; }
.statement-bg img:nth-child(2) { animation-delay: 8s; }
.statement-bg img:nth-child(3) { animation-delay: 16s; }
.statement-bg::after {
  content: ""; position: absolute; inset: 0;
  background: var(--cdh-teal-tint); opacity: 0.86;
}
@keyframes cdh-crossfade {
  0% { opacity: 0; }
  4% { opacity: 0.5; }
  30% { opacity: 0.5; }
  38% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .statement-bg img { animation: none; opacity: 0; }
}
.statement-wrap { position: relative; z-index: 1; }
.statement {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.7rem, 3vw + 1rem, 2.8rem);
  line-height: 1.4; color: var(--cdh-ink); max-width: 20ch;
}
.statement cite {
  display: block; margin-top: var(--space-3); font-family: var(--font-sans);
  font-style: normal; font-size: var(--fs-note); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cdh-ink-faint);
}

/* ---------- Editorial rows (estudio, investigación, journal) ---------- */
.row { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .row { grid-template-columns: 5fr 7fr; gap: var(--space-5); } }
.row.reverse { direction: rtl; }
.row.reverse > * { direction: ltr; }

.texture-frame { overflow: hidden; background: var(--cdh-sand); }
.texture-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.texture-frame.wide img { aspect-ratio: 16 / 10; }

.eyebrow-num {
  font-family: var(--font-serif); color: var(--cdh-teal); font-size: 1rem; margin-bottom: var(--space-1); display: block;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  color: var(--cdh-ink); font-size: 0.92rem; border-bottom: 1px solid var(--cdh-ink);
  padding-bottom: 0.15rem; margin-top: var(--space-3);
  transition: color var(--duration-med) var(--ease-editorial), border-color var(--duration-med) var(--ease-editorial), gap var(--duration-med) var(--ease-editorial);
}
.link-arrow:hover { color: var(--cdh-teal-dark); border-color: var(--cdh-teal-dark); gap: 0.85rem; }

/* ---------- Obra destacada / colecciones list (sin cards de ecommerce) ---------- */
.works-list { list-style: none; margin: 0; padding: 0; }
.works-list li {
  border-top: 1px solid var(--cdh-rule);
  padding: var(--space-4) 0;
  display: grid; gap: var(--space-2);
}
.works-list li:last-child { border-bottom: 1px solid var(--cdh-rule); }
@media (min-width: 900px) {
  .works-list li { grid-template-columns: 2fr 5fr 3fr 2fr; align-items: baseline; gap: var(--space-3); }
}
.works-list .work-year { font-size: var(--fs-note); color: var(--cdh-ink-faint); }
.works-list .work-title { font-family: var(--font-serif); font-size: 1.35rem; }
.works-list .work-meta { font-size: 0.88rem; color: var(--cdh-ink-soft); }
.works-list .work-line { font-size: var(--fs-note); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cdh-teal-dark); text-align: left; }
@media (min-width: 900px) { .works-list .work-line { text-align: right; } }

/* ---------- Journal entries ---------- */
.journal-list { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .journal-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.journal-entry .note { display: block; margin-bottom: var(--space-1); }
.journal-entry h3 { font-size: 1.2rem; font-weight: 400; margin-bottom: var(--space-2); }
.journal-entry p { font-size: 0.95rem; }

/* ---------- Tienda teaser ---------- */
.shop-teaser .row { align-items: start; }

/* ---------- Footer ----------
   Mismo tono que el cierre de Tienda (--cdh-teal-dark): el sitio termina
   en un único gesto oscuro, no en una franja negra desconectada del resto
   de la paleta. */
.site-footer { background: var(--cdh-teal-dark); color: var(--cdh-ivory); padding: var(--space-6) 0 var(--space-4); border-top: 1px solid rgba(255,255,255,0.14); }
.site-footer a { color: var(--cdh-ivory); text-decoration: none; }
.site-footer a:hover { color: var(--cdh-teal-mist); }
.footer-grid { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-4); } }
.footer-grid h4 { font-family: var(--font-sans); font-size: var(--fs-kicker); letter-spacing: 0.14em; text-transform: uppercase; color: #A9E0DD; margin: 0 0 var(--space-2); font-weight: 600; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-grid a { color: var(--cdh-teal-mist); font-size: 0.92rem; }
.footer-grid a:hover { color: var(--cdh-ivory); }
.footer-statement { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; max-width: 34ch; color: var(--cdh-ivory) !important; margin-bottom: var(--space-3); }
.footer-bottom {
  margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; font-size: 0.8rem; color: var(--cdh-teal-mist);
}

/* ---------- Autora + línea de tiempo (añadido tras feedback F02) ---------- */
.author-block {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--cdh-rule);
  display: grid; gap: var(--space-1);
}
.author-block .name { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--cdh-ink); }
.author-block .roles { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cdh-ink-faint); }
.author-block p { font-size: 0.95rem; margin-top: var(--space-1); max-width: 46ch; }

.timeline { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
@media (min-width: 900px) { .timeline { flex-direction: row; gap: var(--space-3); } }
.timeline-item {
  padding-left: 1.1rem; border-left: 2px solid var(--cdh-rule);
  display: grid; gap: 0.3rem;
}
@media (min-width: 900px) {
  .timeline-item { flex: 1; padding-left: 0; padding-top: 1.1rem; border-left: none; border-top: 2px solid var(--cdh-rule); }
}
.timeline-year { font-family: var(--font-serif); color: var(--cdh-teal-dark); font-size: 1.05rem; }
.timeline-label { font-size: 0.85rem; color: var(--cdh-ink-soft); }

/* ---------- Obra museográfica (reemplaza la lista tabular) ---------- */
.works-museographic { display: block; }
.work-entry {
  padding: var(--space-4) 0; border-top: 1px solid var(--cdh-rule);
  display: grid; gap: var(--space-2);
}
.work-entry:last-child { border-bottom: 1px solid var(--cdh-rule); }
@media (min-width: 900px) {
  .work-entry { grid-template-columns: 2fr 5fr 4fr; align-items: baseline; gap: var(--space-4); }
}
.work-num { font-family: var(--font-serif); font-size: clamp(2.2rem, 3.4vw, 3.6rem); color: var(--cdh-teal); opacity: 0.32; line-height: 1; }
.work-title-lg { font-family: var(--font-serif); font-size: clamp(1.35rem, 1.6vw + 1rem, 1.9rem); }
.work-desc { font-size: 0.95rem; color: var(--cdh-ink-soft); margin: 0; }
.work-tag { font-size: var(--fs-note); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cdh-teal-dark); text-align: left; }
@media (min-width: 900px) { .work-tag { text-align: right; } }

/* ---------- Feature a pantalla completa (Investigación) ----------
   Mismo tratamiento que .quote-feature: se ajusta al ancho del marco y
   se recorta lo que haga falta (object-fit: cover), en vez de dejar aire
   a los lados. */
.feature-full { display: block; }
.feature-frame {
  width: 100%; height: 78vh; overflow: hidden;
  background: var(--cdh-paper);
}
.feature-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .feature-frame { height: 60vh; } }
.feature-caption { max-width: 48ch; margin-top: var(--space-4); }

/* ---------- Tarjetas de journal con imagen ---------- */
.journal-list.with-images { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .journal-list.with-images { grid-template-columns: repeat(3, 1fr); } }
.journal-card { display: flex; flex-direction: column; }
.journal-card .card-frame { overflow: hidden; background: var(--cdh-sand); aspect-ratio: 4 / 3; }
.journal-card .card-frame img { width: 100%; height: 100%; object-fit: cover; }
.journal-card h3 { font-size: 1.1rem; font-weight: 400; margin-top: var(--space-2); margin-bottom: var(--space-1); }
.journal-card p { font-size: 0.92rem; margin-bottom: var(--space-1); }
.journal-card .read-link { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cdh-teal-dark); }

/* ---------- Galería de personajes — un solo cuadro, fundido cada 8s ----------
   Reemplaza una primera versión en cuadrícula "flotante" que se veía
   desalineada (fotos con proporciones distintas). Un único marco fijo
   evita cualquier problema de alineación y es puro fundido, sin deslizar
   ni rebotar — como pide F03. Ciclo total: 5 personajes × 8s = 40s. */
.character-carousel { max-width: 440px; margin: 0 auto; }
.character-frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cdh-sand);
}
.character-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: cdh-character-fade 40s ease-in-out infinite;
}
.character-frame img:nth-child(1) { animation-delay: 0s; }
.character-frame img:nth-child(2) { animation-delay: 8s; }
.character-frame img:nth-child(3) { animation-delay: 16s; }
.character-frame img:nth-child(4) { animation-delay: 24s; }
.character-frame img:nth-child(5) { animation-delay: 32s; }

.character-caption { position: relative; height: 2.4rem; margin-top: var(--space-2); }
.character-caption span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.05rem; color: var(--cdh-ink-soft);
  opacity: 0; animation: cdh-character-fade 40s ease-in-out infinite;
}
.character-caption span:nth-child(1) { animation-delay: 0s; }
.character-caption span:nth-child(2) { animation-delay: 8s; }
.character-caption span:nth-child(3) { animation-delay: 16s; }
.character-caption span:nth-child(4) { animation-delay: 24s; }
.character-caption span:nth-child(5) { animation-delay: 32s; }

@keyframes cdh-character-fade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  18%  { opacity: 1; }
  22%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .character-frame img, .character-caption span { animation: none; opacity: 0; }
  .character-frame img:first-child, .character-caption span:first-child { opacity: 1; }
}

/* ---------- Cita a pantalla completa (calidad / tiempo) ---------- */
.quote-feature {
  position: relative; min-height: 58vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
}
.quote-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.quote-feature::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,15,15,0.32), rgba(8,15,15,0.58));
}
.quote-feature blockquote {
  position: relative; z-index: 2; margin: 0; padding: 0 var(--margin-edge);
  font-family: var(--font-serif); font-style: italic; color: var(--cdh-ivory);
  font-size: clamp(1.3rem, 2.2vw + 1rem, 2.1rem); line-height: 1.5; max-width: 24ch;
}

/* ---------- Línea CTA discreta (previo a Tienda) ---------- */
.cta-line {
  text-align: center; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.15rem, 1.6vw + 1rem, 1.5rem); color: var(--cdh-ink); margin: 0 auto; max-width: 30ch;
}

/* ---------- Páginas internas: encabezado + galería secuencial ----------
   Reutilizado por Estudio/Obra/Investigación/Colecciones/Journal/Tienda/
   Contacto. Encabezado de página = mismo patrón que "Investigación" en
   el home (kicker + h1 + lede, y debajo una imagen grande). Piezas de
   Obra = bloques secuenciales, nunca cuadrícula (regla de F01). */
.page-hero { padding-top: var(--space-6); padding-bottom: 0; }
.page-hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h1); }
.page-hero .lede { max-width: 60ch; margin-top: var(--space-2); font-size: var(--fs-lede); color: var(--cdh-ink-soft); }

.obra-piece { padding-bottom: var(--space-6); }
.obra-piece + .obra-piece { border-top: 1px solid var(--cdh-rule); padding-top: var(--space-6); }
.obra-piece .feature-frame { margin: var(--space-4) 0; }
.obra-piece .eyebrow-num { margin-bottom: var(--space-1); }

/* ---------- Fade-in editorial (JS añade .is-visible) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--duration-slow) var(--ease-editorial), transform var(--duration-slow) var(--ease-editorial); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Utilidades ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}