/* www.cabrasky.net — la web como sesión de terminal: tokens y paletas «Brasa», estructura de página de man,
   portada con ventana tmux + neofetch, servicios en un rack, git log, finger y barra de estado de vim.
   Temas: data-theme="dark|light" (en <html>, lo fija theme.js). Paletas: data-palette="brasa|monte|ambar|cobalto|granate".
   Solo se anima la ventana de terminal: el resto del contenido se ve desde el primer momento. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden}
.skip{position:absolute;left:-9999px;z-index:300}
.skip:focus{left:16px;top:16px;background:var(--ember);color:var(--ink);padding:8px 14px;border-radius:8px}
.toast{position:fixed;left:50%;top:18px;z-index:260;transform:translate(-50%,-150%);transition:transform .35s cubic-bezier(.2,.75,.2,1);
  background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font:500 14px/1.3 var(--sans);pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}}
:root{
  --n-bg:#0d0c0b; --n-bg2:#151311; --n-card:#1b1916; --term:#0a0908;
  --text:#efe8df; --muted:#a39a8f; --dim:#6d655c; --live:#5fd38d; --warn:#f0b232; --bad:#f87171;
  --ember:#ff6b35; --ember2:#ff9a6e; --ink:#160a04; --tint:4%; --ember-d:#ff6b35;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --max:1240px; --pad:16px; --head:clamp(150px,15vw,210px); --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:dark;
}
:root,[data-palette]{
  --bg:color-mix(in oklab,var(--n-bg),var(--ember) var(--tint));
  --bg2:color-mix(in oklab,var(--n-bg2),var(--ember) var(--tint));
  --card:color-mix(in oklab,var(--n-card),var(--ember) var(--tint));
  --line:color-mix(in oklab,var(--text) 9%,transparent);
  --line2:color-mix(in oklab,var(--text) 16%,transparent);
}
[data-theme="light"]{
  --n-bg:#f6f3ee; --n-bg2:#efebe4; --n-card:#fffdf9; --term:#1a1714;
  --text:#1b1815; --muted:#5b534a; --dim:#8a8177; --live:#1f9d55; --warn:#8a5d00; --bad:#c0392b;
  --ember:#b8410f; --ember2:#9a360c; --ink:#fff; --tint:3%;
  color-scheme:light;
}
[data-theme="light"] :is(:root,[data-palette]),[data-theme="light"][data-palette]{
  --line:color-mix(in oklab,var(--text) 11%,transparent);
  --line2:color-mix(in oklab,var(--text) 20%,transparent);
}
[data-palette="brasa"]{--ember-d:#ff6b35;--ember:#ff6b35;--ember2:#ff9a6e;--ink:#160a04}
[data-theme="light"][data-palette="brasa"],[data-theme="light"] [data-palette="brasa"]{--ember:#b8410f;--ember2:#9a360c;--ink:#fff}
[data-palette="monte"]{--ember-d:#52c48c;--ember:#52c48c;--ember2:#8fdcb3;--ink:#04150c}
[data-theme="light"][data-palette="monte"],[data-theme="light"] [data-palette="monte"]{--ember:#1f7a4f;--ember2:#175e3d;--ink:#fff}
[data-palette="ambar"]{--ember-d:#f0b232;--ember:#f0b232;--ember2:#f7cf78;--ink:#1a1200}
[data-theme="light"][data-palette="ambar"],[data-theme="light"] [data-palette="ambar"]{--ember:#8a5d00;--ember2:#6e4a00;--ink:#fff}
[data-palette="cobalto"]{--ember-d:#7390ff;--ember:#7390ff;--ember2:#a9bbff;--ink:#050a1f}
[data-theme="light"][data-palette="cobalto"],[data-theme="light"] [data-palette="cobalto"]{--ember:#2f52d0;--ember2:#2442ad;--ink:#fff}
[data-palette="granate"]{--ember-d:#ef5f7a;--ember:#ef5f7a;--ember2:#f59aab;--ink:#1d0509}
[data-theme="light"][data-palette="granate"],[data-theme="light"] [data-palette="granate"]{--ember:#b3284a;--ember2:#91203c;--ink:#fff}

html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:68px}
body{background:var(--bg);color:var(--text);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
::selection{background:var(--ember);color:var(--ink)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}
a{color:inherit;text-decoration-color:var(--ember);text-underline-offset:3px}
a:hover{color:var(--ember)}
em{font-style:normal;color:var(--ember)}
strong,b{font-weight:600;color:var(--text)}
u{text-decoration-color:var(--dim);text-underline-offset:3px}
code{font:.86em var(--mono);background:color-mix(in oklab,var(--text) 8%,transparent);padding:.1em .4em;border-radius:5px}
kbd{font:500 11px var(--mono);border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 5px}
.dim{color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.px{display:inline-block;width:.16em;height:.16em;background:var(--ember);margin-left:.05em;vertical-align:baseline}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 var(--live);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ps1{color:var(--ember)}
.caret{display:inline-block;width:.6em;height:1.1em;vertical-align:text-bottom;background:var(--ember);animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

/* cabecera de man con navegación */
.thead{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  max-width:var(--max);margin:0 auto;padding:12px var(--pad);font:500 13px var(--mono);
  background:color-mix(in oklab,var(--bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);justify-self:start}
.brand svg{width:22px;height:22px;color:var(--text)}
.tnav{display:flex;gap:4px}
.tnav a{text-decoration:none;color:var(--muted);padding:4px 10px;border-radius:6px;font-weight:400}
.tnav a::before{content:"./";color:var(--dim)}
.tnav a:hover{color:var(--text);background:var(--line)}
.ttools{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.ttools [role="group"]{display:flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.ttools [role="group"] a{text-decoration:none;padding:3px 9px;color:var(--muted)}
.ttools [role="group"] a[aria-current]{background:var(--text);color:var(--bg)}
.ttools button{font:inherit;color:var(--muted);background:none;border:0;cursor:pointer;padding:4px;display:flex;gap:6px;align-items:center}
.ttools button:hover{color:var(--text)}

main{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* portada */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(48px,8vw,104px) 0 clamp(48px,7vw,88px)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 22px;font:13px var(--mono);color:var(--muted)}
.meta .sep{color:var(--dim)}
.title{font:600 clamp(52px,8.4vw,118px)/.9 var(--sans);letter-spacing:-.055em;margin:0 0 20px}
.syn{font:14px/1.7 var(--mono);color:var(--muted);margin:0 0 22px}
.syn b{color:var(--text);font-weight:500}
.lead{font-size:clamp(18px,1.7vw,21px);line-height:1.55;margin:0 0 28px;max-width:56ch}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:10px;border:1px solid var(--line2);text-decoration:none;font-weight:500;font-size:15px;transition:border-color .2s,background .2s,transform .2s}
.btn:hover{border-color:var(--ember);color:var(--text);transform:translateY(-1px)}
.btn.primary{background:var(--ember);color:var(--ink);border-color:var(--ember)}
.btn.primary:hover{background:var(--ember2);color:var(--ink)}

/* ventana de terminal: siempre oscura (también en modo claro), como una terminal de verdad */
.term{margin:0;border-radius:14px;overflow:hidden;background:var(--term);color:#ece5db;border:1px solid color-mix(in oklab,#fff 10%,transparent);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.2);font:13.5px/1.7 var(--mono)}
.term{--t-acc:var(--ember-d)}
.term .ps1{color:var(--t-acc)}
.term-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:color-mix(in oklab,var(--term),#fff 6%);border-bottom:1px solid rgba(255,255,255,.06)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.term-bar i:first-child{background:var(--t-acc)}
.term-bar span{flex:1;text-align:center;color:#8f877d;font-size:12px;margin-right:40px}
.term-body{padding:18px 20px 14px}
.term .prompt{margin:0;color:#8f877d}
.term .cmd{display:inline-block;vertical-align:bottom;overflow:hidden;white-space:nowrap;color:#ece5db;width:0;animation:type .45s steps(var(--n,8),end) .2s forwards}
@keyframes type{to{width:calc(var(--n) * 1ch)}}
/* neofetch se imprime como en una terminal: tras teclear la orden, la salida aparece de golpe línea a línea, de arriba
   abajo, con la cabra y la información en las mismas líneas. Un recorte baja una línea (1.7em) cada paso: --ln es un
   entero registrado, así que avanza a saltos, sin deslizar. Al final queda muy por debajo: no recorta nada. */
@property --ln{syntax:"<integer>";inherits:false;initial-value:0}
.nf{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr);gap:22px;align-items:start;margin:14px 0;
  --ln:0;clip-path:inset(0 0 calc(100% - var(--ln) * 1.7em) 0);animation:print .8s linear .8s forwards}
@keyframes print{95%{--ln:16}to{--ln:99}}
.nf-logo{aspect-ratio:1;padding-top:6px}
.goat{display:block;width:100%;height:100%;fill:#ece5db}
.nf-photo{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid rgba(255,255,255,.14)}
.goat .lit{fill:var(--t-acc);animation:glow 2.4s 2.2s infinite}
@keyframes glow{50%{opacity:.35}}
.nf-title{margin:0;color:#8f877d;font-size:15px}
.nf-title b{color:var(--t-acc);font-weight:500}
.nf-rule{margin:0 0 2px;color:#5d564e}
.nf-info dl{margin:0}
.nf-info dl div{display:grid;grid-template-columns:12.5ch 1fr}
.nf-info dt{color:var(--t-acc);font-weight:500}
.nf-info dt::after{content:":";color:#8f877d}
.nf-info dd{margin:0;overflow-wrap:anywhere}
.nf-pal{display:flex;flex-wrap:wrap;margin-top:12px}
.nf-pal button{--t-pal:var(--ember-d)}
.nf-pal button,.nf-blocks i{width:28px;height:18px;border:0;padding:0;cursor:pointer;background:var(--t-pal);position:relative;transition:transform .15s}
.nf-pal button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:#ece5db}
.nf-pal button:hover{transform:translateY(-2px)}
.nf-blocks{display:flex}
.nf-blocks i{cursor:default}
.nf-blocks i:nth-child(1){background:#ece5db}.nf-blocks i:nth-child(2){background:#8f877d}.nf-blocks i:nth-child(3){background:#4a443e}
.prompt.last{visibility:hidden;animation:shown 0s 1.65s forwards}   /* el prompt vuelve cuando termina la salida */
@keyframes shown{to{visibility:visible}}
.tmux{display:flex;gap:12px;align-items:center;padding:3px 10px;background:var(--t-acc);color:var(--ink);font:12px/1.6 var(--mono);white-space:nowrap;overflow:hidden}
.tmux{color:#160a04}
.tmux .on{font-weight:600}
.tmux-r{margin-left:auto}
.tmux-r b{color:inherit;font-weight:600}

/* secciones: título de man a la izquierda, cuerpo a la derecha */
.sec{display:grid;grid-template-columns:var(--head) minmax(0,1fr);gap:0 clamp(20px,3vw,48px);padding:clamp(36px,5vw,64px) 0;border-top:1px solid var(--line)}
.sh{position:sticky;top:68px;align-self:start;margin:0;font:500 13px/1.6 var(--mono);letter-spacing:.06em;color:var(--text)}
.sh::before{content:"";display:inline-block;width:7px;height:7px;background:var(--ember);margin-right:10px;vertical-align:1px}
.sb{min-width:0}
.sb>p{margin:0 0 1em;max-width:68ch}
.display{font:600 clamp(30px,3.8vw,50px)/1.04 var(--sans);letter-spacing:-.035em;margin:0 0 22px!important}
.big{font-size:clamp(18px,1.7vw,21px);line-height:1.5;margin:0 0 1em}
.sub{color:var(--muted)}
.prompt.sm{font:13px/1.6 var(--mono);color:var(--muted);margin:0 0 14px}
.cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.cols p{margin:0 0 1em}
.env{position:relative}
.env dl{margin:0;display:grid;gap:10px}
.env dt{font:500 12px var(--mono);color:var(--ember);letter-spacing:.06em;margin-bottom:4px}
.env dd{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.env dd span{font:12.5px var(--mono)}

/* servicios: una caja ASCII por unidad (el color del proyecto se ve en el marco al pasar el ratón) */
.rack{display:grid;gap:10px;margin:0 0 14px}
.unit{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,210px);gap:14px;align-items:start}
.svc{margin:0 0 2px;font:12.5px/1.5 var(--mono);color:var(--muted)}
.svc b{font-weight:500;color:var(--text)}
.svc .dot,.svc .st{color:var(--live)}
.lan .svc .dot,.lan .svc .st{color:var(--warn)}
/* estado real (/api/status): latencia y disponibilidad junto al estado; caído en rojo y sin parpadeo */
.svc .probe{color:var(--dim)}
.unit.down .svc .dot,.unit.down .svc .st{color:var(--bad)}
.face h3{margin:0 0 4px;font:600 20px/1.2 var(--sans);letter-spacing:-.025em}
.face h3 a{text-decoration:none}
.face h3 small{font:400 13px var(--mono);color:var(--muted);letter-spacing:0}
.face p{margin:0 0 8px;color:var(--muted);max-width:62ch}
.notes{margin:0 0 8px;display:grid;gap:6px;max-width:62ch}
.notes dt{font:500 11.5px var(--mono);color:var(--ember);letter-spacing:.04em}
.notes dd{margin:0;color:var(--muted);font-size:15px}
.ports{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.ports li{font:12px var(--mono)}
.side{text-align:right;font:12px/1.5 var(--mono);color:var(--dim);overflow-wrap:anywhere;padding-top:2px}
.side a{color:var(--muted);text-decoration:none}
.side a:hover{color:var(--ember)}

/* proyectos secundarios: desplegable bajo los servicios (nombre · qué es · lenguaje) */
.more{margin-top:26px;border-top:1px solid var(--line)}
.more summary{display:flex;align-items:center;gap:1ch;padding:14px 0;cursor:pointer;list-style:none;font:500 14px var(--mono);color:var(--text);transition:color .2s}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"▸";color:var(--ember);transition:transform .2s var(--ease)}
.more[open] summary::before{transform:rotate(90deg)}
.more summary:hover{color:var(--ember)}
.lsl{list-style:none;padding:0;margin:0 0 4px}
.lsl li{display:grid;grid-template-columns:minmax(0,24ch) minmax(0,1fr) auto;gap:0 2.5ch;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.nm{font:500 14px var(--mono);color:var(--ember);overflow-wrap:anywhere}
.nm a{text-decoration:none;color:inherit}
.nm a:hover{text-decoration:underline}
.cm{font:15px/1.5 var(--sans);color:var(--muted)}
.lang{font:12px var(--mono);color:var(--dim);white-space:nowrap}

/* historial: git log --graph. Cada carril es una columna de 2ch; la línea sigue hacia abajo bajo el «*» o el «|». */
.gitlog{list-style:none;padding:0;margin:0 0 14px;font:13.5px/1.6 var(--mono)}
.cm-row,.cm-conn{display:grid;grid-template-columns:5ch minmax(0,1fr);gap:0 1ch}
.cm-conn{height:1.6em}
.g{display:flex;align-self:stretch}
.g i{position:relative;width:2ch;font-style:normal;font-weight:600;line-height:1.6}
.g i::after{content:"";position:absolute;left:calc(.5ch - 1px);top:1.45em;bottom:-1px;border-left:2px solid currentColor;opacity:.85}
.g i.end::after{display:none}
.g i.pipe{color:transparent}
.g i.pipe::after{top:0;color:var(--c-lane)}
.g .l0{--c-lane:var(--ember)}.g .l1{--c-lane:var(--live)}
.g .l0{color:var(--ember)}
.g .l1{color:var(--live)}
.cm-conn .g i.l1{transform:translateX(-.5ch)}
.c{padding-bottom:22px;min-width:0}
.c-line{margin:0;overflow-wrap:anywhere}
.ti{font:600 17px/1.35 var(--sans);color:var(--text);letter-spacing:-.01em}
.c-meta{margin:2px 0 0;font:13.5px var(--sans);color:var(--muted)}
.c-meta .when{display:inline;font:12.5px var(--mono);color:var(--ember);margin:0}
.c-desc{margin:6px 0 0;font:15px/1.55 var(--sans);color:var(--muted);max-width:64ch}
.when{display:block;font:12.5px var(--mono);color:var(--ember);margin-bottom:2px}
.vol{position:relative;max-width:880px}
.vol>h3{font:600 20px/1.25 var(--sans);letter-spacing:-.02em;margin:2px 0 6px}
.vol>h3 a{text-decoration:none}
.vol>p{margin:0 0 8px;color:var(--muted)}
.vol>ul{margin:0;padding:0;list-style:none}
.vol>ul>li{position:relative;padding-left:18px;margin-bottom:4px}
.vol>ul>li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;background:var(--ember)}
/* grupo (slice): el voluntariado arriba y sus servicios debajo, en árbol ASCII con |-- y `-- (como `tree`) */
.slice{max-width:none}
.slice>.svc{margin-bottom:6px}
.tree{display:grid;gap:12px;margin-top:16px}
.tree .unit{padding-left:4.5ch}
.tree .unit::before{content:"|--\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|";position:absolute;left:0;top:0;bottom:-12px;
  overflow:hidden;white-space:pre;font:12.5px/1.5 var(--mono);color:color-mix(in oklab,var(--text) 32%,transparent);pointer-events:none}
.tree .unit:last-child::before{content:"`--";bottom:auto}
.tree .unit:hover::before{color:var(--c)}
.bugs{font-size:clamp(17px,1.5vw,19px);color:var(--muted)}

/* cajas en ASCII: tecnologías, servicios, voluntariado y la ayuda ([data-box]) llevan un marco de texto +--+ / | |
   que dibuja site.js a su medida; sin JS se quedan sin marco, con el mismo sangrado. Los chips, como [Java]. */
[data-box]{padding:18px 26px}
.frame{--lh:1.25;position:absolute;inset:0;margin:0;font:13px/var(--lh) var(--mono);white-space:pre;overflow:hidden;pointer-events:none;
  color:color-mix(in oklab,var(--text) 32%,transparent);transition:color .2s}
.unit:hover>.frame{color:var(--c)}
.unit.down>.frame{color:var(--bad)}
:is(.env dd span,.ports li)::before{content:"[";color:var(--dim)}
:is(.env dd span,.ports li)::after{content:"]";color:var(--dim)}

/* contacto: finger */
.finger{margin:0 0 8px;max-width:880px}
.finger dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:2px 5ch;font:13.5px/1.7 var(--mono)}
.finger dl div{display:flex;gap:1ch}
.finger dt{color:var(--muted)}
.finger dt::after{content:":"}
.finger dd{margin:0;color:var(--text)}
.finger .plan{grid-column:1/-1;flex-direction:column;gap:0;margin-top:6px}
.finger .plan dd{margin-left:2ch;font:16px/1.55 var(--sans);color:var(--muted)}
.finger .live{width:7px;height:7px;margin-right:2px}
/* contacto */
.ct{font:600 clamp(40px,6.4vw,84px)/.98 var(--sans);letter-spacing:-.045em;margin:0 0 16px!important}
.links{display:grid;margin-top:26px;border-top:1px solid var(--line2);max-width:880px}
.links a,.links .cv{display:grid;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer;grid-template-columns:minmax(110px,auto) 1fr auto;gap:18px;align-items:baseline;padding:18px 4px;border-bottom:1px solid var(--line2);text-decoration:none;transition:padding .25s var(--ease),color .2s}
.links a:hover,.links .cv:hover{padding-left:14px;color:var(--text)}
.links a:hover em,.links .cv:hover em{color:var(--ember)}
.links span{font:14px var(--mono);color:var(--muted)}
.links span b{color:var(--ember);font-weight:500}
.links em{font:500 clamp(18px,2.3vw,26px)/1.2 var(--sans);color:var(--text);letter-spacing:-.02em;overflow-wrap:anywhere}
.links small{font:12px var(--mono);color:var(--dim)}
.tail{display:flex;align-items:center;gap:8px;margin-top:40px;padding:6px 0;font:14px var(--mono);color:var(--muted);background:none;border:0;cursor:text}
.tail-h{color:var(--dim);font-size:12px;margin-left:10px;opacity:0;transition:opacity .2s}
.tail:hover .tail-h,.tail:focus-visible .tail-h{opacity:1}

.tfoot{display:flex;justify-content:space-between;gap:16px;max-width:var(--max);margin:0 auto;padding:22px var(--pad) 90px;border-top:1px solid var(--line);font:500 13px var(--mono)}
.tfoot-c{color:var(--muted);font-weight:400;text-align:center}

/* barra de estado al estilo vim (modo · fichero · sección · ayuda · posición) + línea de órdenes y mensajes debajo */
.pager{position:fixed;left:0;right:0;bottom:0;z-index:210;background:var(--card);color:var(--text);border-top:1px solid var(--line2);font:12.5px/1.6 var(--mono)}
.pager-txt{display:flex;align-items:stretch;width:100%;text-align:left;font:12.5px/1.9 var(--mono);color:inherit;background:none;border:0;padding:0;cursor:text}
.pager-txt span{padding:0 1.2ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pager .m{background:var(--ember);color:var(--ink);font-weight:600;letter-spacing:.04em}
.pager.cmd .m{background:var(--live);color:#04150c}
.pager .f{background:color-mix(in oklab,var(--text) 14%,var(--card))}
.pager .s{color:var(--ember)}
.pager .h{flex:1;color:var(--dim)}
.pager .r{background:color-mix(in oklab,var(--text) 14%,var(--card));color:var(--muted)}
.pager-cmd[hidden],.pager-msg[hidden]{display:none}
.pager-cmd label{display:flex;gap:2px;padding:4px 1.2ch;border-top:1px solid var(--line)}
.pager-cmd input{flex:1;min-width:0;font:inherit;color:inherit;background:none;border:0;outline:0;padding:0;caret-color:var(--ember)}
.pager-msg{margin:0;padding:4px 1.2ch;color:var(--text);border-top:1px solid var(--line);white-space:normal}
.help{position:fixed;right:16px;bottom:48px;z-index:220;width:min(470px,calc(100% - 32px));background:var(--card);color:var(--text);
  font:13.5px/1.7 var(--mono);box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.help[hidden]{display:none}
.help p{margin:0 0 8px;color:var(--ember)}
.help dl{margin:0 0 12px}
.help dl div{display:grid;grid-template-columns:8ch 1fr}
.help dt{font-weight:500}
.help dd{margin:0;color:var(--muted)}
.help button{font:inherit;color:var(--ember);background:none;border:0;padding:0;cursor:pointer}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .term{max-width:640px}
}
@media (max-width:860px){
  .thead{grid-template-columns:1fr auto}
  .tnav{display:none}
  .sec{grid-template-columns:1fr}
  .sh{position:static;margin-bottom:16px}
  .cols{grid-template-columns:1fr}
  .unit{grid-template-columns:minmax(0,1fr);gap:10px}
  .side{text-align:left}
  .lsl li{grid-template-columns:minmax(0,1fr) auto;gap:2px 2ch}
  .lang{order:2;text-align:right}
  .cm{grid-column:1/-1;order:3}
}
@media (max-width:520px){
  .tl-l{display:none}
  .term{font-size:12px;margin:0 -4px}
  .term-body{padding:14px 14px 10px}
  .nf{grid-template-columns:1fr}
  .nf-logo{width:96px}
  .nf-info dl div{grid-template-columns:12ch 1fr}
  .tmux span:nth-child(3){display:none}
  .pager .f,.pager .h{display:none}
  .pager .s{flex:1}
  .finger dl{grid-template-columns:1fr}
  [data-box]{padding:16px 18px}
  .links a,.links .cv{grid-template-columns:1fr auto;gap:4px 12px}
  .links span{grid-column:1/-1}
  .tfoot{flex-wrap:wrap}
  .tfoot-c{order:3;flex-basis:100%;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .term .cmd{width:calc(var(--n) * 1ch)}
  .nf,.prompt.last{animation:none;clip-path:none;visibility:visible}
}

/* ── CV: al imprimir solo sale <article class="cv"> (el resto es el marco interactivo). Estructura de CV (una columna,
   fechas a la derecha) con unos pocos guiños a la web: el color de la paleta, la mono para etiquetas y fechas, la
   cabra, el píxel tras el nombre, los cuadrados de los títulos y CABRASKY(1) al pie. El margen es el padding de .cv
   (no el de @page): así sale igual aunque el diálogo de impresión tenga «márgenes: ninguno». ── */
.cv{display:none}
@page{size:A4;margin:0}
@media print{
  html,body{background:#fff!important;color:#111}
  body{font:9.3pt/1.4 var(--sans);margin:0}
  body>:not(.cv){display:none!important}
  .cv{--acc:#b8410f;display:block;padding:11mm 14mm 13mm;color:#1b1815;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  [data-palette="monte"] .cv{--acc:#1f7a4f}[data-palette="ambar"] .cv{--acc:#8a5d00}
  [data-palette="cobalto"] .cv{--acc:#2f52d0}[data-palette="granate"] .cv{--acc:#b3284a}
  .cv,.cv *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cv a{color:inherit;text-decoration:none}
  .cv p,.cv ul,.cv dl,.cv dd{margin:0}
  .cv strong,.cv b{color:#111;font-weight:600}
  .cv em{color:var(--acc);font-style:normal}
  .cv code{background:none;padding:0;font-size:.95em}
  /* cabecera: cabra · nombre y rol · contacto */
  .cv-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 4.5mm;align-items:center;padding-bottom:3mm;border-bottom:1pt solid #1b1815}
  .cv-goat svg{display:block;width:12.5mm;height:12.5mm;color:#1b1815}
  .cv-goat [fill^="#"]{fill:var(--acc)}
  .cv-photo{display:block;width:19mm;height:19mm;object-fit:cover;border:.5pt solid #cfc8bf}
  .cv-n{font-size:21pt;font-weight:600;letter-spacing:-.035em;line-height:1.05}
  .cv-n i{display:inline-block;width:.17em;height:.17em;margin-left:.05em;background:var(--acc)}
  .cv-r{margin-top:1mm!important;font:8.3pt var(--mono);color:#5b534a}
  .cv-ct div{display:grid;grid-template-columns:auto auto;justify-content:end;gap:2.5mm}
  .cv-ct dt{font:7.5pt/1.6 var(--mono);color:var(--acc);text-align:right}
  .cv-ct dd{font:8pt/1.6 var(--mono);color:#1b1815}
  .cv-lead{margin:2.8mm 0 0!important;font-size:9.8pt;color:#2b2622}
  /* títulos de sección: el cuadrado de la web y una línea hasta el margen */
  .cv section{margin-top:3.4mm}
  .cv h2{display:flex;align-items:center;gap:2mm;margin:0 0 1.6mm;font:500 7.8pt/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#1b1815;break-after:avoid}
  .cv h2::before{content:"";width:1.6mm;height:1.6mm;background:var(--acc)}
  .cv h2::after{content:"";flex:1;border-top:.5pt solid #cfc8bf}
  .cv-sk div{display:grid;grid-template-columns:20mm 1fr;gap:3mm;align-items:baseline}
  .cv-sk dt{font:500 7.3pt var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
  .cv-sk dd{color:#2b2622}
  /* entradas: título a la izquierda, fecha (mono, en color) a la derecha */
  .cv-e{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 5mm;margin-bottom:1.9mm;break-inside:avoid}
  .cv-e:last-child{margin-bottom:0}
  .cv-t span{color:#5b534a}
  .cv-t a{font:8pt var(--mono);color:var(--acc)}
  .cv-w{font:7.8pt var(--mono);color:var(--acc);text-align:right;white-space:nowrap;padding-top:.35mm}
  .cv-w.cv-tg{color:#7a7168}
  .cv-x{grid-column:1/-1;color:#3a342e}
  ul.cv-x,.cv-more{list-style:none;padding:0}
  .cv-x li,.cv-more li{position:relative;margin:.35mm 0;padding-left:3.6mm}
  .cv-x li::before,.cv-more li::before{content:"";position:absolute;left:.3mm;top:.62em;width:1.1mm;height:1.1mm;background:var(--acc)}
  .cv-sub{margin:2.2mm 0 .6mm!important;font:500 7.3pt var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#5b534a}
  .cv-more{color:#3a342e}
  .cv-more span{color:#7a7168}
  /* pie de página de man, en cada hoja */
  .cv-f{position:fixed;left:14mm;right:14mm;bottom:5.5mm;display:flex;justify-content:space-between;margin:0;font:6.8pt var(--mono);color:#a39a8f}
}