/* ============================================================
   SANTJAKOV — pages.css
   Estilos propios de las páginas internas (work.html, about.html).
   Carga DESPUÉS de tokens.css + site.css.
   ============================================================ */

/* ---- Overrides de chrome para páginas internas ----
   El body lleva class="page-inner intro-handoff" (sin 'past-hero'),
   así el logo del nav queda visible para volver al home y la
   hamburguesa funciona desde el inicio. El CTA fijo se muestra
   siempre salvo cuando el footer está a la vista. */
body.page-inner { background: transparent; }   /* deja ver la textura del fondo (#bgFlow); html mantiene var(--bg) de fallback */
body.page-inner .nav-logo { opacity: 1; pointer-events: auto; }
body.page-inner .book-cta { opacity: 1; pointer-events: auto; }
body.page-inner.footer-visible .book-cta { opacity: 0 !important; pointer-events: none !important; }

/* reveal genérico al entrar al viewport */
.reveal { opacity: 0; transform: translateY(28px);
  transition: opacity 950ms cubic-bezier(.2,.7,.2,1), transform 950ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   HERO DE PÁGINA INTERNA (título offset tipo museo)
   ============================================================ */
.page-hero {
  min-height: 80vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 6vw 8vh;
  position: relative;
}
.page-hero .ph-eyebrow { color: var(--text-muted); margin-bottom: 26px; }
.page-hero-title {
  font-family: var(--font-display);
  text-transform: uppercase; font-weight: 400;
  line-height: 0.88; letter-spacing: var(--ls-display);
  font-size: clamp(58px, 13vw, 220px);
  color: var(--text); margin: 0;
}
.page-hero-title .l2 { display: block; margin-left: 0.22em; }   /* segunda línea desfasada */
.page-hero-lead {
  max-width: 640px; margin-top: 34px; color: var(--text-muted);
}
.page-hero-foot {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin-top: 40px; color: var(--text-muted);
}
.page-hero-foot .sep { width: 38px; height: 1px; background: var(--line); }

/* ============================================================
   WORK / GALLERY
   ============================================================ */
.work-gallery { padding: 4vh 0 0; overflow: hidden; }   /* contenedor propio (no la .gallery del home) */

/* Highlight: una pieza rompe el ritmo, con ficha de museo */
.work-highlight {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 5vw;
  align-items: center;
  padding: 14vh 6vw; max-width: 1500px; margin: 0 auto;
}
.work-highlight .wh-media { position: relative; }
.work-highlight .wh-media img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 40px 90px var(--shadow);
}
.work-highlight .wh-tag { color: var(--text-muted); margin-bottom: 22px; display: block; }
.work-highlight .wh-title {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  font-size: var(--t-h1); line-height: var(--lh-h1); color: var(--text); margin: 0 0 18px;
}
.work-highlight .wh-desc { color: var(--text-muted); max-width: 42ch; margin: 0 0 22px; }
.work-highlight .wh-meta {
  color: var(--text-muted); opacity: 0.8; border-top: 1px solid var(--line);
  padding-top: 16px; margin: 0;
}

@media (max-width: 900px) {
  .work-highlight { grid-template-columns: 1fr; gap: 6vh; padding: 8vh 6vw; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero {
  min-height: 94vh; position: relative;
  display: flex; align-items: flex-end;
  padding: 0 6vw 8vh; overflow: hidden;
}
.about-hero-bg { position: absolute; inset: 0; z-index: 0; }
.about-hero-bg img { width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.22) saturate(0.55) brightness(0.5) contrast(1.05); }
.about-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,17,16,0.45) 0%, rgba(18,17,16,0.25) 45%, var(--bg) 100%);
}
.about-hero .about-hero-inner { position: relative; z-index: 1; }
.about-hero-title {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  font-size: clamp(58px, 13vw, 200px); line-height: 0.9; letter-spacing: var(--ls-display);
  color: var(--text); margin: 0;
}
.about-hero-sub { color: var(--text-muted); max-width: 560px; margin-top: 26px; }

/* Frase emblema (centrada, grande, serif) */
.about-quote {
  padding: 20vh 8vw; max-width: 1100px; margin: 0 auto; text-align: center;
}
.about-quote p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.32; letter-spacing: -0.01em;
  color: var(--text); margin: 0;
}
.about-quote .q-soft { color: var(--text-muted); }
.about-quote cite {
  display: block; margin-top: 38px; font-style: normal;
  color: var(--text-muted); letter-spacing: 0.24em; text-transform: uppercase; font-size: var(--t-label);
}

/* Story: dos columnas editoriales */
.about-story { padding: 8vh 6vw 12vh; max-width: 1500px; margin: 0 auto; }
.about-story-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 6vw; align-items: start; }
.about-story-grid .as-label { color: var(--text-muted); margin-bottom: 22px; }
.about-story-grid h2 {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  font-size: var(--t-h1); line-height: var(--lh-h1); color: var(--text); margin: 0;
}
.about-story-grid .as-body > p { color: var(--text-muted); margin: 0 0 1.3em; max-width: 56ch; }
.about-story-grid .as-body em { color: var(--text); font-style: italic; }

@media (max-width: 900px) {
  .about-story-grid { grid-template-columns: 1fr; gap: 4vh; }
}

/* El nombre */
.about-name {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14vh 6vw; max-width: 1100px; margin: 0 auto; text-align: center;
}
.about-name .an-label { color: var(--text-muted); margin-bottom: 30px; display: block; }
.about-name .an-mark {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  font-size: clamp(40px, 7vw, 110px); line-height: 0.95; letter-spacing: var(--ls-display);
  color: var(--text); margin: 0 0 28px;
}
.about-name .an-body { color: var(--text-muted); max-width: 60ch; margin: 0 auto; }

/* ============================================================
   CIERRE DE PÁGINA (CTA antes del footer)
   ============================================================ */
.page-closing { text-align: center; padding: 18vh 6vw; }
.page-closing h2 {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  font-size: var(--t-display); line-height: var(--lh-display); color: var(--text); margin: 0 0 26px;
}
.page-closing p { color: var(--text-muted); max-width: 52ch; margin: 0 auto 38px; }
.page-closing .pc-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }