/* fraqtal · Agentic OPS — Expediente v5. Tokens: brand/DESIGN.md */
:root {
  --tinta: #1C1B19; --grafito: #5E5A53; --lacre: #8B2E1F;
  --papel: #F3EFE7; --hueso: #FBF9F5; --piedra: #D9D2C5;
  --garamond: "EB Garamond", Garamond, serif;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px; --xl: 40px; --xxl: 64px; --section: 96px;
  --margin: 56px; --gutter: 24px; --refcol: 76px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--papel); color: var(--tinta);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--tinta); color: var(--papel); }
a { color: inherit; }
ol, ul { list-style: none; }

.wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--margin); padding-right: var(--margin); }
.ref { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.3; color: var(--grafito); }

/* Header + wordmark */
.top { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--xl); padding-bottom: var(--xl); }
.wordmark { display: flex; align-items: baseline; white-space: nowrap; font-style: normal; text-decoration: none; }
.wordmark .name, .wordmark .sep { font-family: var(--garamond); font-weight: 400; font-size: 32px; line-height: 1; }
.wordmark .name { letter-spacing: -0.005em; color: var(--tinta); }
.wordmark .sep { color: var(--grafito); margin: 0 0.3em; }
.wordmark .desc { font-family: var(--mono); font-weight: 500; font-size: 12.16px; letter-spacing: 0.06em; color: var(--grafito); }
.q { color: var(--lacre); font-style: normal; display: inline-block; transform-origin: 50% 70%; will-change: transform; animation: q-grow 4s infinite; }
@keyframes q-grow {
  0% { transform: scale(0.03125) rotateY(0deg); animation-timing-function: step-end; }
  8.75% { transform: scale(0.0625) rotateY(0deg); animation-timing-function: step-end; }
  17.5% { transform: scale(0.125) rotateY(0deg); animation-timing-function: step-end; }
  26.25% { transform: scale(0.25) rotateY(0deg); animation-timing-function: step-end; }
  35% { transform: scale(0.5) rotateY(0deg); animation-timing-function: step-end; }
  43.75% { transform: scale(1) rotateY(0deg); animation-timing-function: step-end; }
  52.5% { transform: scale(1) rotateY(0deg); animation-timing-function: ease-in-out; }
  75%, 100% { transform: scale(1) rotateY(360deg); }
}
nav { display: flex; gap: 32px; font-size: 13px; }
nav a { color: var(--grafito); text-decoration: none; transition: color 120ms ease-out; }
nav a:hover { color: var(--tinta); }

/* Blocks on the 12-col grid: col 1 = margen de referencias (76px, vacío), content from col 2 */
.block { display: grid; grid-template-columns: var(--refcol) 1fr; column-gap: var(--gutter); padding-top: var(--section); padding-bottom: var(--section); }
.block > .body { grid-column: 2; }
.rule { position: relative; }
.rule::before { content: ""; position: absolute; top: 0; left: var(--margin); right: var(--margin); height: 1px; background: var(--tinta); }
.body { max-width: 1000px; }

/* Hero */
.hero { --h1: 64px; grid-template-columns: var(--refcol) minmax(0, 1fr) clamp(220px, 22vw, 300px); padding-top: var(--xxl); padding-bottom: var(--section); align-items: start; }
h1 {
  font-family: var(--serif); font-variation-settings: "opsz" 72; font-weight: 400;
  font-size: var(--h1, 64px); line-height: 1.04; letter-spacing: -0.02em; max-width: 900px;
}
h1 .a { display: block; color: var(--grafito); }
/* Desktop: la línea 1 corre por encima de la figura; la hoja 1:√2 se apoya bajo ella, junto a líneas 2–3, bajada y CTA.
   Entre 1025 y ~1280 px el titular se ajusta apenas (≥ 56 px) para que la línea 1 no se corte. */
@media (min-width: 1025px) {
  .hero { --h1: clamp(56px, calc((100vw - 220px) / 13.9), 64px); }
  h1 .a { white-space: nowrap; }
  .escala { margin-top: calc(var(--h1) * 1.26); }
}
@media (min-width: 721px) { h1 .nb { white-space: nowrap; } }
.sub { margin-top: var(--lg); max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--grafito); }
.actions { margin-top: var(--xl); display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.btn {
  display: inline-block; background: var(--lacre); color: var(--papel);
  font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: 0.01em;
  height: 48px; line-height: 48px; padding: 0 24px; border-radius: 2px; text-decoration: none;
  transition: background-color 120ms ease-out;
}
.btn:hover { background: var(--tinta); }
.btn:focus-visible, a:focus-visible { outline: 1px solid var(--tinta); outline-offset: 3px; }
.offer { line-height: 1.5; }
.offer .t { font-size: 15px; font-weight: 500; }
.offer .d, .mono { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; color: var(--tinta); }
.offer .d { color: var(--grafito); }
/* Figura del hero: hoja 1:√2 a escala legible (etiquetas ≈ 11 px, trazo ≈ 1 px).
   El SVG estático ocupa la caja; el <hyperframes-player> se monta encima y aparece al estar listo. */
.escala { grid-column: 3; position: relative; width: 100%; aspect-ratio: 600 / 848; }
.escala-static, .escala hyperframes-player { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.escala hyperframes-player { background: transparent; opacity: 0; transition: opacity 360ms var(--ease-out, ease-out); }
.escala.live hyperframes-player { opacity: 1; }

/* Section headings */
h2 { font-family: var(--serif); font-variation-settings: "opsz" 72; font-weight: 400; font-size: 40px; line-height: 1.08; letter-spacing: -0.015em; max-width: 760px; text-wrap: balance; }
h3 { font-family: var(--serif); font-variation-settings: "opsz" 36; font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.lead { margin-top: var(--lg); max-width: 640px; font-size: 18px; color: var(--grafito); }

/* Diagnóstico — card-document */
.doc { margin-top: var(--xxl); background: var(--hueso); border: 1px solid var(--piedra); padding: 32px; }
.doc-head { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: var(--lg); padding-bottom: var(--lg); border-bottom: 1px solid var(--piedra); }
.doc-head dt { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; color: var(--grafito); margin-bottom: var(--sm); }
.doc-head dd { font-size: 15px; line-height: 1.45; }
.doc-head dd.strong { font-weight: 500; }
/* Value stack: nombre + qué obtenés, en dos columnas; la garantía cierra el documento */
.doc-list li, .clause { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: baseline; }
.doc-list li { padding: var(--lg) 0; border-bottom: 1px solid var(--piedra); }
.doc-list li:last-child { border-bottom: 0; }
.doc-list h3 { font-size: 22px; }
.doc-list p { color: var(--grafito); max-width: 600px; }
.tag { display: block; margin-top: var(--xs); font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; line-height: 1.3; color: var(--grafito); }
.clause { padding-top: var(--lg); border-top: 1px solid var(--tinta); }
.clause p { font-size: 15px; max-width: 600px; }

/* Para quién — dos columnas con filetes Piedra */
.fit { margin-top: var(--xxl); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--xl); }
.fit h3 { font-size: 22px; padding-bottom: var(--md); }
.fit li { padding: var(--md) 0; border-top: 1px solid var(--piedra); max-width: 460px; }

/* Método — 4 pilares */
.pillars { margin-top: var(--xxl); display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); border-top: 1px solid var(--piedra); }
.pillars li { padding-top: var(--lg); }
.pillars h3 { margin-top: var(--md); }
.pillars p { margin-top: var(--sm); font-size: 15px; color: var(--grafito); max-width: 260px; }
.mark { background: var(--lacre); color: var(--papel); padding: 2px var(--xs); }
.practice { margin-top: var(--xl); padding-top: var(--lg); border-top: 1px solid var(--piedra); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
.practice p { max-width: 460px; font-size: 15px; color: var(--grafito); }
.lede { color: var(--tinta); }

/* CTA */
.cta .actions { margin-top: var(--xl); }
.link { color: var(--lacre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; font-size: 16px; }
.link:hover { color: var(--tinta); }

.steps { margin-top: var(--xl); display: flex; flex-wrap: wrap; gap: var(--sm) var(--md); font-size: 15px; }
.steps li + li::before { content: "→"; content: "→" / ""; color: var(--grafito); margin-right: var(--md); }
.assure { margin-top: var(--lg); max-width: 640px; font-size: 15px; color: var(--grafito); }
.alt { font-size: 15px; color: var(--grafito); }

/* Footer editorial: wordmark apilado + índice + contacto; sin mega-menú */
.foot { position: relative; padding-top: var(--xxl); padding-bottom: var(--xl); }
.foot::before { content: ""; position: absolute; top: 0; left: var(--margin); right: var(--margin); height: 1px; background: var(--tinta); }
.foot-grid { display: grid; grid-template-columns: var(--refcol) 1.4fr 1fr 1fr; column-gap: var(--gutter); }
.foot-brand { grid-column: 2; }
.foot-brand p { margin-top: var(--lg); max-width: 340px; font-size: 15px; color: var(--grafito); }
.wordmark.stacked { flex-direction: column; align-items: flex-start; gap: 10px; }
.wordmark.stacked .name { font-size: 40px; }
.wordmark.stacked .desc { font-size: 12px; padding-left: 0.08em; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.foot-col > .ref:first-child { margin-bottom: var(--xs); }
.foot-col a:not(.link) { text-decoration: none; display: flex; align-items: baseline; gap: var(--sm); transition: color 120ms ease-out; }
.foot-col a:not(.link):hover { color: var(--lacre); }
.muted { color: var(--grafito); }
.foot-base { margin-top: var(--xxl); padding-top: var(--md); border-top: 1px solid var(--piedra); display: flex; justify-content: space-between; gap: var(--lg); }

/* Motion: micro-transiciones de opacidad y desplazamiento corto. Sin bounce ni spring. */
:root { --dur: 280ms; --ease-out: cubic-bezier(.2,.6,.2,1); }
.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js h1 .a, .js h1 .rest { display: block; opacity: 0; transform: translateY(6px); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.js h1 .rest { transition-delay: 90ms; }
.js.ready h1 .a, .js.ready h1 .rest { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js h1 .a, .js h1 .rest { opacity: 1; transform: none; transition: none; }
  .btn, nav a, .foot-col a { transition: none; }
  .q { animation: none; transform: none; }
}

/* Tablet */
@media (max-width: 1024px) {
  .foot-grid { grid-template-columns: var(--refcol) 1fr 1fr; row-gap: var(--xl); }
  .foot-brand { grid-column: 2 / 4; }
  .foot-grid > .foot-col:nth-of-type(1) { grid-column: 2; }
  .hero { grid-template-columns: var(--refcol) minmax(0, 1fr); }
  .escala { grid-column: 2; width: min(280px, 50%); margin-top: var(--xxl); }
  .pillars { grid-template-columns: repeat(2, 1fr); row-gap: var(--xl); }
}
/* Mobile: el margen de referencias colapsa; una sola columna */
@media (max-width: 720px) {
  :root { --margin: 24px; --section: 64px; }
  .top { padding-top: var(--lg); padding-bottom: var(--lg); }
  .wordmark .name, .wordmark .sep { font-size: 26px; }
  .wordmark .desc { font-size: 9.9px; }
  nav { display: none; }
  .block, .hero { grid-template-columns: 1fr; padding-top: var(--xxl); padding-bottom: var(--xxl); }
  .hero { padding-top: var(--xl); }
  .escala { grid-column: 1; width: min(272px, 80%); margin-top: var(--xl); }
  .block > .body { grid-column: 1; }
  h1 { font-size: 40px; line-height: 1.08; letter-spacing: -0.015em; }
  h2 { font-size: 30px; }
  .sub, .lead { font-size: 16px; }
  .doc { padding: var(--lg); margin-top: var(--xl); }
  .doc-head { grid-template-columns: 1fr; gap: var(--md); }
  .doc-list li, .clause { grid-template-columns: 1fr; }
  .doc-list p, .clause p { margin-top: var(--xs); }
  .fit, .practice { grid-template-columns: 1fr; }
  .fit { margin-top: var(--xl); row-gap: var(--lg); }
  .practice p + p { margin-top: var(--md); }
  .pillars { grid-template-columns: 1fr; margin-top: var(--xl); row-gap: 0; }
  .pillars li { padding-bottom: var(--lg); border-bottom: 1px solid var(--piedra); }
  .foot-grid { grid-template-columns: 1fr; row-gap: var(--xl); }
  .foot-brand { grid-column: 1; }
  .foot-base { flex-direction: column; gap: var(--xs); }
  .steps { flex-direction: column; gap: var(--sm); }
}