/* ============================================
   KOLLEKTIV ARTIST — Web pública
   Dirección visual: plano de obra
   ============================================ */
:root{
  --paper:#F4F5F2;      /* papel de plano */
  --sheet:#FBFCFA;      /* hoja/recuadro */
  --ink:#1A1D24;        /* tinta */
  --ink-2:#565D69;      /* cotas y notas */
  --rule:#D5D9D4;       /* líneas finas */
  --rule-2:#E6E9E4;
  --cobalt:#1F4FD1;     /* líneas de construcción */
  --cobalt-soft:rgba(31,79,209,.10);
  --lattice:#C8176B;    /* Lattice: solo para el punto de vista */
  --display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1180px;
  --gutter:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1217; --sheet:#141922; --ink:#E4E8EE; --ink-2:#9AA3B2; --rule:#28303C; --rule-2:#1D242E;
    --cobalt:#7FA2FF; --cobalt-soft:rgba(127,162,255,.12); --lattice:#FF5FA2;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1217; --sheet:#141922; --ink:#E4E8EE; --ink-2:#9AA3B2; --rule:#28303C; --rule-2:#1D242E;
  --cobalt:#7FA2FF; --cobalt-soft:rgba(127,162,255,.12); --lattice:#FF5FA2;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
  background-image:linear-gradient(var(--rule-2) 1px,transparent 1px),linear-gradient(90deg,var(--rule-2) 1px,transparent 1px);
  background-size:32px 32px;background-position:-1px -1px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--lattice);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* --- Cabecera --- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:800;font-stretch:78%;letter-spacing:.06em;font-size:1.05rem;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand svg{width:22px;height:22px;color:var(--cobalt)}
.nav{display:flex;gap:4px 22px;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--ink-2);padding:6px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav .cta{color:var(--cobalt)}

/* --- Tipografía --- */
.label{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt)}
h1,h2,h3{font-family:var(--display);font-weight:800;font-stretch:78%;line-height:1.02;letter-spacing:-.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem)}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:1.35rem;font-stretch:85%;line-height:1.15}
p{margin:0}
.lede{font-size:clamp(1.08rem,1.5vw,1.25rem);color:var(--ink);max-width:58ch}
.muted{color:var(--ink-2)}
.cota{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);letter-spacing:.02em}

/* --- Secciones como láminas de plano --- */
section{padding-block:clamp(64px,9vw,120px)}
.sheet-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 32px;align-items:end;margin-bottom:clamp(32px,5vw,56px);padding-bottom:18px;border-bottom:1.5px solid var(--ink)}
.sheet-head .no{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);text-align:right;line-height:1.5}
.sheet-head .no b{display:block;font-family:var(--display);font-stretch:78%;font-size:2.4rem;color:var(--cobalt);line-height:1}
.sheet-head .intro{grid-column:1/-1;max-width:62ch;color:var(--ink-2);font-size:1.05rem}

/* --- Botones --- */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:13px 18px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer}
.btn:hover{background:var(--cobalt);border-color:var(--cobalt)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{border-color:var(--cobalt);color:var(--cobalt);background:transparent}

/* --- Portada --- */
.hero{padding-block:clamp(40px,6vw,72px) clamp(56px,8vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero h1 em{font-style:normal;color:var(--cobalt)}
.stage{position:relative;background:var(--sheet);border:1.5px solid var(--ink)}
.stage canvas{display:block;width:100%;height:clamp(340px,44vw,540px);touch-action:pan-y;cursor:ew-resize}
.stage-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 14px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:.74rem;color:var(--ink-2)}
.stage-bar button{font:inherit;text-transform:uppercase;letter-spacing:.04em;background:none;border:1px solid var(--lattice);color:var(--lattice);padding:6px 10px;cursor:pointer}
.stage-bar button:hover{background:var(--lattice);color:var(--sheet)}
.stage-status{font-variant-numeric:tabular-nums}
.stage-status.on{color:var(--lattice)}
.corner{position:absolute;width:12px;height:12px;border-color:var(--ink);border-style:solid}
.corner.tl{top:-7px;left:-7px;border-width:1.5px 0 0 1.5px}.corner.tr{top:-7px;right:-7px;border-width:1.5px 1.5px 0 0}
.corner.bl{bottom:-7px;left:-7px;border-width:0 0 1.5px 1.5px}.corner.br{bottom:-7px;right:-7px;border-width:0 1.5px 1.5px 0}

/* --- Cita --- */
.quote{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:880px;margin-inline:auto;text-align:left}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.35;font-style:italic;text-wrap:balance}
.quote cite{font-style:normal;font-family:var(--mono);font-size:.8rem;color:var(--ink-2)}
.band{background:var(--sheet);border-block:1.5px solid var(--ink)}

/* --- Línea de tiempo --- */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);border-left:1px solid var(--rule)}
.timeline li{padding:18px 20px 22px;border-right:1px solid var(--rule);border-top:3px solid var(--rule);display:flex;flex-direction:column;gap:8px;background:var(--paper)}
.timeline li.key{border-top-color:var(--cobalt)}
.timeline li.now{border-top-color:var(--lattice)}
.timeline .yr{font-family:var(--display);font-stretch:78%;font-weight:800;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.timeline h3{font-size:1.02rem;font-family:var(--sans);font-weight:600;font-stretch:100%;line-height:1.3}
.timeline p{font-size:.92rem;color:var(--ink-2)}
.timeline .fig{font-family:var(--mono);font-size:.74rem;color:var(--cobalt)}
.timeline-wrap{overflow-x:auto;border-bottom:1px solid var(--rule);scroll-snap-type:x proximity}
.timeline li{scroll-snap-align:start}
.timeline-hint{margin-top:10px}

/* --- Método: pasos con figura --- */
.method{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:start}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--rule);cursor:pointer}
.steps li:first-child{border-top:1px solid var(--rule)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;color:var(--ink-2);grid-row:span 2;padding-top:3px}
.steps li h3{font-size:1.2rem}
.steps li p{grid-column:2;color:var(--ink-2);font-size:.95rem}
.steps li[aria-current="true"]::before{color:var(--lattice)}
.steps li[aria-current="true"] h3{color:var(--cobalt)}
.steps li:focus-visible{outline:2px solid var(--lattice);outline-offset:2px}
.figure{position:sticky;top:84px;background:var(--sheet);border:1.5px solid var(--ink);display:flex;flex-direction:column}
.figure svg{display:block;width:100%;height:auto}
.figcap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:.74rem;color:var(--ink-2)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:18px;height:0;border-top:2px solid currentColor}
.legend b{font-weight:inherit}

/* --- Capacidades --- */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid var(--ink);background:var(--sheet)}
.cap{padding:28px 26px 30px;display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--rule)}
.cap:last-child{border-right:0}
.cap .glyph{width:56px;height:56px;color:var(--cobalt)}
.cap ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.93rem;color:var(--ink-2)}
.cap li::before{content:"— ";color:var(--cobalt)}

/* --- Casos --- */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.case{background:var(--sheet);border:1.5px solid var(--ink);display:flex;flex-direction:column}
.case .media{aspect-ratio:4/5;max-width:100%;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--paper);display:flex;align-items:center;justify-content:center}
.case .media img{width:100%;height:100%;object-fit:cover}
.case .media svg{width:100%;height:100%}
.case .body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.case .body p{font-size:.94rem;color:var(--ink-2)}
.case dl{margin:4px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-family:var(--mono);font-size:.74rem}
.case dt{color:var(--ink-2)}
.case dd{margin:0}
.case .go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cobalt);text-decoration:none}
.case .go:hover{text-decoration:underline}

/* --- Para quién --- */
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1.5px solid var(--ink)}
.who > div{padding:26px 24px 8px 0;display:flex;flex-direction:column;gap:10px}
.who > div + div{padding-left:24px;border-left:1px solid var(--rule)}
.who p{color:var(--ink-2);font-size:.95rem}

/* --- Contacto / pie --- */
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end}
.contact a.mail{font-family:var(--display);font-stretch:78%;font-weight:800;font-size:clamp(1.6rem,3.4vw,2.6rem);text-decoration:none;border-bottom:3px solid var(--cobalt);word-break:break-word}
.cajetin{border:1.5px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;font-family:var(--mono);font-size:.74rem;background:var(--sheet)}
.cajetin div{padding:8px 12px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:2px}
.cajetin div:nth-child(2n){border-right:0}
.cajetin div:nth-last-child(-n+2){border-bottom:0}
.cajetin span{color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;font-size:.66rem}
footer.foot{border-top:1.5px solid var(--ink);padding-block:28px 40px;font-family:var(--mono);font-size:.76rem;color:var(--ink-2)}
footer.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}

/* --- Página de fundamentos (lectura) --- */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.toc{position:sticky;top:84px;font-family:var(--mono);font-size:.78rem;display:flex;flex-direction:column;gap:2px;border-left:1.5px solid var(--ink)}
.toc a{text-decoration:none;color:var(--ink-2);padding:6px 12px;border-left:3px solid transparent;margin-left:-2px}
.toc a:hover{color:var(--ink);border-left-color:var(--cobalt)}
.prose{font-family:var(--serif);font-size:1.18rem;line-height:1.7;max-width:66ch;display:flex;flex-direction:column;gap:1.1em}
.prose h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-top:1.4em;padding-top:.6em;border-top:1.5px solid var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:.8em;font-size:1.35rem}
.prose .label{margin-top:1.6em;font-family:var(--mono)}
.prose blockquote{margin:.4em 0;padding:4px 0 4px 22px;border-left:3px solid var(--cobalt);font-style:italic}
.prose blockquote{font-size:1.06rem}
.prose blockquote p{margin:0}
.prose blockquote p+p{margin-top:.6em}
ol.refs.biblio{padding-left:0;list-style:none;gap:12px}
ol.refs.biblio li{padding-left:1.4em;text-indent:-1.4em;overflow-wrap:anywhere}
.prose blockquote cite{display:block;font-style:normal;font-family:var(--mono);font-size:.76rem;color:var(--ink-2);margin-top:6px}
.prose .note{font-family:var(--sans);font-size:.92rem;color:var(--ink-2);border:1px dashed var(--rule);padding:14px 16px;background:var(--sheet)}
.prose figure{margin:.6em 0;font-family:var(--sans);background:var(--sheet);border:1.5px solid var(--ink)}
.prose figure svg{display:block;width:100%;height:auto}
.prose figcaption{font-family:var(--mono);font-size:.74rem;color:var(--ink-2);padding:10px 14px;border-top:1px solid var(--rule);line-height:1.5}
.prose sup a{text-decoration:none;color:var(--cobalt);font-family:var(--mono);font-size:.7em}
.table-wrap{overflow-x:auto;border:1.5px solid var(--ink);background:var(--sheet)}
table.data{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:.9rem;min-width:560px}
table.data th,table.data td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
table.data th{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
table.data td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.data tr:last-child td{border-bottom:0}
.formula{font-family:var(--mono);font-size:1rem;background:var(--sheet);border:1.5px solid var(--ink);padding:18px 20px;overflow-x:auto;white-space:nowrap}
.formula b{color:var(--lattice);font-weight:500}
dl.gloss{margin:0;display:flex;flex-direction:column;font-family:var(--sans)}
dl.gloss dt{font-family:var(--display);font-stretch:85%;font-weight:800;font-size:1.25rem;padding-top:18px;border-top:1px solid var(--rule);margin-top:8px}
dl.gloss dd{margin:6px 0 0;font-family:var(--serif);font-size:1.08rem;color:var(--ink)}
.docs{display:grid;grid-template-columns:1fr;gap:16px;font-family:var(--sans)}
.docs article{background:var(--sheet);border:1.5px solid var(--ink);padding:20px;display:flex;flex-direction:column;gap:8px}
.docs article p{font-size:.95rem;color:var(--ink-2)}
.docs .state{font-family:var(--mono);font-size:.72rem;color:var(--lattice);text-transform:uppercase;letter-spacing:.06em}
ol.refs{font-family:var(--sans);font-size:.92rem;color:var(--ink-2);padding-left:1.3em;display:flex;flex-direction:column;gap:6px}

/* --- Responsive --- */
@media (max-width:920px){
  .hero-grid,.method,.contact{grid-template-columns:1fr}
  .figure{position:static}
  .caps,.cases,.who{grid-template-columns:1fr}
  .cap{border-right:0;border-bottom:1px solid var(--rule)}
  .cap:last-child{border-bottom:0}
  .who > div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .doc{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;border-left:0;border-top:1.5px solid var(--ink);padding-top:8px}
  .toc a{border-left:0;margin-left:0;padding:4px 8px}
  .docs{grid-template-columns:1fr}
  .sheet-head{grid-template-columns:1fr}
  .sheet-head .no{text-align:left}
}
@media print{
  :root{--paper:#fff;--sheet:#fff;--ink:#000;--ink-2:#333}
  body{background:#fff!important;background-image:none!important}
  .top,.stage-bar button,.toc,.foot,.noprint{display:none!important}
  .doc{display:block}
  .hero{padding-block:0 12px!important}
  .prose{font-size:11pt;max-width:none}
  .prose h2{break-after:avoid;font-size:16pt}
  .prose a{color:inherit}
}
.prose h2{scroll-margin-top:84px}

/* --- Lámina del grafo --- */
.grafo-caja{display:flex;flex-direction:column;gap:14px}
.grafo-mandos{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.conmutador{display:flex;border:1.5px solid var(--ink);background:var(--sheet)}
.conmutador button{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 16px;border:0;background:transparent;color:var(--ink-2);cursor:pointer}
.conmutador button+button{border-left:1px solid var(--rule)}
.conmutador button[aria-pressed="true"]{background:var(--cobalt);color:var(--paper)}
.conmutador button:focus-visible{outline:2px solid var(--lattice);outline-offset:2px}
.grafo-rango{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0}
.grafo-rango label{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.grafo-rango input{flex:1;min-width:90px;accent-color:var(--lattice)}
.grafo-rango output{font-family:var(--mono);font-size:.8rem;color:var(--lattice);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
#fig-grafo{background:var(--paper)}
#fig-grafo svg{display:block;width:100%;height:auto;max-height:64vh}
.nodo{cursor:pointer}
.nodo circle{transition:r .18s ease,opacity .18s ease}
.nodo:focus-visible{outline:none}
.nodo:focus-visible circle{stroke:var(--lattice);stroke-width:.24}
@media (prefers-reduced-motion:reduce){.nodo circle{transition:none}}
.boton-plano{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 16px;border:1.5px solid var(--ink);background:var(--sheet);color:var(--ink-2);cursor:pointer}
.boton-plano:hover{border-color:var(--cobalt);color:var(--cobalt)}
.boton-plano:focus-visible{outline:2px solid var(--lattice);outline-offset:2px}
.grafo-lienzo{display:block;width:100%;background:#0B0E14;touch-action:none;cursor:grab}
.grafo-lienzo:active{cursor:grabbing}
#fig-grafo:empty{min-height:320px;background:var(--paper)}

/* enlace destacado al documento del modelo y su calibración */
.destacado{display:flex;flex-direction:column;gap:6px;max-width:640px;padding:18px 20px;margin:6px 0 4px;
  border:1px solid var(--cobalt);border-left-width:4px;background:var(--cobalt-soft);color:var(--ink);text-decoration:none}
.prose .destacado{margin:1.4em 0 1.6em}
.destacado .d-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt)}
.destacado .d-titulo{font-family:var(--sans);font-weight:600;font-size:1.25rem;line-height:1.25}
.destacado .d-texto{font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.destacado .d-ir{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cobalt);margin-top:4px}
.destacado:hover .d-ir,.destacado:focus-visible .d-ir{text-decoration:underline}
.destacado:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.toc .toc-destacado{color:var(--cobalt);font-weight:600}
.case .go + .go{margin-top:0;padding-top:6px}
.case .go-2{color:var(--ink-2)}
@media print{.destacado{border-color:#000;background:none}}