@font-face { font-family: 'JetBrains Mono'; src: url('../fuentes/JetBrainsMono-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fuentes/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fuentes/JetBrainsMono-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fuentes/JetBrainsMono-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Architects Daughter'; src: url('../fuentes/ArchitectsDaughter-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --bg: #1f5196; --white: #ffffff; --line: rgba(255, 255, 255, .5);
  --grid-minor: rgba(255, 255, 255, .028); --grid-major: rgba(255, 255, 255, .056);
  --u: 24px; --m: 16px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --hand: 'Architects Daughter', cursive;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { margin: 0; background: var(--bg); color: var(--white); font-family: var(--mono); }
body { overflow-x: hidden; }
#light { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#paper { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(6, 26, 64, .42) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .1 0 0 0 0 .3 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── Trazado ──
   Por defecto todo está dibujado. Solo la portada, en la primera visita (clase .primera en <html>),
   empieza sin dibujar; al quitar la clase, las transiciones la trazan con sus retardos (--d). */
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, .9s) var(--ease) var(--d, 0s); }
.fade { transition: opacity .7s var(--ease) var(--d, 0s); }
[data-box] { position: relative; }
.bx { position: absolute; background: var(--bx, var(--line)); pointer-events: none;
  transition: transform var(--q, .22s) linear calc(var(--d, 0s) + var(--i) * var(--q, .22s)); }
.bx.t { top: 0; left: 0; right: 0; height: 1px; transform-origin: left; }
.bx.r { top: 0; right: 0; bottom: 0; width: 1px; transform-origin: top; }
.bx.b { bottom: 0; left: 0; right: 0; height: 1px; transform-origin: right; }
.bx.l { top: 0; left: 0; bottom: 0; width: 1px; transform-origin: bottom; }
.hl { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left;
  transition: transform var(--dur, .8s) var(--ease) var(--d, 0s); }

.primera #hoja-1 .draw { stroke-dashoffset: 1; }
.primera #hoja-1 .fade,
.primera #hoja-1 .cota-line .tick,
.primera #hoja-1 .ruler line, .primera #hoja-1 .ruler text,
.primera #hoja-1 .btn.primary::before { opacity: 0; }
.primera #hoja-1 .bx.t, .primera #hoja-1 .bx.b, .primera #hoja-1 .hl { transform: scaleX(0); }
.primera #hoja-1 .bx.r, .primera #hoja-1 .bx.l { transform: scaleY(0); }
.primera #hoja-1 .big text { stroke-dashoffset: 600; fill-opacity: 0; }
.primera #hoja-1 .grid { --r: -160px; }

/* visibility y no display: así reticula.js puede medir las piezas mientras siguen ocultas */
.maquetando main { visibility: hidden; }

/* ── Hoja ── */
.sheet { position: relative; z-index: 1; isolation: isolate; display: flow-root; }
.frame { position: absolute; left: var(--X); top: var(--Y); width: calc(var(--W) + 1px); height: calc(var(--H) + 1px); z-index: -1; pointer-events: none; }
@property --r { syntax: '<length>'; inherits: false; initial-value: 150vmax; }
.grid { position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, var(--u) var(--u), var(--u) var(--u); }
/* la retícula de la portada se revela desde el centro de lo que se ve al llegar */
/* en móvil la portada puede medir más que 150vmax: el radio cubre al menos toda la hoja */
#hoja-1 .grid { --r: max(150vmax, calc(var(--H, 0px) + 50vw)); transition: --r 2.2s cubic-bezier(.45, 0, .2, 1);
  -webkit-mask-image: radial-gradient(circle at 50% var(--cy, 50%), #000 var(--r), transparent calc(var(--r) + 160px));
  mask-image: radial-gradient(circle at 50% var(--cy, 50%), #000 var(--r), transparent calc(var(--r) + 160px)); }

/* Modo pila (móvil, pantallas estrechas y sin JavaScript): una columna que fluye sobre la retícula.
   Cada pieza mide un múltiplo de 24 px; las cajas miden n × 24 + 1 y devuelven ese píxel con margin-bottom: -1px. */
.content { position: relative; width: var(--W, auto); margin: var(--m) var(--m) var(--m) var(--X, var(--m));
  padding: var(--u) calc(var(--cl, 0) * var(--u)); display: flex; flex-direction: column; gap: var(--u); line-height: var(--u); }
.content > *, .cabecera > * { margin: 0; min-width: 0; }
.cabecera { display: flex; flex-direction: column; gap: var(--u); }

/* Modo plano (escritorio, 54 columnas o más): cada pieza se coloca por celdas desde reticula.js */
/* contain: el tamaño ya está fijado, así que un cambio dentro de una hoja (los textos de la carga) no recoloca las demás */
.plano .content { position: absolute; left: var(--X); top: var(--Y); width: var(--W); height: var(--H); margin: 0; padding: 0; contain: size layout;
  display: grid; grid-template-columns: repeat(var(--N), var(--u)); grid-template-rows: repeat(var(--R), var(--u)); gap: 0; }
.plano .cabecera { display: contents; }
.plano .boxed { justify-self: start; align-self: start; width: calc(100% + 1px); height: calc(100% + 1px); margin-bottom: 0; }

.ruler { position: absolute; pointer-events: none; overflow: visible; }
.ruler.x { left: var(--X); top: calc(var(--Y) - var(--m)); }
.ruler.y { left: calc(var(--X) - var(--m)); top: var(--Y); }
.ruler line { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; transition: opacity .25s ease var(--d); }
.ruler text { font: 9px var(--mono); fill: var(--white); transition: opacity .25s ease var(--d); }
.marker { position: absolute; background: var(--white); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.marker.x { width: 1px; height: calc(var(--m) - 6px); left: var(--X); top: calc(var(--Y) - var(--m) + 6px); }
.marker.y { height: 1px; width: calc(var(--m) - 6px); top: var(--Y); left: calc(var(--X) - var(--m) + 6px); }
.marker.on { opacity: 1; }

/* ── Cabecera ── */
.mono-mark { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--white); text-decoration: none; --bx: var(--white);
  width: calc(var(--u) * 2 + 1px); height: calc(var(--u) + 1px); margin-bottom: -1px; }
nav { display: grid; grid-template-columns: repeat(auto-fill, calc(var(--u) * 5)); }
.plano nav { grid-template-columns: repeat(4, calc(var(--u) * 5)); }
nav a { color: var(--white); font-size: 12.5px; font-weight: 600; text-decoration: none; }
nav a:hover, nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }

/* ── Piezas comunes ── */
.label { font-size: 10px; letter-spacing: .22em; }
.big { display: block; overflow: visible; width: 100%; max-width: 552px;
  height: round(up, min(72px, var(--C, 11) * var(--u) * .1304), var(--u)); }
.big.doble { height: round(up, min(144px, var(--C, 11) * var(--u) * .2609), var(--u)); }
.plano .big { width: 552px; height: 72px; }
.plano .big.doble { height: 144px; }
.big text { font-family: var(--mono); font-weight: 700; font-size: 66px; letter-spacing: -3px; stroke: var(--white); stroke-width: 1;
  stroke-dasharray: 600; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(.6, .1, .3, 1) var(--d, 0s), fill-opacity .9s ease calc(var(--d, 0s) + 1.2s); }
.big .solid { fill: var(--white); }
.big .outline { fill: none; }
.cota { display: grid; grid-template-columns: calc(var(--u) * 3) var(--u) auto; font-size: 10px; }
.plano .cota { grid-template-columns: calc(var(--u) * 15) var(--u) auto; }
.cota-line { position: relative; }
.cota-line .hl { top: 12px; right: 0; background: var(--white); }
.cota-line .tick { position: absolute; top: 7px; width: 1px; height: 11px; background: var(--white); transition: opacity .3s ease var(--d); }
.cota-line .tick.a { left: 0; }
.cota-line .tick.b { right: 0; }
.cota span:last-child { grid-column: 3; }
.role { font-size: 15px; font-weight: 300; }
.role strong { font-weight: 600; }
.spec { display: grid; grid-template-columns: calc(var(--u) * 5) 1fr; font-size: 12px; }
.spec dt { letter-spacing: .12em; }
.spec dd { margin: 0; }
.spec.wide { grid-template-columns: 1fr; }
.spec.wide dd + dt { margin-top: var(--u); }
.plano .spec.wide { grid-template-columns: calc(var(--u) * 7) 1fr; }
.plano .spec.wide dd + dt { margin-top: 0; }
.ctas { display: flex; flex-direction: column; gap: var(--u); }
.plano .ctas { display: grid; grid-template-columns: repeat(16, var(--u)); gap: 0; }
.btn { display: block; text-align: center; font-size: 12px; color: var(--white); text-decoration: none; --bx: var(--white);
  width: calc(var(--u) * 9 + 1px); height: calc(var(--u) + 1px); margin-bottom: -1px; }
.plano .ctas .btn.primary { grid-column: 1 / span 7; width: calc(100% + 1px); }
.plano .ctas .btn.secondary { grid-column: 9 / span 8; width: calc(100% + 1px); }
.btn.primary::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .07); transition: opacity .5s ease calc(var(--d, 0s) + .3s); }
@media (hover: hover) { .btn:hover { background: rgba(255, 255, 255, .16); } }
.btn > span { position: relative; }
.caption { font-size: 12px; }
.ext { color: var(--white); font-size: 12px; text-underline-offset: 4px; }

/* ── Esquemas (SVG a escala 1:1 con la retícula) ── */
.schema { display: block; overflow: visible; font-family: var(--mono); max-width: 100%; height: auto; }
.schema.h { display: none; }
.plano .schema.h { display: block; }
.plano .schema.v { display: none; }
.schema .colh { font-size: 10px; letter-spacing: .2em; fill: var(--white); }
.node rect { fill: none; pointer-events: all; stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.node text { font-size: 12.5px; fill: var(--white); }
.node .sub { font-size: 10px; }
.node .pin { fill: var(--bg); stroke: var(--line); }
.node { transition: opacity .35s ease; }
.edge { fill: none; stroke: var(--line); stroke-width: 1;
  transition: stroke-dashoffset var(--dur, .9s) var(--ease) var(--d, 0s), opacity .35s ease, stroke .35s ease; }
.signal { fill: var(--white); opacity: 0; }
.focus .node:not(.hot) { opacity: .3; }
.focus .edge:not(.hot) { opacity: .08; }
.focus .edge.hot { stroke: var(--white); stroke-width: 1.8; }
.node.hot rect, .node.hot .pin { stroke: var(--white); stroke-width: 1.8; }
.focus .signal.hot { opacity: 1; animation: travel 1.3s linear infinite; }
@keyframes travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* se mueven con transform y no con offset-path: así la animación la hace la tarjeta gráfica y no recalcula la página en cada fotograma */
.packet { fill: var(--white); opacity: 0; animation: hop 3.2s linear var(--pd) infinite; }
.parado .packet { animation-play-state: paused; }
@keyframes hop { 0% { transform: none; opacity: 1; } 12% { transform: translateX(var(--l)); opacity: 1; } 12.1%, 100% { transform: translateX(var(--l)); opacity: 0; } }
.hint { font-family: var(--hand); font-size: 19px; fill: var(--white); }
.schema.v .hint { font-size: 15px; }
.hint-arrow { fill: none; stroke: var(--white); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pen { fill: var(--white); opacity: 0; }

/* ── Hoja 2 ── */
.figures { display: grid; grid-template-columns: repeat(auto-fill, calc(var(--u) * 5)); grid-auto-rows: calc(var(--u) * 4); gap: var(--u); }
.plano .figures { grid-template-columns: repeat(4, calc(var(--u) * 6)); row-gap: 0; }
.fig { padding: 0 8px; width: calc(100% + 1px); height: calc(100% + 1px); display: grid; grid-template-rows: var(--u) calc(var(--u) * 2) var(--u); }
.plano .fig { padding: 0 12px; }
.fig-l { font-size: 9.5px; letter-spacing: .16em; }
.fig-n { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: calc(var(--u) * 2); }
.fig-s { font-size: 10px; }
.reto-h { font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
.star, .jobs, .contact { display: grid; grid-template-columns: 1fr; font-size: 12.5px; align-content: start; }
.star dd + dt, .jobs dd + dt, .contact dd + dt { margin-top: var(--u); }
.plano .star, .plano .jobs { grid-template-columns: calc(var(--u) * 5) 1fr; row-gap: var(--u); }
.plano .star dd + dt, .plano .jobs dd + dt, .plano .contact dd + dt { margin-top: 0; }
.star dt { font-size: 10px; letter-spacing: .14em; }
.star dd, .jobs dd, .contact dd { margin: 0; }

/* captura teñida de cianotipo: lo oscuro pasa a blanco y lo claro al azul del plano; al pasar el ratón se ve en color */
.shot { overflow: hidden; width: calc(100% + 1px); height: calc(round(up, var(--C, 11) * var(--u) * .5625, var(--u)) + 1px); margin-bottom: -1px; }
.shot-btn { all: unset; position: absolute; inset: 0; cursor: zoom-in; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.shot .tint { filter: url(#cianotipo); transition: opacity .35s ease; }
.shot .tint.dark { filter: url(#cianotipo-oscuro); }
.shot-btn:focus-visible .tint { opacity: 0; }
@media (hover: hover) { .shot-btn:hover .tint { opacity: 0; } }
/* el contorno va en la caja: dentro del botón lo taparían las propias imágenes */
.shot:has(.shot-btn:focus-visible) { outline: 1px solid var(--white); outline-offset: 3px; }
.lightbox { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 34px; background: rgba(31, 81, 150, .94); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: calc(100vw - 68px); max-height: calc(100vh - 68px); border: 1px solid var(--white); }
@media (prefers-reduced-motion: no-preference) { .lightbox:not([hidden]) { animation: lb-in .25s ease; } }
@keyframes lb-in { from { opacity: 0; } }

/* ── Hoja 3 ── */
.tasks, .rules { display: flex; flex-direction: column; gap: var(--u); }
.plano .tasks { display: grid; grid-template-columns: repeat(2, calc(var(--u) * 13)); grid-template-rows: repeat(2, calc(var(--u) * 8)); }
.plano .rules { display: grid; grid-template-columns: repeat(2, calc(var(--u) * 13)); grid-template-rows: repeat(2, calc(var(--u) * 7)); }
.task, .rule { padding: 0 12px calc(var(--u) + 1px); margin-bottom: -1px; width: calc(100% + 1px); display: grid; align-content: start; }
.task { grid-template-rows: var(--u) calc(var(--u) * 2) auto; }
.rule { grid-template-rows: var(--u) auto auto; }
.plano .task, .plano .rule { padding: 0 12px; margin-bottom: 0; height: calc(100% + 1px); }
.task-l, .rule-l { font-size: 9.5px; letter-spacing: .14em; }
.task-n { font-size: 32px; font-weight: 700; letter-spacing: -1px; line-height: calc(var(--u) * 2); }
.task-s, .rule-s { font-size: 11px; }
.rule-q { font-size: 12.5px; font-weight: 700; }
.rule-s { padding-top: var(--u); }

/* ── Hoja 4 ── */
.ciclo .step { font-size: 10px; letter-spacing: .16em; fill: var(--white); }
.ciclo .desc { font-size: 10.5px; fill: var(--white); }

/* ── Hoja 5 ── */
.gantt text { font-size: 12.5px; fill: var(--white); }
.gantt .sub, .gantt .yr { font-size: 10px; }
.gantt .tick, .gantt .axis { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.gantt .hoy { stroke: var(--white); stroke-width: 1; stroke-dasharray: 3 4; }
.gantt .move { fill: none; stroke: var(--white); stroke-width: 1; stroke-dasharray: 3 4; }
.jobs dt { font-size: 10px; letter-spacing: .12em; }
.jobs b, .edu b { display: block; font-weight: 600; }
.jobs span, .edu span { display: block; }
.job-s { font-size: 11.5px; }
.edu { font-size: 12.5px; }

/* ── Hoja 6 ── */
.contact { font-size: 15px; }
.plano .contact { grid-template-columns: calc(var(--u) * 7) 1fr; row-gap: var(--u); }
.contact dt { font-size: 10px; letter-spacing: .14em; }
.contact .ext { font-size: 15px; }
.contact .btn { width: calc(var(--u) * 8 + 1px); }
.reveal { all: unset; cursor: pointer; font-size: 12px; vertical-align: top; text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 5px; }
.reveal:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }
.contact a[href^="mailto"], .contact a[href^="tel"] { color: var(--white); text-underline-offset: 5px; }
.foto { position: relative; height: calc(var(--u) * 13); }
.plano .foto { height: auto; }
.photo { position: absolute; left: 0; top: 0; width: calc(var(--u) * 8 + 1px); height: calc(var(--u) * 10 + 1px); margin: 0; overflow: hidden; }
.plano .photo { width: calc(var(--u) * 12 + 1px); height: calc(var(--u) * 15 + 1px); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dims { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.dims.h { display: none; }
.plano .dims.h { display: block; }
.plano .dims.v { display: none; }
.dims line { stroke: var(--white); stroke-width: 1; shape-rendering: crispEdges; }
.dims text { font: 10px var(--mono); fill: var(--white); }
.foto .label { position: absolute; left: 0; top: calc(var(--u) * 12); margin: 0; white-space: nowrap; }
.plano .foto .label { top: calc(var(--u) * 18); }

/* ── Pie ── */
/* cambia con cada movimiento del ratón: con contain, ese cambio no obliga a recolocar el resto de la página */
.coords { font-size: 9.5px; height: var(--u); contain: strict; }
.titleblock { font-size: 9.5px; width: calc(min(100%, var(--u) * 14) + 1px); height: calc(var(--u) * 4 + 1px); margin: 0 -1px -1px 0; align-self: flex-end; }
.titleblock .row { display: flex; justify-content: space-between; gap: 12px; height: var(--u); padding: 0 12px; white-space: nowrap; }
.titleblock .row b { font-weight: 600; }
.sign { font-family: var(--hand); font-size: 15px; letter-spacing: .02em; }

/* ── Pantalla de carga ── */
/* contain: los números cambian en cada fotograma y así solo se recoloca la pantalla de carga */
#loader { display: none; position: fixed; inset: 0; z-index: 10; background: var(--bg); transition: background .9s ease; contain: strict; }
.primera #loader { display: block; }
#loader svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#loader .xh { stroke: var(--line); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
#loader.on .xh { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease); }
#loader .ring { fill: none; stroke: var(--white); stroke-width: 1; }
#loader .ring2 { fill: none; stroke: var(--white); stroke-width: 1; stroke-dasharray: 2 7; transform-box: fill-box; transform-origin: center; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ld-tl, .ld-bl, .ld-br, .ld-xy { position: absolute; font-size: 10px; letter-spacing: .18em; }
.ld-tl { top: 30px; left: 34px; }
.ld-bl { bottom: 34px; left: 34px; line-height: 1.8; }
.ld-br { bottom: 30px; right: 34px; text-align: right; }
.ld-br .pct { display: block; font-size: 54px; letter-spacing: -1px; line-height: 1; }
.ld-xy { left: calc(50% + 46px); top: calc(50% + 30px); letter-spacing: .08em; }
.ld-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .2); }
/* la barra crece con transform y no con width: así no hay que recolocar nada en cada fotograma */
.ld-bar i { display: block; height: 100%; background: var(--white); transform: scaleX(0); transform-origin: left; }
#loader > * { transition: opacity .35s ease; }
#loader.out { display: block; background: transparent; pointer-events: none; }
#loader.out > * { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  #loader { display: none !important; }
  .marker, .coords, #light { display: none; }
}
@media (pointer: coarse) {
  .marker, .coords, #light { display: none; }
}
@media (max-width: 599px) { .ruler, .marker { display: none; } }