/* ============================================================
   MARG RENDERS — "Conocé cómo trabajamos en el estudio"
   Editorial, warm-paper register (institutional counterpoint to
   the cinematic dark Home). Reuses the same token system —
   just the paper side of it instead of the dark side.
   Depends on assets/css/global.css — load after it.
   ============================================================ */

body.doc {
  background: var(--paper);
  color: var(--bg);
}
body.doc .footer { background: var(--paper); border-top: 1px solid rgba(20,18,15,0.1); }
body.doc .footer .lockup .lk-word,
body.doc .footer .lockup .lk-rule,
body.doc .footer .lockup .lk-sub { color: var(--bg); background-color: var(--bg); }
body.doc .footer .colophon { color: rgba(20,18,15,0.55); }

.doc-main { max-width: 980px; margin: 0 auto; padding: 0 var(--pad); }

/* ---- masthead ---- */
.doc-masthead {
  padding: calc(var(--nav-h) + clamp(3rem, 10vh, 7rem)) var(--pad) clamp(4rem, 10vh, 7rem);
}
.doc-masthead .doc-inner { max-width: 980px; margin: 0 auto; }
.doc-masthead .eyebrow { color: rgba(20,18,15,0.45); }
.doc-masthead h1 {
  margin-top: clamp(1.2rem, 3vh, 2rem);
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.01em;
  color: var(--bg);
  max-width: 18ch;
}
.doc-masthead .doc-quote {
  margin-top: clamp(2rem, 5vh, 3.4rem);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.4; letter-spacing: -0.005em;
  color: rgba(20,18,15,0.72);
  max-width: 42ch;
  text-wrap: pretty;
}

/* ---- table of contents ---- */
.doc-toc {
  padding: 0 var(--pad) clamp(4rem, 10vh, 7rem);
}
.doc-toc-inner {
  max-width: 980px; margin: 0 auto;
  border-top: 1px solid rgba(20,18,15,0.12);
  padding-top: clamp(1.5rem, 4vh, 2.4rem);
}
.doc-toc-inner .eyebrow { display: block; margin-bottom: clamp(1.2rem, 3vh, 1.8rem); color: rgba(20,18,15,0.45); }
.doc-toc ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.2rem 2rem;
}
.doc-toc li { border-top: 1px solid rgba(20,18,15,0.08); }
.doc-toc a {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding: 0.7rem 0;
  font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.02em;
  color: var(--bg);
}
.doc-toc a .tc-num { font-variant-numeric: tabular-nums; color: rgba(20,18,15,0.4); font-size: 0.78rem; }
.doc-toc a .tc-label { position: relative; }
.doc-toc a .tc-label::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.doc-toc a:hover .tc-label::after { transform: scaleX(1); transform-origin: left; }

/* ---- doc sections ---- */
.doc-section {
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad);
  border-top: 1px solid rgba(20,18,15,0.1);
}
.doc-section .doc-inner { max-width: 980px; margin: 0 auto; }
.doc-section .doc-eyebrow {
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: clamp(1.4rem, 4vh, 2.2rem);
}
.doc-section .doc-eyebrow .num { font-family: var(--serif); font-size: 1rem; color: rgba(20,18,15,0.4); font-variant-numeric: tabular-nums; }
.doc-section .doc-eyebrow .eyebrow { color: rgba(20,18,15,0.5); }
.doc-section h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.01em;
  color: var(--bg);
  max-width: 26ch;
  margin-bottom: clamp(1.4rem, 4vh, 2rem);
}
.doc-section p {
  font-family: var(--sans); font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.68; color: rgba(20,18,15,0.72);
  max-width: 62ch;
}
.doc-section p + p { margin-top: 1.1em; }
.doc-section .doc-lead {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.4;
  color: rgba(20,18,15,0.85);
  max-width: 44ch;
}

/* tag / topic list — thin inline chips, editorial not "buttons" */
.doc-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; margin-top: 1.6rem; }
.doc-tags li {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.03em;
  color: rgba(20,18,15,0.65);
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(20,18,15,0.16);
  border-radius: 1px;
}

/* numbered service list (Qué hacemos) */
.doc-services { list-style: none; margin-top: 0.5rem; }
.doc-service {
  display: grid;
  grid-template-columns: clamp(2rem, 4vw, 3rem) minmax(0, 0.8fr) minmax(0, 1.3fr);
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(1.8rem, 4.5vh, 2.6rem) 0;
  border-top: 1px solid rgba(20,18,15,0.1);
}
.doc-services .doc-service:last-child { border-bottom: 1px solid rgba(20,18,15,0.1); }
.doc-service .sv-num {
  font-family: var(--serif); font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  color: rgba(20,18,15,0.35); font-variant-numeric: tabular-nums;
  padding-top: 0.4em;
}
.doc-service .sv-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.15; color: var(--bg);
}
.doc-service .sv-desc {
  font-family: var(--sans); font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.6; color: rgba(20,18,15,0.68);
}
.doc-service .sv-desc + ul.doc-tags { margin-top: 1rem; }

/* two-channel comms block */
.doc-channels { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); margin-top: 1.6rem; max-width: 62ch; }
.doc-channel .ch-name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--bg); }
.doc-channel p { margin-top: 0.5rem; }

/* closing section reads a touch larger, like the Home statement */
.doc-closing p {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.38; letter-spacing: -0.005em;
  color: rgba(20,18,15,0.82); max-width: 46ch;
}
.doc-closing p + p { margin-top: 0.9em; }

/* back-to-projects close, mirrors hero-cta language */
.doc-return {
  padding: clamp(3rem, 8vh, 5rem) var(--pad) clamp(5rem, 12vh, 8rem);
}
.doc-return-inner {
  max-width: 980px; margin: 0 auto;
  border-top: 1px solid rgba(20,18,15,0.1);
  padding-top: clamp(2rem, 5vh, 3rem);
}
.doc-return a {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bg);
}
.doc-return a .arrow { display: inline-block; transform: scaleX(-1); transition: transform 0.45s var(--ease); }
.doc-return a:hover .arrow { transform: scaleX(-1) translateX(5px); }

@media (max-width: 640px) {
  .doc-toc ol { grid-template-columns: 1fr; }
  .doc-service { grid-template-columns: 1fr; gap: 0.5rem; }
  .doc-service .sv-num { padding-top: 0; }
  .doc-channels { grid-template-columns: 1fr; }
}