/* ============================================================
   SISTEMA — tokens, tipografía, primitivas.
   Cargado por los 7 documentos.
   N18 · Ningún archivo de proyectos/ define un token, un @font-face
         ni un valor hexadecimal. Si falta algo, se añade AQUÍ.
   ============================================================ */
:root{
  /* 70% claros */
  --white:#FFFFFF;
  --sand:#F5EFEB;
  --sand-deep:#EAE3DC;
  /* 20% medios */
  --sky:#C8D9E6;
  --navy:#2F4156;
  /* 10% oscuro */
  --navy-deep:#1B2A3A;
  /* acentos — nunca en cuerpo de texto */
  --olive:#6B7F6B;
  --mist:#8FA7B3;
  --amber:#C9A26A;

  /* ---------- tinta · tres oficios, no una tinta estirada ----------
     Ratios verificados por composición alfa + luminancia WCAG 2.1.
                         sobre --sand   sobre --white
     --ink                  12.8:1         14.6:1     todo
     --ink-soft              4.88:1         5.19:1    cuerpo y TODO rótulo pequeño
     --ink-quiet             3.11:1         3.22:1    SOLO texto ≥ 24px
     --ink-faint             2.42:1         2.59:1    NADA textual: filetes, marcos, muestras
     --ink-inv-soft     5.85:1 sobre --navy · 7.68:1 sobre --navy-deep   rótulos pequeños sobre oscuro (nav activo, bisagra.orden)
     --ink-inv-quiet    4.00:1 sobre --navy ⛔ NO <24px · 4.94:1 sobre --navy-deep   texto muy secundario sobre oscuro (colofon/contacto) — contraste en revisión, ver 00l D3/D4
     --rule-inv         1.82:1 sobre --navy-deep      NADA textual: solo filetes
  */
  --ink:var(--navy-deep);
  --ink-soft:rgba(27,42,58,.68);
  --ink-quiet:rgba(27,42,58,.52);
  --ink-faint:rgba(27,42,58,.42);
  --ink-sky:rgba(27,42,58,.78);
  --rule:rgba(27,42,58,.14);
  --ink-inv:var(--sand);
  --ink-inv-soft:rgba(245,239,235,.74);
  --ink-inv-quiet:rgba(245,239,235,.55);
  --rule-inv:rgba(245,239,235,.20);

  /* velo · SUPERFICIE, no tinta: la tabla de tres oficios queda intacta.
     .72 es el piso medido en pixeles sobre las dos fotos del sitio. */
  --velo:rgba(27,42,58,.72);
  /* ritmo vertical del expediente */
  --paso:clamp(20px,2.6vh,28px);

  /* duotono */
  --duo-lo:var(--navy-deep);
  --duo-hi:var(--sand);

  /* movimiento */
  --ease-out:cubic-bezier(.22,.68,0,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --d-fast:180ms;
  --d-base:420ms;
  --d-reveal:900ms;
  --d-scene:1400ms;
}

/* ---------- fallback offline: familias separadas por size-adjust ---------- */
@font-face{font-family:'Fraunces fb A';src:local('Iowan Old Style'),local('IowanOldStyle-Roman');
  size-adjust:106%;ascent-override:93%;descent-override:25%;line-gap-override:0%;}
@font-face{font-family:'Fraunces fb B';src:local('Georgia');
  size-adjust:108%;ascent-override:92%;descent-override:25%;line-gap-override:0%;}
@font-face{font-family:'Fraunces fb C';src:local('Times New Roman');
  size-adjust:116%;ascent-override:85%;descent-override:23%;line-gap-override:0%;}
@font-face{font-family:'Inter fb A';src:local('Helvetica Neue');
  size-adjust:105%;ascent-override:92%;descent-override:23%;line-gap-override:0%;}
@font-face{font-family:'Inter fb B';src:local('Arial');
  size-adjust:105%;ascent-override:92%;descent-override:23%;line-gap-override:0%;}
:root{
  --serif:'Fraunces','Fraunces fb A','Fraunces fb B','Fraunces fb C',serif;
  --sans:'Inter','Inter fb A','Inter fb B',system-ui,sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--sand);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;}
img{display:block;max-width:100%;}
::selection{background:var(--navy);color:var(--sand);}
:focus-visible{outline:2px solid var(--navy);outline-offset:4px;}
section{position:relative;}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(24px,5vw,72px);}

/* ============================================================
   ESCALA TIPOGRÁFICA
   ============================================================ */
.t-display{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.06;max-width:16ch;}
.t-cota{font-family:var(--serif);font-weight:300;font-size:clamp(3.4rem,13vw,10rem);line-height:.92;}
.t-dato{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.2;max-width:24ch;}
.t-h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.1;max-width:20ch;}
.t-h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.3;max-width:28ch;}
.t-sub{font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.5;max-width:44ch;}
.t-lead{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.45;max-width:34ch;}
.t-body{font-family:var(--sans);font-weight:300;font-size:1.0625rem;line-height:1.75;max-width:60ch;color:var(--ink-soft);}
.t-meta{font-family:var(--sans);font-weight:400;font-size:.8rem;line-height:1.6;max-width:40ch;color:var(--ink-soft);}
.t-micro{font-family:var(--sans);font-weight:500;font-size:.66rem;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;}
/* rotulación de aparato: caja baja y tracking corto — mayúsculas con tracking
   amplio a 11px es la peor combinación legible que existe */
.t-nota{font-family:var(--sans);font-weight:500;font-size:11.5px;line-height:1.5;letter-spacing:.10em;}
/* valores de la ficha del expediente: 7 filas de lectura, no un pie de una línea */
.t-ficha{font-family:var(--sans);font-weight:400;font-size:.875rem;line-height:1.55;max-width:52ch;color:var(--ink-soft);}

.on-dark{color:var(--ink-inv);}
.on-dark .t-body,.on-dark .t-meta{color:var(--ink-inv-soft);}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(20px);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);}
.rv.sm{transform:translateY(10px);}
.rv.on{opacity:1;transform:none;}
.rv.s1{transition-delay:90ms;}
.rv.s2{transition-delay:180ms;}
.rv.s3{transition-delay:270ms;}
/* regreso desde un expediente: el bloque de destino no se vuelve a presentar */
.rv.ya{transition:none !important;opacity:1;transform:none;}

/* ============================================================
   IMAGEN — duotono y color pleno
   ============================================================ */
.duo{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-deep);}
.duo img{filter:grayscale(1) contrast(1.14) brightness(.98);width:100%;height:100%;object-fit:cover;}
.duo::before{content:"";position:absolute;inset:0;background:var(--duo-lo);mix-blend-mode:lighten;pointer-events:none;}
.duo::after{content:"";position:absolute;inset:0;background:var(--duo-hi);mix-blend-mode:darken;pointer-events:none;}
.duo--warm{--duo-lo:var(--olive);--duo-hi:var(--sand);}

.full{position:relative;overflow:hidden;background:var(--navy-deep);}
.full img{width:100%;height:100%;object-fit:cover;}
.full .velo{position:absolute;inset:0;background:var(--navy-deep);}

/* ============================================================
   APARATOS — primitivas compartidas
   N4 · ningún texto dentro de un SVG que escala. La rotulación es HTML.
   ============================================================ */
.ap{width:100%;height:auto;display:block;}
.ap .stroke-b{stroke-width:1.25;fill:none;}
.ap .stroke-j{stroke-width:2.5;fill:none;}

.notas{list-style:none;display:grid;gap:10px;margin-top:16px;color:var(--ink-soft);}
.notas--fila{grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;}
.notas li{position:relative;padding-top:14px;}
.notas li::before{content:"";position:absolute;top:0;left:0;width:1px;height:8px;background:var(--ink-faint);}
@media (max-width:767px){
  .notas--fila{grid-auto-flow:row;grid-auto-columns:auto;gap:8px;}
}

/* 1 · luz */
#ap1 .peine{stroke:var(--ink);}
#ap1 .haz{fill:var(--amber);opacity:.5;}
#ap1 .marco{stroke:var(--ink-faint);}
/* 2 · red — pathLength="1" normaliza: cada enlace se dibuja completo en la
   misma duración. Con un dasharray fijo, los cortos aparecían de golpe al final. */
#ap2 .nodo{fill:var(--ink);}
#ap2 .nodo-h{fill:var(--mist);}
#ap2 .enl-e{stroke:var(--olive);}
#ap2 .enl-h{stroke:var(--mist);}
#ap2 .enl path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--d-scene) var(--ease-inout);}
#ap2.tejida .enl path{stroke-dashoffset:0;}
/* 3 · escucha */
.terr .capa{fill:none;stroke-width:1.25;}
.terr .niebla{opacity:.5;}
/* 4 · cartográfico */
#ap4 .plano{transition:transform var(--d-scene) var(--ease-inout);}
#ap4 .marco4{fill:none;stroke:var(--ink);stroke-width:1.25;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rv{transform:none;transition:opacity 200ms linear;}
  .rv.on{opacity:1;}
  #ap2 .enl path{stroke-dashoffset:0;transition:none;}
  #ap4 .plano{transition:none;}
  .par{transform:none !important;}
}