/* ============================================================
   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; }

/* ============================================================
   DOC PAGE — FAQ · Aftercare · Before your session
   Las 3 comparten layout: título a la izquierda + acordeón a la derecha.
   Vivía duplicado en el <style> de cada página y se desincronizaba;
   ahora es UNA sola fuente. Solo esas 3 usan .doc — el resto no lo ve.
   ============================================================ */
/* Athelas — fuente de marca (BRAND_CORE/TIPOGRAFIAS). Solo Regular: el sitio no usa itálicas. */
@font-face {
  font-family: "Athelas";
  src: url("assets/fonts/athelas-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* la sección ocupa el 95% del ancho de la ventana (2.5vw de aire a cada lado) */
.doc { max-width: 95vw; margin: 0 auto; padding: 22vh 0 16vh;
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(48px, 7vw, 140px); align-items: start; }
.doc-head { position: sticky; top: 16vh; }
.doc-title { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; letter-spacing: 0.01em;
  font-size: clamp(40px, 5vw, 88px); line-height: 0.98; color: var(--text); margin: 0 0 26px; }
.doc-intro { font-family: var(--font-body); color: var(--text-muted); font-size: var(--t-body-m); line-height: 1.7;
  max-width: 40ch; margin: 0 0 40px; }
.doc-body { padding-top: 4px; }
/* divisoria SOLO entre filas: sin línea arriba de la primera ni debajo de la última */
.doc-item + .doc-item { border-top: 1px solid var(--line); }

/* fila desplegable: título · signo (+ → −) */
.doc-q { width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(16px, 2.6vw, 48px);
  padding: 30px 0; color: var(--text-muted);
  font-family: "Athelas", var(--font-display); text-transform: uppercase; font-weight: 400;
  font-size: clamp(20px, 2.1vw, 30px); letter-spacing: 0.02em; line-height: 1.15;
  transition: color 420ms ease; }
.doc-q:hover, .doc-q[aria-expanded="true"] { color: var(--cream); }
.doc-plus { position: relative; width: 13px; height: 13px; flex: none; }
.doc-plus::before, .doc-plus::after { content: ''; position: absolute; background: currentColor; }
.doc-plus::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.doc-plus::after  { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%);
  transition: transform 420ms cubic-bezier(.65, 0, .35, 1); }
.doc-q[aria-expanded="true"] .doc-plus::after { transform: translateX(-50%) scaleY(0); }   /* + → − */

/* panel: 0fr→1fr anima hasta la altura real del contenido, sin número mágico */
.doc-a { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 520ms cubic-bezier(.65, 0, .35, 1); }
.doc-a.open { grid-template-rows: 1fr; }
.doc-a > div { overflow: hidden; }
.doc-a p { font-family: var(--font-body); color: var(--text-muted); font-size: var(--t-body-m);
  line-height: 1.8; margin: 0; max-width: 60ch; padding: 0 0 32px; }
@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; gap: 7vh; padding: 19vh 0 12vh; }
  .doc-head { position: static; }
  .doc-q { gap: 14px; padding: 24px 0; }
}