/* ═══════════════════════════════════════════════════════════════════════
   FUEGO JOKER — Obra & Ledger
   Sistema BYQ « Foster & Reeves ». Tomado tal cual: la paleta completa
   (Foundation Bone, Quarry Sand, Charcoal Ledger, Stone Ledger, Forest
   Obsidian y Voltage Lime), el radio 0 en toda tarjeta, botón y campo, el
   ojal de 10 px en mayúsculas con cuadrado de 8 px por delante, el tracking
   negativo de -1 a -4 px en todo título de 32 px para arriba, el ritmo de
   80/120/160 px, los filetes de 1 px en vez de sombras, la alternancia
   hueso / arena con una banda obsidiana de máxima intensidad, la columna de
   texto acotada a 448–679 px y el motivo de baldosas escalonadas asomando
   por el borde inferior de la cabecera.
   Adaptado: Aspekta Variable no está disponible sin archivo tipográfico, así
   que se usa su sustituto declarado por el propio sistema —Arial— como única
   familia, con el contraste de peso 400/500/600 que el sistema exige.
   Desviación consciente: el sistema es fotográfico y documental; acá no hay
   una sola imagen, de modo que el papel de la fotografía lo asumen la hoja de
   datos, las baldosas del andamio y la escala tipográfica.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --hueso:#F4F3F0; --arena:#CFC9BE; --carbon:#5E5A53; --piedra:#9F998F;
  --obsidiana:#111A0D; --lima:#E8FD53; --lima-hover:#D4EB4A; --herrumbre:#C9372D;
  --tinta-64:rgba(17,26,13,.64); --tinta-48:rgba(17,26,13,.48);
  --tinta-16:rgba(17,26,13,.16); --tinta-08:rgba(17,26,13,.08);
  --claro-64:rgba(244,243,240,.64); --claro-48:rgba(244,243,240,.48);
  --claro-16:rgba(244,243,240,.16); --claro-08:rgba(244,243,240,.08);
  --fuente:Arial,Helvetica,sans-serif;
  --t-caption:10px; --t-body-sm:12px; --t-body:16px; --t-body-lg:20px;
  --t-h-sm:24px; --t-h:32px; --t-h-lg:48px; --t-display-sm:64px; --t-display:80px;
  --s-4:4px;--s-8:8px;--s-12:12px;--s-16:16px;--s-20:20px;--s-24:24px;--s-32:32px;
  --s-48:48px;--s-64:64px;--s-80:80px;--s-120:120px;--s-160:160px;
  --pagina:1800px; --columna:679px;
  --d-nav:450ms; --d-boton:1000ms; --e:ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--hueso);color:var(--obsidiana);font-family:var(--fuente);
  font-weight:400;font-size:var(--t-body);line-height:1.5;letter-spacing:.25px;overflow-x:clip}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:500}
h1{font-size:var(--t-display);line-height:.9;letter-spacing:-3px}
h2{font-size:var(--t-h-lg);line-height:.92;letter-spacing:-2px}
h3{font-size:var(--t-h-sm);line-height:1.17;letter-spacing:-.5px}
p{margin:0 0 var(--s-16)}
p:last-child{margin-bottom:0}
@media(max-width:767px){h1{font-size:var(--t-display-sm);letter-spacing:-2px}
  h2{font-size:var(--t-h);letter-spacing:-1px}}
@media(max-width:479px){h1{font-size:var(--t-h-lg);letter-spacing:-2px}}
.marco{width:100%;max-width:var(--pagina);margin:0 auto;padding-inline:32px}
@media(max-width:767px){.marco{padding-inline:20px}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ═══ Entradas ════════════════════════════════════════════════════════ */
.js-on .revelar{opacity:0;transform:translateY(16px);
  transition:opacity 700ms ease-out,transform 700ms ease-out}
.js-on .revelar.visto{opacity:1;transform:none}
.filete{height:1px;background:var(--tinta-16);transform-origin:left;margin-bottom:var(--s-32)}
.js-on .filete{transform:scaleX(0);transition:transform 700ms ease-out}
.js-on .filete.visto{transform:scaleX(1)}
.obsidiana .filete{background:var(--claro-16)}

/* ═══ BLOQUE 1.0 — Ojal de sección ════════════════════════════════════
   Cuadrado Stone Ledger de 8 px + rótulo de 10 px en mayúsculas: el
   arranque obligatorio de todo bloque en este sistema. */
.ojal{display:inline-flex;align-items:center;gap:var(--s-8);
  font-size:var(--t-caption);letter-spacing:1px;text-transform:uppercase;
  font-weight:500;color:var(--tinta-48)}
.ojal::before{content:"";width:8px;height:8px;background:var(--piedra);flex:none}
.obsidiana .ojal,.carbon .ojal{color:var(--claro-48)}

/* ═══ BLOQUE 2.0 — Barra de obra (56 px, sin menú desplegable) ════════
   La cabecera anterior ocupaba una franja fija con cinco destinos; acá se
   reduce a marca + acción, y el índice de secciones baja al cuerpo. */
.barra-obra{border-bottom:1px solid var(--tinta-16);background:var(--hueso)}
.barra-obra .marco{height:56px;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s-24)}
.marca-obra{font-size:var(--t-body);font-weight:600;letter-spacing:-.5px}
.marca-obra span{font-weight:400;color:var(--tinta-48);letter-spacing:1px;
  font-size:var(--t-caption);text-transform:uppercase;margin-left:var(--s-12)}
@media(max-width:479px){.marca-obra span{display:none}}

/* ═══ BLOQUE 3.0 — Cabecera obsidiana con andamio ═════════════════════ */
.obra-hero{position:relative;background:var(--obsidiana);color:var(--hueso);
  padding-block:var(--s-120) var(--s-160);overflow:hidden}
.obra-hero h1{max-width:16ch}
.obra-hero .lead{margin-top:var(--s-24);max-width:448px;font-size:var(--t-body-lg);
  letter-spacing:0;color:var(--claro-64)}
.obra-hero .acciones{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center;
  margin-top:var(--s-32)}
.obra-hero .divulgacion{margin-top:var(--s-24);max-width:var(--columna)}
/* Baldosas escalonadas asomando por el borde inferior: el motivo
   arquitectónico del sistema, resuelto con cajas en vez de imagen. */
.andamio{position:absolute;left:0;right:0;bottom:0;display:flex;gap:16px;
  padding-inline:32px;pointer-events:none}
.andamio i{flex:1;background:var(--arena);display:block}
.andamio i:nth-child(1){height:20px}
.andamio i:nth-child(2){height:44px}
.andamio i:nth-child(3){height:12px}
.andamio i:nth-child(4){height:32px}
@media(max-width:767px){.andamio{padding-inline:20px;gap:8px}}

/* ═══ BLOQUE 4.0 — Faenas (ritmo y alternancia de superficie) ═════════ */
.faena{padding-block:var(--s-120)}
.faena.compacta{padding-block:var(--s-80)}
.faena.arena{background:var(--arena)}
.faena.obsidiana{background:var(--obsidiana);color:var(--hueso)}
.faena.carbon{background:var(--carbon);color:var(--hueso)}
.faena h2{margin-top:var(--s-16)}
.faena .intro{margin-top:var(--s-24);max-width:var(--columna)}
.obsidiana .intro,.carbon .intro{color:var(--claro-64)}

/* ═══ BLOQUE 5.0 — Índice de faenas ═══════════════════════════════════ */
.indice-faenas{display:flex;flex-wrap:wrap;gap:1px;background:var(--tinta-16);
  border:1px solid var(--tinta-16);margin-top:var(--s-48)}
.indice-faenas a{flex:1 1 180px;background:var(--hueso);padding:var(--s-20) var(--s-24);
  text-decoration:none;transition:background var(--d-nav) var(--e)}
.indice-faenas a:hover{background:var(--arena)}
.indice-faenas b{display:block;font-size:var(--t-caption);letter-spacing:1px;
  text-transform:uppercase;font-weight:500;color:var(--tinta-48)}
.indice-faenas span{display:block;margin-top:var(--s-8);font-size:var(--t-body-lg);
  letter-spacing:-.5px}

/* ═══ BLOQUE 6.0 — Lista de pasos « we-consult-process-1 » ════════════
   Cifra grande a media tinta en columna fija, texto a la derecha, filete
   superior por fila y 40 px de aire arriba y abajo. */
.pasos{margin-top:var(--s-64);display:flex;flex-direction:column}
.paso{display:flex;align-items:flex-start;gap:56px;padding-block:40px;
  border-top:1px solid var(--tinta-16)}
.paso:last-child{border-bottom:1px solid var(--tinta-16)}
.obsidiana .paso,.obsidiana .paso:last-child{border-color:var(--claro-16)}
.paso .cifra{width:68px;flex:none;font-size:100px;line-height:1.1;letter-spacing:-4px;
  font-weight:500;color:var(--tinta-48)}
.obsidiana .paso .cifra{color:var(--claro-48)}
.paso .texto{display:flex;flex-direction:column;gap:var(--s-12);max-width:var(--columna)}
@media(max-width:767px){.paso{gap:var(--s-24)}
  .paso .cifra{width:48px;font-size:56px;letter-spacing:-2px}}

/* ═══ BLOQUE 7.0 — Hoja de datos « kelvin-stats-4 » ═══════════════════
   Rótulo mono a la izquierda, guía punteada al centro y valor alineado a
   la derecha; franja de firma al pie. La guía es un degradado repetido. */
.hoja{margin-top:var(--s-48);border-top:1px solid var(--tinta-16)}
.renglon{display:grid;grid-template-columns:20ch 1fr auto;gap:var(--s-24);
  align-items:baseline;padding-block:var(--s-20);border-bottom:1px solid var(--tinta-16)}
.rotulo-mono{font-size:var(--t-body-sm);font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--tinta-48)}
.puntos{align-self:center;height:1px;
  background-image:linear-gradient(to right,rgba(17,26,13,.22) 50%,rgba(17,26,13,0) 0);
  background-repeat:repeat-x;background-size:6px 1px}
.valor{text-align:right;font-size:var(--t-body-lg);letter-spacing:0;max-width:46ch}
.valor.pend{color:var(--herrumbre)}
.firma{display:flex;justify-content:space-between;align-items:center;gap:var(--s-24);
  margin-top:var(--s-32);flex-wrap:wrap}
@media(max-width:767px){.renglon{grid-template-columns:1fr auto}
  .puntos{display:none}
  .valor{font-size:var(--t-body)}}
@media(max-width:479px){.renglon{grid-template-columns:1fr}
  .valor{text-align:left}}

/* ═══ BLOQUE 8.0 — Celdas rectangulares ═══════════════════════════════ */
.celdas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--tinta-16);border:1px solid var(--tinta-16);margin-top:var(--s-48)}
.celda{background:var(--hueso);padding:var(--s-32)}
.arena .celda{background:var(--arena)}
.obsidiana .celdas{background:var(--claro-16);border-color:var(--claro-16)}
.obsidiana .celda{background:var(--obsidiana)}
.celda p{margin-top:var(--s-12);color:var(--tinta-64)}
.obsidiana .celda p{color:var(--claro-64)}
.estado{display:inline-block;font-size:var(--t-caption);letter-spacing:1px;
  text-transform:uppercase;font-weight:500;padding:4px 10px;
  border:1px solid var(--tinta-16);color:var(--tinta-64)}
.estado.abierta{border-color:var(--herrumbre);color:var(--herrumbre)}
.obsidiana .estado{border-color:var(--claro-16);color:var(--claro-64)}

/* ═══ BLOQUE 9.0 — Pliego de dos columnas ═════════════════════════════ */
.pliego{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
@media(max-width:991px){.pliego{grid-template-columns:1fr;gap:var(--s-64)}}
.pliego>div{max-width:var(--columna)}

/* ═══ BLOQUE 10.0 — Lista de mandos ═══════════════════════════════════ */
.mandos{list-style:none;margin:var(--s-24) 0 0;padding:0}
.mandos li{display:flex;justify-content:space-between;gap:var(--s-16);
  padding-block:var(--s-12);border-top:1px solid var(--tinta-16)}
.mandos li:last-child{border-bottom:1px solid var(--tinta-16)}
.mandos b{font-weight:500}
.mandos span{color:var(--tinta-48);text-align:right}
.mandos li.pend span{color:var(--herrumbre)}
.obsidiana .mandos li,.obsidiana .mandos li:last-child{border-color:var(--claro-16)}
.obsidiana .mandos span{color:var(--claro-48)}

/* ═══ BLOQUE 11.0 — Fichas del tablero ════════════════════════════════ */
.fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--tinta-16);border:1px solid var(--tinta-16);margin-top:var(--s-48)}
.ficha{background:var(--hueso);padding:var(--s-24);text-align:center}
.arena .ficha{background:var(--arena)}
.ficha .glifo{font-size:var(--t-h-lg);line-height:1;letter-spacing:-2px;font-weight:500}
.ficha .nombre{margin-top:var(--s-16);font-weight:500}
.ficha .rol{margin-top:var(--s-4);font-size:var(--t-caption);letter-spacing:1px;
  text-transform:uppercase;color:var(--tinta-48)}

/* ═══ BLOQUE 12.0 — Bandera de discrepancias ══════════════════════════ */
.bandera{border-left:8px solid var(--herrumbre);padding-left:var(--s-32)}
.bandera ul{list-style:none;margin:var(--s-32) 0 0;padding:0}
.bandera li{padding-block:var(--s-16);border-top:1px solid var(--claro-16);
  max-width:var(--columna);color:var(--claro-64)}
.bandera li b{color:var(--hueso);font-weight:500}
@media(max-width:479px){.bandera{padding-left:var(--s-20);border-left-width:4px}}

/* ═══ BLOQUE 13.0 — Nodos ═════════════════════════════════════════════ */
.nodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--tinta-16);border:1px solid var(--tinta-16);margin-top:var(--s-48)}
.nodo-mapa{background:var(--hueso);padding:var(--s-32);text-decoration:none;display:block;
  transition:background var(--d-nav) var(--e)}
.arena .nodo-mapa{background:var(--arena)}
.nodo-mapa:hover{background:var(--piedra)}
.nodo-mapa .id{font-size:var(--t-caption);letter-spacing:1px;text-transform:uppercase;
  font-weight:500;color:var(--tinta-48)}
.nodo-mapa h3{margin-top:var(--s-12)}
.nodo-mapa p{margin-top:var(--s-12);color:var(--tinta-64)}

/* ═══ BLOQUE 14.0 — Cajones ═══════════════════════════════════════════ */
.cajones{margin-top:var(--s-48);border-top:1px solid var(--tinta-16)}
.cajon{border-bottom:1px solid var(--tinta-16)}
.tirador{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-24);background:none;border:0;padding:var(--s-24) 0;cursor:pointer;
  text-align:left;font-family:inherit;color:inherit}
.tirador .q{font-size:var(--t-h-sm);line-height:1.17;letter-spacing:-.5px;font-weight:500}
.asa{width:14px;height:14px;flex:none;position:relative}
.asa::before,.asa::after{content:"";position:absolute;background:var(--obsidiana);
  transition:transform var(--d-nav) var(--e)}
.asa::before{left:0;right:0;top:6px;height:2px}
.asa::after{top:0;bottom:0;left:6px;width:2px}
.tirador[aria-expanded="true"] .asa::after{transform:scaleY(0)}
.cuerpo{max-height:0;overflow:hidden;transition:max-height var(--d-nav) var(--e)}
.cuerpo.abierto{max-height:560px}
.cuerpo:not(.abierto) .dentro{visibility:hidden}
.dentro{padding-bottom:var(--s-32);max-width:var(--columna);color:var(--tinta-64)}

/* ═══ BLOQUE 15.0 — Acción, aviso y divulgación ═══════════════════════ */
.cta{display:inline-flex;align-items:center;gap:var(--s-12);height:52px;padding-inline:var(--s-32);
  background:var(--lima);color:var(--obsidiana);font-weight:500;text-decoration:none;
  transition:background var(--d-boton) var(--e)}
.cta:hover{background:var(--lima-hover)}
.cta.tinta{background:var(--obsidiana);color:var(--hueso)}
.cta.tinta:hover{background:var(--carbon)}
.chevron{display:inline-block;width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.aviso{font-size:var(--t-caption);letter-spacing:1px;text-transform:uppercase;
  font-weight:500;color:var(--tinta-64)}
.obsidiana .aviso,.obra-hero .aviso,.carbon .aviso{color:var(--claro-64)}
.divulgacion{font-size:var(--t-body-sm);line-height:1.33;color:var(--tinta-48);
  max-width:var(--columna)}
.obsidiana .divulgacion,.obra-hero .divulgacion,.carbon .divulgacion{color:var(--claro-48)}
.enlace{color:inherit;text-decoration:underline;text-decoration-color:var(--herrumbre);
  text-underline-offset:3px}
.obsidiana .enlace,.carbon .enlace{text-decoration-color:var(--lima)}
.pend{color:var(--herrumbre)}

/* ═══ BLOQUE 16.0 — Pie de obra ═══════════════════════════════════════ */
.pie-sitio{background:var(--carbon);color:var(--hueso);padding-block:var(--s-64);
  box-shadow:inset 0 1px var(--claro-16)}
.pie-cols{display:grid;grid-template-columns:1fr 2fr;gap:32px}
@media(max-width:767px){.pie-cols{grid-template-columns:1fr;gap:var(--s-32)}}
.pie-marca{font-size:var(--t-h);line-height:1;letter-spacing:-1px;font-weight:500}
.pie-nota{margin-top:var(--s-12);color:var(--claro-64);max-width:38ch}
.pie-sitio nav{display:flex;flex-wrap:wrap;gap:var(--s-12) var(--s-24)}
.pie-sitio nav a{font-size:var(--t-body-sm);letter-spacing:.25px;color:var(--claro-64);
  text-decoration:none;transition:color var(--d-nav) var(--e)}
.pie-sitio nav a:hover{color:var(--hueso)}
.legal{margin-top:var(--s-24);font-size:var(--t-body-sm);line-height:1.6;
  color:var(--claro-48);max-width:94ch}